/* 웹으로 서빙되는 확장앱 페이지(/ticker.html, /scalp.html, /optimize.html)에
   메인 화면과 같은 헤더·글꼴·색을 입힌다. 페이지 본문은 건드리지 않고
   server.js 의 _extensionPage 가 이 파일과 아래 마크업을 head/body 에 주입한다.

   확장앱에서 열 때는 이 파일이 붙지 않으므로 기존 화면 그대로 동작한다. */

:root {
  --ps-bg: #111823;
  --ps-surface: #1b2634;
  --ps-line: #344256;
  --ps-text: #f4f7fb;
  --ps-muted: #a4b0c0;
  --ps-brand: #3d82eb;
  --ps-brand-soft: rgba(61, 130, 235, .16);
  --ps-shell-h: 60px;
}

/* 확장앱 원본보다 구체적으로 선언해 웹에서만 밝은 공통 팔레트를 쓴다. */
html:root {
  --bg: #111823;
  --panel: #1b2634;
  --panel2: #15202d;
  --border: #344256;
  --text: #f4f7fb;
  --muted: #a4b0c0;
  --green: #20b97e;
  --green-bright: #36d391;
  --red: #ee4f57;
  --red-bright: #ff7379;
  --amber: #e9ad3d;
  --blue: #4b8ff2;
  --surface: #1b2634;
  --surface-2: #15202d;
  --line: #344256;
  --line-soft: #293547;
  --dim: #78869a;
  --brand: #3d82eb;
  --brand-strong: #2768cc;
  --brand-tint: #aac8fb;
  --brand-soft: rgba(61, 130, 235, .16);
  --brand-line: rgba(88, 151, 246, .52);
}

html { color-scheme: dark; }
body {
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    "Segoe UI", system-ui, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  background:
    radial-gradient(circle at 82% -12%, rgba(61,130,235,.24), transparent 34rem),
    radial-gradient(circle at 8% 8%, rgba(255,255,255,.035), transparent 24rem),
    var(--bg) !important;
  /* 확장앱 페이지들은 고정폭 전제로 만들어져서 웹에서 가로로 삐져나간다. */
  overflow-x: hidden;
}

/* ---- 공통 헤더 ---- */
.ps-shell {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 14px;
  height: var(--ps-shell-h);
  padding: 0 20px;
  border-bottom: 1px solid var(--ps-line);
  background: rgba(10, 14, 21, .9);
  backdrop-filter: blur(20px) saturate(140%);
}
.ps-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ps-text);
  text-decoration: none;
  flex: none;
}
.ps-brand img { width: 30px; height: 30px; object-fit: contain; display: block; }
.ps-brand b { font-size: 13px; font-weight: 750; letter-spacing: .11em; }
.ps-nav { display: flex; align-items: center; gap: 3px; margin-left: 4px; overflow-x: auto; scrollbar-width: none; }
.ps-nav::-webkit-scrollbar { display: none; }
.ps-nav a {
  padding: 7px 11px;
  border-radius: 999px;
  color: var(--ps-muted);
  text-decoration: none;
  font-size: 12.5px;
  white-space: nowrap;
  transition: color .2s, background .2s;
}
.ps-nav a:hover { color: var(--ps-text); background: rgba(255, 255, 255, .06); }
.ps-nav a.current { color: #cfe0ff; background: var(--ps-brand-soft); }

/* ---- 페이지 자체 헤더는 부제목 줄로 강등 ---- */
body > header:not(.site-header) {
  position: static !important;
  background: transparent !important;
  border-bottom: 1px solid var(--ps-line) !important;
  padding: 12px 20px !important;
  min-height: 0 !important;
}
body > header:not(.site-header) h1 { font-size: 15px !important; letter-spacing: -.02em; }
/* 로고와 홈 링크는 공통 헤더가 대신한다 */
body > header:not(.site-header) h1 > a[aria-label*="메인"] { display: none !important; }
/* 대시보드·한눈에 보기 버튼도 공통 네비와 중복이라 웹에서는 감춘다 */
body > header:not(.site-header) #dashBtn,
body > header:not(.site-header) #statusBtn { display: none !important; }

/* ---- 모바일 ---- */
main { max-width: 100% !important; }
img, svg, canvas, video { max-width: 100%; }
.tw, .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 760px) {
  .ps-shell { height: auto; min-height: 54px; padding: 8px 12px; gap: 8px; flex-wrap: wrap; }
  .ps-brand b { display: none; }
  .ps-nav { width: 100%; order: 3; margin-left: 0; }
  body > header:not(.site-header) { padding: 10px 12px !important; gap: 8px !important; }
  body > header:not(.site-header) h1 { font-size: 14px !important; }
  main { padding-left: 12px !important; padding-right: 12px !important; }
  /* 44px 미만 터치 타깃은 모바일에서 누르기 어렵다 */
  body > header:not(.site-header) button,
  body > header:not(.site-header) select { min-height: 36px; }
}
@media (max-width: 480px) {
  body > header:not(.site-header) { flex-wrap: wrap !important; }
  body > header:not(.site-header) .spacer { display: none !important; }
}

