@CHARSET "UTF-8";
/* ------------------------------------------------------------
 * Name   : psy_card.css
 * Desc   : UPTSIMS0001 leftData.jsp 카드
 * Note   : 최초 시안(남색 타이틀바 + 둥근 모서리 + hover 그림자/부양) 복원.
 *          .psyCard 클래스를 selector에 포함시켜 specificity를 올려서
 *          type_a_color.css의 기존 dl 이미지 스프라이트 hover를 override.
 *          JSP 마크업/클래스명은 이전과 동일 (psyCard_tit/stat/no/row/lb/val).
 * ------------------------------------------------------------ */

/* 상단 카운트 + 정렬 셀렉트 */
.data_box_left .sel_box{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-bottom:7px;
  margin-bottom:8px;
  font-size:12px;
  color:#555;
}
.data_box_left .sel_box strong{
  font-size:14px;
  color:#3156ad;
  margin-right:2px;
}

/* box_area: 최초 시안 톤 (연한 배경, 부드러운 테두리) */
.data_box_left .box_area{
  background:#f7f8fa;
  border-top:1px solid #d7dee6;
  border-right:1px solid #d7dee6;
  border-bottom:1px solid #d7dee6;
  border-left:1px solid #d7dee6;
  padding:0 15px 15px 15px; /* 상단 패딩 제거: sticky 툴바가 맨 위에 딱 붙도록 */
}

/* 검색 영역: box_area 스크롤 중에도 상단에 고정 (sticky) */
.data_box_left .box_area .top{
  position:sticky;
  top:0;
  z-index:5;
  margin:0 -15px 12px -15px; /* 좌우로만 bleed, 상하 negative margin은 sticky와 충돌하므로 제거 */
  padding:12px 15px;
  background:#f7f8fa;
  border-bottom:1px solid #e7eaee;
}

/* 검색창: 모던 스타일 (라운드, 아이콘 인셋, 포커스 글로우) */
.data_box_left .box_area .top .scr{
  position:relative;
  display:block;
  width:211px; /* 카드(dl)의 인라인 width:211px 와 동일하게 고정 — box_area의 세로 스크롤바 폭까지 감안된 값이라 100%로 두면 카드보다 넓어져서 어긋남 */
  box-sizing:border-box;
}
.data_box_left .box_area .top input.int_scr02{
  box-sizing:border-box; /* padding/border를 폭에 포함시켜서 width:100%가 실제로 211px가 되도록 */
  width:100%;
  height:36px;
  padding:0 36px 0 14px;
  border:1px solid #d7dee6;
  border-radius:18px;
  background:#fff;
  font-size:13px;
  color:#333;
  text-indent:0;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.data_box_left .box_area .top input.int_scr02::placeholder{
  color:#aab1ba;
}
.data_box_left .box_area .top input.int_scr02:focus{
  outline:none;
  border-color:#1c3f6e;
  box-shadow:0 0 0 3px rgba(28,63,110,.12);
}
.data_box_left .box_area .top .scr a{
  position:absolute;
  top:50%;
  right:8px;
  transform:translateY(-50%);
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  transition:background-color .15s ease;
}
.data_box_left .box_area .top .scr a:hover{
  background:#eef1f5;
}
.data_box_left .box_area .top .scr .ico_scr{
  position:static; /* 기존 절대좌표(top:4px;right:6px) 무력화하고 위 a 안에서 flex로 가운데 정렬 */
}

/* ---- 카드 (최초 시안 복원) ---- */
.data_box_left .box_area dl.psyCard{
  background:#fff;
  border:1px solid #d7dee6;
  border-radius:6px;
  overflow:hidden;
  margin-bottom:10px;
  padding-bottom:0;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  transition:border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.data_box_left .box_area dl.psyCard:hover{
  border-color:#1c3f6e;
  box-shadow:0 4px 10px rgba(28,63,110,.15);
  transform:translateY(-1px);
}
.data_box_left .box_area dl.psyCard:active{
  transform:translateY(0);
  box-shadow:0 1px 2px rgba(0,0,0,.06);
}
.data_box_left .box_area dl.psyCard:focus{
  outline:2px solid #1c3f6e;
  outline-offset:1px;
}

/* 선택된 카드(.on): hover와 같은 방향성이지만 마우스가 벗어나도 유지되는 상태 */
.data_box_left .box_area dl.psyCard.on{
  border-color:#1c3f6e;
  box-shadow:0 0 0 1px #1c3f6e, 0 4px 10px rgba(28,63,110,.15);
}

/* 타이틀바: 남색, 항상 이 색 (hover/선택 시 더 짙게) */
.data_box_left .box_area dl.psyCard dt{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  background:#1c3f6e;
  border:0;
  color:#fff;
  font-weight:600;
  font-size:13px;
  padding:9px 12px;
  margin-bottom:0;
  transition:background-color .15s ease;
}
.data_box_left .box_area dl.psyCard:hover dt,
.data_box_left .box_area dl.psyCard.on dt{
  background:#152f52;
}
.data_box_left .box_area dl.psyCard dt .psyCard_tit{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
}  

/* 상태 배지 */
.psyCard_stat{
  flex:0 0 auto;
  font-size:11px;
  font-weight:600;
  padding:1px 7px;
  border-radius:9px;
  color:#fff;
  background:rgba(255,255,255,.22);
}
.psyCard_stat.stat03{background:rgba(255,255,255,.18)} /* 생성 */
.psyCard_stat.stat04{background:#4d8bdb} /* 변환 */
.psyCard_stat.stat05{background:#38b06a} /* 등록 */

.psyCard_stat.stat10{background:rgba(255,255,255,.18)} /* 발송 */
.psyCard_stat.stat07{background:#4d8bdb} /* 완료 */
.psyCard_stat.stat06{background:#38b06a} /* 취소 */

/* 사건번호: 최초 시안처럼 파란 링크톤 강조, 본문 영역 시작 */
.data_box_left .box_area dl.psyCard dd.psyCard_no{
  padding:10px 12px 2px 12px;
  font-size:13px;
  font-weight:600;
  color:#2f6fb0;
}

/* 라벨/값: 억지 2단 정렬 없이 "라벨: 값" 자연스러운 한 줄 흐름으로 (좌우 비율 문제 해결) */
.data_box_left .box_area dl.psyCard dd.psyCard_row{
  padding:2px 12px;
  font-size:12.5px;
  line-height:18px;
  color:#333;
}
.data_box_left .box_area dl.psyCard dd.psyCard_row:last-child{
  padding-bottom:10px;
}
.psyCard_lb{
  color:#888;
}
.psyCard_lb::after{
  content:":";
  margin-right:4px;
}
.psyCard_val{
  color:#333;
}