/* ===== existing ===== */
.bar{display:flex;gap:8px;align-items:flex-start;margin-bottom:12px;flex-wrap:wrap}
.badges{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-start}

.tag,.sbadge{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border:1px solid var(--br);border-radius:8px;font-size:11px;color:#cfddf0;position:relative;white-space:nowrap}
.tag{background:var(--tag)} .sbadge{background:var(--tag2)}
.tag:hover::after,.sbadge:hover::after,.btype:hover::after,.bside:hover::after,.pill:hover::after{
  content:attr(data-tip); position:absolute; left:0; top:125%;
  background:#0b1322; border:1px solid #253044; border-radius:10px; padding:10px 12px;
  color:#dbe8ff; width:max-content; max-width:240px; line-height:1.45; z-index:100; box-shadow:0 10px 24px rgba(0,0,0,.35);
  white-space:nowrap; overflow:hidden
}

.btype{border-radius:999px; padding:3px 10px; font-weight:600; font-size:11px; display:inline-flex; align-items:center; gap:6px; border:1px solid var(--br); position:relative}
.btype-CC{background:#0f2734;color:#bfe9ff}
.btype-CSPREAD{background:#182a1f;color:#c7f7d9}
.btype-PSPREAD{background:#2a1a1a;color:#ffd1d1}
.btype-DIA{background:#241b2f;color:#e3d6ff}
.btype-SYN{background:#1f2634;color:#e6f0ff}

.bside{border-radius:999px; padding:3px 10px; font-weight:700; font-size:11px; display:inline-flex; align-items:center; gap:6px; border:1px solid var(--br); position:relative}
.bside-S{background:#2a1717;color:#ffbdbd}
.bside-B{background:#0f2a21;color:#bdfce0}
.bside-CR{background:#102c19;color:#c6ffd9}
.bside-DB{background:#2c1a10;color:#ffd0b9}

.pill{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border:1px solid var(--br);border-radius:999px;background:#0f1b2b;font-size:11px;position:relative}
.pill.good{background:#0f271f;border-color:#1d3b2f;color:#a7f3c3}
.pill.bad{background:#2a1212;border-color:#3a1a1a;color:#ffb3b3}

/* ========== A) 제목/라벨 가독성 강화 ========== */
.card-title{color:#e6f0ff;font-weight:800}
.label{color:#cfe0ff}

/* ========== B) 테이블 선(내부+외곽) 완전 제거 ========== */
#tr, #h{
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background-clip: padding-box;
}
#tr thead, #tr tbody, #tr tfoot,
#h thead,  #h tbody,  #h tfoot{
  border: none !important;
}
#tr th, #tr td, #h th, #h td{
  border: none !important;
  border-bottom: none !important;
}
#tr tfoot td, #h tfoot td{
  border-top: none !important;
}
.wrap table#tr, .wrap table#h{
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* table horizontal scroll wrapper (mobile-first friendly) */
.table-wrap{
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
}

.table-wrap > table{
  min-width: 860px; /* 컬럼 많은 테이블은 최소폭 줘야 스크롤이 “확실히” 생김 */
}

/* 모바일에서는 줄바꿈 금지(= 세로로 길게 늘어나는 원인 차단) */
@media (max-width: 768px){
  #tr th, #tr td,
  #h  th, #h  td{
    white-space: nowrap;

    /* ✅ Group-1 모바일 체감으로 고정 */
    padding: 10px 10px;
    font-size: 13px;
    line-height: 1.55;
    vertical-align: top;
  }
}




/* ========== C) 정렬 화살표(작게) 표시 ========== */
#tr th[data-key], #h th[data-key]{
  position: relative;
  padding-right: 16px;
  user-select: none;
}
#tr th[data-key]::after, #h th[data-key]::after{
  content: "↕";
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  opacity: .35;
}

/* 활성 컬럼(Trades) */
#tr[data-sort-key="date"][data-sort-dir="asc"]     th[data-key="date"]::after{ content:"▲"; opacity:.9; }
#tr[data-sort-key="date"][data-sort-dir="desc"]    th[data-key="date"]::after{ content:"▼"; opacity:.9; }

#tr[data-sort-key="expiry"][data-sort-dir="asc"]   th[data-key="expiry"]::after{ content:"▲"; opacity:.9; }
#tr[data-sort-key="expiry"][data-sort-dir="desc"]  th[data-key="expiry"]::after{ content:"▼"; opacity:.9; }

#tr[data-sort-key="type"][data-sort-dir="asc"]     th[data-key="type"]::after{ content:"▲"; opacity:.9; }
#tr[data-sort-key="type"][data-sort-dir="desc"]    th[data-key="type"]::after{ content:"▼"; opacity:.9; }

#tr[data-sort-key="legs"][data-sort-dir="asc"]     th[data-key="legs"]::after{ content:"▲"; opacity:.9; }
#tr[data-sort-key="legs"][data-sort-dir="desc"]    th[data-key="legs"]::after{ content:"▼"; opacity:.9; }

#tr[data-sort-key="side"][data-sort-dir="asc"]     th[data-key="side"]::after{ content:"▲"; opacity:.9; }
#tr[data-sort-key="side"][data-sort-dir="desc"]    th[data-key="side"]::after{ content:"▼"; opacity:.9; }

#tr[data-sort-key="qty"][data-sort-dir="asc"]      th[data-key="qty"]::after{ content:"▲"; opacity:.9; }
#tr[data-sort-key="qty"][data-sort-dir="desc"]     th[data-key="qty"]::after{ content:"▼"; opacity:.9; }

#tr[data-sort-key="pin"][data-sort-dir="asc"]      th[data-key="pin"]::after{ content:"▲"; opacity:.9; }
#tr[data-sort-key="pin"][data-sort-dir="desc"]     th[data-key="pin"]::after{ content:"▼"; opacity:.9; }

#tr[data-sort-key="pout"][data-sort-dir="asc"]     th[data-key="pout"]::after{ content:"▲"; opacity:.9; }
#tr[data-sort-key="pout"][data-sort-dir="desc"]    th[data-key="pout"]::after{ content:"▼"; opacity:.9; }

#tr[data-sort-key="settle"][data-sort-dir="asc"]   th[data-key="settle"]::after{ content:"▲"; opacity:.9; }
#tr[data-sort-key="settle"][data-sort-dir="desc"]  th[data-key="settle"]::after{ content:"▼"; opacity:.9; }

#tr[data-sort-key="badges"][data-sort-dir="asc"]   th[data-key="badges"]::after{ content:"▲"; opacity:.9; }
#tr[data-sort-key="badges"][data-sort-dir="desc"]  th[data-key="badges"]::after{ content:"▼"; opacity:.9; }

/* 활성 컬럼(Holdings) */
#h[data-sort-key="expiry"][data-sort-dir="asc"]    th[data-key="expiry"]::after{ content:"▲"; opacity:.9; }
#h[data-sort-key="expiry"][data-sort-dir="desc"]   th[data-key="expiry"]::after{ content:"▼"; opacity:.9; }

#h[data-sort-key="dte"][data-sort-dir="asc"]       th[data-key="dte"]::after{ content:"▲"; opacity:.9; }
#h[data-sort-key="dte"][data-sort-dir="desc"]      th[data-key="dte"]::after{ content:"▼"; opacity:.9; }

#h[data-sort-key="type"][data-sort-dir="asc"]      th[data-key="type"]::after{ content:"▲"; opacity:.9; }
#h[data-sort-key="type"][data-sort-dir="desc"]     th[data-key="type"]::after{ content:"▼"; opacity:.9; }

#h[data-sort-key="side"][data-sort-dir="asc"]      th[data-key="side"]::after{ content:"▲"; opacity:.9; }
#h[data-sort-key="side"][data-sort-dir="desc"]     th[data-key="side"]::after{ content:"▼"; opacity:.9; }

#h[data-sort-key="strike"][data-sort-dir="asc"]    th[data-key="strike"]::after{ content:"▲"; opacity:.9; }
#h[data-sort-key="strike"][data-sort-dir="desc"]   th[data-key="strike"]::after{ content:"▼"; opacity:.9; }

#h[data-sort-key="qty"][data-sort-dir="asc"]       th[data-key="qty"]::after{ content:"▲"; opacity:.9; }
#h[data-sort-key="qty"][data-sort-dir="desc"]      th[data-key="qty"]::after{ content:"▼"; opacity:.9; }

#h[data-sort-key="itm"][data-sort-dir="asc"]       th[data-key="itm"]::after{ content:"▲"; opacity:.9; }
#h[data-sort-key="itm"][data-sort-dir="desc"]      th[data-key="itm"]::after{ content:"▼"; opacity:.9; }

#h[data-sort-key="itmpct"][data-sort-dir="asc"]    th[data-key="itmpct"]::after{ content:"▲"; opacity:.9; }
#h[data-sort-key="itmpct"][data-sort-dir="desc"]   th[data-key="itmpct"]::after{ content:"▼"; opacity:.9; }

#h[data-sort-key="notional"][data-sort-dir="asc"]  th[data-key="notional"]::after{ content:"▲"; opacity:.9; }
#h[data-sort-key="notional"][data-sort-dir="desc"] th[data-key="notional"]::after{ content:"▼"; opacity:.9; }

#h[data-sort-key="potcash"][data-sort-dir="asc"]   th[data-key="potcash"]::after{ content:"▲"; opacity:.9; }
#h[data-sort-key="potcash"][data-sort-dir="desc"]  th[data-key="potcash"]::after{ content:"▼"; opacity:.9; }

/* 활성 컬럼 텍스트 강조 */
#tr[data-sort-key] th[data-key], #h[data-sort-key] th[data-key]{ color:#d5e6ff; }
#tr[data-sort-key] th[data-key].active, #h[data-sort-key] th[data-key].active{ color:#e6f0ff; font-weight:700; }

/* 날짜 선택 드롭다운 타이트화 */
#sec-tr .controls #trFilter{
  display:inline-block;
  width:auto !important;
  max-width:180px;
  padding:6px 10px;
  font-size:13px;
  line-height:1.2;
  white-space:nowrap;
  vertical-align:middle;

  /* ✅ 요청: 바탕 흰색 */
  background:#ffffff;
  color:#0b1220;
  border:1px solid #cbd5e1;
  border-radius:10px;
}

/* 옵션도 흰 배경으로(일부 브라우저에서 필요) */
#sec-tr .controls #trFilter option{
  background:#ffffff;
  color:#0b1220;
}

#sec-tr .controls{ gap:8px; }

/* base button */
.qbtn{
  background:#132840;
  border:1px solid #1f3a5f;
  border-radius:999px;
  padding:12px 20px;          /* ← 크게 */
  color:#ffffff;
  text-decoration:none;
  font-size:17px;             /* ← 가독성 */
  font-weight:800;
  line-height:1;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:background .15s ease, transform .1s ease;
}

.qbtn:hover{
  background:#1b3a60;
  transform:translateY(-1px);
  filter:brightness(1.08);
}

/* back button (semantic hook only) */
.qbtn-back{
  /* 현재는 qbtn과 동일, 추후 차별 가능 */
}

.spacer{ flex:1; min-width:12px; }
@media(max-width:720px){
  .spacer{ display:none; }
}

/* Full fund name - readable */
#fundName.ymx-title{
  margin: 6px 0 12px 0;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 800;
  color: #ffffff;          /* “진한 흰색” */
  letter-spacing: 0.2px;
  text-shadow: 0 1px 2px rgba(0,0,0,.45); /* 어두운 배경에서 더 선명 */
}

.bar-right .bar-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

.quicknav .qgroup{ height:34px; display:inline-flex; align-items:center; }

/* ===== Top bar layout: prevent overlap ===== */
.bar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;           /* ✅ 모바일 겹침 방지 핵심 */
}

.bar-left{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}

.bar-right{
  margin-left:auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:8px;
}

/* Income source note: outside bar, readable */
.bar-note{
  margin-top:8px;
  font-size:13px;
  line-height:1.35;
  color:#cfe0ff;
  opacity:.9;
}

/* dropdown click/touch stability */
.quicknav #tickerSel{
  pointer-events:auto;
  position:relative;
  z-index:2;
}

/* ===== FINAL: quicknav (Group badge + ticker dropdown) ===== */
.quicknav{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;           /* ✅ 데스크탑: 한 줄 유지 */
}

.quicknav .spacer{ flex:1; min-width:12px; }

.quicknav .qgroup{
  height:30px;
  display:inline-flex;
  align-items:center;
}

/* ===== ticker dropdown: match Hub button size + white background ===== */
.quicknav #tickerSel{
  width:auto;
  flex:0 0 auto;
  min-width:160px;          /* 너무 쪼그라들지 않게 */
  max-width:240px;

  height:44px;              /* qbtn(12px padding) 느낌으로 키움 */
  font-size:16px;
  font-weight:800;
  line-height:1;

  padding:10px 14px;        /* 버튼처럼 두툼하게 */
  margin-left:8px;

  background:#ffffff;       /* ✅ 요청: 흰 배경 */
  color:#0b1220;            /* ✅ 어두운 글자 */
  border:1px solid #cbd5e1;
  border-radius:999px;      /* qbtn처럼 pill */
  appearance:auto;
}

/* 옵션도 흰 배경 유지(브라우저별 편차 방지) */
.quicknav #tickerSel option{
  background:#ffffff;
  color:#0b1220;
}

/* 포커스 때도 깔끔하게 */
.quicknav #tickerSel:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(59,130,246,.25);
}


