@charset "UTF-8";
/*
    자료공유 (/share/*)

    서버정보(.ss-*) : 자산 표가 넓어 가로 스크롤을 쓴다.
    매뉴얼(.sm-*)   : 좌 태그 · 우 자료 목록.

    표 · 버튼 · 상태 배지는 config_common.css 것을 그대로 쓴다.
*/

/* ================================================================
   서버정보
   ================================================================ */

.ss-page{
    background:#fff; border:1px solid #e3e8f0; border-radius:10px; padding:16px 18px;
}

.ss-note{ font-size:12px; color:#8a94a6; font-style:normal; }
.ss-note b{ color:#41506a; }

.ss-page .search-box{
    display:flex; align-items:center; width:300px; height:36px;
    border:1px solid #d8dee8; border-radius:6px; background:#fff; overflow:hidden;
}
.ss-page .search-box input{
    flex:1 1 auto; min-width:0; height:100%; border:none; padding:0 12px; font-size:14px;
}
.ss-page .search-box input:focus{ outline:none; }

/* 표가 계정 단위로 한 줄씩이다. 서버 칸은 rowspan 으로 묶는다 */
.ss-scroll{ overflow:auto; max-height:calc(100vh - 340px); }
.ss-table{ table-layout:fixed; min-width:1180px; }
.ss-table th, .ss-table td{ vertical-align:middle; }
.ss-table td.ss-c{
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    border-right:1px solid #f1f4f9; background:#fcfdff;
}
.ss-table .ss-nm{ font-weight:600; color:#243247; white-space:normal !important; }
.ss-table td:first-child{ color:#8a94a6; }

/* 같은 서버의 계정 줄 사이는 옅게, 서버가 바뀌는 곳은 진하게 */
.ss-table tbody tr td{ border-bottom:1px solid #f4f6fa; }
.ss-table tbody tr td.ss-c{ border-bottom:1px solid #e3e8f0; }

/* 표 안 입력칸 */
.ss-table .form-control{ height:32px; font-size:12px; padding:0 8px; width:100%; }
.ss-table .ss-pw{ font-family:Consolas, 'Courier New', monospace; letter-spacing:.3px; }

.ss-pwbox, .ss-memobox{ display:flex; gap:4px; align-items:center; }
.ss-pwbox .ss-pw, .ss-memobox .ss-acct-memo{ flex:1 1 auto; min-width:0; }
.ss-pwbox .btn.tiny, .ss-memobox .btn.tiny{ flex:0 0 auto; width:42px; padding:0; height:32px; }

/* 고친 줄은 눈에 띄게 — 저장 전이라는 뜻 */
.ss-table tr.ss-dirty td{ background:#fffbe9; }
.ss-table tr.ss-dirty td.ss-c{ background:#fffbe9; }
.ss-table tr.ss-dirty .form-control{ border-color:#e0b400; }

.ss-none{ color:#8a94a6; font-size:12px; }

/* 감시에서 뺀 서버는 흐리게 — 목록에는 남지만 상태는 돌지 않는다 */
.ss-table tr.ss-off td.ss-c{ background:#fafbfc; color:#8a94a6; }
.ss-table tr.ss-off .ss-nm{ color:#6b7789; }

.ss-guide{
    margin:-4px 0 10px; padding:8px 12px; border-radius:6px;
    background:#f4f8ff; border:1px solid #dfeaf9;
    font-size:12px; color:#41506a;
}
.ss-guide b{ color:#0a529d; }

.cfg-act .btn.tiny{ margin-left:3px; }

/* ── 자산정보 모달 ──────────────────────────────────────── */

.ss-box{ width:min(920px, 94vw); }
.ss-box .modal__body{ max-height:calc(100vh - 240px); overflow:auto; }

.ss-grid{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:10px 14px;
}
.ss-grid .ss-wide{ grid-column:1 / -1; }

@media (max-width:900px){
    .ss-grid{ grid-template-columns:repeat(2, 1fr); }
}

/* ================================================================
   매뉴얼
   ================================================================ */

.sm-page{
    display:grid; grid-template-columns:220px 1fr; gap:14px;
    align-items:start;
}

.sm-side{
    background:#fff; border:1px solid #e3e8f0; border-radius:10px; padding:14px 12px;
}
.sm-side__head h2{ font-size:15px; font-weight:700; color:#243247; margin:0 0 10px 2px; }
.sm-side__body{ max-height:calc(100vh - 300px); overflow:auto; }

.sm-tags{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.sm-tag{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    width:100%; padding:7px 10px; border:none; border-radius:6px;
    background:transparent; font-size:13px; color:#41506a; cursor:pointer; text-align:left;
}
.sm-tag:hover{ background:#f4f7fb; }
.sm-tag.is-on{ background:#e8f1ff; color:#1359c0; font-weight:700; }
.sm-tag b{ font-weight:600; color:#8a94a6; }
.sm-tag.is-on b{ color:#1359c0; }

.sm-main{
    background:#fff; border:1px solid #e3e8f0; border-radius:10px; padding:16px 18px;
    min-width:0;
}
.sm-main .search-box{
    display:flex; align-items:center; width:280px; height:36px;
    border:1px solid #d8dee8; border-radius:6px; background:#fff; overflow:hidden;
}
.sm-main .search-box input{
    flex:1 1 auto; min-width:0; height:100%; border:none; padding:0 12px; font-size:14px;
}
.sm-main .search-box input:focus{ outline:none; }

.sm-list-scroll{ max-height:calc(100vh - 300px); min-height:240px; overflow:auto; }
.sm-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }

.sm-item{
    display:grid; grid-template-columns:1fr 260px 130px; gap:12px; align-items:center;
    padding:12px 14px; border:1px solid #eef1f6; border-radius:8px; background:#fcfdff;
}
.sm-item:hover{ border-color:#d8e3f3; background:#fafcff; }
.sm-item__main{ min-width:0; }

.sm-nm{ margin:0; font-size:14px; font-weight:700; color:#243247; }
.sm-desc{
    margin:3px 0 0; font-size:13px; color:#6b7789; line-height:1.5;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.sm-chips{ margin:6px 0 0; display:flex; flex-wrap:wrap; gap:4px; }
.sm-chip{
    display:inline-block; padding:2px 7px; border-radius:10px;
    background:#eef3fb; color:#41506a; font-size:11px;
}

.sm-item__file{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.sm-dl{
    font-size:13px; color:#0a529d; text-decoration:none; font-weight:600;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sm-dl:hover{ text-decoration:underline; }
.sm-dl i{ font-style:normal; color:#8a94a6; font-weight:400; }
.sm-meta{ font-size:11px; color:#a9b2c1; }

.sm-item__act{ text-align:right; }
.sm-item__act .btn{ margin-left:4px; }

.sm-list .cfg-empty{
    padding:50px 10px; text-align:center; color:#8a94a6; font-size:14px;
}

.sm-cur .cfg-st{ margin-left:6px; }

/* 모달 안 태그 고르기 */
.sm-tagpick{ display:flex; flex-wrap:wrap; gap:5px; margin:2px 0 12px; }
.sm-pick{
    padding:3px 9px; border:1px solid #dfe5ee; border-radius:12px;
    background:#fff; color:#41506a; font-size:12px; cursor:pointer;
}
.sm-pick:hover{ border-color:#9dc0ee; color:#0a529d; background:#f4f8ff; }

.sm-file{ padding:6px 8px; height:auto; }

@media (max-width:1100px){
    .sm-page{ grid-template-columns:1fr; }
    .sm-side__body{ max-height:none; }
    .sm-tags{ flex-direction:row; flex-wrap:wrap; }
    .sm-tag{ width:auto; }
    .sm-item{ grid-template-columns:1fr; }
    .sm-item__act{ text-align:left; }
}