@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");

:root {
  --bg: #eef3f8;
  --surface: #ffffff;
  --ice: #e3ecf7;
  --ice-2: #cfdcee;
  --line: #d6e0ec;
  --ink: #13294b;
  --ink-2: #4a5d78;
  --ink-3: #7d8ca3;
  --navy: #13294b;
  --deep: #1f4fa0;
  --up: #d8342a;       /* 한국식: 상승 = 빨강 */
  --down: #2563eb;     /* 하락 = 파랑 */
  --ok: #138a5b;
  --warn: #b7791f;
  --radius-lg: 18px;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(19, 41, 75, .06), 0 8px 24px -12px rgba(19, 41, 75, .18);
  --c1: #1f4fa0; --c2: #5b8fd6; --c3: #13294b; --c4: #8fb3e3; --c5: #3f6fb8;
  --c6: #b0c7e8; --c7: #2a3f63; --c8: #6c87ad; --c9: #a3b5cc;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1726; --surface: #13203a; --ice: #1a2b48; --ice-2: #23395c; --line: #263a5a;
    --ink: #e6eef9; --ink-2: #a9bad3; --ink-3: #7b8daa; --navy: #dbe7f8; --deep: #7aa7ea;
    --up: #ff6b5f; --down: #5b9bff; --ok: #3ccf91;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px -14px rgba(0,0,0,.6);
    --c1: #7aa7ea; --c2: #4c7cc4; --c3: #c9dbf5; --c4: #35588f; --c5: #9cc0f2;
    --c6: #2c4675; --c7: #e0ebfa; --c8: #5e7eaa; --c9: #44607f;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0d1726; --surface: #13203a; --ice: #1a2b48; --ice-2: #23395c; --line: #263a5a;
  --ink: #e6eef9; --ink-2: #a9bad3; --ink-3: #7b8daa; --navy: #dbe7f8; --deep: #7aa7ea;
  --up: #ff6b5f; --down: #5b9bff; --ok: #3ccf91;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px -14px rgba(0,0,0,.6);
  --c1: #7aa7ea; --c2: #4c7cc4; --c3: #c9dbf5; --c4: #35588f; --c5: #9cc0f2;
  --c6: #2c4675; --c7: #e0ebfa; --c8: #5e7eaa; --c9: #44607f;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--ink);
  font-family: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 15px; line-height: 1.6; letter-spacing: -0.01em; -webkit-font-smoothing: antialiased;
  word-break: keep-all; overflow-wrap: break-word;
}
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--deep); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
.muted { color: var(--ink-3); }
.small { font-size: 13px; }
.up { color: var(--up); } .down { color: var(--down); }
mark { background: color-mix(in srgb, var(--deep) 22%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }

.topbar { display: flex; align-items: center; justify-content: space-between; max-width: 960px; margin: 0 auto; padding: 14px 16px; }
.brand { display: flex; gap: 8px; align-items: center; font-weight: 700; font-size: 18px; color: var(--ink); text-decoration: none; }
.brand-mark { width: 26px; height: 26px; border-radius: 50%; background: var(--navy); display: grid; place-items: center; }
.brand-mark svg { width: 15px; height: 15px; }
.icon-btn { border: 1px solid var(--line); background: var(--surface); color: var(--ink); padding: 0; border-radius: 50%; width: 36px; height: 36px; display: grid; place-items: center; cursor: pointer; }
.icon-btn:hover { border-color: var(--deep); }

main { max-width: 960px; margin: 0 auto; padding: 4px 16px 48px; }
h1 { font-size: 30px; margin: 10px 0 6px; letter-spacing: -0.03em; line-height: 1.25; }
h2 { font-size: 22px; margin: 0; letter-spacing: -0.02em; line-height: 1.3; }
h3 { font-size: 16px; margin: 0 0 12px; }
.lede { color: var(--ink-2); margin: 0 0 18px; max-width: 560px; }
.lede b { color: var(--ink); font-weight: 600; }

/* 검색 */
.search { position: relative; }
.search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.search input { width: 100%; height: 52px; padding: 0 14px 0 46px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface); font-size: 16px; box-shadow: var(--shadow); transition: border-color .15s, box-shadow .15s; -webkit-appearance: none; appearance: none; }
.search input::placeholder { color: var(--ink-3); }
.search input:focus { outline: none; border-color: var(--deep); box-shadow: 0 0 0 4px color-mix(in srgb, var(--deep) 16%, transparent), var(--shadow); }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; height: 18px; width: 18px; margin-left: 8px; cursor: pointer; opacity: .55;
  background: no-repeat center / 10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 1l8 8M9 1L1 9' stroke='%237d8ca3' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); border-radius: 50%; }
.suggest { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 32px -12px rgba(19, 41, 75, .35); max-height: min(344px, 55vh); overflow-y: auto; overscroll-behavior: contain; scroll-padding: 6px; }
.suggest li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; min-height: 44px; border-radius: 10px; cursor: pointer; }
.suggest li[aria-selected="true"], .suggest li[data-i]:hover { background: var(--ice); }
.sug-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sug-meta { display: flex; align-items: center; gap: 8px; flex: none; font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.mk { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--ice); color: var(--ink-2); letter-spacing: 0; }
.suggest li.sug-empty { display: grid; gap: 2px; cursor: default; color: var(--ink-2); }
.sug-empty small { color: var(--ink-3); font-size: 13px; }