/* 모바일만: 필요할 때만 줄바꿈 + full width */
@media (max-width:720px){
  .quicknav{ flex-wrap:wrap; }
  .quicknav #tickerSel{
    width:100%;
    max-width:none;
    margin-left:0;
  }
}

/* group badge: unified template color (no group split) */
#groupFixed.badge.qgroup{
  height:44px;
  display:inline-flex;
  align-items:center;

  padding:0 14px;
  border-radius:999px;

  background:#0f2734;        /* 템플릿 메인 딥톤 */
  color:#bfe9ff;             /* 템플릿 강조 텍스트 */
  border:1px solid rgba(255,255,255,.18);

  font-weight:900;
  letter-spacing:.3px;
}

/* ===== Ad slot (reserved) ===== */
.ymx-ad-slot{ margin:14px 0; }
.ymx-ad-slot:empty{ display:none; } /* 광고코드 넣기 전엔 아예 숨김 */
.ymx-ad-primary{
  padding:12px;
  border-radius:16px;
  border:1px dashed rgba(255,255,255,.14);
  background:rgba(255,255,255,.02);
}
@media (max-width:720px){
  .ymx-ad-slot{ margin:10px 0; }
}


/* ===========================
   SSR text blocks (Top/Bottom)
   - aligned with Group-1 style
   =========================== */
