/* 메인(첫 페이지) : 금 ETF 1·3·5분 대시보드 */
body.kmBody { margin: 0; background: #fff; }

.kmHome { min-height: 100vh; background: #fff; color: #17223b; font-family: Arial, "Noto Sans KR", sans-serif; font-size: 13px; line-height: normal; }
.kmHome * { box-sizing: border-box; }
.kmHome a { text-decoration: none; color: inherit; }
.kmHome a:hover { text-decoration: none; }
.kmHome h1, .kmHome h2, .kmHome h3, .kmHome p { font-family: inherit; padding: 0; }
.kmHome button { font-family: inherit; }
.kmHome svg { flex: 0 0 auto; }
.kmHome .rise { color: #e05062 !important; }
.kmHome .fall { color: #2d69d5 !important; }

/* ---------- 본문 ---------- */
.kmHMain { max-width: 1260px; padding: 28px 24px 48px; margin: auto; display: grid; gap: 22px; }

.kmHWelcome { background: linear-gradient(110deg, #172b52, #3468ba); color: #fff; border-radius: 17px; padding: 30px 33px; display: flex; align-items: center; justify-content: space-between; gap: 20px; position: relative; overflow: hidden; }
.kmHWelcome > div { position: relative; z-index: 1; }
.kmHWelcome:after { content: ""; position: absolute; right: -60px; top: -80px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(244, 199, 92, .22), rgba(244, 199, 92, 0) 70%); }
.kmHEyebrow { font-weight: 800; letter-spacing: 1.4px; color: #bdd0fe; font-size: 10px; margin: 0 0 12px; }
.kmHWelcome h1 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -1px; color: #fff; }
.kmHWelcome p:not(.kmHEyebrow) { font-size: 13px; color: #ccdaf5; margin: 10px 0 0; }
.kmHWelcomeActions { display: flex; gap: 10px; align-items: center; }
.kmHWelcomeActions a { padding: 13px 18px; border-radius: 8px; display: flex; align-items: center; gap: 8px; font-weight: 750; font-size: 13px; white-space: nowrap; background: #fff; color: #222 !important; }
.kmHWelcomeActions a:hover { background: #f2f5fb; }
.kmHWelcomeActions a svg { color: #3468ba; }

.kmHSection { background: #fff; border: 1px solid #e8edf4; border-radius: 14px; padding: 22px 24px; min-width: 0; }
.kmHSectionTitle { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 20px; }
.kmHSectionTitle h2 { font-size: 17px; font-weight: 800; margin: 0 0 7px; color: #17223b; }
.kmHSectionTitle p { font-size: 12px; color: #8995a9; margin: 0; }
.kmHSectionTitle > svg { color: #3965ce; }

/* 마켓 펄스 */
.kmHMarketPro { padding: 0; overflow: hidden; border-color: #f0f1f4; border-radius: 13px; }
.kmHMarketTop { padding: 17px 22px 14px; display: flex; justify-content: space-between; align-items: center; gap: 15px; }
.kmHMarketEyebrow { font-size: 10px; letter-spacing: 1.7px; font-weight: 850; color: #3c67b3; display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.kmHPulseDot { width: 6px; height: 6px; background: #3ab58c; border-radius: 50%; animation: kmPulse 1.6s ease-in-out infinite; }
@keyframes kmPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.kmHMarketTop h2 { margin: 0; font-size: 18px; letter-spacing: -.6px; font-weight: 850; color: #17223b; }
.kmHMarketTop p { margin: 8px 0 0; color: #8390a5; font-size: 11px; }
.kmHMarketAsOf { font-size: 11px; color: #8997aa; white-space: nowrap; }

.kmHMarketStrip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 0 22px 16px; }
.kmHMarketTab { position: relative; min-width: 0; min-height: 76px; padding: 12px 15px; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; border: 1px solid #f0f1f4; background: #f8fafc; color: #21314f; border-radius: 10px; text-align: left; cursor: pointer; overflow: hidden; outline: 0; }
.kmHMarketTab.active { background: #f3f6ff; border-color: #c6c7cc; box-shadow: inset 0 0 0 1px rgba(198, 199, 204, .25); }
.kmHMarketTab > div:first-child { display: flex; flex-direction: column; gap: 7px; z-index: 1; min-width: 0; }
.kmHMarketTab > div:first-child strong { font-size: 13px; white-space: nowrap; }
.kmHMarketTab > div:first-child span { font-size: 10px; color: #93a0b2; white-space: nowrap; }
.kmHMarketTabNumbers { display: flex; flex-direction: column; text-align: right; gap: 7px; z-index: 2; }
.kmHMarketTabNumbers b { font-size: 18px; letter-spacing: -.5px; }
.kmHMarketTabNumbers small { font-size: 12px; font-weight: 750; white-space: nowrap; }
.kmHSpark { position: absolute; bottom: 0; left: 10px; width: 40%; max-width: 100px; height: 27px; opacity: .45; }

.kmHMarketBody { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, .85fr); border-top: 1px solid #f0f1f4; }
.kmHMarketChart { padding: 16px 21px 14px; min-width: 0; }
.kmHMarketChartHead { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.kmHMarketChartTag { font-size: 10px; color: #8398bc; letter-spacing: 1.3px; font-weight: 850; }
.kmHMarketChartHead h3 { margin: 8px 0 0; font-size: 23px; font-weight: 850; letter-spacing: -.6px; color: #17223b; }
.kmHMarketChartHead h3 b { font-weight: inherit; }
.kmHMarketChartHead h3 span { margin-left: 7px; font-size: 11px; color: #8796aa; font-weight: 650; letter-spacing: 0; }
.kmHMarketMainPrice { display: flex; align-items: baseline; gap: 11px; }
.kmHMarketMainPrice strong { font-size: 23px; letter-spacing: -.3px; }
.kmHMarketMainPrice em { font-style: normal; font-size: 11px; color: #8796aa; font-weight: 700; }
.kmHMarketMainPrice span { font-size: 12px; font-weight: 750; }
.kmHChartWell { margin-top: 18px; height: 380px; overflow: hidden; border-radius: 7px; background: #fff; border: 1px solid #edf1f6; }
.kmHChartWell .tradingview-widget-container, .kmHChartWell .tradingview-widget-container__widget { width: 100%; height: 100%; }
.kmHChartHint { color: #9aa5b6; font-size: 10px; margin: 10px 0 0; }

.kmHMarketSide { border-left: 1px solid #f0f1f4; background: #fbfcff; padding: 19px; display: flex; flex-direction: column; min-width: 0; }
.kmHMarketSideTitle { display: flex; align-items: center; justify-content: space-between; margin-bottom: 21px; }
.kmHMarketSideTitle strong { font-size: 15px; }
.kmHMarketSideTitle span { font-size: 11px; color: #8798b2; }
.kmHDayStats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
.kmHDayStats > div { display: grid; gap: 8px; }
.kmHDayStats span { font-size: 11px; color: #929eae; }
.kmHDayStats strong { font-size: 17px; letter-spacing: -.35px; }
.kmHDayRange { margin-top: 25px; padding-top: 16px; border-top: 1px solid #f0f1f4; }
.kmHDayRange > div:first-child, .kmHDayRange > div:last-child { display: flex; justify-content: space-between; gap: 10px; }
.kmHDayRange span { font-size: 10px; color: #929fb2; }
.kmHDayRange b { font-size: 12px; color: #273c63; }
.kmHDayTrack { position: relative; height: 5px; border-radius: 10px; background: linear-gradient(90deg, #e8e8ea, #777b83); margin: 15px 7px 12px; }
.kmHDayTrack i { position: absolute; top: -6px; left: 50%; display: block; width: 16px; height: 16px; border-radius: 50%; background: #3468ba; border: 3px solid #fff; box-shadow: 0 0 0 1px #e8e8ea; transform: translateX(-50%); transition: left .4s; }
.kmHRound { margin-top: 22px; padding: 14px; border-radius: 10px; background: #fff; border: 1px solid #edf1f6; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.kmHRound span { font-size: 11px; color: #8796aa; }
.kmHRound strong { font-size: 20px; letter-spacing: -.3px; font-variant-numeric: tabular-nums; color: #17223b; }
.kmHMarketSideLinks { margin-top: auto; padding-top: 22px; display: grid; gap: 10px; }
.kmHMarketSideLinks a { display: flex; justify-content: space-between; align-items: center; padding: 11px 13px; background: #f0f4fb; border-radius: 8px; color: #48607e !important; font-size: 12px; font-weight: 700; }
.kmHMarketSideLinks a:hover { background: #e6edf9; }

/* 상품 / 내 자산 */
.kmHColumns { display: grid; grid-template-columns: 1.45fr 1fr; gap: 22px; }
.kmHProductList { display: grid; }
.kmHProductRow { padding: 14px 4px; border-bottom: 1px solid #edf1f5; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kmHProductRow:last-child { border-bottom: 0; }
.kmHProductIcon { width: 38px; height: 38px; border-radius: 11px; background: #fff7e4; color: #b8860b; display: grid; place-items: center; font-weight: 850; font-size: 12px; flex: 0 0 auto; border: 1px solid #f6e7bf; }
.kmHProductName { display: grid; gap: 5px; flex: 1 1 0%; min-width: 0; }
.kmHProductName strong { font-size: 13px; }
.kmHProductName span { font-size: 11px; color: #8e9bac; }
.kmHProductTime { text-align: right; display: grid; gap: 5px; }
.kmHProductTime span { font-size: 10px; color: #9aa5b6; }
.kmHProductTime b { font-size: 14px; font-variant-numeric: tabular-nums; }
.kmHProductRow > a { display: flex; align-items: center; gap: 2px; padding: 8px 10px; border-radius: 8px; background: #f2f5fb; font-size: 12px; font-weight: 700; color: #2d5bc1 !important; white-space: nowrap; }
.kmHProductRow > a:hover { background: #e6edf9; }

.kmHBalanceLabel { color: #8e9bb0; font-size: 12px; margin: 24px 0 10px; }
.kmHBalance { display: block; font-size: 29px; letter-spacing: -.8px; }
.kmHBalance small { font-size: 15px; margin-left: 3px; color: #5d6b82; }
.kmHAccountLinks { display: flex; gap: 10px; margin-top: 27px; }
.kmHAccountLinks a { flex: 1 1 0%; background: #f2f5fb; padding: 13px 12px; border-radius: 8px; font-weight: 700; align-items: center; color: #415673 !important; font-size: 12px; display: flex; justify-content: space-between; }
.kmHAccountLinks a:hover { background: #e6edf9; }

/* 빠른 메뉴 */
.kmHShortcuts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 13px; }
.kmHShortcuts a { padding: 17px; border: 1px solid #edf1f6; border-radius: 11px; display: grid; gap: 9px; position: relative; transition: border-color .15s, box-shadow .15s; }
.kmHShortcuts a:hover { border-color: #d6e0f2; box-shadow: 0 8px 24px rgba(35, 63, 111, .06); }
.kmHShortcuts a > svg:first-child { color: #3965ce; }
.kmHShortcuts a > svg:last-child { position: absolute; right: 15px; top: 17px; color: #a5afbe; }
.kmHShortcuts strong { font-size: 13px; }
.kmHShortcuts span { font-size: 11px; color: #8f9bb0; }

.kmHFooter { display: flex; justify-content: space-between; gap: 12px; padding: 20px max(24px, calc(50vw - 606px)); color: #9ba5b4; font-size: 11px; border-top: 1px solid #f5f5f6; }

/* ---------- 반응형 ---------- */
@media (max-width: 900px) {
	.kmHColumns { grid-template-columns: 1fr; }
	.kmHMarketBody { grid-template-columns: 1fr; }
	.kmHMarketSide { border-left: 0; border-top: 1px solid #f0f1f4; }
	.kmHWelcome { padding: 25px; flex-direction: column; align-items: flex-start; }
	.kmHShortcuts { grid-template-columns: repeat(2, 1fr); }
	.kmHChartWell { height: 320px; }
}
@media (max-width: 640px) {
	.kmHMain { padding: 15px 12px; gap: 14px; }
	.kmHWelcome { padding: 23px 18px; }
	.kmHWelcome h1 { font-size: 21px; }
	.kmHWelcomeActions { width: 100%; }
	.kmHWelcomeActions a { flex: 1 1 0%; justify-content: center; }
	.kmHSection { padding: 18px 15px; }
	.kmHMarketTop { padding: 17px; }
	.kmHMarketStrip { margin: 0 12px 12px; gap: 8px; }
	.kmHMarketTab { padding: 10px; flex-direction: column; min-height: 88px; }
	.kmHMarketTabNumbers { text-align: left; }
	.kmHMarketTabNumbers b { font-size: 16px; }
	.kmHMarketTabNumbers small { font-size: 10px; }
	.kmHMarketChart { padding: 16px 12px; }
	.kmHMarketChartHead h3 { font-size: 19px; }
	.kmHMarketMainPrice strong { font-size: 18px; }
	.kmHChartWell { height: 300px; }
	.kmHProductRow { flex-wrap: wrap; }
	.kmHFooter { padding: 15px; }
	.kmHFooter span { display: none; }
}
@media (max-width: 420px) {
	.kmHMarketStrip { grid-template-columns: 1fr; }
	.kmHMarketTab { flex-direction: row; min-height: 70px; }
	.kmHMarketTabNumbers { text-align: right; }
	.kmHAccountLinks { flex-direction: column; }
}