@charset "UTF-8";
body {
  margin: 0;
  background: #f5f6fc;
  color: #40495e;
  font-family: "Pretendard";
  display: flex;
  overflow: hidden;
  height: 100vh;
}

.copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 6px 10px;
  font-size: 0.875rem;
  border: 1px solid #d2d6e8;
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  z-index: 1005;
}

/**********레이아웃**********/
/********** Sidebar **********/
.sidebar {
  width: 16rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  padding: 1rem 0.75rem;
  transition: width 0.25s ease;
}
.sidebar.collapsed {
  width: 3.25rem;
  padding: 1rem 0 1rem 0.75rem;
}
.sidebar.collapsed .nav ul li .nav-btn {
  padding: 0.625rem;
}
.sidebar.collapsed .label {
  display: none;
}
.sidebar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  justify-content: space-between;
}
.sidebar .brand .hamburger {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.sidebar .brand .hamburger span {
  width: 18px;
  height: 2px;
  background: #2b3343;
  position: relative;
}
.sidebar .brand .hamburger span::before, .sidebar .brand .hamburger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: #2b3343;
}
.sidebar .brand .hamburger span::before {
  top: -6px;
}
.sidebar .brand .hamburger span::after {
  top: 6px;
}

/********** App **********/
.app {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  /* Topbar */
  /* Main layout */
}
.app .topbar {
  height: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem 1rem 1.75rem;
}
.app .main {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 0;
  padding: 0 1rem 1rem;
  height: calc(100vh - 5.5rem);
}
.app .main .panel {
  background: #fff;
  border-radius: 1rem;
  overflow: hidden;
  position: relative;
}
.app .main .panel > h2 {
  padding: 1rem 1.25rem;
  height: 4.5rem;
  display: flex;
  align-items: center;
  font-size: 1.125rem;
  font-weight: 500;
  color: #1a202f;
  line-height: 140%;
}
.app .main .panel > h2 .check-wrap {
  margin-left: auto;
}
.app .main .panel.table-card {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.app .main .panel .panel-body {
  flex: 1 auto;
}
.app .main .panel .panel-body .empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #949ab8;
  font-weight: 400;
  font-size: 0.875rem;
}

