:root{
  /* Surfaces & text (DARK) */
  --bg:#0b0c10;
  --card:#121318;
  --text:#e6e8ee;
  --muted:#a8b0c3;
  --accent:#4f81ff;
  --warn:#ffb020;

  /* Lines / Inputs */
  --line:#1c1e26;
  --input-bg:#0f1016;
  --input-border:#2a2e3a;
  --input-text:#e6e8ee;
  --input-placeholder:#7f8798;
  --ring: rgba(79,129,255,.28);

  /* POS/NEG (DARK) */
  --pos-500:#98ffa8; --pos-600:#76f28c; --pos-700:#5dd976; --pos-ring: rgba(152,255,168,.35);
  --neg-500:#ff8e8e; --neg-600:#ff6f6f; --neg-700:#ff5858; --neg-ring: rgba(255,142,142,.35);

  /* 호환(danger=neg) */
  --danger-500: var(--neg-500);
  --danger-600: var(--neg-600);
  --danger-700: var(--neg-700);
  --danger-ring: var(--neg-ring);

  /* Tables */
  --table-head:#cfd6ea;

  /* Sizes */
  --radius:16px;
  --input-min-w:40px; --input-max-w:240px;
  --input-min-h:40px; --input-max-h:52px;
  --fs-text:clamp(15px, 1.20vw, 18px);
  --fs-label:clamp(12px, .9vw, 14px);
  --fs-title:clamp(22px, 2.40vw, 32px);
  --pad-sm:clamp(10px, 1.2vw, 12px);
  --pad-md:clamp(12px, 1.6vw, 16px);

  /* Surfaces */
  --canvas:#0f1016;          /* charts, deep panels */
  --elev:#1a1b22;            /* elevated surfaces like toasts */

  /* Status (reuse in toast/buttons/etc.) */
  --ok-500:#98ffa8;  --ok-600:#76f28c;  --ok-700:#5dd976;
  --warn-500:#ffcf7a;--warn-600:#ffb020;--warn-700:#e39010;
  --info-500:#8ac8ff;--info-600:#64b3ff;--info-700:#4398ef;

  /* Z-index & motion */
  --z-toast: 9999;
  --motion-fast: .18s;
  --motion: .24s;

  --side-ads-width: 300px;
  --side-ads-gap: 60px;
}


/* Body copy: ~19–22px (UP from 17-20px) */
body{
  font-size: clamp(19px, 1.3vw, 22px);
  line-height: 1.65;
}

/* Headline: ~36–50px (UP from 30-40px) */
.title{
  font-size: clamp(36px, 4.0vw, 50px);
  line-height: 1.1;
  letter-spacing: -0.018em; /* Slightly tighter for larger headings */
  margin-bottom: 12px;
}

/* Subtitle: ~18–22px (UP from 16-18px) */
.subtitle{
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.5;
  margin: 8px 0 25px;
}

/* Label / small UI text: ~18–20px (UP from 16-18px) */
.label{ 
  font-size: clamp(18px, 1.3vw, 20px);
  line-height: 1.55;
}

/* “Tiny”, but now actually readable: ~15–18px (UP from 13-14px) */
.tiny{
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.5;
}

/* Badges follow label size, stay bold: ~15–18px (UP from 14-16px) */
.badge{
  font-size: clamp(15px, 1.1vw, 18px);
  font-weight: 700;
  line-height: 1.25;
}

/* Paragraph rhythm / max measure */
.content p,
.content li{
  max-width: 68ch;  /* slightly narrower as size increases */
}

/* Tables & controls — nudge up a bit too */
.trades-table{ font-size: 1.05em; }
input, button { 
  font-size: 1.0em;       /* inherits bigger base via html bump */
  line-height: 1.25;
  padding: 0.7em 0.9em;   /* keep touch targets comfy */
}

