/* JMT
   레이아웃: 맨 위에 기간별 적중률 한 장 → 세 칸(어제 | 오늘 장전 | 오늘 장중). 휴대폰에서는 오늘이 먼저 오도록 한 줄로 쌓는다.
   색: 밝은 회색 바탕 위의 흰 카드, 파란 강조 하나. 오름은 빨강 · 내림은 파랑(국내 관행), 적중은 초록으로 따로 둔다. */
:root {
  --bg: #f2f4f6;
  --card: #ffffff;
  --fill: #f2f4f6;
  --fg: #191f28;
  --sub: #4e5968;
  --weak: #8b95a1;
  --faint: #d1d6db;
  --line: #e5e8eb;
  --accent: #3182f6;
  --accent-soft: #e8f3ff;
  --on-accent: #ffffff;
  --up: #f04452;
  --down: #3182f6;
  --good: #03a865;
  --good-soft: #e3f7ee;
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
          "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
  --radius: 22px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #101013; --card: #1b1b21; --fill: #26262e; --fg: #ececef; --sub: #c3c3c9; --weak: #8e8e98;
    --faint: #4a4a55; --line: #2c2c35; --accent: #4f9bff; --accent-soft: #1c2c44; --on-accent: #ffffff;
    --up: #ff5f6b; --down: #5aa2ff; --good: #2fcf8b; --good-soft: #15372a; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #101013; --card: #1b1b21; --fill: #26262e; --fg: #ececef; --sub: #c3c3c9; --weak: #8e8e98;
  --faint: #4a4a55; --line: #2c2c35; --accent: #4f9bff; --accent-soft: #1c2c44; --on-accent: #ffffff;
  --up: #ff5f6b; --down: #5aa2ff; --good: #2fcf8b; --good-soft: #15372a; color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font);
  font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; word-break: keep-all;
}
.ms-page { max-width: 1200px; margin: 0 auto; padding-inline: 20px; padding-block: 20px 48px; display: flex; flex-direction: column; gap: 16px; }
.ms-num { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }

