* { box-sizing: border-box; }

  :root {
    --bg: #0f1117;
    --card-bg: #1a1d27;
    --text: #eee;
    --subtext: #999;
    --border: #333;
    --input-bg: #0f1117;
    --th-bg: #20242f;
    --note-bg: #12141c;
    --accent: #4fc3f7;
    --accent-text: #000;
    --pos: #4caf50;
    --neg: #f44336;
    --decay-bg: #2a1b1b;
    --decay-border: #ff7043;
    --del-bg: #3a1b1b;
    --del-text: #ef9a9a;
    --add-bg: #2e3a44;
  }

  @media (prefers-color-scheme: light) {
    :root {
      --bg: #f4f6fa;
      --card-bg: #ffffff;
      --text: #1a1d27;
      --subtext: #666;
      --border: #d8dce3;
      --input-bg: #ffffff;
      --th-bg: #eef2f7;
      --note-bg: #eef2f7;
      --accent: #0288d1;
      --accent-text: #fff;
      --pos: #2e7d32;
      --neg: #c62828;
      --decay-bg: #fdecea;
      --decay-border: #e64a19;
      --del-bg: #fdecea;
      --del-text: #c62828;
      --add-bg: #e3f2fd;
    }
  }

  body {
    font-family: -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
    background:var(--bg);
    color:var(--text);
    padding:16px;
    max-width:900px;
    margin:auto;
    font-size:15px;
    transition: background 0.2s, color 0.2s;
  }
  h1 { color:var(--accent); font-size:20px; margin-bottom:4px;}
  h3 { color:var(--accent); font-size:16px; margin-top:20px;}
  .subtitle { color:var(--subtext); font-size:13px; margin-bottom:16px; }
  .card { background:var(--card-bg); padding:18px; border-radius:14px; margin-bottom:16px; box-shadow:0 4px 12px rgba(0,0,0,0.15);}
  .section-header { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px;}
  label { display:block; margin-top:12px; font-size:13.5px; color:var(--subtext);}
  input, select {
    padding:10px; border-radius:8px; border:1px solid var(--border);
    background:var(--input-bg); color:var(--text); font-size:15px; -webkit-appearance:none;
  }
  .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .leverage-row { display:flex; gap:8px; flex-wrap:wrap; }
  .leverage-row > div { flex:1; min-width:130px; }
  .leverage-row input, .leverage-row select { width:100%; }
  .grid2 input { width:100%; }

  .day-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; margin-top:14px; }
.table-scroll-container {
  position: relative;
}

.table-scroll-container::before,
.table-scroll-container::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 20px;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.2s;
}

.table-scroll-container::before {
  left: 0;
  background: linear-gradient(to right, var(--card-bg), transparent);
}

.table-scroll-container::after {
  right: 0;
  background: linear-gradient(to left, var(--card-bg), transparent);
}

.table-scroll-container.scrolled-left::before {
  opacity: 1;
}

.table-scroll-container.scrolled-right::after {
  opacity: 1;
}
  .simulation-area {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 14px;
  }
  .summary-box-small {
    align-self: flex-end;
    width: 100%;
    max-width: 320px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 16px;
    background: var(--th-bg);
  }
  .summary-box-small h4 { margin: 0 0 10px 0; font-size: 14px; color: var(--accent); }
  .summary-box-small table { width: 100%; font-size: 12.5px; border-collapse: collapse; }
  .summary-box-small table td { padding: 5px 0; border: none; text-align: left; }
  .summary-box-small table td:last-child { text-align: right; font-weight: bold; color: var(--text); }
  .summary-box-small table td:first-child { color: var(--subtext); }

  .summary-table-grid { width: 100%; font-size: 13px; border-collapse: collapse; }
  .summary-table-grid td { padding: 6px 4px; border: none; text-align: left; }
  .summary-table-grid td:nth-child(odd) { color: var(--subtext); width: 22%; }
  .summary-table-grid td:nth-child(even) { font-weight: bold; color: var(--text); width: 28%; }

  .summary-box-large {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 16px;
    background: var(--th-bg);
    margin-bottom: 16px;
  }
  .summary-box-large table { width: 100%; font-size: 13px; border-collapse: collapse; }
  .summary-box-large table td { padding: 6px 4px; border: none; text-align: left; }
  .summary-box-large table td:nth-child(odd) { color: var(--subtext); width: 18%; }
  .summary-box-large table td:nth-child(even) { font-weight: bold; color: var(--text); width: 32%; }
  .summary-box-large .total-pnl { font-size: 1.1em; }

  @media (max-width: 600px) {
    .summary-box-large table td:nth-child(odd) { width: 30%; }
    .summary-box-large table td:nth-child(even) { width: 70%; }
  }

  .day-table { width:100%; border-collapse:collapse; min-width:560px; }
  .day-table th, .day-table td { border:1px solid var(--border); padding:8px; text-align:center; font-size:13px; }
  .day-table th { background:var(--th-bg); }
  .day-table input.dayReturnInput {
    width:90px; text-align:right; padding:6px; font-size:13px; margin:0; -webkit-appearance: textfield;
  }
  /* loss_recovery_sim.js 에서 사용하는 클래스 */
  .day-table .buy-marker { background-color: var(--th-bg); }

  .day-table .val-pos { color:var(--pos); font-weight:bold; }
  .day-table .val-neg { color:var(--neg); font-weight:bold; }
  .day-table select { width: 100%; padding: 6px; font-size: 13px; }
  .day-table select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.2em;
    padding-right: 2rem;
  }
  .day-table input:disabled { background: var(--th-bg); opacity: 0.7; }
  .leverage-price-cell { font-weight: bold; }
  .placeholder-cell {
    border: none !important;
    background: var(--card-bg) !important;
  }


  .del-btn {
    background:var(--del-bg); color:var(--del-text); border:none; border-radius:6px;
    padding:6px 10px; font-size:12px; cursor:pointer;
  }

  button.calc-btn {
    margin-top:14px; padding:14px; background:var(--accent); color:var(--accent-text); border:none; border-radius:10px;
    font-weight:bold; cursor:pointer; font-size:15px; width:100%;
  }
  button.add-btn {
    margin-top:12px; padding:12px; background:var(--add-bg); color:var(--accent); border:1px dashed var(--accent);
    border-radius:10px; font-weight:bold; cursor:pointer; font-size:14px; width:100%;
  }
  button.reset-btn {
    padding:8px 14px; background:transparent; color:var(--neg); border:1px solid var(--neg);
    border-radius:8px; font-weight:bold; cursor:pointer; font-size:13px;
  }
  button.excel-btn {
    margin-top:10px; padding:14px; background:#2e7d32; color:#fff; border:none; border-radius:10px;
    font-weight:bold; cursor:pointer; font-size:15px; width:100%;
  }
  button:active { opacity:0.8; }

  .result { font-size:14.5px; margin-top:8px; line-height:1.6;}
  .pos { color:var(--pos); font-weight:bold;}
  .neg { color:var(--neg); font-weight:bold;}
  .note { font-size:12px; color:var(--subtext); margin-top:14px; line-height:1.8; background:var(--note-bg); padding:12px; border-radius:8px; border-left:3px solid var(--accent);}
  .formula { font-family:'Consolas', monospace; color:#e6a817; background:rgba(0,0,0,0.08); padding:2px 5px; border-radius:4px; word-break:break-all; font-size:11.5px;}
  .decay-box { background:var(--decay-bg); border-left:3px solid var(--decay-border); padding:14px; margin-top:14px; border-radius:8px; }
  .summary-table { width:100%; border-collapse:collapse; margin-top:14px; }
  .summary-table th, .summary-table td { border:1px solid var(--border); padding:8px 10px; text-align:right; font-size:13px;}
  .summary-table th { background:var(--th-bg); text-align:center;}
  .summary-table td:first-child, .summary-table th:first-child { text-align:left; }
  .ad-slot {
    width: 100%;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--th-bg);
    color: var(--subtext);
    font-size: 14px;
    border-radius: 14px;
  }
  .ad-slot.top-ad {
    margin-bottom: 16px;
  }
  .api-note { font-size:12px; color:var(--subtext); }

  @media (max-width: 480px) {
    body { padding:10px; font-size:14px; }
    h1 { font-size:17px; }
    .card { padding:14px; border-radius:10px; }
    .grid2 { grid-template-columns:1fr; }
    .day-table th, .day-table td { font-size:11.5px; padding:6px; }
    .summary-box-small { max-width: 100%; }
    .day-table input.dayReturnInput { width:70px; font-size:12px; }
  }

