@charset "UTF-8";
/* ============================================================
 * kendo-rounded.css
 * PC 버전 Kendo UI 위젯을 전반적으로 둥근 형태로 변경하는 오버라이드.
 * all.css(Kendo 테마) 뒤에 로드되어야 적용됩니다.
 *
 * 둥근 정도는 아래 변수 3개만 조절하면 전체가 함께 바뀝니다.
 *   --k-radius        : 버튼/입력 계열 (기본 6px)
 *   --k-radius-lg     : 창/그리드/팝업 등 컨테이너 (기본 8px)
 *   --k-radius-window : 다이얼로그(kendoWindow) (기본 10px)
 *
 * 라운딩 외에, Kendo 기본 테마의 accent(#F03223 붉은색)를 KOUP Primary 로
 * 바꾸는 오버라이드도 이 파일이 담당합니다(맨 아래 '선택 컨트롤' 절).
 * ============================================================ */

:root {
  --k-radius: 6px;
  --k-radius-lg: 8px;
  --k-radius-window: 10px;
  --btn-radius: 999px;   /* 버튼 완전 알약형 (원형 끝) */

  /* Kendo 테마 accent 교체용 — design.md §2.2 의 --c-primary 와 같은 값 */
  --k-accent:        #2B5FAE;
  --k-accent-ring:   rgba(43, 95, 174, .25);   /* 포커스 링 */
  --k-accent-ring-on:rgba(43, 95, 174, .35);   /* 체크된 상태의 포커스 링 */
}

/* ---------- 버튼 (알약형) ----------
 * Kendo 버튼(.k-button) + 프로젝트 커스텀 버튼(.btn 계열)을 모두 알약형으로.
 * .btn / .k-button 규칙은 style.css·all.css 보다 뒤에 로드되므로 곧바로 우선 적용됨. */
.k-button,
.k-button.k-bare,
.k-split-button > .k-button,
.k-upload .k-upload-button,
.btn,
.btn.small,
.btn.micro,
.btn.white,
.btn.active,
a.btn {
  border-radius: var(--btn-radius);
}
/* 로그인 버튼(.login_wrap .btn_login 은 2-클래스 특정도라 같은 특정도로 재정의) */
.login_wrap .btn_login { border-radius: var(--btn-radius); }
/* 스플릿 버튼: 왼/오 모서리 분리 */
.k-split-button > .k-button:first-child { border-radius: var(--btn-radius) 0 0 var(--btn-radius); }
.k-split-button > .k-split-button-arrow { border-radius: 0 var(--btn-radius) var(--btn-radius) 0; }

/* ---------- 입력(텍스트/영역) ----------
 * style.css 의 `input { border-radius:2px !important }`(L856) 를 이기려면
 * <input>/<textarea> 요소에는 !important 가 필요함 */
.k-textbox,
.k-autocomplete {
  border-radius: var(--k-radius);
}
input.k-textbox,
textarea.k-textbox,
input.k-input,
.k-textarea {
  border-radius: var(--k-radius) !important;
}
/* 래퍼 내부 실제 <input> 요소도 왼쪽 모서리 둥글게 (input !important 대응) */
.k-dropdown-wrap > input.k-input,
.k-picker-wrap > input.k-input,
.k-numeric-wrap > input.k-input {
  border-radius: var(--k-radius) 0 0 var(--k-radius) !important;
}

/* ---------- .i_inputs 영역 전체를 k-textbox 와 동일하게 라운딩 ----------
 * .i_inputs 안의 일반 input / textarea / select / 태그·스크롤 박스까지
 * 모두 --k-radius 로 통일 (체크박스·라디오는 제외).
 * style.css 의 `input{border-radius:2px !important}` 대응 위해 !important 사용 */
.i_inputs input:not([type="checkbox"]):not([type="radio"]),
.i_inputs textarea,
.i_inputs select,
.i_inputs .text,
.i_inputs .text.tag,
.i_inputs.scroll,
textarea.k-textbox,
select.k-textbox {
  border-radius: var(--k-radius) !important;
}

/* ---------- 드롭다운 / 콤보 / 날짜 / 숫자 / 멀티셀렉트 래퍼 ----------
 * 래퍼는 팝업을 감싸지 않으므로(팝업은 body로 분리) 안전하게 둥글게 처리 */