.tkr-ssr{
  padding: 14px 2px 12px;
  margin: 0 0 14px;
  border-bottom: 1px solid var(--br);
}

.tkr-ssr__title{
  font-size: 20px;
  font-weight: 900;
  color: #eaf2ff;
  margin: 0 0 10px;
  letter-spacing: .2px;
}

.tkr-ssr__lead{
  font-size: 13px;
  color: var(--mut);
  line-height: 1.75;
  margin: 0 0 10px;
}

.tkr-ssr__links{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top: 10px;
}

.tkr-ssr__link{
  font-size: 12px;
  color: #cfe0ff;
  text-decoration: none;
  padding: 4px 10px;
  border: 1px solid var(--br);
  border-radius: 999px;
  background: #10233a;
}

.tkr-ssr__link:hover{
  border-color: rgba(56,189,248,.35);
}

.tkr-ssr__noscript{
  margin-top: 10px;
  font-size: 12px;
  color: #ffb3b3;
  padding: 8px 12px;
  border: 1px solid #401c1c;
  border-radius: 8px;
  background: #1a0a0a;
}

/* bottom commentary */
.tkr-notes p{
  font-size: 13px;
  color: var(--mut);
  line-height: 1.75;
  margin: 0 0 12px;
}

.tkr-notes__links{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin: 12px 0;
}

