@charset "utf-8";
@import url('font.css');
@import url('common.css');

:root {
    --point-color: #DA4640;
}

body { margin: 0; padding: 0; /* 배경색이 필요하다면 아래처럼 유지해도 됨 */ background: #f0f0f0; }
#wrap { position: relative; max-width: 768px; min-height: 100vh; /* min-height 대신 height 사용 */ margin: 0 auto; padding-bottom: 70px; /* dock 부분 공간 필요하면 유지 */ background: #fff; overflow-y: auto; }
#dock {display: flex; position: fixed; z-index: 999; left: 50%; bottom: 0; width: 100%; max-width: 768px; height: 68px; padding: 8px 16px 12px; border-radius: 16px 16px 0 0; box-shadow: 0px -4px 24px 0px rgba(0, 0, 0, 0.05); background: #fff; transform: translateX(-50%);}
#dock a {display: block; width: 25%; padding-top: 32px; flex-grow: 1; flex-shrink: 0; text-align: center; background-repeat: no-repeat; background-position: center top; font-size: 12px; color: #888;}
#dock a.on {color: var(--point-color);}
#dock a.home {background-image: url(../images/ico/ico_dock_home.svg);}
#dock a.user {background-image: url(../images/ico/ico_dock_user.svg);}
#dock a.list {background-image: url(../images/ico/ico_dock_list.svg);}
#dock a.import {background-image: url(../images/ico/ico_dock_import.svg);}
#dock a.export {background-image: url(../images/ico/ico_dock_export.svg);}
#dock a.set {background-image: url(../images/ico/ico_dock_set.svg);}
#dock a.home.on {background-image: url(../images/ico/ico_dock_home_on.svg);}
#dock a.user.on {background-image: url(../images/ico/ico_dock_user_on.svg);}
#dock a.list.on {background-image: url(../images/ico/ico_dock_list_on.svg);}
#dock a.set.on {background-image: url(../images/ico/ico_dock_set_on.svg);}
#dock a.import.on {background-image: url(../images/ico/ico_dock_import_on.svg);}
#dock a.export.on {background-image: url(../images/ico/ico_dock_export_on.svg);}

header {display: flex; padding: 25px; margin-bottom:20px; align-items: center; justify-content: center; border-bottom: 1px solid #eee;}

.login_page {padding-top: 60px; padding-bottom: 60px; background: #f8f8f8 !important;}
.login_page h1 {text-align: center;}
.login_page .pin_area {margin-top: 36px; text-align: center;}
.login_page .pin_area h2 {margin-bottom: 16px; font-size: 15px; color: #aaa;}
.login_page .pin_area .pin {display: inline-flex; padding: 24px 40px; gap: 12px; border-radius: 16px; background: #fff;}
.login_page .pin_area .pin span {display: block; width: 34px; height: 40px; border-bottom: 2px solid #d7d7d7; font-size: 22px; font-weight: 600;}
.login_page .keypad {display: flex; align-items: center; justify-content: center; flex-wrap: wrap; max-width: 260px; margin: 50px auto 0; gap: 16px;}
.login_page .keypad button {width: 70px; height: 70px; border-radius: 50%; border: 0; font-size: 20px; color: #000; font-weight: 600; background: #fff;}
.login_page .keypad button.del {text-indent: -9999px; background: transparent url(../images/ico/ico_remove.svg) no-repeat center;}
.login_page .keypad button.submit {color: #fff; font-size: 16px; background: var(--point-color);}
.login_page .keypad button.submit:disabled {background: #aaa;}
.login_page .keypad button.submit.btn-clicked { background: #da4640 !important; /* 더 진한 빨간색으로 */ color: #fff !important; /* 흰색 글씨 */ }

/* 공통 */
.wall { margin: 20px 10px; padding: 20px 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); border: 1px solid #ddd; border-radius: 8px; background: #fff; }
.wall-top-half { padding: 20px 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); border: 1px solid #ddd; border-radius: 0 0 8px 8px; background: #fff; }

.input { height: 42px; padding: 0 12px; border: 1px solid #ccc; border-radius: 4px; }
.input[readonly] { background-color: #e9e9e9;  color: #999; }

.list { }
.list-item { display: flex; align-items: center; padding: 12px; border-bottom: 1px solid #eee; }
.list-item:hover { background-color: #f9f9f9; }
.list-item:last-child { border-bottom: none; }

.tab-wrapper { padding:10px; margin-bottom: 20px; background: #fff; /* 탭 아래 배경 */ }
.tab-group { margin-bottom: 0; border-bottom: none; display: flex; gap: 5px; }
.tab-content { padding: 30px 20px 20px 20px; border: 1px solid var(--point-color); border-radius: 0 6px 6px 6px; /* 탭 아래 본문 내부 여백 (필요 시 조절) */ }
.tab-item { position: relative; /* 기존 gap, align-items, font-size 등은 취향에 맞게 조절 가능 */ }
.tab-item input[type="radio"] { display: none; } /* 라디오 버튼 숨김 */
.tab-item span { display: inline-block; padding: 10px 16px; border: 1px solid #ccc; border-bottom: none; border-radius: 4px 4px 0 0; background: #f9f9f9; margin-bottom: -1px; /* 아래쪽 경계가 parent border와 자연스럽게 이어지도록 */ cursor: pointer; color: #333; transition: all 0.2s ease; }
.tab-item input[type="radio"]:checked ~ span { color: var(--point-color); font-weight: bold; background: #fff; border-color: var(--point-color); }
.tab-item input[type="radio"]:not(:checked) ~ span { border-bottom: 1px solid var(--point-color); }

.btn { display: inline-flex; background: #f2f2f2; color: #232323; align-items: center; justify-content: center; border-radius: 4px; cursor: pointer; }
    .btn:hover { background-color: #c13d38; color: #fff;  box-shadow: 0 2px 6px rgba(0,0,0,0.15); transition: all 0.2s ease; }
.btn-block { width: 100%; box-sizing: border-box;}
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
.btn-md { height: 42px; padding: 0 16px; font-size: 14px; }
.btn-lg { height: 50px; padding: 0 20px; font-size: 16px; }
.btn-white { background: #f2f2f2; color: #232323; border: 1px solid #ddd; }
.btn-red { background: #da4640; color: #fff; border: none; }

/* MY-WALLET */
.addr-index { font-size: 18px; font-weight: bold; margin-right: 8px; }
.address-wrap { display: flex; align-items: center; gap: 3px; margin-bottom: 20px; }
.address-wrap input[type="text"].addr-input { flex: 1; font-size: 12px; padding: 4px; }
.btn-qr, .btn-copy, .btn-detail, .btn-delete { display: inline-flex; align-items: center; padding: 4px; }
.coin-symbol {font-weight:600;font-size:16px;}
.coin-balance { display: inline-block; margin-left: auto; margin-right: 8px; text-align: right; min-width: 80px; /* 최소 너비 */ max-width: 120px; /* 최대 너비 */ white-space: nowrap; /* 줄바꿈 방지 */ overflow: hidden; /* 넘치면 숨김 */ text-overflow: ellipsis; /* 말줄임표 */ font-size: clamp(12px, 3vw, 16px); /* 화면 너비에 따라 12~16px 사이로 축소/확대 */ }

/* IMPORT-WALLET */
.sub-label {font-size:13px;color:#666;}
.sub-label-row { display: flex; align-items: center; justify-content: space-between; }
.input-box {display:flex;gap:10px;}
.import-text {flex:1;height:80px;border:1px solid #ccc;border-radius:4px;padding:8px;font-size:14px;}
.seed-num { display: inline-block; width: 24px;  text-align: right; margin-right: 4px; font-weight: 600; font-size: 14px; }

/* SEND-WALLET */
/* 폼 하나에 대한 전체 래퍼 */
.send_form { /* 폼 전체를 감싸는 스타일이 필요하다면 여기서 지정 */ /* 예: max-width, margin, etc. */ }
/* 라벨+인풋을 한 덩어리로 묶는 행 */
.form-row { margin-bottom: 16px; /* 아래쪽 간격 */ }
    .form-row label.sub-label { display: block; margin-bottom: 6px; }
        .form-row .input { width: 100%; box-sizing: border-box; /* 패딩 포함 전체 너비 */ }

/* 모달 */
.modal-overlay { z-index: 2000; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; }
.modal-content { position: relative; background: #fff; padding: 20px; border-radius: 8px; max-width: 400px; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
.modal-text { font: small }
.close-modal { position: absolute; top: 10px; right: 15px; background: none; border: none; font-size: 20px; font-weight: bold; cursor: pointer; }
.qr-image { max-width: 300px; display: block; margin: 0 auto; }


@media all and (max-width:1600px){
	
}