@import url("./journal.css");  /* 모달·일지·칩·손익색 — 게임 밖에서도 쓰려고 뗐다 */ @import url("./layout.css");  /* 머리 줄·칸 카드 — KR·US 같은 틀 */
@import url("./dock.css");  /* 화면 밖으로 나간 버튼 줄을 보이는 화면 아래에 띄운다(js/dock.js) */ @import url("./boards.css");  /* 신고가 칸 머리·고RS 토글 */
/* 공용 격자·손익 색. 색 값은 앱 game.css 가 --game-up/--game-down 을 자기 팔레트 변수에 맵핑한다. */
.game-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 900px) { .game-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.game-grid > * { min-width: 0; }
.game-grid > .wide { grid-column: 1 / -1; }
/* 주문 줄(종목 차트 바로 아래) — 넓으면 왼쪽 상태표 · 오른쪽 조작부. */
.controls { display: grid; gap: 4px 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .controls { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .controls #log { grid-column: 1 / -1; }
  /* 상태표는 두 칸(진행|종가, 보유|평단 …) — 한 줄씩이면 오른쪽 버튼 밑이 텅 빈다 */
  #panel table, #panel tbody { display: block; }
  #panel tbody { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; }
  #panel tr { display: flex; justify-content: space-between; } }
.controls #tools { margin-top: 0; align-content: start; }


/* 조작부 — 애플식: 회색 트랙 위 흰 알약(세그먼트), 채운 둥근 주문 버튼. */
#tools { display: grid; gap: 10px; margin: 6px 0 8px; font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", system-ui, sans-serif; }
.tool-group { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 4px 10px; }
.tool-group .tool-hint { grid-column: 2; }
.tool-label { white-space: nowrap; font-size: 11px; font-weight: 600; letter-spacing: .04em; color: #8e8e93; }
.tool-hint { margin: 0; font-size: 12px; color: #8e8e93; line-height: 1.5; }
#pct-hint { min-height: 3em; }  /* 매수 줄 + 매도 줄 = 늘 두 줄(1.5 × 2) — 비어 있을 때(게임 전)도 같은 높이 */
#pct-hint span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }  /* 좁아도 줄바꿈 대신 … (전문은 title) */
#tools button { font: inherit; cursor: pointer; border: 0; -webkit-tap-highlight-color: transparent;
  transition: background-color .2s ease, box-shadow .2s ease, transform .1s ease, opacity .2s ease; }
#tools .seg button { font-size: 13px; }  /* #tools button 의 font: inherit 가 크기까지 덮는다 — 앱 본문 크기(KR 14 · US 15)와 무관하게 */
#actions { display: flex; gap: 8px; }
#actions button { flex: 1; padding: 8px 0; border-radius: 10px; font-size: 14px; font-weight: 600; color: #fff; }
#actions button:active:not(:disabled) { transform: scale(.97); }
#actions [data-action="buy"] { background: var(--game-up); }
#actions [data-action="sell"] { background: var(--game-down); }
#actions [data-action="hold"], #actions [data-action^="skip"] { background: rgba(120, 120, 128, .16); color: inherit; }
#actions button[hidden] { display: none; }
#actions [data-action="end"], #actions [data-action="another"] { flex: 0 0 auto; padding: 8px 14px; background: rgba(120, 120, 128, .08);
  color: inherit; font-weight: 500; box-shadow: inset 0 0 0 1px rgba(120, 120, 128, .22); }
#actions [data-action="end"] { margin-left: 8px; }
/* 매수·매도·넘기기는 윗줄, 게임 종료·다른 종목은 아랫줄(::after 가 줄을 끊는다) — 폰도 같다 */
#actions { flex-wrap: wrap; row-gap: 4px; }  /* 끊는 줄(높이 0) 위아래로 두 번 → 8px */
.tool-group:has(#actions) .tool-label { align-self: start; margin-top: 11px; }
#actions::after { content: ""; order: 1; flex-basis: 100%; }
#actions [data-action="end"], #actions [data-action="another"] { order: 2; }
#actions [data-action="end"], #actions [data-action="another"] { flex: 1 1 0; margin-left: 0; }  /* 아랫줄 둘이 윗줄 폭을 반씩 */

#actions button:disabled { opacity: .35; cursor: not-allowed; }
#tools button:focus-visible { outline: 2px solid #b3282d; outline-offset: 2px; }
#panel table, #summary table, #account table { border-collapse: collapse; width: 100%; }
#panel th, #summary th { text-align: left; font-weight: 400; opacity: 0.75; padding: 2px 8px 2px 0; }
#panel td, #summary td, #account td { text-align: right; padding: 2px 0 2px 8px; font-variant-numeric: tabular-nums; }
#account th, #account td:first-child, #account td:nth-child(2) { text-align: left; }
#log { list-style: none; padding: 0; margin: 6px 0; max-height: 220px; overflow-y: auto; font-size: 0.9em; }
#log .msg { opacity: 0.8; font-style: italic; }
/* 오류 알림(modal.js toast) — 보이는 화면 위 가운데(top 은 JS 가 문서 좌표로), 잠깐 떴다 사라진다. 양쪽 테마에서 읽히게 어두운 바탕 고정 */
#game-toast { position: absolute; left: 50%; z-index: 1000; max-width: min(90vw, 480px); padding: 10px 16px; border-radius: 10px;
  background: rgba(28, 28, 30, .92); color: #fff; font-size: 14px; line-height: 1.4; box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
  pointer-events: none; opacity: 0; transform: translate(-50%, -8px); transition: opacity .2s ease, transform .2s ease; }
#game-toast.show { opacity: 1; transform: translate(-50%, 0); }
.end-note { margin: 0 0 10px; padding: 8px 12px; border-radius: 8px; background: rgba(255, 159, 10, .14); font-size: 14px; line-height: 1.5; }
.halted { font-size: 0.75em; padding: 1px 6px; border: 1px solid currentColor; border-radius: 4px; }

/* 시작 줄·검색창 — 블로그 «종목검색» 창과 같은 값(#d8d8d8 테두리, 포커스 #b3282d + 옅은 고리, 결과 줄 #fbeceb). */
#start-form { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 6px; padding: 12px; border-radius: 14px; background: rgba(120, 120, 128, .07); }
#start-form .tg-search { flex: 1 1 240px; }
.start-note { margin: 0 0 14px; font-size: 12px; color: #8a8a8a; }
#start-form input, .tg-search input { width: 100%; box-sizing: border-box; padding: 9px 11px; font: inherit; font-size: 14px; line-height: 1.5;
  color: #222; background: #fff; border: 1px solid #d8d8d8; border-radius: 8px; -webkit-appearance: none; appearance: none; }
#start-form #date { width: auto; flex: 0 0 auto; }
#start-form input:focus, .tg-search input:focus { outline: 0; border-color: #b3282d; box-shadow: 0 0 0 3px rgba(179, 40, 45, .12); }
#start-btn { flex: 0 0 auto; padding: 9px 22px; border: 0; border-radius: 8px; background: #b3282d; color: #fff; font: inherit;
  font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color .15s ease, transform .1s ease; }
#start-btn:hover { background: #8b0000; }
#start-btn:active { transform: scale(.97); }
.tg-search { position: relative; margin: 0 0 8px; }
#start-form .tg-search { margin: 0; }
.tg-list { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none;
  max-height: 300px; overflow-y: auto; background: #fff; border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .14), 0 0 0 1px rgba(0, 0, 0, .05); }
.tg-list[hidden] { display: none; }
.tg-list li { display: flex; align-items: baseline; gap: 8px; padding: 8px 10px; border-radius: 6px; font-size: 14px; line-height: 1.4; color: #1a1a1a; cursor: pointer; }
.tg-list li.on { background: #fbeceb; }
.tg-list b { font-weight: 600; white-space: nowrap; max-width: 60%; overflow: hidden; text-overflow: ellipsis; }
.tg-list i { font-style: normal; font-size: 12.5px; color: #6b6b6b; }
.tg-list span { margin-left: auto; font-size: 11px; color: #8a8a8a; white-space: nowrap; }

/* 신고가·업종 패널(boards.js) — 0 중심 양방향 막대, 색은 캔들·손익과 같은 변수. */
.board { max-height: 420px; overflow-y: auto; }
.board-empty { margin: 6px 0; font-size: 13px; color: #8e8e93; }
.board-highs { border-collapse: collapse; width: 100%; font-size: 12.5px; line-height: 1.7; }
.board-highs th { font-weight: 400; opacity: .75; text-align: right; }
.board-highs th:first-child, .board-highs td:first-child { text-align: left; }
.board-highs td { text-align: right; font-variant-numeric: tabular-nums; padding: 0 0 0 8px; }
.board-highs td:first-child { padding: 0; }
.board-highs i, .bar-name i { font-style: normal; font-size: 11px; color: #8e8e93; }
.board-highs.pick tbody tr { cursor: pointer; }
.board-highs.pick tbody tr:hover { background: rgba(120, 120, 128, .08); }
/* 표 사이 호버 연동(crosshover.js) — 마우스가 올라간 종목은 모든 표에서 같은 색. 선택(.tg-multi)이 위에 칠해진다. */
.game-grid tbody tr.tg-hover { background: rgba(120, 120, 128, .16); }
.bar-row { display: grid; grid-template-columns: 1fr 1fr 64px; gap: 8px; align-items: center; font-size: 12.5px; line-height: 1.7; }
.bar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-val { text-align: right; font-variant-numeric: tabular-nums; }
.bar-track { position: relative; height: 10px; background: rgba(120, 120, 128, .12); border-radius: 5px; }
.bar-track b { position: absolute; top: 0; height: 100%; border-radius: 5px; }
.bar-track .pnl-up { background: var(--game-up); }
.bar-track .pnl-down { background: var(--game-down); }
.bar-row.mine { font-weight: 600; background: rgba(120, 120, 128, .08); }
#board-highs h3, #board-industries h3 { margin: 0 0 6px; font-size: 15px; }
#start-form .blind-toggle, .market-bar .blind-toggle { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; cursor: pointer; }
#start-form .blind-toggle input, .market-bar .blind-toggle input { width: auto; margin: 0; padding: 0; -webkit-appearance: checkbox; appearance: auto; accent-color: #b3282d; }
#start-form .blind-toggle:has(input:disabled) { opacity: .45; cursor: not-allowed; }

/* 모달(지수·신고가·업종·결과·매매일지) — top 은 modal.js 가 보이는 화면 가운데로 정한다. 바깥(딤)이나 ✕ 를 누르면 닫힌다. */
.account-btn, .view-bar button { padding: 5px 12px; border: 0; border-radius: 999px; background: rgba(120, 120, 128, .12); color: inherit;
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.view-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; }
.view-range { margin-left: auto; }  /* 기간 칩 + 정보줄은 오른쪽으로 */
.view-bar .view-range button { flex: none; white-space: nowrap; padding: 3px 10px; border-radius: 7px; background: transparent; font-size: 12.5px; }
.view-bar .view-range button[aria-pressed="true"] { background: var(--bg, #fff); }
.rs-hot { color: var(--game-up); font-weight: 600; }
.cap-est { opacity: .7; }  /* ≈ 추정 시총(KR 2023-08-07 이전: 수정종가 × 현재 주식수) */
/* 정보줄은 항상 한 줄 — 길이에 따라 줄바꿈이 오락가락하면 차트가 위아래로 흔들린다. 넘치면 … */
.view-info { flex: 0 1 auto; min-width: 0; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; color: #8e8e93; font-variant-numeric: tabular-nums; }
@media (max-width: 999px) { .view-info { flex-basis: 100%; } }  /* 좁으면 «항상» 제 줄 — 내용 길이가 아니라 폭으로 정한다 */
.view-bar button:hover, .account-btn:hover { background: rgba(120, 120, 128, .2); }
#m-index .game-grid { margin-top: 28px; }
#result #account { margin-top: 16px; font-size: 13px; max-height: 260px; overflow-y: auto; }
.tg-modal .board { max-height: 600px; }

/* 매매일지 모달 — 버튼은 screener_kr «이미지 복사 · PNG 저장 · HTML 복사» 와 같은 칩. */
.journal-btn { margin-top: 8px; padding: 8px 14px; border: 0; border-radius: 10px; background: rgba(120, 120, 128, .12);
  color: inherit; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.journal-btn:hover { background: rgba(120, 120, 128, .2); }
.controls .journal-btn { grid-column: 1 / -1; justify-self: start; }

/* 폰(≤600px, screener 와 같은 선): 좌우 여백 8px · 카드 테두리 없음 · 주문 버튼을 차트 바로 밑으로 · 넘기기는 하루씩만.
   앱 game.css 가 뒤에 오므로 선택자를 한 겹 더 써서 이긴다. */
@media (max-width: 600px) {
  html body { padding-left: 8px; padding-right: 8px; }
  .game-grid > .game-cell { border: 0; border-radius: 0; padding: 0; }
  .controls #tools { order: -1; margin-top: 8px; }
  #tools .tool-group:has(#actions) { order: -1; }
  #actions [data-action^="skip"] { display: none; }
  .view-info { white-space: normal; height: 3em; line-height: 1.5; }  /* 폰은 늘 두 줄 자리 — 업종이 잘리지 않고 높이도 고정 */
}

/* 플레이 기록 모달(history.js) — 머리글 «아이디 님» 이 여는 버튼. 표 모양은 journal-table 을 같이 쓴다. */
.me-link { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
#m-history { width: min(860px, calc(100% - 32px)); }
.history-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; }
.history-nav button, .history-nav input { padding: 4px 10px; border: 1px solid rgba(120, 120, 128, .3); border-radius: 8px; background: transparent;
  color: inherit; font: inherit; font-size: 12.5px; cursor: pointer; }
.history-sum { margin: 0 0 8px; font-size: 13px; color: #8e8e93; }
.history-wrap { max-height: 60vh; overflow: auto; }
.history-table td i { font-style: normal; font-size: 11px; color: #8e8e93; }
.history-table td { white-space: nowrap; }
.history-table th:nth-child(3), .history-table td:nth-child(3) { padding-left: 12px; text-align: left; }  /* 1열 No. · 2열 시각 · 3열 종목 — journal-table 은 앞 두 열만 왼쪽 정렬 */
.history-table th:first-child, .history-table td:first-child { padding-right: 16px; text-align: right; }  /* 번호와 시각 사이를 띄운다 */
.history-table td:first-child { color: #8e8e93; }

/* 선택 모달(modal.js choose) — 전량 매도 뒤 계속 / 다시 해보기 / 게임 종료 */
.choose-modal { width: min(420px, calc(100% - 32px)); }
.choose-msg { margin: 0 0 14px; font-size: 13.5px; line-height: 1.55; color: #8e8e93; }
.choose-btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.choose-btns button { padding: 6px 14px; border: 1px solid rgba(120, 120, 128, .3); border-radius: 8px; background: transparent;
  color: inherit; font: inherit; font-size: 13px; cursor: pointer; }
.choose-btns button:first-child { border-color: currentColor; font-weight: 600; }
/* 지수 칸 맨 위 한 줄 — 분산일 수 · 최근 FTD(pulse.js). 색은 차트 표시(▼ 파랑 · ▲ 주황)와 같다 — 적록 대신 파랑/주황 */
.pulse-line { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 6px; font-size: 13px; }
.pulse-line i { font-style: normal; opacity: .7; margin-left: 4px; }
.pulse-dd { color: #1f6fd1; }
.pulse-ftd { color: #e8710a; }
/* 지수 먼저 보기(market.js · watch.js · members.js) — 관심 칸 격자는 폭이 모자라면 한 줄에 하나(폰은 세로로 쌓인다), 칸 사이 16px. */
.market-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 4px 0 6px; padding: 12px; border-radius: 14px; background: rgba(120, 120, 128, .07); }
#m-date { font-weight: 600; font-variant-numeric: tabular-nums; }
#m-day { font-size: 13px; color: #8e8e93; }
/* 넘기기 = 바텀업 «1일 뒤» 버튼(#actions hold)과 같은 모양 · 모드 토글 = .seg 알약(journal.css), 현재 모드는 흰 알약 + 굵게 */
.m-row { flex: 1 0 100%; display: flex; align-items: center; gap: 8px; }  /* 넘기기·끝내기는 «D+n · 현금» 다음 줄 */
#m-steps { display: flex; gap: 8px; flex: 0 1 440px; } .m-row #m-end { flex: none; white-space: nowrap; padding: 8px 14px; border-radius: 10px; font-size: 14px; }
#m-steps button { flex: 1; padding: 8px 0; border: 0; border-radius: 10px; background: rgba(120, 120, 128, .16); color: inherit; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: opacity .2s ease, transform .1s ease; }
#m-steps button:active:not(:disabled) { transform: scale(.97); }
.mode-toggle { display: inline-flex; width: fit-content; align-self: center; font-size: 13px; }
.mode-toggle a { padding: 5px 14px; border-radius: 7px; color: inherit; text-decoration: none; font-weight: 500; white-space: nowrap; }
.mode-toggle a[aria-current="page"] { background: var(--bg, #fff); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .04); }
#m-end, .watch-row > button { padding: 5px 12px; border: 0; border-radius: 8px; background: rgba(120, 120, 128, .12); color: inherit; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.market-bar button:disabled, .watch-row > button:disabled { opacity: .35; cursor: not-allowed; }
.watch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 16px; margin-top: 8px; }
.watch-cell { min-width: 0; }
.watch-cell.held { box-shadow: inset 0 0 0 2px currentColor; border-radius: 12px; padding: 8px; }  /* 보유 칸 — 색이 아니라 테두리 + «■ 보유» 글자 */
.watch-cell.closing { outline: 3px dashed #e8710a; outline-offset: 2px; border-radius: 12px; }  /* 단축키 d 로 «닫겠습니까?» 묻는 칸 — 보유 칸(실선)과 모양으로 가른다 */
.watch-head { display: grid; gap: 6px; margin: 0 0 4px; } .watch-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.watch-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.watch-name i, .members-date { font-style: normal; font-size: 11px; color: #8e8e93; }
.watch-tag { flex: none; font-size: 12px; font-weight: 600; }
.watch-tag[hidden], .watch-row > button[hidden] { display: none; }
.watch-row .watch-close { flex: none; margin-left: auto; padding: 4px 9px; background: transparent; font-size: 15px; line-height: 1; }
.watch-pct { flex: 0 0 auto; }
.watch-head .watch-buy { background: var(--game-up); color: #fff; } .watch-head .watch-sell { background: var(--game-down); color: #fff; }
.watch-hint span { display: inline; margin-right: 12px; }
.board.pick .bar-row { cursor: pointer; }
.board.pick .bar-row:hover { background: rgba(120, 120, 128, .08); }
.members-table th[data-key], .board-highs.sortable th[data-key] { cursor: pointer; white-space: nowrap; }
#members h3, #position h3 { margin: 0 0 6px; font-size: 15px; }
.position-info { text-align: left; margin: 4px 0 0; }
.markets-head { margin: 14px 0 4px; font-size: 14px; }
/* 탑다운 시작일(marketdate.js, 2026-11-08) — 날짜 숨김을 켜면 잠긴다. 연습 판 배지는 주황 테두리 + 굵은 글자(색만으로 가르지 않는다). */
.market-bar .date-pick { display: flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
.market-bar .date-pick input { width: auto; padding: 4px 6px; font: inherit; }
.market-bar .date-pick.off { opacity: .45; }
.practice-badge { padding: 3px 10px; border: 2px solid #e8833a; border-radius: 999px; color: #c25e12; font-size: 12px; font-weight: 700; white-space: nowrap; }
.practice-badge[hidden] { display: none; }
/* 단축키 설명(helpkeys.js, 2026-11-08) — 제목 옆 버튼 + 아래로 여는 창. 바깥 클릭·Esc 로 닫힌다. */
.tg-help-wrap { position: relative; align-self: center; }
.tg-help-btn { padding: 3px 10px; border: 1px solid rgba(120, 120, 128, .35); border-radius: 999px; background: transparent; color: inherit;
  font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; }
.tg-help-btn[aria-expanded="true"] { background: rgba(120, 120, 128, .15); }
.tg-help { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; width: min(460px, calc(100vw - 32px)); padding: 12px 14px;
  border: 1px solid rgba(120, 120, 128, .35); border-radius: 12px; background: var(--bg, #fff); color: inherit; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.tg-help[hidden] { display: none; }
.tg-help h3 { margin: 0 0 8px; font-size: 14px; }
.tg-help table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tg-help td { padding: 4px 6px; vertical-align: top; border-top: 1px solid rgba(120, 120, 128, .18); }
.tg-help td:first-child { white-space: nowrap; width: 1%; }
.tg-help kbd { display: inline-block; padding: 1px 6px; border: 1px solid rgba(120, 120, 128, .45); border-bottom-width: 2px; border-radius: 5px;
  font: 600 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
.tg-help p { margin: 8px 0 0; font-size: 12px; opacity: .7; }