/* 복기 Journal 정식 디자인 토큰 — DESIGN-LANGUAGE.md (2026-10-21 · 맑은 거래) */
@font-face {
  font-family: "Pretendard Variable";
  src: url("./assets/fonts/PretendardVariable.woff2") format("woff2");
  font-style: normal;
  font-weight: 45 920;
  font-display: swap;
}

:root {
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 16px;
  --r-pill: 9999px;
  --r-dot: 50%;
  --scrim: rgba(10,18,28,.6);
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
  --sp-16: 64px;
  --font-ui: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont,
    system-ui, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --font-number: var(--font-ui);
  --font-code: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* 여백 단계(팀장님 2026-10-23, 대시보드 규칙과 같음): 같은 묶음 안 8 · 절 안 묶음 사이 16 · 머리↔본문 24 · 절↔절 48(휴대폰 32) ·
     가장자리 24(휴대폰 16) · 상자 안 16. 화면 사이 간격은 이 값만 쓰고, --sp-*는 부품 안쪽에만 쓴다. */
  --space-tight: 4px;
  --space-inline: 8px;
  --space-group: 16px;
  --space-head: 24px;
  --space-section: 48px;
  --space-edge: 24px;
  --space-box: 16px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-title: 24px;
  --lh-tight: 1.25;
  --lh-body: 1.6;
  --z-flyout: 60;
  --font-mono: var(--font-code);
}

:root,
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #15191f;
  --surface: #1d232b;
  --surface-2: #29313c;
  --border: #353e4a;
  --border-2: #6f8095;
  --text: #ecf0f5;
  --text-2: #aeb8c5;
  --text-3: #aeb8c5;
  --accent: #89b5ff;
  --accent-text: #89b5ff;
  --accent-ink: #132947;
  --accent-soft: #263c58;
  --chart-grid: var(--border);
  --pos: #80d8b0;
  --neg: #ff9aab;
  --warn: #e9bf75;
  --info: #8fbaff;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .24);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, .20), 0 4px 12px rgba(0, 0, 0, .16);

  /* 기존 화면을 정식 축으로 수렴시키는 보조 역할 토큰 */
  --surface-nav: var(--surface);
  --surface-control: var(--surface-2);
  --surface-active: var(--accent-soft);
  --chip-on: #3a4450;
  --shadow-pop: var(--shadow-2);
  --surface-hover: var(--surface-2);
  --surface-inset: var(--surface-2);
  --surface-avatar: var(--surface-2);
  --chart-bg: var(--bg);
  --chart-border: var(--border);
  --border-row: var(--border);
  --border-strong: var(--border-2);
  --text-strong: var(--text);
  --text-soft: var(--text-2);
  --text-muted: var(--text-2);
  --text-faint: var(--border-2);
  --attention: #e9bf75;
  --attention-text: #e9bf75;
  --info-muted: #7fb3d5;
  --pos-soft: #213a30;
  --neg-soft: #382831;
  --warn-soft: #332d24;
  --neutral-soft: #29313c;
  --grade-a: var(--accent);
  --grade-b: #7fb3d5;
  --grade-c: #caa24a;
  --grade-d: #f6465d;
  --grade-ink: var(--accent-ink);
  --data-blue: #5b9cf6;
  --data-blue-strong: #3d7ef0;
  --data-yellow: #f0b90b;
  --data-green: #3ec97a;
  --data-orange: #f7a600;
  --data-purple: #b07ff0;
  --data-rust: #e08a5a;
  --data-cyan: #38bdf8;
  --accent-control: var(--accent-soft);
  --accent-border: var(--accent-text);
  --attention-fill: #e9bf75;
  --attention-ink: #332d24;
  --print-bg: #f3f5f7;
  --print-surface: #fcfdfd;
  --print-border: #dce2e9;
  --print-text: #202a36;
  --print-text-2: #606c7b;
  --print-text-muted: #606c7b;
  --print-grid: #dce2e9;
  --print-pos: #24694d;
  --print-neg: #b72c40;
  --print-exit: #9b4e16;
  --print-lesson: #7a5d13;
  --success: #80d8b0;
  --success-soft: #213a30;
  --danger: #ff9aab;
  --danger-soft: #382831;
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f5f7;
  --surface: #fcfdfd;
  --surface-2: #edf1f6;
  --border: #dce2e9;
  --border-2: #7a8593;
  --text: #202a36;
  --text-2: #606c7b;
  --text-3: #606c7b;
  --accent: #215bb8;
  --accent-text: #215bb8;
  --accent-ink: #fcfdfd;
  --accent-soft: #e5edfa;
  --chart-grid: var(--border);
  --pos: #24694d;
  --neg: #b72c40;
  --warn: #795913;
  --info: #2166bb;
  --shadow-1: 0 1px 2px rgba(32, 42, 54, .06);
  --shadow-2: 0 1px 2px rgba(32, 42, 54, .06), 0 8px 24px rgba(32, 42, 54, .05);

  --surface-nav: var(--surface);
  --surface-control: var(--surface-2);
  --surface-active: var(--accent-soft);
  --chip-on: #d9e0e8;
  --shadow-pop: var(--shadow-2);
  --surface-hover: var(--surface-2);
  --surface-inset: var(--surface-2);
  --surface-avatar: var(--surface-2);
  --chart-bg: var(--bg);
  --chart-border: var(--border);
  --border-row: var(--border);
  --border-strong: var(--border-2);
  --text-strong: var(--text);
  --text-soft: var(--text-2);
  --text-muted: var(--text-2);
  --text-faint: var(--border-2);
  --attention: #795913;
  --attention-text: #795913;
  --info-muted: #246a9a;
  --pos-soft: #e6f1eb;
  --neg-soft: #f9e8ed;
  --warn-soft: #faf3e3;
  --neutral-soft: #edf1f6;
  --grade-a: var(--accent);
  --grade-b: #7fb3d5;
  --grade-c: #caa24a;
  --grade-d: #f6465d;
  --grade-ink: var(--accent-ink);
  --data-blue: #275fbd;
  --data-blue-strong: #285db7;
  --data-yellow: #735800;
  --data-green: #19733f;
  --data-orange: #8a5600;
  --data-purple: #7247a8;
  --data-rust: #8d4928;
  --data-cyan: #126a91;
  --accent-control: var(--accent-soft);
  --accent-border: var(--accent-text);
  --attention-fill: #e9bf75;
  --attention-ink: #332d24;
  --success: #24694d;
  --success-soft: #e6f1eb;
  --danger: #b72c40;
  --danger-soft: #f9e8ed;
}

