/* /res/css/simulation-view.css */

body {
	height: unset;
}

.qt-sim-page{
	/*max-width: 1200px;*/
	margin: 0 auto;
	padding: 22px 18px 46px;
	color: #eaeef6;
}

.qt-sim-head{
	display:flex;
	justify-content:space-between;
	align-items:flex-end;
	gap: 12px;
	margin-bottom: 14px;
}

.qt-sim-head__title h2{
	margin:0;
	font-size: 26px;
	font-weight: 900;
	letter-spacing: -0.4px;
}

.qt-sim-head__sub{
	margin: 8px 0 0;
	font-size: 13px;
	color: rgba(234,238,246,.62);
}

.qt-sim-head__ctrl{
	display:flex;
	gap: 10px;
	align-items:center;
}

.qt-select{
	border: 1px solid rgba(255,255,255,.12);
	background: rgba(255,255,255,.04);
	color: #eaeef6;
	padding: 9px 12px;
	border-radius: 12px;
	font-size: 13px;
	outline: none;
}

.qt-btn{
	border: 1px solid rgba(255,255,255,.12);
	background: rgba(255,255,255,.04);
	color: #eaeef6;
	padding: 9px 14px;
	border-radius: 12px;
	font-size: 13px;
	cursor: pointer;
	transition: transform .08s ease, background .15s ease, border-color .15s ease;
}

.qt-btn:hover{
	background: rgba(255,255,255,.07);
	border-color: rgba(255,255,255,.20);
}

.qt-btn:active{ transform: translateY(1px); }

.qt-btn--primary{
	background: rgba(255,255,255,.10);
	border-color: rgba(255,255,255,.18);
}

.qt-panel{
	border-radius: 18px;
	padding: 14px;
	border: 1px solid rgba(255,255,255,.10);
	background: rgba(255,255,255,.03);
	margin-top: 14px;
}

.qt-panel__head{
	display:flex;
	align-items:baseline;
	justify-content:space-between;
	gap: 10px;
	margin-bottom: 10px;
}

.qt-panel__head--row{
	align-items:center;
}

.qt-panel__title{
	margin:0;
	font-size: 14px;
	font-weight: 900;
}

.qt-panel__hint{
	font-size: 12px;
	color: rgba(234,238,246,.55);
}

.qt-panel__actions{
	display:flex;
	gap: 8px;
	align-items:center;
}

/* KPI grid */
.qt-kpi-grid{
	display:grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}

@media (max-width: 980px){
	.qt-kpi-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
	.qt-sim-head{ flex-direction:column; align-items:flex-start; }
	.qt-kpi-grid{ grid-template-columns: 1fr; }
}

.qt-kpi{
	border-radius: 16px;
	border: 1px solid rgba(255,255,255,.10);
	background: rgba(0,0,0,.10);
	padding: 12px 12px 10px;
}

.qt-kpi__label{
	font-size: 12px;
	color: rgba(234,238,246,.65);
	margin-bottom: 8px;
	font-weight: 800;
}

.qt-kpi__value{
	display:flex;
	align-items:baseline;
	gap: 8px;
	font-size: 26px;
	font-weight: 900;
	letter-spacing: -0.4px;
}

.qt-kpi__value small{
	font-size: 12px;
	font-weight: 800;
	color: rgba(234,238,246,.60);
}

.qt-kpi__meta{
	margin-top: 8px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap: 10px;
	font-size: 12px;
	color: rgba(234,238,246,.60);
}

/* Experiment summary bar */
.qt-expbar{
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap: 10px;
	flex-wrap: wrap;
	border-radius: 16px;
	border: 1px solid rgba(255,255,255,.10);
	background: rgba(0,0,0,.10);
	padding: 10px 12px;
	margin-bottom: 10px;
	font-size: 12.5px;
	color: rgba(234,238,246,.72);
}

.qt-expbar strong{
	color:#eaeef6;
	font-weight: 900;
}

.qt-expbar__left, .qt-expbar__right{
	display:flex;
	gap: 12px;
	align-items:center;
	flex-wrap: wrap;
}

.qt-expbar__sep{
	opacity:.35;
}

