/* 케로로 팡팡 시세 — 게임 인벤토리 창의 말투(주황 금테 · 짙은 파랑 판 · 노란 활성 탭)를 빌린다. */
:root {
	--night: #061630;          /* 바탕 */
	--panel: #0c3a70;          /* 게임 파랑 판 */
	--panel-hi: #11518f;       /* 판 위 강조 */
	--row: #0e4580;
	--line: #2a68a8;
	--frame: #f4a623;          /* 창틀 주황 */
	--frame-deep: #c97508;
	--tab: #ffd447;            /* 활성 탭 노랑 */
	--tab-ink: #5a3500;
	--text: #eaf3ff;
	--muted: #9fbbdc;
	--pang: #ffe07a;           /* 팡 숫자 */
	--up: #63d36b;             /* 케로로 초록 */
	--down: #ff7a7a;
	--auction: #ffb84d;
	--pshop: #7fd3ff;
	--trade: #c9a4ff;
	--radius-frame: 22px;
	--radius: 12px;
	--display: 'Jua', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
	--body: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
	background: var(--night);
	background-image: radial-gradient(1200px 500px at 50% -120px, #123d73 0%, transparent 70%);
	color: var(--text);
	font: 15px/1.55 var(--body);
	-webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--tab); outline-offset: 2px; }

.page { max-width: 1120px; margin: 0 auto; padding: 28px 16px 48px; }

/* ── 머리: 창 이름표 ─────────────────────────────────────────── */
.masthead { display: flex; align-items: flex-end; gap: 18px; margin: 0 0 -6px 12px; position: relative; z-index: 1; }
.plate {
	margin: 0; padding: 10px 26px 14px;
	font: 40px/1 var(--display); letter-spacing: 0.02em; color: var(--tab-ink);
	background: linear-gradient(#ffe68a, var(--tab) 55%, #f2b81f);
	border: 4px solid var(--frame-deep); border-bottom: 0;
	border-radius: 16px 16px 0 0;
	box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.55);
}
.masthead-text { padding-bottom: 14px; }
.lede { margin: 0; font-size: 16px; }

/* ── 창 ───────────────────────────────────────────────────────── */
.window {
	background: linear-gradient(var(--frame), var(--frame-deep));
	border-radius: var(--radius-frame);
	padding: 14px;
	box-shadow: 0 0 0 3px #7a4300, 0 18px 50px rgba(0, 0, 0, 0.45);
}
.window > * { position: relative; }

