* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Noto Sans KR', sans-serif; background: #f5f7fa; color: #2d3748; -webkit-tap-highlight-color: transparent; }

/* ── 상단 브랜드 바 (모바일) ─────────── */
.topbar {
  background: #1a365d; color: white; display: flex; align-items: center;
  padding: 11px 92px 11px 16px;  /* 우측 여백 = 고정 로그인 버튼 자리 */
  position: sticky; top: 0; z-index: 100;
}
.nav-brand { font-size: 1.05rem; font-weight: 700; white-space: nowrap; }
.topbar-spacer { flex: 1; }
.meta-date { font-size: 0.78rem; color: #a8c3e6; }
.authbtn { position: fixed; top: 9px; right: 12px; z-index: 300;
  background: rgba(255,255,255,0.18); color: #fff; border: 1px solid rgba(255,255,255,0.45);
  border-radius: 16px; padding: 6px 13px; font-size: 0.76rem; font-weight: 700; font-family: inherit; cursor: pointer; white-space: nowrap; }
.authbtn:active { background: rgba(255,255,255,0.3); }
/* 데스크톱: topbar 숨김 → 밝은 배경에 보이도록 진한 배경 */
@media (min-width: 769px) { .authbtn { top: 12px; right: 18px; background: #1a365d; border-color: #1a365d; } }

/* 로그인 폼 */
.loginbox { max-width: 360px; margin: 0 auto; }
.loginbox input { width: 100%; border: 1px solid #cbd5e0; border-radius: 8px; padding: 11px 12px; font-size: 0.95rem; margin: 8px 0; }
.loginbox .btn { width: 100%; margin-top: 6px; }
.oauthbtn { width: 100%; background: #fff; border: 1.5px solid #cbd5e0; color: #2d3748; margin-top: 8px; }

/* 포트폴리오 행 */
.pfrow { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid #edf2f7; }
.pfrow .pf-main { flex: 1; min-width: 0; }
.pfrow .pf-name { font-weight: 700; font-size: 0.9rem; color: #1a365d; }
.pfrow .pf-sub { font-size: 0.74rem; color: #718096; margin-top: 2px; }
.pfrow .pf-ret { font-weight: 800; font-size: 0.92rem; }
.pfrow .pf-x { background: none; border: none; color: #cbd5e0; font-size: 1.1rem; cursor: pointer; padding: 4px 6px; }
.pfrow .pf-x:active { color: #9b2c2c; }
.watchtag { font-size: 0.68rem; background: #fefcbf; color: #8a5a00; padding: 1px 6px; border-radius: 8px; margin-left: 4px; }

/* ── 트랙 세그먼트 ─────────── */
.trackseg {
  display: flex; gap: 6px; padding: 8px 12px; background: #f0f4f9;
  position: sticky; top: 45px; z-index: 90; border-bottom: 1px solid #e2e8f0; overflow-x: auto;
}
.seg {
  flex: 1; min-width: 92px; white-space: nowrap; padding: 8px 10px; border-radius: 8px;
  border: 1.5px solid #cbd5e0; background: #fff; color: #4a5568;
  font-size: 0.85rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: all .12s;
}
.seg.active { background: #1a365d; color: #fff; border-color: #1a365d; }

/* ── 하단 탭바 (모바일) ─────────── */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  display: flex; background: #fff; border-top: 1px solid #e2e8f0;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.06); padding-bottom: env(safe-area-inset-bottom, 0);
}
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 2px 7px; border: none; background: none; cursor: pointer;
  color: #a0aec0; font-family: inherit; border-top: 2px solid transparent;
}
.tab .ti { font-size: 1.25rem; line-height: 1; }
.tab .tl { font-size: 0.7rem; font-weight: 600; }
.tab.active { color: #1a365d; border-top-color: #276749; }
.tab.active .tl { color: #276749; }

.appmain { padding-bottom: 4px; }
body { padding-bottom: 64px; }

@media (min-width: 769px) {
  body { padding-bottom: 0; }
  .tabbar {
    position: sticky; top: 0; bottom: auto; box-shadow: none;
    max-width: 1100px; margin: 0 auto; border-top: none;
  }
  .topbar { display: none; }
  .tab { flex: 0 0 auto; flex-direction: row; gap: 7px; padding: 12px 22px;
    border-top: none; border-bottom: 3px solid transparent; }
  .tab .ti { font-size: 1.1rem; }
  .tab .tl { font-size: 0.95rem; }
  .tab.active { border-bottom-color: #276749; }
  .trackseg { top: 0; }
  .trackseg .seg { flex: 0 0 auto; min-width: 0; }
}

/* ── 화면 공통 ─────────── */
.screen { max-width: 1100px; margin: 0 auto; padding: 16px 12px; }
.card {
  background: white; border-radius: 12px; padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06); margin-bottom: 14px;
}
.card h2 { font-size: 1.1rem; color: #1a365d; margin-bottom: 12px; }
.card h3 { font-size: 0.95rem; color: #2c5282; margin-bottom: 8px; }
.muted { color: #718096; font-size: 0.82rem; line-height: 1.6; }
.sub { font-size: 0.78rem; color: #a0aec0; margin-top: 6px; }

/* ── 면책 ─────────── */
.disclaimer {
  background: #fff3cd; border-top: 2px solid #ffc107;
  padding: 10px 16px; text-align: center; font-size: 0.76rem; color: #856404;
}

/* ── 홈 요약 타일 ─────────── */
.tilewrap { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile {
  border-radius: 12px; padding: 16px; cursor: pointer; color: #fff; border: none;
  text-align: left; font-family: inherit; transition: transform .1s;
}
.tile:active { transform: scale(0.98); }
.tile .big { font-size: 1.8rem; font-weight: 800; line-height: 1; }
.tile .lbl { font-size: 0.82rem; margin-top: 6px; opacity: 0.95; }
.tile.buy { background: linear-gradient(135deg,#2f855a,#276749); }
.tile.sell { background: linear-gradient(135deg,#c53030,#9b2c2c); }
.tile.wait { background: linear-gradient(135deg,#d69e2e,#b7791f); }
.tile.info { background: linear-gradient(135deg,#3182ce,#2c5282); }

/* ── 상태 칩 ─────────── */
.chip { display: inline-block; padding: 3px 9px; border-radius: 12px; font-size: 0.74rem; font-weight: 700; white-space: nowrap; }
.chip-buy { background: #c6f6d5; color: #22633f; }
.chip-near { background: #fefcbf; color: #8a5a00; }
.chip-hold { background: #edf2f7; color: #4a5568; }
.chip-sell { background: #fed7d7; color: #9b2c2c; }
.badge { display: inline-block; padding: 2px 7px; border-radius: 10px; font-size: 0.72rem; font-weight: 600; }
.badge-green { background: #c6f6d5; color: #276749; }
.badge-blue { background: #bee3f8; color: #2c5282; }
.badge-gray { background: #edf2f7; color: #4a5568; }
.badge-amber { background: #fefcbf; color: #975a16; }

/* ── 종목 리스트(카드형) ─────────── */
.filterbar { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.filterbar input[type=search] {
  flex: 1; min-width: 140px; border: 1px solid #cbd5e0; border-radius: 8px; padding: 9px 12px; font-size: 0.9rem;
}
.toggle { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: #4a5568; cursor: pointer; user-select: none; }
.stockrow {
  display: flex; align-items: center; gap: 10px; padding: 12px 6px;
  border-bottom: 1px solid #edf2f7; cursor: pointer;
}
.stockrow:active { background: #f0f7ff; }
.srow-main { flex: 1; min-width: 0; }
.srow-name { font-weight: 700; font-size: 0.95rem; color: #1a365d; }
.srow-code { font-size: 0.72rem; color: #a0aec0; font-weight: 600; margin-left: 4px; }
.srow-sub { font-size: 0.76rem; color: #718096; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srow-right { text-align: right; flex-shrink: 0; }
.srow-price { font-weight: 700; font-size: 0.92rem; }
.srow-chip { margin-top: 4px; }
.scorebar { display:flex; height:8px; width:64px; border-radius:5px; overflow:hidden; background:#edf2f7; margin-top:4px; margin-left:auto; }
.scorebar > i { height:100%; display:block; }

/* 펼침 상세 */
.detail { background: #f7fafc; border-radius: 10px; padding: 14px; margin: 2px 0 8px; }
.dgrid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px 8px; }
.dgrid .dl { font-size: 0.68rem; color: #718096; }
.dgrid .dv { font-size: 0.92rem; font-weight: 700; color: #1a365d; }
.flagchips { display:flex; flex-wrap:wrap; gap:5px; margin-top:10px; }

/* ── 액션 카드 ─────────── */
.actcard {
  border-radius: 12px; padding: 14px; margin-bottom: 10px; border-left: 5px solid #cbd5e0; background:#fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.actcard.buy { border-left-color:#2f855a; }
.actcard.sell { border-left-color:#c53030; }
.actcard.near { border-left-color:#d69e2e; }
.actcard .ac-top { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.actcard .ac-name { font-weight:800; font-size:1rem; color:#1a365d; }
.actcard .ac-line { font-size:0.84rem; color:#4a5568; margin-top:6px; }
.copybtns { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.btn { padding: 8px 14px; border: none; border-radius: 8px; cursor: pointer; font-size: 0.84rem; font-weight: 700; font-family: inherit; }
.btn-out { background:#fff; border:1.5px solid #cbd5e0; color:#2c5282; }
.btn-out:active { background:#ebf4ff; }
.btn-primary { background:#1a365d; color:#fff; }
.section-title { font-size: 0.92rem; font-weight: 800; margin: 16px 0 8px; display:flex; align-items:center; gap:6px; }

/* ── 성과 스코어카드 ─────────── */
.sctable { width:100%; border-collapse: collapse; font-size: 0.82rem; }
.sctable th, .sctable td { padding: 8px 6px; border-bottom:1px solid #e2e8f0; text-align:right; white-space:nowrap; }
.sctable th { background:#1a365d; color:#fff; text-align:right; font-size:0.76rem; }
.sctable th:first-child, .sctable td:first-child { text-align:left; }
.pos { color:#276749; font-weight:700; }
.neg { color:#9b2c2c; font-weight:700; }

/* ── 원칙 아코디언 ─────────── */
.accordion { border:1px solid #e2e8f0; border-radius:10px; overflow:hidden; margin-bottom:10px; }
.acc-head { background:#edf2f7; padding:12px 14px; cursor:pointer; display:flex; justify-content:space-between; font-weight:700; font-size:0.9rem; }
.acc-body { padding:14px; display:none; line-height:1.7; font-size:0.85rem; }
.acc-body.open { display:block; }
.acc-body ul { padding-left:18px; }

/* ── 로딩 / 토스트 ─────────── */
.loading { text-align: center; padding: 48px; color: #718096; }
.spinner { display:inline-block; width:22px; height:22px; border:3px solid #e2e8f0; border-top-color:#1a365d; border-radius:50%; animation:spin .8s linear infinite; margin-right:8px; vertical-align:middle; }
@keyframes spin { to { transform: rotate(360deg); } }
.empty { text-align:center; padding:32px; color:#a0aec0; font-size:0.9rem; }
.toast {
  position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%);
  background: #1a365d; color: #fff; padding: 10px 18px; border-radius: 22px;
  font-size: 0.84rem; z-index: 999; opacity: 0; transition: opacity .2s; pointer-events:none;
}
.toast.show { opacity: 0.96; }

@media (max-width: 768px) {
  .dgrid { grid-template-columns: 1fr 1fr; }
}