/* 자료실과 설정 화면. 둘 다 표와 글 위주라 한 파일에 둡니다. */

/* 위쪽은 날마다 쓰는 업무, 아래쪽은 자료와 설정이라 성격이 달라 줄로 나눕니다. */
.nav-divider{border:0;border-top:1px solid #ffffff24;margin:10px 6px}

/* --- 자료실 --- */
.library-bar{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
#library-search{flex:1;min-width:220px;max-width:420px;font-size:14px}
.library-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px;align-items:start}
.library-note{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--r-lg);
 padding:16px 18px;box-shadow:var(--shadow-soft);min-width:0}
.library-note header{display:flex;align-items:center;gap:8px;justify-content:space-between;margin-bottom:8px}
.library-note h3{font-size:15px;margin:0;overflow-wrap:anywhere}
.library-tag{flex:none;background:var(--pastel-butter);color:var(--st-pending-fg);border-radius:var(--r-pill);
 padding:2px 10px;font-size:11px;font-weight:700}
/* 자료는 줄바꿈이 뜻을 가지므로 적은 그대로 보여 줍니다. 너무 길면 접어 두고 카드를 늘리지 않습니다. */
.library-body{margin:0;font:inherit;font-size:13px;line-height:1.75;white-space:pre-wrap;overflow-wrap:anywhere;
 max-height:220px;overflow:auto;color:var(--ink-soft);background:var(--bg-sunken);border-radius:var(--r-md);padding:10px 12px}
.library-note footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;flex-wrap:wrap}
.library-note footer small{color:var(--ink-muted);font-size:11px}
.library-note footer .text-button{font-size:12px;margin-left:8px}
.library-empty{grid-column:1/-1;padding:40px;text-align:center;color:var(--ink-muted);
 border:1px dashed var(--line-strong);border-radius:var(--r-lg)}

/* --- 설정: 팀원 --- */
.member-card{margin-top:22px}
.member-form{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin:14px 0 4px}
.member-form label{font-size:12px;margin:0}
.member-form input,.member-form select{font-size:14px;margin-top:4px}
.member-form input[name=name]{width:150px}
.member-form input[name=email]{width:260px}
.member-form .button{margin:0}
.member-table-wrap{overflow-x:auto;margin-top:16px}
.member-table{width:100%;border-collapse:collapse;font-size:13px}
.member-table th,.member-table td{text-align:left;padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.member-table th{font-size:12px;color:var(--ink-soft);background:var(--bg-sunken)}
.member-table td small{color:var(--ink-muted);font-size:11px}
.member-table .text-button{font-size:12px;margin-right:8px}
.member-role{border-radius:var(--r-pill);padding:3px 10px;font-size:11px;font-weight:700}
.member-role.role-admin{background:var(--accent-soft);color:var(--accent-ink)}
.member-role.role-staff{background:var(--st-progress-bg);color:var(--st-progress-fg)}
.member-me{margin-left:6px;color:var(--fee-due);font-size:11px;font-weight:700}
.member-off td{opacity:.55}
.member-off-tag{color:var(--fee-due);font-weight:700}
#member-error:not(:empty){color:var(--st-issue-fg);font-size:13px;margin:6px 0 0}

/* --- 답변 템플릿: 한 유형에 담아 둔 문구들 --- */
.saved-card{grid-column:1/-1;margin-top:20px;min-width:0}
.saved-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.saved-head h2{margin:0 0 4px}
.saved-head .muted{margin:0;font-size:12px}
.saved-head .button{margin:0;flex:none}
.saved-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin-top:16px;align-items:start}
.saved-item{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-sunken);padding:13px 15px;min-width:0}
.saved-item header{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:7px}
.saved-item h3{font-size:14px;margin:0;overflow-wrap:anywhere}
.saved-item header small{flex:none;color:var(--ink-muted);font-size:11px}
/* 문구는 줄바꿈이 뜻을 가지므로 적은 그대로 보여 주고, 길면 접어 카드 높이를 지킵니다. */
.saved-body{margin:0;font:inherit;font-size:12.5px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere;
 max-height:150px;overflow:auto;color:var(--ink-soft);background:var(--bg-card);border-radius:var(--r-md);padding:9px 11px}
.saved-item footer{margin-top:8px;text-align:right}
.saved-item footer .text-button{font-size:12px;margin-left:10px}
.saved-empty{grid-column:1/-1;padding:28px;text-align:center;color:var(--ink-muted);
 border:1px dashed var(--line-strong);border-radius:var(--r-lg)}

/* 상담 화면에서 저장한 문구를 바로 고르는 칸. 초안 제목 줄 오른쪽에 붙습니다. */
.draft-snippet-label{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-soft);margin:0}
#draft-snippet{font-size:12px;padding:6px 8px;max-width:220px}

