/* TB_NWS v2 공통 셸 — 디자인 토큰 + 레이아웃 + 컴포넌트 (핸드오프 Design Tokens 그대로) */
:root{
  --bg:#f6f7f9; --card:#ffffff;
  --bd-strong:#dfe3e9; --bd:#e5e8ec; --bd-weak:#eef0f3;
  --ink:#0f1b2d; --body:#1a2332; --sub:#495662; --sub2:#5a6472; --dim:#7a8494; --dim2:#9aa4b2;
  --pri:#2563eb; --pri-h:#1d4ed8; --pri-bg:#eaf1fe;
  --up:#dc3545; --up-dk:#a12a35; --down:#0d6efd; --ok:#198754; --ok-dk:#0f5132;
  --warn:#b06a00; --warn-tx:#664d03;
  --loss-bg:#fbdcdf; --loss-bd:#f3c6cb; --loss-lt:#fdf1f2;
  --thin-bg:#fdf3d0; --thin-bd:#f0e0a8; --thin-lt:#fdf9ec;
  --fat-bg:#d9eee2; --fat-bd:#bcdcc9;
  --grp:#f2f6fc; --grp-child:#fbfcfd; --th:#f8f9fb; --th-sub:#eef2f7;
  --sp-ok:#8fc7a6; --sp-bad:#e88a94;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);font-family:'IBM Plex Sans KR',-apple-system,'Malgun Gothic',sans-serif;color:var(--body)}
a{color:var(--pri);text-decoration:none}a:hover{color:var(--pri-h)}
input::placeholder{color:var(--dim2)}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:#d5dae2;border-radius:5px}::-webkit-scrollbar-track{background:transparent}
button{font-family:inherit}

/* ── 셸 레이아웃 ── */
#shell{display:flex;height:100vh;height:100dvh;overflow:hidden}
#rail{width:54px;transition:width .18s ease;background:var(--card);border-right:1px solid var(--bd);display:flex;flex-direction:column;padding:10px 0;flex-shrink:0;overflow:hidden;z-index:30}
#rail.open{width:176px}
#rail .logo{display:flex;align-items:center;gap:10px;padding:2px 13px 12px;border-bottom:1px solid var(--bd-weak);margin-bottom:8px;white-space:nowrap}
#rail .logo b{font-weight:700;font-size:13.5px;letter-spacing:.2px;color:var(--ink)}
#railBtn{width:26px;height:26px;flex-shrink:0;border:1px solid var(--bd);background:#fff;border-radius:7px;cursor:pointer;font-size:12px;color:var(--sub2);display:flex;align-items:center;justify-content:center}
#railBtn:hover{background:#f1f4f8}
#rail a.nav{display:flex;align-items:center;gap:11px;padding:8px 14px;margin:1px 6px;border-radius:8px;white-space:nowrap;color:#3d4757;font-size:12.5px;font-weight:500}
#rail a.nav:hover{background:#f1f4f8}
#rail a.nav.act{color:var(--pri);background:var(--pri-bg);font-weight:700}
#rail a.nav .ic{font-size:15px;width:20px;text-align:center;flex-shrink:0}
#rail .avatar{margin-top:auto;padding:10px 14px;border-top:1px solid var(--bd-weak);display:flex;align-items:center;gap:10px;white-space:nowrap}
#rail .avatar .dot{width:24px;height:24px;flex-shrink:0;border-radius:50%;background:#e8eef7;color:var(--pri);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
#rail .avatar span.who{font-size:11.5px;color:var(--sub2)}
#main{flex:1;display:flex;flex-direction:column;min-width:0}
#hdr{height:48px;background:#fff;border-bottom:1px solid var(--bd);display:flex;align-items:center;gap:12px;padding:0 16px;flex-shrink:0;position:relative;z-index:20}
#hdr .title{font-size:14.5px;font-weight:700;color:var(--ink);white-space:nowrap}
#content{flex:1;overflow:auto}
#content.cards{background:var(--bg);padding:14px}
#content.table{background:#fff}
#ftr{height:26px;background:#fff;border-top:1px solid var(--bd);display:flex;align-items:center;gap:16px;padding:0 16px;font-size:11px;color:var(--dim);flex-shrink:0;white-space:nowrap;overflow:hidden}

/* ── 컴포넌트 ── */
.hbtn{border:1px solid var(--bd);background:#fff;color:var(--sub2);border-radius:8px;padding:4px 11px;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;flex-shrink:0}
.hbtn:hover{background:#f1f4f8}
.seg{display:flex;border:1px solid var(--bd);border-radius:8px;overflow:hidden;flex-shrink:0}
.seg button{border:none;padding:5px 11px;font-size:11.5px;font-weight:600;cursor:pointer;background:#fff;color:var(--sub2);white-space:nowrap}
.seg button + button{border-left:1px solid var(--bd)}
.seg button.on{background:var(--ink);color:#fff}
.drop{position:absolute;top:52px;background:#fff;border:1px solid var(--bd);border-radius:12px;box-shadow:0 12px 32px rgba(15,27,45,.14);z-index:60}
.card{background:#fff;border:1px solid var(--bd-weak);border-radius:12px;padding:12px 14px}
.kcard{border:1px solid var(--bd-weak);border-radius:10px;padding:8px 11px;background:#fff}
.kcard .l{font-size:10.5px;color:var(--dim);font-weight:600}
.kcard .v{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
.badge{border-radius:4px;padding:0 5px;font-size:10px;font-weight:700;display:inline-block}
.vb{font-size:10.5px;font-weight:700;border-radius:4px;padding:1px 5px;display:inline-block;min-width:18px;text-align:center}
.chip{border:1px solid var(--bd);border-radius:14px;padding:2px 11px;font-size:11.5px;font-weight:600;color:var(--sub2);cursor:pointer;background:#fff;white-space:nowrap}
.chip.on{border-color:var(--pri);background:var(--pri-bg);color:var(--pri)}
.tab{border:none;background:none;padding:6px 12px;font-size:12.5px;color:var(--sub2);cursor:pointer;border-bottom:2px solid transparent;font-weight:600;white-space:nowrap}
.tab.on{color:var(--pri);border-bottom-color:var(--pri)}
.mbtn{border:1px solid var(--bd);background:#fff;border-radius:7px;padding:3px 10px;cursor:pointer;color:var(--sub2);font-size:12px;white-space:nowrap}
.mbtn:hover{background:#f1f4f8}
.mbtn.pri{border-color:var(--pri);background:var(--pri);color:#fff;font-weight:700}
.mbtn.danger{border-color:var(--up);background:var(--up);color:#fff;font-weight:700}
.minput{border:1px solid var(--bd);border-radius:7px;padding:5px 9px;font-size:12.5px;font-family:inherit;outline:none;font-variant-numeric:tabular-nums}
.minput:focus{border-color:var(--pri)}
.mtbl{width:100%;border-collapse:collapse;font-size:12px;font-variant-numeric:tabular-nums}
.mtbl th{padding:4px 8px;border-bottom:1px solid var(--bd-strong);font-size:10.5px;color:var(--sub2);font-weight:700;text-align:right;white-space:nowrap;background:var(--th)}
.mtbl th.l{text-align:left}
.mtbl th.sortable{cursor:pointer;user-select:none}
.mtbl td{padding:4px 8px;border-bottom:1px solid var(--bd-weak);text-align:right;white-space:nowrap}
.mtbl td.l{text-align:left}
.mtbl tr.sum{background:var(--thin-lt);font-weight:700}
.spin{display:inline-block;width:22px;height:22px;border:3px solid var(--bd);border-top-color:var(--pri);border-radius:50%;animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.loading{text-align:center;padding:40px;color:var(--dim)}
details summary{cursor:pointer;color:var(--sub2);font-size:12px}

/* ── 모바일 파운데이션 (≤991.98px — _mobile_foundation.html 하단 네비 패턴, v2 토큰 스킨) ── */
.m-only{display:none}
#bnav{display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--card);border-top:1px solid var(--bd);padding-bottom:env(safe-area-inset-bottom)}
#bnav a{flex:1;text-align:center;color:var(--sub2);text-decoration:none;font-size:10px;padding:6px 0 5px;line-height:1.45;font-weight:600}
#bnav a .ic{font-size:19px;display:block;margin-bottom:1px}
#bnav a.on{color:var(--pri);font-weight:700}
#bnav a{position:relative}
.bdg{display:none}
.bdg.on,.bdg.warn{display:inline-block;min-width:16px;height:16px;border-radius:8px;background:#dc3545;color:#fff;font-size:10px;font-weight:800;line-height:16px;padding:0 4px;text-align:center}
.bdg.warn{background:#f0ad4e}
#bnav a .bdg{position:absolute;top:2px;left:50%;margin-left:6px}
#rail a.nav{position:relative}
#rail a.nav .bdg{position:absolute;top:5px;left:28px}
#atkBar:empty{display:none}
#atkBar .atkbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:8px 16px 0;padding:8px 12px;border-radius:10px;background:#fdf1f2;border:1px solid #f3c3c9;color:#a4232f;font-size:12.5px;text-decoration:none}
#atkBar .atkbar .go{margin-left:auto;font-weight:700;white-space:nowrap}
#bback{display:none;position:fixed;inset:0;z-index:80;background:rgba(15,27,45,.45)}
#bsheet{display:none;position:fixed;left:0;right:0;bottom:0;z-index:81;background:#fff;border-radius:16px 16px 0 0;padding:8px 14px calc(84px + env(safe-area-inset-bottom));max-height:74vh;overflow:auto}
#bsheet .handle{width:38px;height:4px;background:var(--bd-strong);border-radius:2px;margin:4px auto 8px}
#bsheet .grp{font-size:11px;color:var(--dim);margin:9px 0 2px;font-weight:700}
#bsheet a{display:block;padding:11px 6px;border-bottom:1px solid var(--bd-weak);color:var(--ink);font-size:14.5px;font-weight:600}
#bsheet a .arr{float:right;color:var(--dim2)}
@media (max-width:991.98px){
  .m-only{display:block}
  .pc-only{display:none !important}
  #rail{display:none}
  #hdr{overflow-x:auto;overflow-y:hidden;gap:8px;padding:0 10px;-webkit-overflow-scrolling:touch}
  #hdr::-webkit-scrollbar{display:none}
  #hdr .title{flex-shrink:0}
  #hdr>*{flex-shrink:0}
  #hdr{order:-3}
  #atkBar{order:-2}
  #ftr{order:-1;height:auto;min-height:22px;padding:3px 10px;gap:10px;font-size:10.5px;border-top:0;border-bottom:1px solid var(--bd-weak);overflow-x:auto;-webkit-overflow-scrolling:touch}   /* 갱신 시각·오류·주의 문구가 모바일에서 통째로 사라지던 것 → 헤더 아래 상태줄 */
  #ftr::-webkit-scrollbar{display:none}
  .minput,input[type=text],input[type=search],input[type=number],input[type=password],input:not([type]),select,textarea{font-size:16px}   /* iOS: 16px 미만 입력은 포커스 때 화면 확대 */
  .hbtn{padding:6px 11px}
  .mbtn{padding:7px 12px}
  .chip{padding:5px 11px}
  #content.cards{padding:10px 10px calc(76px + env(safe-area-inset-bottom))}
  #content.table{padding-bottom:calc(66px + env(safe-area-inset-bottom))}
  #bnav{display:flex}
  #atkBar .atkbar{margin:6px 10px 0;font-size:12px;flex-wrap:nowrap;white-space:nowrap;overflow:hidden}
  #atkBar .atkbar>b{flex-shrink:0}
  #atkBar .atkbar .nm{overflow:hidden;text-overflow:ellipsis;min-width:0}
  #mcard{width:96vw !important;max-width:96vw;max-height:92vh;max-height:calc(100dvh - 24px);padding:12px}
  #mhead{position:sticky;top:-12px;z-index:15;background:#fff;margin:-12px -12px 8px;padding:10px 12px 6px;border-bottom:1px solid var(--bd-weak);flex-wrap:wrap;gap:4px 8px}
  #mhead b{white-space:normal;flex:1 1 0;min-width:0;line-height:1.35}
  #mhead .sub{order:3;flex:1 0 100%}
  #mclose{width:36px;height:36px;font-size:15px}
  #hdrQuick{order:99;margin-left:0 !important}   /* 공통 퀵버튼은 페이지 고유 버튼·상태 뒤로(390px에서 페이지 컨트롤이 화면 밖이던 것) */
  /* 필터/정렬 칩 가로 스크롤 스트립 */
  .m-filt{display:flex;gap:5px;overflow-x:auto;align-items:center;-webkit-overflow-scrolling:touch}
  .m-filt::-webkit-scrollbar{display:none}
  .m-filt>*{flex:0 0 auto}
}

/* 모달 */
#mroot{position:fixed;inset:0;background:rgba(15,27,45,.45);z-index:100;display:none;align-items:center;justify-content:center}
#mroot.show{display:flex}
#mcard{background:#fff;border-radius:14px;box-shadow:0 24px 64px rgba(15,27,45,.3);max-width:94vw;max-height:88vh;overflow:auto;padding:16px 18px}
#mhead{display:flex;align-items:center;gap:10px;margin-bottom:12px}
#mhead b{font-size:14px;white-space:nowrap}
#mhead .sub{font-size:11px;color:var(--dim2)}
#mclose{margin-left:auto;border:1px solid var(--bd);background:#fff;border-radius:7px;width:26px;height:26px;cursor:pointer;color:var(--sub2);flex-shrink:0}

body.present #atkBar{display:none !important}   /* 파트너 발표 화면(CM 미팅)에는 내부 공격 배너 숨김 */