/* 모달 배경 */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    z-index: 1000;
}

/* 모달 본체 */
.modal-overlay .modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    width: 940px;
    max-width: calc(100vw - 40px);
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    max-height: 90%;
    overflow: auto;
    box-sizing: border-box;
}

/* 닫기 버튼 */
#innerModal .modal-close-btn {
    display: block;
    margin-top: 10px;
    width: 100%;
    padding: 10px;
    text-align: center;
    background: #4e4e4e;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
}


#innerModal .search-btn {
	display: inline-block;
    padding: 4px 10px;
    text-align: center;
    background-color: #254381;
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 3px;
}


#innerModal .paging-container{
	font-size: 14px;
	text-align: center;
}

#innerModal .paging-container > a:visited {
    text-decoration: none;
    color: black;
}

#innerModal .paging-container > a:link {
    text-decoration: none;
    color: dimgray;
    padding: 0px 7px;
}
#innerModal .paging-container > strong {
    color: #3f5afb;
}
#innerModal .paging-container > a, 
#innerModal .paging-container > strong {
    padding: 0px 7px;
}
#innerModal .paging-container > span {
    font-size: 13px;
}

#innerModal .close_btn{
    cursor: pointer;
    font-size: 24px !important;
    position: absolute;
    top: 10px;
    right: 15px;
}

/* 모달 본체 */
#rateInfoModal .modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    width: 930px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    max-height: 90%;
    overflow: auto;
}

#rateInfoModal .rate-submit-btn {
    display: inline-block;
    margin-top: 10px;
    width: 200px;
    padding: 10px;
    text-align: center;
    background: #235bcb;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
}

/*돌아가기버튼*/
#rateInfoModal .return-btn{
    display: inline-block;
    margin-top: 10px;
    width: 200px;
    padding: 10px;
    text-align: center;
    background: #9d9d9d;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
}

#rateInfoModal .pay-type-list{
	display:flex; align-items:center; gap:10px;
	padding-left:10px;
	margin-top:12px;
}
#rateInfoModal .pay-type-btn{
	padding:11px 18px; font-size:16px; font-weight:600;
	color:#333; background:#fff; border:1px solid #bbb; border-radius:5px;
	cursor:pointer;
}
#rateInfoModal .pay-type-btn::after{ content:" ›"; font-weight:bold; color:#999; }
#rateInfoModal .pay-type-btn:hover{ border-color:#235bcb; color:#235bcb; background:#f3f7ff; }
#rateInfoModal .pay-type-btn:hover::after{ color:#235bcb; }
#rateInfoModal .pay-lock-note{ display:none; padding-left:30px; margin-top:8px; font-size:13px; color:#c0392b; }
#rateInfoModal .pay-step {margin-bottom: 30px;}
#rateInfoModal .pay-step.locked .plan-head,
#rateInfoModal .pay-step.locked .pay-type-list{ opacity:.4; }
#rateInfoModal .pay-step.locked .pay-type-btn{ pointer-events:none; }
#rateInfoModal .pay-step.locked .pay-lock-note{ display:block; }


/* 닫기 버튼 */
#rateInfoModal .close_btn{
	font-size: 1.5rem;
    cursor: pointer;
    float: right;
}

/* 닫기 버튼 */
#rateOverDueModal .modal-close-btn{
    display: inline-block;
    margin-top: 10px;
    width: 200px;
    padding: 10px;
    text-align: center;
    background: #4e4e4e;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
}

#rateInfoModal .info-container{
	background: #f9f9f9;
	padding: 12px 20px;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	margin: 25px 0px;
}

#rateInfoModal .form-row {
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 6px;
}

#rateInfoModal .form-row label {
  width: 130px; /* 항목명 너비 고정 */
  font-weight: 500;
  color: #333;
  font-size: 15px;
  letter-spacing: -0.7px;
}

#rateInfoModal .input-group {
  display: flex;
  align-items: center;
  flex: 1; /* label 제외한 나머지 공간 차지 */
  gap: 8px;
}

#rateInfoModal .input-group input[type="text"], 
#rateInfoModal .input-group input[type="file"],
#rateInfoModal .input-group select {
  width: 300px;
  padding: 7px;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-shadow: none;
  background-color: #fff;
}

#rateInfoModal .input-group .row-msg{
	font-size: 12px;
}

#rateInfoModal .agree-content{
	width: 100%;
    height: 50px;
    overflow-y: auto;
    font-size: 12px;
    line-height: 14px;
    background-color: #e5e5e5;
    padding: 3px;
}

#rateInfoModal #callSignBtn{
	background-color: #235bcb;
    color: #fff;
    border: none;
    padding: 2px 10px;
}

#rateInfoModal .secondPage{
	display:none;
}

#rateOverDueModal .modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    width: 740px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    max-height: 90%;
    overflow: auto;
}