/* --- 화면 안 갈래 탭(CS접수 / 답변 템플릿) --- */
.page-tabs{margin:-8px 0 18px;display:flex;gap:8px}
.page-tabs button{border:1.5px solid var(--line-strong);border-radius:var(--r-pill);padding:8px 20px;
 background:var(--bg-card);color:var(--ink);font-size:12px;font-weight:800;line-height:1.2}
.page-tabs button:hover{background:var(--accent-soft);border-color:var(--accent)}
.page-tabs button[aria-selected=true]{background:var(--accent);border-color:var(--focus);
 color:var(--accent-ink);box-shadow:0 2px 0 var(--focus)}

/* --- 캘린더 & 할 일 --- */
.todo-summary{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:18px}
.todo-list{display:flex;flex-direction:column;gap:16px}
.todo-group{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--r-lg);
 padding:14px 16px;box-shadow:var(--shadow-soft)}
.todo-group h3{font-size:13px;margin:0 0 8px;display:flex;align-items:center;gap:8px;color:var(--ink-soft)}
.todo-group h3 span{background:var(--bg-sunken);border-radius:var(--r-pill);padding:1px 9px;font-size:11px}
/* 날짜가 지난 일은 먼저 눈에 들어와야 합니다. */
.todo-late h3{color:var(--fee-due)}
.todo-late{border-color:var(--fee-due)}
.todo-today{border-color:var(--accent)}
.todo-row{display:flex;align-items:flex-start;gap:10px;padding:8px 6px;border-radius:var(--r-md);
 border-top:1px solid var(--line-soft);font-weight:400;cursor:pointer}
.todo-row:first-of-type{border-top:0}
.todo-row:hover{background:var(--bg-hover)}
.todo-main{flex:1;min-width:0}
.todo-main strong{display:block;font-size:13.5px;font-weight:650;overflow-wrap:anywhere}
.todo-main small{display:block;margin-top:2px;font-size:11.5px;color:var(--ink-muted);
 white-space:pre-wrap;overflow-wrap:anywhere}
.todo-side{flex:none;font-size:11.5px;color:var(--ink-muted);display:flex;align-items:center;gap:8px}
.todo-side .text-button{font-size:11.5px}
/* 끝낸 일은 지워진 듯 보여야 남은 일과 헷갈리지 않습니다. */
.todo-done .todo-main strong{text-decoration:line-through;color:var(--ink-muted);font-weight:500}
.todo-empty{padding:40px;text-align:center;color:var(--ink-muted);
 border:1px dashed var(--line-strong);border-radius:var(--r-lg)}

/* --- 체험단 관리 --- */
.sponsor-summary{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:18px}
.sponsor-figure{font-size:20px!important;letter-spacing:-.02em}
.sponsor-tabs button{border:1.5px solid var(--line-strong);border-radius:var(--r-pill);padding:7px 16px;
 background:var(--bg-card);color:var(--ink-soft);font-size:12px;font-weight:700}
.sponsor-tabs button.active{background:var(--ink);color:var(--ink-invert);border-color:var(--ink)}
.sponsor-table td{font-size:12px;vertical-align:top}
.sponsor-table td small{display:block;color:var(--ink-muted);font-size:11px}
.sponsor-table .text-button{font-size:11.5px;margin:0 6px 0 0}
.sponsor-wait{color:var(--fee-due);font-weight:700}
.sponsor-eff{font-weight:800;color:var(--journal-customer)}
#sponsor-dialog{width:1000px}
#sponsor-dialog .journal-block{margin:0 0 12px}
@media(max-width:1100px){.sponsor-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
 .todo-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* --- 캘린더 --- */
.todo-layout{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:18px;align-items:start}
.todo-calendar{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--r-lg);
 padding:14px;box-shadow:var(--shadow-soft)}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.cal-head strong{font-size:14px}
