:root {
  --input-h: 50px;
}

.member-wrap {
  --mem-width: 500px;
  width: 100%;
  margin-top: var(--header-h);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: var(--main-padding) 0;
  border-top: 1px solid #eee;
}

.sub-pad .member-con {
  width: 100% !important;
}

.member-con {
  width: 90%;
  padding: 0px;
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
}

.member-title {
  text-align: center;
  margin-bottom: 40px;
}

.member-title h3 {
  font-size: var(--text-4xl);
  line-height: 1;
  text-align: center;
  margin-bottom: 10px;
}

.member-title p {
  color: #999;
}

.member-tit {
  font-size: 14px;
  color: #666;
}

.member-copy {
  opacity: 0.5;
  font-size: var(--text-xs);
}

.login-content {
  max-width: var(--mem-width);
  margin: 0 auto;
}

.login-content.wide {
  max-width: 600px !important;
}

.login-input {
  margin: 10px 0
}

.login-input>div:last-child input {
  margin-bottom: 0;
}

.login-input>div {
  margin-bottom: 20px;
}

.login-form-con .login-input input {
  height: 56px;
}

.login-form-con .login-input>div {
  margin-bottom: 10px;
}

.login-input input,
.input-wrap textarea,
.input-wrap input,
.input-wrap select {
  width: 100%;
  height: var(--input-h);
  padding: 10px 12px;
  border-radius: var(--radius-s);
  font-size: 1rem;
  border: 1px solid #ddd;
}

.input-wrap textarea:focus,
.login-input input:focus,
.input-wrap input:focus,
.input-wrap select:focus {
  border-color: var(--primary);
}

.input-wrap select {
  color: #000;
}

.login-btn {
  gap: 10px;
  margin-top: 40px;
  justify-content: center;
  padding: 30px;
}

.login-btn button {
  flex: 1;
  height: var(--input-h);
  background: var(--primary);
  color: #fff;
  border-radius: var(--radius-s);
  font-weight: 700;
  font-size: var(--text-base);
  transition: 0.3s;
  max-width: min(100%, 250px);
}

.member-wrap .login-btn button {
  max-width: min(100%, 250px);
}

.login-btn.adm-btn button {
  max-width: min(100%, 120px);
  min-width: 120px;
  font-size: var(--text-sm);
}


.login-btn button.btn-type2 {
  background: #f2f3f6;
  color: #000;
}

.login-btn button.btn-type2:hover {
  color: #000;
  background: #ddd;
}

.login-btn button.btn-type3 {
  background: #fff;
  color: #000;
  border: 1px solid
}

.login-btn button.btn-type3:hover {
  color: var(--primary);
  background: #fff;
}

.login-btn button.btn-delete {
  background: rgba(255 78 78 / 14%);
  color: rgb(255, 78, 78);
}

.login-btn button.btn-delete:hover {
  color: rgb(255, 78, 78);
  background: rgba(255 78 78 / 20%);
}

.login-btn button:hover {
  background: #004e9b;
}



.login-option {
  font-size: var(--text-xs);
  margin: 20px 0 60px 0;

}

.check-item {
  font-size: 14px;
  color: #666;
  cursor: pointer;
  display: flex;
  align-items: center;
  user-select: none;
}

.check-item input[type="checkbox"] {
  display: none;
}

.check-item .checkbox-custom {
  width: 16px;
  height: 16px;
  border: 2px solid #ddd;
  border-radius: 4px;
  margin-right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  background: white;
}

.check-item input[type="checkbox"]:checked ~.checkbox-custom {
  background: var(--primary);
  border-color: var(--primary);
}

.check-item .checkbox-custom::after {
  content: '\2713';
  color: white;
  font-size: 14px;
  font-weight: bold;
  opacity: 0;
  transform: scale(0);
  transition: all 0.2s;
}

.check-item input[type="checkbox"]:checked ~.checkbox-custom::after {
  opacity: 1;
  transform: scale(1);
}

.check-item:hover .checkbox-custom {
  border-color: rgb(var(--primary-rgb)/50%);
}

.login-pw {
  position: relative;
}

.login-pw .eye-icon {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  cursor: pointer;
}

.login-pw .fa,
.login-pw .fas {
  font-weight: 300 !important;
  font-size: var(--txt-s);
  cursor: pointer;
}

.login-pw input {
  padding-right: 45px;
  margin-bottom: 0 !important;
}

.find-hp {
  color: #ccc;
  padding: 0 6px;
}

.find-link a:hover {
  opacity: 0.8;
}


.form-exp {
  font-size: 0.8rem;
  margin: 4px 0 0 0;
  color: #999;

}

.agree-box-wrap {
  background: #f2f3f6;
  padding: 28px;
  border-radius: 12px;
}

.agree-box {
  width: 100%;
  height: 80px;
  overflow-x: auto;
  font-size: 0.85rem;
  color: #666;
  padding: 12px 16px;
  border-radius: var(--radius-xs);
  background: #fff;
  border: 1px solid #ddd;

}

.agree-box::-webkit-scrollbar {
  width: 7px;
}

.agree-box::-webkit-scrollbar-thumb {
  height: 30%;
  background: rgb(0 0 0/20%);
  border-radius: 10px;
}