/* Mobile safety: keep things readable but avoid overflow */
@media (max-width: 520px){
  body{ font-size: clamp(17px, 3.9vw, 19px); }
  .title{ font-size: clamp(28px, 6.6vw, 36px); }
  .trades-table{ font-size: 1.1em; }
}




*{ box-sizing:border-box }
html,body{ height:100% }
body{
  background:var(--bg); color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,Apple SD Gothic Neo,Noto Sans KR,'맑은 고딕',sans-serif;
  font-size:var(--fs-text);
  transition: background .18s ease, color .18s ease;
}
.wrap{ max-width:1200px; margin:24px auto; padding:0 16px }
.title{ font-size:var(--fs-title); font-weight:800; letter-spacing:-.02em; margin-bottom:6px }
.subtitle{ color:var(--muted); margin-bottom:16px }
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:var(--pad-md);
  box-shadow: var(--shadow-sm);
}

/* inputs */

input{
  width:100%;
  border-radius:12px;
  border:1px solid var(--input-border);
  background:var(--input-bg);
  color:var(--input-text);
  padding:var(--pad-sm);
  line-height:1.2;
  font-size:var(--fs-text);
  min-width:var(--input-min-w);  /* 40px */
  max-width:var(--input-max-w);  /* 240px */
  min-height:var(--input-min-h); /* 40px */
  max-height:var(--input-max-h); /* 52px */
  transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
input::placeholder{ color:var(--input-placeholder); }
input:focus-visible{
  outline:2px solid transparent;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring);
}

/* number spin 제거 */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
input[type="number"]{ -moz-appearance:textfield; }

/* buttons: 공통 리셋 */
button{
  width:auto; border-radius:12px; border:1px solid var(--input-border);
  padding:var(--pad-sm); line-height:1.2; font-size:var(--fs-text);
  min-width:var(--input-min-w); max-width:var(--input-max-w);
  min-height:var(--input-min-h); max-height:var(--input-max-h);
  background:none; color:inherit; transition:filter .12s ease, background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}


.page{
  display:grid; gap:20px;
  grid-template-columns:1fr minmax(280px,340px);
  align-items:start;
}
@media (max-width:1024px){ .page{ grid-template-columns:1fr } }

.charts{ display:grid; gap:16px; grid-template-columns:1fr 1fr }
@media (max-width:920px){ .charts{ grid-template-columns:1fr } }
.charts canvas{ background:var(--canvas); border-radius:16px; padding:12px }

#tradeSection, #resultsCard{ scroll-margin-top:16px }

