/* ══ 토스 스타일 테마 ═══════════════════════════════════════════════
   styles.css 뒤에 읽혀 색·둥글기·버튼·표 머리글만 덮어쓴다.
   원래 디자인으로 돌리려면 index.html 에서 이 파일 링크 한 줄만 지우면 된다. */
:root{
  --bg:#F2F4F6; --card:#fff; --card-2:#F9FAFB; --line:#F2F4F6; --line-2:#E5E8EB; --dash:#E5E8EB;
  --text:#191F28; --text-2:#4E5968; --text-3:#8B95A1;
  --ink:#3182F6; --ink-2:#1B64DA; --ink-bg:#E8F3FF; --ink-soft:#D1D6DB; --tile:#F2F4F6;
  --ok:#00B26B; --ok-bg:#E5F6EE; --warn:#F04452; --warn-bg:#FEECEE; --danger:#F04452; --danger-bg:#FEECEE;
  --r:16px; --r-sm:10px;
}
:root[data-theme="dark"]{
  --bg:#17171C; --card:#202027; --card-2:#26262E; --line:#2C2C35; --line-2:#3A3A45; --dash:#3A3A45;
  --text:#E5E8EB; --text-2:#B0B8C1; --text-3:#6B7684;
  --ink:#3182F6; --ink-2:#4593FC; --ink-bg:#1B2E4B; --ink-soft:#4E5968; --tile:#2C2C35;
  --ok:#2FCB84; --ok-bg:#12362A; --warn:#F6666F; --warn-bg:#3F1F24; --danger:#F6666F; --danger-bg:#3F1F24;
}
html,body{font-family:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo",system-ui,sans-serif;letter-spacing:-0.01em}

/* 셸 */
.side{border-right:1px solid var(--line-2)}   /* LNB 와 상단 바를 나누는 옅은 선 */
.topbar{border-bottom:0}
.logo-tile{border-radius:10px}
.menu a,.menu-btn{border-radius:12px;padding:10px 12px}
.menu a.on,.menu a.on:hover{background:var(--ink-bg);border-color:var(--ink-bg);color:var(--ink)}
.search{border:0;background:var(--tile);border-radius:12px}
.search:focus-within{background:var(--card);box-shadow:0 0 0 1.5px var(--ink)}
.year-sel{border:0;background-color:var(--tile);border-radius:12px}
.side-user{border-top:0}
.side-user .icon-btn{border:0;background:var(--tile);border-radius:8px}

/* 세그먼트: 회색 바탕 위 흰 알약 */
.seg{border:0;background:var(--tile);border-radius:12px;padding:4px}
.seg button{border-radius:9px}
.seg button.on{background:var(--card);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.seg button.on .cnt{background:var(--tile);color:var(--text-2)}

/* 카드: 테두리 없이 배경색 차이로 구분 */
.card,.kpi{border:0}
.card h2,.page-head h1{letter-spacing:-0.02em}
.tile{background:var(--ink-bg);color:var(--ink);border-radius:10px}
.ms-card{border:0;background:var(--card-2);border-radius:12px}
.ms-card.paid{background:var(--ok-bg)}
.carry,.carry-bar,.ro{border-radius:10px}

/* 표: 머리글은 상자 대신 밑줄만 */
thead th,table.ms thead th,table.vend thead th{background:transparent;border:0;border-bottom:1px solid var(--line-2);border-radius:0;padding:8px 10px}
thead th:first-child,thead th:last-child,table.ms thead th:first-child,table.vend thead th:first-child,table.ms thead th:last-child,table.vend thead th:last-child{border:0;border-bottom:1px solid var(--line-2);border-radius:0}
.pnl tr.sum td{background:var(--card-2)}
tr.detail td,tr.prow:hover td{background:var(--card-2)}

/* 버튼: 채움형 */
.btn{border:0;background:var(--tile);color:var(--text-2);font-weight:700}
.btn:hover{background:var(--line-2);color:var(--text)}
.btn.primary{background:var(--ink);color:#fff}
.btn.primary:hover{background:var(--ink-2);opacity:1}
.btn.danger{background:transparent;color:var(--danger)}
.btn.danger:hover{background:var(--danger-bg)}
.carry-btn{background:var(--tile)}
.carry-btn.on{background:var(--warn-bg)}
a.goto{border:0;background:var(--tile)}
a.goto:hover{background:var(--ink);color:#fff}
.more-btn{color:var(--ink)}
.x{border-radius:8px}

/* 입력 */
input:not([type=checkbox]),select,textarea{border:1.5px solid var(--line-2);border-radius:10px}
input:focus,select:focus{border-color:var(--ink)}
input.sm,select.sm{border-radius:8px}
.sub select.sm{border-radius:7px}
body.role-viewer #app input:not([type=checkbox]),body.role-viewer #app select{border-color:transparent}

/* 칩·툴팁·토스트 */
.pill{border-radius:6px}
.tip::after{border-radius:8px}
.toast{border-radius:12px}
.savebar{border-top:0;box-shadow:0 -6px 24px rgba(0,0,0,.08)}
.savebar .btn{border-radius:12px}

/* 로그인·모달 */
.login{border:0;border-radius:20px;box-shadow:0 12px 40px rgba(0,0,0,.06)}
.login-logo{border-radius:12px}
.login .btn{border-radius:12px}
.login label.chk input{accent-color:var(--ink)}
.modal{border-radius:20px}

/* 손익 분석 */
.pnl-drop{border:0;background:var(--tile)}
.pnl-drop.over,.pnl-drop:hover{background:var(--ink-bg);color:var(--ink)}
.pnl-drop:hover b,.pnl-drop.over b{color:var(--ink)}
.pnl-fold .chev{border-color:var(--text-3)}
.pnl-slider input{accent-color:var(--ink)}