.agree-box::-webkit-scrollbar-track {
  background: none;
}

.agree_check {
  font-size: var(--text-xs);
  margin-top: 4px;
}

.join-step1 .agree_check {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: end;
  ;
}

.join-btn {
  margin-top: 20px;
  font-size: var(--text-xs);
  color: rgb(255 255 255 / 70%);
}

.join-tit {
  margin-top: 8px;
  font-weight: 500;
}

.join-tit span {
  color: var(--primary);
}

.agree-all-wrap {
  background: rgb(var(--primary-rgb)/15%);
  padding: 10px 16px;
  border-radius: var(--radius-s);
  margin-bottom: 20px;
}

.agree-all-wrap .agree_check {
  justify-content: flex-start;
  width: 100%;
}

.agree-all-wrap .check-item {
  width: 100%;
  color: #000;
  font-size: var(--text-sm);
  cursor: pointer;

}

.agree-all-wrap .check-item .checkbox-custom {
  width: 20px;
  height: 20px;
  margin-right: 8px;
}

.input-wrap {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  align-items: center;
}

.input-wrap>*:last-child {
  width: calc(100% - 130px);
}

.w100.input-wrap>*:last-child {
  width: 100% !important;
}

.input-wrap>.input-label {
  width: 130px;
}

.input-wrap .input-label {
  font-size: var(--text-sm);
  display: block;
  font-weight: 600;
}

.input-wrap .input-label span {
  color: red;
}

.modify-form-con .input-wrap .input-label span {
  display: none;
}

.input-hp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.input-hp>input {
  width: calc(50% - 10px);
}

.input-hp>span {
  width: 20px !important;
  text-align: center;
}

.input-box2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 10px;
}

.input-box2.phone {
  grid-template-columns: 2fr 1fr 1fr;
}

.input-wrap .input-box2>* {
  width: 100%;
}

.add-input {
  display: flex;
  gap: 5px;
}

.add-input input {
  flex: 1;
}

.zipcode-wrap {
  width: 100%;
  display: flex;
  margin-bottom: 12px;
  gap: 4px;
}

.zipcode-wrap input {
  width: 200px;
}

.add-search-btn {
  width: 80px !important;
  color: var(--primary);
  border-radius: var(--radius-s);
  font-size: 1rem;
  border: 1px solid;
}

.id-check {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 5px
}

.id-check input {
  flex: 1;
}

.rg-button {
  width: 80px;
  background: #fff;
  border-radius: var(--radius-s);
  font-size: var(--text-sm);
  font-weight: 500;
  border: 1px solid;
  color: var(--secondary);
}

.rg-button.type2 {
  background: var(--secondary);
  color: #fff;
}

#result {
  margin-top: 8px;
  font-size: 14px;
}

.ok {
  color: var(--primary);
}

.error {
  color: rgb(255, 78, 78);
}

.msg {
  margin-top: 5px;
  font-size: 14px;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-text-fill-color: #000;
  -webkit-box-shadow: 0 0 0px 40rem #000 inset;
}


.find-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.find-box {
  background: white;
  border-radius: 12px;
  padding: 20px 30px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  text-align: center;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid #fff;
  cursor: pointer;
}




.find-box.active {
  box-shadow: 0 15px 50px rgb(var(--primary-rgb)/20%);
  border: 1px solid rgb(var(--primary-rgb)/20%);
}

.find-box:not(.active) {
  opacity: 0.6;
}

.radio-wrap {
  margin-bottom: 12px;
}

.radio-wrap input[type="radio"] {
  display: none;
}

.radio-custom {
  width: 28px;
  height: 28px;
  border: 3px solid #e0e0e0;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
}

.radio-wrap input[type="radio"]:checked+.radio-custom {
  border-color: var(--primary);
  background: linear-gradient(90deg, var(--primary), var(--secondary));
}

.radio-wrap input[type="radio"]:checked+.radio-custom::after {
  content: '';
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  animation: radioCheck 0.3s ease;
}

@keyframes radioCheck {
  0% {
    transform: translate(-50%, -50%) scale(0);
  }

  50% {
    transform: translate(-50%, -50%) scale(1.2);
  }

  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}

.icon-box {
  width: 50px;
  height: 50px;
  margin: 0 auto 8px;
  background: #ddd;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  transition: all 0.4s ease;
}

.find-box.active .icon-box {
  background: rgb(var(--primary-rgb)/15%);
  color: var(--primary);
}

.find-title {
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: 16px;
}

.input-section {
  margin-bottom: 20px;
}

.input-group {
  margin-bottom: 15px;
  text-align: left;
}

