/* 멀티마켓: 휴대폰(375px) 기준 단일 페이지. PC에서는 가운데 480px 폭으로 보인다. 색 값은 myAssets(app.css)와 같다. */
:root{
  --surface-0:#fcfcfb; --surface-1:#f5f4f0; --surface-2:#ffffff;
  --border:rgba(11,11,11,0.12); --border-strong:rgba(11,11,11,0.24);
  --text-primary:#0b0b0b; --text-secondary:#52514e; --text-muted:#898781;
  --radius:10px;
  --bg-accent:#e6f1fb; --border-accent:#378ADD; --text-accent:#185fa5;
  --bg-success:#eaf3de; --text-success:#3b6d11;
  --bg-danger:#fcebeb; --text-danger:#a32d2d;
  --font-sans:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Segoe UI",Roboto,"Noto Sans KR",sans-serif;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0 auto; max-width:480px; padding:0 14px calc(24px + env(safe-area-inset-bottom));
  background:var(--surface-0); color:var(--text-primary); font-family:var(--font-sans); font-size:15px;
  -webkit-tap-highlight-color:transparent;
}
body.locked{overflow:hidden;}
a{color:inherit;}
button{font-family:inherit;}

.top{padding:18px 2px 10px;}
.top h1{font-size:20px;margin:0;letter-spacing:-0.02em;}
.sub{font-size:12px;color:var(--text-muted);margin:4px 0 0;}

/* 필터 칩: 한 줄로 두고 넘치면 가로로 밀어서 본다 */
.chips{display:flex;gap:6px;overflow-x:auto;padding:4px 0;margin:0 -14px;padding-left:14px;padding-right:14px;
  scrollbar-width:none;}
.chips::-webkit-scrollbar{display:none;}
.chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 13px;border-radius:17px;
  border:0.5px solid var(--border-strong);background:var(--surface-2);text-decoration:none;font-size:14px;white-space:nowrap;}
.chip b{font-weight:600;color:var(--text-muted);font-size:12px;}
.chip.small{height:30px;font-size:13px;padding:0 11px;}
.chip.on{background:var(--bg-accent);border-color:var(--border-accent);color:var(--text-accent);}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}
.filters{display:flex;align-items:center;gap:8px;margin-top:6px;}
.signal-form{flex:1;display:flex;gap:6px;min-width:0;margin:0;}
.select{flex:1;min-width:0;height:36px;padding:0 32px 0 12px;border:0.5px solid var(--border-strong);border-radius:10px;
  font-family:inherit;font-size:15px;color:var(--text-primary);-webkit-appearance:none;appearance:none;
  background:var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2352514e' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center;}
.filters .chip{height:36px;}
.chip.on b{color:var(--text-accent);}

.empty{text-align:center;color:var(--text-muted);padding:40px 0;margin:0;}

.list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;}
.card{background:var(--surface-2);border:0.5px solid var(--border);border-radius:var(--radius);padding:12px 12px 10px;cursor:pointer;}
.card-top{display:flex;justify-content:space-between;gap:10px;}
.who{min-width:0;}
.name{display:block;font-weight:600;font-size:16px;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.meta{font-size:12px;color:var(--text-muted);}
.price{text-align:right;font-variant-numeric:tabular-nums;font-size:15px;white-space:nowrap;}
.chg{font-size:13px;color:var(--text-secondary);}
.chg.up{color:var(--text-danger);}     /* 국내 관례: 상승 빨강, 하락 파랑 */
.chg.down{color:var(--text-accent);}
.badges{margin-top:8px;display:flex;flex-wrap:wrap;gap:4px;}
.facts{margin-top:8px;display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12px;color:var(--text-muted);}
.facts .good{color:var(--text-success);font-weight:500;}
.facts .live{color:var(--text-accent);background:var(--bg-accent);border-radius:4px;padding:0 5px;font-weight:600;}
.live-note{font-size:12px;color:var(--text-accent);margin:4px 0 0;}
.facts .new{color:var(--text-danger);background:var(--bg-danger);border-radius:4px;padding:0 5px;font-weight:600;}

.sig-badge{display:inline-block;padding:4px 9px;border:none;border-radius:6px;font-size:12.5px;font-weight:500;
  line-height:1.4;cursor:pointer;}
.sig-squeeze{background:var(--bg-success);color:var(--text-success);}
.sig-broke{background:var(--bg-danger);color:var(--text-danger);}
.sig-golden{background:var(--bg-accent);color:var(--text-accent);}
.sig-pullback{background:#eeebf8;color:#4a3aa7;}
.sig-near{background:var(--surface-1);color:var(--text-secondary);}
.sig-weak{background:var(--surface-1);color:var(--text-muted);}

.help{margin:18px 0 0;font-size:13px;color:var(--text-secondary);}
.help summary{cursor:pointer;color:var(--text-primary);font-weight:500;padding:6px 0;}
.help dl{margin:6px 0;}
.help dt{font-weight:600;margin-top:8px;color:var(--text-primary);}
.help dd{margin:2px 0 0;line-height:1.55;}
.help p{line-height:1.6;}
.disclaimer{font-size:12px;font-weight:700;color:var(--text-danger);margin:6px 0 0;line-height:1.5;}

/* 근거 시트: 아래에서 올라온다 */
.sheet{position:fixed;inset:0;z-index:100;display:flex;align-items:flex-end;justify-content:center;}
.sheet[hidden]{display:none;}
.sheet-backdrop{position:absolute;inset:0;background:rgba(11,11,11,0.4);}
.sheet-panel{position:relative;width:100%;max-width:480px;max-height:90vh;overflow:auto;background:var(--surface-2);
  border-radius:16px 16px 0 0;padding:8px 16px calc(16px + env(safe-area-inset-bottom));
  box-shadow:0 -10px 40px rgba(0,0,0,0.2);animation:up .18s ease-out;}
@keyframes up{from{transform:translateY(24px);opacity:.6;}to{transform:none;opacity:1;}}
.sheet-grip{width:36px;height:4px;border-radius:2px;background:var(--border-strong);margin:0 auto 10px;}
.sheet-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;}
.sheet-head h2{font-size:17px;margin:2px 0 0;}
.sheet-sub{font-size:12px;color:var(--text-muted);}
.sheet-close{flex-shrink:0;width:36px;height:36px;border:none;background:var(--surface-1);border-radius:18px;
  font-size:20px;line-height:1;color:var(--text-secondary);cursor:pointer;}
.sheet-chart{position:relative;height:270px;margin-top:12px;}
.cond-table{width:100%;font-size:13px;border-collapse:collapse;}
.cond-table td{text-align:left;vertical-align:top;padding:8px 3px;border-bottom:0.5px solid var(--border);}
.cond-table td.cond-mark{width:20px;font-weight:600;text-align:center;}
.cond-mark.ok{color:var(--text-success);}
.cond-mark.no{color:var(--text-danger);}
.cond-mark.info{color:var(--text-muted);}
.cond-name{width:6.8em;color:var(--text-secondary);}
.cond-rule{font-size:11px;color:var(--text-muted);margin-top:2px;}