* { box-sizing: border-box; }

body {
  font-family: -apple-system, "SF Pro Text", "Segoe UI", "Malgun Gothic", sans-serif;
  margin: 0;
  background: #F4F8FC;
  color: #1D1D1F;
  -webkit-font-smoothing: antialiased;
}

.topnav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.9rem 2rem;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.topnav .brand { font-weight: 700; margin-right: 0.5rem; font-size: 1.05rem; color: #1D1D1F; }
.topnav a { color: #6E6E73; text-decoration: none; font-weight: 600; font-size: 0.92rem; transition: color 0.2s; }
.topnav a:hover { color: #4A90D9; }
/* 모바일(≤640px)에서만 접히는 햄버거 메뉴(2026-08-25, owner가 목업 비교 후 선택;
   2026-08-26 <details>/<summary>에서 체크박스 방식으로 교체) — 데스크톱에서는
   .topnav-menu가 flex 레이아웃에 아예 안 보이게(display:contents) 만들고 체크박스/
   토글 라벨은 숨긴 채 링크를 지금처럼 항상 가로로 펼쳐 보여준다. 실제 접힘/펼침은
   아래 640px 미디어쿼리에서만 켜진다.
   (<details>였을 때는 데스크톱에서 링크가 전부 사라지는 버그가 있었음 — 닫힌
   <details>의 summary 아닌 자식은 브라우저가 open 속성 유무로만 렌더 여부를 결정해서
   .topnav-links에 display:flex를 줘도 무시됨. display:contents는 <details> 자체
   박스만 없앨 뿐 이 네이티브 숨김을 못 이김. 체크박스는 이런 네이티브 강제 숨김이 없어
   CSS만으로 두 화면 폭 다 정확히 제어된다.) */
.topnav-menu { display: contents; }
.topnav-links { display: flex; align-items: center; gap: 1.5rem; }
.topnav-menu-toggle { display: none; }
.topnav-menu-checkbox { position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden; }
/* 로그인 사용자 표시/로그아웃(2026-08-19) — 오른쪽 끝으로 밀어서 nav 링크와 분리 */
.topnav .nav-user { margin-left: auto; color: #6E6E73; font-size: 0.88rem; }
.topnav .nav-logout { margin: 0; }
.topnav .nav-logout button { padding: 0.4rem 0.9rem; font-size: 0.85rem; }
/* 초대 공유 버튼(2026-09-28) — 로그아웃 버튼과 같은 크기로 맞춤 */
.topnav .nav-share-btn { padding: 0.4rem 0.9rem; font-size: 0.85rem; }
/* 비로그인 화면(로그인/가입/비밀번호 재설정)에서 hub 홈으로 돌아가는 링크(2026-08-21) —
   nav-user/nav-logout과 같은 방식으로 margin-left:auto를 줘서 우측 정렬한다. */
.topnav .nav-home-link { margin-left: auto; }

main { max-width: 760px; margin: 2.5rem auto; padding: 0 1.5rem 4rem; }
/* 표 컬럼이 많은 화면(보유 종목)만 더 넓게 — 다른 화면(대시보드/목표/시뮬레이션/달력)은
   원래 폭(760px)을 그대로 쓴다. */
main.main-wide { max-width: 1280px; }
h1 { font-size: 1.7rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 1.5rem; }
h2 { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; margin: 2.5rem 0 1rem; }

.card, .goal-card {
  background: #fff;
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
  margin-bottom: 1.5rem;
  /* table-layout이 auto라 긴 종목명/수정 폼(nowrap)이 카드 너비보다 넓어질 수 있음 —
     카드 밖으로 깨져나가는 대신 카드 안에서 가로 스크롤되게 한다. */
  overflow-x: auto;
}

label { font-weight: 600; font-size: 0.92rem; color: #1D1D1F; }

form { margin-bottom: 1.5rem; display: flex; flex-wrap: nowrap; gap: 0.6rem; align-items: center; }
/* form이 카드의 마지막(=유일한) 자식이면 margin-bottom이 카드 자체 padding-bottom과
   합쳐져서 아래쪽 여백만 위쪽(카드 padding-top)의 두 배가 됐다 — 그 경우엔 카드 padding만
   으로 위아래를 맞춘다. */
.card form:last-child { margin-bottom: 0; }
form.inline, form.inline-form { display: inline-flex; margin: 0; flex-wrap: nowrap; }

input, select {
  flex: 1 1 0;
  min-width: 0;
  padding: 0.65rem 0.9rem;
  border-radius: 10px;
  border: none;
  background: #F4F8FC;
  font-size: 0.95rem;
  color: #1D1D1F;
  transition: box-shadow 0.2s, background 0.2s;
}
/* 체크박스는 위 텍스트 인풋 스타일(둥근 배경 박스)을 그대로 물려받으면 커지고
   이상해 보여서 제외하고 네이티브 모양 그대로 둔다(2026-08-21, API 설정 화면의
   국내/해외 대상 체크박스에서 처음 필요해짐). */
input[type="checkbox"] {
  flex: none;
  width: auto;
  padding: 0;
  border-radius: 0;
  background: none;
  accent-color: #4A90D9;
}
.checkbox-label { font-weight: 400 !important; display: inline-flex; align-items: center; gap: 0.4rem; margin-right: 1rem; }
input:focus, select:focus { outline: none; box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.25); background: #fff; }

button {
  flex: 0 0 auto;
  padding: 0.65rem 1.3rem;
  border-radius: 999px;
  border: none;
  background: #8FC1EA;
  color: #fff;
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  transition: transform 0.15s, background 0.2s;
}
button:hover { background: #7BB3E0; }
button:active { transform: scale(0.96); }
button.danger { background: rgba(224, 122, 122, 0.15); color: #C75450; }
button.danger:hover { background: rgba(224, 122, 122, 0.25); }

/* 시나리오에 내가 직접 입력한 증감 수량 — 여러 컬럼 중에 눈에 띄어야 해서(owner 요청)
   빨간 박스로 강조한다. 삭제 버튼과 같은 accent 색(#C75450)을 재사용해 톤을 맞춤. */
.qty-delta-badge { display: inline-block; border: 2px solid #C75450; color: #C75450; font-weight: 700; border-radius: 8px; padding: 0.15rem 0.6rem; }

/* 매수 진행 체크 화면 — 계획 항목별 실제 체결 대조 상태 배지 */
.plan-status { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.8rem; font-weight: 700; }
.plan-status--done { background: rgba(168, 221, 200, 0.35); color: #3E8F6B; }
.plan-status--partial { background: rgba(246, 214, 115, 0.35); color: #B08900; }
.plan-status--missing { background: rgba(224, 122, 122, 0.15); color: #C75450; }
.plan-status--unknown { background: rgba(134, 134, 139, 0.15); color: #6E6E73; }

button.secondary { background: rgba(74, 144, 217, 0.12); color: #4A90D9; }
button.secondary:hover { background: rgba(74, 144, 217, 0.2); }

/* 증권사 키 설정 폼 — 라벨이 길어서(예: "국내 계좌번호 (콤마로 여러 개 가능, 없으면
   비워둠)") 전역 인라인 form 규칙을 쓰면 라벨이 여러 줄로 줄바꿈되며 지저분해 보임
   (2026-08-20, owner 스크린샷 확인 후 목업 3안 중 2열 그리드 선택) — 이 폼만 라벨을
   입력칸 위로 옮긴 2열 그리드로 스코프 */
.credential-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.2rem;
  align-items: end;
}
.credential-form .field { display: flex; flex-direction: column; gap: 0.35rem; }
.credential-form .field label { margin: 0; }
.credential-form .field input { flex: none; width: 100%; }
/* 위 규칙이 텍스트 인풋을 염두에 둔 거라 체크박스에도 그대로 적용되면 체크박스가
   필드 전체 폭으로 늘어나 버린다(2026-08-21, API 설정 화면 "대상 시장" 체크박스에서
   처음 발견) — 명시적으로 다시 좁힌다. */
.credential-form .field input[type="checkbox"] { width: auto; }
.credential-form .field--submit { justify-content: flex-end; }
/* 라벨 자체는 짧게 유지하고(줄바꿈 방지), 부가 설명은 라벨 바로 아래 작은 캡션으로
   분리(2026-08-20, "국내 계좌번호 (콤마로 여러 개...)"가 2열 그리드에서도 여전히
   줄바꿈된다는 owner 피드백 반영) */
.credential-form .field-hint { margin: -0.2rem 0 0; font-size: 0.78rem; color: #86868B; }

/* 필드가 여러 개라 한 줄 인라인 form으로는 안 맞는 세로 폼(가입 요청 등, 2026-08-20) —
   label/input이 form 바로 아래 형제로 있으면 flex-column만으로 각자 한 줄씩 차지해서
   .field 래퍼 없이도 깔끔하게 쌓인다. */
.stacked-form { flex-direction: column; align-items: stretch; }
.stacked-form label { margin: 0.2rem 0 0; }
.stacked-form label:first-child { margin-top: 0; }
.stacked-form input, .stacked-form select { width: 100%; }
.stacked-form button { align-self: flex-start; margin-top: 0.4rem; }

table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 0.78rem; color: #86868B; font-weight: 600; padding: 0 0.5rem 0.6rem; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; }
th a { color: inherit; text-decoration: none; }
th a:hover { color: #4A90D9; }
td { padding: 0.8rem 0.5rem; border-top: 1px solid #EAF2F9; font-size: 0.95rem; white-space: nowrap; }
td:last-child { text-align: right; }

/* 보유 종목 표 헤더 설명 말풍선(배당수익률/매입원가 수익률, 2026-08-27) — 별도 아이콘을
   덧붙이면 그만큼 헤더 폭이 늘어나 좁은 화면에서 표 오른쪽(연간 예상 배당/수정/삭제)이
   밀려 잘려 보이는 회귀가 있었다(owner 스크린샷으로 확인, 2026-08-27 같은 날 수정) —
   대신 폭을 전혀 늘리지 않게 기존 헤더 링크(.th-tip) 자체에 점선 밑줄만 추가해
   "마우스 올리면 뭔가 있다"는 힌트만 주고, 마우스 오버/포커스하면 JS가
   .th-tip-bubble을 fixed로 띄운다. */
th a.th-tip {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  cursor: help;
}
.th-tip-bubble {
  position: fixed;
  display: none;
  background: #1D1D1F;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.45;
  white-space: normal;
  width: max-content;
  max-width: 240px;
  padding: 0.6rem 0.8rem;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  pointer-events: none;
}
.th-tip-bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  left: var(--arrow-left, 50%);
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #1D1D1F;
}

/* 보유 종목 표 컬럼 숨김 토글(2026-08-27) — 숨긴 컬럼의 th/td에 붙는 클래스. */
.col-hidden { display: none; }
.column-toggle-list { display: flex; flex-wrap: wrap; gap: 0.5rem 1.3rem; }

.badge { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; }
.badge.kr { background: #D6E9F8; color: #4A90D9; }
.badge.us { background: #FCF2D0; color: #C9A227; }

.row-actions { display: flex; gap: 0.4rem; justify-content: flex-end; }
.row-actions button { padding: 0.35rem 0.75rem; font-size: 0.82rem; }

.edit-row { background: #F7FBFE; border-radius: 12px !important; }
/* 수정 폼은 표 열 너비에 안 맞으면 카드 밖으로 넘치는 대신 다음 줄로 줄바꿈되게 한다
   (기본 .inline-form은 nowrap이라 필드가 많으면 폭이 좁은 카드에서 넘칠 수 있음). */
.edit-row form.inline-form { flex-wrap: wrap; row-gap: 0.5rem; }
.edit-row input, .edit-row select { flex: 1 1 140px; min-width: 100px; }
/* 부모(inline-flex)의 줄바꿈 정렬만으로는 중앙 정렬이 먹지 않아, 버튼을 별도 줄(flex-basis
   100%)로 강제하고 그 안에서 직접 가운데 정렬한다. */
.edit-row .edit-actions { flex-basis: 100%; display: flex; justify-content: center; gap: 0.4rem; }

.progress-bar { background: #DCEBF7; border-radius: 999px; height: 8px; overflow: hidden; margin: 0.5rem 0; }
.progress-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #8FC1EA, #F6D673); }
.progress-label { margin: 0; color: #86868B; font-size: 0.85rem; }

.scenario-list { list-style: none; padding: 0; display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.scenario-list li { padding: 0.4rem 0.8rem; background: #fff; border-radius: 999px; border: 1px solid #E1EDF6; display: flex; align-items: center; gap: 0.5rem; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); }
.scenario-list li a { text-decoration: none; color: #1D1D1F; font-weight: 600; font-size: 0.92rem; }
.scenario-list li.active { border-color: #8FC1EA; background: rgba(74, 144, 217, 0.1); }
.scenario-list li.active a { color: #4A90D9; }
.scenario-list li form.inline button { padding: 0.25rem 0.6rem; font-size: 0.78rem; }

.hint { color: #86868B; font-size: 0.88rem; }
.empty-notice { background: #fff; border: 1px dashed #C7DCEC; border-radius: 16px; padding: 1.25rem; color: #86868B; }
.error-notice { background: rgba(224, 122, 122, 0.1); border: 1px solid rgba(224, 122, 122, 0.35); border-radius: 12px; padding: 0.9rem 1.1rem; color: #C75450; font-weight: 600; }

.calendar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8rem; }
.calendar-cell { background: #fff; border-radius: 14px; padding: 0.9rem; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 16px rgba(0, 0, 0, 0.05); min-height: 108px; }
.calendar-cell.empty { background: transparent; border: 1px dashed #C7DCEC; box-shadow: none; }
.calendar-month { font-size: 0.78rem; color: #86868B; font-weight: 600; margin-bottom: 0.3rem; }
.calendar-total { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.5rem; }
.calendar-chip { display: inline-block; background: #DCEBF7; color: #3E7CB1; border-radius: 8px; padding: 0.15rem 0.4rem; font-size: 0.72rem; margin: 0 0.2rem 0.2rem 0; }
.calendar-empty-label { font-size: 0.85rem; color: #C7C7CC; margin-top: 1.2rem; }
.tax-toggle { display: inline-flex; gap: 0.3rem; background: rgba(134, 134, 139, 0.1); border-radius: 999px; padding: 0.25rem; }
.tax-toggle-btn { padding: 0.45rem 1.1rem; border-radius: 999px; border: none; background: transparent; color: #6E6E73; font-weight: 600; font-size: 0.88rem; cursor: pointer; transition: background 0.15s, color 0.15s; }
.tax-toggle-btn.active { background: #4A90D9; color: #fff; }

/* 보유 종목 화면 상단 — 세전/세후 토글(좌)과 증권사 동기화·백업 버튼(우)을 한 줄에
   배치(2026-08-25, owner 스크린샷 지시로 버튼을 하단 카드에서 상단으로 이동). */
.page-header-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.8rem; }
.page-header-row .tax-toggle { margin-bottom: 0; }

.calendar-cell.clickable { cursor: pointer; border: 2px solid transparent; transition: border-color 0.15s, transform 0.1s; }
.calendar-cell.clickable:hover { transform: translateY(-1px); }
.calendar-cell.selected { border-color: #4A90D9; }

.calendar-detail { margin-top: 1.2rem; }
.calendar-detail-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.9rem; }
.calendar-detail-empty { color: #86868B; font-size: 0.9rem; }
.calendar-day-row { display: flex; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid #F0F4F8; }
.calendar-day-row:last-child { border-bottom: none; }
.calendar-day-label { flex: 0 0 84px; font-weight: 700; color: #1D1D1F; }
.calendar-day-label.unknown { color: #86868B; font-weight: 600; font-size: 0.85rem; }
.calendar-day-items { flex: 1; display: flex; flex-direction: column; gap: 0.35rem; }
.calendar-day-item { display: flex; justify-content: space-between; font-size: 0.92rem; }
.calendar-day-item .name { color: #1D1D1F; }
.calendar-day-item .amount { color: #3E7CB1; font-weight: 600; }
/* 미국 종목 날짜가 실제 지급일이 아니라 배당락일(ex-date) 근사치임을 표시하는 태그
   (2026-08-27) — .badge.us와 같은 톤(옐로 계열)을 재사용해 "미국"이라는 인상과 연결. */
.calendar-day-item-tag { display: inline-block; margin-left: 0.4rem; padding: 0.05rem 0.4rem; border-radius: 999px; background: #FCF2D0; color: #C9A227; font-size: 0.68rem; font-weight: 600; vertical-align: middle; }
/* 국내 종목의 배당 기준일(근사 배당락일) 참고 태그(2026-08-31) — ex-date(US) 태그와
   구분되도록 옐로 대신 그레이/블루 계열 톤을 씀. */
.calendar-day-item-tag.record { background: #E8EEF3; color: #5A7891; }
.calendar-day-total { flex: 0 0 auto; color: #86868B; font-size: 0.85rem; align-self: flex-start; }

.pie-row { display: flex; gap: 1rem; }
.pie-col { flex: 1; min-width: 0; }
.pie-col-label { text-align: center; font-size: 0.85rem; font-weight: 700; color: #86868B; margin-bottom: 0.4rem; }
.chart-box { position: relative; height: 380px; }
.chart-box .center-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; }
.chart-box .center-label .amt { font-size: 1.05rem; font-weight: 700; }
.chart-box .center-label .cap { font-size: 0.72rem; color: #86868B; }

.plan-toggle-row { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.owner-btn, .claude-btn { padding: 0.65rem 1.3rem; border-radius: 999px; border: none; font-weight: 600; font-size: 0.92rem; cursor: pointer; }
.owner-btn { background: rgba(134, 134, 139, 0.12); color: #6E6E73; }
.owner-btn:hover { background: rgba(134, 134, 139, 0.2); }
.claude-btn { background: rgba(74, 144, 217, 0.12); color: #4A90D9; }
.claude-btn:hover { background: rgba(74, 144, 217, 0.2); }
/* td:last-child가 기본적으로 오른쪽 정렬(액션 버튼 열 기준)인데, 이 표는 마지막 열이
   버튼이 아니라 칩 목록이라 "월"(왼쪽 정렬)과 다르게 보였다 — 둘 다 왼쪽 정렬로 통일. */
.schedule-table td:last-child { text-align: left; }
/* Owner/Claude 매수 계획을 왼쪽 컬러 보더가 있는 별도 카드로 구분(owner 승인 목업 1안). */
.plan-card { background: #fff; border-radius: 16px; padding: 1.5rem; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06); margin-bottom: 1.5rem; border-left: 4px solid transparent; overflow-x: auto; }
.plan-card--owner { border-left-color: #B8B8BD; }
.plan-card--claude { border-left-color: #8FC1EA; }
.plan-card h3 { margin: 0 0 0.4rem; font-size: 1.05rem; }
.plan-card--owner h3 { color: #6E6E73; }
.plan-card--claude h3 { color: #4A90D9; }
.plan-card h4 { margin: 1.2rem 0 0.6rem; font-size: 0.92rem; color: #6E6E73; }
.callout-box { display: inline-block; margin: 1rem 0; padding: 0.8rem 1.1rem; border: 1px solid rgba(74, 144, 217, 0.4); border-radius: 12px; background: rgba(74, 144, 217, 0.08); color: #1D1D1F; }
.callout-box strong { color: #4A90D9; }

/* 넓어진 화면(main-wide)에서 필드가 하나뿐인 폼이 flex:1 때문에 카드 전체 폭으로
   불필요하게 늘어나 보이던 문제 — 폼을 내용 폭만큼만 차지하는 인라인 블록으로 감싼다. */
.form-inline-wrap { display: inline-block; }
/* inline-form(inline-flex, 내용물 크기만큼만 차지)은 필드가 여러 개일 땐 괜찮지만, 이
   폼처럼 입력칸이 하나뿐이면 flex:1 기준 크기가 애매해져 placeholder 문구보다 좁게
   찌그러들 수 있다 — 최소 폭을 직접 지정해 항상 넉넉하게 보이게 한다. */
.scenario-name-input { flex: 1 1 320px; min-width: 260px; }

/* 시나리오 제목 클릭-수정(연필 아이콘 → 인라인 텍스트창) */
.scenario-title-row { display: flex; align-items: center; gap: 0.5rem; margin: 2.5rem 0 1rem; }
.scenario-title-row h2 { margin: 0; }
.scenario-title-row input[type="text"] { font-size: 1.3rem; font-weight: 700; flex: 1 1 auto; }
.edit-icon-btn { flex: 0 0 auto; background: transparent; color: #86868B; padding: 0.3rem; width: 2rem; height: 2rem; min-width: 2rem; font-size: 1.1rem; line-height: 1; border-radius: 8px; }
.edit-icon-btn:hover { background: rgba(74, 144, 217, 0.12); color: #4A90D9; }

/* 좌측 사이드바 + 우측 상세 패널 공용 레이아웃(2026-08-21) — 처음엔 관리자 화면
   (admin_base.html)만 썼지만, 증권사 API 설정 화면(broker_credentials.html)도 같은
   구조를 재사용하게 되면서 이름을 범용으로 바꿨다(admin-* → side-panel-*, 시각적으로는
   동일). 색상은 .topnav a / button.secondary와 같은 팔레트(#6E6E73 기본, hover/active
   #4A90D9 + rgba(74,144,217,0.12) 배경)를 재사용. 항목은 관리자 화면처럼 `<a>`로 페이지
   이동할 수도, 증권사 설정처럼 `<button>`으로 같은 페이지 안에서 패널만 바꿀 수도 있어
   `.side-panel-nav-item` 클래스를 각 항목에 직접 붙인다(태그 종류에 의존하지 않음). */
.side-panel-layout { display: flex; gap: 2rem; align-items: flex-start; }
.side-panel-nav {
  /* 180px였을 때 "나무증권(NH투자증권)" 같은 긴 라벨이 실측 텍스트 폭(약 154px, bold
     15px 기준)+좌우 패딩+점 표시를 합치면 180px보다 넓어서 word-break: keep-all을
     붙여도 결국 어딘가에서 줄바꿈될 수밖에 없었다(2026-08-21, owner 스크린샷으로 재확인
     — keep-all만으로는 근본 해결이 안 됨). 실제 필요한 폭보다 여유 있게 230px로 넓혀
     한 줄에 다 들어가게 한다. */
  flex: 0 0 230px;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  background: #fff;
  border-radius: 16px;
  padding: 0.8rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
  position: sticky;
  top: 5.5rem;
}
.side-panel-nav-item {
  display: block;
  width: 100%;
  padding: 0.6rem 0.8rem;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: #6E6E73;
  text-decoration: none;
  text-align: left;
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  /* 사이드바 폭(180px)보다 긴 라벨("한국투자증권(KIS)" 등)이 2줄로 줄바꿈될 때, 기본
     word-break로는 "투자"/"증권" 사이처럼 단어 중간이 끊겨 보였다(2026-08-21 owner
     지적) — keep-all로 단어 단위로만 줄바꿈되게 한다. */
  word-break: keep-all;
  overflow-wrap: break-word;
}
.side-panel-nav-item:hover { background: rgba(74, 144, 217, 0.08); color: #4A90D9; }
.side-panel-nav-item.active { background: rgba(74, 144, 217, 0.12); color: #4A90D9; }
.side-panel-content { flex: 1; min-width: 0; }

/* API 설정 화면(broker_credentials.html)의 사이드바 항목 앞 설정 여부 점(2026-08-21) —
   관리자 사이드바는 항목 자체가 몇 개 안 되는 페이지 링크라 뱃지가 필요 없었지만, 여긴
   증권사가 늘어날수록 "이미 설정한 것 vs 아직 안 한 것"을 한눈에 구분할 필요가 있다. */
.provider-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 999px;
  margin-right: 0.5rem;
  border: 2px solid #C7DCEC;
  vertical-align: middle;
}
.provider-dot--done { background: #4A90D9; border-color: #4A90D9; }

@media (max-width: 640px) {
  /* topnav 햄버거 메뉴(2026-08-25) — 첫 줄엔 [브랜드] … [사용자] [로그아웃]을 그대로
     유지하고, 토글 버튼(.topnav-menu)은 order로 밀어 둘째 줄에 전체 폭으로 붙인다.
     탭하면 그 아래(셋째 블록)로 링크 목록이 세로로 펼쳐진다 — 오버레이/절대좌표 없이
     페이지 흐름 안에서 내용을 아래로 미는 방식이라 z-index/바깥 클릭 닫기가 불필요. */
  .topnav { flex-wrap: wrap; padding: 0.75rem 1rem; gap: 0.75rem; }
  .topnav-menu { display: block; order: 10; flex-basis: 100%; }
  .topnav-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0.4rem 0.7rem;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #6E6E73;
  }
  .topnav-links { display: none; flex-direction: column; align-items: flex-start; gap: 0.9rem; padding: 0.9rem 0 0.2rem; }
  .topnav-menu-checkbox:checked ~ .topnav-links { display: flex; }

  /* align-items:flex-start(데스크톱 기본, 좌우 패널을 위쪽 정렬)가 세로 방향에서는
     .side-panel-content를 컨테이너 폭에 맞춰 늘리지 않고 내용물(넓은 표 등) 크기에
     맞춰 줄어들게 만들어(fit-content), 표가 카드 안에서 스크롤되는 대신 카드/페이지
     전체가 표 폭만큼 밀려나 가로로 넘치는 버그가 있었다(2026-08-25, 관리자 사용자
     목록 표로 실기기 급 모바일 뷰포트 검증 중 발견). stretch로 폭을 꽉 채우면
     .side-panel-content의 기존 min-width:0과 함께 카드의 overflow-x:auto가 정상
     작동해 표만 카드 안에서 가로 스크롤된다. */
  .side-panel-layout { flex-direction: column; align-items: stretch; }
  .side-panel-nav { flex-direction: row; flex: none; width: 100%; overflow-x: auto; position: static; }

  form { flex-direction: column; align-items: stretch; }
  form.inline, form.inline-form { flex-direction: row; }
  /* .scenario-name-input의 flex:1 1 320px(데스크톱에서 가로폭 기준)이 폼이 세로로
     쌓이는 모바일에서는 주축이 세로로 바뀌면서 320px가 "높이" 기준으로 적용돼 입력칸이
     비정상적으로 크게 늘어나던 문제(2026-08-25, 시뮬레이션 화면 실기기 급 모바일
     뷰포트 검증 중 발견) — 세로 모드에서는 높이를 내용 기준으로 되돌린다. */
  .scenario-name-input { flex: 0 1 auto; min-width: 0; }
  .row-actions { justify-content: flex-start; }
  .page-header-row { flex-direction: column; align-items: stretch; }
  .page-header-row .row-actions { justify-content: flex-start; }
  .calendar-grid { grid-template-columns: repeat(2, 1fr); }
  .pie-row { flex-direction: column; }
  .credential-form { grid-template-columns: 1fr; }
}