/* 검색서비스 포털 페이지 공통 스타일 (W3C 웹표준 시안 기준)
   헤더·푸터와 #container 상단 보정은 portal-chrome.css 가 담당한다 */

/* 검색 조건 영역.

   화면마다 조건 줄 수가 달라 회색 영역 높이가 들쭉날쭉하면 페이지를 옮길 때
   내용이 위아래로 튄다. 조건이 가장 많은 화면(두 줄)에 맞춰 높이를 고정한다.
   24(위 여백) + 36 + 14 + 36(조건 두 줄) + 18 + 34(단추) + 24(아래 여백) = 186

   글자 크기를 키우면 내용이 잘리지 않도록 height 가 아니라 min-height 로 둔다 */
.ss-search-box {
  box-sizing: border-box;
  min-height: 186px;
  display: flex;
  flex-direction: column;
  background: #f7f8fa;
  border-radius: 4px;
  padding: 24px;
  margin-bottom: 24px;
}

.ss-search-row {
  display: flex;
  align-items: center;
  /* 라디오 단추만 있는 줄도 입력란이 있는 줄과 같은 높이를 차지한다 */
  min-height: 36px;
  margin-bottom: 14px;
}

/* 운영 환경의 구형 크롬(84 미만)은 플렉스 컨테이너의 gap 을 무시한다.
   항목 사이 간격은 인접 형제 여백으로 준다 */
.ss-search-row > * + * {
  margin-left: 24px;
}

.ss-search-row:last-child {
  margin-bottom: 0;
}

.ss-field {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.ss-field > label,
.ss-field > .ss-label {
  flex: 0 0 auto;
  width: 80px;
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.ss-field input[type="text"] {
  flex: 1;
  min-width: 0;
  height: 36px;
  padding: 0 12px;
  border: 1px solid #d9dde3;
  border-radius: 4px;
  background: #fff;
  font-size: 14px;
  color: #333;
}

.ss-field input[type="text"]::placeholder {
  color: #aab0b8;
}

.ss-field select {
  /* 화면마다 옵션 글자 길이가 달라 콤보 상자 폭이 제각각이었다. 같은 폭으로 맞춘다.
     min-width 를 0 으로 함께 둬야 한다. 플렉스 항목의 기본 최소 크기는 내용
     (가장 긴 옵션) 폭이라, 이 값이 없으면 고정한 폭을 넘어선다 */
  flex: 0 0 133px;
  min-width: 0;
  max-width: 100%;
  /* 자리보다 긴 옵션은 잘리는 대신 말줄임으로 접는다 */
  text-overflow: ellipsis;
  height: 36px;
  /* 오른쪽 여백은 화살표 자리다 */
  padding: 0 32px 0 8px;
  border: 1px solid #d9dde3;
  border-radius: 4px;
  /* background 단축 속성으로 쓰면 아래 화살표 규칙의 배경 이미지까지 지워진다 */
  background-color: #fff;
  font-size: 14px;
  color: #333;
}

/* 콤보 상자임을 알리는 화살표.
   default.css 가 select 의 기본 화살표를 지우므로(appearance: none) 직접 그려 넣는다.
   배경 이미지가 지워지지 않도록 위 규칙들은 background 단축 속성을 쓰지 않는다 */
.ss-field select,
.ss-detail-reason select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='8'%20viewBox='0%200%2012%208'%3E%3Cpath%20fill='none'%20stroke='%235c6470'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%20d='M1%201.6L6%206.4L11%201.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  /* 위치 세 값 표기를 모르는 구형 브라우저는 앞 선언으로 되돌아간다 */
  background-position: right center;
  background-position: right 10px center;
  cursor: pointer;
}

/* 인터넷 익스플로러가 따로 붙이는 화살표를 감춘다 */
.ss-field select::-ms-expand,
.ss-detail-reason select::-ms-expand {
  display: none;
}

.ss-field select:disabled {
  background-color: #f2f4f6;
  color: #999;
  cursor: default;
}

.ss-field .ss-radio-group {
  display: flex;
  align-items: center;
}

.ss-field .ss-radio-group > * + * {
  margin-left: 24px;
}

.ss-field .ss-radio-group label {
  font-size: 14px;
  font-weight: normal;
  color: #333;
  cursor: pointer;
}

.ss-year-range {
  display: flex;
  align-items: center;
}

.ss-year-range > * + * {
  margin-left: 8px;
}

.ss-btn-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
}

/* 조건 줄이 한 줄뿐인 화면에서도 단추는 회색 영역 아래쪽에 붙는다.
   조건과 단추 사이 최소 간격은 안쪽 여백으로 지킨다 */
