/* =====================================================================
   v3.0.2 디자인 (2026-10-09) — v3.0.0 구조 그대로, 색만 변경
   - 배경: #51A687(세이지 그린) 기준 위→아래 그라데이션
   - 블럭: #06402B(딥 그린), 테두리 선 없이 "그림자 + 안쪽 하이라이트"로 배경과 분리
   - 글자: #FFFFFF + 은은한 그림자
   - 글꼴: Pretendard(중간 굵기, 자간을 좁혀 조밀하게)
   - 모든 버튼/링크 버튼: hover 시 떠오름 + 밝아짐, 클릭 시 눌림
   - 모의/실제 토글: 모의=green, 실제=red
   - 알림: 화면 앞에 뜨는 팝업(메시지 창)
   ===================================================================== */
:root {
  --bg: #51A687;
  --bg-top: #66B899;
  --bg-bottom: #3A8A6C;
  --block: #06402B;
  --block-deep: #032E1E;   /* 블럭 안의 작은 칸(stat) */
  --field: rgba(0, 0, 0, 0.28);
  --text: #FFFFFF;
  --text-soft: rgba(255, 255, 255, 0.78);
  --ink: #01180F;          /* 그림자용 */
  --btn: #0F6644;
  --btn-hover: #167A52;
  --green: #34B86A;
  --green-hover: #3FCB78;
  --red: #D64545;
  --red-hover: #E85555;
  --accent: #7C8FD0;
  --warn: #E59A2E;

  --shadow-text: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-block:
    0 1px 1px rgba(0, 0, 0, 0.12),
    0 6px 14px -4px rgba(0, 0, 0, 0.35),
    0 22px 40px -18px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25);
  --shadow-lift: 0 10px 22px -8px rgba(0, 0, 0, 0.6);
  --radius: 18px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  background-color: var(--bg-bottom);
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.45;
  color: var(--text);
  text-shadow: var(--shadow-text);
  background-color: var(--bg);
  background-image: linear-gradient(180deg, var(--bg-top) 0%, var(--bg) 40%, var(--bg-bottom) 100%);
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--text); }