.quick { margin: 14px 0 20px; display: grid; gap: 8px; }
.quick-row { display: flex; gap: 10px; align-items: baseline; }
.quick-row > span { flex: none; font-size: 13px; color: var(--ink-3); width: 28px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 5px 13px; font-size: 13px; cursor: pointer; line-height: 1.4; }
.chip:hover { border-color: var(--deep); color: var(--deep); }
.chip.static { cursor: default; background: var(--ice); border-color: transparent; color: var(--ink-2); }
.chip.static:hover { color: var(--ink-2); border-color: transparent; }

/* 패널 */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 16px; box-shadow: var(--shadow); }
.panel.error { border-color: color-mix(in srgb, var(--up) 40%, var(--line)); }
.panel.error b { color: var(--up); }
.panel.error p { margin: 4px 0 0; color: var(--ink-2); }
.panel.training { display: flex; gap: 16px; align-items: flex-start; }
.panel.training p { margin: 6px 0 0; }
.panel.training .step { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.panel.intro ol { margin: 0 0 14px; padding-left: 20px; color: var(--ink-2); display: grid; gap: 4px; }
.panel.intro li b { color: var(--ink); }
.spinner { flex: none; width: 22px; height: 22px; margin-top: 2px; border: 3px solid var(--ice-2); border-top-color: var(--deep); border-radius: 50%; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn { margin-top: 12px; border: 1px solid var(--deep); background: transparent; color: var(--deep); border-radius: 10px; padding: 7px 16px; cursor: pointer; font-weight: 600; font-size: 14px; }
.btn:hover { background: var(--ice); }
.notice { background: var(--ice); border: 1px solid var(--ice-2); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 12px; font-size: 14px; }
.skel .s { background: linear-gradient(90deg, var(--ice) 25%, var(--ice-2) 37%, var(--ice) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: 8px; }
.skel .s1 { height: 26px; width: 40%; margin-bottom: 10px; } .skel .s2 { height: 34px; width: 28%; margin-bottom: 18px; } .skel .s3 { height: 170px; border-radius: 12px; }
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* 결과 */
.head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 16px; }
.title { min-width: 0; }
.sub { display: flex; gap: 8px; align-items: center; font-size: 14px; font-variant-numeric: tabular-nums; }
.price { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.3; margin-top: 6px; }
.regime { display: grid; text-align: right; padding: 8px 14px; border-radius: var(--radius); background: var(--ice); flex: none; }
.regime.up b { color: var(--up); } .regime.down b { color: var(--down); }

.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 12px; }
.card { border: 1px solid var(--line); border-top: 3px solid var(--ice-2); border-radius: var(--radius); padding: 14px; display: grid; gap: 8px; align-content: start; min-width: 0; container-type: inline-size; }
.card.up { border-top-color: var(--up); } .card.down { border-top-color: var(--down); }
.card-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.card-label { font-weight: 700; }
.pctile { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.pctile b { font-size: 24px; font-variant-numeric: tabular-nums; line-height: 1.2; }
.bar { height: 6px; background: var(--ice); border-radius: 3px; overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--deep); border-radius: 3px; }
dl { margin: 0; display: grid; gap: 4px; font-size: 13px; }
dl > div { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
dt { color: var(--ink-3); flex: none; } dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
dd small { font-size: 12px; opacity: .85; }
dd .br { display: none; }
.note { margin: 0; }
@container (max-width: 260px) {
  dl > div { flex-direction: column; gap: 0; align-items: flex-start; }
  dd { text-align: left; }
  dd .br { display: inline; } dd .tilde { display: none; }
}

.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--ice); color: var(--ink-2); justify-self: start; white-space: nowrap; }
.badge.up { background: color-mix(in srgb, var(--up) 14%, transparent); color: var(--up); }
.badge.down { background: color-mix(in srgb, var(--down) 14%, transparent); color: var(--down); }
.badge.ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.badge.warn { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.badge.bad { background: color-mix(in srgb, var(--ink-3) 18%, transparent); color: var(--ink-2); }

.chart-box { position: relative; height: 320px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
th { color: var(--ink-3); font-weight: 600; font-size: 13px; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
details { margin-top: 14px; }
summary { cursor: pointer; color: var(--deep); font-size: 14px; }
details ul { padding-left: 18px; color: var(--ink-2); }
.foot { margin-top: 28px; font-size: 12px; color: var(--ink-3); }

/* 태블릿·모바일 */
@media (max-width: 820px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  main { padding: 0 14px 40px; }
  h1 { font-size: 26px; }
  .panel { padding: 16px; border-radius: 16px; }
  .head { flex-direction: column; gap: 12px; }
  .regime { text-align: left; width: 100%; grid-auto-flow: column; justify-content: space-between; align-items: center; padding: 8px 12px; }
  .price { font-size: 26px; }
  .cards { gap: 10px; }
  .card { padding: 12px; gap: 6px; }
  .pctile b { font-size: 22px; }
  .chart-box { height: 260px; }
  /* 검증 표: 가로 스크롤 대신 기간별 카드로 */
  table.val thead { display: none; }
  table.val, table.val tbody, table.val tr, table.val td { display: block; width: 100%; }
  table.val tr { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; margin-bottom: 10px; }
  table.val td { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; border: 0; white-space: normal; }
  table.val td::before { content: attr(data-label); color: var(--ink-3); font-size: 13px; }
  table.val td:first-child { padding-bottom: 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
  table.val td:first-child::before { content: none; }
}
@media (max-width: 360px) { .cards { grid-template-columns: 1fr; } }