@charset "utf-8"; 
/* ----------------------------------------------
UI.CSS - UI Components & Presets
* writer : uxcamp
* version : 1.0.0
* last update : 2025.07.11
* purpose : UI 구성요소 프리셋 및 유틸리티 클래스
* license : © 2025 uxcamp. All rights reserved.
------------------------------------------------*/

@import url(//cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css); 
@import url('https://cdn.jsdelivr.net/gh/toss/tossface/dist/tossface.css');

/* ========================================
   기본 리셋 및 설정
======================================== */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin:0; padding:0; border:0; font-size:100%; vertical-align:baseline; box-sizing:border-box; -webkit-box-sizing:border-box;} 

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block;} 
body { line-height:1;} 
ol, ul {list-style:none;} 
blockquote, q { quotes:none;} 
blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none;} 
table { border-collapse:separate; border-spacing:0;} 

legend { position:absolute; width:0; height:0; overflow:hidden; font-size:0; text-indent:-9999px; line-height:0;} 
caption { position:absolute; width:0; height:0; overflow:hidden; font-size:0; text-indent:-9999px; line-height:0;} 
label { cursor:pointer;}

/* 기본 설정 */ 
body > * :disabled { cursor:not-allowed !important;} 

/* ========================================
   UI 컴포넌트 색상 시스템 (layout.css와 동일한 색상 사용)
======================================== */
:root {
    /* === 브랜드 컬러 === */
    --ui-color-secondary: #64748b;
    
    /* === 시맨틱 컬러 === */
    --ui-color-success: #64a644;
    --ui-color-warning: #fc6e51;
    --ui-color-danger: #ed5565;
    --ui-color-info: #1cb6ed;
    --ui-color-dark: #434a54;
    --ui-color-light: #aab2bd;
    
    /* === 확장 색상 팔레트 === */
    --ui-color-pink: #ec87c0;
    --ui-color-purple: #ac92ec;
    --ui-color-yellow: #ffce54;
    --ui-color-green: #a0d468;
    --ui-color-mint: #48cfad;
    --ui-color-lightblue: #4fc1e9;
    --ui-color-blue: #5d9cec;
    
    /* === 확장 색상 별칭 (중복 제거) === */
    --ui-color-red: var(--ui-color-danger);    /* #ed5565와 동일 */
    --ui-color-orange: var(--ui-color-warning); /* #fc6e51와 동일 */
    
    /* === 그레이 스케일 === */
    --ui-color-white: #ffffff;
    --ui-color-white-only: #ffffff;
    --ui-color-gray-50: #fafafa;
    --ui-color-gray-100: #f5f5f5;
    --ui-color-gray-200: #ddd;
    --ui-color-gray-300: #e0e0e0;
    --ui-color-gray-400: #bdbdbd;
    --ui-color-gray-500: #9e9e9e;
    --ui-color-gray-600: #757575;
    --ui-color-gray-700: #616161;
    --ui-color-gray-800: #424242;
    --ui-color-gray-900: #212121;
    --ui-color-black: #000000;
    --ui-color-black-only: #000000;
    
    /* === 투명도 컬러 === */
    --ui-color-overlay-100: rgba(15, 23, 42, 0.8);
    --ui-color-overlay-200: rgba(15, 23, 42, 0.4);
    
    /* === 레거시 호환성 (기존 변수명 유지) === */
    --ui-color-default: var(--ui-color-gray-300);
    --ui-color-gray: var(--ui-color-gray-600);
    --ui-color-cleargray: var(--ui-color-gray-200);
    --ui-color-clearlowgray: var(--ui-color-gray-100);
    --ui-color-dark: var(--ui-color-gray-800);
    --ui-color-light: var(--ui-color-gray-500);
    
    /* === 다크모드 색상 시스템 === */
    --ui-dark-bg-primary: var(--ui-color-gray-900);
    --ui-dark-bg-secondary: var(--ui-color-gray-800);
    --ui-dark-bg-tertiary: var(--ui-color-gray-700);
    --ui-dark-text-primary: var(--ui-color-white);
    --ui-dark-text-secondary: var(--ui-color-gray-300);
    --ui-dark-text-placeholder: var(--ui-color-gray-500);
    --ui-dark-text-disabled: var(--ui-color-gray-600);
    --ui-dark-border-primary: var(--ui-color-gray-600);
    --ui-dark-border-secondary: var(--ui-color-gray-500);

    /* === UI 컴포넌트 스타일링 === */
    --ui-radius-xs: .3rem; 
    --ui-radius-s: .46rem; 
    --ui-radius-m: .7rem; 
    --ui-radius-l: 1.4rem; 
    --ui-radius-x: 2.6rem; 
    --ui-radius-circle: 50%; 
    
    --ui-padding-s: 0.8rem; 
    --ui-padding-m: 1.0rem; 
    --ui-padding-l: 1.4rem; 
    --ui-padding-x: 1.8rem;

    --ui-gap-s: 0.8rem;
    --ui-gap-m: 1.0rem;
    --ui-gap-l: 1.4rem;
    --ui-gap-x: 1.8rem;
    
    /* === 레거시 호환성 === */
    --round-s: var(--ui-radius-s);
    --round-m: var(--ui-radius-m);
    --round-l: var(--ui-radius-l);
    --round-x: var(--ui-radius-x);
    --round-circle: var(--ui-radius-circle);
    
    --padding-s: var(--ui-padding-s);
    --padding-m: var(--ui-padding-m);
    --padding-l: var(--ui-padding-l);
    --padding-x: var(--ui-padding-x);
    
    --gap-s: var(--ui-gap-s);
    --gap-m: var(--ui-gap-m);
    --gap-l: var(--ui-gap-l);
    --gap-x: var(--ui-gap-x);
}

/* ========================================
   다크모드 색상 반전 시스템
======================================== */
:root.darkMode {
    /* === 다크모드 그레이 스케일 반전 === */
    --ui-color-white: #212121;
    --ui-color-gray-50: #424242;
    --ui-color-gray-100: #616161;
    --ui-color-gray-200: #444;
    --ui-color-gray-300: #9e9e9e;
    --ui-color-gray-400: #bdbdbd;
    --ui-color-gray-500: #e0e0e0;
    --ui-color-gray-600: #eeeeee;
    --ui-color-gray-700: #f5f5f5;
    --ui-color-gray-800: #fafafa;
    --ui-color-gray-900: #ffffff;
    --ui-color-black: #ffffff;
    
    /* === 다크모드 투명도 컬러 === */
    --ui-color-overlay-100: rgba(0, 0, 0, 0.9);
    --ui-color-overlay-200: rgba(0, 0, 0, 0.6);
    

} 