/* 수집 큐에 막 들어간 종목. 오류가 아니므로 빨간색을 쓰지 않는다. */
.state.pending {
  border: 1px solid rgba(47, 116, 224, .35);
  background: rgba(47, 116, 224, .07);
  border-radius: 12px;
  padding: 22px 20px;
  line-height: 1.7;
}


/* 웹 상세 화면도 공통 모바일 밀도와 터치 기준을 따른다. */
body { overflow-wrap: break-word; }
body > main p,
body > main .note,
body > main .sub,
body > main .oddnote,
body > main .hint { text-wrap: pretty; }
body > main button,
body > main select,
body > main input { min-height: 40px; }
details > summary { min-height: 44px; }

@media (max-width: 760px) {
  body > main { padding: 14px 12px 32px !important; }
  body > main .card,
  body > main .card2,
  body > main .seed,
  body > main .stab,
  body > main .best,
  body > main .cbox {
    padding: 14px !important;
    margin-bottom: 12px !important;
    border-radius: 12px !important;
  }
  body > main .card > .t {
    margin-bottom: 11px !important;
    line-height: 1.45;
  }
  body > main .vmain,
  body > main .decide,
  body > main .volhead { gap: 12px !important; }
  body > main .vword,
  body > main .decide .dnow {
    white-space: normal !important;
    font-size: 25px !important;
  }
  body > main .vwhy,
  body > main .decide .dwrap,
  body > main .vbig,
  body > main .simchart,
  body > main .simnum {
    min-width: 0 !important;
  }
  body > main .odd,
  body > main .side,
  body > main .way { padding: 13px !important; }
  body > main .wgrid { gap: 9px !important; }
  body > main .state { padding: 32px 10px !important; }
  body > main .hint {
    max-width: 100%;
    line-height: 1.65 !important;
    font-size: 13px !important;
  }
  body > main details.more > summary {
    display: flex;
    align-items: center;
    padding: 10px 13px !important;
  }
  body > main details.more .body { padding: 0 13px 13px !important; }
  .tw,
  .table-wrap {
    margin-inline: -2px;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }
}

@media (max-width: 480px) {
  body > main .position-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  body > main .position-cell { padding: 10px !important; }
  body > main .level-grid { gap: 8px !important; }
  body > main .rowx { gap: 9px !important; }
  body > main .rowx .lab { width: 62px !important; }
  body > main .rowx .val { font-size: 17px !important; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

body > main .hint p { margin: 0 0 10px; }
body > main .hint p:last-child { margin-bottom: 0; }

body > header:not(.site-header) input,
body > header:not(.site-header) select,
body > header:not(.site-header) button { min-height: 40px !important; }

@media (max-width: 760px) {
  body > header:not(.site-header) { align-items: center !important; }
  body > header:not(.site-header) input#q {
    width: auto !important;
    flex: 1 1 120px;
  }
  body > header:not(.site-header) #goBtn { flex: 0 0 auto; }
  body > header:not(.site-header) label.f {
    flex: 1 1 138px;
    min-height: 40px;
    justify-content: space-between;
  }
}

/* 준비중/로그인 안내 안의 카카오 버튼. 헤더와 같은 모양을 쓴다. */
.state .hu-in {
  display: inline-flex; align-items: center; text-decoration: none;
  background: #fee500; color: #191600; border-radius: 999px;
  padding: 10px 18px; font-size: 13.5px; font-weight: 700;
}
.state .hu-in:hover { filter: brightness(1.05); }