/* 공통 스타일 — 상단 페이지 메뉴(박스형)·화면 모드 버튼·다크 모드 색. 8개 페이지가 <head> 끝에서 불러와 각 페이지의 기존 스타일을 덮어씀. */
/* 상단 메뉴: 화면 안의 보기 전환 칩(.tchip: 작고 둥근 박스)과 구분되도록 각지고(4px) 조금 크게, 현재 탭만 진하게 채움. */
.tabs{display:flex;gap:6px;border-bottom:0;margin-bottom:0;padding-bottom:0;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{flex:none;white-space:nowrap;margin-bottom:0;padding:7px 12px;border:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:4px;background:var(--surface);color:var(--ink-2);font-size:13px;font-weight:600;line-height:1.35;text-decoration:none;transition:background .12s,border-color .12s,color .12s}
.tabs a:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
.tabs a.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:700}
.tabs a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:760px){.tabs a{padding:6px 11px;font-size:12.5px}}
@media (prefers-reduced-motion:reduce){.tabs a{transition:none}}

/* 메뉴 줄(theme.js 가 만듦) — 오른쪽 끝에 검색칸(search.js) */
/* 화면 모드 버튼(theme.js): 제목 줄 오른쪽 위 모서리의 아이콘 버튼. 좁은 화면(900px 미만)에서는 제목 줄 안에 일반 배치 */
.hd{position:relative}
.themebtn{flex:none;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink-2);font:inherit;font-size:16px;line-height:1;cursor:pointer;transition:color .15s,border-color .15s,background .15s}
.themebtn:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
.themebtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (min-width:900px){.hd>.themebtn{position:absolute;top:0;right:0}.hd>.stamp{margin-top:36px}}   /* 오른쪽 표시 알약이 버튼 밑으로 들어가지 않게 */
.tabbar{display:flex;align-items:center;gap:10px}
.tabbar .tabs{flex:1 1 auto;min-width:0}
@media (max-width:760px){.tabbar{gap:6px}}
/* 좁은 화면: 화면 모드 버튼을 제목 줄 오른쪽 위로 올려 별도 줄을 없앰(제목 첫 칸만 버튼 자리를 비움) */
@media (max-width:899px){.hd>.themebtn{position:absolute;top:0;right:0}.hd>:first-child{padding-right:42px}}
/* 좁은 화면: 검색칸은 아이콘 크기로 접어 탭 자리를 확보하고, 누르면 메뉴 줄 전체로 펼침(16px 은 iOS 확대 방지) */
@media (max-width:760px){
  .tabbar{position:relative;align-items:flex-start}
  /* 탭 11개가 모두 보이도록 여러 줄로 감쌈(옆으로 밀지 않음) */
  .tabs{flex-wrap:wrap;overflow:visible;gap:5px}
  .tabs a{padding:5px 9px;font-size:12px}
  .tabbar .gsr{width:40px}
  .tabbar .gsr input{font-size:16px;padding-left:34px;padding-right:0;cursor:pointer}
  .tabbar .gsr input::placeholder{color:transparent}
  .tabbar .gsr:focus-within{position:absolute;left:0;right:0;width:auto;z-index:61}
  .tabbar .gsr:focus-within input{padding-right:10px;cursor:text}
  .tabbar .gsr:focus-within input::placeholder{color:var(--accent)}
}
/* 좁은 화면 표(.stk 컨테이너): 오른쪽에 더 있다는 그림자(첫 열 고정은 보기 불편해 뺌). 투명 칸 위에 그려지는 background 방식이라 셀 배경은 건드리지 않음 */
@media (max-width:760px){
  .stk{background:
    linear-gradient(to right,var(--surface),var(--surface)) left center/24px 100% no-repeat local,
    linear-gradient(to left,var(--surface),var(--surface)) right center/24px 100% no-repeat local,
    linear-gradient(to right,rgba(0,0,0,.16),transparent) left center/10px 100% no-repeat scroll,
    linear-gradient(to left,rgba(0,0,0,.16),transparent) right center/10px 100% no-repeat scroll,
    var(--surface)}
}
/* 다크 모드 색 — 원래 값(#0f1217 바탕, #171b22 카드)은 바탕과 카드가 거의 구분되지 않아 너무 깜깜했음.
   바탕을 약간 밝히고 카드·표·테두리를 올려 층이 보이게 함. 글자 밝기와 포인트 색은 유지. 8개 페이지의 다크 변수를 한 곳에서 덮어씀. */
:root[data-theme="dark"]{
  color-scheme:dark;--accent:#7fb0ee;--on-accent:#0f1217;
  --ground:#1b212a; --surface:#262e3a; --surface-2:#2d3644;
  --ink:#eef1f5; --ink-2:#b6c0cc; --ink-3:#95a1b1;
  --line:#3c4758; --line-2:#323c4b;
  --accent-soft:#2a3f60;
  --grid:#313b4a; --axis:#4f5b6e;
  /* 기존 장기등급 배지 색을 미공시 탭에서도 공유 */
  --a1-bg:#123b27; --a1-fg:#7fd7a5;
  --a2-bg:#15305a; --a2-fg:#8fb9f2;
  --a3-bg:#3d2d05; --a3-fg:#f0c25a;
  --chg-bg:#3a1a19; --chg-fg:#f28b84; --chg-line:#7a3532;
  --l3-bg:#0f3a3d; --l3-fg:#6fd3d6;
  --shadow:none;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;--accent:#7fb0ee;--on-accent:#0f1217;
    --ground:#1b212a; --surface:#262e3a; --surface-2:#2d3644;
    --ink:#eef1f5; --ink-2:#b6c0cc; --ink-3:#95a1b1;
    --line:#3c4758; --line-2:#323c4b;
    --accent-soft:#2a3f60;
    --grid:#313b4a; --axis:#4f5b6e;
  /* 기존 장기등급 배지 색을 미공시 탭에서도 공유 */
  --a1-bg:#123b27; --a1-fg:#7fd7a5;
  --a2-bg:#15305a; --a2-fg:#8fb9f2;
  --a3-bg:#3d2d05; --a3-fg:#f0c25a;
  --chg-bg:#3a1a19; --chg-fg:#f28b84; --chg-line:#7a3532;
  --l3-bg:#0f3a3d; --l3-fg:#6fd3d6;
  --shadow:none;
  }
}

/* 변경 표시(chg.js): NEW(신규)·변경 알약 — 이름 옆에 작게 붙임 */
:root{--nw-bg:#dff3e6;--nw-fg:#17703d;--nc-bg:#fdecc8;--nc-fg:#8a5a00}
.cgb{display:inline-block;margin-left:5px;padding:0 6px;border-radius:9px;font-size:10px;font-weight:700;line-height:1.55;letter-spacing:.02em;vertical-align:middle;white-space:nowrap;cursor:help;font-style:normal}
.cgb.add{background:var(--nw-bg);color:var(--nw-fg)}
.cgb.chg{background:var(--nc-bg);color:var(--nc-fg)}
:root[data-theme="dark"]{--nw-bg:#1d3b2a;--nw-fg:#7fd6a0;--nc-bg:#44351a;--nc-fg:#f0c674}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--nw-bg:#1d3b2a;--nw-fg:#7fd6a0;--nc-bg:#44351a;--nc-fg:#f0c674}}
@media print{.cgb{display:none}}