/* 기본 버튼: POS 톤 */
.btn{
  color:#0b0c10;
  background:linear-gradient(180deg,var(--pos-500),var(--pos-600));
  border:1px solid rgba(0,0,0,.12);
  font-weight:700; cursor:pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.btn:hover{ filter:brightness(1.03); }
.btn:active{ background:var(--pos-700); filter:none; }
.btn:disabled{ opacity:.6; cursor:not-allowed; }
.btn:focus-visible{ outline:2px solid transparent; box-shadow:0 0 0 3px var(--pos-ring); }

/* 고스트 버튼: 라이트에서는 약간의 채움 & 더 옅은 보더 */
.btn-ghost{
  background: var(--card);
  border:1px solid var(--input-border);
  color: var(--text);
  cursor:pointer;
}
.btn-ghost:hover{ filter:brightness(1.05); }
.btn-sm{ padding:6px 10px; min-height:36px; font-size:0.95em; }
.btn-lg{ padding:14px 18px; min-height:54px; font-size:1.05em; }

/* Group */
.btn-group{ display:flex; gap:8px; flex-wrap:wrap; }


/* 위험 버튼: NEG 톤 */
.btn-danger{
  color:#0b0c10;
  background:linear-gradient(180deg,var(--neg-500),var(--neg-600));
  border:1px solid rgba(0,0,0,.12);
  font-weight:700; cursor:pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.btn-danger:hover{ filter:brightness(1.03); }
.btn-danger:active{ background:var(--neg-700); filter:none; }
.btn-danger:focus-visible{ outline:2px solid transparent; box-shadow:0 0 0 3px var(--neg-ring); }

/* 삭제 버튼(레이아웃만) */
.asset-name button.asset-del{
  width:auto; inline-size:auto; min-width:84px; max-width:128px;
  padding:8px 14px; white-space:nowrap; flex-shrink:0; border-radius:12px;
}

/* 자산 카드 */
.asset-card{
  border:1px dashed var(--input-border); /* 하드코딩 제거 */
  #border:1px dashed #2a2e3a; border-radius:14px; padding:12px;
  display:grid; gap:12px; grid-template-areas:"name" "row";
}
.asset-name{ grid-area:name; display:flex; gap:8px; align-items:flex-end }
.asset-name .field{ flex:1 }
.label{ display:block; color:var(--muted); font-size:var(--fs-label); margin-bottom:6px }

/* 각 칸의 최소/최대 폭을 보장하면서 반응형 */
.asset-row{
  grid-area:row; display:grid; gap:12px;
  grid-template-columns: repeat(3, minmax(var(--input-min-w), 1fr));
}
@media (max-width:920px){
  .asset-row{ grid-template-columns: repeat(2, minmax(var(--input-min-w), 1fr)) }
}
@media (max-width:600px){
  .asset-row{ grid-template-columns:1fr }
}

/* 현금 블록 묶음 */
.cash-card .cash-grid{
  display:grid; gap:12px;
  grid-template-columns: minmax(var(--input-min-w),1fr) minmax(var(--input-min-w),1fr);
  align-items:end;
}
@media (max-width:600px){
  .cash-card .cash-grid{ grid-template-columns:1fr }
}

/* 기본: 큰 화면에서는 가로 배치 */
.action-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;           /* 텍스트 길면 다음 줄로 자연스레 감기도록 */
  align-items:stretch;
}
.action-row .btn,
.action-row .btn-ghost,
.action-row .btn-danger{
  white-space:normal;       /* 긴 한글/영문 줄바꿈 허용 */
}

/* 작은 화면: 세로(위→아래)로 쌓고 버튼을 폭 100%로 */
@media (max-width: 640px){
  .action-row{
    flex-direction:column;
    gap:10px;
  }
  .action-row .btn,
  .action-row .btn-ghost,
  .action-row .btn-danger{
    width:100%;
  }
}


/* 작은 화면 전용(삭제 버튼 고정폭 등) */
@media (max-width:640px){
  .asset-name{ display:flex; align-items:center; gap:8px; flex-wrap:nowrap; }
  .asset-name .field{ flex:1 1 auto; }

  .asset-name button.asset-del{
    flex:0 0 auto; margin-left:4px;
    width:auto; inline-size:auto; min-width:60px; padding:6px 10px;
    white-space:nowrap; flex-shrink:0;
  }
}
/* 거래 표(반응형) */
.trades-table{ width:100%; border-collapse:collapse; table-layout:fixed; border-radius:10px; overflow:hidden; }
.trades-table th, .trades-table td{ padding:10px 12px; white-space:nowrap; border-bottom:1px solid #1f2230 }
.trades-table thead th{ font-weight:700; color:var(--table-head); text-align:left }



.trades-table td.num{ text-align:right; white-space:nowrap }
.trades-table .neg{ color: var(--neg-500) }
.trades-table .pos{ color: var(--pos-500) }

@media (max-width:920px){
  .trades-table th:nth-child(1){ width:50% }
  .trades-table th:nth-child(2){ width:20% }
  .trades-table th:nth-child(3){ width:30% }
}
@media (max-width:520px){
  .trades-table th, .trades-table td{ padding:8px }
  .trades-table{ font-size:.95em }
}

/* 스택 래퍼(현재 1열 구성) */
.trades-stack{ display:grid; gap:12px; }
@media (min-width:640px) and (max-width:1023px){
  .trades-stack{ grid-template-columns:1fr; }
}
@media (min-width:1024px){
  .trades-stack{ grid-template-columns:1fr; }
}

/* Toast / Snackbar */

#toast-root{
  position:fixed; left:0; right:0;
  bottom:max(16px, env(safe-area-inset-bottom));
  display:grid; place-items:center; gap:8px; z-index:var(--z-toast);
  pointer-events:none;
}
.toast-card{
  pointer-events:auto; max-width:min(680px,92vw); width:fit-content;
  padding:12px 14px; border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.18);
  background:#222; color:#fff; font-size:14px; line-height:1.5;
  display:flex; align-items:flex-start; gap:12px;
  opacity:0; transform:translateY(12px); animation:toast-in .18s ease-out forwards;
}
.toast-card{ background: var(--elev); transition: opacity var(--motion-fast), transform var(--motion-fast); }
.toast-card[data-variant="error"]{ background: color-mix(in oklab, var(--elev), var(--neg-700) 20%); border-color: var(--neg-600); color: var(--neg-500); }
.toast-card[data-variant="warn"] { background: color-mix(in oklab, var(--elev), var(--warn-700) 18%); border-color: var(--warn-600); color: var(--warn-500); }
.toast-card[data-variant="info"] { background: color-mix(in oklab, var(--elev), var(--info-700) 18%); border-color: var(--info-600); color: var(--info-500); }
.toast-card[data-variant="ok"]   { background: color-mix(in oklab, var(--elev), var(--ok-700) 16%);   border-color: var(--ok-600);   color: var(--ok-500); }