/* ========================================
   스크롤바 및 선택 영역
======================================== */
/* 웹킷 스크롤바 */
::-webkit-scrollbar { height:10px; width:10px;} 
::-webkit-scrollbar-thumb { border:2px solid transparent; background-color:var(--ui-color-gray-400); background-clip:padding-box; border-radius:20px} 

/* 선택 영역 */
::selection { background:var(--ui-color-gray-800); color:var(--ui-color-white); text-shadow:none;} 
::-webkit-selection { background:var(--ui-color-gray-800); color:var(--ui-color-white); text-shadow:none;} 

/* MS clear 버튼 제거 */
input::-ms-clear { display:none;} 

/* 플레이스홀더 */
input::-webkit-input-placeholder { color:var(--ui-color-gray-500) !important;} 

/* ========================================
   글로벌 유틸리티 클래스
======================================== */
.tossface {font-family:Tossface;}
.animate {transition:all .2s cubic-bezier(.7,0,.3,1);transform:all .2s cubic-bezier(.7,0,.3,1);-webkit-transition:all .2s cubic-bezier(.7,0,.3,1);}
.ellipsis {overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.restrict {overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.required {display:block;}
.filter_blur6 {filter:blur(6px); -webkit-filter:blur(6px);}
.filter_blur10 {-webkit-filter:blur(10px);filter:blur(10px);}
.sr-only {position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; border:0; clip-path:inset(50%);clip:rect(0 0 0 0);}

/* 둥근 모서리 유틸리티 */
.round-xs {border-radius:var(--ui-radius-xs) !important;}
.round-s {border-radius:var(--ui-radius-s) !important;}
.round-m {border-radius:var(--ui-radius-m) !important;}
.round-l {border-radius:var(--ui-radius-l) !important;}
.round-x {border-radius:var(--ui-radius-x) !important;}
.round-circle {border-radius:var(--ui-radius-circle) !important;}

/* 패딩 유틸리티 */
.padding-s {padding:var(--ui-padding-s) !important;}
.padding-m {padding:var(--ui-padding-m) !important;}
.padding-l {padding:var(--ui-padding-l) !important;}
.padding-x {padding:var(--ui-padding-x) !important;}

/* 간격 유틸리티 */
.gap-s {gap:var(--ui-gap-s) !important;}
.gap-m {gap:var(--ui-gap-m) !important;}
.gap-l {gap:var(--ui-gap-l) !important;}
.gap-x {gap:var(--ui-gap-x) !important;}

/* ========================================
   색상 유틸리티 클래스 (layout.css 색상 시스템 사용)
======================================== */
/* 텍스트 색상 */
.color-prime {color:var(--color-prime) !important;}
.color-secondary {color:var(--ui-color-secondary) !important;}
.color-white {color:var(--ui-color-white) !important;}
.color-black {color:var(--ui-color-black) !important;}
.color-success {color:var(--ui-color-success) !important;}
.color-warning {color:var(--ui-color-warning) !important;}
.color-danger {color:var(--ui-color-danger) !important;}
.color-info {color:var(--ui-color-info) !important;}
.color-gray-50 {color:var(--ui-color-gray-50) !important;}
.color-gray-100 {color:var(--ui-color-gray-100) !important;}
.color-gray-200 {color:var(--ui-color-gray-200) !important;}
.color-gray-300 {color:var(--ui-color-gray-300) !important;}
.color-gray-400 {color:var(--ui-color-gray-400) !important;}
.color-gray-500 {color:var(--ui-color-gray-500) !important;}
.color-gray-600 {color:var(--ui-color-gray-600) !important;}
.color-gray-700 {color:var(--ui-color-gray-700) !important;}
.color-gray-800 {color:var(--ui-color-gray-800) !important;}
.color-gray-900 {color:var(--ui-color-gray-900) !important;}

/* 확장 색상 */
.color-dark {color:var(--ui-color-dark) !important;}
.color-light {color:var(--ui-color-light) !important;}
.color-pink {color:var(--ui-color-pink) !important;}
.color-purple {color:var(--ui-color-purple) !important;}
.color-red {color:var(--ui-color-red) !important;}
.color-orange {color:var(--ui-color-orange) !important;}
.color-yellow {color:var(--ui-color-yellow) !important;}
.color-green {color:var(--ui-color-green) !important;}
.color-mint {color:var(--ui-color-mint) !important;}
.color-lightblue {color:var(--ui-color-lightblue) !important;}
.color-blue {color:var(--ui-color-blue) !important;}

/* 레거시 호환성 */
.color-pr {color:var(--color-prime) !important;}
.color-de {color:var(--ui-color-default) !important;}
.color-wh {color:var(--ui-color-white) !important;}
.color-wh-only {color:#fff !important;}
.color-bl {color:var(--ui-color-black) !important;}
.color-bl-only {color:#000 !important;}
.color-gr {color:var(--ui-color-gray) !important;}
.color-cg {color:var(--ui-color-cleargray) !important;}
.color-clg {color:var(--ui-color-clearlowgray) !important;}
.color-su {color:var(--ui-color-success) !important;}
.color-in {color:var(--ui-color-info) !important;}
.color-wa {color:var(--ui-color-warning) !important;}
.color-da {color:var(--ui-color-danger) !important;}

/* 배경 색상 */
.bg-prime {background:var(--color-prime) !important;}
.bg-secondary {background:var(--ui-color-secondary) !important;}
.bg-white {background:var(--ui-color-white) !important;}
.bg-black {background:var(--ui-color-black) !important;}
.bg-success {background:var(--ui-color-success) !important;}
.bg-warning {background:var(--ui-color-warning) !important;}
.bg-danger {background:var(--ui-color-danger) !important;}
.bg-info {background:var(--ui-color-info) !important;}
.bg-gray-50 {background:var(--ui-color-gray-50) !important;}
.bg-gray-100 {background:var(--ui-color-gray-100) !important;}
.bg-gray-200 {background:var(--ui-color-gray-200) !important;}
.bg-gray-300 {background:var(--ui-color-gray-300) !important;}
.bg-gray-400 {background:var(--ui-color-gray-400) !important;}
.bg-gray-500 {background:var(--ui-color-gray-500) !important;}
.bg-gray-600 {background:var(--ui-color-gray-600) !important;}
.bg-gray-700 {background:var(--ui-color-gray-700) !important;}
.bg-gray-800 {background:var(--ui-color-gray-800) !important;}
.bg-gray-900 {background:var(--ui-color-gray-900) !important;}

/* 확장 색상 배경 */
.bg-dark {background:var(--ui-color-dark) !important;}
.bg-light {background:var(--ui-color-light) !important;}
.bg-pink {background:var(--ui-color-pink) !important;}
.bg-purple {background:var(--ui-color-purple) !important;}
.bg-red {background:var(--ui-color-red) !important;}
.bg-orange {background:var(--ui-color-orange) !important;}
.bg-yellow {background:var(--ui-color-yellow) !important;}
.bg-green {background:var(--ui-color-green) !important;}
.bg-mint {background:var(--ui-color-mint) !important;}
.bg-lightblue {background:var(--ui-color-lightblue) !important;}
.bg-blue {background:var(--ui-color-blue) !important;}

/* 레거시 호환성 */
.bg-pr {background:var(--color-prime) !important;}
.bg-de {background:var(--ui-color-default) !important;}
.bg-wh {background:var(--ui-color-white) !important;}
.bg-wh-only {background:#fff !important;}
.bg-bl {background:var(--ui-color-black) !important;}
.bg-gr {background:var(--ui-color-gray) !important;}
.bg-cg {background:var(--ui-color-cleargray) !important;}
.bg-clg {background:var(--ui-color-clearlowgray) !important;}
.bg-su {background:var(--ui-color-success) !important;}
.bg-in {background:var(--ui-color-info) !important;}
.bg-wa {background:var(--ui-color-warning) !important;}
.bg-da {background:var(--ui-color-danger) !important;}

/* 테두리 색상 */
.line-prime {border:1px solid var(--color-prime) !important;}
.line-secondary {border:1px solid var(--ui-color-secondary) !important;}
.line-white {border:1px solid var(--ui-color-white) !important;}
.line-black {border:1px solid var(--ui-color-black) !important;}
.line-success {border:1px solid var(--ui-color-success) !important;}
.line-warning {border:1px solid var(--ui-color-warning) !important;}
.line-danger {border:1px solid var(--ui-color-danger) !important;}
.line-info {border:1px solid var(--ui-color-info) !important;}
.line-gray-50 {border:1px solid var(--ui-color-gray-50) !important;}
.line-gray-100 {border:1px solid var(--ui-color-gray-100) !important;}
.line-gray-200 {border:1px solid var(--ui-color-gray-200) !important;}
.line-gray-300 {border:1px solid var(--ui-color-gray-300) !important;}
.line-gray-400 {border:1px solid var(--ui-color-gray-400) !important;}
.line-gray-500 {border:1px solid var(--ui-color-gray-500) !important;}
.line-gray-600 {border:1px solid var(--ui-color-gray-600) !important;}
.line-gray-700 {border:1px solid var(--ui-color-gray-700) !important;}
.line-gray-800 {border:1px solid var(--ui-color-gray-800) !important;}
.line-gray-900 {border:1px solid var(--ui-color-gray-900) !important;}

/* 확장 색상 테두리 */
.line-dark {border:1px solid var(--ui-color-dark) !important;}
.line-light {border:1px solid var(--ui-color-light) !important;}
.line-pink {border:1px solid var(--ui-color-pink) !important;}
.line-purple {border:1px solid var(--ui-color-purple) !important;}
.line-red {border:1px solid var(--ui-color-red) !important;}
.line-orange {border:1px solid var(--ui-color-orange) !important;}
.line-yellow {border:1px solid var(--ui-color-yellow) !important;}
.line-green {border:1px solid var(--ui-color-green) !important;}
.line-mint {border:1px solid var(--ui-color-mint) !important;}
.line-lightblue {border:1px solid var(--ui-color-lightblue) !important;}
.line-blue {border:1px solid var(--ui-color-blue) !important;}

/* 레거시 호환성 */
.line-pr {border:1px solid var(--color-prime) !important;}
.line-de {border:1px solid var(--ui-color-default) !important;}
.line-wh {border:1px solid var(--ui-color-white) !important;}
.line-bl {border:1px solid var(--ui-color-black) !important;}
.line-gr {border:1px solid var(--ui-color-gray) !important;}
.line-cg {border:1px solid var(--ui-color-cleargray) !important;}
.line-clg {border:1px solid var(--ui-color-clearlowgray) !important;}
.line-su {border:1px solid var(--ui-color-success) !important;}
.line-in {border:1px solid var(--ui-color-info) !important;}
.line-wa {border:1px solid var(--ui-color-warning) !important;}
.line-da {border:1px solid var(--ui-color-danger) !important;}

/* 그림자 테두리 */
.shadowline-prime {box-shadow:inset 0 0 0 1px var(--color-prime) !important;}
.shadowline-secondary {box-shadow:inset 0 0 0 1px var(--ui-color-secondary) !important;}
.shadowline-white {box-shadow:inset 0 0 0 1px var(--ui-color-white) !important;}
.shadowline-black {box-shadow:inset 0 0 0 1px var(--ui-color-black) !important;}
.shadowline-success {box-shadow:inset 0 0 0 1px var(--ui-color-success) !important;}
.shadowline-warning {box-shadow:inset 0 0 0 1px var(--ui-color-warning) !important;}
.shadowline-danger {box-shadow:inset 0 0 0 1px var(--ui-color-danger) !important;}
.shadowline-info {box-shadow:inset 0 0 0 1px var(--ui-color-info) !important;}
.shadowline-gray-50 {box-shadow:inset 0 0 0 1px var(--ui-color-gray-50) !important;}
.shadowline-gray-100 {box-shadow:inset 0 0 0 1px var(--ui-color-gray-100) !important;}
.shadowline-gray-200 {box-shadow:inset 0 0 0 1px var(--ui-color-gray-200) !important;}
.shadowline-gray-300 {box-shadow:inset 0 0 0 1px var(--ui-color-gray-300) !important;}
.shadowline-gray-400 {box-shadow:inset 0 0 0 1px var(--ui-color-gray-400) !important;}
.shadowline-gray-500 {box-shadow:inset 0 0 0 1px var(--ui-color-gray-500) !important;}
.shadowline-gray-600 {box-shadow:inset 0 0 0 1px var(--ui-color-gray-600) !important;}
.shadowline-gray-700 {box-shadow:inset 0 0 0 1px var(--ui-color-gray-700) !important;}
.shadowline-gray-800 {box-shadow:inset 0 0 0 1px var(--ui-color-gray-800) !important;}
.shadowline-gray-900 {box-shadow:inset 0 0 0 1px var(--ui-color-gray-900) !important;}

/* 확장 색상 그림자 테두리 */
.shadowline-dark {box-shadow:inset 0 0 0 1px var(--ui-color-dark) !important;}
.shadowline-light {box-shadow:inset 0 0 0 1px var(--ui-color-light) !important;}
.shadowline-pink {box-shadow:inset 0 0 0 1px var(--ui-color-pink) !important;}
.shadowline-purple {box-shadow:inset 0 0 0 1px var(--ui-color-purple) !important;}
.shadowline-red {box-shadow:inset 0 0 0 1px var(--ui-color-red) !important;}
.shadowline-orange {box-shadow:inset 0 0 0 1px var(--ui-color-orange) !important;}
.shadowline-yellow {box-shadow:inset 0 0 0 1px var(--ui-color-yellow) !important;}
.shadowline-green {box-shadow:inset 0 0 0 1px var(--ui-color-green) !important;}
.shadowline-mint {box-shadow:inset 0 0 0 1px var(--ui-color-mint) !important;}
.shadowline-lightblue {box-shadow:inset 0 0 0 1px var(--ui-color-lightblue) !important;}
.shadowline-blue {box-shadow:inset 0 0 0 1px var(--ui-color-blue) !important;}

/* 레거시 호환성 */
.shadowline-pr {box-shadow:inset 0 0 0 1px var(--color-prime) !important;}
.shadowline-de {box-shadow:inset 0 0 0 1px var(--ui-color-default) !important;}
.shadowline-wh {box-shadow:inset 0 0 0 1px var(--ui-color-white) !important;}
.shadowline-bl {box-shadow:inset 0 0 0 1px var(--ui-color-black) !important;}
.shadowline-gr {box-shadow:inset 0 0 0 1px var(--ui-color-gray) !important;}
.shadowline-cg {box-shadow:inset 0 0 0 1px var(--ui-color-cleargray) !important;}
.shadowline-clg {box-shadow:inset 0 0 0 1px var(--ui-color-clearlowgray) !important;}
.shadowline-su {box-shadow:inset 0 0 0 1px var(--ui-color-success) !important;}
.shadowline-in {box-shadow:inset 0 0 0 1px var(--ui-color-info) !important;}
.shadowline-wa {box-shadow:inset 0 0 0 1px var(--ui-color-warning) !important;}
.shadowline-da {box-shadow:inset 0 0 0 1px var(--ui-color-danger) !important;}

/* ========================================
   플렉스박스 유틸리티
======================================== */
.fb_x {display:flex; display:-webkit-flex; justify-content:center; -webkit-justify-content:center;}
.fb_y {display:flex; display:-webkit-flex; align-items:center; -webkit-align-items:center;}
.fb_xy {display:flex; display:-webkit-flex; justify-content:center; align-items:center; -webkit-justify-content:center; -webkit-align-items:center;}
.fb_e {display:flex; display:-webkit-flex; justify-content:flex-start; -webkit-justify-content:flex-start;}
.fb_w {display:flex; display:-webkit-flex; justify-content:flex-end; -webkit-justify-content:flex-end;}
.fb_ey {display:flex; display:-webkit-flex; justify-content:flex-start; align-items:center; -webkit-justify-content:flex-start; -webkit-align-items:center;}
.fb_wy {display:flex; display:-webkit-flex; justify-content:flex-end; align-items:center; -webkit-justify-content:flex-end; -webkit-align-items:center;}
.fb_ew {display:flex; display:-webkit-flex; justify-content:space-between; -webkit-justify-content:space-between;}
.fb_ewy {display:flex; display:-webkit-flex; justify-content:space-between; align-items:center; -webkit-justify-content:space-between; -webkit-align-items:center;}

/* 플렉스 방향 */
.fb_dir_x {flex-direction:row ;}
.fb_dir_y {flex-direction:column;}

/* 플렉스 아이템 정렬 */
.fi_start {align-self:flex-start;}
.fi_end {align-self:flex-end;}
.fi_xy {align-self:center;}

/* ========================================
  여백 및 패딩 유틸리티
======================================== */
.mt10 {margin-top:10px;}

/* ========================================
   폼 요소 컴포넌트
======================================== */
/* 기본 폰트 설정 */
input, textarea, select, button ,table tr td { font-family: "Pretendard Variable", Pretendard;} 

/* 인풋 필드 */
input {width:100%; height:40px; padding:0 8px; border:1px solid var(--ui-color-gray-200); border-radius:var(--ui-radius-s); background:var(--ui-color-white); color:var(--ui-color-black); font-size:14px; font-weight:400; box-sizing:border-box;}
input:hover {border:1px solid var(--color-prime);}
input[readonly] {opacity:0.5; pointer-events:none;}
input[readonly]:hover,
input[readonly]:focus {border:1px solid var(--ui-color-default) !important;}
input[disabled] {background:var(--ui-color-cleargray); color:var(--ui-color-gray-600); pointer-events:none;}
input[disabled]:hover,
input[disabled]:focus {border:1px solid var(--ui-color-default) !important;}

/* 셀렉트 박스 */
select {width:100%; height:40px; padding:0 30px 0 14px; border:1px solid var(--ui-color-gray-200); border-radius:var(--ui-radius-s); color:var(--ui-color-black); background:url(../img/form/drop_down.svg)var(--ui-color-white) no-repeat right 6px center; cursor:pointer; appearance:none; box-sizing:border-box; -webkit-appearance:none;}
select option:hover,
select option[selected] {background:var(--color-prime); color:var(--ui-color-white);}
select:disabled {background:url(../img/form/drop_down.svg)var(--ui-color-cleargray) no-repeat right 6px center; pointer-events:none;}
:root.darkMode select {background:url(../img/form/drop_down_w.svg)var(--ui-color-white) no-repeat right 6px center; }

/* 인풋 애드온 */
.inputAddon {}
.inputAddon form {position:relative;}
.inputAddon input {padding:0 50px 0 40px; border-radius:var(--ui-radius-l);}
.inputAddon .bx {display:flex; justify-content:center; align-items:center; position:absolute; top:0; left:0; width:40px; height:40px; opacity:0.6; color:var(--ui-color-black); font-size:16px;}
.inputAddon .button {position:absolute; top:0; right:0; margin:5px;}

/* 텍스트에어리어 */
textarea {width:100%; padding:8px; font-size:16px; font-weight:400; box-sizing:border-box; resize:none; border:1px solid var(--ui-color-default); border-radius:var(--ui-radius-s); background:var(--ui-color-white); color:var(--ui-color-black);}
textarea:hover {border:1px solid var(--color-prime);}
textarea[readonly] {opacity:0.5; pointer-events:none;}
textarea[readonly]:hover,
textarea[readonly]:focus {border:1px solid var(--ui-color-default) !important;}
textarea[disabled] {background:var(--ui-color-cleargray); color:var(--ui-color-gray-700); text-shadow:1px 1px 0px var(--ui-color-white); pointer-events:none;}
textarea[disabled]:hover,
textarea[disabled]:focus {border:1px solid var(--ui-color-default) !important;}

/* ========================================
   버튼 컴포넌트
======================================== */
button {margin:0; padding:0; border:none; background:none; cursor:pointer; color:var(--ui-color-black); appearance:none;}
.button {display:flex; justify-content:center; align-items:center; position:relative; overflow:hidden; border:none; font-weight:700; white-space:nowrap;}
.button span {position:relative; z-index:1;}
.button:hover {opacity:0.9;}
.button:active {}
.button:disabled {background:var(--ui-color-cleargray) !important; color:var(--ui-color-gray-500) !important; pointer-events:none;}
.button[readonly] {opacity:0.9; pointer-events:none;}
.button[readonly]:hover,
.button[readonly]:focus {opacity:0.9;}

/* 버튼 크기 */
.button.sBtn {height:30px;padding:0 12px;font-size: 12px;}
.button.mBtn {height:40px; padding:0 20px; font-size:14px;}
.button.lBtn {height:50px; padding:0 30px; font-size:18px;}

/* 원형 버튼 */
.button.round-circle {padding:0 !important; border-radius:var(--ui-radius-circle);}
.button.round-circle.sBtn {width:30px; font-size:18px;}
.button.round-circle.mBtn {width:40px; font-size:26px;}
.button.round-circle.lBtn {width:50px; font-size:40px;}

/* 아이콘 버튼 */
.button.bxicon {display:flex; align-items:center; gap:6px;}
.button.bxicon.sBtn .bx {font-size:16px;}
.button.bxicon.mBtn .bx {font-size:20px;}
.button.bxicon.lBtn .bx {font-size:26px;}

/* 전체 너비 버튼 */
.button.fw {width:calc(100% - 0px) !important;}

/* ========================================
   체크박스, 라디오 컴포넌트
======================================== */
.opt {display:flex; justify-content:center; align-items:center; position:relative;}
.opt input[type=radio],
.opt input[type=checkbox] {position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; border:0; clip:rect(0 0 0 0);}
.opt input[type=radio]+label,
.opt input[type=checkbox]+label {display:flex; justify-content:flex-start; align-items:center; visibility:visible; position:relative; font-size:15px; cursor:pointer; word-break:break-all;}
.opt input[type=radio]+label span.text,
.opt input[type=checkbox]+label span.text {display:flex; align-items:center; margin:0 6px; overflow:hidden; color:var(--ui-color-gray-900); font-weight:500; line-height:18px;}
.opt input[type=radio]+label:before {display:inline-block; width:22px; min-width:22px; height:22px; border-radius:50%; color:var(--ui-color-gray-400); font-size:30px; vertical-align:middle; box-sizing:border-box;}
.opt input[type=checkbox]+label:before {display:inline-block; width:22px; min-width:22px; height:22px; border-radius:4px; background:var(--ui-color-white); color:var(--ui-color-gray-400); font-size:30px; vertical-align:middle; box-sizing:border-box;}
.opt input[type=radio]:disabled+label,
.opt input[type=checkbox]:disabled+label {opacity:0.5; cursor:default; filter:grayscale(1);}
.opt input[type=radio]:disabled+label:before,
.opt input[type=checkbox]:disabled+label:before {color:var(--ui-color-gray-300);}
.opt input[type=radio]+label:before {content:''; background:var(--ui-color-white); box-shadow:inset 0 0 0 2px var(--ui-color-gray-500);}
.opt input[type=radio]:checked+label:before {box-shadow:inset 0 0 0 6px var(--color-prime);}
.opt input[type=checkbox]+label:before {content:''; box-shadow:inset 0 0 0 2px var(--ui-color-gray-500);}
.opt input[type=checkbox]:checked+label:before {background:var(--color-prime); box-shadow:none;}
.opt input[type=checkbox]:checked+label:after {content:"\ea41"; position:absolute; top:50%; left:0; width:22px; height:22px; color:var(--ui-color-white); font-style:normal; font-variant:normal; font-size:20px; font-weight:400; font-family:boxicons !important; text-rendering:auto; line-height:1; transform:translate(0, -50%);}
.opt input[type=checkbox]:indeterminate+label:before {background:var(--color-prime); box-shadow:none;}
.opt input[type=checkbox]:indeterminate+label:after {content:''; position:absolute; top:50%; left:0; width:19px; height:19px; background:url(../img/icon/icon_checkbox_partial.svg)no-repeat; transform:translate(0, -50%);filter:grayscale(1) brightness(10);}
.opt.dark {display:block; margin:10px 0;}
.opt.dark input[type=radio]+label span.text,
.opt.dark input[type=checkbox]+label span.text {color:var(--ui-color-white);}
.opt.dark input[type=checkbox]:checked+label:before {background:var(--ui-color-white);}
.opt.dark input[type=checkbox]:checked+label:after {filter:none;}
.opt input[type=radio]:focus ~ label,
.opt input[type=checkbox]:focus ~ label {outline:2px solid var(--color-prime); outline-offset:2px;}


/* ========================================
   스위치 컴포넌트
======================================== */
.switch {display:inline-block; position:relative; width:64px; height:30px; border-radius:20px; vertical-align:middle;}
.switch input {position:absolute; z-index:1; left:0; width:100%; height:100%; margin:0; opacity:0; pointer-events:none;}
.switch .switch_input:checked ~ .switch_label {background:var(--color-prime);}
.switch .switch_input:checked ~ .switch_label:before {opacity:0;}
.switch .switch_input:checked ~ .switch_label:after {opacity:1;}
.switch .switch_input:checked ~ .switch_handle {left:38px;}
.switch .switch_label {display:block; position:relative; height:inherit; border-radius:inherit; background:var(--ui-color-gray-600); font-size:10px; cursor:pointer; transition:0.15s ease-out;-webkit-transition:0.15s ease-out;}
.switch .switch_label:before, .switch_label:after {position:absolute; top:10px; line-height:10px; transition:inherit;-webkit-transition:inherit;}
.switch .switch_label:before {content:attr(data-off); right:10px; color:var(--ui-color-white); font-weight:bold;}
.switch .switch_label:after {content:attr(data-on); left:10px; opacity:0; color:var(--ui-color-white-only); font-weight:bold;}
.switch .switch_handle {position:absolute; top:5px; left:5px; width:20px; height:20px; border-radius:10px; background:var(--ui-color-white); cursor:pointer; transition:left 0.15s ease-out;-webkit-transition:left 0.15s ease-out; pointer-events:none;}
.switch .switch_handle:before {content:''; display:none; position:absolute; top:50%; left:50%; width:20px; height:20px; margin:-10px 0 0 -10px; border-radius:50%; background:#bd0635;}
.switch .switch_input:disabled ~ .switch_label,
.switch .switch_input:disabled ~ .switch_handle {opacity:0.5; cursor:not-allowed !important;}

.toastui-editor-defaultUI-toolbar .switch {width:auto; height:auto;}
/* ========================================
   카드 및 라벨 컴포넌트
======================================== */
.cardBox {} 
.cardBox:has(.sv_on) {z-index:1;}

/* 라벨 박스 */
.labelBox { display: inline-flex; align-items:center; height: 24px; padding:0 14px; font-size: 12px; font-weight:600; white-space:nowrap; width: fit-content;} 

/* 아이콘 박스 */
.iconBox { padding: 3px 3px; font-size: 10px; font-weight:800; min-width:14px; height:14px; display: inline-flex; vertical-align: middle; justify-content: space-evenly; align-items: center;} 

/* --------------------------------------------------------
MODAL
----------------------------------------------------------*/

@keyframes ShowPop { 
   0% { opacity:0; transform:translate3d(0, -100px, 0);} 
  100% { opacity:1; transform:translate3d(0, 0, 0);} 
   }
  
  @keyframes HidePop { 
   0% { opacity:1; transform:translate3d(0, 0, 0);} 
  100% { opacity:0; transform:translate3d(0, -100px, 0);} 
   }
  
  @keyframes dimShowPop { 
   0% { opacity:0;} 
  100% { opacity:1;} 
   }
  @keyframes dimHidePop { 
   0% { opacity:1;} 
  100% { opacity:0;} 
   }
  
  .multiModal.hide {}
  .multiModal.hide .modalBox {animation:HidePop 0.3s;}
  .multiModal.hide .multiModal:after {animation:dimHidePop 0.2s;}
  .multiModal.active {display:flex; flex-wrap:wrap; overflow:auto;}
  .multiModal {display:none; flex-wrap:wrap; justify-content:center; align-items:center; position:fixed; z-index:99; top:0px; left:0px; right:0px; bottom:0px; overflow:auto; -webkit-justify-content:center; -webkit-align-items:center; -ms-flex-pack:center; -ms-flex-align:center;}
  .multiModal:after {content:''; position:fixed; z-index:1; top:0px; left:0px; right:0px; bottom:0px; background:rgba(0,0,0,0.6); animation:dimShowPop 0.1s;}
  .modalBox {position:relative; z-index:2; width:400px; overflow:hidden; border-radius:16px; background:var(--board-white); box-shadow:0 10px 10px rgba(0, 0, 0, 0.2); box-sizing:border-box; animation:ShowPop 0.2s;}
  .modalBox.responseHeight {height:100%;}
  .modalBox.w310 {width:310px;}
  .modalBox.w400 {width:400px;}
  .modalBox.w500 {width:500px;}
  .modalBox.w560 {width:560px;}
  .modalBox.w600 {width:600px;}
  
  .modalBox .mbHeader {display:flex; justify-content:space-between; align-items:center; height:42px; padding:0 20px; border-bottom:1px solid var(--board-gray-300);}
  .modalBox .mbHeader .backBtn {display:none;}
  .modalBox .mbHeader .title {display:flex; align-items:center; flex-direction:row;}
  .modalBox .mbHeader .title h2 {color:var(--prime-color); font-size:16px; font-weight:500;}
  
  .modalBox .mbHeader .tools {display:flex;}
  .modalBox .mbHeader .tools button {margin:0 3px;}
  .modalBox .mbHeader ~ .mbBody {}
  .modalBox .mbBody {padding:10px;}
  .modalBox .mbBody::-webkit-scrollbar {height:4px; width:4px}
  .modalBox .mbBodyt::-webkit-scrollbar-thumb {border:0px solid transparent; background-color:rgba(0,0,0,0.2); background-clip:padding-box;}
  .modalBox .mbBody .mbBodyContents {width:calc(100% - 0px); height:100%; max-height:1000px; overflow:auto;}
  .modalBox .mbBody .mbBodyContents .article {height:100%; margin:20px; color:var(--text-muted); font-size:15px; line-height:20px;}
  .modalBox .mbBody .mbBodyContents .article .icon i {color:var(--prime-color); font-size:60px; line-height:1.2;}
  
  .modalBox .buttonWrap {display:flex; justify-content:center; align-items:center; padding:16px; border-top:1px solid var(--cleargray-color); gap:10px;}
  .modalBox .buttonWrap span {}
  .modalBox .buttonWrap button {min-width:calc(50% - 5px);}

/* ========================================
   로딩 컴포넌트
======================================== */
.loading { overflow:hidden;} 
.loading:before { content:""; position:absolute; top:50%; left:50%; width:60px; height:60px; border-radius:50%; margin:-40px 0 0 -40px; z-index:999; border-top:4px solid var(--color-prime); border-right:4px solid transparent; border-bottom:4px solid var(--color-prime); border-left:4px solid transparent; font-size:10px; transform:translateZ(0); animation:load 0.6s infinite linear; -webkit-transform:translateZ(0); -webkit-animation:load 0.6s infinite linear;} 

@-webkit-keyframes load { 
	0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 
	100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } 
}
@keyframes load { 
	0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 
	100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } 
}

/* ========================================
   텍스트 및 제목 컴포넌트
======================================== */
/* 제목 박스 */
.headingBox {display:flex;flex-direction:column;gap:10px;line-height: 1.2;}
.headingBox h2 {font-size:22px;}
.headingBox .desc {color:var(--ui-color-gray); font-size:12px;}

/* 게시판 제목 */
.bbsHeading {display:flex;gap:10px;line-height: 1.2;justify-content: space-between;align-items: center;width: 100%;}
.bbsHeading h2 {font-size:22px;font-weight: 500;}

/* 브레드크럼 */
.breadcrumbs {}
.breadcrumbs ul {display:flex;}
.breadcrumbs ul li {display:flex; align-items:center; color:var(--ui-color-black); font-size:12px;}
.breadcrumbs ul li::before {content:"\ea50"; color:var(--ui-color-gray); font-size:20px; font-family:boxicons!important;}
.breadcrumbs ul li:first-child::before {display:none;}

/* ========================================
   레거시 호환성 및 기타
======================================== */
/* 접근성 */
.msg_sound_only, .sound_only {display:inline-block !important;position:absolute;top:0;left:0;width:0;height:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important}

/* 이미지 반응형 */
.img_fix {width:100%;height:auto}

/* 빈 목록 */
.empty_table {padding:50px 0 !important;text-align:center}
.empty_list {padding:20px 0 !important;color:var(--ui-color-gray-600);text-align:center}


/* 사이드뷰 */
.sv_wrap {position:relative;font-weight:normal}
.sv_wrap .sv {z-index:1000;display:none;margin:5px 0 0;font-size:0.92em;background:#333;
-webkit-box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2);
-moz-box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2);
box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2)}
.sv_wrap .sv:before {content:"";position:absolute;top:-6px;left:15px;width:0;height:0;border-style:solid;border-width:0 6px 6px 6px;border-color:transparent transparent #333 transparent}
.sv_wrap .sv a {display:inline-block;margin:0;padding:0 10px;line-height:30px;width:100px;font-weight:normal;color:#bbb}
.sv_wrap .sv a:hover {background:#000;color:#fff}
.sv_member {color:var(--txt-gray01-color); display:flex; align-items:center; gap:6px; font-weight: 600;}
.sv_member .profile_img img {border-radius:50%;}
.sv_on {display:flex !important; flex-direction:column; position:absolute;top:23px;left:0px;width:auto;height:auto}
.sv_nojs .sv {display:block}

/* 기타 레거시 스타일 */

#validation_check {margin:100px auto;width:500px}
#validation_check h1 {margin-bottom:20px;font-size:1.3em}
#validation_check p {margin-bottom:20px;padding:30px 20px;border:1px solid #e9e9e9;background:#fff}

#skip_to_container a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
#skip_to_container a:focus, #skip_to_container a:active {width:100%;height:75px;background:#21272e;color:#fff;font-size:2em;font-weight:bold;text-align:center;text-decoration:none;line-height:3.3em}

/* 팝업 관련 */
.hd_pops {position:absolute;border:1px solid #e9e9e9;background:#fff}
.hd_pops img {max-width:100%}
.hd_pops_con {}
.hd_pops_footer {padding:0;background:#000;color:#fff;text-align:left;position:relative}
.hd_pops_footer:after {display:block;visibility:hidden;clear:both;content:""}
.hd_pops_footer button {padding:10px;border:0;color:#fff}
.hd_pops_footer .hd_pops_reject {background:#000;text-align:left}
.hd_pops_footer .hd_pops_close {background:#393939;position:absolute;top:0;right:0}

/* 캡차 */
#captcha {display:flex; flex-wrap:wrap; position:relative}
#captcha legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
#captcha #captcha_img {height:40px;border:1px solid #898989;vertical-align:top;padding:0;margin:0}
#captcha #captcha_mp3 {margin:0;padding:0;width:40px;height:40px;border:0;background:transparent;vertical-align:middle;overflow:hidden;cursor:pointer;background:url('../img/captcha2.png') no-repeat;text-indent:-999px;border-radius:3px}
#captcha #captcha_reload {margin:0;padding:0;width:40px;height:40px;border:0;background:transparent;vertical-align:middle;overflow:hidden;cursor:pointer;background:url('../img/captcha2.png') no-repeat 0 -40px;text-indent:-999px;border-radius:3px}
#captcha #captcha_key {margin:0 0 0 3px;padding:0 5px;width:90px;height:40px; font-size:1.333em;font-weight:bold;}
#captcha #captcha_info {display:block;margin:5px 0 0;font-size:0.95em;letter-spacing:-0.1em}

/* CKEditor */
.cke_sc {margin:0 0 5px;text-align:right; display:none;}
.btn_cke_sc {display:inline-block;padding:0 10px;height:23px;border:1px solid #ccc;background:#fafafa;color:#000;text-decoration:none;line-height:1.9em;vertical-align:middle;cursor:pointer}
.cke_sc_def {margin:0 0 5px;padding:10px;border:1px solid #ccc;background:#f7f7f7;text-align:center}
.cke_sc_def dl {margin:0 0 5px;text-align:left;zoom:1}
.cke_sc_def dl:after {display:block;visibility:hidden;clear:both;content:""}
.cke_sc_def dt, .cke_sc_def dd {float:left;margin:0;padding:5px 0;border-bottom:1px solid #e9e9e9}
.cke_sc_def dt {width:20%;font-weight:bold}
.cke_sc_def dd {width:30%}

/* 게시판 콘텐츠 */
#bo_v_con ul {display:block;list-style-type:disc;margin-top:1em;margin-bottom:1em;margin-left:0;margin-right:0;padding-left:40px}
#bo_v_con ol {display:block;list-style-type:decimal;margin-top:1em;margin-bottom:1em;margin-left:0;margin-right:0;padding-left:40px}
#bo_v_con li {display:list-item}

/* 테이블 폼 */
.tbl_frm01 {margin:0 0 20px}
.tbl_frm01 table {width:100%;border-collapse:collapse;border-spacing:0}
.tbl_frm01 th {width:70px;padding:7px 13px;border:1px solid #e9e9e9;border-left:0;background:#f5f8f9;text-align:left}
.tbl_frm01 td {padding:7px 10px;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;background:transparent}
.tbl_frm01 textarea {padding:2px 2px 3px}
.frm_input {height:40px}

.full_input {width:100%}
.half_input {width:49.5%}
.twopart_input {width:385px;margin-right:10px}
.tbl_frm01 textarea, .write_div textarea {width:100%;height:100px}
.tbl_frm01 a {text-decoration:none}
.tbl_frm01 .frm_file {display:block;margin-bottom:5px}
.tbl_frm01 .frm_info {display:block;padding:0 0 5px;line-height:1.4em}

/* 폼01 */
.form_01 h2 {font-size:1.167em}
.form_01 li {margin-bottom:10px}
.form_01 ul:after,
.form_01 ul:before {display:table;content:""}
.form_01 .left_input {float:left}
.form_01 .margin_input {margin-right:1%}
.form_01 textarea {height:100px;width:100%}
.form_01 .frm_label {display:inline-block;width:130px}

/* 필수 입력 */
.required, textarea.required {background-image:url('../img/require.png') !important;background-repeat:no-repeat !important;background-position:right top !important}

/* 새창 */
.new_win {position:relative}
.new_win .tbl_wrap {margin:0 20px}
.new_win #win_title {font-size:1.3em;height:50px;line-height:30px;padding:10px 20px;background:#fff;color:#000;-webkit-box-shadow:0 1px 10px rgba(0,0,0,.1);
-moz-box-shadow:0 1px 10px rgba(0,0,0,.1);
box-shadow:0 1px 10px rgba(0,0,0,.1)}
.new_win #win_title .sv {font-size:0.75em;line-height:1.2em}
.new_win .win_ul {margin-bottom:15px;padding:0 20px; list-style:none;}
.new_win .win_ul:after {display:block;visibility:hidden;clear:both;content:""}
.new_win .win_ul li {float:left;background:#fff;text-align:center;padding:0 10px;border:1px solid #d6e9ff;border-radius:30px;margin-left:5px}
.new_win .win_ul li:first-child {margin-left:0}
.new_win .win_ul li a {display:block;padding:8px 0;color:#6794d3}
.new_win .win_ul .selected {background:var(--color-prime);border-color:var(--color-prime);position:relative;z-index:5}
.new_win .win_ul .selected a {color:#fff;font-weight:bold}
.new_win .win_desc {position:relative;margin:10px;border-radius:5px;font-size:1em;background:#f2838f;color:#fff;line-height:50px;text-align:left;padding:0 20px}
.new_win .win_desc i {font-size:1.2em;vertical-align:baseline}
.new_win .win_desc:after {content:"";position:absolute;left:0;top:0;width:4px;height:50px;background:#da4453;border-radius:3px 0 0 3px}
.new_win .frm_info {font-size:0.92em;color:#919191}
.new_win .win_total {float:right;display:inline-block;line-height:30px;font-weight:normal;font-size:0.75em;color:var(--color-prime);background:#f6f6f6;padding:0 10px;border-radius:5px}
.new_win .new_win_con {margin:20px 0;padding:20px}
.new_win .new_win_con:after {display:block;visibility:hidden;clear:both;content:""}
.new_win .new_win_con2 {margin:20px 0}
.new_win .btn_confirm:after {display:block;visibility:hidden;clear:both;content:""}
.new_win .win_btn {text-align:center}
.new_win .cert_btn {margin-bottom:30px;text-align:center}
.new_win .btn_close {padding:0 20px;height:45px;overflow:hidden;cursor:pointer}
.new_win .btn_submit {padding:0 20px;height:45px;font-weight:bold;font-size:1.083em}

/* 게시글 이동/복사 팝업 */
#copymove.new_win {position:relative; max-width:600px; margin:0 auto; padding:20px; background:var(--ui-color-white) !important;}
#copymove.new_win #win_title {display:flex; align-items:center; margin-bottom:20px !important; padding:0 !important; height:auto !important; line-height:1 !important; background:transparent !important; color:var(--ui-color-gray-900) !important; font-size:20px !important; font-weight:700 !important; box-shadow:none !important;}
#copymove.new_win #win_title::before {content:'\EC4B'; font-family:'boxicons' !important; color:var(--color-prime) !important; font-size:24px !important; margin-right:8px !important;}
#copymove .tbl_wrap {margin:0 0 20px 0 !important; padding:0 !important; border:1px solid var(--ui-color-gray-200) !important; border-radius:8px !important; overflow:hidden !important; background:var(--ui-color-white) !important;}
#copymove .tbl_wrap table {width:100% !important; border-collapse:collapse !important; border:none !important;}
#copymove .tbl_wrap table input[type="checkbox"] {width:20px !important; height:20px !important; margin:0 auto !important; cursor:pointer !important;}
#copymove .tbl_wrap caption {display:none !important;}
#copymove .tbl_wrap thead {background:var(--ui-color-gray-50) !important;}
#copymove .tbl_wrap thead tr {border-bottom:1px solid var(--ui-color-gray-200) !important;}
#copymove .tbl_wrap thead th {padding:12px 16px !important; border:none !important; vertical-align: middle; background:transparent !important; color:var(--color-prime) !important; font-size:20px !important; font-weight:600 !important; text-align:left !important;}
#copymove .tbl_wrap thead th:first-child {width:50px !important; text-align:center !important;}
#copymove .tbl_wrap tbody tr {border-bottom:1px solid var(--ui-color-gray-100) !important; transition:all 0.2s ease !important;}
#copymove .tbl_wrap tbody tr:last-child {border-bottom:none !important;}
#copymove .tbl_wrap tbody tr:hover {background:var(--ui-color-gray-50) !important;}
#copymove .tbl_wrap tbody tr.copymove_currentbg {background:var(--ui-color-info-light) !important;}
#copymove .tbl_wrap tbody tr.copymove_currentbg:hover {background:var(--ui-color-info-light) !important;}
#copymove .tbl_wrap tbody td {padding:14px 16px !important; border:none !important; background:transparent !important; vertical-align:middle !important;}
#copymove .tbl_wrap tbody td.td_chk {width:50px !important; text-align:center !important;}
#copymove .tbl_wrap tbody td label {display:block !important; color:var(--ui-color-gray-800) !important; font-size:14px !important; cursor:pointer !important;}
#copymove .copymove_current {display:inline-flex !important; align-items:center !important; margin-left:8px !important; padding:4px 8px !important; border-radius:4px !important; background:var(--color-prime) !important; color:var(--ui-color-white) !important; font-size:12px !important; font-weight:500 !important; float:none !important;}
#copymove .win_btn {padding:0 !important; text-align:center !important; display:flex;}
#copymove .win_btn .btn_submit {min-width:120px !important; padding:0 24px !important; height:40px !important; border:none !important; border-radius:6px !important; background:var(--color-prime) !important; color:var(--ui-color-white) !important; font-size:14px !important; font-weight:600 !important; cursor:pointer !important; transition:all 0.2s ease !important;}
#copymove .win_btn .btn_submit:hover {background:var(--color-prime) !important; transform:translateY(-1px) !important; box-shadow:0 2px 8px rgba(0,0,0,0.1) !important;}
#copymove .win_btn .btn_close {min-width:120px !important; margin-left:8px !important; padding:0 24px !important; height:40px !important; border:1px solid var(--ui-color-gray-300) !important; border-radius:6px !important; background:var(--ui-color-white) !important; color:var(--ui-color-gray-700) !important; font-size:14px !important; font-weight:600 !important; cursor:pointer !important; transition:all 0.2s ease !important;}
#copymove .win_btn .btn_close:hover {border-color:var(--ui-color-gray-400) !important; background:var(--ui-color-gray-50) !important;}

#hd_login_msg {position:absolute;top:0;left:0;font-size:0;line-height:0;overflow:hidden}

/* CK 에디터 팝업 윈도우 */
.cheditor-popup-window *, 
.cheditor-popup-window :after, 
.cheditor-popup-window :before {box-sizing: border-box;}

#hd_pop {z-index:1000;position:relative;margin:0 auto;height:0}
#hd_pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}

/* data-layout */

/* [data-layout] {position:relative;}
[data-layout]::before {content:attr(data-layout); position:absolute; top:0; left:0; z-index:9; background:#000; color:#fff; padding:10px; font-size:11px;}

[data-section] {position:relative;}
[data-section]::before {content:attr(data-section); position:absolute; top:0; right:0; z-index:9; background:#fff; color:#000; border:2px dotted #000; padding:10px; font-size:11px;}

[data-item] {position:relative;}
[data-item]::before {content:attr(data-item); position:absolute; top:0; right:0; z-index:9; background:#fff; color:#000; border:2px dotted #000; padding:10px; font-size:11px;} */