/* ---------- 상단 바 + 섹션 이동 버튼 ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 28px;
  background: linear-gradient(180deg, rgba(102, 184, 153, 0.92), rgba(81, 166, 135, 0.85));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.6);
}

/* 블럭 밖(밝은 배경 바로 위)에 놓이는 흰 글자는 그림자를 더 진하게 줘서 읽히게 한다 */
.brand, .content > h1, .content > p, .content > .lead {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.brand { font-weight: 700; font-size: 17px; letter-spacing: -0.035em; white-space: nowrap; }

/* ---------- [v6.2.0 전면 개편] 상단 탭 — 하나의 연속된 띠 + 호버 서브메뉴 ----------
   이전엔 .navbtn 하나하나가 독립된 pill(둥근 사각형 + 그림자 + 간격)이었다.
   요청: "탭 모양을 윗줄 전체 모양으로 잡고 그라데이션으로 자연스럽게
   이어지도록, 섹션에 마우스를 올리면 세부 섹션이 나오도록." 이제 .navitem들이
   세로 구분선만으로 나뉘며 서로 맞붙어 있고(간격/독립 그림자 없음), 양 끝만
   둥글게 말려서 하나의 띠처럼 보인다. 호버/활성 상태는 단색 전환이 아니라
   그라데이션 음영으로 부드럽게 바뀐다. */
.mainnav { display: flex; flex: 1; align-items: stretch; }

.navitem { position: relative; display: flex; flex: 1 1 0; }
.navitem + .navitem { border-left: 1px solid rgba(255, 255, 255, 0.22); }
.navitem:first-child .navtab { border-radius: 999px 0 0 999px; }
.navitem:last-child .navtab { border-radius: 0 999px 999px 0; }

.navtab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 11px 14px;
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  text-align: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
  transition: background .22s var(--ease), box-shadow .22s var(--ease);
}
.navtab:hover { background: linear-gradient(180deg, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.02)); }
.navtab.active { background: linear-gradient(180deg, #0B5538, rgba(11, 85, 56, 0.75)); box-shadow: var(--shadow-block) inset; }

/* 하위 섹션 드롭다운(지금은 "투자" 탭만 해당) — 마우스를 올리면(:hover) 또는
   키보드로 포커스가 들어오면(:focus-within) 바로 아래에 나타난다. topbar는
   overflow를 걸지 않으므로(v6.0.4의 document.body 트릭과 다름) 보통의
   position:absolute로 충분하다. */
.navsub {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  min-width: 190px;
  padding: 6px;
  border-radius: 12px;
  background: var(--block);
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.navitem.has-sub:hover .navsub,
.navitem.has-sub:focus-within .navsub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.navsub-link {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color .15s;
}
.navsub-link:hover { background: rgba(255, 255, 255, 0.12); }
.navsub-link.active { background: var(--btn); }

.content {
  max-width: 1000px;
  margin: 0 auto;
  padding: 34px 24px 60px;
}

h1 { font-size: 26px; font-weight: 700; letter-spacing: -0.04em; margin: 0 0 6px; }
h2 { font-size: 17px; font-weight: 700; margin: 0 0 14px; }
h3 { font-size: 16px; font-weight: 700; margin: 0 0 4px; }
p.lead { color: var(--text-soft); margin-top: 0; margin-bottom: 22px; }

/* ---------- 투자 섹션 서브내비 ---------- */
.subnav { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 24px; }
.subnav a {
  padding: 8px 16px;
  border-radius: 12px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  background: var(--block);
  box-shadow: var(--shadow-block);
  transition: transform .22s var(--ease), background-color .22s, box-shadow .22s;
}
.subnav a:hover { transform: translateY(-2px); background: #0B5538; box-shadow: var(--shadow-block), var(--shadow-lift); }
.subnav a:active { transform: scale(.97); }
.subnav a.active { background: var(--btn); }

/* ---------- 블럭 ---------- */
.card {
  position: relative;
  background: var(--block);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-block);
}
/* 블럭 위쪽 가장자리에 빛이 번지는 느낌 — 선이 아니라 부드럽게 사라지는 하이라이트 */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 38%);
}
.card > * { position: relative; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }

.stat {
  background: var(--block-deep);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.06);
}
.stat .label { color: var(--text-soft); font-size: 12px; }
.stat .value { font-size: 21px; font-weight: 700; margin-top: 4px; letter-spacing: -0.04em; }

/* ---------- 표 ---------- */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 9px 8px; }
tr + tr td { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10); }
th { color: var(--text-soft); font-weight: 700; font-size: 12px; text-transform: uppercase; }
tbody tr, table tr { transition: background-color .18s; }
table tr:hover td { background: rgba(255, 255, 255, 0.08); }

/* ---------- 태그 ---------- */
.tag {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.16);
}
.tag.buy { background: var(--green); }
.tag.sell { background: var(--red); }
.tag.open { background: var(--green); }
.tag.closed { background: rgba(255, 255, 255, 0.18); }
.tag.kr { background: var(--accent); }
.tag.us { background: var(--warn); }

/* ---------- 폼 ---------- */
form.inline { display: inline; }
.form-row { margin-bottom: 12px; }
.form-row label { display: block; font-size: 12px; color: var(--text-soft); margin-bottom: 5px; }
/* [v6.0.4 추가 — 로그인 "아이디 저장" 체크박스] .form-row의 기본 label은
   "위에 라벨, 아래에 입력창"(block) 레이아웃이라 체크박스에는 안 맞는다 —
   체크박스는 자기 라벨과 한 줄에 나란히 있어야 자연스럽다. */