.search {
	display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end;
	background: var(--panel); border-radius: var(--radius); padding: 14px;
	border: 2px solid #08305c;
}
.field { display: flex; flex-direction: column; gap: 4px; min-width: 130px; }
.field.grow { flex: 1 1 220px; }
.field-label { font: 14px var(--display); color: var(--tab); }
input[type=search], input[type=date], select {
	background: #06264b; border: 2px solid var(--line); border-radius: 10px;
	padding: 8px 10px; min-height: 40px; color: var(--text);
}
input::placeholder { color: #6f8fb6; }
input[type=date] { color-scheme: dark; min-width: 140px; }
.period { flex: 1 1 520px; }
.period-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tilde { color: var(--muted); }
.quick { display: flex; gap: 6px; margin-left: 6px; }
.quick button, .chip {
	background: #06264b; border: 2px solid var(--line); border-radius: 999px;
	padding: 3px 12px; cursor: pointer; font-size: 13px;
}
.quick button.on { background: var(--tab); color: var(--tab-ink); border-color: var(--frame-deep); }
.actions { display: flex; gap: 8px; margin-left: auto; }
.btn-primary, .btn-ghost { min-height: 40px; padding: 0 18px; border-radius: 10px; cursor: pointer; font-family: var(--display); font-size: 16px; }
.btn-primary { background: var(--tab); color: var(--tab-ink); border: 3px solid var(--frame-deep); }
.btn-ghost { background: transparent; border: 2px solid var(--line); }

.popular { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 4px 4px; }
.popular .chip { display: inline-flex; align-items: center; gap: 6px; background: #fff4cc; color: #6a3d00; border-color: var(--frame-deep); }
.popular .chip img { width: 22px; height: 22px; }

/* ── 탭: 게임 인벤토리 탭 모양 ─────────────────────────────────── */
.tabs { display: flex; gap: 6px; padding: 12px 6px 0; overflow-x: auto; }
.tabs button {
	flex: 0 0 auto;
	font: 18px var(--display); padding: 9px 20px 8px; cursor: pointer;
	background: linear-gradient(#3fa3ee, #1f74c4); color: #eaf6ff;
	border: 3px solid #0a3a6e; border-bottom: 0; border-radius: 14px 14px 0 0;
	box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.35);
}
.tabs button[aria-selected=true] { background: linear-gradient(#ffe68a, var(--tab)); color: var(--tab-ink); border-color: var(--frame-deep); }

.panel {
	background: var(--panel); border: 3px solid #0a3a6e; border-radius: 0 var(--radius) var(--radius) var(--radius);
	padding: 14px; min-height: 360px;
}
.hint { color: var(--muted); font-size: 13px; margin: 0 0 10px; }
.toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.toolbar select { min-height: 34px; padding: 4px 8px; }
.empty, .error { text-align: center; padding: 60px 16px; color: var(--muted); }
.error { color: var(--down); }

/* ── 표 ───────────────────────────────────────────────────────── */
table { width: 100%; border-collapse: separate; border-spacing: 0 4px; }
th { text-align: left; font: 14px var(--display); color: var(--tab); padding: 4px 10px; white-space: nowrap; }
th.num, td.num { text-align: right; }
tbody tr.row { background: var(--row); cursor: pointer; }
tbody tr.row:hover { background: var(--panel-hi); }
tbody tr.row.open { background: var(--panel-hi); }
td { padding: 9px 10px; vertical-align: middle; }
tbody tr.row td:first-child { border-radius: 10px 0 0 10px; }
tbody tr.row td:last-child { border-radius: 0 10px 10px 0; }
.item { display: flex; align-items: center; gap: 10px; min-width: 0; }
.icon { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 8px; background: #082b55 center/contain no-repeat; border: 1px solid #1d5c9c; }
.icon.sm { width: 26px; height: 26px; flex-basis: 26px; border-radius: 6px; }
.item-name { font-weight: 600; overflow-wrap: anywhere; }
.tag { display: inline-block; font-size: 11px; padding: 0 7px; border-radius: 999px; background: #08305c; color: var(--muted); margin-left: 6px; vertical-align: 1px; white-space: nowrap; }
.price { font: 19px var(--display); color: var(--pang); white-space: nowrap; }
.pang { color: var(--pang); white-space: nowrap; }
.muted { color: var(--muted); }
.src { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.src.auction { color: var(--auction); border-color: var(--auction); }
.src.pshop { color: var(--pshop); border-color: var(--pshop); }
.src.trade { color: var(--trade); border-color: var(--trade); }
.who { white-space: nowrap; }
.who .arrow { color: var(--muted); margin: 0 4px; }

/* 펼친 줄 */
tr.detail td { padding: 0 0 8px; }
.detail-box { background: #082b55; border: 2px solid var(--line); border-radius: 12px; padding: 14px; margin-top: -2px; }
.detail-head { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 10px; }
.kv { display: flex; flex-direction: column; }
.kv b { font: 18px var(--display); color: var(--pang); font-weight: 400; }
.kv span { font-size: 12px; color: var(--muted); }
.chart { width: 100%; height: auto; display: block; margin: 6px 0 12px; }
.chart .band { fill: rgba(255, 224, 122, 0.16); }
.chart .avg { fill: none; stroke: var(--pang); stroke-width: 2.5; }
.chart .dot { fill: var(--tab); }
.chart .bar { fill: rgba(127, 211, 255, 0.35); }
.chart .axis { fill: var(--muted); font-size: 11px; }
.chart .grid { stroke: rgba(159, 187, 220, 0.18); }
.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--muted); }
.legend i { display: inline-block; width: 14px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: 1px; }
.legend .lg-band { background: rgba(255, 224, 122, 0.3); }
.legend .lg-avg { background: var(--pang); height: 3px; vertical-align: 3px; }
.legend .lg-bar { background: rgba(127, 211, 255, 0.5); }
.mini { width: 100%; border-spacing: 0; font-size: 14px; }
.mini th { font-size: 13px; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.mini td { padding: 6px 8px; border-bottom: 1px solid rgba(42, 104, 168, 0.45); }
.mini th.num, .mini td.num { padding-right: 20px; }

/* 실시간 거래 */
.lines { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.line { display: inline-flex; align-items: center; gap: 6px; }
.barter { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center; }
.swap { color: var(--muted); font-family: var(--display); }

/* 통계 */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 14px; }
.card { background: #082b55; border: 2px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.card b { display: block; font: 24px var(--display); color: var(--pang); font-weight: 400; }
.card span { font-size: 13px; color: var(--muted); }
.split { display: flex; height: 12px; border-radius: 999px; overflow: hidden; margin-top: 8px; background: #06264b; }
.split i { display: block; height: 100%; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 12px; margin-top: 12px; }
.box { background: #082b55; border: 2px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.box h3 { margin: 0 0 8px; font: 18px var(--display); font-weight: 400; color: var(--tab); }
.rank { list-style: none; margin: 0; padding: 0; counter-reset: r; }
.rank li { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid rgba(42, 104, 168, 0.4); cursor: pointer; }
.rank li::before { counter-increment: r; content: counter(r); width: 22px; text-align: right; color: var(--muted); font-family: var(--display); }
.rank li .grow { flex: 1; min-width: 0; }
.up { color: var(--up); }
.down { color: var(--down); }

/* 페이지 */
.pager { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.pager button { min-width: 36px; height: 34px; border-radius: 9px; border: 2px solid var(--line); background: #06264b; cursor: pointer; }
.pager button[aria-current=page] { background: var(--tab); color: var(--tab-ink); border-color: var(--frame-deep); }
.pager button:disabled { opacity: 0.4; cursor: default; }
.pager .count { color: var(--muted); font-size: 13px; margin: 0 6px; }

.foot { color: var(--muted); font-size: 13px; padding: 14px 8px 0; max-width: 80ch; }
.foot p { margin: 0 0 6px; }

/* ── 좁은 화면: 표를 카드로 ──────────────────────────────────── */
@media (max-width: 760px) {
	.page { padding-top: 18px; }
	.plate { font-size: 32px; padding: 8px 18px 12px; }
	.masthead { flex-direction: column; align-items: flex-start; gap: 6px; margin-left: 0; }
	.masthead-text { padding: 0 4px 10px; }
	.window { padding: 10px; border-radius: 16px; }
	.actions { margin-left: 0; width: 100%; }
	.actions button { flex: 1; }
	.field, .field.grow, .period { flex: 1 1 100%; }
	.search label.field:has(select) { flex: 1 1 calc(50% - 6px); min-width: 0; }
	.period-row input[type=date] { flex: 1 1 0; min-width: 0; }
	.quick { margin: 4px 0 0; width: 100%; }
	.quick button { flex: 1; }
	.tabs { gap: 4px; padding: 10px 0 0; }
	.tabs button { flex: 1 1 0; padding: 8px 2px 7px; font-size: 15px; border-radius: 12px 12px 0 0; }
	table.list thead { display: none; }
	table.list, table.list tbody, table.list tr, table.list td { display: block; width: 100%; }
	table.list tr.row { border-radius: 10px; margin-bottom: 6px; padding: 8px 10px; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; }
	table.list tr.row td { padding: 0; border-radius: 0 !important; text-align: left; }
	table.list tr.row td[data-k=item] { grid-column: 1 / -1; }
	table.list tr.row td[data-k]::before { content: attr(data-label); color: var(--muted); font-size: 12px; margin-right: 6px; }
	table.list tr.row td[data-k=item]::before { content: none; }
	.who { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }