/* sheets 전용 스타일 — 표 자체는 jspreadsheet CE(app/vendor/jspreadsheet)가 그린다.
   여기서는 그 라이브러리 색을 app.css 변수로 덮어쓴다. */

.sh-subtabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:14px;min-width:0}
.sh-subtabs a{padding:8px 13px;font-size:13px;font-weight:650;color:var(--sub);
  border:1px solid var(--line);border-radius:99px;background:var(--card)}
.sh-subtabs a:hover{color:var(--ac)}
.sh-subtabs a.on{color:#fff;background:var(--ac);border-color:var(--ac)}

.sh-sheetpicker{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:8px;min-width:0}
.sh-sk.on{color:#fff;background:var(--ac);border-color:var(--ac)}

.sh-guide{border:1px solid var(--line);border-radius:10px;background:var(--card2);
  padding:10px 14px;margin-bottom:12px}
.sh-guide summary{cursor:pointer;font-size:13px;font-weight:650;color:var(--ac)}
.sh-guide-body{white-space:pre-wrap;font:inherit;font-size:12.5px;color:var(--sub);
  margin:10px 0 2px;line-height:1.7}

.sh-bar{display:flex;gap:5px;flex-wrap:wrap;align-items:center;margin-bottom:10px;min-width:0}
.sh-lbl{white-space:nowrap;color:var(--sub)}
.sh-swatch{width:24px;height:24px;border-radius:7px;border:1px solid var(--line);flex:none;padding:0}
.sh-swatch:hover{outline:2px solid var(--ac);outline-offset:1px}
.sh-empty{text-align:center;color:var(--sub);padding:30px 10px}
.sh-recent{display:inline-flex;gap:4px;padding-left:2px}
.sh-colorpick{width:26px;height:26px;padding:0;border:1px solid var(--line);border-radius:7px;
  background:var(--card);flex:none;cursor:pointer}
.sh-colorpick::-webkit-color-swatch-wrapper{padding:2px}
.sh-colorpick::-webkit-color-swatch{border:0;border-radius:4px}

/* 가로로 삐져나오지 않게 표를 여러 겹으로 가둔다. main -> .card -> #shGridWrap -> .sh-jss 까지
   전부 min-width:0 이 있어야 안쪽의 넓은 표가 바깥 칸을 밀어내지 못한다. */
#shSubBody{min-width:0;max-width:100%}
#shGridWrap{min-width:0;max-width:100%;overflow:hidden}

/* ---------- jspreadsheet 테마를 앱 색으로 맞춘다 ---------- */
.sh-jss{border:1px solid var(--line);border-radius:var(--radius);
  min-width:0;max-width:100%;overflow-x:auto}
.sh-jss .jexcel_container{background:var(--card);max-width:100%}
.sh-jss .jexcel{background:var(--card);color:var(--ink);font:inherit;font-size:12.5px;table-layout:fixed}
.sh-jss .jexcel > thead > tr > td{background:var(--card2);color:var(--sub);
  border-color:var(--line);font-weight:700}
.sh-jss .jexcel > tbody > tr > td{background:var(--card);color:var(--ink);border-color:var(--line);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-height:2.8em}
.sh-jss .jexcel > tbody > tr > td.highlight{background:var(--ac-soft) !important}
.sh-jss .jexcel > tbody > tr > td.highlight-selected{outline:2px solid var(--ac);outline-offset:-2px}
.sh-jss .jexcel > tbody > tr.selected > td:first-child{background:var(--ac);color:#fff}
.sh-jss .jexcel_content{background:var(--card)}
.sh-jss input,.sh-jss textarea,.sh-jss select{background:var(--card);color:var(--ink);font:inherit}
.sh-jss > input[type="text"]{margin:0 0 8px;padding:6px 10px;border:1px solid var(--line);
  border-radius:8px;background:var(--card2);color:var(--ink);font:inherit;font-size:12.5px}

/* 틀 고정된 열(첫 데이터 열)이 배경에 가려지지 않게 */
.sh-jss .jexcel thead .jexcel_freezed,.sh-jss .jexcel tbody .jexcel_freezed{background:var(--card2)}
.sh-jss .jexcel tbody .jexcel_freezed{background:var(--card)}

/* 필터 행 */
.sh-jss .jexcel > thead > tr.jexcel_filter > td{background:var(--card2)}
.sh-jss .jexcel > thead > tr.jexcel_filter > td > input{width:100%;box-sizing:border-box;
  background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:6px;font:inherit}

@media (max-width:640px){
  .sh-jss .jexcel > tbody > tr > td,.sh-jss .jexcel > thead > tr > td{max-width:160px}
}