@charset "utf-8";

html.booting * { transition: none !important; }

html, body {
  margin: 0;
  color: #111827;
  font-family: 'Nanum Gothic',나눔고딕,돋움,arial;
  font-size: 10pt;
  line-height: 1.5;
}
table, th, td, li {
	font-size: 10pt;
	font-family: 'Nanum Gothic',나눔고딕,돋움,arial;
}
a:link{TEXT-DECORATION: none}
a:visited{TEXT-DECORATION: none}
a:active{COLOR: Red;TEXT-DECORATION: none}
a:hover{COLOR: #FF9055;TEXT-DECORATION: none}
form {margin:0px}
img, table { max-width:100%;vertical-align:middle; }

/* ===== 폼 공통 기본 ===== */
input,
select,
textarea {
  box-sizing: border-box;
  font-size: 12px;
}

/* 기본 패딩 */
input       { padding: 2px 5px; }
select      { padding: 2px 3px; }  /* 기존값 유지 + 약간만 정리 */
textarea    { padding: 2px 5px; }

/* ===== 텍스트 계열 + 셀렉트: 높이/정렬 통일 ===== */
input[type="text"],
input[type="search"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="url"],
select {
  height: 24px;          /* 박스 높이 통일 */
  line-height: 22px;     /* 텍스트 수직 가운데 느낌 */
  vertical-align: middle;
}

/* textarea는 줄수에 따라 높이 달라져야 하니까 line-height만 유지 */
textarea {
  line-height: 1.4;
}

/* ===== 체크박스 / 라디오 ===== */
input[type="checkbox"],
input[type="radio"] {
  vertical-align: middle;
  position: relative;
  top: -1.4px;           /* 필요하면 브라우저 보고 미세 조정 */
}


/* ====== 공통: 레이어 팝오버 ====== */
/* 오버레이(배경 어둡게) */
.layer-overlay{
  position:fixed; inset:0; z-index:999;
  background:rgba(0,0,0,.45);
  opacity:0; transition:opacity .15s ease;
  display:none;
}

/* 공통: 팝오버 기본 룩 */
.layer-popover{
  position:fixed; z-index:1000;
  display:none;                  /* ← 초기는 none */
  visibility:hidden;
  box-sizing:border-box;
  border:1px solid #e5e7eb; border-radius:10px;
  background:#fff; box-shadow:0 10px 24px rgba(0,0,0,.12);
  transition: opacity .12s ease;
  overflow-x: hidden;
  opacity: 0;
  /* ★ 여기엔 display:flex 두지 않음 (JS에서 flex로 열 것) */
}

.layer-popover {
  align-items: stretch;      /* ← cross-axis(가로) 늘리기 */
}

/* 헤더/바디 레이아웃 (모든 모드 공통) */
.layer-popover .layer-header{ flex:0 0 auto; }
.layer-popover .layer-body{
  width: 100%;
  box-sizing: border-box;    /* 패딩 포함 안전 */
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  padding:12px;
  word-break:break-word;
}

/* popover(트리거 기준) */
.layer-popover:not(.layer-centered){
  min-width:220px;
  max-width:420px;
  max-height:60vh;
  overflow:hidden;               /* 외곽 자르고 내부만 스크롤 */
}

/* 팝오버 화살표 */
.layer-popover:not(.layer-centered)::after{
  content:""; position:absolute; width:10px; height:10px;
  background:#fff; border-left:1px solid #e5e7eb; border-top:1px solid #e5e7eb;
  transform:rotate(45deg); left:24px; top:-6px;
  box-shadow:-2px -2px 2px rgba(0,0,0,.03);
}

/* 헤더/바디 레이아웃 */
.layer-header{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:3px 10px; background:#f6f7f9; border-bottom:1px solid #e5e7eb;
  cursor:pointer; user-select:none;
  min-height: unset; /* 혹시 남아있을 강제 높이 제거 */
}
.layer-title{ font-weight:600; font-size:13px; line-height: 1.15; }
.layer-close{ width: 24px; height: 24px; border:0; background:transparent; font-size:16px; cursor:pointer; line-height:1; padding:0; }
.layer-body{
  padding:12px;
  overflow:auto;                /* ← 스크롤은 여기에서만! */
  word-break:break-word;
}
.layer-body img, .layer-body table{ max-width:100%; height:auto; }

/* ───── center 모달(화면 중앙) ───── */
/* center 모달(화면 중앙) */
.layer-popover.layer-centered{
  width:max-content; min-width:50px;
  max-width:90vw; max-height:90vh;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.2);
}
/* 모달에서는 화살표 숨김 */
.layer-popover.layer-centered::after{ display:none; }