/*
.toast-card[data-variant="error"]{ background:#2a0f12; color:#ffd7db; border:1px solid #5b1b22; }
.toast-card[data-variant="warn"] { background:#2a220f; color:#ffe9b1; border:1px solid #5b4a1b; }
.toast-card[data-variant="info"] { background:#0f1f2a; color:#cfe9ff; border:1px solid #1b3e5b; }
.toast-card[data-variant="ok"]   { background:#0f2a1a; color:#ccffd9; border:1px solid #1b5b3a; }
*/

.toast-icon{ font-size:18px; line-height:1; margin-top:2px; }
.toast-body{ flex:1; }
.toast-title{ font-weight:700; margin-bottom:4px; }
.toast-list{ margin:0; padding-left:18px; }
.toast-list li{ margin:2px 0; }

.toast-close{ border:none; background:transparent; color:inherit; cursor:pointer; opacity:.7; font-size:16px; padding:2px; line-height:1; }
.toast-close:hover{ opacity:1; }

@keyframes toast-in{ to{ opacity:1; transform:translateY(0); } }
@keyframes toast-out{ to{ opacity:0; transform:translateY(12px); } }



/* ==== Portfolio Tabs ==== */
.tabs{
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
}
.tab{
  border-radius:999px;
  padding:8px 14px;
  background: var(--card);
  border:1px solid var(--input-border);
  color: var(--text);
  cursor:pointer;
  line-height:1;
  font-weight:700;
  transition: background var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast);
}
.tab:hover{ filter:brightness(1.05); }
.tab:focus-visible{
  outline:2px solid transparent;
  box-shadow:0 0 0 3px var(--ring);
}
.tab.active{
  background: linear-gradient(180deg, var(--info-500), var(--info-600));
  color:#0b0c10;
  border-color: rgba(0,0,0,.12);
}




/* ========================================================== */
/* ==== 광고 영역 스타일 (Ad Placeholders) & Layout Adjustment ==== */
/* ========================================================== */

/* 1. 상단/하단 광고 배너 (Top/Bottom Banner) */
.ad-banner {
    width: 100%;
    text-align: center;
    padding: 16px 0;
    background: var(--card); 
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    font-size: 0.9rem;
    color: var(--muted);
    line-height: 1.4;
    font-weight: 500;
}

