/* PC(701px 이상) 공통 셸: 상단 고정 바 + 가운데 정렬 콘텐츠 + 토스 톤 카드. 모바일(700px 이하)은 각 페이지 스타일 그대로. */
@media (min-width: 701px) {
  /* 토스증권 PC 톤: 흰 바탕, 아주 연한 패널(#fbfcfd + 연한 테두리), 12px 라운드, 상승 #ef3341 / 하락 #3182f6 */
  :root { --bg:#fff; --card:#fbfcfd; --panel:#fff; --text:#1a1f29; --muted:#6b7684; --line:rgba(7,25,76,.07); --soft:rgba(7,25,76,.04); --band:#f2f4f6; --up:#ef3341; --down:#3182f6; --flat:#6b7684; --accent:#3182f6; --alert:#fff7ed;
          --buy:#ffefef; --buyT:#de2b39; --sell:#ebf4ff; --sellT:#2272eb; --shadow:none; }
  @media (prefers-color-scheme: dark) { :root { --bg:#0f1012; --card:#191b1f; --text:#e5e8eb; --muted:#8b95a1; --line:#262930; --soft:#1f2227; --band:#1f2227; --up:#ff5c6c; --down:#5b9dff; --accent:#5b9dff; --buy:#3f1d1d; --buyT:#fca5a5; --sell:#1e2a44; --sellT:#93c5fd; --shadow:none; } }

  html { background:var(--bg) }
  body { font-family:Pretendard,-apple-system,"Apple SD Gothic Neo",system-ui,sans-serif; letter-spacing:-.2px; padding:76px 32px 48px; background:var(--bg); color:var(--text); font-size:14px }
  body > *:not(header):not(.tabbar):not(script):not(style) { max-width:1120px; margin-left:auto; margin-right:auto }
  header:not(.topbar) { visibility:hidden }   /* topnav.js 가 header 를 제자리에서 상단 바로 바꾼다 */

  /* 상단 바 */
  header.topbar { position:fixed; top:0; left:0; right:0; height:56px; margin:0; background:var(--panel); border-bottom:1px solid var(--line); z-index:80; display:flex; align-items:center; gap:28px; padding:0 max(24px, calc((100% - 1120px) / 2)); flex-wrap:nowrap; max-width:none }
  .topbar .tb-hide { display:none !important }
  .topbar .tb-left { display:flex; align-items:center; gap:28px; height:100% }
  .topbar .brand { display:flex; align-items:center; gap:9px; font-size:18px; font-weight:800; letter-spacing:-.6px; color:var(--text); text-decoration:none; white-space:nowrap }
  .topbar .brand svg.logo { width:30px; height:30px; filter:drop-shadow(0 2px 6px rgba(49,130,246,.3)) }
  .topbar nav { display:flex; align-items:stretch; height:100%; gap:4px }
  .topbar nav a { display:flex; align-items:center; padding:0 13px; font-size:14px; font-weight:600; color:var(--muted); text-decoration:none; position:relative; margin:0; white-space:nowrap }
  body.p-index header.topbar { padding:0 max(24px, calc((100% - 1240px) / 2)) } body.p-watch header.topbar { padding:0 max(24px, calc((100% - 880px) / 2)) }
  .topbar nav a svg { width:17px; height:17px; margin-right:6px; flex:0 0 17px } .topbar nav a .f { display:none } .topbar nav a.on .f { display:block } .topbar nav a.on .o { display:none }
  .topbar nav a:hover { color:var(--text) }
  .bookbar.d .d-cap { margin-left:auto; font-size:13px; color:var(--muted); display:flex; align-items:center; gap:8px } .bookbar.d .d-cap b { font-weight:600; color:var(--muted) } .bookbar.d .d-cap { font-weight:800; color:var(--text) }
  @keyframes mp-breathe { 0%,100% { transform:scale(1); opacity:1 } 50% { transform:scale(1.12); opacity:.92 } }
  @keyframes mp-twinkle { 0%,100% { transform:scale(.6); opacity:.35 } 50% { transform:scale(1.15); opacity:1 } }
  .topbar nav a.hero svg .f path { transform-box:fill-box; transform-origin:center; animation:mp-breathe 3.2s ease-in-out infinite }
  .topbar nav a.hero svg .f path:nth-child(2) { animation:mp-twinkle 2.6s ease-in-out infinite; animation-delay:.4s }
  .topbar nav a.hero svg .f path:nth-child(3) { animation:mp-twinkle 2.6s ease-in-out infinite; animation-delay:1.5s }
  @media (prefers-reduced-motion: reduce) { .topbar nav a.hero svg .f path { animation:none } }
  .h1-cap { font-size:13px; font-weight:600; color:var(--muted); margin-left:10px; letter-spacing:-.2px }
  .topbar nav a.hero { align-self:center; margin:0 8px; padding:0 15px 0 12px; height:32px; border-radius:999px; background:linear-gradient(140deg,#4f8cff 0%,#3182f6 45%,#7c3aed 100%); color:#fff; font-weight:800; font-size:13.5px; letter-spacing:-.2px; box-shadow:0 3px 10px rgba(60,100,240,.25), inset 0 1px 0 rgba(255,255,255,.25); transition:transform .12s, box-shadow .12s } .topbar nav a.hero svg { color:#fff; width:16px; height:16px; margin-right:5px } .topbar nav a.hero:hover { color:#fff; transform:translateY(-1px); box-shadow:0 6px 14px rgba(60,100,240,.32), inset 0 1px 0 rgba(255,255,255,.25) }
  .topbar nav a.hero.on { color:#fff; box-shadow:0 3px 10px rgba(60,100,240,.25), 0 0 0 3px rgba(77,124,255,.18), inset 0 1px 0 rgba(255,255,255,.25) } .topbar nav a.hero.on::after { display:none } .topbar nav a.hero .f { display:block } .topbar nav a.hero .o { display:none }
  .topbar nav a.on { color:var(--text) } .topbar nav a.on::after { content:""; position:absolute; left:12px; right:12px; bottom:-1px; height:2px; background:var(--text); border-radius:2px }
  .topbar .meta { margin:0 0 0 auto; display:flex; align-items:center; gap:8px; color:var(--muted); font-size:13px; flex-wrap:nowrap; white-space:nowrap }
  .topbar .meta .badge { font-size:12px; font-weight:700; padding:4px 9px; border-radius:999px; background:var(--band); color:var(--muted) }
  .topbar .meta .badge.open { background:#e8f3ff; color:#1b64da } .topbar .meta .badge.over { background:#fff4e5; color:#b45309 }
  .topbar .meta select, .topbar .meta button, .topbar .meta a.btn { font:inherit; font-size:13px; font-weight:600; color:var(--text); background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:7px 13px; cursor:pointer; text-decoration:none; line-height:1 }
  .topbar .meta button:hover, .topbar .meta a.btn:hover { background:var(--soft) }
  .topbar .meta button.icon { width:34px; height:34px; padding:0; display:inline-flex; align-items:center; justify-content:center } .topbar .meta button.icon svg { width:17px; height:17px }
  .topbar .meta label { font-size:0 } .topbar .meta .full { display:none }
  .topbar .meta .sep { width:1px; height:18px; background:var(--line); margin:0 4px }

  /* 카드·표 톤 통일 */
  .card, .scard { background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:none; padding:16px 18px }
  .card .k { font-size:12px; color:var(--muted); font-weight:600 } .card .v { font-size:22px; font-weight:700; letter-spacing:-.5px; margin-top:6px } .card .s { font-size:12px; margin-top:6px }
  .cards { gap:12px; margin-bottom:12px } .grid2 { gap:12px; margin-bottom:12px }
  /* 모의투자 요약 카드: 높이·줄 수 통일 */
  body.p-paper .cards { grid-template-columns:repeat(6, minmax(0, 1fr)); align-items:stretch } @media (max-width:1180px) { body.p-paper .cards { grid-template-columns:repeat(3, minmax(0, 1fr)) } }
  body.p-paper .card { display:flex; flex-direction:column; min-width:0; padding:16px 18px 14px }
  body.p-paper .grid2.airow { grid-template-columns:minmax(0,2fr) minmax(0,1fr) } body.p-paper .grid2.airow:not(:has(#d-ai:not([hidden]))) { grid-template-columns:1fr } body.p-paper .grid2.solo { grid-template-columns:1fr }
  body.p-paper .grid2 .card, body.p-paper .card.fold, body.p-paper .card.aicard { border-radius:16px; border-color:#eef0f3; padding:20px 22px 18px }
  body.p-paper .card .h { font-size:16px; letter-spacing:-.4px } body.p-paper .card .h .sub { font-size:12.5px; margin-left:8px }
  body.p-paper .aibox .verdict { font-size:16px; padding:9px 16px } body.p-paper .aibox .why { font-size:15px } body.p-paper .aibox .next { font-size:14px }
  body.p-paper .strategy { font-size:13.5px; line-height:1.65; color:#4e5968 }
  body.p-paper .card .k { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:12.5px }
  body.p-paper .card .v { font-size:24px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:8px }
  body.p-paper .card .s { display:flex; flex-direction:column; gap:3px; margin-top:8px; min-height:40px; font-size:12.5px; line-height:1.4 }
  body.p-paper .card .s > b, body.p-paper .card .s > .sub { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
  .card.d-brief { margin-bottom:0; padding:16px 20px 14px; min-width:0 } .card.d-brief .h { margin-bottom:10px } .card.d-brief .blist { padding-left:22px; gap:12px; font-size:14px; line-height:1.65 } .card.d-brief .blist li { padding:2px 0 } .card.d-brief .bsum { margin-top:14px; padding:10px 14px; line-height:1.5; border-radius:10px; background:var(--soft,#f2f4f6); font-size:13px; color:var(--muted) } .card.d-brief .bmv { margin-top:14px } .card.d-brief .bk { font-size:13px; font-weight:700; margin-bottom:4px } .card.d-brief .bmrow { font-size:13px; line-height:1.55; padding:7px 0; border-top:1px solid var(--line) }
  .card .h, .scard .h, .sec-h { font-size:14px; font-weight:700; letter-spacing:-.3px }
  .wrap { background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:none; padding:4px 12px }
  table { border-collapse:collapse; width:100% } th { font-size:12px; font-weight:600; color:var(--muted); background:transparent; border-bottom:1px solid var(--line); padding:11px 10px; white-space:nowrap }
  td { padding:12px 10px; border-bottom:1px solid var(--line); font-size:13px; vertical-align:middle } tr:last-child td { border-bottom:0 } tbody tr:hover td { background:var(--soft) }
  .sub { color:var(--muted) }
  .up { color:var(--up) } .down { color:var(--down) } .flat { color:var(--flat) }
  .bookseg { background:var(--band); border-radius:12px; padding:3px; max-width:360px } .bookseg button { font-size:13px; padding:8px 0 } .bookseg button.on { background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.08) }
  .err { border-radius:12px }
  footer.sub { text-align:center; padding:24px 0 0; font-size:12px }
  button, select { font-family:inherit }
}
/* 관심 종목(PC): 목록을 카드로 감싸고 폭 제한 */
@media (min-width: 701px) {
  body.p-watch > *:not(header):not(.tabbar):not(script):not(style) { max-width:880px }
  #rows { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:2px 18px; margin-bottom:12px }
  .wlist .sec-h { padding:6px 4px 12px; font-size:16px } .wlist .sec-h .sub { margin-left:6px }
  #rows .wrow { padding:14px 0; border-bottom:1px solid var(--line) } #rows .wrow:last-of-type { border-bottom:0 }
  #rows .wdet.open { padding:4px 0 16px; border-bottom:1px solid var(--line) }
  #add { display:inline-flex; align-items:center; gap:8px; background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:9px 16px; font-weight:700; font-size:13px; color:var(--accent); cursor:pointer }
}
/* 모의투자(PC): 일지·매매를 세로로 쌓고, 각각 2열 카드 그리드로 */
@media (min-width: 701px) {
  #logs { display:block }
  #logs .card { margin-bottom:12px }
  #journal { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:10px }
  #journal .jentry { border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:var(--panel) }
  #journal .jrows { font-size:13px } #journal .jhead { margin-bottom:8px }
  #trades { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px }
  #trades .trade { border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:var(--panel); margin:0 }
  #trades .trade .r { font-size:13px }
  /* 긴 텍스트(뉴스 제목 등)가 카드 밖으로 나가지 않게 */
  #rows, .wdet, .news, .newsl, .card, .scard { overflow:hidden }
  .news a, .newsl a, .wdet a, .jrows, .trade .r { white-space:normal; overflow-wrap:anywhere; word-break:break-word }
}
/* 내 계좌 표(PC): 보조 지표 4열(거래량·평단가까지·52주·목표주가)은 행 클릭 상세로 옮기고 표는 한 화면에 맞춤 */
@media (min-width: 701px) {
  body.p-index .wrap th:nth-child(12), body.p-index .wrap td:nth-child(12), body.p-index .wrap th:nth-child(13), body.p-index .wrap td:nth-child(13),
  body.p-index .wrap th:nth-child(14), body.p-index .wrap td:nth-child(14), body.p-index .wrap th:nth-child(15), body.p-index .wrap td:nth-child(15) { display:none }
  body.p-index > *:not(header):not(.tabbar):not(script):not(style) { max-width:1240px }
  body.p-index .wrap { padding:6px 24px; overflow-x:auto }
  body.p-index .wrap th, body.p-index .wrap td { padding:14px 12px }
  /* 수급 열: 연속 매수·매도 태그는 아래 줄에 칩으로, 열 폭이 커지지 않게 */
  body.p-index .wrap td:nth-child(11) { white-space:normal; max-width:230px } body.p-index .wrap td:nth-child(11) .tags { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:3px; margin-top:3px } body.p-index .wrap td:nth-child(11) .tag { margin-left:0; white-space:nowrap }
  body.p-index .wrap th:first-child, body.p-index .wrap td:first-child { padding-left:4px } body.p-index .wrap th:last-child, body.p-index .wrap td:last-child { padding-right:4px }
}
/* 내 계좌 표: 화면이 좁아지면 열을 더 접어 좌우 스크롤이 생기지 않게 (접힌 열은 행 클릭 상세에서 확인) */
@media (min-width: 701px) and (max-width: 1360px) {
  body.p-index .wrap th:nth-child(10), body.p-index .wrap td:nth-child(10), body.p-index .wrap th:nth-child(11), body.p-index .wrap td:nth-child(11) { display:none }
  body.p-index .wrap th, body.p-index .wrap td { padding:13px 10px }
}
@media (min-width: 701px) and (max-width: 1040px) {
  body.p-index .wrap th:nth-child(5), body.p-index .wrap td:nth-child(5), body.p-index .wrap th:nth-child(9), body.p-index .wrap td:nth-child(9) { display:none }
  body.p-index .wrap th, body.p-index .wrap td { padding:12px 8px }
  body.p-index tr.detail .inner { grid-template-columns:1fr 1fr }
}
/* 모의투자(PC): 계좌 세그먼트 줄도 본문과 같은 폭으로 가운데 정렬 */
@media (min-width: 701px) { body .bookbar.d { max-width:1120px; margin:0 auto 14px } }