.input-group label {
  display: flex;
  align-items: center;
  margin-bottom: 2px;
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

.input-group .radio-custom {
  width: 20px;
  height: 20px;
  border-width: 2px;
  margin-right: 8px;
}

.input-group input[type="radio"]:checked+.radio-custom::after {
  width: 8px;
  height: 8px;
}

.input-group input[type="text"] {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e8e8e8;
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.3s ease;
  outline: none;
}

.input-group input[type="text"]:focus {
  border-color: var(--primary);
  background: #f8f9ff;
}

.submit-btn {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 20px;
  background: #999;
}

.find-box.active .submit-btn {
  background: var(--primary);
}

.submit-btn:hover {
  transform: translateY(-2px);
}

.submit-btn:active {
  transform: translateY(0);
}

.error-notice {
  text-align: center;
  color: white;
  font-size: 14px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.error-notice i {
  font-size: 20px;
  margin-right: 8px;
  vertical-align: middle;
}

.result-box {
  text-align: center;
  background: #f2f3f6;
  padding: 40px 30px;
  border-radius: var(--radius-s);
  color: #666;
  font-size: var(--text-base);
}

.result-box b {
  color: hsl(0, 0%, 0%);
  font-size: var(--text-lg);
}


/*회원가입*/
.progress-steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
  margin-bottom: 40px;
  max-width: var(--mem-width)
}

.step-item {
  display: flex;
  align-items: center;
  flex: 1;
}

.step-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
}

.step-number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 8px;
}

.step-number::before {
  content: '';
  position: absolute;
  width: 100%;
  left: -50%;
  height: 4px;
  margin-top: -2px;
  background: #ededed;
  z-index: -1;
}

.step-item:nth-child(1) .step-number::before {
  display: none;
}

.step-item.on .step-number {
  background: var(--primary);
  color: white;
}

.step-number {
  background: #ededed;
  color: #797979;
}

.step-label {
  font-size: var(--text-xs);
  font-weight: 500;
}

.step-item.on .step-label {
  color: var(--primary);
}

.step-label {
  color: #757575;
}

.step-divider {
  height: 2px;
  flex: 1;
  background: #e0e0e0;
  margin: 0 -10px;
  margin-bottom: 20px;
}

.certi-btn {
  text-align: center;
  background: #fff;
  padding: 40px;
  border-radius: var(--radius-s);
  border: 1px solid var(--secondary);
}

.certi-btn .submit-btn {
  background: var(--secondary);
}

.certi-btn .icon-box {
  background: rgb(var(--primary-rgb)/20%);
  color: rgb(var(--primary-rgb)/100%);
  width: 100px;
  height: 100px;
  font-size: 48px
}

.join-info {
  background: #f2f3f6;
  padding: 20px;
  color: #797979;
  font-size: var(--text-xs);
  margin-bottom: 20px;
  border-radius: var(--radius-s);
}

.success-icon {
  width: 50px;
  height: 50px;
  line-height: 50px;
  border-radius: 100px;
  background: rgb(var(--primary-rgb) /50%);
  margin: 20px auto;
}

.success-icon i {
  font-size: 40px;
  color: #fff;
}


.email-box {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.email-box input[type="text"] {
  flex: 1;
}

.login-input::placeholder,
.input-wrap textarea::placeholder,
.input-wrap input::placeholder {
  color: #9ca3af;
}

.at-symbol {
  color: #6b7280;
}

.input-wrap select {
  flex: 1;
  padding: 0 32px 0 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  appearance: none;
  cursor: pointer;
}

.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cRed {
  color: rgb(255, 78, 78);
}

.btn-rg.disabled,
.btn-rg:disabled:hover {
  background: #999 !important;
}


.input-data {
  height: var(--input-h);
  background: #f2f3f6;
  border-radius: var(--radius-s);
  display: flex;
  align-items: center;
  padding: 0 14px;
  color: #595959;
}

.member-delete-btn {
  display: flex;
  justify-content: end;
  margin: 20px 0;
}

.member-delete-btn button {
  border: 1px solid #ddd;
  color: #595959;
  padding: 4px 10px;
  border-radius: 8px;
}

.member-delete-btn button:hover {
  background: #f5f5f5;
}

.m-delete-con {
  padding: 24px;
  border-radius: var(--radius-s);
  background: #f2f3f6;
  color: #595959;
  margin-bottom: 20px;
}

.m-delete-con p {
  color: var(--primary);
  font-weight: 600;
}

.m-delete-con .delete-list {
  margin: 10px 0;
}

.delete-tit {
  color: #000;
  margin-bottom: 20px;
  font-weight: 600;
  font-size: var(--text-base);
}

/* 이메일 인증 레이아웃 */
.email-auth-container {
    max-width: 500px;
    margin: 0 auto;
    padding: 20px 0;
}

/* 인증번호 발송/확인 버튼 너비 조정 (기존 80px은 글자가 잘림) */
.btn-send-code,
.btn-confirm-code {
    width: 120px !important;
    font-size: 14px;
    font-weight: 500;
}

/* 타이머 스타일 (인풋창 안에 배치) */
.auth-timer {
    position: absolute;
    right: 135px; /* 버튼 너비(120) + 간격(15) */
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary); /* 파란색 */
    font-weight: 600;
    font-size: 14px;
}

/* 다음 단계 버튼 비활성화 스타일 */
.btn-next.disabled {
    background: #ccc;
    cursor: not-allowed;
}

.btn-next.disabled:hover {
    background: #ccc;
}

/* 멤버타입 선택 */
.member_type_select {
  gap: 24px;
}

.member_type_select>div {
  flex: 1;

  border-radius: 12px;
  padding: 40px 30px;

  text-align: center;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid #ddd;
}

.member_type_select button {
  background: #000;
  margin-top: 40px;
}