.k-dropdown-wrap,
.k-picker-wrap,
.k-numeric-wrap,
.k-multiselect-wrap,
.k-dropdowntree .k-dropdown-wrap {
  border-radius: var(--k-radius);
}
/* 래퍼 내부: 입력부는 왼쪽, 화살표(k-select) 버튼은 오른쪽 모서리만 둥글게 */
.k-dropdown-wrap > .k-input,
.k-picker-wrap > .k-input,
.k-numeric-wrap > .k-input {
  border-radius: var(--k-radius) 0 0 var(--k-radius);
}
.k-dropdown-wrap .k-select,
.k-picker-wrap .k-select,
.k-numeric-wrap .k-select {
  border-radius: 0 var(--k-radius) var(--k-radius) 0;
}
/* 숫자 입력의 위/아래 스핀 버튼 영역 */
.k-numeric-wrap .k-select .k-link-increase { border-radius: 0 var(--k-radius) 0 0; }
.k-numeric-wrap .k-select .k-link-decrease { border-radius: 0 0 var(--k-radius) 0; }

/* ---------- 팝업 목록 / 캘린더 ---------- */
.k-list-container,
.k-popup,
.k-calendar-container,
.k-autocomplete .k-list-container {
  border-radius: var(--k-radius-lg);
  overflow: hidden;               /* 목록 첫/끝 항목 모서리 클리핑 */
}
.k-calendar { border-radius: var(--k-radius-lg); }
.k-calendar .k-content td.k-state-selected .k-link,
.k-calendar .k-link.k-nav-today { border-radius: var(--k-radius); }

/* ---------- 창(kendoWindow) / 다이얼로그 ----------
 * .k-widget.k-window(2-클래스)로 특정도를 높여 테마 규칙을 확실히 덮어씀 */
.k-window,
.k-widget.k-window {
  border-radius: var(--k-radius-window);
  overflow: hidden;               /* 타이틀바/컨텐츠 모서리를 창 곡률에 맞춤 */
}
.k-widget.k-window > .k-window-titlebar,
.k-window > .k-window-titlebar,
.k-window-titlebar { border-radius: var(--k-radius-window) var(--k-radius-window) 0 0; }
.k-window .k-window-titlebar .k-window-action { border-radius: var(--btn-radius); }

/* 큰 창이 뷰포트(iframe 본문 높이)를 넘겨 center() 가 음수 top 을 줘서
 * 상단(타이틀바)이 헤더 뒤로 잘리는 것 방지 : 창 높이를 뷰포트에 맞춰 제한하고
 * 내용은 창 안에서 스크롤. 짧은 창은 영향 없음.
 * all.css 의 `.k-widget.k-window{max-height:90%!important}` 는 부모 높이가 불명확하면
 * 무효라 창이 내용만큼 커진다 → viewport 단위 + !important 로 확실히 캡. */
.k-window,
.k-widget.k-window {
  max-height: calc(100vh - 20px) !important;
  box-sizing: border-box;
}
.k-window > .k-window-content,
.k-widget.k-window > .k-window-content {
  max-height: calc(100vh - 20px - 50px) !important;   /* 타이틀바 높이만큼 제외 */
  overflow-y: auto !important;
  box-sizing: border-box;
}

/* ---------- 그리드(kendoGrid) ----------
 * 그리드는 가로 스크롤이 있어 바깥 상자에 overflow:hidden 을 주지 않고
 * 헤더 상단·페이저 하단 모서리만 곡률 처리 */
.k-grid { border-radius: var(--k-radius-lg); }
.k-grid .k-grid-header,
.k-grid .k-grid-header-wrap { border-radius: var(--k-radius-lg) var(--k-radius-lg) 0 0; }
.k-grid .k-grid-header-wrap > table > thead > tr:first-child > th:first-child { border-top-left-radius: var(--k-radius-lg); }
.k-grid .k-grid-pager,
.k-grid .k-pager-wrap { border-radius: 0 0 var(--k-radius-lg) var(--k-radius-lg); }