/* 머리 */
.ms-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-block: 4px; }
.ms-brand { font-size: 21px; font-weight: 800; letter-spacing: -0.03em; display: flex; align-items: center; gap: 8px; margin: 0; }
.ms-brand i { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); display: inline-block; }
.ms-tabs { display: inline-flex; background: var(--line); border-radius: 12px; padding: 3px; gap: 2px; }
.ms-tab { padding: 7px 18px; border-radius: 10px; font-weight: 700; font-size: 15px; color: var(--weak); text-decoration: none; }
.ms-tab[aria-current="page"] { background: var(--card); color: var(--fg); }
.ms-asof { margin-left: auto; color: var(--weak); font-size: 13px; }
.ms-ribbon { background: var(--accent-soft); color: var(--accent); border-radius: 14px; padding: 10px 16px; font-size: 13.5px; font-weight: 600; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.ms-ribbon button { margin-left: auto; font: inherit; font-weight: 700; color: var(--on-accent); background: var(--accent); border: 0; border-radius: 10px; padding: 6px 12px; cursor: pointer; }

/* 카드 */
.ms-card { background: var(--card); border-radius: var(--radius); padding: 22px; min-width: 0; }
.ms-card h2 { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
.ms-card h3 { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.ms-sub { color: var(--weak); font-size: 13px; margin: 2px 0 0; }
.ms-head { display: flex; align-items: flex-start; gap: 10px; }
.ms-head > div { min-width: 0; flex: 1; }
.ms-pill { flex: none; font-size: 12.5px; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: var(--fill); color: var(--sub); white-space: nowrap; }
.ms-pill.is-good { background: var(--good-soft); color: var(--good); }
.ms-pill.is-accent { background: var(--accent-soft); color: var(--accent); }
.ms-pill.is-miss { background: var(--fill); color: var(--fg); }
.ms-sell { display: block; margin-top: 3px; font-size: 12px; font-weight: 700; }
.ms-sell.is-up { color: var(--good); }
.ms-sell.is-down { color: var(--sub); }
.ms-pill.is-grade { margin-left: 8px; font-size: 12px; padding: 3px 9px; vertical-align: 1px; }
.ms-pill.is-grade-top { background: var(--good); color: #fff; }
.ms-pill.is-grade-good { background: var(--good-soft); color: var(--good); }
.ms-pill.is-grade-mid { background: var(--fill); color: var(--sub); }
.ms-pill.is-grade-low { background: var(--fill); color: var(--sub); opacity: .7; }

/* 기간별 적중률 */
.ms-range { display: flex; flex-direction: column; gap: 18px; }
.ms-range-bar { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.ms-range-bar h2 { margin-right: auto; }
.ms-dates { display: flex; align-items: center; gap: 6px; color: var(--weak); min-width: 0; max-width: 100%; }
.ms-dates input { font: inherit; font-size: 14px; font-weight: 600; color: var(--fg); background: var(--fill); border: 0; border-radius: 10px; padding: 8px 10px; min-width: 0; flex: 1 1 auto; max-width: 100%; }
.ms-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ms-chip { font: inherit; font-size: 13px; font-weight: 700; color: var(--sub); background: var(--fill); border: 0; border-radius: 999px; padding: 7px 12px; cursor: pointer; }
.ms-chip[aria-pressed="true"] { background: var(--fg); color: var(--card); }
.ms-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ms-star { font-style: normal; font-size: 10px; color: var(--weak); margin-left: 4px; vertical-align: 1px; opacity: .8; }
.ms-stats.is-many { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.ms-stat { background: var(--fill); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ms-stat-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ms-stat-label { font-weight: 700; color: var(--sub); font-size: 14px; }
.ms-stat-big { font-size: 34px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.ms-stat-big small { font-size: 16px; font-weight: 700; color: var(--weak); margin-left: 2px; }
.ms-stat-rows { display: flex; gap: 6px 18px; flex-wrap: wrap; color: var(--sub); font-size: 13.5px; }
.ms-stat-rows b { color: var(--fg); font-weight: 700; }
.ms-strip { display: flex; gap: 4px; flex-wrap: wrap; }
.ms-strip i { width: 14px; height: 14px; border-radius: 4px; background: var(--faint); display: block; }
.ms-strip i.is-good { background: var(--good); }
.ms-strip i.is-rest { background: transparent; box-shadow: inset 0 0 0 1.5px var(--faint); }
.ms-strip i.is-rest.is-good { background: transparent; box-shadow: inset 0 0 0 2.5px var(--good); }
.ms-strip i.is-rest.is-miss { background: transparent; box-shadow: inset 0 0 0 2.5px var(--weak); }

/* 세 칸 */
.ms-cols { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.ms-cols.is-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ms-cols.is-one { grid-template-columns: minmax(0, 1fr); }
.ms-fold { display: flex; flex-direction: column; gap: 12px; }
.ms-fold > summary { list-style: none; cursor: pointer; padding: 12px 6px; border-radius: 12px; }
.ms-fold > summary::-webkit-details-marker { display: none; }
.ms-fold > summary:hover { background: var(--fill); }
.ms-caret { margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--weak); border-bottom: 2px solid var(--weak); transform: rotate(45deg); align-self: center; transition: transform .15s; }
.ms-fold[open] > summary .ms-caret { transform: rotate(-135deg); }
.ms-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ms-col-title { font-size: 14px; font-weight: 700; color: var(--weak); padding: 0 6px; display: flex; gap: 8px; align-items: baseline; }
.ms-col-title b { color: var(--fg); font-size: 16px; font-weight: 800; letter-spacing: -0.02em; }
.ms-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ms-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; min-width: 0; }
.ms-rank { flex: none; width: 22px; text-align: center; color: var(--weak); font-weight: 700; font-size: 14px; }
.ms-name { min-width: 0; flex: 1; }
.ms-name b { display: block; font-weight: 700; font-size: 15.5px; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.ms-name span { color: var(--weak); font-size: 12.5px; }
.ms-ret { flex: none; text-align: right; font-weight: 700; font-size: 15.5px; }
.ms-ret.is-up { color: var(--up); }
.ms-ret.is-down { color: var(--down); }
.ms-mark { flex: none; width: 54px; text-align: center; font-size: 12px; font-weight: 700; padding: 4px 0; border-radius: 8px; background: var(--fill); color: var(--weak); }
.ms-mark.is-hit { background: var(--good-soft); color: var(--good); }

/* 빈 상태: 선별 중 · 쉬는 날 · 준비 중 */
.ms-state { margin-top: 16px; background: var(--fill); border-radius: 18px; padding: 22px 18px; display: flex; flex-direction: column; gap: 6px; }
.ms-state b { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; }
.ms-state p { margin: 0; color: var(--sub); font-size: 14px; }
.ms-state p.ms-verdict { margin-top: 6px; color: var(--fg); font-weight: 700; }
.ms-state p.ms-verdict.is-good { color: var(--good); }
.ms-idx { display: flex; gap: 12px; flex-wrap: wrap; padding: 0 6px; margin-top: -4px; color: var(--weak); font-size: 13px; }
.ms-idx b { font-weight: 700; color: var(--sub); }
.ms-idx b.is-up { color: var(--up); }
.ms-idx b.is-down { color: var(--down); }
.ms-dots { display: inline-flex; gap: 5px; margin-bottom: 6px; }
.ms-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: ms-bounce 1.2s infinite ease-in-out; }
.ms-dots i:nth-child(2) { animation-delay: .15s; } .ms-dots i:nth-child(3) { animation-delay: .3s; }
.ms-skel { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.ms-skel i { height: 14px; border-radius: 7px; background: var(--fill); display: block; }
.ms-skel i:nth-child(2) { width: 82%; } .ms-skel i:nth-child(3) { width: 64%; }
@keyframes ms-bounce { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .ms-dots i { animation: none; opacity: .6; } }

.ms-note { color: var(--weak); font-size: 12.5px; line-height: 1.6; padding: 0 6px; margin: 0; max-width: 70ch; }

@media (max-width: 900px) {
  .ms-cols, .ms-cols.is-two { grid-template-columns: minmax(0, 1fr); }      /* 휴대폰은 한 줄씩 위아래로(사용자 10/22) */
  .ms-stats, .ms-stats.is-many { grid-template-columns: minmax(0, 1fr); }
  .ms-page { padding-inline: 16px; }
  .ms-card { padding: 18px; }
  .ms-range-bar h2 { width: 100%; }
  .ms-asof { margin-left: 0; width: 100%; }
}

/* 마이페이지 · 로그인 (2026-10-16) */
.ms-me { font-size: 12.5px; font-weight: 700; color: var(--weak); text-decoration: none; padding: 5px 10px; border-radius: 999px; background: var(--fill); }
.ms-me:hover, .ms-me[aria-current="page"] { color: var(--fg); background: var(--line); }
.ms-top .ms-me { margin-left: 4px; }
.ms-auth { max-width: 420px; width: 100%; margin: 24px auto 0; }
.ms-form { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.ms-form label { font-size: 13px; font-weight: 700; color: var(--sub); display: flex; flex-direction: column; gap: 6px; }
.ms-form input { font: inherit; font-size: 16px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--fill); color: var(--fg); min-width: 0; }
.ms-form input:focus { outline: 2px solid var(--accent); border-color: transparent; }
.ms-btn { font: inherit; font-weight: 700; font-size: 15px; padding: 11px 16px; border: 0; border-radius: 12px; background: var(--accent); color: var(--on-accent); cursor: pointer; }
.ms-btn.is-soft { background: var(--accent-soft); color: var(--accent); }
.ms-btn.is-ghost { background: var(--fill); color: var(--sub); }
.ms-btn[disabled] { opacity: .55; cursor: default; }
.ms-inline { display: flex; gap: 8px; align-items: flex-end; }
.ms-inline label { flex: 1; }
.ms-msg { font-size: 13px; margin: 2px 0 0; color: var(--sub); min-height: 1.2em; }
.ms-msg.is-bad { color: var(--up); }
.ms-msg.is-good { color: var(--good); }
#ms-body { min-width: 0; display: flex; flex-direction: column; gap: 16px; }   /* 마이페이지 — 넓은 표가 화면 밖으로 밀지 않게 */
.ms-seg { display: inline-flex; background: var(--line); border-radius: 12px; padding: 3px; gap: 2px; max-width: 100%; }
.ms-seg button { font: inherit; font-weight: 700; font-size: 14px; padding: 7px 16px; border: 0; border-radius: 10px; background: transparent; color: var(--weak); cursor: pointer; white-space: nowrap; }
.ms-seg button[aria-selected="true"] { background: var(--card); color: var(--fg); }
.ms-seg.is-big button { font-size: 15px; padding: 8px 24px; }
.ms-seg.is-in { background: var(--fill); margin-top: 14px; } .ms-seg.is-in button[aria-selected="true"] { background: var(--fg); color: var(--card); }
.ms-table tr.ms-dayrow th { font-size: 13px; color: var(--fg); padding-top: 16px; border-bottom: 1px solid var(--line); }
.ms-table tr.ms-dayrow:first-child th { padding-top: 6px; }
.ms-table td small { display: block; color: var(--weak); font-size: 12px; }
.ms-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.ms-kpi { background: var(--fill); border-radius: 14px; padding: 12px 14px; min-width: 0; }
.ms-kpi small { display: block; font-size: 12px; font-weight: 700; color: var(--weak); }
.ms-kpi b { display: block; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-kpi span { font-size: 12px; color: var(--sub); }
.is-plus { color: var(--up); } .is-minus { color: var(--down); }
.ms-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14px; }
.ms-table th { text-align: left; font-size: 12px; color: var(--weak); font-weight: 700; padding: 6px 4px; border-bottom: 1px solid var(--line); }
.ms-table td { padding: 9px 4px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ms-table td.r, .ms-table th.r { text-align: right; }
.ms-empty { color: var(--weak); font-size: 13.5px; margin: 12px 0 0; }
.ms-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .ms-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ms-grid2 { grid-template-columns: 1fr; } .ms-table { font-size: 13px; } }

/* Shared web/app settings, using the existing website controls. */
#shared-settings fieldset { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
#shared-settings select { font: inherit; font-size: 16px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--fill); color: var(--fg); }
#shared-settings select:focus { outline: 2px solid var(--accent); }
#shared-settings .ms-setting-toggle { flex-direction: row; align-items: center; min-height: 44px; }
#shared-settings input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--accent); }
.ms-seg button[data-market][aria-pressed=true] { background: var(--card); color: var(--fg); }
@media (max-width: 540px) { #shared-settings fieldset { grid-template-columns: 1fr; } }