.member_type_select>div:first-child button {
  background: var(--primary) !important;
}

.member_type_select .icon-box {
  width: 90px;
  height: 90px;
  font-size: 40px;
  font-weight: 300;
  background: #f2f3f6;
  margin-bottom: 16px;
}

/* .member_type_select>div:hover .icon-box {
  background: rgb(var(--primary-rgb) /10%);
  color: var(--primary);
} */

.member_type_select>div:first-child:hover {
  border: 1px solid var(--primary);
  box-shadow: 0 15px 50px rgb(var(--primary-rgb)/20%);
}

.member_type_select>div:last-child:hover {
  border: 1px solid;
  box-shadow: 0 15px 50px rgb(0 0 0/10%);
}


/*로그인 탭*/
.member-tabs {
  display: flex;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

.tab-btn {
  flex: 1;
  padding: 20px;
  background: none;
  border: none;
  font-size: var(--text-lg);
  font-weight: 500;
  color: #999;
  cursor: pointer;
  position: relative;
  transition: all 0.3s;
  background: #f2f3f6;
  border-right: 1px solid #ddd;
  border-left: 1px solid #ddd;
}

.tab-btn:first-child {
  border-right: none;
}

.tab-btn.active {
  color: #333;
  font-weight: 700;
  background: #fff;
}

.tab-btn.active::after {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 3px;
  background: #333;
}

.tab-btn.active::before {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #fff;
}

.tab-btn:hover {
  color: #333;
}

.tab-content {
  display: none;
  border: 1px solid #ddd;
  padding: 40px;
  border-top: none;
}

.tab-content.active {
  display: block;
}

@media screen and (min-width: 1921px) {
  html {
    font-size: 1rem !important;
  }
}


@media (max-width: 768px) {
  .find-wrap {
    grid-template-columns: 1fr;
  }

  .find-box {
    padding: 20px 20px;
  }
}

@media screen and (max-width:600px) {
  .member-con {
    padding: 0;
  }

  .login-btn button {
    max-width: 100%
  }

  .id-check button {
    width: 65px;
  }

  .login-option {
    margin-top: 0;
  }

  .agree-box {
    padding: 12px;
    height: 50px;
  }

  .member-title {
    margin-bottom: 20px;
  }

  .agree-box-wrap {
    padding: 20px;
  }

  .certi-btn .icon-box {
    width: 60px;
    height: 60px;
    font-size: 30px
  }

  .certi-btn {
    padding: 24px;
  }

  .join-info {
    padding: 12px;
  }

  .input-box2 {
    grid-template-columns: none;
  }

  .input-box2.phone {
    grid-template-columns: 1fr 1fr;
  }

  .input-box2.phone .input-data {
    grid-column: 1 / -1;
  }

  .input-wrap>*:last-child {
    width: 100%;
  }

  .input-wrap>.input-label {
    width: 100%;
    padding-top: 10px;
  }

  .login-input>div {
    margin-bottom: 10px;
  }

  .mb-w100 {
    width: 100%;
    flex: inherit !important;
  }

  :root {
    --input-h: 44px;
  }

  button.mb-w100 {
    height: var(--input-h);
  }


  .result-box {
    padding: 20px;
  }

  .success-icon {
    width: 48px;
    height: 48px;
    line-height: 48px;
  }

  .success-icon i {
    font-size: 32px;
  }

  .login-btn button {
    max-width: min(100%, 400px);
  }
  .add-input {
    flex-wrap: wrap;
  }

  .add-input input {
    flex: inherit
  }

  .zipcode-wrap input {
    flex: 1;
  }

  .member_type_select {
    gap: 8px;
  }

  .member_type_select>div {
    flex: inherit;
    width: 100%;
    padding: 20px;
  }

  .member_type_select>div:hover {
    box-shadow: none;
  }

  .member_type_select button {
    margin-top: 20px;
  }

  .member_type_select .find-title {
    margin-bottom: 0px;
  }

  .member_type_select .icon-box {
    width: 50px;
    height: 50px;
    font-size: 30px;
  }

  .tab-btn {
    padding: 12px;
  }

  .tab-content {
    padding: 20px 0 0 0;
    border: none;
  }

  .btn-send-code,
  .btn-confirm-code {
      width: 100% !important;
      font-size: 13px;
      padding: 0;
      height:35px;
  }

  /* 타이머 스타일 (빨간색 강조 필요 시 변경 가능) */
.auth-timer {
    position: absolute;
    right: 10px;
    top: 25%;
    transform: translateY(-50%);
    color: var(--primary);
    font-weight: 600;
    font-size: 14px;
}

/* 시간 초과 시 타이머 색상 변경 */
.auth-timer.expired {
    color: #ff4e4e; /* 빨간색 */
}

/* 메시지 스타일 */
.msg {
    margin-top: 8px;
    font-size: 13px;
}
.msg.ok { color: var(--primary); } /* 파란색 */
.msg.error { color: #ff4e4e; }     /* 빨간색 */

/* 재전송 모드일 때 이메일 입력창 스타일 변경 (선택사항) */
.input-disabled {
    background-color: #f2f3f6;
    color: #999;
}

}


/* =========================================
   교육일정 상태 범주 (Legend) 스타일
   ========================================= */

/* 1. 범주 컨테이너 */
.status-legend {
    display: flex;
    align-items: center;
    gap: 16px;             /* 항목 간 간격 */
    margin-left: auto;     /* 왼쪽 여백을 최대로 주어 우측 정렬 */
    margin-right: 20px;    /* 버튼과의 간격 */
}

/* 2. 개별 항목 (점 + 텍스트) */
.legend-item {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #666;
    font-weight: 500;
}

/* 3. 색상 점 (Dot) 스타일 */
.legend-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;     /* 텍스트와의 간격 */
}



/* 신청중 */
.color-ing {
    background-color: #00C0E8;
}

/* 마감임박 (진한 노란색/황금색) */
.color-soon {
    background-color: #FFB300;
}

/* 신청마감 (선명한 빨간색) */
.color-end {
    background-color: #E11D48;
}

.color-done {
	background-color: #999999;
} /* 종료 (회색) - [추가됨] */

/* 텍스트 색상 (리스트용) */
.status-green { color: #00C0E8; font-weight: bold; }
.status-orange { color: #FFB300; font-weight: bold; }
.status-red { color: #E11D48; font-weight: bold; }
.status-gray { color: #888888; font-weight: bold; } /* [추가됨] */
/* 5. 모바일 반응형 처리 */
@media screen and (max-width: 768px) {
    .year-header {
        flex-wrap: wrap; /* 공간 부족 시 줄바꿈 */
        gap: 10px;
    }

    .status-legend {
        width: 100%;       /* 전체 너비 차지 */
        justify-content: flex-end; /* 우측 정렬 유지 */
        margin-right: 0;
        margin-bottom: 10px;
        order: 3;          /* 타이틀(1) -> 버튼(2) -> 범주(3) 순서로 배치 변경 가능 */
    }
}

/* =========================================
   월별 교육 상단 범주 위치 조정
   ========================================= */

/* 1. 범주 감싸는 박스 (우측 정렬용) */
.month-legend-con {
    display: flex;
    justify-content: flex-end; /* 오른쪽 끝으로 보냄 */
    margin-bottom: 10px;       /* 달력과의 간격 */
    margin-top: -10px;         /* 탭과 너무 멀어지지 않게 상단 여백 조정 (선택사항) */
}

/* 3. 모바일 반응형 처리 */
@media screen and (max-width: 768px) {
    .month-legend-con {
        justify-content: flex-start; /* 모바일에서는 왼쪽 정렬이 더 자연스러울 수 있음 */
        margin-top: 10px;
    }
}


/* 1. 헤더 전체 컨테이너 (정렬 수정) */
.calendar-header-wrap {
   display: flex;
   justify-content: space-between; /* 양끝 정렬 */
   align-items: flex-end; /* [중요] 요소를 바닥 라인 기준으로 정렬 */
   border-bottom: 2px solid #333; /* 굵은 하단 라인 */
   padding-bottom: 0;
   margin-bottom: 30px;
   height: 60px; /* 높이 확보 */
}


/* =========================================
   2. 탭 메뉴 (스위치형) Hover 효과 추가
   ========================================= */
/* 활성화되지 않은 탭에 마우스 올렸을 때 */
.edu-tab:not(.active):hover {
    color: #0056D6; /* 글자색을 브랜드 컬러로 */
    background-color: rgba(0, 86, 214, 0.05); /* 아주 연한 파란 배경 깔기 */
}

/* 활성화된 탭(Active) 스타일 강화 */
.edu-tab.active {
   color: #004098; /* 글자색 진한 파랑 */
   font-weight: 800; /* 폰트 두껍게 */
   border-bottom: 3px solid #004098; /* 파란색 굵은 밑줄 */
    background: transparent;
}

/* 3. 탭 메뉴 (박스형 스타일 유지 시) */
.edu-tabs {
    display: flex;
    gap: 5px;
    margin-bottom: 0; /* 라인에 딱 붙임 */
}

.edu-tab {
    padding: 12px 25px;
    font-size: 16px;
    font-weight: 600;
    color: #666;
    background: #f8f8f8;
    border: 1px solid #ddd;
    border-bottom: none; /* 하단은 뚫어둠 */
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    transition: all 0.2s;
}


/* 3. [NEW] 둥근 알약형 검색창 디자인 */
/* =========================================
   상태 선택 드롭다운 (Pill Style)
   ========================================= */
.select-pill-wrap {
    position: relative;
    width: 140px;
    height: 46px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 50px; /* 둥근 모서리 */
    display: flex;
    align-items: center;
    transition: all 0.3s;
}

/* Hover 및 Focus 효과 */
.select-pill-wrap:hover,
.select-pill-wrap:focus-within {
    border-color: #0056D6; /* 브랜드 컬러 */
    box-shadow: 0 4px 10px rgba(0, 86, 214, 0.1);
}

/* 실제 Select 태그 스타일 (기본 화살표 제거) */
.select-pill-wrap select {
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    padding: 0 35px 0 20px; /* 텍스트 여백 */
    font-size: 15px;
    color: #333;
    font-weight: 500;
    cursor: pointer;
    outline: none;
    -webkit-appearance: none; /* 크롬/사파리 기본 화살표 제거 */
    -moz-appearance: none; /* 파이어폭스 기본 화살표 제거 */
    appearance: none;
    z-index: 2; /* 아이콘 위에 배치 */
}

/* 커스텀 화살표 아이콘 */
.select-pill-wrap .arrow-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #999;
    z-index: 1;
    pointer-events: none; /* 클릭 통과 */
}

.select-pill-wrap:hover .arrow-icon {
    color: #0056D6; /* 호버 시 화살표 색상 변경 */
}

/* 검색창 포커스 시 효과 */
.search-pill-wrap:focus-within {
    border-color: #004098; /* 브랜드 컬러 */
    box-shadow: 0 4px 15px rgba(0, 64, 152, 0.15); /* 파란 그림자 */
    width: 340px; /* 살짝 늘어나는 효과 (선택사항) */
}

/* 5. 검색창 (알약 모양) */
.search-pill-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 280px;
    height: 40px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 50px;
    padding: 0 5px 0 20px;
    transition: all 0.3s;
}


.search-pill-wrap input {
    border: none;
    outline: none;
    width: 100%;
    font-size: 14px;
    background: transparent;
}

/* [추가] 브라우저 기본 'X' 버튼 스타일 커스텀 */
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none; /* 브라우저 기본 모양 제거 (필수) */
    appearance: none;

    width: 20px;
    height: 20px;

    /* 굵고 확실한 X 아이콘 (SVG 데이터) */
    background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e") center no-repeat;

    background-size: 14px 14px; /* 아이콘 크기 조절 */
    cursor: pointer;
    margin-right: 5px;
    opacity: 0.7; /* 약간 투명하게 */
    transition: opacity 0.2s;
}

/* 마우스 올렸을 때 진하게 */
input[type="search"]::-webkit-search-cancel-button:hover {
    opacity: 1;
}

.search-pill-wrap button {
    width: 32px;
    height: 32px;
    border: none;
    background: #004098;
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s;
}

.search-pill-wrap button:hover {
    transform: scale(1.1);
    background: #003078;
}

/* FullCalendar 이벤트 제목 말줄임표 설정 */
.fc-event-title {
    white-space: nowrap;      /* 줄바꿈 금지 (한 줄로 표시) */
    overflow: hidden;         /* 넘치는 텍스트 숨김 */
    text-overflow: ellipsis;  /* 넘치는 부분 ... 처리 */
    display: block;           /* 블록 요소로 변경 (필요 시) */
}

/* (옵션) 이벤트 박스 자체에도 적용하고 싶을 때 */
.fc-daygrid-event {
    white-space: nowrap;
    overflow: hidden;
}

/* 3. 오른쪽 필터 그룹 */
.edu-filter-group {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap; /* 공간 부족 시 줄바꿈 허용 */
    justify-content: flex-end;
}

/* 4. 상태 필터 버튼 (Chip 스타일) */
.status-filter-wrap {
    display: flex;
    gap: 6px;
    margin-right: 10px;
}


/* =========================================
   [Status Badge] 버튼형 상태 디자인
   ========================================= */

/* 공통 베이스 스타일 */
.status-badge-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 15px;

    /* [버튼 태그 초기화 중요] */
    border: 1px solid #ddd;
    background-color: #fff;
    appearance: none;        /* 브라우저 기본 스타일 제거 */
    -webkit-appearance: none;
    font-family: inherit;    /* 폰트 상속 */
    line-height: 1;          /* 텍스트 수직 정렬 보정 */

    border-radius: 50px;     /* 알약 모양 */
    font-size: 14px;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* 호버 시 살짝 떠오르는 효과 (선택사항) */
.status-badge-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* 배지 앞의 원형 점 (Dot) */
.status-badge-btn::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    background-color: #ccc;
}

.view-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 15px;

    /* [버튼 태그 초기화 중요] */
    border: 1px solid #ddd;
    background-color: #fff;
    appearance: none;        /* 브라우저 기본 스타일 제거 */
    -webkit-appearance: none;
    font-family: inherit;    /* 폰트 상속 */
    line-height: 1;          /* 텍스트 수직 정렬 보정 */

    border-radius: 50px;     /* 알약 모양 */
    font-size: 14px;
    font-weight: 600;
    color: #555;
    transition: all 0.2s ease;
}

