@charset "UTF-8";

html {
	font-family: 'Noto Sans Korean', 'Sans-serif';
	-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent;
}

body {
	font-family: 'Noto Sans Korean', 'Sans-serif';
	margin: 0; padding: 0; background-color: #fff;
}

article, aside, footer, header, nav, section, figcaption, figure { display: block; }
hr { box-sizing: content-box; height: 0; overflow: visible; }
pre { font-family: monospace, monospace; font-size: 1em; }
img { border-style: none; }
ol, ul {list-style: none; }

a { background-color: transparent; -webkit-text-decoration-skip: objects; }
a:active, a:hover { outline-width: 0; }
a, a:hover { text-decoration: none; }

input, textarea, button, select { -webkit-appearance:none; -moz-appearance:none; appearance:none; }
input, textarea, button, select { -webkit-border-radius:0; -moz-border-radius:0; }

div, p, span, button, input, optgroup, select, textarea { font-family: 'Noto Sans Korean', 'Sans-serif'; }
button, input, optgroup, select, textarea { font-size: 100%; line-height: 1.15; margin: 0; }
input, select, textarea { font-family: 'Sans-serif'; }
select::-ms-expand { display: none; }
button { overflow: visible; }

::-webkit-file-upload-button {-webkit-appearance: button; }

[hidden] { display: none; }

*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