html,
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

:where(body, body *) {
  /* 페이지별 font: 축약형이 font-variant를 normal로 되돌리지 못하게 제품 규칙으로 잠근다. */
  font-variant-numeric: tabular-nums lining-nums !important;
  font-feature-settings: "tnum" 1, "lnum" 1 !important;
}

:where(code, pre, kbd, samp, .tj-code, .tj-ticker, .tj-json, .tj-wallet, .pair) {
  font-family: var(--font-code) !important;
}

input,
select,
textarea {
  color-scheme: inherit;
}

::selection {
  background: var(--accent-soft);
  color: var(--text);
}

.tj-theme-toggle {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  background: var(--surface-2);
  color: var(--text-2);
  font: 600 12px var(--font-ui);
  white-space: nowrap;
  cursor: pointer;
}

.tj-theme-toggle:hover {
  border-color: var(--accent-text);
  color: var(--text);
}

.tj-theme-toggle:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
}

.tj-state-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.tj-state-action {
  min-height: 44px;
  border: 1px solid var(--border-2);
  border-radius: 6px;
  padding: 9px 14px;
  background: var(--surface-control);
  color: var(--text);
  font: 700 13px var(--font-ui);
  cursor: pointer;
}

.tj-state-action:hover { border-color: var(--accent-text); }
.tj-state-action:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }

/* 메모 가벼운 마크다운 표시(app/memo-format.js). 글자 크기·색·줄 간격은 감싼 칸의 값을 그대로 물려받고,
   들여쓰기는 글자 크기에 맞춰 em으로, 문단 사이는 8px 그리드로 둔다. */
.tj-memo { white-space: normal; overflow-wrap: break-word; }
.tj-memo-list { margin: 0; padding-left: 1.5em; }
ul.tj-memo-list { list-style: disc; }
ul.tj-memo-list ul.tj-memo-list { list-style: circle; }
ol.tj-memo-list { list-style: decimal; }
.tj-memo-list li { margin: 0; }
.tj-memo > * { margin: 0; }
.tj-memo > * + * { margin-top: 8px; }
.tj-memo strong { font-weight: 700; color: inherit; }

/* 메모 입력칸 안 서식 표시(app/memo-format.js attachLiveFormat). textarea 위에 같은 글자를 같은 폭으로 그리는 표시층을 겹친다.
   글자 폭이 바뀌면 커서·줄바꿈이 어긋나므로 굵게는 획 두께로만, 글머리는 같은 자리에 겹쳐 그린다.
   표시층이 켜지기 전(.is-live 없음)과 강제 색상 모드에서는 원래 textarea 그대로 보인다. */