.cal-week{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px}
.cal-week span{text-align:center;font-size:11px;color:var(--ink-muted)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-cell{border:0;background:none;border-radius:var(--r-xs);padding:6px 0 4px;min-height:38px;
 display:flex;flex-direction:column;align-items:center;gap:1px;font-size:12px;color:var(--ink-soft)}
.cal-cell:hover:not(.cal-blank){background:var(--bg-hover)}
.cal-cell small{font-size:9.5px;line-height:1}
.cal-blank{visibility:hidden}
/* 할 일이 남은 날은 눈에 띄게, 다 끝낸 날은 조용히 표시합니다. */
.cal-has{background:var(--stat-due-bg);color:var(--pastel-ink);font-weight:750}
.cal-clear{color:var(--ok-fg)}
.cal-today{box-shadow:inset 0 0 0 1.5px var(--focus);font-weight:800}
.cal-picked{background:var(--ink);color:var(--ink-invert)}
.cal-picked-note{margin:10px 0 0;font-size:11.5px;color:var(--ink-muted)}
@media(max-width:980px){.todo-layout{grid-template-columns:1fr}}

/* --- 입고알림 알림완료 체크 --- */
.restock-done-label{display:flex;align-items:center;gap:7px;cursor:pointer;font-weight:400}
.restock-done-tag{font-size:12px;color:var(--ink-muted)}
/* 체크하면 빨간 글자로 바로 알아보게 합니다. */
.restock-done-tag.on{color:var(--fee-due);font-weight:800}

/* --- 설정 안 채널 설정의 브랜드 고르기 --- */
.brand-switch{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 16px}

/* 캘린더가 본체이고 할 일 목록은 곁들이라, 가로를 2:1로 나눕니다. */
.todo-layout{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.todo-calendar .cal-cell{min-height:52px;font-size:13px}
.todo-calendar .cal-cell small{font-size:10.5px}

/* 설정의 백업 상자와 팀원 상자를 한 줄에 나란히 둡니다. */
.admin-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:18px;align-items:start}
.admin-columns .member-card{margin-top:0}
.backup-dir{display:flex;align-items:flex-end;gap:8px;margin:12px 0;flex-wrap:wrap}
.backup-dir label{flex:1;min-width:200px;font-size:12px;margin:0}
.backup-dir input{font-size:12.5px;margin-top:4px}
.backup-dir .button{margin:0;font-size:12px;padding:8px 14px}
@media(max-width:1100px){.admin-columns{grid-template-columns:1fr}}

/* CS일지 단추는 상태 알약 옆에 작게 둡니다. 상담 내용을 밀면 안 됩니다. */
.inquiry-journal-button{margin:0 0 0 auto;font-size:12px;padding:6px 14px}
.detail-header{align-items:center;gap:10px}

/* --- 상담 화면의 초안 도구 --- */
/* 답변 초안 글자 오른쪽에 붙입니다. 답변을 쓰다가 손이 바로 닿는 자리입니다. */
.draft-tools{display:flex;align-items:center;gap:8px;margin-left:auto}
.draft-tools .button{margin:0;font-size:12px;padding:7px 14px}
/* 초안이 사람 손을 거치지 않은 글이라는 표시. */
.ai-tag{display:inline-block;margin-left:6px;background:var(--st-progress-bg);color:var(--st-progress-fg);
 border-radius:var(--r-pill);padding:2px 9px;font-size:10.5px;font-weight:800;vertical-align:middle}

/* --- 문구 고르기 창 --- */
#pick-dialog{width:820px}
.pick-list{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.pick-item{border:1px solid var(--line);border-radius:var(--r-lg);padding:13px 15px;background:var(--bg-card)}
/* 지금 문의 유형과 같은 문구를 먼저 알아보게 합니다. */
.pick-same{border-color:var(--accent);background:var(--accent-soft)}
.pick-item header{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:7px}
.pick-item h3{font-size:14px;margin:0;overflow-wrap:anywhere}
.pick-cat{flex:none;background:var(--bg-sunken);border-radius:var(--r-pill);padding:2px 10px;font-size:11px;font-weight:700}
.pick-item footer{margin-top:9px;text-align:right}
.pick-item footer .button{margin:0;font-size:12px;padding:7px 16px}

/* --- 답변 템플릿: 유형 단추를 가로로 --- */
.template-tabline{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.template-tabline button{border:1.5px solid var(--line-strong);border-radius:var(--r-pill);padding:9px 20px;
 background:var(--bg-card);color:var(--ink);font-size:13px;font-weight:750;line-height:1.2}
.template-tabline button:hover{background:var(--accent-soft);border-color:var(--accent)}
.template-tabline button.active{background:var(--accent);border-color:var(--focus);color:var(--accent-ink);
 box-shadow:0 2px 0 var(--focus)}

/* 채널 설정의 로고 바꾸기 줄 */
.shop-logo-row{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.shop-logo-row .button{margin:0;font-size:12px;padding:7px 14px}

/* 맨 위 문구가 자동 답변 초안에 쓰이므로 한눈에 알아보게 합니다. */
.saved-first{border-color:var(--accent);background:var(--accent-soft)}
.saved-first-tag{flex:none;background:var(--accent);color:var(--accent-ink);border-radius:var(--r-pill);
 padding:2px 9px;font-size:10.5px;font-weight:800}
.saved-move{margin-right:auto;display:inline-flex;gap:2px}
.saved-move .text-button{font-size:11px;padding:2px 5px;line-height:1}
.saved-move .text-button:disabled{opacity:.25}
.saved-item footer{display:flex;align-items:center;gap:0}