.view-waiting {
    border-color: #2fb344; color: #2fb344; background-color: #f0fff4;
}
.view-ing {
    border-color: #0096f3; color: #0096f3; background-color: #e3f2fd;
}
.view-close {
    border-color: #e03131; color: #e03131; background-color: #fff5f5;
}
.view-finish {
    border-color: #868e96; color: #868e96; background-color: #f8f9fa;
}

/* ----------------------------------------------------
   [Color Variations] 상태별 색상
   ---------------------------------------------------- */

/* 1. 전체 (All) */
.status-badge-btn.all { border-color: #333; color: #333; }
.status-badge-btn.all::before { background-color: #333; }

.status-badge-btn.all.active, .status-badge-btn.all:hover {
    background-color: #333; color: #fff;
}
.status-badge-btn.all.active::before, .status-badge-btn.all:hover::before { background-color: #fff; }

/* 2. 신청대기 (Waiting) */
.status-badge-btn.waiting {
    border-color: #2fb344; color: #2fb344; background-color: #f0fff4;
}

.status-badge-btn.waiting::before { background-color: #2fb344; }

.status-badge-btn.waiting.active, .status-badge-btn.waiting:hover {
    background-color: #2fb344; color: #fff;
}
.status-badge-btn.waiting.active::before, .status-badge-btn.waiting:hover::before { background-color: #fff; }

/* 3. 모집중 (Recruiting) */
.status-badge-btn.ing {
    border-color: #0096f3; color: #0096f3; background-color: #e3f2fd;
}
.status-badge-btn.ing::before { background-color: #0096f3; }

.status-badge-btn.ing.active, .status-badge-btn.ing:hover {
    background-color: #0096f3; color: #fff;
}
.status-badge-btn.ing.active::before, .status-badge-btn.ing:hover::before { background-color: #fff; }

/* 4. 신청마감 (Closed) */
.status-badge-btn.close {
    border-color: #e03131; color: #e03131; background-color: #fff5f5;
}
.status-badge-btn.close::before { background-color: #e03131; }

.status-badge-btn.close.active, .status-badge-btn.close:hover {
    background-color: #e03131; color: #fff;
}
.status-badge-btn.close.active::before, .status-badge-btn.close:hover::before { background-color: #fff; }

/* 5. 교육종료 (Finished) */
.status-badge-btn.finish {
    border-color: #868e96; color: #868e96; background-color: #f8f9fa;
}
.status-badge-btn.finish::before { background-color: #868e96; }

.status-badge-btn.finish.active, .status-badge-btn.finish:hover {
    background-color: #868e96; color: #fff;
}
.status-badge-btn.finish.active::before, .status-badge-btn.finish:hover::before { background-color: #fff; }

/* =========================================
   [반응형 미디어 쿼리] (900px 이하)
   ========================================= */
@media screen and (max-width: 900px) {
    /* 1. 헤더 구조 변경: 가로 -> 세로 */
    .calendar-header-wrap {
        flex-direction: column; /* 세로 정렬 */
        align-items: flex-start;
        height: auto; /* 높이 자동 */
        gap: 15px; /* 요소 간격 */
        border-bottom: none; /* 하단 라인 제거 (모바일에서 깔끔하게) */
        margin-bottom: 20px;
    }

    /* 2. 탭 메뉴: 100% 너비 */
    .edu-tabs {
        width: 100%;
        border-bottom: 1px solid #ddd; /* 탭 아래에 라인 추가 */
    }
    .edu-tab {
        flex: 1; /* 탭 균등 분할 */
    }

    /* 3. 필터 그룹: 세로 배치 & 순서 변경 */
    .edu-filter-group {
        width: 100%;
        flex-direction: column-reverse; /* 검색창을 위로, 필터 버튼을 아래로 */
        align-items: flex-start;
        margin-bottom: 0;
        gap: 15px;
    }

    /* 4. 검색창: 100% 꽉 차게 */
    .search-pill-wrap {
        width: 100%;
        margin-right: 0;
    }

    /* 5. 상태 필터 버튼: 좌우 스크롤 가능하게 */
    .status-filter-wrap {
        width: 100%;
        overflow-x: auto; /* 가로 스크롤 허용 */
        padding-bottom: 5px; /* 스크롤바 공간 */
        margin-right: 0;
        /* 스크롤바 숨기기 (선택사항) */
        -ms-overflow-style: none; /* IE, Edge */
        scrollbar-width: none; /* Firefox */
    }
    .status-filter-wrap::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }
}


/* Q&A 전용 추가 스타일 (기존 CSS와 충돌하지 않음) */
.req { color: #e53e3e; margin-left: 4px; font-weight: bold; }

/* 텍스트 에어리어 스타일 (기존 input-wrap 스타일과 조화) */
.qna-textarea {
    width: 100%;
    height: 300px;
    padding: 15px;
    border: 1px solid #ddd; /* 기존 input 테두리 색상 추정 */
    border-radius: 8px;     /* 기존 border-radius */
    resize: vertical;
    font-family: inherit;
    font-size: 16px;
    outline: none;
    background-color: #fff;
}
.qna-textarea:focus { border-color: #2b4bc8; } /* 포커스 시 포인트 컬러 */

/* 비공개 설정 체크박스 강조 */
.secret-check-label {
    display: flex; align-items: center; gap: 8px; font-weight: 500; color: #333; cursor: pointer;
}

/* [비공개 체크박스 정렬 수정] */
.custom-check-area {
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 1px solid #e5e5e5; /* 하단 구분선 */
}

/* 체크박스 라벨 정렬 */
.custom-check-area .check-item {
	display: inline-flex !important; /* 강제 Flex 적용 */
	align-items: center !important;  /* 수직 중앙 정렬 */
	cursor: pointer;
	width:100%;
	max-width:100%;
	gap: 8px; /* 체크박스와 텍스트 사이 간격 */
}

/* 텍스트 및 아이콘 스타일 */
.custom-check-area .label-text {
	font-size: 15px;
	color: #333;
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 5px; /* 자물쇠 아이콘과 글자 사이 간격 */
}

.custom-check-area .label-text i {
	font-size: 16px;
	color: #666;
	margin-bottom: 2px; /* 아이콘 미세 위치 조정 */
}

/* (참고) 만약 기존 checkbox-custom이 깨진다면 아래 스타일로 크기 고정 */
.custom-check-area .checkbox-custom {
	flex-shrink: 0; /* 크기 찌그러짐 방지 */
	width: 20px;    /* 기존 사이트 스타일에 맞춰 조정 필요 */
	height: 20px;
	margin-right: 0; /* gap으로 간격 조정하므로 마진 제거 */
}

.textarea-wrap {
    position: relative;
    width: 100%;
}

.textarea-wrap textarea {
    width: 100%;
    resize: vertical; /* 세로 크기 조절만 허용 */
    padding-bottom: 30px; /* 카운터 공간 확보 */
}

.count-wrap {
    /* position: absolute; */
    bottom: 10px;
    right: 15px;
    font-size: 13px;
    color: #999;
    font-weight: 500;
}






/* =========================================
   [Board View] 게시판 상세 스타일
   ========================================= */
.board-view {
    border-top: 2px solid #333; /* 상단 굵은 라인 */
    /* border-bottom: 1px solid #ddd; */
}

/* 1. 헤더 (제목) */
.view-header {
    padding: 20px 10px;
    border-bottom: 1px solid #eee;
    background-color: #fff;
}
.view-status { margin-bottom: 10px; }
.view-title {
    font-size: 24px;
    font-weight: 700;
    color: #333;
    margin: 0;
    line-height: 1.4;
}

/* 2. 메타 정보 */
.view-info {
    padding: 15px 10px;
    background-color: #f9f9f9;
    border-bottom: 1px solid #eee;
    color: #555;
    font-size: 14px;
    gap: 30px;
}
.view-info .info-item { display: flex; align-items: center; }
.view-info .label { font-weight: 600; margin-right: 8px; color: #333; }
.view-info .value { color: #666; }

/* 3. 본문 내용 */
.view-content {
    padding: 40px 20px;
    min-height: 300px;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

/* 4. 관리자 답변 박스 */
.answer-box {
    margin: 0 20px 40px 20px;
    padding: 30px;
    background-color: #f0f7ff; /* 연한 파란색 배경 */
    border-radius: 8px;
    border: 1px solid #ddecfa;
}
.answer-header { margin-bottom: 15px; justify-content: space-between; }
.answer-badge {
    background-color: #004098; color: #fff;
    padding: 4px 12px; border-radius: 20px;
    font-size: 13px; font-weight: 600;
}
.answer-date { font-size: 13px; color: #888; }
.answer-content { color: #333; font-size: 15px; line-height: 1.6; }

/* 5. 버튼 스타일 */
.btn-list {
    display: inline-flex; justify-content: center; align-items: center;
    padding: 10px 24px; background-color: #fff; border: 1px solid #ddd;
    color: #333; font-weight: 500; border-radius: 4px; transition: all 0.2s; cursor: pointer;
}
.btn-list:hover { background-color: #f8f9fa; border-color: #bbb; }

.btn-modify {
    display: inline-flex; justify-content: center; align-items: center;
    padding: 10px 24px; background-color: #004098; color: #fff; border: 1px solid #004098;
    font-weight: 500; border-radius: 4px; cursor: pointer; transition: all 0.2s;
}
.btn-modify:hover { background-color: #003078; }

.btn-delete {
    display: inline-flex; justify-content: center; align-items: center;
    padding: 10px 24px; background-color: #666; color: #fff; border: 1px solid #666;
    font-weight: 500; border-radius: 4px; cursor: pointer; transition: all 0.2s;
}
.btn-delete:hover { background-color: #555; }

/* [추가] 이메일 입력 영역 스타일 (반응형 대응) */
.email-row {
    display: flex;
    gap: 20px;
    width: 100%;
}
.email-col {
    flex: 1;
}
.email-check-label {
    height: 50px; /* 인풋창 높이와 맞춤 */
    display: flex;
    align-items: center;
}

@media screen and (max-width: 768px) {
    .email-row {
        flex-direction: column;
        gap: 15px;
    }
}

/* =========================================
   [No Data] 전체 데이터 없음 (그룹 없음)
   ========================================= */
.edu-nodata-con {
    width: 100%;
    padding: 120px 0; /* 위아래 여백을 넉넉하게 */
    text-align: center;
    background-color: #f8f9fa; /* 아주 연한 회색 배경 */
    border-radius: 12px;
    margin-top: 30px;
    border: 1px solid #eee;
}

.edu-nodata-con .icon-box {
    margin-bottom: 20px;
}

.edu-nodata-con .icon-box i {
    font-size: 48px;
    color: #cbd5e1; /* 연한 회색 아이콘 */
}

.edu-nodata-con .tit {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin-bottom: 10px;
}

.edu-nodata-con .desc {
    font-size: 15px;
    color: #888;
    line-height: 1.5;
}

/* (반응형) 모바일에서는 여백 조금 줄임 */
@media screen and (max-width: 768px) {
    .edu-nodata-con {
        padding: 80px 20px;
    }
    .edu-nodata-con .tit {
        font-size: 16px;
    }
    .edu-nodata-con .desc {
        font-size: 14px;
    }
}