html, body, div, span, iframe,
h1, h2, h3, h4, h5, h6, p, caption, blockquote, pre,
form, img, a, abbr, address, big, cite, code,
dl, dt, dd, ol, ul, li, b, u, i, label, center,
fieldset, section, del, em, q, s, small, strike, strong,
table, tbody, tfoot, thead, tr, th, td,
footer, header, figure, figcaption, hgroup, legend,
menu, nav, output, ruby, summary, mark {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
blockquote, q {quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

table { border-collapse: collapse; border-spacing: 0; }
button {
	padding: 6px 12px; font-family: inherit; font-size: 0.95rem; background-color: transparent;
	border: 1px solid #83C9F4; border-radius: 4px; cursor: pointer; outline: 0; transition: all 0.1s ease-in-out;
}
button:hover { background-color: #83C9F4; }

input[type="checkbox"] { position: relative; }
input[type="checkbox"]:checked::after {					/* 체크되면 ✔ 표시를 강제로 그려준다 */
	position: absolute; content: "";
	left: 5px; top: 1px;
	width: 5px; height: 10px;
	border: solid #efefef; border-width: 0 2px 2px 0;
	transform: rotate(45deg); pointer-events: none;
}

main { display: block; }

#wrap { width:min(100%, 640px); margin:0 auto; background-color: #1A2235; }

.fakelink { cursor: pointer; }

.container { width:100%; min-height:calc(100vh - 100px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); }
.container .vertical-gap { height:30px; }
.container .grid-table { display: grid; gap: 1px; width: 100%; max-width: 100%; }
.container .grid-table > * { min-width: 0; }
.container .grid-table .header { font-size: 1rem; word-break: break-word; overflow-wrap: break-word; }
.container .grid-table .header.center { text-align:center; }
.container .grid-table .cell {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 12px; font-size: 0.95rem; background-color: transparent;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.container .grid-table .cell.center { justify-content: center; }

/* Customize Parts */
html { font-family: 'Roboto', 'Sans-serif'; }
body { font-family: 'Roboto', 'Sans-serif'; background-color: #162D72; }
button { color: #9BE9D8; }
button:hover { color: #0F1D3C; }
button.cancel { color:#97cbc0; border-color:#979797; }

.container { margin-top:60px; }
.container .container_inner { padding: 20px; }
.container .container_inner .main_tit {
	color: #83C9F4;
	font-size: 1.70rem; font-weight: 700;
	margin-left:10px; margin-top: 10px; margin-bottom: 20px;
}

.container .grid-table .header { background-color: #1B2D4F; color: #9BE9D8; padding: 8px; font-weight: 600; }
.container .grid-table .cell { padding: 6px; }

.container .grid-table.symbol-list { grid-template-columns: 1fr 1fr 1fr 45px; }
.container .grid-table.profit-list { grid-template-columns: 1fr 1fr 1fr 45px; }

/* ===== My Assets ===== */
.page-header{display:flex;flex-direction:column;align-items:center;gap:.25rem;margin:.5rem 0 1rem;}
.page-header .main_tit span{font-weight:800;font-size:1.25rem;}
.total-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:.25rem 0 .75rem;}
.total-label{font-size:.82rem;color:rgba(255,255,255,.65);letter-spacing:.08em;text-transform:uppercase;}
.total-amount { font-size:1.9rem; font-weight:800; margin-top:.15rem; line-height:1; }
.btns{display:flex;justify-content:center;gap:.75rem;margin:.35rem 0 1rem;}

.list{padding:0;margin:0;}

.asset-cards {
	display:grid;
	grid-template-columns:1fr;
	gap:.7rem;
	padding:0;
	box-sizing:border-box;
}

@media(max-width:45.99em) {
.list{ width:100%; }
}


.asset-card{
	background:rgba(0,0,0,.42);
	border:1px solid rgba(255,255,255,.10);
	border-radius:.7rem;
	box-shadow:0 10px 28px rgba(0,0,0,.22);
	padding:.95rem 1rem;
	color:rgba(255,255,255,.95);
	text-decoration:none;
	width:100%; max-width:92vw;
}
.asset-card:hover{background:rgba(0,0,0,.50);}

.asset-section { opacity:.95; font-weight:800; margin:.35rem .1rem .2rem; letter-spacing:.02em; }

.asset-top{display:grid;grid-template-columns:1fr;gap:.25rem;}
.asset-head{display:flex;align-items:center;gap:.6rem;}
.asset-head .icon{
	width:30px;height:30px;line-height:30px;text-align:center;
	border-radius:9999px; color:#fff;display:inline-block;font-size:.95rem;
/*	box-shadow:0 4px 12px rgba(0,0,0,.25);	*/
}
.asset-head .symbol{ font-weight:800; font-size:1.02rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.asset-address{ font-size:.88rem; white-space:nowrap; text-overflow:ellipsis; }
.asset-address-top{display:none;}
.asset-address-bottom{display:block; text-align:right;}

.asset-body{display:grid;grid-template-columns:1fr;gap:.25rem;margin-top:.1rem;}
.asset-row{
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(0,1fr);
	gap:.6rem;
}
.asset-field{display:flex;flex-direction:column;align-items:flex-end;padding:.25rem 0;}
.asset-label { font-size:.74rem; margin-bottom:.2rem; letter-spacing:.01em; }
.asset-value { font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.asset-field[data-type="amount"],
.asset-field[data-type="usd"]{min-width:auto}

.asset-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);margin:.6rem 0 .5rem;}


@media (min-width:46em) {
.asset-top{grid-template-columns:1fr minmax(350px,1fr);align-items:center;gap:.85rem;}
.asset-address-top { display:block;text-align:right; }
.asset-address-bottom{display:none;}
.asset-field[data-type="amount"],
.asset-field[data-type="usd"]{min-width:7.6rem}
/* If you want to expand various columns
   .asset-cards{grid-template-columns:repeat(2, minmax(0,1fr));gap:12px;}
*/
}


@media (max-width:495px) {
.container .container_inner { padding:10px; }
}


/* ================================
   Wave Palette Theme (from wallpaper)
   Colors extracted:
   Navy #034B6F, Sand #FEC778/#FDBD61, Pink #FEC0CC, Teal #00B3CB/#29C2D6
   ================================ */

:root{
	--wave-navy: #034B6F;
	--wave-navy-2: #033B57;
	--wave-sand: #FEC778;
	--wave-sand-2: #FDBD61;
	--wave-pink: #FEC0CC;
	--wave-teal: #00B3CB;
	--wave-teal-2: #29C2D6;

	--wave-text: rgba(255,255,255,.92);
	--wave-text-dim: rgba(255,255,255,.70);
	--wave-stroke: rgba(255,255,255,.16);

	--wave-card: rgba(3,75,111,.48);
	--wave-card-2: rgba(3,59,87,.36);
	--wave-glow: rgba(41,194,214,.18);
}

/* App background */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(1200px 700px at 18% 10%, rgba(254, 199, 120, .92), rgba(254, 199, 120, 0) 60%),
		radial-gradient(1000px 700px at 86% 22%, rgba(254, 192, 204, .88), rgba(254, 192, 204, 0) 55%),
		radial-gradient(900px 700px at 82% 88%, rgba(0, 179, 203, .60), rgba(0, 179, 203, 0) 55%),
		linear-gradient(180deg, #FFF1D9 0%, #FAD7DE 42%, #D7F4F7 100%);
	background-repeat: no-repeat;
}
body { color: var(--wave-text); }

/* Main frame */
#wrap{
	background: transparent;
}

.container{
	margin-top: 64px;
	box-shadow: 0 18px 48px rgba(0,0,0,.22);
}

/* Inner surface */
.container .container_inner{
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.14);
	border-radius: 18px;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	padding: 22px;
}

/* Title */
.container .container_inner .main_tit{
	color: var(--wave-navy);
	margin: 2px 0 16px;
}
.container .container_inner .main_tit span{
	background: none;
	border: 0;
	box-shadow: none;
	padding: 0;
	display: inline;
}

/* Card blocks (Tachyons: .bg-near-black) */
.bg-near-black{
	background: linear-gradient(180deg, var(--wave-card) 0%, var(--wave-card-2) 100%) !important;
	border: 1px solid var(--wave-stroke) !important;
	box-shadow: 0 18px 50px rgba(0,0,0,.20) !important;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

/* Labels */
label, .total-label{
	color: rgba(3,75,111,.78) !important;
	text-shadow: none;
}

/* Inputs (Tachyons: .b--light-blue + .bg-transparent) */
input[type="text"], input[type="password"], input[type="email"], input[type="tel"], select, textarea{
	background: rgba(255,255,255,.72) !important;
	color: #05354d !important;
	border: 1px solid rgba(3,75,111,.24) !important;
	border-radius: 8px !important;
	box-shadow: 0 10px 22px rgba(3,75,111,.08);
}
input::placeholder, textarea::placeholder{
	color: rgba(5,53,77,.55) !important;
}

/* Buttons */
button{
	border-color: rgba(3,75,111,.22);
	color: var(--wave-navy);
	background: rgba(255,255,255,.76);
	border-radius: 12px;
}
button:hover{
	background: rgba(255,255,255,.92);
}

button:not(.cancel), .btn-primary {
	background: rgba(254,199,120,.55);   /* sand */
	border: 1px solid rgba(253,189,97,.95);
	color: #033B57;
	box-shadow: none;
}
button:not(.cancel):hover, .btn-primary:hover {
	background: rgba(254,199,120,.70);
}

button.cancel {
	background: rgba(255,255,255,0.25);
	border: 1px solid rgba(255,255,255,0.45);
	color: #033B57;
	box-shadow: none;
}
button.cancel:hover {
	background: rgba(255,255,255,0.35);
	border-color: rgba(255,255,255,0.70);
}

/* Tables */
.container .grid-table .header{
	background: rgba(255,255,255,.70);
	color: var(--wave-navy);
}
.container .grid-table .cell{
	background: rgba(255,255,255,.46);
	color: rgba(3,59,87,.92);
}

/* Asset cards */
.asset-card{
	background: rgba(255,255,255,.14);
	border: 1px solid rgba(255,255,255,.22);
	box-shadow: 0 16px 40px rgba(0,0,0,.18);
	color: var(--wave-text);
}
.asset-card:hover{ background: rgba(255,255,255,.18); }

.asset-head .icon{
	background: linear-gradient(180deg, var(--wave-sand), var(--wave-pink));
	color: rgba(3,59,87,.90);
}
.asset-divider{ background: linear-gradient(90deg, transparent, rgba(255,255,255,.24), transparent); }

@media (max-width:495px){
	.container .container_inner{ padding: 14px; }
}


/* Wave v2 - title unboxed */