.ss-search-box .ss-btn-row {
  margin-top: auto;
  padding-top: 18px;
}

.ss-btn-row > * + * {
  margin-left: 8px;
}

.ss-btn-row button {
  min-width: 76px;
  height: 34px;
  padding: 0 18px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}

.ss-btn-reset {
  background: #5c6470;
  border: 1px solid #5c6470;
  color: #fff;
}

.ss-btn-search {
  background: #1652c7;
  border: 1px solid #1652c7;
  color: #fff;
}

.ss-btn-reset:hover {
  background: #49505a;
}

.ss-btn-search:hover {
  background: #113f9a;
}

/* 결과 영역 */
.ss-result-count {
  font-size: 14px;
  color: #333;
  margin-bottom: 10px;
}

.ss-result-count strong {
  margin-left: 8px;
  font-weight: 600;
}

.ss-result-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.ss-result-table th {
  background: #f7f8fa;
  border-top: 1px solid #d9dde3;
  border-bottom: 1px solid #d9dde3;
  padding: 10px 8px;
  font-size: 13px;
  font-weight: 500;
  color: #333;
  text-align: center;
}

.ss-result-table td {
  border-bottom: 1px solid #e5e8ec;
  padding: 9px 8px;
  font-size: 13px;
  color: #444;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 위치보기 버튼 */
.ss-btn-location {
  background: #fff;
  border: 1px solid #1652c7;
  border-radius: 3px;
  color: #1652c7;
  font-size: 12px;
  padding: 3px 10px;
  cursor: pointer;
}

.ss-btn-location:hover {
  background: #eef3fd;
}

/* 결과 없음 안내 (시안 noneData 상태) */
.ss-empty {
  padding: 120px 0;
  text-align: center;
  font-size: 14px;
  color: #666;
}

/* 페이지네이션 */
.ss-paging {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 24px 0;
  list-style: none;
  padding: 0;
}

.ss-paging > li + li {
  margin-left: 4px;
}

.ss-paging li {
  min-width: 26px;
  height: 26px;
  line-height: 26px;
  text-align: center;
  font-size: 13px;
  color: #888;
  border-radius: 3px;
  cursor: pointer;
  user-select: none;
}

.ss-paging li.active {
  background: #333;
  color: #fff;
  cursor: default;
}

.ss-paging li.disable {
  color: #ccc;
  cursor: default;
}

/* 상세 페이지 */
.ss-detail-subject {
  margin: 26px 0 10px;
  font-size: 16px;
  font-weight: 600;
  color: #222;
}

.ss-detail-subject:first-of-type {
  margin-top: 0;
}

.ss-detail-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  border-top: 1px solid #d9dde3;
}

.ss-detail-table th {
  background: #f7f8fa;
  border-bottom: 1px solid #e5e8ec;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 500;
  color: #333;
  text-align: left;
}

.ss-detail-table td {
  border-bottom: 1px solid #e5e8ec;
  padding: 10px 12px;
  font-size: 13px;
  color: #444;
  /* 지질·광상 설명은 길어질 수 있어 줄바꿈을 허용한다 */
  word-break: break-all;
}

.ss-detail-reason {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.ss-detail-reason > * + * {
  margin-left: 8px;
}

.ss-detail-reason select {
  height: 32px;
  min-width: 180px;
  padding: 0 30px 0 8px;
  border: 1px solid #d0d5dc;
  border-radius: 3px;
  font-size: 13px;
}

.ss-detail-error,
.ss-detail-empty {
  padding: 60px 0;
  text-align: center;
  font-size: 14px;
  color: #666;
}

/* 단추를 좌우 끝으로 갈라 놓는 변형 */
.ss-btn-row--split {
  justify-content: space-between;
}

/* 목록으로 돌아가는 링크는 버튼과 같은 모양으로 맞춘다 */
.ss-btn-row a.ss-btn-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  height: 34px;
  padding: 0 18px;
  border-radius: 4px;
  font-size: 14px;
}

/* default.css 의 a:link/a:visited(#666) 와 a:hover(#333) 가 .ss-btn-reset 의
   흰 글자색보다 우선순위가 높아 회색 배경에 회색 글씨가 된다. 상태마다 다시 지정한다.
   같은 파일의 a:hover:not(.notunderline) 이 붙이는 밑줄도 함께 지운다 */
.ss-btn-row a.ss-btn-reset:link,
.ss-btn-row a.ss-btn-reset:visited,
.ss-btn-row a.ss-btn-reset:hover,
.ss-btn-row a.ss-btn-reset:active,
.ss-btn-row a.ss-btn-reset:focus {
  color: #fff;
  text-decoration: none;
}