#topAd {
    margin-bottom: 24px; 
    border-bottom: none; 
}

#bottomAd {
    border-top: 1px solid var(--line);
    border-bottom: none; 
    margin-top: 24px;
    margin-bottom: 24px; 
}

/* 2. 사이드 고정 광고 (Scrolling Side Ad) 및 겹침 방지 */

/* 📌 작은 화면(<= 1024px)에서는 사이드 광고를 숨깁니다. */
@media (max-width: 1050px) {
    .side-ads { 
        display: none; 
    }
    /* .page는 기존 CSS에 따라 1열 그리드(1fr)를 유지합니다. */
}

/* 📌 1025px 이상: 데스크톱 레이아웃 (겹침 문제 최종 해결) */
@media (min-width: 1050px) {
  /* 메인이 사이드 고정 광고만큼 오른쪽으로 공간을 비워줌 */
  .content{
    padding-right: calc(var(--side-ads-width) + var(--side-ads-gap));
    max-width: none;
  }

  /* 사이드 광고: 뷰포트 기준 고정 + 래퍼의 오른쪽 안쪽선에 맞추되, gap만큼 더 오른쪽으로 밀기 */
  .side-ads{
    position: sticky;
    top: 80px;
    z-index: 100;
    width: var(--side-ads-width);
    /* (100vw - 1200px)/2 는 래퍼 오른쪽 바깥여백, +16px은 래퍼 내부 패딩.
       거기서 gap만큼 빼서 광고를 더 오른쪽으로 이동 */
    right: calc((100vw - 1200px) / 2 + 16px - var(--side-ads-gap));
  }

  /* 광고가 문서 흐름에서 빠졌으므로 그리드는 1열로 */
  .page{ grid-template-columns: 1fr; }
}

/* 📌 (필수) 기존 .page 정의 수정: 
   광고 영역이 fixed로 빠졌지만, 페이지의 최소 폭을 정의했던 기존 코드를 재정의하여
   큰 화면에서 사이드바(광고)가 차지할 영역을 메인 콘텐츠가 침범하지 않게 합니다.
   이 코드를 기존 @media (min-width: 1100px) 근처의 원본 .page 정의 위에 추가하세요.
*/
.page{
  display:grid; gap:20px;
  /* 📌 기존: grid-template-columns:1fr minmax(280px,340px); */
  grid-template-columns:1fr minmax(240px, 280px); /* 📌 광고 폭을 280px로 변경 */
  align-items:start;
}
@media (max-width:1024px){ 
    /* 📌 1024px 이하에서는 1열만 사용하도록 명시적으로 재정의 */
    .page{ grid-template-columns:1fr } 
}

/* === Results tooltips styling === */
.th-with-tooltip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
}

.tooltip-icon {
  all: unset;
  cursor: pointer;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid currentColor;
  display: inline-grid;
  place-items: center;
  font-size: 11px;
  line-height: 1;
}
.tooltip-icon::before { content: "i"; font-weight: 600; }

.tooltip-bubble {
  position: absolute;
  z-index: 30;
  top: 120%;
  left: 0;
  min-width: 200px;
  max-width: 320px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #10131a;
  color: #e6e9f3;
  box-shadow: 0 6px 24px rgba(0,0,0,0.25);
  font-size: 12px;
  line-height: 1.35;
  white-space: normal;
}
.tooltip-bubble::after {
  content: "";
  position: absolute;
  top: -6px; left: 10px;
  border: 6px solid transparent;
  border-bottom-color: #10131a;
}
.tooltip-bubble[hidden] { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .tooltip-bubble {
    transition: opacity 120ms ease, transform 120ms ease;
    transform: translateY(2px);
    opacity: 0;
  }
  .th-with-tooltip .tooltip-bubble:not([hidden]) {
    transform: translateY(0);
    opacity: 1;
  }
}