/* Chart */
.qt-chart-box{
	border-radius: 16px;
	border: 1px solid rgba(255,255,255,.10);
	background: rgba(0,0,0,.10);
	padding: 12px;
}

.qt-chart-box canvas{
	width: 100%;
	height: 220px;
	display:block;
}

.qt-chart-foot{
	margin-top: 10px;
	font-size: 12px;
	color: rgba(234,238,246,.55);
}

/* ===== Table (고객 스샷: 헤더/내용 모두 중앙정렬, width 100%, min-width 제거) ===== */
.qt-table-wrap{
	overflow: hidden;
	border-radius: 14px;
	border: 1px solid rgba(255,255,255,.08);
}

.qt-table{
	width:100%;
	border-collapse: collapse;
	background: rgba(0,0,0,.10);
}

.qt-table th, .qt-table td{
	padding: 12px 10px;
	border-bottom: 1px solid rgba(255,255,255,.06);
	font-size: 13px;
	vertical-align: middle;
	text-align: center; /* 전부 중앙정렬 */
}

.qt-table thead th{
	font-size: 12px;
	color: rgba(234,238,246,.65);
}

.qt-pill{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding: 8px 12px;
	border-radius: 12px;
	border: 1px solid rgba(255,255,255,.12);
	background: rgba(255,255,255,.04);
	font-size: 12px;
	color: #fff;
	cursor:pointer;
}

.qt-roi{
	font-weight: 900;
}

/* Reason panel */
.qt-reason{
	position: fixed;
	top: 0;
	right: 0;
	width: 420px;
	max-width: 90vw;
	height: 100vh;
	background: rgba(10,12,16,.98);
	border-left: 1px solid rgba(255,255,255,.10);
	box-shadow: -20px 0 40px rgba(0,0,0,.45);
	z-index: 50;
}

.qt-reason__head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding: 14px 14px;
	border-bottom: 1px solid rgba(255,255,255,.08);
}

.qt-reason__title{
	font-size: 14px;
	font-weight: 900;
}

.qt-reason__close{
	border: 1px solid rgba(255,255,255,.12);
	background: rgba(255,255,255,.04);
	color: #eaeef6;
	padding: 8px 12px;
	border-radius: 12px;
	font-size: 12px;
	cursor:pointer;
}

.qt-reason__body{
	padding: 14px;
	overflow:auto;
	height: calc(100vh - 56px);
}

.qt-reason__block{
	border: 1px solid rgba(255,255,255,.10);
	background: rgba(255,255,255,.03);
	border-radius: 14px;
	padding: 12px;
	margin-bottom: 10px;
}

.qt-reason__label{
	font-size: 12px;
	font-weight: 900;
	color: rgba(234,238,246,.70);
	margin-bottom: 8px;
}

.qt-reason__text{
	font-size: 13px;
	color: rgba(234,238,246,.85);
	line-height: 1.45;
}

.qt-reason__list{
	margin: 0;
	padding-left: 18px;
	color: rgba(234,238,246,.85);
	font-size: 13px;
}

/* Detail panel (주식 -> 세부사항 버튼) */
.qt-detail{
	position: fixed;
	top: 0;
	right: 0;
	width: 420px;
	max-width: 90vw;
	height: 100vh;
	background: rgba(10,12,16,.98);
	border-left: 1px solid rgba(255,255,255,.10);
	box-shadow: -20px 0 40px rgba(0,0,0,.45);
	z-index: 49;
}

.qt-detail__head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding: 14px 14px;
	border-bottom: 1px solid rgba(255,255,255,.08);
}

.qt-detail__title{
	font-size: 14px;
	font-weight: 900;
}

.qt-detail__close{
	border: 1px solid rgba(255,255,255,.12);
	background: rgba(255,255,255,.04);
	color: #eaeef6;
	padding: 8px 12px;
	border-radius: 12px;
	font-size: 12px;
	cursor:pointer;
}

.qt-detail__body{
	padding: 14px;
	overflow:auto;
	height: calc(100vh - 56px);
	color: rgba(234,238,246,.85);
	font-size: 13px;
	line-height: 1.45;
}