.form-row.checkbox-row { display: flex; align-items: center; gap: 8px; margin-top: -4px; }
.form-row.checkbox-row input[type="checkbox"] { width: auto; margin: 0; cursor: pointer; }
.form-row.checkbox-row label { display: inline; margin-bottom: 0; color: var(--text); font-size: 13px; cursor: pointer; }

input[type="text"], input[type="number"], input[type="password"], select, textarea {
  font: inherit;
  letter-spacing: inherit;
  background: var(--field);
  color: var(--text);
  text-shadow: var(--shadow-text);
  border: none;
  border-radius: 10px;
  padding: 9px 11px;
  font-size: 14px;
  width: 100%;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.45);
  transition: box-shadow .2s, background-color .2s;
}
input::placeholder, textarea::placeholder { color: rgba(255, 255, 255, 0.5); }
input:focus, select:focus, textarea:focus {
  outline: none;
  background: rgba(0, 0, 0, 0.38);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.45), 0 0 0 3px rgba(255, 255, 255, 0.3);
}
select option { color: #fff; background: #032E1E; text-shadow: none; }
textarea { min-height: 70px; }
input[type="checkbox"] { accent-color: var(--btn); }

/* ---------- 버튼 (모든 버튼 공통 hover 액션) ---------- */
button, input[type="submit"] {
  font: inherit;
  letter-spacing: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  text-shadow: var(--shadow-text);
  background: var(--btn);
  border: none;
  border-radius: 10px;
  padding: 9px 16px;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s, filter .2s;
}
button:hover, input[type="submit"]:hover {
  transform: translateY(-2px);
  background: var(--btn-hover);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35), var(--shadow-lift), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
button:active, input[type="submit"]:active { transform: translateY(1px) scale(.97); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); }
button:focus-visible, .navtab:focus-visible, .navsub-link:focus-visible, .subnav a:focus-visible { outline: 3px solid rgba(255, 255, 255, 0.7); outline-offset: 2px; }

button.secondary { background: rgba(255, 255, 255, 0.12); }
button.secondary:hover { background: rgba(255, 255, 255, 0.22); }
button.danger { background: var(--red); }
button.danger:hover { background: var(--red-hover); }
button.go-real { background: var(--red); }
button.go-real:hover { background: var(--red-hover); }
/* [v4.6.0] 거래조건 켜짐/꺼짐 토글 버튼 — 켜짐이면 초록, 꺼짐이면 기존 회색
   (.secondary)을 그대로 쓴다(템플릿이 상태에 따라 클래스를 바꿔 붙인다). */
button.toggle-on { background: var(--green); }
button.toggle-on:hover { background: var(--green-hover); }

.condition-row { display: grid; grid-template-columns: 1.4fr 0.8fr 0.8fr 0.8fr; gap: 8px; margin-bottom: 8px; }

