@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&family=Noto+Sans+KR:wght@100..900&family=Noto+Serif+KR:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100..900&display=swap'); /* CH */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap'); /* EN */

/* ================== reset css ================== */
body, div, p, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, table, th, td, form, input, textarea, button, section {
margin:0;
padding:0;
box-sizing:border-box;
font-family:"Noto Sans KR","Nanum Gothic",sans-serif
}
body, input, textarea, select, table, button {font-weight:normal}
textarea, select {font-family:"Noto Sans KR","Nanum Gothic",sans-serif;font-size:1em}
textarea {white-space:pre-wrap;resize:vertical}
select {margin:0}
button {cursor:pointer}
p {margin:0;padding:0;word-break:keep-all}
hr {display:none}
li {list-style:none;margin:0;padding:0}
pre {overflow-x:scroll;font-size:1.1em}
*, :after, :before {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
select {appearance:none;-moz-appearance:none;-webkit-appearance:none}
select::-ms-expand {display:none}
input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus, input[type=date]:focus, input[type=date]:focus-visible {
outline:none !important;
box-shadow:none !important;
-webkit-box-shadow:0 0 0 0 white inset}
body {height:auto}
footer {display:flex;width:100%;height:auto;max-width:750px;background:#f1f1f1;padding:20px 10px;margin:0 auto;word-break:break-all;flex-direction:column;justify-content:flex-start;align-items:center}
footer div {}
footer ul {padding:0;margin:0;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center}
footer ul li {display:flex;flex-direction:row;align-items:center}
footer ul li p {font-size:14px;line-height:17px;color:#4d4d4e;font-weight:400;list-style:none;word-break:keep-all;text-align:center;}
footer ul li span {color:#333352;padding:0 3px 0 0}
footer ul li:before {content:'';display:block;width:1px;height:10px;margin:0 10px;background-color:#c1c1c1}
footer ul li:first-child:before {display:none}
a, a:hover, a:focus {text-decoration:none;cursor:pointer}
a {-webkit-transition:all 0.14s ease-in-out;-moz-transition:all 0.14s ease-in-out;-o-transition:all 0.14s ease-in-out;transition:all 0.14s ease-in-out}
:hover {-webkit-transition:all 0.14s ease-in-out;-moz-transition:all 0.14s ease-in-out;-o-transition:all 0.14s ease-in-out;transition:all 0.14s ease-in-out}
em {font-style:normal;font-weight:600;font-size:1.1em;font-family:"Malgun Gothic", "Nanum Gothic", "Dotum", sans-serif}
em span {font-size:0.92em;padding:0 2px;font-family:"Noto Sans", "Malgun Gothic", "Nanum Gothic", "Dotum", sans-serif}
/* 드래그 스타일
::-moz-selection {color:#ffffff;background:#513cbb}
::selection {color:#ffffff;background:#513cbb} */
/*  스크롤 스타일 */
::-webkit-scrollbar {width:6px;height:7px}
::-webkit-scrollbar-track {}
::-webkit-scrollbar-thumb {width:6px;height:7px;-webkit-border-radius:3px;border-radius:3px;background:rgba(51,51,51,0.32)}
::-webkit-scrollbar-thumb:hover {background:rgba(51,51,51,0.64)}
::-webkit-scrollbar-track-piece {}
::-webkit-scrollbar-thumb:window-inactive {background:rgba(0,0,0,0.4)}

.sound_only {display:inline-block !important;position:absolute;top:0;left:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important}
.scroll_hidden {overflow:hidden;width:100%;height:100vh;touch-action:none}

input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active
{transition:background-color 5000s ease-in-out 0s;-webkit-transition:background-color 9999s ease-out;-webkit-box-shadow:0 0 0px 1000px white inset !important}
body{padding:0;background-color:#f9f9f9;background-size:cover;background-repeat:no-repeat;width:100%;height:100%;min-height:100vh}
#hd {background:#fff}
#hd_wrapper{padding:0 0 40px;z-index:99999;background:#fff}
section {width:100%}
section > img {width:100%;text-align:center;margin:0 auto}
@keyframes down {
0%{transform:translateY(-50px)}
100%{transform:translateY(0px)}
}

#container {position:relative;display:flex;width:100%;height:100%;min-height:100vh;max-width:750px;background:#fff;padding:clamp(20px,4vw,30px);margin:0 auto;word-break:break-all;
flex-direction:column;justify-content:flex-start;align-items:center;overflow:hidden}
#container.dock {padding-bottom:160px !important}
#container .top_area, #container .cont_area, #container .footer_area {position:relative;display:flex;width:100%;height:auto}
#container .top_area {justify-content:space-between;align-items:center;position:relative;width:100%;padding:0}
#container .top_area .arr_btn{position:absolute;top:20px;left:clamp(20px,6vw,30px)}
#container .top_area .tit	   {display:block;width:100%;padding:0 20px;font-size:clamp(23px,6vw,30px);line-height:40px;color:#1c1c1c;font-weight:400;text-align:center;word-break:keep-all}
#container .top_area .arr_btn a  {width:3vw;min-width:50px}
#container .top_area .arr_btn img{-webkit-filter:grayscale(100%) brightness(0);filter:grayscale(100%) brightness(0)}
#container .top_area + div {width:100%;height:100%;min-height:calc(100vh - 90px);overflow-y:auto}
#container .top_area + div.cont_area {flex-direction:column}
#container.dock .top_area + div {width:100%;height:100%;min-height:calc(100vh - 160px - 90px);overflow-y:auto}
#container .footer_area	{}
#container.page_area {padding:0}
#container.page_area .top_area {padding:15px clamp(20px,6vw,30px) clamp(30px,6vw,35px)}

.btn_submit {width:100%;padding:0 40px;margin:0;color:#fff;cursor:pointer;background:#4489f5;border:none;cursor:pointer;text-align:center;overflow:hidden;
background:linear-gradient(120deg, #32A384 0%, #68EDC5 20%, #34CCAF 50%, #68EDC5 80%, #32A384 100%);
background:-webkit-linear-gradient(120deg, #32A384 0%, #68EDC5 20%, #34CCAF 50%, #68EDC5 80%, #32A384 100%);
background:-o-linear-gradient(120deg, #32A384 0%, #68EDC5 20%, #34CCAF 50%, #68EDC5 80%, #32A384 100%);
background:-moz-linear-gradient(120deg, #32A384 0%, #68EDC5 20%, #34CCAF 50%, #68EDC5 80%, #32A384 100%)}
.btn_style {display:flex;align-content:center;justify-content:center;align-items:center;text-align:center;cursor:pointer;border:none;white-space:nowrap;overflow:hidden}
.btn_style.disable {pointer-events:none!important;cursor:default!important}

.btn_style.submit {background:#36393f;color:#fff!important}
.btn_style.cancell {}
.btn_style.black {background:#36393f;color:#fff!important}
.btn_style.white {background:#fff;color:#111!important}
.btn_style.gray {background:#f6f6f7;color:#7c7c7e!important}
.btn_style.deepgray {background:#e1e1e1;color:#333!important}
.btn_style.darkgray {background:#5a5a5a;color:#fff!important}
.btn_style.navy {background:#1a2c3e;color:#fff!important}
.btn_style.green {background:#00c85d;color:#fff!important}
.btn_style.darkgreen {background:#0ea175;color:#fff!important}
.btn_style.blue {background:#513cbb;color:#fff!important}
.btn_style.purple {background:#8a2ae3;color:#fff!important}
.btn_style.red {background:#e14b4c;color:#fff!important}
.btn_style.yellow {background:#ffc300;color:#381c1c!important}
.btn_style.taupe {background:#8b7d74;color:#fff!important}
.btn_style.txLink {color:#5c5c5e!important}

.btn_style.submit:hover {background:#1b2c3e}
.btn_style.gray:hover  {background:#ececec;color:#333!important}
.btn_style.deepgray:hover {background:#c7c7c7;color:#111!important}
.btn_style.darkgray:hover {background:#36393f}
.btn_style.white:hover {background:#1a2c3e;color:#fff!important}
.btn_style.darkgreen:hover {background:#00c85d;color:#fff!important}
.btn_style.txLink:hover {color:#212121;text-decoration:underline}
.btn_style.red:hover {background:#ee2a2b}
.btn_box a {display:block;width:100%;font-size:30px;line-height:120px;color:#fff;text-align:center}

.c-orange {color:#ff6f0f!important}
.c-green {color:#04ba70!important}
.c-purple {color:#ba3cba!important}
.c-blue {color:#513cbb!important}
.c-gray {color:#9c9c9d!important}
.c-darkgray {color:#5a5a5a!important}
.c-black {color:#000!important}
.c-red {color:#e14b4c!important}
.point {color:#f00!important}

.c-light {font-weight:300!important}
.c-normal {font-weight:400!important}
.c-bold {font-weight:600!important}
.c-black {font-weight:900!important}

.c-center {text-align:center}
.c-left {text-align:left}
.c-right {text-align:right}

.c-line-throu {text-decoration:line-through}
.c-line-under {text-decoration:underline}

.w-100 {width:100%}

.f-Direc-col {flex-direction:column}
.f-Direc-row {flex-direction:row}

.btn_style.btn-otp-paste {display:flex;align-items:center;justify-content:center;width:100%;height:clamp(60px,10vh,80px);font-size:15px;color:#fff;background:#3c3c3c}

.textarea_box {position:relative}
.textarea_box textarea {width:100%;border:0;padding:15px 20px 30px}
.textarea_box .char-count {position:absolute;bottom:10px;right:10px;font:normal normal 12px "Malgun Gothic", "Dotum", sans-serif}

.input_box {position:relative;display:block;margin:0;font-size:0;background:#f6f6f6;z-index:2;overflow:hidden}
.input_box.readonly {background:#eaeef5}
.input_box.focus	{background:#e3f5f0}
.input_box.focus.readonly {background:#eaeef5!important}
.input_box:after {content:".";height:0;display:block;visibility:hidden;clear:both}
.input_box input[type=text], .input_box input[type=password] {display:block;width:100%;height:80px;border:0;outline:0;box-sizing:border-box;font-size:20px;color:#333;letter-spacing:0.75px;background-color:transparent !important}
.input_box input[type=text]::-ms-clear, .input_box input[type=password]::-ms-clear {display:none}
.input_box input[type=text]:-moz-placeholder, .input_box input[type=password]:-moz-placeholder {color:#999999;font-weight:normal}
.input_box input[type=text]:-ms-input-placeholder, .input_box input[type=password]:-ms-input-placeholder {color:#999999;font-weight:normal;letter-spacing:0.75px}
.input_box input[type=text]::-moz-placeholder, .input_box input[type=password]::-moz-placeholder {color:#999999;letter-spacing:0.75px}
.input_box input[type=text]::-webkit-input-placeholder, .input_box input[type=password]::-webkit-input-placeholder {color:#999999;font-weight:normal;letter-spacing:0.75px}
.input_box input[type=password]::-ms-reveal, .input_box input[type=password]::-ms-reveal {display:none}
.input_box input[type=text]:focus, .input_box input[type=text]:valid, .input_box input[type=password]:focus, .input_box input[type=password]:valid {background:#e3f5f0}
.input_box.readonly input[type=text]:-moz-placeholder, .input_box.readonly input[type=password]:-moz-placeholder {color:#333}
.input_box.readonly input[type=text]:-ms-input-placeholder, .input_box.readonly input[type=password]:-ms-input-placeholder {color:#333}
.input_box.readonly input[type=text]::-moz-placeholder, .input_box.readonly input[type=password]::-moz-placeholder {color:#333}
.input_box.readonly input[type=text]::-webkit-input-placeholder, .input_box.readonly input[type=password]::-webkit-input-placeholder {color:#333}
.input_box input:-webkit-autofill, .input_box input:-webkit-autofill:hover, .input_box input:-webkit-autofill:focus, .input_box input:-webkit-autofill:active, .input_box input:-webkit-autofill:valid, .input_box input:autofill, .input_box input:autofill:hover, .input_box input:autofill:focus, .input_box input:autofill:active,.input_box input:autofill:valid {transition:background-color 5000s ease-in-out 0s;-webkit-transition:background-color 9999s ease-out;-webkit-box-shadow:0 0 0px 1000px #e3f5f0  inset !important}
.input_box input {width:100%;height:80px;border:0;outline:0;background-color:transparent !important;color:#333;padding:24px clamp(20px,2vw,30px) 8px clamp(20px,2vw,30px);font-size:16px;letter-spacing:-0.75px;box-sizing:border-box}
.input_box label {position:absolute;left:clamp(20px,2vw,30px);top:calc(50% - 10px);font-size:16px;color:#9c9c9d;line-height:16px;transition:all 0.2s ease;white-space:nowrap}
.input_box input:focus ~ label, .input_box input:valid ~ label, .input_box.readonly label, .input_box input:-webkit-autofill ~ label, .input_box.focus label {font-size:13px;top:10px;color:#373f57}
.input_box input:focus, .input_box input:valid, .input_box input:-webkit-autofill {padding:24px clamp(20px,2vw,30px) 8px clamp(20px,2vw,30px);background-color:transparent !important}

#container label {}
#container input[type=checkbox], #container input[type=radio] {display:none;visibility:hidden}
#container .check_box label {position:relative;display:block;margin:0 auto;padding:0 0 0 35px;font-size:16px;color:#333;cursor:pointer}
#container .pop_tit .check_box label {color:#fff}
#container .check_box label:before {content:'';display:block;position:absolute;top:calc(50% - 12px);left:0;width:24px;height:24px;background:url(../img/check_arr_off.png)}
#container .check_box input:checked+label:before {background:url(../img/check_arr_on.png)}
#container .check_box.blueHead label:before {content:'';top:calc(50% - 15px);width:30px;height:30px;background:url(../img/check_arr_off02.png)}
#container .check_box.blueHead input:checked+label:before {background:url(../img/check_arr_on02.png)}

#container .radio_box {display:flex;align-items:center}
#container .radio_box div ~ div {margin:0 0 0 15px}
#container .radio_box label {position:relative;top:0;left:0;display:block;margin:0 auto;padding:0 0 0 35px;font-size:16px;color:#333;cursor:pointer;word-break:keep-all}
#container .radio_box label:before {content:'';display:block;position:absolute;top:calc(50% - 15px);left:0;width:30px;height:30px;background:url(../img/radio_arr_off.png)}
#container .radio_box input:checked+label:before {background:url(../img/radio_arr_on.png)}

#container .pop_inner .check_box.blueHead label {padding:0 0 0 40px;font-size:16px;color:#fff}
#container .pop_inner .check_box.blueHead label:before {content:'';top:calc(50% - 15px);width:30px;height:30px;background:url(../img/check_arr_off04.png)}
#container .pop_inner .check_box.blueHead input:checked+label:before {background:url(../img/check_arr_on04.png)}

#container .modal .pop_inner .check_box label {padding:0 0 0 50px;font-size:20px;color:#111;font-weight:500}
#container .modal .pop_inner .check_box label:before {content:'';top:calc(50% - 20px);width:40px;height:40px;background:url(../img/check_arr_off03.png)}
#container .modal .pop_inner .check_box input:checked+label:before {background:url(../img/check_arr_on03.png)}
#container .modal .pop_inner .check_box.bottom_agree {padding:30px 0 10px}

.select_box {background-color:#f6f6f6;box-sizing:border-box}
.select_box.focus {background-color:#e3f5f0}
.select_box.focus select {color:#000!important}
.select_box select {position:relative;border:0 none;outline:0 none;width:100%;padding:10px clamp(20px,2vw,30px) 10px 15px;font-size:clamp(13px,2.5vw,16px);color:#333;background-color:transparent !important;background:url('../img/arr_down.png') no-repeat right 15px center;background-size:17px 9px;padding-right:clamp(20px,2vw,30px)}
.select_box select option {padding:3px 0;font-size:16px}
.select_box select:focus {background-image:url('../img/arr_up.png')}

.select {position:relative;overflow:hidden;margin:0;padding:15px 0;width:100%;height:100%;border:none;font-size:17px;font-weight:300;box-shadow:none;flex-direction:column;align-items:center}
.select > i.toggle {position:absolute;z-index:4;right:25px;top:17px;color:#fff;font-size:0.8em}
.select .title, .select .placeholder {position:relative;display:block;width:100%;height:100%;cursor:pointer}
.select > input {position:absolute;left:0px;top:0px;z-index:1;width:100%;height:100%;display:block;opacity:0;cursor:pointer}
.select > input:checked ~ i.toggle.bi-chevron-down{display:none}
.select > input:checked ~ i.toggle.bi-chevron-up  {display:block;color:#fff}
.select > input:checked div.options label.option .title {display:none !important}
.select > input:not(:checked) {z-index:4}
.select > input:not(:checked) ~ label.option > span.title{display:none}
.select > input:not(:checked) ~ i.toggle.bi-chevron-up 	 {display:none}
.select > input:not(:checked) ~ i.toggle.bi-chevron-down {display:block}
.select > input:disabled {cursor:no-drop}
.select label.option span.title {position:relative;padding:7px 20px 7px 0;font-size:15px;z-index:2;transition:background 0.3s ease-out;color:#fff;box-sizing:border-box}
.select label.option span.title i.icon {padding-right:8px;color:#111}
.select label.option input {display:none}
.select label.option input:disabled ~ span.title {background:#f9f9f9 !important;color:#aaa}
.select label.option input:disabled ~ span.title:hover {color:#aaa;background:none;cursor:no-drop}

.solt_box .date_box {display:flex;justify-content:center;align-items:center;align-content:center;gap:clamp(10px,2vw,20px);padding:0 20px;background-color:#fff;border:1px solid #ececec}
.solt_box .date_box input {height:35px;padding:0}
.solt_box .wave {font-size:14px;line-height:14px}

.nationalFlag {gap:7px}
.nationalFlag, .nationalFlag img {-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%}
.subscript {align-items:baseline!important}
.detailSlide_box {overflow:hidden}

.coin_info {position:relative}
.coin_name {position:relative;display:flex;flex-direction:row;align-items:center;gap:10px;padding-right:25px;cursor:pointer}
.coin_name .img {width:40px;height:40px;overflow:hidden;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%}
.coin_name .img img {width:100%;height:auto}
.coin_name .tx {font-size:clamp(15px, 1.5vw, 17px);font-weight:bold}
.select-arrow {position:absolute;right:0;top:50%;transform:translateY(-50%);transition:transform 0.3s ease;transform-origin:center center;font-size:13px;text-align:center;display:flex;align-items:center;justify-content:center;width:13px;height:13px}
.select-arrow.open {transform:translateY(-50%) rotate(-180deg)}
.coinList_box {position:absolute;background:white;border:1px solid #eee;border-radius:4px;box-shadow:0 2px 10px rgba(0,0,0,0.1);z-index:9;margin-top:5px;padding:10px 0}
.coinList_box ul {display:flex;flex-direction:column;gap:7px}
.coinList_box ul li {}
.coinList_box ul li a {display:flex;flex-direction:row;align-items:center;gap:5px;font:normal bold 13px "Malgun Gothic", "Dotum", sans-serif;color:#333;white-space:nowrap;padding:3px 35px 3px 15px}
.coinList_box ul li:hover a {color:#111}
.coinList_box ul li a:before {display:block;width:23px;height:23px;content:'';-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;background-size:cover;background-color:#fff;background-position:center}
.coinLogo_PAYDA a:before {background-image:url(../img/coin_img/coinLogo_PAYDA.png)}
.coinLogo_WIP a:before {background-image:url(../img/coin_img/coinLogo_WIP.png)}
.coinLogo_TRX a:before {background-image:url(../img/coin_img/coinLogo_TRX.png)}
.coinLogo_BTC a:before {background-image:url(../img/coin_img/coinLogo_BTC.png)}
.coinLogo_XRP a:before {background-image:url(../img/coin_img/coinLogo_XRP.png)}
.coinLogo_ETH a:before {background-image:url(../img/coin_img/coinLogo_ETH.png)}
.coinLogo_BNB a:before {background-image:url(../img/coin_img/coinLogo_BNB.png)}
.coinLogo_XRP a:before {background-image:url(../img/coin_img/coinLogo_XRP.png)}
.coinLogo_USDT a:before {background-image:url(../img/coin_img/coinLogo_USDT.png)}
.coinLogo_PDC a:before {background-image:url(../img/coin_img/coinLogo_PDC.png)}
.coinLogo_ALL a:before {background-image:url(../img/coin_img/coinLogo_ALL.png)}


/* detail_layer */
.search_layer {position:fixed;bottom:-100%;left:50%;transform:translateX(-50%);width:calc(100% - (30px * 2));max-width:750px;max-height:80vh;margin:0 auto;background-color:#fff;box-shadow:0 -2px 10px rgba(0, 0, 0, 0.1);transition:bottom 0.3s ease-in-out;z-index:1000;display:flex;flex-direction:column}
.search_layer.active {bottom:0}
.search_content {padding:20px;flex-grow:1;min-height:0;display:flex;flex-direction:column}
.search_header {flex-shrink:0;display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:10px;border-bottom:1px solid #eee}
.search_header h3 {margin:0;font-size:13px;font-weight:bold}
.close_btn {background:none;border:none;font-size:20px;cursor:pointer}
.search_body {flex-grow:1;overflow-y:auto;-webkit-overflow-scrolling:touch;min-height:0;padding-right:5px;display:flex;flex-direction:column;gap:5px}
.search_item {display:flex;flex-direction:row;align-items:stretch;gap:5px}
.search_item > div {width:100%}
.search_item label {display:flex;;justify-content:center;align-items:center;font-weight:bold}
.search_item input[type="date"], .search_item select, .search_item input[type="text"], .search_item textarea {width:100%;padding:8px;box-sizing:border-box;border:none}
.date_range {display:flex;gap:10px}
.date_range input {flex-grow:1}
.checkbox_group, .radiobox_group {display:flex;gap:1px;flex-direction:row;/*flex-wrap:wrap;다음 줄로 */}
.checkbox_group input[type="checkbox"] + label, .radiobox_group input[type="radio"] + label {width:100%;min-height:50px;font-size:clamp(13px, 2.5vw, 16px);background-color:#f4f4f4;text-align:center;line-height:21px;font-weight:normal;color:#333;cursor:pointer}
.checkbox_group input[type="checkbox"]:checked + label, .radiobox_group input[type="radio"]:checked + label {color:#fff;background-color:#513cbb}
.search_footer {
flex-shrink:0;/* 푸터는 고정된 높이를 유지 */
margin-top:20px;/* search_body와의 간격 */
display:flex;
justify-content:center;
gap:10px;
padding-top:10px;/* 푸터 상단에 패딩 */
border-top:1px solid #eee;/* 푸터와 바디 사이에 구분선 */
}
.search_item select {height:50px;padding:0 20px}
.search_item .date_box {display:flex;justify-content:center;align-items:center;align-content:center;gap:clamp(10px,2vw,20px);padding:0 20px;background-color:#f4f4f4}
.search_item .date_box input {height:50px;padding:0;background-color:#f4f4f4}
.search_item .date_box.focus, .search_item .date_box.focus input {background-color:#e3f5f0}
.search_item .wave {font-size:14px}
.search_footer .btn_style {font-size:15px;line-height:45px;width:120px}
.search_item input {height:50px!important;padding:0 20px!important;font-size:clamp(13px,2.5vw,16px)!important}

/* Keypad */
.cert_box {display:none;flex-direction:column;align-items:center;gap:10px}
.cert_box .tx  {display:flex;flex-direction:column;align-items:center}
.password-certi {display:flex;flex-direction:row;gap:10px;max-width:100%}
.password-certi .input_box  input {padding:0 5px 10px;font-size:35px;text-align:center!important;min-width:75px;font-size:35px}
.keypad-overlay {position:fixed;bottom:0;left:0;width:100%;display:flex;z-index:1000;
background-color:#f7f7f7;/*rgba(255, 255, 255, 0.95); 투명한 흰색 배경 */
justify-content:center;/* 가운데 정렬 */
padding:10px 0;/* 상하 패딩만 주고 좌우는 keypad-body가 담당 */
box-shadow:0 -2px 10px rgba(0,0,0,0.1);
-webkit-user-select:none;/* iOS Safari에서 드래그 방지 */
-moz-user-select:none;   /* Firefox에서 드래그 방지 */
-ms-user-select:none;    /* Internet Explorer/Edge에서 드래그 방지 */
user-select:none;        /* 표준 드래그 방지 */
}
/* 키패드 본체 (내부 콘텐츠 컨테이너) */
.keypad-body {display:flex;width:100%;
max-width:750px;/* 최대 너비 설정 */
flex-direction:column;/* 세로 방향 정렬 */
padding:0 10px;/* 좌우 패딩 */
}
/* 숫자 버튼 그리드 (0~9까지 배치) */
.numbers-grid {display:grid;margin-bottom:10px;
grid-template-columns:repeat(3, 1fr);/* 3열로 정렬 */
gap:10px;/* 버튼 간 간격 */
}
/* 하단 삭제/0/닫기 버튼 컨테이너 */
.bottom-row {display:grid;
grid-template-columns:1fr 1fr 1fr;/* 3열로 정렬 */
gap:10px;/* 버튼 간 간격 */
}
/* 개별 키패드 버튼 공통 스타일 */
.keypad-btn {height:60px;font-size:24px;border:none;background-color:white;box-shadow:0 2px 5px rgba(0,0,0,0.1);cursor:pointer;display:flex;justify-content:center;align-items:center;
border-radius:8px;/* 둥근 모서리 */
-webkit-tap-highlight-color:transparent;/* 탭 시 하이라이트 제거 */
}
.keypad-btn:active {background-color:#e0e0e0;box-shadow:0 1px 3px rgba(0,0,0,0.1);transform:translateY(1px)}
/* 특정 버튼 스타일 */
.delete-btn, .close-btn {
background-color:#ccc;/* 배경색 */
color:#333;/* 글자색 */
}
.close-btn { /* 닫기 버튼은 초록색으로 */
background-color:#3CBA92;
color:white;
}

@media (max-width:768px) {
.search_content {padding:15px}
}
@media (max-width:420px){
.input_box input[type=text], .input_box input[type=password] {font-size:17px}
.input_box label {font-size:14px}
footer ul {gap:5px 10px}
footer ul li:before {display:none}
footer ul li p {font-size:12px;color:#777}
}