/* ---------- 구독료 모달 : 구독 플랜 선택 ---------- */
#rateInfoModal .plan-box{ margin-top:24px; }
#rateInfoModal .plan-head{
	display:flex; align-items:center; gap:8px;
	font-size:16px; font-weight:bold; color:#222;
}
#rateInfoModal .plan-step{
	display:inline-block; width:22px; height:22px; line-height:22px;
	border-radius:50%; background:#235bcb; color:#fff;
	font-size:13px; text-align:center; flex:0 0 auto;
}
#rateInfoModal .plan-note{ font-size:13px; font-weight:normal; color:#666; margin-left:4px; }
#rateInfoModal .plan-note b{ color:#235bcb; }
#rateInfoModal .plan-list{ display:flex; gap:14px; margin-top:12px; }
#rateInfoModal .plan-card{
	flex:1 1 0; border:2px solid #d5d5d5; border-radius:8px;
	padding:16px 18px; background:#fff; cursor:pointer;
}
#rateInfoModal .plan-card:hover{ border-color:#9db4e3; }
#rateInfoModal .plan-card.on{ border-color:#235bcb; background:#f3f7ff; }
#rateInfoModal .plan-card.fixed{ cursor:default; max-width:50%; }
#rateInfoModal .plan-name{ display:flex; align-items:center; gap:8px; font-size:17px; font-weight:bold; color:#222; }
#rateInfoModal .plan-radio{
	width:16px; height:16px; border-radius:50%; box-sizing:border-box;
	border:2px solid #bbb; display:inline-block; background:#fff; flex:0 0 auto;
}
#rateInfoModal .plan-card.on .plan-radio{ border:5px solid #235bcb; }
#rateInfoModal .plan-badge{
	font-size:11px; font-weight:bold; color:#fff; background:#235bcb;
	padding:2px 7px; border-radius:3px;
}
#rateInfoModal .plan-price{ margin-top:8px; font-size:15px; color:#222; }
#rateInfoModal .plan-price b{ font-size:18px; color:#235bcb; }
#rateInfoModal .plan-price small{ font-size:12px; color:#777; margin-left:2px; }
/* 연간 결제 금액 — 월 요금보다 작고 옅게 */
#rateInfoModal .plan-price-year{ margin-top:3px; font-size:12.5px; color:#777; }
#rateInfoModal .plan-price-year b{ font-weight:600; color:#555; }
#rateInfoModal .plan-desc{ font-size:13.5px; color:#555; margin:6px 0 0; line-height:20px; }
#rateInfoModal .plan-head-btn{ margin-left:15px; }
#rateInfoModal .plan-img-btn{
	border:1px solid #235bcb; background:#fff; color:#235bcb;
	border-radius:4px; padding:5px 12px; font-size:13px; cursor:pointer;
}
#rateInfoModal .plan-img-btn:hover{ background:#235bcb; color:#fff; }
#rateInfoModal .plan-picked{ font-size:14px; color:#444; margin:-8px 0 12px; }
#rateInfoModal .plan-picked b{ color:#235bcb; }

/* 요금제 설명(비교표) 이미지 뷰어 — 화면 전체를 덮는다.
   모달(.modal-content) 안에 두면 transform 때문에 fixed 가 모달 기준이 되므로,
   띄울 때 body 로 옮긴다(rateInfoModal.jsp showPlanImage). 그래서 선택자를 #rateInfoModal 밖에서도 먹게 둔다 */
#planImgPop{
	display:none; position:fixed; top:0; left:0; right:0; bottom:0;
	background:rgba(0,0,0,.65); z-index:10000;
}
#planImgPop .plan-img-inner{
	position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
	background:#fff; padding:14px; border-radius:6px;
	max-width:72vw; max-height:72vh; overflow:auto;
	box-shadow:0 0 12px rgba(0,0,0,.3);
}
#planImgPop .plan-img-top{
	display:flex; justify-content:space-between; align-items:center;
	font-size:16px; margin-bottom:10px; gap:24px;
}
#planImgPop .plan-img-top i{ cursor:pointer; font-size:22px; }
#planImgPop img{ display:block; max-width:90vw; max-height:63vh; }
#planImgPop .plan-img-missing{ padding:40px 60px; color:#888; font-size:14px; text-align:center; }

/* ---------- 연간 구독료 결제 도움말 : 버튼 안, 꺾쇠(›) 앞의 ? 아이콘 + 말풍선 ---------- */
#rateInfoModal .pay-type-btn{ position:relative; }
#rateInfoModal .pay-help{
	position:relative; display:inline-block; margin-left:5px; vertical-align:-1px;
	color:#9aa3b2; font-size:16px; line-height:1; cursor:help;
}
#rateInfoModal .pay-type-btn:hover .pay-help{ color:#235bcb; }
#rateInfoModal .pay-tip{
	display:none; position:absolute; left:50%; bottom:calc(100% + 12px); transform:translateX(-50%);
	white-space:nowrap; padding:10px 16px; border-radius:14px;
	background:#e8f1fc; color:#1a56c4; font-size:13.5px; font-weight:normal; line-height:1.5; text-align:center;
	box-shadow:0 2px 8px rgba(0,0,0,.12); z-index:20;
}
#rateInfoModal .pay-tip b{ font-weight:700; }
/* 말풍선 꼬리 */
#rateInfoModal .pay-tip::after{
	content:""; position:absolute; left:50%; top:100%; transform:translateX(-50%);
	border:7px solid transparent; border-top-color:#e8f1fc;
}
#rateInfoModal .pay-help:hover .pay-tip{ display:block; }
/* 요금제 선택 전(잠금)에는 버튼이 눌리지 않아도 ? 위에서는 안내를 볼 수 있게 */
#rateInfoModal .pay-step.locked .pay-type-btn .pay-help{ pointer-events:auto; }