/* 페이지에 고정으로 보이는 안내 문구(팝업 아님) */
.notice {
  background: var(--block-deep);
  border-radius: 12px;
  padding: 11px 15px;
  font-size: 13px;
  margin-bottom: 16px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* 오류 메시지 — JS가 있으면 팝업으로 옮겨지고, 없으면 이 모양 그대로 보인다 */
.error {
  background: var(--red);
  color: #fff;
  padding: 11px 15px;
  border-radius: 12px;
  margin-bottom: 16px;
  font-size: 14px;
}

/* ---------- 로그인/가입/OTP 설정 화면 ([v6.0.0]) ----------
   base.html(상단바/토글)을 쓰지 않는 단독 페이지라서, 화면 전체를 가운데
   카드 하나로 채운다. */
.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.auth-wrap .card { max-width: 420px; width: 100%; }
.auth-wrap h1 { text-align: center; }
.auth-wrap .lead { text-align: center; }
.auth-wrap .qr-box { display: flex; justify-content: center; margin: 16px 0; }
.auth-wrap .qr-box img { width: 220px; height: 220px; border-radius: 12px; background: #fff; padding: 10px; }
.auth-wrap .secret-code {
  display: block;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  background: var(--block-deep);
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 16px;
  word-break: break-all;
}
.auth-wrap button { width: 100%; margin-top: 4px; }
.auth-wrap .switch-link { text-align: center; margin-top: 14px; font-size: 13px; }

.strategy { margin-bottom: 22px; padding-bottom: 18px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1); }
.strategy:last-child { box-shadow: none; }
.strategy .section-label { color: var(--text-soft); font-size: 12px; text-transform: uppercase; margin: 10px 0 2px; font-weight: 700; }
.strategy .caveats { color: #FFF3D6; }
.strategy a { color: var(--text); text-decoration-color: rgba(255, 255, 255, 0.6); text-underline-offset: 3px; transition: opacity .2s; }
.strategy a:hover { opacity: .8; }

.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.muted { color: var(--text-soft); font-size: 13px; }
.muted a { text-underline-offset: 3px; }

/* ---------- 모의/실제 토글 ---------- */
.mode-toggle {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  border-radius: 999px;
  background: var(--block);
  box-shadow: var(--shadow-block);
  white-space: nowrap;
}
.mode-toggle button {
  position: relative;
  z-index: 1;
  background: transparent;
  box-shadow: none;
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 13px;
}
.mode-toggle button:hover { background: rgba(255, 255, 255, 0.18); transform: translateY(-1px); box-shadow: none; }
.mode-toggle .thumb {
  position: absolute;
  top: 4px; bottom: 4px; left: 4px;
  width: calc(50% - 4px);
  border-radius: 999px;
  background: var(--green);
  box-shadow: 0 4px 10px -3px rgba(46, 158, 91, 0.7);
  transition: transform .35s var(--ease), background-color .35s, box-shadow .35s;
}
.mode-toggle.is-real .thumb {
  transform: translateX(100%);
  background: var(--red);
  box-shadow: 0 4px 12px -3px rgba(214, 69, 69, 0.8);
}
.mode-toggle button[aria-pressed="true"]:hover { background: transparent; }

/* 실제 모드일 때 화면 상단에 빨간 띠로 항상 표시 */
.real-banner {
  background: var(--red);
  color: #fff;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 12px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

/* ---------- 팝업(메시지 창) ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(2, 30, 20, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .22s var(--ease);
}
.modal-backdrop.show { opacity: 1; }
.modal-backdrop[hidden] { display: none; }

.modal {
  width: min(440px, 100%);
  background: var(--block);
  border-radius: 20px;
  padding: 22px 24px 20px;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transform: translateY(14px) scale(.96);
  transition: transform .28s var(--ease);
  position: relative;
  overflow: hidden;
}
.modal-backdrop.show .modal { transform: none; }
.modal::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 5px;
  background: var(--btn);
}
.modal.kind-success::before { background: var(--green); }
.modal.kind-warn::before { background: var(--warn); }
.modal.kind-error::before, .modal.kind-danger::before { background: var(--red); }
.modal h3 { font-size: 18px; margin: 4px 0 8px; }
.modal p { margin: 0 0 14px; font-size: 14px; }
.modal .modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.modal .form-row { margin-bottom: 10px; }

/* =====================================================================
   [v4.0.0 추가] 투자/종목 섹션 절반 분할(왼쪽 콘텐츠 / 오른쪽 블럭) +
   실시간 차트 패널 + 종목 추천(드래그앤드롭).
   ===================================================================== */

/* .content가 split-screen을 담고 있으면 기본 1000px보다 넓게 — 왼쪽/오른쪽을
   정확히 반반(1:1)으로 나눠도 둘 다 너무 좁아지지 않도록. :has()를 지원하지
   않는 아주 오래된 브라우저에서는 그냥 1000px로 보여도 레이아웃이 깨지지
   않는다(아래 .split-screen이 flex-wrap으로 알아서 줄바꿈됨). */
.content:has(.split-screen) { max-width: 1480px; }

.split-screen { display: flex; gap: 20px; align-items: flex-start; }
/* [2026-10-09] "차트 크기를 왼쪽 블럭과 같은 사이즈로(반반)" 요청 반영 —
   고정폭(flex: 0 0 380px)이었던 오른쪽 블럭을 왼쪽과 동일한 flex-basis로
   맞춰서 1:1로 나눈다. */
.split-left { flex: 1 1 0; min-width: 0; }
.split-right { flex: 1 1 0; min-width: 320px; position: sticky; top: 86px; }

@media (max-width: 1000px) {
  .split-screen { flex-direction: column; }
  .split-right { position: static; width: 100%; flex: 1 1 auto; }
}

/* ---------- [2026-10-09 두 번째 개편] 종목명 데이터 새로고침 — 독립 카드 대신
   페이지 맨 위의 작은 줄 하나로 ---------- */
.symbol-refresh-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.symbol-refresh-bar form { display: inline-block; }
.refresh-note { font-size: 12px; }
.refresh-note.success { color: var(--green); }
.refresh-note.error-text { color: #FFB4B4; }

/* 관심종목 항목을 클릭해서 차트를 바로 띄우는 버튼 — 링크처럼 보이되
   <button>이라서 폼 안에 둬도 안전하다(기존 "제거"/"바운더리에 추가" 폼과
   같은 셀 안에 있음). */
.link-like {
  background: transparent; border: none; box-shadow: none; padding: 0;
  color: var(--text); text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer; font-size: inherit; text-align: left;
}
.link-like:hover { opacity: .8; transform: none; box-shadow: none; background: transparent; }

/* ---------- 실시간 차트 패널 ---------- */
.chart-panel .chart-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
/* [2026-10-09 두 번째 개편] 심볼 검색창이 차트 "아래"로 옮겨졌다 — 헤더에는
   더 이상 입력창이 없다(이름/현재가/등락률만). */
.symbol-search.chart-symbol-search { margin-top: 10px; display: block; }
.chart-symbol-search input[type="text"] { width: 100%; }
.chart-name { font-size: 14px; color: var(--text-soft); }
.chart-price { font-size: 20px; font-weight: 700; letter-spacing: -0.03em; }
.chart-change { font-size: 13px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,0.14); }
.chart-change.up { color: #fff; background: var(--red); }     /* 국내 관례: 상승=빨강 */
.chart-change.down { color: #fff; background: var(--accent); } /* 하락=파랑 계열 */
/* [v4.6.0] .chart-stats(기간 최고/최저 숫자) 제거 — 줌 중 고점/저점 마커로 대체됨 */
/* [2026-10-09] 왼쪽 블럭과 같은 높이감을 내도록 더 키움(기존 320px). 실제
   표시 높이는 chart.js의 ResizeObserver가 컨테이너 크기에 맞춰 다시 잡는다. */
.chart-container { width: 100%; height: 520px; border-radius: 12px; overflow: hidden; background: var(--block-deep); }
.chart-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; color: var(--text-soft); }
.chart-legend .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.chart-note { font-size: 12px; margin-top: 8px; }
.chart-status { font-size: 12px; margin-top: 6px; }
.chart-status.error { color: #FFD6D6; }

/* ---------- [2026-10-09 추가] 종목코드/종목명 자동완성 ---------- */
.symbol-search { position: relative; display: inline-block; }
/* [v6.0.4 버그 수정] chart.js가 이 목록을 더 이상 .symbol-search 안이 아니라
   document.body에 직접 붙이고, 열릴 때마다 left/top/width를 입력창 위치에
   맞춰 JS로 계산해 넣는다(position: fixed) — 그래서 여기 position/top/left는
   JS가 계산 전 잠깐 보일 때를 위한 기본값일 뿐이고, 실제 위치는 인라인
   스타일이 덮어쓴다. 이렇게 바꾼 이유: 관심종목 그룹 카드(.watchlist-group)처럼
   overflow:hidden인 조상 블럭 안에 입력창이 있으면, 예전처럼 입력창의 부모
   안에 떠 있는 방식으로는 목록이 그 블럭 밖으로 못 나가고 잘렸다.
   document.body에 붙이면 어떤 조상의 overflow:hidden도 더 이상 영향을 안 준다. */
.symbol-search-dropdown {
  position: absolute; top: 100%; left: 0; z-index: 2000; margin-top: 4px;
  min-width: 220px; max-height: 260px; overflow-y: auto;
  background: var(--block-deep); border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.35); padding: 4px;
}
.symbol-search-dropdown .opt {
  padding: 7px 10px; border-radius: 7px; cursor: pointer; font-size: 13px;
  display: flex; justify-content: space-between; gap: 8px; white-space: nowrap;
}
.symbol-search-dropdown .opt:hover, .symbol-search-dropdown .opt.active { background: rgba(255,255,255,0.12); }
.symbol-search-dropdown .opt .name { font-weight: 600; }
.symbol-search-dropdown .opt .market { color: var(--text-soft); font-size: 11px; }
.symbol-candidates { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* ---------- 관심종목 연동 블럭(투자 바운더리 페이지) ---------- */
.watchlist-sync-item { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 9px 0; box-shadow: inset 0 1px 0 rgba(255,255,255,0.10); cursor: grab; }
.watchlist-sync-item:first-child { box-shadow: none; }
.watchlist-sync-item .symbol { font-weight: 700; min-width: 64px; }
.watchlist-sync-item select { width: auto; flex: 0 0 140px; }
.watchlist-sync-item.in-boundary { opacity: .6; }
/* [v6.2.0 추가] 관심종목 → 바운더리 드래그앤드롭 — 추천 드래그앤드롭의
   .rec-item.dragging과 같은 효과, 공용 .drop-target/.drag-over는 그대로
   재사용(바운더리 표의 각 행 <tr data-drop-boundary>에 붙는다). */
.watchlist-sync-item.dragging { opacity: .4; }
.watchlist-sync-item:active { cursor: grabbing; }

/* ---------- 종목 추천 + 드래그앤드롭 ---------- */
.rec-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 8px;
  background: var(--block-deep); border-radius: 12px; cursor: grab;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.4);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.rec-item:active { cursor: grabbing; }
.rec-item.dragging { opacity: .4; }
.rec-item .symbol { font-weight: 700; min-width: 64px; }
.rec-item .score { font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--green); }
.rec-item .score.zero { background: rgba(255,255,255,0.16); }
.rec-item .matched { font-size: 12px; color: var(--text-soft); flex: 1; }
.rec-item .source { font-size: 11px; color: var(--text-soft); }
.drop-target { border-radius: 12px; transition: box-shadow .15s, background-color .15s; }
.drop-target.drag-over { box-shadow: 0 0 0 2px var(--green) inset; background: rgba(52, 184, 106, 0.12); }

/* [v4.6.0 추가] 관심종목 그룹 하나하나를 "카드 안의 카드"로 묶어서, 그룹명(진한
   색 머리)과 그 아래 종목들(연한 색 몸통)이 한 그룹이라는 걸 한눈에 알아보게
   한다. .drop-target(드래그앤드롭 강조)은 body에 그대로 얹힌다 — 배경색이
   달라도 drag-over 시의 테두리/배경 강조는 변하지 않는다. */
.watchlist-group { border-radius: 12px; overflow: hidden; margin-bottom: 14px; box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset; }
.watchlist-group-header {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px; background: var(--block-deep); /* 진한 색 */
}
.watchlist-group-name { font-weight: 700; font-size: 15px; }
.watchlist-group-body { padding: 10px 14px; background: rgba(255, 255, 255, 0.05); } /* 연한 색 */

@media (max-width: 760px) {
  .topbar { flex-wrap: wrap; padding: 12px 16px; }
  .mainnav { order: 3; flex-basis: 100%; flex-wrap: wrap; }
  .content { padding: 24px 16px 48px; }
  .condition-row { grid-template-columns: 1fr 1fr; }
  .split-right { position: static; }
  /* [v6.2.0 추가] 좁은 화면에선 hover가 믿을 만하지 않으므로(터치), "투자" 탭이
     활성 상태일 때는 하위 섹션을 드롭다운이 아니라 탭 줄 바로 아래에 항상
     펼쳐서 보여준다 — 모바일 화면 최적화는 아직 범위 밖(project-overview.md
     참고)이라 완벽한 터치 UX보다는 "링크를 아예 못 누르는" 상황만 막는다. */
  .navitem.has-sub { flex-basis: 100%; flex-wrap: wrap; }
  .navsub {
    position: static;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    width: 100%;
    max-width: 100%;
    box-shadow: none;
    background: rgba(0, 0, 0, 0.12);
    margin-top: 4px;
  }
  /* [v7.2.1 수정] 위 v6.2.0 패치는 "링크를 못 누르는 사고"만 막는 수준이라,
     세부 섹션 라벨이 길면(예: "잔고 · 평가 실행") .navsub-link의
     white-space:nowrap 때문에 글자가 줄어들지 못하고 블럭 가로 폭을 넘겨서
     밖으로 삐져나오거나, 2개씩 가로로 배치되다가 서로 겹쳐 보이는 문제가
     있었다(사용자 보고: "세부섹션 리스트가 겹치는 부분이나 글자가 잘려서
     블럭 밖으로 넘어가는 현상"). 기능(눌렀을 때 이동하는 링크)은 그대로 두고,
     모바일에서는 한 줄에 하나씩 세로로 쌓고 글자가 줄바꿈 가능하게만 바꿔서
     해결한다. */
  .navitem.has-sub .navtab.active + .navsub {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .navsub .navsub-link {
    width: 100%;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: break-word;
    text-align: center;
  }

  /* [v7.4.1 추가] 모바일 가독성 수정 — 사용자 보고: "글자가 일렬로 길게
     늘어지는것". 원인은 두 가지였다.

     (1) <table> 전체 — 표에는 좁은 화면용 규칙이 전혀 없어서, 칸이
     화면 너비에 맞춰 짜부러졌다. 한글은 띄어쓰기 없이도 아무 글자
     사이에서나 줄바꿈이 가능해서(영어 단어처럼 "더 못 줄이는 최소
     폭"이 없다), 칸이 좁아질수록 글자 하나당 한 줄씩 끝없이
     줄바꿈되며 세로로 길게 늘어졌다(설정 페이지의 로그인 기기/최근
     활동 표, 투자 바운더리/거래조건 표 등). 표를 억지로 줄이는 대신
     칸 너비는 그대로 두고 표 자체를 가로로 스크롤되게 바꿔서,
     필요하면 옆으로 밀어서 보게 한다.

     (2) 종목 추천 목록(.rec-item, stocks.html)의 "일치하는 조건 없음"
     텍스트 — flex 한 줄에 종목명/점수/조건문구/출처를 다 같이
     놓고 조건문구만 flex:1로 나머지 자리를 채우게 했는데, 좁은
     화면에서는 flex:1의 기본 축소 한계(min-width:auto)가 위 표와
     똑같은 한글 글자당-줄바꿈 현상을 만들었다. 조건문구를 flex-wrap로
     아예 다음 줄로 내려서 한 줄 전체 폭을 쓰게 하면 해결된다. */
  table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  th, td { white-space: nowrap; }

  .rec-item { flex-wrap: wrap; }
  .rec-item .matched {
    flex-basis: 100%;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: break-word;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before { transition: none !important; }
}