/* icenovel 투자 상세(/invest/{slug}) — 템플릿 invest-detail.php 와 invest.js · invest-charts.js 가 쓴다.
   색: 국내 관례대로 상승·이익=빨강(--inv-up), 하락·손실=파랑(--inv-down) */
.inv{max-width:1040px;--inv-up:#d6336c;--inv-down:#1c7ed6}
.inv__back{display:inline-block;margin-bottom:var(--space-6);color:var(--color-text-muted);text-decoration:none;font-size:var(--text-sm)}
.inv__back:hover{color:var(--teal)}
.inv__head{margin-bottom:var(--space-8)}
.inv__title{font-size:var(--text-3xl);font-weight:800;letter-spacing:-.02em;margin:0}
.inv__desc{color:var(--color-text-secondary);margin-top:var(--space-3)}
.inv__status{display:flex;align-items:center;gap:8px;margin-top:var(--space-4);font-size:var(--text-sm);color:var(--color-text-muted)}
.inv__dot{width:8px;height:8px;border-radius:50%;background:var(--color-text-muted);flex:0 0 auto}
.inv__status.is-ok .inv__dot{background:#2f9e44;box-shadow:0 0 0 3px rgba(47,158,68,.18)}
.inv__status.is-warn .inv__dot{background:#e8590c}

/* 요약 카드 */
.inv-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}
.inv-card{border:1px solid var(--color-border);border-radius:12px;padding:18px 20px;background:var(--color-bg)}
.inv-card__label{font-size:var(--text-sm);color:var(--color-text-muted)}
.inv-card__value{font-size:1.5rem;font-weight:800;margin-top:6px;font-variant-numeric:tabular-nums;letter-spacing:-.01em;overflow-wrap:anywhere}
.inv-card__sub{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:4px;min-height:1em}

/* 패널 */
.inv-panel{border:1px solid var(--color-border);border-radius:12px;padding:20px 22px;margin-bottom:18px;background:var(--color-bg)}
.inv-panel__head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.inv-panel__head .inv-panel__title{margin:0}
.inv-panel__title{font-size:1.05rem;font-weight:700;margin:0 0 14px}
.inv-panel__title small{font-weight:400;color:var(--color-text-muted);font-size:var(--text-xs);margin-left:6px}
.inv-panel__note{font-size:var(--text-xs);color:var(--color-text-muted);margin:10px 0 0}
.inv-panel__note a{color:var(--teal)}
#inv-flows{scroll-margin-top:96px} /* 고정 머리글에 가리지 않게 — 자산 추이 아래 링크가 여기로 온다 */
.inv-empty{color:var(--color-text-muted);font-size:var(--text-sm);padding:6px 0}
.inv-muted{color:var(--color-text-muted);font-size:var(--text-xs)}

/* 기간 탭 */
.inv-tabs{display:inline-flex;background:var(--color-bg-subtle);border-radius:999px;padding:3px}
.inv-tab{border:0;background:none;font:inherit;font-size:var(--text-sm);font-weight:700;color:var(--color-text-muted);padding:5px 14px;border-radius:999px;cursor:pointer}
.inv-tab:hover{color:var(--color-text)}
.inv-tab[aria-pressed="true"]{background:var(--color-bg);color:var(--navy);box-shadow:0 1px 3px rgba(23,32,51,.12)}

/* 기간 성적 */
.inv-stats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-bottom:16px}
.inv-stat{background:var(--color-bg-subtle);border-radius:10px;padding:12px 14px}
.inv-stat__label{font-size:var(--text-xs);color:var(--color-text-muted)}
.inv-stat__value{font-size:1.15rem;font-weight:800;margin-top:4px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.inv-stat__sub{font-size:11px;color:var(--color-text-muted);margin-top:2px}

/* 차트 */
.inv-chart{position:relative;height:260px}
.inv-chart--pnl{height:240px}
.inv-chart svg{display:block;width:100%;height:100%}
.inv-chart.is-empty{height:auto}
.inv-chart__tip{position:absolute;top:6px;pointer-events:none;background:var(--navy);color:#fff;font-size:12px;padding:4px 8px;border-radius:6px;white-space:nowrap;transform:translateX(-50%);z-index:1}
.inv-chart__axis{position:absolute;font-size:11px}

/* 손익 달력 */
.inv-cal__nav{display:flex;align-items:center;gap:6px;font-weight:700;font-size:var(--text-sm)}
.inv-cal__nav button{border:1px solid var(--color-border);background:var(--color-bg);border-radius:8px;width:30px;height:30px;font-size:1rem;cursor:pointer;color:var(--color-text)}
.inv-cal__nav button:disabled{opacity:.35;cursor:default}
.inv-cal__nav span{min-width:96px;text-align:center}
.inv-cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.inv-cal__dow{font-size:var(--text-xs);color:var(--color-text-muted);text-align:center;padding:2px 0 6px}
.inv-cal__dow:first-child{color:var(--inv-up)}
.inv-cal__cell{min-height:68px;border-radius:8px;padding:6px 7px;background:var(--color-bg-subtle);display:flex;flex-direction:column;gap:2px;font-variant-numeric:tabular-nums;overflow:hidden}
.inv-cal__cell.is-blank{background:none}
.inv-cal__cell.is-out{opacity:.4}
.inv-cal__cell.is-today{box-shadow:inset 0 0 0 2px var(--teal)}
.inv-cal__day{font-size:11px;color:var(--color-text-muted)}
.inv-cal__pnl{font-size:13px;font-weight:800;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:clip}
.inv-cal__n{font-size:10px;color:var(--color-text-secondary)}
.inv-cal__sum{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:var(--text-sm);color:var(--color-text-secondary)}
.inv-cal__sum b{font-variant-numeric:tabular-nums}

/* 표 */
.inv-tbl-wrap{overflow-x:auto}
.inv-tbl{width:100%;border-collapse:collapse;font-size:var(--text-sm);font-variant-numeric:tabular-nums}
.inv-tbl th{text-align:right;font-weight:600;color:var(--color-text-muted);padding:8px 10px;border-bottom:1px solid var(--color-border);white-space:nowrap}
.inv-tbl td{text-align:right;padding:9px 10px;border-bottom:1px solid var(--color-border-light);white-space:nowrap}
.inv-tbl th:first-child,.inv-tbl td:first-child,.inv-tbl .inv-l{text-align:left}
.inv-more{display:block;width:100%;margin-top:10px;padding:9px;border:1px dashed var(--color-border);border-radius:8px;background:none;font:inherit;font-size:var(--text-sm);color:var(--color-text-secondary);cursor:pointer}
.inv-more:hover{border-color:var(--teal);color:var(--teal)}
.inv-up{color:var(--inv-up)}.inv-down{color:var(--inv-down)}
.inv-tag{display:inline-block;padding:1px 7px;border-radius:999px;font-size:11px;font-weight:700}
.inv-tag--long{background:#fdecef;color:#c2255c}.inv-tag--short{background:#e7f1fc;color:#1864ab}
.inv-tag--liq{background:#fff3bf;color:#a15c00;margin-left:4px}

/* 추천(레퍼럴) 블록 — 머리글 한 줄(.inv__refline) + 카드(.inv-ref: 글 왼쪽 · QR 오른쪽, 좁으면 세로) */
.inv__refline{margin-top:var(--space-3);font-size:var(--text-sm)}
.inv__refline a{color:var(--teal);text-decoration:none}
.inv__refline a:hover{text-decoration:underline}
.inv__refline b{font-variant-numeric:tabular-nums;letter-spacing:.04em}
.inv-ref{display:flex;align-items:center;gap:24px}
.inv-ref__body{flex:1 1 auto;min-width:0}
.inv-ref__text{color:var(--color-text-secondary);font-size:var(--text-sm);margin:0 0 12px;line-height:1.7}
.inv-ref__code{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 14px;font-size:var(--text-sm);color:var(--color-text-muted)}
.inv-ref__code code{font-size:1.05rem;font-weight:800;color:var(--color-text);background:var(--color-bg-subtle);padding:4px 10px;border-radius:8px;letter-spacing:.06em}
.inv-ref__copy{border:1px solid var(--color-border);background:var(--color-bg);border-radius:999px;font:inherit;font-size:var(--text-xs);padding:3px 10px;cursor:pointer;color:var(--color-text-secondary)}
.inv-ref__copy:hover{border-color:var(--teal);color:var(--teal)}
.inv-ref__btn{display:inline-block;background:var(--navy);color:#fff;text-decoration:none;font-weight:700;font-size:var(--text-sm);padding:10px 18px;border-radius:10px}
.inv-ref__btn:hover{opacity:.9}
.inv-ref__qr{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:var(--color-text-muted);font-size:11px}
.inv-ref__qr img{width:150px;height:150px;border:1px solid var(--color-border);border-radius:10px;background:#fff;padding:6px;display:block}
@media (max-width:640px){.inv-ref{flex-direction:column;align-items:stretch}.inv-ref__qr{align-self:center}}

/* 매매 노트 */
.inv-notes__all{font-size:var(--text-sm);color:var(--teal);text-decoration:none;white-space:nowrap}
.inv-notes .post-row:last-child{border-bottom:0}

.inv-disclaimer{margin-top:var(--space-6);font-size:var(--text-xs);color:var(--color-text-muted)}

@media (max-width:860px){
  .inv-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .inv-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* 모바일: 표 → 카드. 한 줄이 카드 한 장, 머리 칸(종목)은 카드 제목, 나머지는 「항목명 · 값」 쌍.
   항목명은 JS 가 td 마다 심는 data-label 에서 온다 — 표 마크업을 따로 만들지 않는다. */
@media (max-width:640px){
  .inv-tbl-wrap{overflow:visible}
  .inv-tbl thead{display:none}
  .inv-tbl,.inv-tbl tbody{display:block}
  .inv-tbl tr{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;border:1px solid var(--color-border);border-radius:10px;padding:12px 14px;margin-bottom:10px}
  .inv-tbl td{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:0;border:0;text-align:right;white-space:normal;min-width:0}
  .inv-tbl td::before{content:attr(data-label);color:var(--color-text-muted);font-size:11px;font-weight:400;text-align:left;white-space:nowrap}
  .inv-tbl td.inv-td-head{order:-1;grid-column:1/-1;justify-content:flex-start;font-weight:700;font-size:var(--text-base);padding-bottom:6px;margin-bottom:2px;border-bottom:1px solid var(--color-border-light)}
  .inv-tbl td.inv-td-head::before{content:none}
}
@media (max-width:480px){
  .inv-card__value{font-size:1.25rem}
  .inv-chart{height:200px}
  .inv-chart--pnl{height:200px}
  .inv-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .inv-panel{padding:16px}
  .inv-cal{gap:3px}
  .inv-cal__cell{min-height:52px;padding:4px}
  .inv-cal__pnl{font-size:11px}
  .inv-cal__n{display:none}
}