/* 상단 시세 띠: 환율·엔화·나스닥·코스피·코스닥 (오르면 빨강 ▲, 내리면 파랑 ▼) */
.market-ticker {
  display:flex; align-items:center; gap:6px; min-width:0; overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.market-ticker::-webkit-scrollbar { display:none; }
.market-ticker[hidden] { display:none !important; }
.market-chip {
  flex:none; display:inline-flex; align-items:baseline; gap:6px; padding:5px 11px;
  border:1px solid #eac9d32e; border-radius:99px; background:#00000033;
  color:#e9dbe9; font-size:12px; line-height:1.2; text-decoration:none; white-space:nowrap;
  font-variant-numeric:tabular-nums; transition:border-color .15s ease, background .15s ease;
}
.market-chip:hover { border-color:#eac9d366; background:#ffffff12; }
.market-label { color:#bfa9c8; font-size:11px; }
.market-price { color:#fbeff8; font-weight:600; }
.market-ratio { font-size:11px; font-weight:600; color:#bfa9c8; }
.market-chip[data-dir='up'] .market-ratio { color:#ff8f8f; }
.market-chip[data-dir='down'] .market-ratio { color:#86b9ff; }
/* 장중인 항목은 이름 앞에 작은 초록 점으로 실시간임을 알린다 */
.market-chip.live .market-label::before {
  content:''; display:inline-block; width:5px; height:5px; margin:0 5px 1px 0; border-radius:50%;
  background:#8fdcb7; box-shadow:0 0 5px #8fdcb7; vertical-align:middle;
}

/* 상단 첫 칸: 음악 막대와 시세 띠를 한 줄에 나란히 둔다 */
.topbar-strip { display:flex; align-items:center; gap:10px; min-width:0; }
.topbar-strip .market-ticker { flex:1 1 auto; }

/* 넓은 화면: 비서 카드가 빠진 상단 첫 칸(버튼 왼쪽 빈자리)에 둔다 */
@media (min-width:1101px) {
  .topbar .topbar-strip { grid-column:1; grid-row:1; justify-self:stretch; }
}
/* 휴대폰·태블릿: 제목·버튼 줄 아래에 한 줄로 두고, 넘치면 옆으로 밀어 본다 */
@media (max-width:1100px) {
  .topbar .topbar-strip { grid-column:1 / -1; grid-row:2; margin:0 -2px; }
  .market-chip { padding:4px 9px; font-size:11px; gap:5px; }
  .market-label, .market-ratio { font-size:10px; }
}
@media (prefers-reduced-motion:reduce) { .market-chip { transition:none; } }

/* ── 시세 차트 창: 칩을 누르면 상단 아래로 펼쳐진다(휴대폰은 아래에서 올라오는 시트) ── */
.market-chart-layer { position:fixed; inset:0; z-index:60; display:flex; justify-content:center; align-items:flex-start; padding:76px 16px 16px; background:#120c1a66; backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); animation:mc-fade .16s ease-out; }
.market-chart {
  --up:#ff8f8f; --down:#86b9ff; --ink:#fbeff8; --ink2:#cdb9d6; --muted:#9f8aa8; --line-c:#cdb9d6;
  width:min(860px,100%); display:flex; flex-direction:column; gap:12px; padding:16px 18px 12px;
  border:1px solid #e6bad544; border-radius:20px; color:var(--ink);
  background:linear-gradient(150deg,#4a3449f7,#2a2236fa); box-shadow:0 24px 60px -18px #000c, inset 0 1px #ffffff14;
  animation:mc-drop .2s cubic-bezier(.2,.8,.2,1);
}
.mc-head { display:flex; align-items:center; gap:10px; }
.mc-tabs { flex:1; display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; }
.mc-tabs::-webkit-scrollbar { display:none; }
.mc-tab { flex:none; padding:6px 12px; border:1px solid transparent; border-radius:99px; background:transparent; color:var(--ink2); font-size:13px; font-weight:600; cursor:pointer; }
.mc-tab:hover { background:#ffffff10; }
.mc-tab.on { border-color:#e8c27c88; background:#e8c27c22; color:#f6dfae; }
.mc-close { flex:none; width:32px; height:32px; border:0; border-radius:50%; background:#ffffff12; color:var(--ink2); font-size:14px; cursor:pointer; }
.mc-close:hover { background:#ffffff22; color:var(--ink); }
.mc-bar { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:10px 16px; }
.mc-summary { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; font-variant-numeric:tabular-nums; }
.mc-price { font-size:30px; font-weight:700; letter-spacing:-.5px; line-height:1.1; }
.mc-change { font-size:15px; font-weight:700; color:var(--ink2); }
.mc-summary[data-dir='up'] .mc-change { color:var(--up); }
.mc-summary[data-dir='down'] .mc-change { color:var(--down); }
.mc-basis { font-size:12px; color:var(--muted); }
.mc-ranges { display:flex; gap:2px; padding:3px; border:1px solid #ffffff14; border-radius:99px; background:#00000030; }
.mc-range { padding:6px 12px; border:0; border-radius:99px; background:transparent; color:var(--ink2); font-size:12px; font-weight:600; cursor:pointer; }
.mc-range:hover { color:var(--ink); }
.mc-range.on { background:linear-gradient(180deg,#e8c27c,#c99a52); color:#2b2030; box-shadow:0 2px 8px -3px #000a; }
.mc-plot { position:relative; height:min(46vh,380px); min-height:220px; border-radius:14px; background:#00000026; outline:none; transition:opacity .15s; touch-action:pan-y; }
.mc-plot:focus-visible { box-shadow:0 0 0 2px #e8c27c88; }
.mc-plot.loading { opacity:.55; }
.mc-plot[data-dir='up'] { --c:var(--up); }
.mc-plot[data-dir='down'] { --c:var(--down); }
.mc-plot[data-dir='flat'] { --c:var(--line-c); }
.mc-svg { display:block; cursor:crosshair; user-select:none; -webkit-user-select:none; }
.mc-empty { position:absolute; inset:0; display:grid; place-items:center; margin:0; color:var(--muted); font-size:13px; text-align:center; padding:0 20px; }
.mc-grid { stroke:#ffffff12; stroke-width:1; }
.mc-axis { fill:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; }
.mc-base { stroke:#ffffff55; stroke-width:1; stroke-dasharray:3 4; }
.mc-line { fill:none; stroke:var(--c); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.mc-grad-top { stop-color:var(--c); stop-opacity:.32; }
.mc-grad-bottom { stop-color:var(--c); stop-opacity:0; }
.mc-last { fill:var(--c); stroke:#2a2236; stroke-width:2; }
.mc-tag rect { fill:#3b2c43; stroke:#ffffff33; }
.mc-tag text { fill:var(--ink); font-size:11px; font-weight:700; font-variant-numeric:tabular-nums; }
.mc-tag-last rect { fill:var(--c); stroke:none; }
.mc-tag-last text { fill:#21182a; }
.mc-cross-line { stroke:#fbeff8aa; stroke-width:1; stroke-dasharray:4 3; pointer-events:none; }
.mc-dot { fill:var(--c); stroke:#fff; stroke-width:2; pointer-events:none; }
.mc-cross .mc-tag rect { fill:#fbeff8; stroke:none; }
.mc-cross .mc-tag text { fill:#2a2236; }
.mc-tip { position:absolute; z-index:2; display:grid; gap:1px; padding:7px 10px; border:1px solid #ffffff22; border-radius:10px; background:#1f1828f0; box-shadow:0 8px 20px -8px #000; pointer-events:none; white-space:nowrap; font-variant-numeric:tabular-nums; }
.mc-tip strong { font-size:15px; color:var(--ink); }
.mc-tip-change { font-size:12px; font-weight:700; color:var(--ink2); }
.mc-tip-change[data-dir='up'] { color:var(--up); }
.mc-tip-change[data-dir='down'] { color:var(--down); }
.mc-tip-time { font-size:11px; color:var(--muted); }
.mc-foot { min-height:16px; color:var(--muted); font-size:11px; text-align:right; }
@keyframes mc-fade { from { opacity:0; } }
@keyframes mc-drop { from { opacity:0; transform:translateY(-8px); } }
@media (max-width:700px) {
  .market-chart-layer { align-items:flex-end; padding:0; }
  .market-chart { border-radius:20px 20px 0 0; padding:14px 14px calc(12px + env(safe-area-inset-bottom)); animation-name:mc-rise; }
  .mc-price { font-size:26px; }
  .mc-ranges { width:100%; justify-content:space-between; }
  .mc-range { flex:1; padding:7px 0; }
  .mc-plot { height:min(42vh,320px); }
}
@keyframes mc-rise { from { transform:translateY(24px); opacity:0; } }
@media (prefers-reduced-motion:reduce) { .market-chart-layer, .market-chart { animation:none; } .mc-plot { transition:none; } }