.guide-wrap {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.guide-wrap::-webkit-scrollbar {
  width: 0 !important;
  display: none;
}
.guide-wrap .guide-box {
  display: flex;
  flex-direction: column;
  position: relative;
}
.guide-wrap .guide-box:not(:first-of-type) {
  margin-top: 2rem;
}
.guide-wrap .guide-box > h2 {
  color: #1a202f;
  font-size: 1.5rem;
  font-weight: 800;
  height: 3rem;
  display: flex;
  align-items: center;
}
.guide-wrap .guide-box .layout {
  padding: 1rem 0.5rem;
  display: flex;
}
.guide-wrap .guide-box .layout .cont {
  width: 33%;
  border: 1px solid #eaebf7;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}
.guide-wrap .guide-box .layout .cont:not(:first-of-type) {
  border-left: none;
}
.guide-wrap .guide-box .layout .cont h3 {
  font-size: 1rem;
  font-weight: 500;
  color: #111;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
  border-bottom: 1px solid #eaebf7;
}
.guide-wrap .guide-box .layout .cont .item {
  position: relative;
  padding: 2rem 0;
  height: calc(100% - 3rem);
  min-width: 0;
  displaY: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/********** Color **********/
.color-guide h2 {
  color: #1a202f;
  font-size: 1.5rem;
  font-weight: 800;
  height: 3rem;
  display: flex;
  align-items: center;
}
.color-guide dl {
  width: 15rem;
  justify-content: space-between;
  align-items: center;
  display: flex;
  height: 3rem;
  color: #1a202f;
}
.color-guide dl.light1 {
  background: #fff;
}
.color-guide dl.light2 {
  background: #F5F6FC;
}
.color-guide dl.light3 {
  background: #EAEBF7;
}
.color-guide dl.light4 {
  background: #E1E3F2;
}
.color-guide dl.light5 {
  background: #D2D6E8;
}
.color-guide dl.medium1 {
  background: #949AB8;
  color: #fff;
}
.color-guide dl.medium2 {
  background: #757B98;
  color: #fff;
}
.color-guide dl.dark1 {
  background: #40495E;
  color: #fff;
}
.color-guide dl.dark2 {
  background: #1A202F;
  color: #fff;
}
.color-guide dl dt {
  padding-left: 0.5rem;
}
.color-guide dl dd {
  padding-right: 0.5rem;
}

/********** 체크박스 **********/
.form-group {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}
.form-group.reverse {
  flex-direction: row-reverse;
  /* ✅ 순서 반전 */
  justify-content: flex-start;
}
.form-group.reverse label {
  flex-direction: row-reverse;
  /* ✅ label 안의 before/after도 반전 */
  justify-content: flex-end;
}
.form-group.reverse label::before {
  margin-left: 0.75rem;
  margin-right: 0.75rem;
}
.form-group.reverse label::after {
  left: auto;
  right: 0;
}
.form-group.reverse input {
  left: auto;
  right: 0;
}
.form-group input {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  opacity: 0;
  margin: 0;
  clip: auto;
  cursor: pointer;
}
.form-group label {
  position: relative;
  cursor: pointer;
  line-height: 1;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  color: #40495e;
  /* 박스 */
}
.form-group label::before {
  content: "";
  box-sizing: border-box;
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 1px solid #757b98;
  border-radius: 1px;
  background: #fff;
  vertical-align: middle;
  margin-right: 0.75rem;
  margin-left: 0.75rem;
  transition: background 0.16s, border-color 0.16s, box-shadow 0.16s;
}
.form-group label::after {
  content: "";
  position: absolute;
  left: 0.75rem;
  top: 0px;
  width: 1rem;
  height: 1rem;
  opacity: 0;
  background: no-repeat center/16px 16px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'><path d='M5 10.5 L9 14 L17 6' stroke='%23FFFFFF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  transition: opacity 0.12s ease;
  pointer-events: none;
}
.form-group input:checked + label::before {
  background: #328aff;
  border-color: #328aff;
}
.form-group input:checked + label::after {
  opacity: 1;
}
.form-group input:focus-visible + label::before {
  box-shadow: 0 0 0 3px rgba(50, 138, 255, 0.25);
}
.form-group input:disabled + label {
  cursor: not-allowed;
  opacity: 0.6;
}

.form-group2 {
  display: inline-flex;
  align-items: center;
  /* 상태 */
}
.form-group2 input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  clip: rect(0, 0, 0, 0);
}
.form-group2 label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.875rem;
}
.form-group2 label .box {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  /* 필요 시 8px 등 */
  position: relative;
  flex: 0 0 2rem;
  /* 16×16 테두리 박스 */
  /* 둥근 끝 체크 아이콘(화이트) */
}
.form-group2 label .box::before {
  content: "";
  box-sizing: border-box;
  width: 1rem;
  height: 1rem;
  border: 1px solid #757b98;
  border-radius: 0.125rem;
  background: #fff;
  transition: background 0.16s, border-color 0.16s, box-shadow 0.16s;
  display: block;
}
.form-group2 label .box::after {
  content: "";
  position: absolute;
  inset: 0;
  /* 32×32 안 중앙 배치 */
  opacity: 0;
  pointer-events: none;
  background: no-repeat center/14px 14px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'><path d='M5 10.5 L9 14 L17 6' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  transition: opacity 0.12s ease;
}
.form-group2 input:checked + label .box::before {
  background: #328aff;
  border-color: #328aff;
}
.form-group2 input:checked + label .box::after {
  opacity: 1;
}

.form-group3 {
  display: inline-flex;
  align-items: center;
  /* 체크되면 위 'mixed' 연출보다 체크 스타일이 우선됨(아래 규칙이 더 나중에 배치되어서) */
  /* ---------------------------------------- */
  /* (옵션) 진짜 :indeterminate도 지원하려면 같이 둬도 됨 */
}
.form-group3 input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  clip: rect(0, 0, 0, 0);
}
.form-group3 label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.875rem;
}
.form-group3 label .box {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  position: relative;
  flex: 0 0 2rem;
  /* 16×16 테두리 박스 (기본/해제 상태) */
}
.form-group3 label .box::before {
  content: "";
  box-sizing: border-box;
  width: 1rem;
  height: 1rem;
  border: 1px solid #757b98;
  border-radius: 0.125rem;
  background: #fff;
  transition: background 0.16s, border-color 0.16s, box-shadow 0.16s;
  display: block;
}
.form-group3 label .box::after {
  content: "";
  position: absolute;
  inset: 0;
  /* 32×32 중앙 정렬 */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease, background 0.12s ease;
}
.form-group3 input:checked + label .box::before {
  background: #328aff;
  border-color: #328aff;
}
.form-group3 input:checked + label .box::after {
  opacity: 1;
  background: no-repeat center/14px 14px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'><path d='M5 10.5 L9 14 L17 6' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.form-group3 input[aria-checked=mixed] + label .box::before {
  background: #fff;
  border-color: #757b98;
  /* 테두리 유지 */
}
.form-group3 input[aria-checked=mixed] + label .box::after {
  opacity: 1;
  background: no-repeat center/6px 2px linear-gradient(#757b98, #757b98);
  /* 대시 */
}
.form-group3 input:indeterminate + label .box::before {
  background: #fff;
  border-color: #757b98;
}
.form-group3 input:indeterminate + label .box::after {
  opacity: 1;
  background: no-repeat center/6px 2px linear-gradient(#757b98, #757b98);
}
.form-group3 input:focus-visible + label .box::before {
  box-shadow: 0 0 0 3px rgba(50, 138, 255, 0.25);
}
.form-group3 input:disabled + label {
  cursor: not-allowed;
  opacity: 0.6;
}

.btn-menu {
  padding: 0.75rem;
  border-radius: 50%;
  background: #1d36aa0d;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.btn-menu.btn-menu-40 {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.625rem;
}
.btn-menu.btn-menu-32 {
  width: 2rem;
  height: 2rem;
  padding: 0.5rem;
}

/********** 라디오버튼 **********/
.radio-group {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  /* 공개 / 비공개 간격 */
  font-size: 0.875rem;
  color: #40495e;
  font-weight: 400;
}

.radio-btn {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  gap: 0.5rem;
  position: relative;
}
.radio-btn input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.radio-btn .radio-icon {
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  border: 1px solid #949ab8;
  display: inline-block;
  box-sizing: border-box;
  transition: all 0.2s ease;
  position: relative;
}
.radio-btn .radio-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.2s ease;
}
.radio-btn input:checked + .radio-icon {
  background: #3882f3;
  /* ✅ 파란 배경 */
  border-color: #3882f3;
}
.radio-btn input:checked + .radio-icon::after {
  transform: translate(-50%, -50%) scale(1);
}
.radio-btn input:checked ~ span,
.radio-btn input:checked ~ .label {
  color: #40495e;
}

/********** 버튼 **********/
button {
  border: none;
  background: none;
  padding: 0;
}

/********** 버튼 공통 **********/
.btn {
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  line-height: 160%;
  border-radius: 10rem;
  cursor: pointer;
}

/********** height: 48px **********/
.btn-l {
  height: 3rem;
  gap: 0.375rem;
  font-size: 1rem;
}
.btn-l i {
  width: 1.25rem;
  height: 1.25rem;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/********** height: 40px **********/
.btn-s {
  height: 2.5rem;
  gap: 0.25rem;
  font-size: 0.875rem;
}
.btn-s i {
  width: 1rem;
  height: 1rem;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-type1 {
  background: #328aff;
  color: #fff;
}
.btn-type1:hover {
  background: #2a73ea;
}
.btn-type1:disabled {
  background: #f5f6fc;
  color: #d2d6e8;
  cursor: inherit;
}

.btn-type2 {
  background: #eaebf7;
  color: #757b98;
}
.btn-type2:hover {
  background: #e1e3f2;
  color: #757b98;
}
.btn-type2:disabled {
  background: #f5f6fc;
  color: #d2d6e8;
  cursor: inherit;
}

.btn-type3 {
  background: #da3755;
  color: #fff;
}
.btn-type3:hover {
  background: #c02b46;
  color: #fff;
}
.btn-type3:disabled {
  background: #f5f6fc;
  color: #d2d6e8;
  cursor: inherit;
}

/********** text 버튼 **********/
.text-btn {
  height: 2.5rem;
  min-width: 3.25rem;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  border-radius: 1.25rem;
  gap: 0.375rem;
  color: #757b98;
  font-weight: 600;
  cursor: pointer;
}

/********** default **********/
.text-btn-d {
  color: #40495e;
  height: 2.5rem;
  line-height: 2.5rem;
  font-weight: 600;
}
.text-btn-d.nohover {
  padding: 0 !important;
}
.text-btn-d.nohover:hover {
  background: none;
}
.text-btn-d:hover {
  background: #1d36aa0d;
  cursor: pointer;
}
.text-btn-d:disabled {
  background: none;
  color: #d2d6e8;
  cursor: inherit;
}
.text-btn-d:disabled i {
  color: #d2d6e8;
}
.text-btn-d i {
  width: 1.25rem;
  height: 1.25rem;
  font-size: 1.25rem;
  color: #757b98;
  display: flex;
  align-items: center;
  justify-content: center;
}

/********** 에러버튼 **********/
.text-btn-e {
  color: #da3755;
}
.text-btn-e:hover {
  background: #da37550d;
  cursor: pointer;
}
.text-btn-e:disabled {
  background: none;
  color: #d2d6e8;
  cursor: inherit;
}
.text-btn-e:disabled i {
  color: #d2d6e8;
}
.text-btn-e i {
  width: 1.25rem;
  height: 1.25rem;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/********** height: 32px; **********/
.text-btn-32 {
  height: 2rem;
  line-height: 2rem;
  padding: 0 0.75rem;
  display: flex;
  border-radius: 1.25rem;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  color: #757b98;
  font-size: 0.875rem;
  cursor: pointer;
}
.text-btn-32 i {
  width: 1rem;
  height: 1rem;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-list {
  border-radius: 0.25rem;
  border: 1px solid #e1e3f2;
  background: #1d36aa0d;
  height: 2rem;
  padding: 0 0.5rem;
  gap: 0.5rem;
  display: flex;
  font-size: 0.875rem;
  align-items: center;
}
.btn-list span {
  width: 5rem;
}
.btn-list:hover {
  background: #e1e3f2;
  border: 1px solid #d2d6e8;
  cursor: pointer;
}
.btn-list i {
  font-size: 1rem;
  color: #757b98;
}

.btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
}
.btn-icon.nohover:hover {
  background: none;
}

.btn-icon-48 {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #757b98;
}
.btn-icon-48 i {
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-icon-48:hover {
  background: #1d36aa0d;
}

.btn-icon-40 {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #757b98;
}
.btn-icon-40 i {
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-icon-40:hover {
  background: #1d36aa0d;
}
.btn-icon-40.hover {
  background: #1d36aa0d;
}

.btn-icon-32 {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #757b98;
}
.btn-icon-32 i {
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-icon-32:hover {
  background: #1d36aa0d;
}

.btn-icon-fill {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #757b98;
  background: #1d36aa0d;
}
.btn-icon-fill i {
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-icon-fill:hover {
  background: #1d36aa0d;
}

.btn-wrap {
  width: 100%;
  justify-content: space-between;
  display: flex;
  height: 3.5rem;
  align-items: center;
  padding: 0 1rem 0 1.25rem;
  border-top: 1px solid #eaebf7;
}
.btn-wrap .btn-group {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.btn-wrap .btn-group .btn-confirm {
  color: #328aff;
}

/********** dropdown **********/
.dropdown-wrap {
  display: flex;
  gap: 0.5rem;
  min-width: 17.5rem;
  flex-direction: column;
}
.dropdown-wrap label {
  padding-left: 0.25rem;
  color: #757b98;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 160%;
}
.dropdown-wrap .select-menu {
  width: 99%;
  cursor: pointer;
  position: relative;
  --dd-h: 0px;
}
.dropdown-wrap .select-menu:has(.options-list.active) {
  z-index: 23;
  /* 위로 */
}
.dropdown-wrap .select-menu:has(.options-list.active)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  /* 컨트롤 높이 + 드롭다운(패딩 포함) 최대높이 + 보더 여유 */
  height: calc(2.5rem + var(--dd-h, 0px));
  /* ← 여기만 교체 */
  border-radius: 0.5rem;
  pointer-events: none;
  /* 클릭 방해 X */
  box-shadow: 0 0.375rem 0.75rem rgba(32, 33, 53, 0.3), 0 2px 4px rgba(32, 33, 53, 0.14);
  background: #fff;
  border: 1px solid #e1e3f2;
}
.dropdown-wrap .select-menu .select-box {
  width: 100%;
  border-radius: 0.5rem;
  height: 2.5rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.75rem;
  font-size: 0.875rem;
  border: 1px solid #e1e3f2;
}
.dropdown-wrap .select-menu .select-box span {
  color: #949ab8;
}
.dropdown-wrap .select-menu .select-box i {
  font-size: 1rem;
}
.dropdown-wrap .select-menu .select-box.active {
  border-radius: 0.5rem 0.5rem 0 0;
  position: relative;
  z-index: 23;
  border: none;
  border-bottom: 1px solid #e1e3f2;
}
.dropdown-wrap .select-menu .options-list {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  font-weight: 400;
  background: #fff;
  border: 1px solid #DBDEE1;
  border-radius: 0 0 0.5rem 0.5rem;
  display: none;
  z-index: 22;
}
.dropdown-wrap .select-menu .options-list.active {
  display: block;
  border: none;
}
.dropdown-wrap .select-menu .options-list .option {
  height: 2.5rem;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  position: relative;
}
.dropdown-wrap .select-menu .options-list .option span {
  padding: 0.5rem;
  position: relative;
  z-index: 333;
}
.dropdown-wrap .select-menu .options-list .option:hover, .dropdown-wrap .select-menu .options-list .option.selected {
  color: #40495e;
  background: #1d36aa0d;
  border-radius: 0;
}
.dropdown-wrap .select-menu .options-list .option.option-add {
  color: #949ab8;
}
.dropdown-wrap .select-menu .options-list::-webkit-scrollbar {
  width: 1rem;
  border-top-right-radius: 0.75rem;
  border-bottom-right-radius: 0.75rem;
}
.dropdown-wrap .select-menu .options-list::-webkit-scrollbar-thumb {
  width: 0.5rem;
  border-radius: 0.5rem;
}
.dropdown-wrap .input-wrap {
  width: calc(100% - 7.5rem);
  margin-left: 0.5rem;
}

.dropdown-wrap2 {
  display: flex;
  gap: 0.5rem;
  flex-direction: column;
}
.dropdown-wrap2 .select-menu {
  width: 99%;
  cursor: pointer;
  position: relative;
  --dd-h: 0px;
}
.dropdown-wrap2 .select-menu:has(.options-list.active) {
  z-index: 23;
  /* 위로 */
}
.dropdown-wrap2 .select-menu:has(.options-list.active)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  /* 컨트롤 높이 + 드롭다운(패딩 포함) 최대높이 + 보더 여유 */
  height: calc(2.5rem + var(--dd-h, 0px));
  /* ← 여기만 교체 */
  border-radius: 0.5rem;
  pointer-events: none;
  /* 클릭 방해 X */
  box-shadow: 0 0.375rem 0.75rem rgba(32, 33, 53, 0.3), 0 2px 4px rgba(32, 33, 53, 0.14);
  background: #fff;
  border: 1px solid #e1e3f2;
}
.dropdown-wrap2 .select-menu .select-box {
  width: 100%;
  border-radius: 0.5rem;
  height: 2.5rem;
  display: flex;
  gap: 1rem;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.75rem;
  font-size: 0.875rem;
}
.dropdown-wrap2 .select-menu .select-box span {
  color: #949ab8;
  white-space: nowrap;
}
.dropdown-wrap2 .select-menu .select-box i {
  font-size: 1rem;
}
.dropdown-wrap2 .select-menu .select-box.active {
  border-radius: 0.5rem 0.5rem 0 0;
  position: relative;
  z-index: 23;
  border: none;
  border-bottom: 1px solid #e1e3f2;
}
.dropdown-wrap2 .select-menu .options-list {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  font-weight: 400;
  background: #fff;
  border: 1px solid #DBDEE1;
  border-radius: 0 0 0.5rem 0.5rem;
  display: none;
  z-index: 22;
}
.dropdown-wrap2 .select-menu .options-list.active {
  display: block;
  border: none;
}
.dropdown-wrap2 .select-menu .options-list .option {
  height: 2.5rem;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  position: relative;
}
.dropdown-wrap2 .select-menu .options-list .option span {
  padding: 0.5rem;
  position: relative;
  z-index: 333;
}
.dropdown-wrap2 .select-menu .options-list .option:hover, .dropdown-wrap2 .select-menu .options-list .option.selected {
  color: #40495e;
  background: #1d36aa0d;
  border-radius: 0;
}
.dropdown-wrap2 .select-menu .options-list .option.option-add {
  color: #949ab8;
}
.dropdown-wrap2 .select-menu .options-list::-webkit-scrollbar {
  width: 1rem;
  border-top-right-radius: 0.75rem;
  border-bottom-right-radius: 0.75rem;
}
.dropdown-wrap2 .select-menu .options-list::-webkit-scrollbar-thumb {
  width: 0.5rem;
  border-radius: 0.5rem;
}
.dropdown-wrap2 .input-wrap {
  width: calc(100% - 7.5rem);
  margin-left: 0.5rem;
}

/* 컨테이너 */
.ui-dd {
  --dd-h: 0px;
  /* JS가 펼칠 때 넣음 */
  position: relative;
  width: 100%;
  cursor: pointer;
}
.ui-dd:has(.ui-dd__menu.is-open) {
  z-index: 23;
}
.ui-dd:has(.ui-dd__menu.is-open)::after {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  height: calc(40px + var(--dd-h, 0px));
  border-radius: 8px;
  pointer-events: none;
  box-shadow: 0 6px 12px rgba(32, 33, 53, 0.3), 0 2px 4px rgba(32, 33, 53, 0.14);
  background: #fff;
  border: 1px solid #DBDEE1;
}

/* 컨트롤 */
.ui-dd__control {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 12px;
  background: #fff;
  border: 1px solid #DBDEE1;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1;
  color: #344054;
  position: relative;
  z-index: 23;
}
.ui-dd__control.is-active {
  border-radius: 8px 8px 0 0;
  border: none;
  border-bottom: 1px solid #DBDEE1;
}

/* 선택값이 있을 때 파란 헤더(원하면 제거 가능) */
.ui-dd.is-filled .ui-dd__control {
  background: #1F56E0;
  border-color: #1F56E0;
  color: #fff;
}
.ui-dd.is-filled .ui-dd__control .ui-dd__caret {
  color: #fff;
}

.ui-dd__caret {
  transition: transform 0.2s ease;
}

.ui-dd__control.is-active .ui-dd__caret {
  transform: rotate(180deg);
}

/* 메뉴 */
.ui-dd__menu {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #fff;
  border: 1px solid #DBDEE1;
  border-top: none;
  border-radius: 0 0 8px 8px;
  display: none;
  z-index: 22;
  padding: 4px 0;
  max-height: 240px;
  overflow: auto;
  box-shadow: 0 6px 12px rgba(32, 33, 53, 0.3), 0 2px 4px rgba(32, 33, 53, 0.14);
}
.ui-dd__menu.is-open {
  display: block;
  border: none;
}

/* 옵션 */
.ui-dd__option {
  position: relative;
  height: 36px;
  line-height: 36px;
  padding: 0 16px 0 36px;
  font-size: 14px;
  color: #657080;
}
.ui-dd__option:hover, .ui-dd__option.is-selected {
  background: #F2F6FF;
  color: #101828;
}
.ui-dd__option.is-selected::before {
  content: "✔";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
}

/* 스크롤바(옵션) */
.ui-dd__menu::-webkit-scrollbar {
  width: 12px;
}

.ui-dd__menu::-webkit-scrollbar-thumb {
  border-radius: 8px;
}

/********** Input **********/
.field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.field .label {
  padding-left: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #757b98;
  line-height: 160%;
}
.field .input-box {
  display: inline-flex;
  position: relative;
}
.field .input-box .input {
  height: 2.5rem;
  border-radius: 0.5rem;
  border: 1px solid #e1e3f2;
  padding: 0.5rem 0.75rem;
  width: 100%;
  min-width: 17.5rem;
  background: #fff;
  outline: none;
  box-sizing: border-box;
  color: #40495e;
  font-size: 0.875rem;
  font-weight: 600;
}
.field .input-box .input::placeholder {
  font-weight: 400;
  color: #949ab8;
}
.field .input-box .input:focus {
  border: 1px solid #328aff;
}
.field .input-box .input.error {
  border: 1px solid #da3755;
}
.field .input-box span {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  padding: 0.5rem;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.field .textarea {
  display: inline-flex;
  position: relative;
  flex-direction: column;
  gap: 0.375rem;
}
.field .textarea .textarea-box {
  border-radius: 0.5rem;
  border: 1px solid #e1e3f2;
  padding: 0.5rem 0.75rem;
  background: #fff;
  outline: none;
  box-sizing: border-box;
  color: #40495e;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 160%;
  min-width: 17.5rem;
  width: 100%;
  min-height: 2.5rem;
  box-sizing: border-box;
  overflow: hidden;
  resize: none;
}
.field .textarea .textarea-box::placeholder {
  font-weight: 400;
  color: #949ab8;
}
.field .textarea .textarea-box:focus {
  border: 1px solid #328aff;
}
.field .textarea .textarea-box.error {
  border: 1px solid #da3755;
}
.field .textarea span {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  padding: 0.5rem;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.field .image-upload-box {
  border: 1px solid #e1e3f2;
  border-radius: 0.5rem;
  width: 100%;
  height: 7.5rem;
  padding: 0.5rem 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #949ab8;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 160%;
  position: relative;
}
.field .input-msg {
  font-size: 0.75rem;
  font-weight: 500;
  color: #757b98;
  line-height: 160%;
  display: flex;
  padding-left: 0.25rem;
}
.field .input-msg.right {
  justify-content: end;
}
.field .input-msg.error {
  color: #da3755;
}
.field .day-select {
  display: inline-flex;
  gap: 0;
}
.field .day-btn {
  flex: 1 1 0;
  border: none;
  background: transparent;
  color: #949ab8;
  font-size: 0.875rem;
  height: 2.5rem;
  font-weight: 400;
  line-height: 160%;
  cursor: pointer;
  border-radius: 0;
  transition: background 0.2s, color 0.2s, border-radius 0.2s;
}
.field .day-btn.is-active {
  background: #338bff14;
  color: #2a73ea;
  font-weight: 600;
}
.field .day-btn.is-single {
  border-radius: 0.5rem;
}
.field .day-btn.is-start {
  border-radius: 0.5rem 0 0 0.5rem;
}
.field .day-btn.is-end {
  border-radius: 0 0.5rem 0.5rem 0;
}

/********** Login Field **********/
.login-field {
  display: flex;
  flex-direction: column;
  border: 1px solid #e1e3f2;
  min-width: 17.5rem;
  border-radius: 0.5rem;
  box-sizing: border-box;
}
.login-field .box {
  height: 2.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  position: relative;
  box-sizing: border-box;
}
.login-field .box:first-child {
  border-bottom: 1px solid #e1e3f2;
}
.login-field .box .c-icon {
  width: 1.25rem;
  margin-left: 0.75rem;
}
.login-field .box .input {
  border: none;
  outline: none;
  color: #40495e;
  font-size: 0.875rem;
}
.login-field .box .input::placeholder {
  color: #949ab8;
}
.login-field .box:focus-within {
  border: 1px solid #328aff;
}
.login-field .box:focus-within:first-child {
  border-radius: 0.5rem 0.5rem 0 0;
}
.login-field .box:focus-within:last-child {
  border-radius: 0 0 0.5rem 0.5rem;
}
.login-field .box .input-btn {
  position: absolute;
  display: flex;
  align-items: center;
  right: 0.75rem;
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
}
.login-field .box .input-btn span {
  padding: 0.5rem;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.login-field .box .input-btn span:first-of-type {
  right: 3.25rem;
}

/********** Table **********/
.data-table {
  padding: 0 1rem;
  width: 100%;
}
.data-table .table-header,
.data-table .table-row {
  display: flex;
  align-items: center;
}
.data-table .table-header {
  font-size: 0.75rem;
  color: #757b98;
  font-weight: 600;
  height: 2.5rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid #eaebf7;
  gap: 1.5rem;
}
.data-table .table-header > [role=item-56] {
  text-align: left;
  width: 3.5rem;
}
.data-table .table-header > [role=item-88] {
  width: 5.5rem;
}
.data-table .table-header > [role=item-96] {
  width: 6rem;
}
.data-table .table-header > [role=item-120] {
  width: 7.5rem;
}
.data-table .table-header > [role=item-144] {
  width: 9rem;
}
.data-table .table-header > [role=item-168] {
  width: 10.5rem;
}
.data-table .table-header > [role=item-200] {
  width: 12.5rem;
  display: flex;
  align-items: center;
}
.data-table .table-header > [role=item-272] {
  width: 17rem;
  display: flex;
  align-items: center;
}
.data-table .table-header > [role=auto] {
  flex: 1;
}
.data-table .table-header > [role=check] {
  width: 2rem;
}
.data-table .table-header > [role=icon] {
  width: 2rem;
}
.data-table .table-header > [role=filter] {
  width: 6.5rem;
  display: flex;
  align-items: center;
}
.data-table .table-header > [role=filter] button {
  width: 2rem;
  height: 2rem;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #757b98;
  cursor: pointer;
}
.data-table .table-header > [role=filter] .filter-trigger {
  line-height: 1;
  cursor: pointer;
}
.data-table .table-row {
  transition: background 0.12s ease;
  height: 3.25rem;
  border-bottom: 1px solid #f5f6fc;
  font-size: 0.875rem;
  padding: 0 0.75rem;
  color: #40495e;
  font-weight: 400;
  gap: 1.5rem;
}
.data-table .table-row.row-active {
  background: #f5f6fc;
}
.data-table .table-row:hover {
  background: #1d36aa0d;
  cursor: pointer;
}
.data-table .table-row > [role=item-56] {
  text-align: left;
  width: 3.5rem;
}
.data-table .table-row > [role=item-88] {
  width: 5.5rem;
}
.data-table .table-row > [role=item-96] {
  width: 6rem;
}
.data-table .table-row > [role=item-120] {
  width: 7.5rem;
}
.data-table .table-row > [role=item-144] {
  width: 9rem;
}
.data-table .table-row > [role=item-168] {
  width: 10.5rem;
}
.data-table .table-row > [role=item-200] {
  width: 12.5rem;
  display: flex;
  align-items: center;
}
.data-table .table-row > [role=item-272] {
  width: 17rem;
  display: flex;
  align-items: center;
}
.data-table .table-row > [role=item-272] > .period {
  width: 15rem;
}
.data-table .table-row > [role=auto] {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  line-height: 3.25rem;
  display: flex;
  align-items: center;
}
.data-table .table-row > [role=auto] .chip--compact {
  margin-left: auto;
}
.data-table .table-row > [role=check] {
  width: 2rem;
}
.data-table .table-row > [role=icon] {
  width: 2rem;
}
.data-table .table-row > [role=icon] i {
  font-size: 1.25rem;
  color: #757b98;
}
.data-table .table-row > [role=filter] {
  width: 6.5rem;
  position: relative;
}
.data-table .table-row .avatar {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: #5B6280;
}
.data-table .table-row .avatar img {
  width: 1.25rem;
  height: 1.25rem;
}

/* 기본: 체크 컬럼 숨김 */
/********** Context menu **********/
.context-menu {
  width: 7.5rem;
  box-shadow: 0 0.375rem 0.75rem 0 rgba(32, 33, 53, 0.3);
  border: 1px solid #e1e3f2;
  padding: 0.5rem 0;
  border-radius: 0.5rem;
}
.context-menu h2 {
  height: 2rem;
  display: flex;
  align-items: center;
  padding: 0 0.75rem 0 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 160%;
  color: #40495e;
  justify-content: space-between;
}
.context-menu.icon {
  width: 12.5rem;
}
.context-menu.check {
  width: 10rem;
}
.context-menu.filter {
  width: 12.5rem;
}
.context-menu.filter .search {
  margin: 0.25rem 0.75rem 0.75rem 0.75rem;
}
.context-menu.filter li {
  position: relative;
  padding-left: 2.25rem;
  /* 호버/포커스 시: 기본 아이콘 숨기고 체크 보이기 */
}
.context-menu.filter li.is-selected i.checkmark {
  opacity: 1;
}
.context-menu.filter li > i:not(.checkmark) {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  transition: opacity 0.12s ease;
  opacity: 1;
}
.context-menu.filter li > i.checkmark {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  transition: opacity 0.12s ease;
  opacity: 0;
  color: #328aff;
}
.context-menu.filter-full {
  width: 15rem;
}
.context-menu.filter-full .filter-search {
  padding: 0.25rem 0.75rem 0.75rem 0.75rem;
}
.context-menu.filter-full .filter-search.small {
  min-width: auto;
  width: 100%;
}
.context-menu.sch {
  width: 15rem;
}
.context-menu.sch .context-menu-sch {
  padding: 0.25rem 0.75rem 0.75rem 0.75rem;
  width: 100%;
}
.context-menu.sch li {
  position: relative;
  padding-left: 2.25rem;
  /* 호버/포커스 시: 기본 아이콘 숨기고 체크 보이기 */
}
.context-menu.sch li > i:not(.checkmark) {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  transition: opacity 0.12s ease;
  opacity: 1;
}
.context-menu.sch li > i.checkmark {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  transition: opacity 0.12s ease;
  opacity: 0;
  color: #328aff;
}
.context-menu.sch li:hover > i:not(.checkmark), .context-menu.sch li:focus-visible > i:not(.checkmark) {
  opacity: 0;
}
.context-menu.sch li:hover > i.checkmark, .context-menu.sch li:focus-visible > i.checkmark {
  opacity: 1;
}
.context-menu.sch li span {
  color: #949ab8;
}
.context-menu ul {
  display: flex;
  flex-direction: column;
}
.context-menu ul li {
  display: flex;
  align-items: center;
  padding: 0 1.25rem;
  height: 2rem;
  gap: 0.5rem;
  font-size: 0.875rem;
}
.context-menu ul li i {
  width: 1.25rem;
  height: 1.25rem;
  font-size: 1.25rem;
}
.context-menu ul li:hover {
  background: #f5f6fc;
}
.context-menu ul li.del {
  height: 2rem;
}

/********** POPUP **********/
.popup-layer {
  position: absolute;
  inset: 0;
  z-index: 1000;
  display: none;
}
.popup-layer.is-open {
  display: block;
}
.popup-layer .popup-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.popup {
  border-radius: 0.75rem;
  background: #fff;
  width: 20rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1003;
  box-shadow: 0 0.375rem 0.75rem 0 rgba(32, 33, 53, 0.3);
}
.popup .popup-cont {
  padding: 1.5rem 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.popup .popup-cont h2 {
  font-size: 1rem;
  color: #40495e;
  font-weight: 600;
  line-height: 160%;
}
.popup .popup-cont .text {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 160%;
  color: #757b98;
}
.popup .popup-cont .popup-input .field .input-box .input {
  width: 100%;
  min-width: auto;
}
.popup .popup-cont .popup-input .field .input-msg {
  text-align: center;
  justify-content: start;
  padding-left: 0.25rem;
  color: #949ab8;
  font-weight: 500;
  line-height: 160%;
}
.popup .popup-cont .popup-input .field .input-msg.error {
  color: #da3755;
}
.popup .popup-btn {
  display: flex;
  align-items: center;
  justify-content: end;
  padding: 1.5rem 1.25rem;
}

/********** Paging **********/
.pager {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.75rem;
  color: #757b98;
  font-weight: 500;
}

.pager .range {
  text-align: center;
  letter-spacing: 0.2px;
}

.pager .page-btn {
  width: 2rem;
  height: 2rem;
  font-size: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: #949ab8;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, opacity 0.15s;
}

.pager .page-btn:disabled {
  color: #d2d6e8;
  cursor: inherit;
  background: transparent;
}

/********** 이미지 업로드 **********/
.image-uploader {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /* 드롭존 */
  /* 안쪽 비주얼 */
}
.image-uploader .upload-dropzone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 18rem;
  height: 7.5rem;
  border-radius: 0.5rem;
  border: 1px solid #e1e3f2;
  text-align: center;
  transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
  cursor: pointer;
  user-select: none;
  /* 실제 파일 인풋 숨김 */
}
.image-uploader .upload-dropzone:hover {
  background: #1d36aa0d;
}
.image-uploader .upload-dropzone:focus-within {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(56, 130, 243, 0.12), var(--shadow);
}
.image-uploader .upload-dropzone.is-dragover {
  background: #EEF4FF;
}
.image-uploader .upload-dropzone.is-dragover .upload-title {
  font-size: 1rem;
  color: #757b98;
  font-weight: 600;
}
.image-uploader .upload-dropzone .upload-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.image-uploader .upload-dropzone.is-dragover .upload-browse {
  visibility: hidden;
  pointer-events: none;
}
.image-uploader .upload-visual {
  pointer-events: none;
  /* 버튼은 아래 .upload-browse에서 다시 활성화 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.image-uploader .upload-visual img {
  width: 40px;
  height: 40px;
  opacity: 0.9;
}
.image-uploader .upload-visual .upload-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 160%;
  color: #949ab8;
}
.image-uploader .upload-visual .text-btn-d img {
  width: 1rem;
}

.image-box {
  width: 10rem;
  height: 7.5rem;
  aspect-ratio: 4/3;
  border-radius: 0.5rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  overflow: hidden;
  position: relative;
}
.image-box img {
  width: 100%;
}
.image-box .btn-icon {
  position: absolute;
  right: 0.5rem;
  top: 0.25rem;
}

/********** 검색 **********/
.search {
  position: relative;
  width: 17.5rem;
  border-radius: 10rem;
  background: #eaebf7;
  height: 2.5rem;
  display: flex;
  align-items: center;
  padding: 0 1rem 0 1rem;
  gap: 0.5rem;
}
.search input {
  background: none;
  border: none;
  outline: none;
  font-size: 14px;
  font-weight: 400;
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
}
.search input::placeholder {
  color: #949ab8;
}
.search .icon {
  color: #757b98;
  font-size: 1rem;
  height: 1rem;
}
.search.small {
  min-width: 11.5rem;
  width: auto;
  background: #f5f6fc;
  height: 2rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid #eaebf7;
}
.search.small input {
  background: none;
  box-sizing: border-box;
}

/********** Chips **********/
.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 2rem;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid transparent;
  background: transparent;
  color: #40495e;
  font-weight: 400;
  font-size: 0.875rem;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.chip img {
  width: 1rem;
}
.chip .chip__leading,
.chip .chip__trailing {
  display: flex;
  place-items: center;
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
}
.chip .chip__leading i,
.chip .chip__trailing i {
  font-size: 1rem;
}
.chip .chip__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chip--outlined {
  border-color: #e1e3f2;
  background: transparent;
  color: #40495e;
}
.chip--outlined:hover {
  background: #1d36aa0d;
}
.chip--outlined:active {
  background: #1d46aa1a;
}

/* 4) Ghost (다크칩 느낌) */
.chip--ghost {
  border-color: #40495e;
}
.chip--ghost:hover {
  background: #1d36aa0d;
}
.chip--ghost:active {
  background: #1b2131;
}

.chip--compact {
  height: 2.5rem;
  padding: 0.5rem 0.75rem;
  gap: 1rem;
}
.chip--compact:hover {
  background: #1d36aa0d;
}
.chip--compact:disabled {
  cursor: default;
  opacity: 0.3;
}
.chip--compact:disabled:hover {
  background: initial;
}

.chip.is-disabled,
.chip[aria-disabled=true] {
  opacity: 0.5;
  pointer-events: none;
}

.chip--group {
  display: flex;
  border: 1px solid #40495e;
  border-radius: 0.5rem;
  height: 2rem;
}
.chip--group .chip--split:hover {
  background: #1d36aa0d;
}
.chip--group .chip--split .chip {
  border: none;
}
.chip--group .chip--split .chip:hover {
  background: none;
}

.chip__side {
  position: relative;
  width: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 0.5rem 0.5rem 0;
  color: #757b98;
}
.chip__side::before {
  content: "";
  position: absolute;
  inset: 6px auto 6px 0;
  width: 1px;
  background: #e1e3f2;
  top: 0;
  height: 100%;
}
.chip__side:hover {
  background: #1d36aa0d;
  cursor: pointer;
}
.chip__side:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.35);
  outline-offset: -2px;
}

.error-msg {
  color: #da3755;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 160%;
}

.toggle {
  position: relative;
}
.toggle input[type=checkbox] {
  height: 0;
  width: 0;
  visibility: hidden;
}
.toggle label {
  cursor: pointer;
  text-indent: -9999px;
  width: 2rem;
  height: 1.25rem;
  background: #d2d6e8;
  display: block;
  border-radius: 100px;
  position: relative;
}
.toggle label:after {
  content: "";
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  width: 1rem;
  height: 1rem;
  background: #fff;
  border-radius: 90px;
}
.toggle input:checked + label {
  background: #328aff;
}
.toggle input:checked + label:after {
  left: calc(100% - 0.125rem);
  transform: translateX(-100%);
}
.toggle label:active:after {
  width: 1rem;
}

.snackbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3.5rem;
  padding: 0.75rem 1rem;
  background: #22b688;
  color: #fff;
  font-size: 0.875rem;
}
.snackbar .text-btn-32 {
  color: #fff;
}

.time-setting {
  color: #40495e;
}

.time-setting .field-title {
  font-size: 13px;
  opacity: 0.9;
  margin: 0 0 10px;
}

.time-row {
  display: flex;
  gap: 12px;
  align-items: center;
}

.time-box {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  height: 2.5rem;
  border: 1px solid #e1e3f2;
  border-radius: 0.5rem;
  background: #fff;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.time-box:focus-within {
  border-color: var(--c-border-focus);
  box-shadow: 0 0 0 3px var(--c-ring);
}

.time-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: #949ab8;
  white-space: nowrap;
}

/* 시/분 인풋 */
.time-box input {
  width: 2.2ch;
  /* "00" 딱 맞게 */
  text-align: center;
  border: 0;
  outline: none;
  background: transparent;
  color: #40495e;
  font-weight: 400;
  font-size: 0.875rem;
  padding: 0;
}

/* placeholder 색 */
.time-box input::placeholder {
  color: var(--c-ph);
  opacity: 0.75;
}

/* 콜론 */
.time-box .colon {
  color: #949ab8;
  font-weight: 400;
}

/* 비활성화 상태(선택) */
.time-box.is-disabled,
.time-box[aria-disabled=true] {
  opacity: 0.55;
  pointer-events: none;
}

@keyframes fade {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.1;
  }
}
.spinner-box {
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
}

.spinner {
  position: relative;
  width: 1.25rem;
  height: 1.25rem;
}

.spinner div {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.125rem;
  height: 0.375rem;
  background: #757b98;
  border-radius: 0.5rem;
  transform-origin: center center;
  animation: fade 1s linear infinite;
}

/* 0도부터 시계 방향, bar1이 먼저 밝아지도록 음수 딜레이 */
.spinner .bar1 {
  transform: translate(-50%, -50%) rotate(0deg) translateY(-0.5rem);
  animation-delay: -1s;
}

.spinner .bar2 {
  transform: translate(-50%, -50%) rotate(45deg) translateY(-0.5rem);
  animation-delay: -0.875s;
}

.spinner .bar3 {
  transform: translate(-50%, -50%) rotate(90deg) translateY(-0.5rem);
  animation-delay: -0.75s;
}

.spinner .bar4 {
  transform: translate(-50%, -50%) rotate(135deg) translateY(-0.5rem);
  animation-delay: -0.625s;
}

.spinner .bar5 {
  transform: translate(-50%, -50%) rotate(180deg) translateY(-0.5rem);
  animation-delay: -0.5s;
}

.spinner .bar6 {
  transform: translate(-50%, -50%) rotate(225deg) translateY(-0.5rem);
  animation-delay: -0.375s;
}

.spinner .bar7 {
  transform: translate(-50%, -50%) rotate(270deg) translateY(-0.5rem);
  animation-delay: -0.25s;
}

.spinner .bar8 {
  transform: translate(-50%, -50%) rotate(315deg) translateY(-0.5rem);
  animation-delay: -0.125s;
}

/* 래퍼 */
.date-range-field {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  height: 2.5rem;
  border-radius: 0.5rem;
  border: 1px solid #e1e3f2;
  padding: 0.5rem 0.25rem 0.5rem 0.75rem;
  width: 100%;
  min-width: 17.5rem;
  background: #fff;
  outline: none;
  box-sizing: border-box;
  color: #40495e;
  font-size: 0.875rem;
  font-weight: 400;
  cursor: pointer;
}

/* 실제 값 텍스트 */
.date-range-field__value {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 달력 아이콘 버튼 */
.date-range-field__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #9096b3;
  cursor: pointer;
}

/* 비어 있을 때 placeholder 느낌 주고 싶으면 이런 클래스 하나 더 */
.date-range-field.is-empty .date-range-field__value {
  color: #757b98;
  /* 더 옅은 회색 */
}

/*# sourceMappingURL=guide.css.map */