/*
 * =====================================
 * 간편등록 카드
 * =====================================
*/


@keyframes alertShow {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* 공통 레이아웃 */
.flex-row { display: flex; gap: 5px; }
.input-group { width: 100%; margin-bottom: 15px; }
.input-group.half { width: 50%; }

/* 입력 필드 스타일 통합 */
.input-group > label{margin-bottom:5px;color:#666;font-size:14px;}
.input-group input { font-size: 16px; border: none;border-bottom: 1px solid #ddd; padding: 12px; width: 100%;  box-sizing: border-box; background: #fff;outline: none;}
.input-group input:read-only{background:#eee;cursor:default;}

/* 헤더 관련 */
.card-manager-header { display: flex; justify-content: space-between; align-items: center; padding: 0 15px; height: 56px; border-bottom: 1px solid #eee; flex-shrink: 0; /* 헤더 높이 고정 */}

.btn-header-left,
.header-right-empty { width: 40px; height: 40px; border: none; background: none; cursor: pointer; }

/* 아이콘 텍스트 숨김 처리 (웹 표준) */
.btn-header-left i { font-size: 0; }
.icon-close::before { content: '✕'; font-size: 20px; color: #333; }
.icon-back::before { content: '←'; font-size: 20px; color: #333; }

/* 레이어 및 컨테이너 */
.card-manager-layer {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 100;}
.card-manager-container { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%;background: #fff; display: flex; flex-direction: column; overflow: hidden;}

/* 입력 영역 스크롤 제어 */
.card-step-content { flex: 1;  }
.card-step-content .card-list{padding: 20px;overflow-y: auto;-webkit-overflow-scrolling: touch; /* iOS 부드러운 스크롤 */}
.card-step-content .card-list li{ display: flex;align-items: end; justify-content: space-between; padding:20px;  margin:16px 0; background-color: var(--ffffff, #FFF); border: 1px solid var(--bf_outline, #ECECEC);  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.10)); border-radius: 8px;  padding: 20px; height:95px; color:#4F270F; font-size:14px;}
.card-manager-container .btn-area-bottom{position: absolute;  bottom: 40px;  width: calc(100% - 40px);  display: block;left: 20px;}
.card-manager-container .btn-area-bottom button{  width:100%;line-height:56px;background: linear-gradient(126deg, #CEA076 28.24%, #DAB78E 34.19%, #B4875E 64.18%);box-shadow: 0 6px 10px rgba(0, 0, 0, 0.10);color:#fff;font-size:16px;}
.card-step-content > form{padding:20px;}

/* 커스텀 키패드 */
.custom-keypad { position: absolute; bottom: 0; left: 0; width: 100%; background: #eee; padding-bottom: env(safe-area-inset-bottom);box-shadow: 0 -2px 10px rgba(0,0,0,0.1); z-index: 10;}

.keypad-grid { display: grid; grid-template-columns: repeat(3, 1fr);   grid-template-rows: repeat(4, 60px);     gap: 1px; background: #ddd;}
.keypad-grid button { height: 60px; font-size: 20px; background: #fff; border: none; }
.keypad-grid button:active { background: #f0f0f0; }
.btn-clear { font-size: 13px; color: #666; }
.btn-delete { font-weight: bold; }

/* 안내 팝업 배경 */
.card-alert-layer {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 30px; box-sizing: border-box;}

/* 팝업 박스 */
.card-alert-box { background: #fff; width: 100%; max-width: 300px; border-radius: 15px; overflow: hidden; box-shadow: 0 10px 25px rgba(0,0,0,0.2);  text-align: center; animation: alertShow 0.2s ease-out;}

/*알럿 메시지*/
.card-alert-msg { padding: 30px 20px; font-size: 16px; line-height: 1.4; color: #333; }

/* 버튼 영역 */
.card-alert-btns { display: flex; border-top: 1px solid #eee; height: 50px; }
.card-alert-btns button {
    flex: 1; border: none; background: none; font-size: 15px; cursor: pointer;
}
.btn-alert-sub { border-right: 1px solid #eee !important; color: #888; }
.btn-alert-main { color: #007bff; font-weight: bold; }
.btn-alert-main:active,
.btn-alert-sub:active { background: #f8f9fa; }
.btn-keypad-close{display:block;padding:10px;width:100%;text-align:center;}


/* PC 웹 환경 대응 */
@media screen and (min-width: 769px) {
    /* PC 769 이상 */
    .card-manager-container {  width: 450px; height: 750px; left: 50%; top: 50%;transform: translate(-50%, -50%); border-radius: 12px;}
}

@media all and (max-width:769px){
    /* 모바일 769 이하 */
   .card-manager-header h2{font-size:17px;}
   .input-group{font-size:14px;margin-bottom:20px;}
}