/* AI 작업실 v2 (11-01) — 대화 · 결과물 두 칸, 작업 목록은 대화 제목 줄 단추로 여는 왼쪽 패널 (11-01 사용자: 늘 자리를 차지하지 않게) */
.w2-body { --st-page: 100%; --st-pad: 16px; background: var(--st-bg); height: 100vh; height: 100dvh; display: flex; flex-direction: column; }   /* 11-01 머리띠·시세 띠도 차트처럼 전체폭(사용자 「header 전체폭」) · 위 시세 띠·메뉴 높이를 빼고 남은 만큼 — 고정 64px 를 빼면 입력칸 아래 안내가 잘렸다 */
.w2 { position: relative; display: grid; grid-template-columns: minmax(360px, 480px) minmax(0, 1fr); flex: 1; min-height: 520px; }
.w2-side, .w2-chat, .w2-out { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.w2-side { position: absolute; z-index: 30; top: 0; bottom: 0; left: 0; width: 320px; max-width: 86vw; border-right: 1px solid var(--st-border); background: var(--st-surface); padding: 14px 10px 0; gap: 10px; box-shadow: 8px 0 28px rgb(19 23 34 / 14%); transform: translateX(-104%); visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s; }
body.w2-open .w2-side { transform: none; visibility: visible; transition: transform .2s ease; }
.w2-scrim { position: absolute; z-index: 29; inset: 0; border: 0; padding: 0; background: rgb(19 23 34 / 28%); cursor: default; }
@media (prefers-reduced-motion: reduce) { .w2-side, body.w2-open .w2-side { transition: none; } }
.w2-q { margin: 0 4px; padding: 8px 12px; border: 1px solid var(--st-border); border-radius: var(--st-r-md); background: var(--st-surface-2); color: var(--st-text); font: inherit; font-size: var(--st-fs-sm); }
.w2-grp { margin: 8px 0 2px; padding: 0 8px; font-size: var(--st-fs-xs); font-weight: 500; color: var(--st-text-muted); }
.w2-grp:first-child { margin-top: 0; }
.w2-tasklist ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.w2-icon { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: var(--st-r-md); background: none; color: var(--st-text-muted); cursor: pointer; }
.w2-icon:hover { color: var(--st-text); background: var(--st-surface-2); }
.w2-icon-b { border: 1px solid var(--st-border); color: var(--st-text); background: var(--st-surface); }
.w2-icon-b:hover { border-color: var(--st-accent); background: var(--st-surface); }
.w2-list-btn { flex: none; height: 36px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid var(--st-border); border-radius: var(--st-r-md); background: var(--st-surface); color: var(--st-text); font: inherit; font-size: var(--st-fs-sm); font-weight: 500; cursor: pointer; }
.w2-list-btn:hover, .w2-list-btn[aria-expanded="true"] { border-color: var(--st-accent); color: var(--st-accent); }
.w2-list-btn[aria-expanded="true"] { background: var(--st-accent-soft); }
.w2-count { min-width: 20px; padding: 0 6px; border-radius: var(--st-r-full); background: var(--st-accent); color: var(--st-on-accent); font-size: var(--st-fs-xs); line-height: 20px; text-align: center; }
.w2-side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.w2-side-head { padding-left: 8px; }
.w2-side-head h2 { margin: 0; flex: 1; font-size: var(--st-fs-md); }
.w2-tasklist { display: grid; align-content: start; gap: 4px; overflow-y: auto; min-height: 0; flex: 1; }
.w2-task { width: 100%; display: grid; gap: 2px; text-align: left; padding: 8px 10px; border: 1px solid transparent; border-radius: var(--st-r-md); background: none; color: var(--st-text); cursor: pointer; font: inherit; }
.w2-task b { font-weight: 600; font-size: var(--st-fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w2-task small { font-size: var(--st-fs-xs); }
.w2-task:hover { background: var(--st-surface-2); }
.w2-task.is-on { background: var(--st-accent-soft); border-color: var(--st-accent); }
.w2-none { padding: 8px 4px; font-size: var(--st-fs-sm); }
.w2-side-note { margin: 0 -10px; padding: 12px 18px; border-top: 1px solid var(--st-border); font-size: var(--st-fs-xs); line-height: 1.5; }
.w2-chat { border-right: 1px solid var(--st-border); background: var(--st-surface); }
.w2-chat-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px 10px; border-bottom: 1px solid var(--st-border); }
.w2-chat-head, .w2-out-head { box-sizing: border-box; height: 56px; flex: none; }   /* 11-01 두 칸 제목 줄 높이 같게 — 아래 선이 이어지게 */
.w2-chat-head { padding: 0 12px 0 16px; }
.w2-chat-head h1 { margin: 0; flex: 1; min-width: 0; font-size: var(--st-fs-lg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w2-chat-head .st-dev { flex: none; }
.w2-thread { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.w2-msg { max-width: 92%; padding: 10px 12px; border-radius: var(--st-r-lg); line-height: 1.55; font-size: var(--st-fs-md); }
.w2-msg p { margin: 0 0 6px; }
.w2-msg p:last-child { margin-bottom: 0; }
.w2-msg ul { margin: 4px 0; padding-left: 18px; }
.w2-user { align-self: flex-end; background: var(--st-accent); color: #fff; }
.w2-ai { align-self: flex-start; background: var(--st-surface-2); }
.w2-note { font-size: var(--st-fs-sm); color: var(--st-text-muted); }
/* 쓴 토큰 한 줄 (11-04) — 답 아래 작은 회색 글 · 보고서 고르기 버튼 아래 보통 드는 양 */
.w2-tk { align-self: flex-start; margin: -4px 0 2px 4px; font-size: var(--st-fs-xs, 11px); color: var(--st-text-muted); font-variant-numeric: tabular-nums; }
.w2-tk p { margin: 0; }
.w2-tk-est { margin: 6px 0 0; font-size: var(--st-fs-xs, 11px); color: var(--st-text-muted); }
.w2-err { align-self: flex-start; background: var(--st-surface-2); color: var(--st-err); }
.w2-go { background: none; padding: 0; }
.w2-need { font-size: var(--st-fs-xs); color: var(--st-text-muted); }
.w2-follow { display: flex; flex-wrap: wrap; gap: 8px; }
.w2-steps summary { cursor: pointer; font-size: var(--st-fs-sm); color: var(--st-text-muted); }
.w2-steps ol { margin: 6px 0 0; padding-left: 18px; font-size: var(--st-fs-xs); color: var(--st-text-muted); display: grid; gap: 3px; }
.w2-card { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "k ref go" "t t go"; gap: 2px 8px; align-items: center; width: 100%; min-width: 240px; text-align: left; padding: 10px 12px; border: 1px solid var(--st-border); border-radius: var(--st-r-md); background: var(--st-surface); color: var(--st-text); cursor: pointer; font: inherit; }
.w2-card:hover { border-color: var(--st-accent); }
.w2-card-k { grid-area: k; font-size: var(--st-fs-xs); color: var(--st-accent); font-weight: 600; }
.w2-card .mono { grid-area: ref; font-size: var(--st-fs-sm); }
.w2-card-t { grid-area: t; font-size: var(--st-fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w2-card-go { grid-area: go; font-size: 20px; color: var(--st-text-muted); }
.w2-empty { margin: 8px 0 0; display: grid; gap: 10px; text-align: center; padding: 20px 4px; }
.w2-empty h2 { margin: 0; font-size: var(--st-fs-xl); }
.w2-empty p { margin: 0; }
.w2-examples { display: grid; gap: 8px; }
.w2-ex { padding: 10px 12px; border: 1px solid var(--st-border); border-radius: var(--st-r-md); background: var(--st-surface); color: var(--st-text); cursor: pointer; font: inherit; font-size: var(--st-fs-sm); text-align: left; }
.w2-ex:hover { border-color: var(--st-accent); }
.w2-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--st-border); }
.w2-form textarea { resize: none; padding: 10px 12px; border: 1px solid var(--st-border); border-radius: var(--st-r-md); background: var(--st-surface); color: var(--st-text); font: inherit; font-size: var(--st-fs-md); }
.w2-form .st-btn { align-self: end; }
.w2-fine { grid-column: 1 / -1; margin: 0; font-size: var(--st-fs-xs); }
.w2-spin { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--st-border); border-top-color: var(--st-accent); border-radius: 50%; animation: w2spin .8s linear infinite; vertical-align: -2px; }
@keyframes w2spin { to { transform: rotate(360deg); } }
.w2-out-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 16px; border-bottom: 1px solid var(--st-border); }
.w2-items { display: flex; gap: 6px; min-width: 0; overflow-x: auto; }
.w2-chip { flex: none; }
.w2-chip { padding: 4px 10px; border: 1px solid var(--st-border); border-radius: var(--st-r-full); background: var(--st-surface); color: var(--st-text-muted); font: inherit; font-size: var(--st-fs-xs); cursor: pointer; }
.w2-chip.is-on { border-color: var(--st-accent); color: var(--st-text); background: var(--st-accent-soft); }
.w2-out-body { flex: 1; overflow-y: auto; padding: 16px 20px 28px; }
.w2-out-empty { height: 100%; display: grid; place-items: center; text-align: center; padding: 20px; }
.w2-bt { padding: 18px; display: grid; gap: 12px; }
.w2-bt h2 { margin: 0; font-size: var(--st-fs-lg); }
.w2-bt p { margin: 0; }
.w2-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.w2-kpis div { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--st-border); border-radius: var(--st-r-md); }
.w2-kpis span { font-size: var(--st-fs-xs); color: var(--st-text-muted); }
.w2-kpis b { font-size: var(--st-fs-lg); }
.w2-tabs { display: none; }
/* 전략 테스트·알림·모의 (11-01) — 보고서 속 백테스트 목록 · BT 머리 · 등록 카드 */
.w2-out-body > * + * { margin-top: 12px; }
.w2-rbt { padding: 14px 16px; display: grid; gap: 8px; }
.w2-rbt h3 { margin: 0; font-size: var(--st-fs-md); }
.w2-rbt p { margin: 0; font-size: var(--st-fs-sm); }
.w2-rbt ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.w2-rbt li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--st-border); border-radius: var(--st-r-md); }
.w2-rbt li > div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.w2-rbt li b { font-size: var(--st-fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w2-rbt li small { font-size: var(--st-fs-xs); font-variant-numeric: tabular-nums; }
.w2-rbt li .st-btn { flex: none; }
.w2-bt-links { display: grid; gap: 6px; }
.w2-al-k { display: flex; align-items: center; gap: 8px; }
.w2-al-st { padding: 1px 8px; border-radius: var(--st-r-full); font-size: var(--st-fs-xs); background: var(--st-surface-2); color: var(--st-text-muted); }
.w2-al-st.is-on { background: var(--st-ok-soft); color: var(--st-ok); }   /* 켜짐 = 상태색 (상승색은 한국어에서 빨강이라 오류처럼 보였다) */
.w2-kpis b:not(.num) { font-size: var(--st-fs-md); }
#w2-out-open { flex: none; white-space: nowrap; }   /* 휴대폰에서 세 줄로 접혔다 (11-01 시험) */
/* 백테스트 부품 (11-01 lab-bench.js — 백테스트 화면과 같은 설정 칸·결과·공유·알림) — 오른쪽 칸은 한 줄로: 설정은 접어 두고 결과를 위로 */
.w2-bench { display: flex; flex-direction: column; gap: 14px; }
.w2-bench[hidden] { display: none; }
.w2-bench-set { padding: 0; }
.w2-bench-set > summary { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 12px 40px 12px 16px; cursor: pointer; list-style: none; }
.w2-bench-set > summary::-webkit-details-marker { display: none; }
.w2-bench-set > summary::after { content: '▾'; position: absolute; right: 16px; top: 12px; color: var(--st-text-muted); }   /* 휴대폰에서 글이 접혀도 표시는 오른쪽 위 */
.w2-bench-set[open] > summary { border-bottom: 1px solid var(--st-border); }
.w2-bench-set[open] > summary::after { content: '▴'; }
.w2-bench-set > summary span { font-size: var(--st-fs-sm); }
.w2-bench-saved { padding: 12px 16px 0; }
.w2-bench-saved .lb-saved { justify-content: flex-start; }
.w2-bench .lb-side { padding: 0; }
.w2-bench .lb-runbar { border-radius: 0 0 var(--st-r-lg) var(--st-r-lg); }
.w2-bench .lb-out { min-width: 0; }
.w2-bthead { display: grid; gap: 10px; }
.w2-bthead h2 { margin: 2px 0 0; font-size: var(--st-fs-lg); overflow-wrap: anywhere; }
.w2-bthead .w2-al-k { margin: 0; flex-wrap: wrap; }
.w2-from { padding: 1px 8px; border: 1px solid var(--st-border); border-radius: var(--st-r-full); background: var(--st-surface); color: var(--st-text-muted); font: inherit; font-size: var(--st-fs-xs); cursor: pointer; }
.w2-from:hover { border-color: var(--st-accent); color: var(--st-accent); }
.w2-dirty { margin: 0; padding: 10px 12px; border-radius: var(--st-r-md); background: var(--st-accent-soft); font-size: var(--st-fs-sm); line-height: 1.5; }
/* 보고서 쓰기 — 고급 모델 · 남은 횟수 · 가입 안내 · 넘긴 요청 (옛 작업실과 같다) */
.w2-model { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: var(--st-fs-sm); }
.w2-model label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.w2-model input { margin: 0; accent-color: var(--st-accent); }
.w2-model small { font-size: var(--st-fs-xs); }
.w2-join { grid-column: 1 / -1; margin: 0; font-size: var(--st-fs-xs); }
.w2-brief-d summary { cursor: pointer; }
.w2-brief-d p { margin: 6px 0 0; white-space: pre-line; }
.w2-out-acts { flex: none; display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.w2-out-acts[hidden] { display: none; }
.w2-out-acts .shr-wrap { position: relative; }
@media (max-width: 1180px) { .w2 { grid-template-columns: minmax(320px, 420px) minmax(0, 1fr); } }
@media (max-width: 900px) {
  .w2-tabs { display: flex; gap: 6px; padding: 8px 16px; border-bottom: 1px solid var(--st-border); background: var(--st-surface); }
  .w2-tabs button { flex: 1; padding: 8px; border: 1px solid var(--st-border); border-radius: var(--st-r-md); background: none; color: var(--st-text-muted); font: inherit; font-size: var(--st-fs-sm); }
  .w2-tabs button[aria-selected="true"] { border-color: var(--st-accent); color: var(--st-text); background: var(--st-accent-soft); }
  .w2 { display: block; flex: 1; min-height: 0; }
  .w2-chat, .w2-out { height: 100%; border-right: 0; }
  body:not([data-w2tab="chat"]) .w2-chat, body:not([data-w2tab="out"]) .w2-out { display: none; }
  .w2-list-t { display: none; }
  .w2-list-btn, .w2-icon-b { height: 44px; min-width: 44px; justify-content: center; }
  .w2-out-body { padding: 14px 16px 24px; }
}

/* 포트폴리오 · 전략 (11-01 기획 §8) — 숫자는 서버 카드 그대로, 단추는 트레이딩 화면과 같은 라우트 */
.w2-pf { display: grid; gap: 10px; }
.w2-pf h2, .w2-pf h3 { margin: 0; }
.w2-pf h3 { font-size: var(--st-fs-md); }
.w2-pf p { margin: 0; }
.w2-al-st.is-err { background: var(--st-err-soft); color: var(--st-err); }
.w2-kpis b.is-up, .w2-pf .is-up { color: var(--st-up); }
.w2-kpis b.is-down, .w2-pf .is-down { color: var(--st-down); }
.w2-kpis b { font-variant-numeric: tabular-nums; }
.w2-spark { width: 100%; height: 44px; display: block; }
.w2-spark polyline { stroke: var(--st-text-muted); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.w2-spark.is-up polyline { stroke: var(--st-up); }
.w2-spark.is-down polyline { stroke: var(--st-down); }
.w2-pf-cf:empty { display: none; }
.w2-pf-cf { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--st-warn); border-radius: var(--st-r-md); background: var(--st-warn-soft); font-size: var(--st-fs-sm); }
.w2-pf-foot { font-size: var(--st-fs-sm); }
.w2-pf-risk { font-size: var(--st-fs-sm); padding: 8px 10px; border-radius: var(--st-r-md); background: var(--st-surface-2); }
.w2-pf-risk.is-warn { background: var(--st-warn-soft); }
.w2-pf-tops { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.w2-pf-top { display: grid; gap: 6px; }
.w2-pf-top h3 { font-size: var(--st-fs-sm); color: var(--st-text-muted); }
.w2-pf-top ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.w2-pf-top li { display: flex; justify-content: flex-start; align-items: center; gap: 8px; font-size: var(--st-fs-sm); font-variant-numeric: tabular-nums; }
.w2-pf-top .w2-from { max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w2-pick-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.w2-pick-l li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--st-border); border-radius: var(--st-r-md); background: var(--st-surface); }
.w2-pick-l li > div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.w2-pick-l li b { font-size: var(--st-fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w2-pick-l li small { font-size: var(--st-fs-xs); font-variant-numeric: tabular-nums; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.w2-pick-l li .st-btn { flex: none; }
.w2-pfcf { display: grid; gap: 6px; }
.w2-pfcf p { margin: 0; }
.w2-aicard { display: grid; gap: 6px; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--st-border); border-radius: var(--st-r-md); background: var(--st-surface); }
.w2-aicard h4 { margin: 0; font-size: var(--st-fs-sm); }
.w2-aicard p { margin: 0; font-size: var(--st-fs-sm); }
.w2-aicard ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.w2-aicard li { display: flex; justify-content: space-between; gap: 8px; font-size: var(--st-fs-sm); }

/* 세 묶음 (11-01 기획 §9) — 전략 만들기 단 · 전략 카드 세 칸 · 알림 설정 칸 */
.w2-wz { display: grid; gap: 10px; }
.w2-wz p { margin: 0; }
.w2-wz-n { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 6px; border-radius: 50%; background: var(--st-accent-soft); color: var(--st-accent); font-size: var(--st-fs-xs); font-weight: 700; flex: none; }
.w2-wz-step { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--st-border); border-radius: var(--st-r-md); background: var(--st-surface); }
.w2-wz-step h4 { margin: 0; display: flex; align-items: center; font-size: var(--st-fs-sm); }
.w2-wz-done { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: var(--st-fs-sm); }
.w2-wz-done > span:not(.w2-wz-n) { color: var(--st-text-muted); }
.w2-wz-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.w2-wz-opt { display: grid; gap: 4px; text-align: left; padding: 10px 12px; border: 1px solid var(--st-border); border-radius: var(--st-r-md); background: var(--st-surface); color: var(--st-text); font: inherit; cursor: pointer; }
.w2-wz-opt:hover, .w2-wz-opt:focus-visible { border-color: var(--st-accent); background: var(--st-accent-soft); }
.w2-wz-opt small { color: var(--st-text-muted); font-size: var(--st-fs-xs); line-height: 1.5; }
.w2-wz-f { display: grid; gap: 10px; }
.w2-wz-f[hidden] { display: none; }
.w2-wz-g { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0; padding: 0; border: 0; font-size: var(--st-fs-sm); }
.w2-wz-g legend { width: 100%; padding: 0; margin-bottom: 4px; font-size: var(--st-fs-xs); color: var(--st-text-muted); }
.w2-wz-g label { display: inline-flex; align-items: center; gap: 4px; }
.w2-wz-g label.is-off { color: var(--st-text-muted); }
.w2-wz-g input[type="time"] { padding: 4px 6px; border: 1px solid var(--st-border); border-radius: var(--st-r-sm); background: var(--st-surface); color: var(--st-text); font: inherit; }
.w2-wz-hint { font-size: var(--st-fs-xs); line-height: 1.5; }
.w2-grps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.w2-grp3 { display: grid; gap: 6px; align-content: start; padding: 10px 12px; border: 1px solid var(--st-border); border-radius: var(--st-r-md); }
.w2-grp3 h3 { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: var(--st-fs-sm); }
.w2-grp3 ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.w2-grp3 li { display: flex; justify-content: space-between; gap: 8px; font-size: var(--st-fs-xs); }
.w2-grp3 li span { color: var(--st-text-muted); }
.w2-grp3 li b { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.w2-nf-ed:empty { display: none; }
.w2-nf-ed { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--st-accent); border-radius: var(--st-r-md); }
.w2-nf-diff { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--st-fs-sm); }
.w2-nf-diff li { display: flex; justify-content: space-between; gap: 8px; }

/* 토큰 잔액 줄 · 자기 AI 키 고르기 (11-02) */
.w2-byok { margin-left: .4em; font: inherit; font-size: .85em; padding: 1px 4px; max-width: 14rem; }

/* 보관함 · 흐름 줄 · 첫 화면 · 제목 바꾸기 (11-03 기획 §10, 시안 4FD2jtnHZ5vG8idXeYyTiv) */
.w2-side { width: 360px; }
.w2-ltabs { display: flex; margin: 0 2px; border-bottom: 1px solid var(--st-border); }
.w2-ltab { flex: 1; min-height: 38px; padding: 0 4px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--st-text-muted); font: inherit; font-size: var(--st-fs-sm); cursor: pointer; white-space: nowrap; }
.w2-ltab span { color: var(--st-text-muted); font-size: var(--st-fs-xs); font-variant-numeric: tabular-nums; }
.w2-ltab[aria-selected="true"] { color: var(--st-accent); border-bottom-color: var(--st-accent); font-weight: 600; }
.w2-lbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 2px; }
.w2-lbar .w2-q { flex: 1; min-width: 120px; margin: 0; }
.w2-lf { display: inline-flex; gap: 4px; }
.w2-lf:empty { display: none; }
.w2-lrow { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; text-align: left; padding: 8px 10px; border: 1px solid transparent; border-radius: var(--st-r-md); background: none; color: var(--st-text); cursor: pointer; font: inherit; }
.w2-lrow:hover { background: var(--st-surface-2); }
.w2-lrow.is-on { background: var(--st-accent-soft); border-color: var(--st-accent); }
.w2-lrow b { font-size: var(--st-fs-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w2-lrow small { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: var(--st-fs-xs); color: var(--st-text-muted); font-variant-numeric: tabular-nums; }
.w2-lrow.is-del b, .w2-lrow.is-del small { color: var(--st-text-muted); }
.w2-lrow.is-del b { font-weight: 500; }
.w2-lret { font-size: var(--st-fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.w2-lret.is-up, .w2-step-r.is-up, .w2-hc .is-up { color: var(--st-up); }
.w2-lret.is-down, .w2-step-r.is-down, .w2-hc .is-down { color: var(--st-down); }
.w2-lmore { margin: 4px 10px 8px; justify-self: start; }
.w2-lfold { margin: 10px 0 2px; padding: 0 8px; font-size: var(--st-fs-xs); display: flex; align-items: center; gap: 6px; }
.w2-lbare { opacity: .8; }
.w2-tasklist ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.w2-bd { display: inline-block; padding: 0 7px; border-radius: var(--st-r-full); font-size: var(--st-fs-xs); line-height: 18px; font-weight: 500; white-space: nowrap; background: var(--st-surface-2); color: var(--st-text-muted); }
.w2-bd-paper, .w2-bd-strategy { background: var(--st-accent-soft); color: var(--st-accent); }
.w2-bd-alert { background: var(--st-warn-soft); color: var(--st-text); }
.w2-bd-report { background: var(--st-surface-2); color: var(--st-text); }
.w2-bd-backtest { background: var(--st-ok-soft); color: var(--st-ok); }
.w2-al-st.is-del { background: var(--st-surface-2); color: var(--st-text-muted); text-decoration: line-through; }
.w2-al-st.is-pause { background: var(--st-warn-soft); color: var(--st-text); }
/* 흐름 줄 — 칩에 종류·번호·수익률·상태 + 둘째 줄 제목 */
.w2-items { align-items: center; padding: 2px 0; scrollbar-width: thin; }
.w2-step { display: grid; gap: 1px; max-width: 220px; padding: 3px 10px; border-radius: var(--st-r-md); text-align: left; line-height: 1.3; }
.w2-step-t { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.w2-step-t b { font-size: var(--st-fs-xs); color: var(--st-text); }
.w2-step-r { font-size: var(--st-fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
.w2-step small { font-size: 11px; color: var(--st-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w2-step .w2-bd { line-height: 16px; padding: 0 6px; }
.w2-step .w2-al-st { padding: 0 6px; font-size: 11px; }
.w2-step.is-del { opacity: .55; }
.w2-step.is-del.is-on { opacity: .8; }
.w2-flow-ar { flex: none; color: var(--st-text-muted); font-size: 14px; }
.w2-flow-gap { flex: none; width: 6px; }
.w2-flow-sep { flex: none; width: 1px; height: 26px; margin: 0 4px; background: var(--st-border); }
/* 다른 대화 것 띠 · 지운 전략 카드 */
.w2-peek { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 12px; border: 1px solid var(--st-accent); border-radius: var(--st-r-md); background: var(--st-accent-soft); font-size: var(--st-fs-sm); }
.w2-peek[hidden] { display: none; }
.w2-peek p { margin: 0; }
.w2-delcard h2 { color: var(--st-text-muted); }
/* 첫 화면 오른쪽 — 그동안 만든 것 */
.w2-home { display: grid; gap: 12px; }
.w2-home-p { margin: 0; font-size: var(--st-fs-sm); line-height: 1.5; }
.w2-home-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; align-content: start; }
.w2-hc { display: grid; gap: 8px; align-content: start; padding: 14px 16px; border: 1px solid var(--st-border); border-radius: var(--st-r-lg); background: var(--st-surface); }
.w2-hc-acct { grid-column: 1 / -1; }
.w2-hc h3 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: var(--st-fs-sm); }
.w2-hc h3 .w2-from { margin-left: auto; }
.w2-hc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.w2-hc p { margin: 0; font-size: var(--st-fs-sm); }
.w2-hc-foot { font-size: var(--st-fs-xs) !important; }
.w2-hl { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 8px; border: 0; border-radius: var(--st-r-md); background: none; color: var(--st-text); font: inherit; text-align: left; cursor: pointer; }
.w2-hl:hover { background: var(--st-surface-2); }
.w2-hl b { font-size: var(--st-fs-sm); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w2-hl small { font-size: var(--st-fs-xs); color: var(--st-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.w2-exg { margin: 6px 0 -2px; text-align: left; font-size: var(--st-fs-xs); font-weight: 600; color: var(--st-text-muted); }
/* 제목 바꾸기 */
.w2-rename { width: 30px; height: 30px; }
.w2-title-in { flex: 1; min-width: 0; padding: 6px 10px; border: 1px solid var(--st-accent); border-radius: var(--st-r-md); background: var(--st-surface); color: var(--st-text); font: inherit; font-size: var(--st-fs-md); font-weight: 600; }
@media (max-width: 900px) {
  /* 휴대폰 결과물 탭 (§10 D) — 흐름을 세로 목록으로, 그 아래 고른 카드 */
  .w2-out-head { height: auto; flex-wrap: wrap; padding: 10px 16px; }
  .w2-items { flex-direction: column; align-items: stretch; width: 100%; overflow: visible; gap: 0; }
  .w2-items .w2-step { max-width: none; width: 100%; padding: 7px 10px; }
  .w2-flow-ar { align-self: flex-start; margin-left: 18px; width: 2px; height: 10px; overflow: hidden; color: transparent; background: var(--st-border); }
  .w2-flow-gap { height: 6px; }
  .w2-flow-sep { width: 100%; height: 1px; margin: 8px 0; }
  #w2-out-open { margin-left: auto; }
  .w2-side { width: 360px; }
}
.w2-delcard [data-clonemsg]:empty { display: none; }
#w2-out-open.w2-open-ic { width: 34px; padding: 0; display: inline-grid; place-items: center; }
#w2-out-open.w2-open-ic[hidden] { display: none; }

/* 모의 전략 카드 (11-03 시안 E) — 그래프 줄(pf-graph.js) 아래 설정 세 칸은 접어 둔다 */
.w2-cfgfold { margin: 4px 0 10px; }
.w2-cfgfold > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; padding: 0 12px; border: 1px solid var(--st-border); border-radius: var(--st-r-md); cursor: pointer; list-style: none; font-size: var(--st-fs-sm); }
.w2-cfgfold > summary::-webkit-details-marker { display: none; }
.w2-cfgfold > summary::after { content: "▾"; color: var(--st-text-muted); }
.w2-cfgfold[open] > summary { margin-bottom: 10px; }
.w2-cfgfold[open] > summary::after { content: "▴"; }
/* 모의 계좌 한눈에 — 그래프 카드 (11-04 시안 9feWXkRci1yx21ZJ9UpxQN) */
.w2-pfg { gap: 12px; }
.w2-pfg-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.w2-pfg-segs { display: flex; gap: 4px; }
.w2-pfg-seg { font: inherit; font-size: var(--st-fs-xs); padding: 2px 10px; border-radius: var(--st-r-full); border: 1px solid var(--st-border); background: var(--st-surface-2); color: var(--st-text-muted); cursor: pointer; }
.w2-pfg-seg[aria-pressed="true"] { border-color: var(--st-accent); background: var(--st-accent-soft, var(--st-chip)); color: var(--st-accent); font-weight: 600; }
#w2-pfg-body { display: grid; gap: 10px; min-width: 0; transition: opacity .15s; }
#w2-pfg-body.is-loading { opacity: .45; }
.w2-pfg-tiles { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
@media (max-width: 720px) { .w2-pfg-tiles { grid-template-columns: minmax(0, 1fr); } }
.w2-pfg-t { background: var(--st-surface-2); border-radius: var(--st-r-md); padding: 10px 12px; display: grid; gap: 5px; align-content: start; min-width: 0; }
.w2-pfg-l { font-size: var(--st-fs-xs); color: var(--st-text-muted); }
.w2-pfg-v { font-size: var(--st-fs-lg); font-weight: 700; font-variant-numeric: tabular-nums; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.w2-pfg-v small { font-size: var(--st-fs-sm); font-weight: 600; }
.w2-pfg-s { font-size: var(--st-fs-xs); color: var(--st-text-muted); font-variant-numeric: tabular-nums; }
.w2-pfg-s b { font-weight: 600; }
.w2-pfg .is-up { color: var(--st-up); } .w2-pfg .is-down { color: var(--st-down); }
.w2-pfg-eq { display: block; width: 100%; height: auto; max-height: 90px; }
.w2-pfg-eq .a { fill: color-mix(in srgb, var(--st-down) 14%, transparent); } .w2-pfg-eq.is-up .a { fill: color-mix(in srgb, var(--st-up) 14%, transparent); }
.w2-pfg-eq .l { fill: none; stroke: var(--st-down); stroke-width: 1.6; } .w2-pfg-eq.is-up .l { stroke: var(--st-up); }
.w2-pfg-eq line { stroke: var(--st-text-muted); stroke-dasharray: 3 3; stroke-width: 1; opacity: .7; }
.w2-pfg-eq text, .w2-pfg-db text { font-size: 9px; fill: var(--st-text-muted); }
.w2-pfg-db { display: block; width: 100%; max-width: 240px; height: auto; }
.w2-pfg-db line { stroke: var(--st-border); } .w2-pfg-db .in { fill: var(--st-up); } .w2-pfg-db .out { fill: var(--st-down); }
.w2-pfg-al { height: 10px; border-radius: 5px; background: var(--st-border); overflow: hidden; display: flex; }
.w2-pfg-al i { display: block; height: 100%; background: var(--st-accent); border-right: 1px solid var(--st-surface-2); }
.w2-pfg-al i:nth-child(2n) { background: color-mix(in srgb, var(--st-accent) 55%, var(--st-surface-2)); }
.w2-pfg-ga { height: 6px; border-radius: 3px; background: var(--st-border); overflow: hidden; }
.w2-pfg-ga i { display: block; height: 100%; background: var(--st-warn); }
.w2-pfg-pill { display: inline-block; padding: 1px 8px; border-radius: var(--st-r-full); font-size: var(--st-fs-xs); font-weight: 600; white-space: nowrap; background: var(--st-chip); color: var(--st-text-muted); }
.w2-pfg-pill.is-ok { background: var(--st-ok-soft); color: var(--st-ok); }
.w2-pfg-pill.is-watch { background: var(--st-warn-soft); color: var(--st-warn); }
.w2-pfg-pill.is-bad { background: color-mix(in srgb, var(--st-down) 14%, transparent); color: var(--st-down); }
.w2-pfg-pill.is-new { background: var(--st-accent-soft, var(--st-chip)); color: var(--st-accent); }
.w2-pfg-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.w2-pfg-r { display: grid; grid-template-columns: minmax(0, 14em) minmax(80px, 1fr) 84px auto auto; gap: 10px; align-items: center; font-size: var(--st-fs-sm); }
.w2-pfg-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--st-accent); background: none; border: 0; font: inherit; text-align: left; padding: 0; cursor: pointer; min-width: 0; }
.w2-pfg-n small { display: block; color: var(--st-text-muted); font-size: var(--st-fs-xs); }
.w2-pfg-n:hover { text-decoration: underline; }
.w2-pfg-bar { position: relative; height: 14px; border-radius: 4px; background: var(--st-surface-2); }
.w2-pfg-bar .z { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--st-border); }
.w2-pfg-bar i { position: absolute; top: 2px; bottom: 2px; border-radius: 3px; min-width: 2px; }
.w2-pfg-bar i.is-up { background: var(--st-up); } .w2-pfg-bar i.is-down { background: var(--st-down); }
.w2-pfg-sp { display: block; width: 84px; height: 24px; } .w2-pfg-sp path { fill: none; stroke-width: 1.5; }
.w2-pfg-sp.is-up path { stroke: var(--st-up); } .w2-pfg-sp.is-down path { stroke: var(--st-down); }
.w2-pfg-pv { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.w2-pfg-pv small { display: block; font-weight: 400; color: var(--st-text-muted); font-size: var(--st-fs-xs); }
.w2-pfg-st { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.w2-pfg-hint { font-size: var(--st-fs-xs); color: var(--st-text-muted); }
@media (max-width: 720px) { .w2-pfg-r { grid-template-columns: minmax(0, 1fr) auto; } .w2-pfg-bar, .w2-pfg-r .w2-pfg-sp { display: none; } .w2-pfg-st { grid-column: 1 / -1; justify-content: flex-start; } }