.tkr-notes__link{
  font-size: 12px;
  color: #cfe0ff;
  text-decoration: none;
  padding: 4px 10px;
  border: 1px solid var(--br);
  border-radius: 999px;
  background: #10233a;
}

.tkr-notes__link:hover{
  border-color: rgba(56,189,248,.35);
}

.tkr-notes__disclaimer{
  font-size: 11px;
  color: #6b7a8d;
  margin: 8px 0 0;
}

@media (max-width:520px){
  .tkr-ssr__title{ font-size:18px; }
}

/* ===== Fund blurb collapsible ===== */
.fund-blurb-details {
  border: 1px solid var(--br, #1e3a5f);
  border-radius: 12px;
  background: #0d1b2a;
  margin: 14px 0 8px;
  padding: 0 16px;
}
.fund-blurb-summary {
  cursor: pointer;
  padding: 10px 0;
  font-size: 13px;
  font-weight: 700;
  color: #9fb0c3;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}
.fund-blurb-summary::-webkit-details-marker { display: none; }
.fund-blurb-summary::before {
  content: "▶";
  font-size: 9px;
  transition: transform .2s ease;
  color: #6b8aad;
}
.fund-blurb-details[open] .fund-blurb-summary::before {
  transform: rotate(90deg);
}
.fund-blurb-details .fund-intro p {
  font-size: 13px;
  color: var(--mut, #6b8aad);
  line-height: 1.75;
  margin: 0 0 10px;
}