.tj-live { position: relative; display: block; min-width: 0; }
.tj-live > textarea { display: block; margin: 0; }
.tj-live-layer {
  display: none;
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  overflow: hidden;
  border: 0 solid transparent;
  pointer-events: none;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.tj-live.is-live > .tj-live-layer { display: block; }
.tj-live.is-live > textarea { -webkit-text-fill-color: transparent; caret-color: var(--text); }
.tj-live.is-live > textarea::placeholder { -webkit-text-fill-color: currentcolor; }
.tj-live-mark { color: var(--text-3); }
.tj-live-number { color: var(--accent-text); }
.tj-live-bullet { position: relative; color: transparent; }
.tj-live-bullet::before { content: "•"; position: absolute; left: 0; right: 0; text-align: center; color: var(--accent-text); }
.tj-live-bold { -webkit-text-stroke: .04em currentcolor; }
@media (forced-colors: active) {
  .tj-live.is-live > .tj-live-layer { display: none; }
  .tj-live.is-live > textarea { -webkit-text-fill-color: currentcolor; }
}

@media (max-width: 640px) {
  :root { --space-section: 32px; --space-edge: 16px; }
  .tj-theme-toggle .tj-theme-label { display: none; }
  .tj-theme-toggle { width: 44px; min-height: 44px; padding-inline: 0; }
}

@media print {
  :root,
  html[data-theme="dark"],
  html[data-theme="light"] {
    color-scheme: light;
    --bg: #f3f5f7;
    --surface: #fcfdfd;
    --surface-2: #edf1f6;
    --border: #dce2e9;
    --border-2: #7a8593;
    --text: #202a36;
    --text-2: #606c7b;
    --text-3: #606c7b;
    --accent-text: #215bb8;
    --pos: #24694d;
    --neg: #b72c40;
    --warn: #795913;
    --info: #2166bb;
  --pos-soft: #e6f1eb;
  --neg-soft: #f9e8ed;
  --neutral-soft: #edf1f6;
  --warn-soft: #faf3e3;
  --success: #24694d;
  --success-soft: #e6f1eb;
  --danger: #b72c40;
  --danger-soft: #f9e8ed;
  --attention: #795913;
  --attention-text: #795913;
  --attention-fill: #e9bf75;
  --attention-ink: #332d24;
  --accent: #215bb8;
  --accent-ink: #fcfdfd;
  --accent-soft: #e5edfa;
}
  .tj-theme-toggle { display: none !important; }
}
/* 새 페이지 공용 상단바: 단추 높이·폭·모서리·간격은 여기 한 곳에서 정한다. */
.tj-topbar {
  display: flex; align-items: center; justify-content: flex-end;
  gap: var(--sp-1); flex-wrap: nowrap; min-width: 0; position: relative;
}
/* 바깥 단추가 터치 영역, ::before와 switch-face가 작은 표시 면이다. */
.tj-topbar .tj-topbar-button {
  box-sizing: border-box; position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-1); height: 32px; min-height: 32px; min-width: 32px;
  padding: 0 var(--sp-2); border: 0; border-radius: var(--r-md);
  background: transparent; color: var(--text); font: 600 12px/1 var(--font-ui);
  white-space: nowrap; cursor: pointer; isolation: isolate;
}
.tj-topbar .tj-topbar-button::before {
  content: ""; position: absolute; z-index: -1; inset: 0;
  border: 1px solid var(--border-2); border-radius: inherit; background: var(--surface-2);
}
.tj-topbar .tj-topbar-button:hover::before { border-color: var(--accent-text); }
.tj-topbar .tj-topbar-button:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.tj-topbar .tj-topbar-button:disabled { opacity: .55; cursor: default; }
.tj-topbar-icon { font-size: 16px; }
.tj-topbar .tj-topbar-icon-button .tj-topbar-label { display: none; }
.tj-topbar .tj-topbar-switch { width: 48px; padding: 0; }
.tj-topbar .tj-topbar-switch::before { display: none; }
.tj-topbar-switch-face {
  position: relative; display: flex; align-items: center; justify-content: space-around;
  width: 48px; height: 28px; box-sizing: border-box;
  border: 1px solid var(--border-2); border-radius: var(--r-md); background: var(--surface-2);
}
.tj-topbar-switch-face::before {
  content: ""; position: absolute; inset: 4px auto 4px 4px; width: 16px;
  border-radius: var(--r-sm); background: var(--text-2);
}
.tj-topbar-switch-face .tj-topbar-icon { position: relative; font-size: 12px; width: 16px; text-align: center; }
.tj-topbar-switch-face .tj-topbar-icon:first-child { color: var(--surface-2); }
.tj-topbar [aria-checked="true"] .tj-topbar-switch-face::before { left: auto; right: 4px; background: var(--accent); }
.tj-topbar [aria-checked="true"] .tj-topbar-icon:first-child { color: var(--text); }
.tj-topbar [aria-checked="true"] .tj-topbar-icon:last-child { color: var(--accent-ink); }
.tj-topbar-switch:hover .tj-topbar-switch-face { border-color: var(--accent-text); }
.tj-topbar-currency { display: inline-flex; position: relative; isolation: isolate; flex: none; }
.tj-topbar-currency::before {
  content: ""; position: absolute; z-index: -1; inset: 0; border: 1px solid var(--border-2);
  border-radius: var(--r-md); background: var(--surface-2);
}
.tj-topbar .tj-topbar-currency .tj-topbar-button { width: 44px; padding: 0; border-radius: var(--r-sm); }
.tj-topbar-currency .tj-topbar-icon { font-size: 12px; }
.tj-topbar .tj-topbar-currency .tj-topbar-label { display: none; }
.tj-topbar .tj-topbar-currency .tj-topbar-button::before { border-color: transparent; background: transparent; }
.tj-topbar .tj-topbar-currency [aria-pressed="true"] { color: var(--accent-ink); }
.tj-topbar .tj-topbar-currency [aria-pressed="true"]::before { background: var(--accent); }
.tj-topbar-fx { order: -1; min-width: 0; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-3); font: 12px/1.5 var(--font-number); }
.tj-topbar-status { position: absolute; top: 100%; right: 0; color: var(--danger); background: var(--surface); font-size: 12px; }
.tj-topbar-status:empty { display: none; }
@media (min-width: 1000px) { .tj-topbar .tj-topbar-menu { display: none; } }
/* 콘솔은 공용 사이드바와 별개인 기존 Unit 메뉴를 계속 연다. */
@media (min-width: 761px) { .tj-topbar #tjc-menu { display: none; } }
@media (max-width: 640px) {
  .tj-topbar .tj-topbar-button { height: 44px; min-height: 44px; min-width: 44px; padding: 0; }
  .tj-topbar .tj-topbar-button::before, .tj-topbar-currency::before { top: 6px; bottom: 6px; }
  .tj-topbar .tj-topbar-label { display: none; }
  /* 환율과 갱신 시각은 통화·금액 단추의 설명으로 남긴다. */
  .tj-topbar-fx { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tr-hdr:has(> [data-tj-topbar]) { grid-template-columns: 44px minmax(0, 1fr); gap: var(--sp-1); }
  .tr-hdr > .tr-ctx { display: none; }
  .fc-head:has(> [data-tj-topbar]), .top:has(> [data-tj-topbar]) { flex-wrap: wrap; gap: var(--sp-2); }
  .fc-head > [data-tj-topbar], .top > [data-tj-topbar] { margin-left: auto; }
}
@media print { .tj-topbar { display: none !important; } }

/* 공통 메뉴: tokens.css가 head에서 준비된 뒤 sidebar.js가 DOM을 만든다. */
#tj-obs-sidebar {box-sizing:border-box;position:fixed;inset:0 auto 0 0;width:216px;height:100dvh;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;z-index:60;font-family:var(--font-ui);color:var(--text);-webkit-font-smoothing:antialiased}
#tj-obs-sidebar * {box-sizing:border-box}
#tj-obs-sidebar .tjobs-brand {display:flex;align-items:center;gap:8px;padding:24px 16px;text-decoration:none;min-height:44px;color:var(--text)}
#tj-obs-sidebar .tjobs-mark {width:28px;height:28px;flex:none}
#tj-obs-sidebar .tjobs-brandname {font-size:16px;font-weight:700;letter-spacing:-.02em}
#tj-obs-sidebar .tjobs-brandsub {display:none}
#tj-obs-sidebar .tjobs-nav {display:flex;flex-direction:column;gap:4px;padding:8px 16px 24px;flex:1;overflow-y:auto;overscroll-behavior:contain}
#tj-obs-sidebar .tjobs-sec {font-size:12px;font-weight:500;color:var(--text-2);padding:24px 12px 8px;user-select:none}
#tj-obs-sidebar .tjobs-sec.first {padding-top:8px}
#tj-obs-sidebar details.tjobs-group>summary {display:flex;align-items:center;justify-content:space-between;min-height:44px;cursor:pointer;list-style:none;margin-top:24px;padding:8px 12px}
#tj-obs-sidebar summary::-webkit-details-marker {display:none}
#tj-obs-sidebar .tjobs-chevron {font-size:16px;transition:transform .18s ease}
#tj-obs-sidebar details[open] .tjobs-chevron {transform:rotate(90deg)}
#tj-obs-sidebar a.tjobs-link {display:flex;align-items:center;gap:8px;min-height:44px;padding:12px;border-radius:var(--r-md);font-size:14px;font-weight:500;color:var(--text-2);text-decoration:none;background:transparent}
#tj-obs-sidebar a.tjobs-link:hover {color:var(--text);background:var(--surface-2)}
#tj-obs-sidebar a.tjobs-link.active {font-weight:650;color:var(--accent-text);background:var(--accent-soft)}
#tj-obs-sidebar a.tjobs-link svg {display:none}
#tj-obs-sidebar a.tjobs-link span {overflow-wrap:anywhere}
#tj-obs-sidebar :focus-visible {outline:2px solid var(--accent-text);outline-offset:2px}
#tj-obs-sidebar .tjobs-close {display:none;margin-left:auto;width:44px;height:44px;flex:none;border:1px solid var(--border-2);border-radius:var(--r-md);background:var(--surface);color:var(--text);align-items:center;justify-content:center;cursor:pointer}
#tj-obs-sidebar-backdrop {display:none}
@media(min-width:1000px){body.tjobs-has-sidebar{padding-left:216px}body.tjobs-has-sidebar .home{display:none}}
@media(max-width:999px){
 #tj-obs-sidebar{display:none}body.tjobs-has-sidebar{padding-left:0}
 body.tjobs-drawer-open #tj-obs-sidebar{display:flex;width:min(320px,88vw);z-index:70;box-shadow:var(--shadow-2);padding-top:env(safe-area-inset-top);padding-left:env(safe-area-inset-left)}
 body.tjobs-drawer-open #tj-obs-sidebar .tjobs-close{display:flex}
 body.tjobs-drawer-open #tj-obs-sidebar-backdrop{display:block;position:fixed;inset:0;z-index:65;background:var(--scrim)}
 body.tjobs-drawer-open{overflow:hidden}
}
@media(prefers-reduced-motion:reduce){#tj-obs-sidebar .tjobs-chevron{transition:none}}
@media print{#tj-obs-sidebar,#tj-obs-sidebar-backdrop{display:none!important}body.tjobs-has-sidebar{padding-left:0}}

/* 차트 자료색: 기존 HTS 의미를 유지한다. */
:root { --rp-up: var(--pos); --rp-down: var(--neg); }
/* 차트·수급선은 팀장님 HTS(eFriend Plus) 색을 따른다(2026-10-13 요청): 양봉 빨강·음봉 파랑·거래량 남색,
   수급 외국인 빨강·개인 초록·기관계 파랑·기타 노랑. 글자·버튼의 상승·하락색(--rp-up/--rp-down)은 그대로 두고 차트에만 쓴다.
   HTS 원색(#f00·#00f)은 어두운 바탕에서 안 보이므로 다크는 밝기만 올린 같은 색상이다. */
:root {
  --rp-chart-up: #ff3b3b; --rp-chart-down: #4a72ff; --rp-chart-volume: #4a72ff;
  --rp-flow-foreigner: #ff3b3b; --rp-flow-personal: #3fd14a; --rp-flow-institution: #4a72ff; --rp-flow-other: #e3cf2b;
}
:root[data-theme="light"] {
  --rp-chart-up: #e60000; --rp-chart-down: #0a2fe0; --rp-chart-volume: #0b2a8f;
  --rp-flow-foreigner: #e60000; --rp-flow-personal: #1fa82a; --rp-flow-institution: #0a2fe0; --rp-flow-other: #b5a000;
}
/* 이동평균선도 팀장님 HTS 색(2026-10-13 요청): 5 빨강 · 10 파랑 · 20 주황 · 60 초록 · 120 회색.
   라이트는 HTS 원색에 가깝게, 다크는 같은 색상에서 밝기만 올린다. 회색은 순수 회색 대신 틴트 회색. */
:root {
  --rp-ma-5: #ff5c5c; --rp-ma-10: #6f8dff; --rp-ma-20: #ffa23d; --rp-ma-60: #4fd65c; --rp-ma-120: #a4adab;
}
:root[data-theme="light"] {
  --rp-ma-5: #e60012; --rp-ma-10: #1238f0; --rp-ma-20: #f07800; --rp-ma-60: #10a020; --rp-ma-120: #7b8583;
}