/* flex에서 헤더는 내용 높이에 포함, 바디만 남은 공간 채우며 스크롤 */
.layer-popover.layer-centered .layer-header{ flex:0 0 auto; }

/* 핵심: flex 아이템이 줄어들 수 있게 해야 내부 스크롤이 생김 */
.layer-popover.layer-centered .layer-body{
  flex:1 1 auto;
  min-height: 0;                    /* ← 이게 없으면 바디가 줄질 않음 */
  overflow:auto;                    /* 내부만 스크롤 */
  padding:12px;
  word-break: break-word;
}
/* confirm 모드일 때 본문 중앙 정렬 */
.layer-body.has-confirm {
  text-align: center;
}

/* 버튼 영역: 가운데 정렬 + 상단 여백 + 버튼 간 간격 */
.layer-confirm-footer {
  display: flex;
  justify-content: center; /* 가운데 정렬 */
  align-items: center;
  gap: 8px;                /* 버튼 사이 간격 */
  margin-top: 12px;        /* 메시지와 버튼 사이 간격 */
}




/* ===== btn_st1 ===== */
.btn_st1 {
  display: inline-block;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.4;
  border-radius: 4px;
  box-sizing: border-box;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;

  color: #ffffff;
  background-color: #7db300;
  border: 1px solid #7db300;
}
.btn_st1:hover,
.btn_st1:focus-visible {
  color: #ffffff;
  background-color: #ff9600;
  border-color: #ff9600;
}
.btn_st1:active {
  color: #ffffff;
  background-color: #929292;
  border-color: #929292;
}

/* ===== btn_delete ===== */

.btn_delete {
  display: inline-block;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.4;
  border-radius: 4px;
  box-sizing: border-box;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;

  color: #ffffff;
  background-color: #d9534f;      /* 기본 */
  border: 1px solid #d9534f;
}

.btn_delete:hover,
.btn_delete:focus-visible {
  color: #ffffff;
  background-color: #b62fff;
  border-color: #ff2e2e;
}

.btn_delete:active {
  color: #ffffff;
  background-color: #8f1d1a;      /* Active: 더 깊게 */
  border-color: #8f1d1a;
}



/* ===== btn_st1_1 ===== */
.btn_st1_1 {
  display: inline-block;
  position: relative;
  top: 0px;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.2;
  border-radius: 4px;
  box-sizing: border-box;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;

  color: #ffffff;
  background-color: #7db300;
  border: 1px solid #7db300;
}
.btn_st1_1:hover,
.btn_st1_1:focus-visible {
  color: #ffffff;
  background-color: #ff9600;
  border-color: #ff9600;
}
.btn_st1_1:active {
  color: #ffffff;
  background-color: #929292;
  border-color: #929292;
}

/* ===== btn_st2 ===== */
.btn_st2 {
  display: inline-block;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.4;
  border-radius: 4px;
  box-sizing: border-box;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;

  color: #7db300;
  background-color: #ffffff;
  border: 1px solid #7db300;
}
.btn_st2:hover,
.btn_st2:focus-visible {
  color: #ffffff;
  background-color: #bdbdbd;
  border-color: #bdbdbd;
}
.btn_st2:active {
  color: #7db300;
  background-color: #dcdcdc;
  border-color: #dcdcdc;
}


/* ===== btn_st3 ===== */
.btn_st3 {
  display: inline-block;
  position: relative;
  top: 0px;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.2;
  border-radius: 4px;
  box-sizing: border-box;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;

  color: #ffffff;
  background-color: #a3a3a3;
  border: 1px solid #a3a3a3;
}
.btn_st3:hover,
.btn_st3:focus-visible {
  color: #ffffff;
  background-color: #fe6e36;
  border-color: #fe6e36;
}
.btn_st3:active {
  color: #898989;
  background-color: #ffffff;
  border-color: #dcdcdc;
}