/* ===== 탭 바 스타일 ===== */
.tab-bar { display:flex; gap:8px; margin-bottom:16px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tab-btn { padding:10px 16px; border:1px solid var(--border); background:var(--card-bg); color:var(--subtext); border-radius:10px 10px 0 0; font-weight:bold; font-size:14px; cursor:pointer; white-space:nowrap; transition: background 0.15s, color 0.15s; }
.tab-btn.active { background:var(--accent); color:var(--accent-text); border-color:var(--accent); }
.tab-btn:hover:not(.active) { background:var(--th-bg); }

/* ===== 면책조항 탭 스타일 ===== */
.disclaimer-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 24px;
  line-height: 1.7;
}

.disclaimer-page h2 {
  font-size: 1.4rem;
  margin-bottom: 20px;
  border-bottom: 2px solid #e5e7eb;
  padding-bottom: 12px;
}

.disclaimer-section {
  margin-bottom: 24px;
}

.disclaimer-section h3 {
  font-size: 1.05rem;
  margin-bottom: 8px;
  color: #374151;
}

.disclaimer-section p {
  font-size: 0.95rem;
  color: #4b5563;
}

.disclaimer-updated {
  font-size: 0.85rem;
  color: #9ca3af;
  text-align: right;
  margin-top: 32px;
}

/* ===== 시뮬레이션 리포트 스타일 ===== */
.section-header-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.section-header-actions button {
  margin-top: 0;
  width: auto;
}
.section-header-actions button.add-btn {
  padding: 8px 14px;
  font-size: 13px;
}
.section-header-actions button.excel-btn {
  padding: 8px 14px;
  font-size: 13px;
  width: auto;
}

.report-box {
  margin-top: 14px;
}

.report-empty {
  font-size: 13.5px;
  color: var(--subtext);
  text-align: center;
  padding: 20px 10px;
}

.report-summary h4 {
  color: var(--accent);
  font-size: 15px;
  margin-bottom: 12px;
}

.report-subtitle {
  font-size: 13px;
  color: var(--subtext);
  margin: 20px 0 8px 0;
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
}
.report-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 16px;
}
.report-table td {
  border: 1px solid var(--border);
  padding: 8px 10px;
  font-size: 13px;
}
.report-table td:first-child {
  color: var(--subtext);
  width: 55%;
}
.report-table td:last-child {
  text-align: right;
  font-weight: bold;
}
.report-table .val-pos { color: var(--pos); }
.report-table .val-neg { color: var(--neg); }

.report-narrative {
  background: var(--decay-bg);
  border-left: 3px solid var(--decay-border);
  padding: 14px;
  border-radius: 8px;
}
.report-narrative p {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 10px;
}
.report-narrative p:last-child {
  margin-bottom: 0;
}

@media (max-width: 480px) {
  .report-table td { font-size: 12px; padding: 6px 8px; }
  .report-narrative p { font-size: 12.5px; }
}