/* ---------- 탭 / 메뉴 / 패널바 ---------- */
.k-tabstrip .k-tabstrip-items .k-item { border-radius: var(--k-radius) var(--k-radius) 0 0; }
.k-tabstrip > .k-content { border-radius: 0 var(--k-radius-lg) var(--k-radius-lg) var(--k-radius-lg); }
.k-menu .k-item > .k-link { border-radius: var(--k-radius); }
.k-panelbar > .k-item > .k-link:first-child { border-radius: var(--k-radius) var(--k-radius) 0 0; }

/* ---------- jQuery UI 탭 (.ui-tabs .ui-widget-header) ----------
 * 탭 바 = <li> 들이 좌/상/우 테두리로 하나의 상자를 형성.
 * 첫 메뉴의 좌측상단, 마지막 메뉴의 우측상단만 둥글게. */
.ui-tabs .ui-tabs-nav.ui-widget-header,
.ui-tabs .ui-tabs-nav.ui-corner-all { border-top-left-radius: var(--k-radius); border-top-right-radius: var(--k-radius); }
.ui-tabs .ui-tabs-nav li:first-child,
.ui-tabs .ui-tabs-nav li:first-child .ui-tabs-anchor {
  border-top-left-radius: var(--k-radius);
}
.ui-tabs .ui-tabs-nav li:last-child,
.ui-tabs .ui-tabs-nav li:last-child .ui-tabs-anchor {
  border-top-right-radius: var(--k-radius);
}
/* li 배경(#e9e9e9/#fff)이 둥근 모서리를 넘지 않도록 클리핑 */
.ui-tabs .ui-tabs-nav li:first-child,
.ui-tabs .ui-tabs-nav li:last-child { overflow: hidden; }

/* ---------- 업로드 / 슬라이더 / 스위치 ---------- */
.k-upload { border-radius: var(--k-radius-lg); }
.k-upload .k-dropzone { border-radius: 0 0 var(--k-radius-lg) var(--k-radius-lg); }
.k-slider .k-slider-selection,
.k-slider .k-slider-track { border-radius: var(--k-radius); }
.k-slider .k-draghandle { border-radius: 50%; }

/* ---------- 알림 / 툴팁 / 태그(멀티셀렉트 값) ---------- */
.k-notification { border-radius: var(--k-radius); }
.k-tooltip { border-radius: var(--k-radius); }
.k-multiselect-wrap .k-button,
.k-multiselect .k-button { border-radius: var(--k-radius); }

/* ---------- 선택 컨트롤 (체크박스 / 라디오) ----------
 * Kendo 기본 테마는 accent 가 #F03223(붉은색)이라 선택 시 붉은 음영이 남는다.
 * KOUP Primary(--k-accent)로 교체하고, 모서리를 둥글게, 포커스를 또렷하게 한다.
 * 체크 그림은 ::before(16x16 상자) + ::after(체크 아이콘) 조합이다. */

/* 상자 : 라운드 + 상태 전환 */
.k-checkbox-label::before {
  border-radius: 4px;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.k-radio-label::before {
  border-radius: 50%;                    /* 라디오는 원형 유지 */
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

/* 체크/선택 상태 */
.k-checkbox:checked + .k-checkbox-label::before,
.k-radio:checked + .k-radio-label::before {
  border-color: var(--k-accent);
  background-color: var(--k-accent);
}
.k-checkbox:indeterminate + .k-checkbox-label::after {
  background-color: var(--k-accent);
}

/* 포커스 : 기본값 rgba(0,0,0,.06) 은 거의 보이지 않아 키보드 이동 시 위치를 알 수 없다 */
.k-checkbox:focus + .k-checkbox-label::before,
.k-radio:focus + .k-radio-label::before {
  border-color: var(--k-accent);
  box-shadow: 0 0 0 3px var(--k-accent-ring);
}
.k-checkbox:checked:focus + .k-checkbox-label::before,
.k-radio:checked:focus + .k-radio-label::before {
  box-shadow: 0 0 0 3px var(--k-accent-ring-on);
}

/* 호버 */
.k-checkbox-label:hover::before,
.k-radio-label:hover::before {
  border-color: var(--k-accent);
}
.k-checkbox-label:hover::after {
  color: var(--k-accent);
}
.k-radio-label:hover::after {
  background-color: var(--k-accent);
}