/* คลังเกณฑ์ทักษะแบบใช้ง่าย (21/10/2569 เจ้าของ "ทำเลยครับ ตามภาพ") — หน้าแรก = งานที่ต้องทำ · หน้าทำทีละตำแหน่งแบบหน้าเดียวจบ · ต่อจาก skill-criteria.css / skill-criteria-link.css */
main{padding-top:22px}
.sc-heading{align-items:flex-end}
.sc-heading h1{margin:2px 0}
#sc-sub{margin:4px 0 0;font-size:15px}
#sc-status:empty,#sc-error:empty,#sc-editor-error:empty{display:none}
#sc-status{background:#eef6f1;border:1px solid #cfe6d8;color:#1f5d3c;border-radius:10px;padding:10px 14px;margin:14px 0 0;font-weight:700}
#sc-error,#sc-editor-error{background:#fff3f4;border:1px solid #f3c4cb;border-radius:10px;padding:10px 14px;margin:14px 0 0;font-weight:700}
.sc-period-pick{flex-direction:row;align-items:center;gap:8px;color:#536a7c;white-space:nowrap}
.sc-period-pick input{width:auto;min-height:40px;padding:6px 10px}
.sc-bulk-link{background:#fff;color:#9f1427;border-color:#efc3ca;min-height:40px;padding:8px 14px;font-size:14px}
.sc-bulk-link:hover{background:#fff6f7;border-color:#bb1228}
.sc-primary{background:#bb1228;color:#fff;border-color:#bb1228}
.sc-primary:hover:not(:disabled){background:#9f1427;border-color:#9f1427}

/* ชิปตัวเลข 3 ใบ (กดแล้วไปแท็บนั้น) */
.sc-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0 14px}
.sc-chip{display:flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:left;border:2px solid #e3e8ed;border-radius:16px;background:#fff;padding:12px 16px;min-height:0;font-weight:400;color:#33475a}
.sc-chip b{font-size:30px;line-height:1.15}
.sc-chip span{font-weight:700;font-size:15px}
.sc-chip small{font-size:13px;color:#5c7383}
.sc-chip.ok b{color:#15803d}
.sc-chip.todo{border-color:#f6c3cb;background:#fff6f7}
.sc-chip.todo b{color:#c40020}
.sc-chip.hold{border-color:#f3d9b1;background:#fffaf2}
.sc-chip.hold b{color:#b45309}

/* งานถัดไป: ปุ่มใหญ่ AI · กำลังทำ · ร่างรอเผยแพร่ */
.sc-next:empty{display:none}
.sc-big{display:flex;align-items:center;gap:16px;background:linear-gradient(135deg,#c8102e,#e23a4d);color:#fff;border-radius:18px;padding:14px 18px;box-shadow:0 8px 20px rgba(200,16,46,.22)}
.sc-big-icon{font-size:34px;line-height:1}
.sc-big b{display:block;font-size:19px}
.sc-big small{color:#fff;opacity:.93;font-size:13.5px}
.sc-big-go{margin-left:auto;background:#fff;color:#c40020;border:0;border-radius:12px;padding:10px 22px;font-size:16px;white-space:nowrap}
.sc-big-go:hover:not(:disabled){background:#fff3f5}
.sc-big.calm{background:#fff;color:#172b39;border:1px solid #dce4eb;box-shadow:none}
.sc-big.calm small{color:#5c7383}
.sc-big.ok{background:#eef8f2;color:#14532d;border:1px solid #cfe6d8;box-shadow:none}
.sc-big.ok small{color:#2f6b49}
.sc-note{background:#eef3f7;border-left:4px solid #8aa1b4;border-radius:10px;padding:12px 16px;color:#304d61;font-size:14px}
.sc-note.bad{background:#fff3f4;border-color:#c40020;color:#8f1218}
.sc-run{border:2px solid #f3b6bf;background:#fff8f9;border-radius:18px;padding:14px 18px}
.sc-run-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.sc-run-top b{font-size:18px;color:#9f1427}
.sc-run-top span{color:#33475a;font-weight:700}
#sc-stop{margin-left:auto}
.sc-run progress{display:block;width:100%;height:12px;margin:10px 0 4px;accent-color:#c8102e}
#sc-run-wait{margin:4px 0;color:#33475a;font-size:14px}
#sc-run-wait:empty{display:none}
.sc-run small{font-size:13px}
.sc-review{border:2px solid #cfe6d8;background:#f6fbf8;border-radius:18px;padding:14px 18px;margin-bottom:12px}
.sc-review-head{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap}
.sc-review-head b{font-size:18px;color:#14532d}
.sc-review-head span{font-size:13.5px;color:#4b6b5a}
.sc-review-list{list-style:none;margin:10px 0;padding:0;max-height:244px;overflow:auto;border:1px solid #dcebe2;border-radius:12px;background:#fff}
.sc-review-list li{display:flex;align-items:center;gap:12px;padding:7px 12px;border-bottom:1px solid #eef3f0}
.sc-review-list li:last-child{border-bottom:0}
.sc-review-list li.bad{background:#fffafa}
.sc-review-list label{flex:1;flex-direction:row;align-items:flex-start;gap:10px;font-weight:400;font-size:14.5px;cursor:pointer}
.sc-review-list label small{display:block;color:#b2142b;font-size:12.5px}
.sc-review-list .sc-do2{min-height:34px}
.sc-review input[type=checkbox]{width:20px;height:20px;min-height:20px;margin:2px 0 0;padding:0;flex:none;accent-color:#15803d}
.sc-review-note{margin:0 0 10px;font-size:13.5px;color:#8a4b06;background:#fff6e8;border-radius:10px;padding:8px 12px}
.sc-review-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.sc-all{flex-direction:row;align-items:center;gap:8px;font-weight:400;cursor:pointer}
#sc-pub-progress{font-size:13.5px;color:#33475a}
.sc-review-actions .sc-primary{margin-left:auto;font-size:15.5px}

/* แท็บ + ตาราง */
.sc-tabbar{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:18px 0 10px}
.sc-tabs{display:flex;gap:8px;flex-wrap:wrap}
.sc-tabs button{border-radius:999px;background:#e9edf1;border-color:transparent;color:#33475a;padding:8px 16px;min-height:40px;font-size:15px}
.sc-tabs button[aria-selected=true]{background:#172b39;color:#fff}
.sc-find{flex-direction:row;align-items:center;gap:10px;color:#536a7c;white-space:nowrap}
.sc-find input{width:280px;min-height:40px;padding:8px 12px}
.sc-panel{background:#fff;border:1px solid #dce4eb;border-radius:16px;padding:4px 16px 8px}
.sc-panel .sc-table-wrap{margin-top:0}
.sc-table{font-size:14.5px}
.sc-table th{background:none;color:#5c7383;font-weight:400;font-size:13px;padding:10px 10px 8px;border-bottom:1px solid #dce4eb;white-space:nowrap}
.sc-table td{padding:8px 10px;border-bottom:1px solid #f0f2f5;vertical-align:middle}
.sc-table td:first-child{min-width:0}
.sc-table tbody tr:last-child td{border-bottom:0}
.sc-table tbody tr:hover{background:#fafbfc}
.sc-table td small{display:block;font-size:12.5px;margin-top:2px}
.sc-table .n{text-align:right;font-weight:700;white-space:nowrap}
.sc-table .a{text-align:right;white-space:nowrap;width:1%}
.sc-table .ok,.sc-ok{color:#15803d}
.sc-table .bad{color:#b2142b}
.sc-table .warn{color:#b45309;font-weight:700}
.sc-table .draft{color:#8b5706;font-weight:700}
.sc-table .muted{color:#7b8d9a}
.sc-do,.sc-do2{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:6px 14px;border-radius:10px;font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap}
.sc-do{background:#c8102e;color:#fff;border:1px solid #c8102e}
.sc-do:hover:not(:disabled){background:#9f1427;border-color:#9f1427}
.sc-do2{background:#fff;color:#9f1427;border:1.5px solid #efc3ca}
.sc-do2:hover:not(:disabled){border-color:#bb1228;background:#fff7f8}
.sc-empty{padding:18px 4px;margin:0}
.sc-found{font-size:13px;margin:10px 0 0}
.sc-hint{font-size:13.5px;color:#5c7383}
.sc-panel>.sc-hint{margin:10px 0 0;background:#fffaf2;border-radius:10px;padding:8px 12px}
.sc-library{margin:12px 0 6px;border-top:1px solid #e3e9ee;padding-top:10px}
.sc-library summary{color:#33475a}
.sc-library .sc-cards{margin:14px 0 6px}

/* หน้าทำทีละตำแหน่ง */
.sc-editor{max-width:1000px;margin:18px auto 0;padding:20px 24px 0}
.sc-editor-head{display:flex;align-items:flex-start;justify-content:flex-start;gap:16px}
.sc-editor-heading{flex:1;min-width:0}
.sc-back{flex:none;min-height:40px;padding:8px 14px}
.sc-editor-heading h2{font-size:22px;line-height:1.35}
#sc-editor-context:not(:empty){background:none;border:0;padding:0;margin:4px 0 0;color:#5c7383;font-size:14px}
.sc-linkbtn{border:0;background:none;color:#c40020;padding:0 4px;min-height:0;font-size:14px;font-weight:700;text-decoration:underline}
.sc-linkbtn:disabled{opacity:.5}
.sc-banner{border-radius:12px;padding:10px 14px;margin:14px 0 0;font-size:14px;background:#eef3f7;color:#304d61;white-space:pre-line}
.sc-banner:empty{display:none}
.sc-banner.ok{background:#eef8f2;color:#14532d}
.sc-banner.warn{background:#fff6e8;color:#8a4b06}
.sc-jd-pick{border:2px solid #f3d9b1;background:#fffaf2;border-radius:14px;padding:14px 16px;margin:16px 0}
.sc-jd-pick h3{color:#8a4b06}
.sc-jd-options{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;margin:10px 0}
.sc-jd-options button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left}
.sc-jd-options span{font-size:13px;font-weight:400;color:#5c7383}
.sc-jd-any{margin-top:6px}
.sc-need-jd #sc-ai,.sc-need-jd .sc-item-heading,.sc-need-jd #sc-items,.sc-need-jd #sc-add,.sc-need-jd .sc-actions{display:none}
.sc-ai{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:none;border:0;padding:0;margin:14px 0 0}
#sc-ai-status{flex:1;margin:0;font-size:14.5px;border-radius:12px}
#sc-ai-status.is-busy,#sc-ai-status.is-ok{padding:10px 14px}
#sc-ai-status.is-busy{background:#f1f5f8;color:#304d61}
#sc-ai-status.is-busy::before{content:'';display:inline-block;width:14px;height:14px;margin-right:8px;vertical-align:-2px;border:2px solid #c8102e;border-right-color:transparent;border-radius:50%;animation:sc-spin .8s linear infinite}
#sc-ai-status.is-ok{background:#f0fdf4;border:1px solid #bbf7d0;color:#166534}
#sc-ai-generate{margin-left:auto;min-height:40px;padding:8px 14px}
#sc-ai-proposal{flex-basis:100%;border:1px solid #e7c5cd;background:#fff8fa;border-radius:12px;padding:12px 16px}
@keyframes sc-spin{to{transform:rotate(360deg)}}
.sc-item-heading{margin:18px 0 8px;align-items:baseline}
#sc-weight{font-size:14px}
.sc-item{padding:0;margin:0 0 10px;border:1px solid #dfe5ea;border-radius:14px;background:#fff}
.sc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;padding:0}
.sc-item-sum{display:grid;grid-template-columns:32px 1fr auto auto;gap:12px;align-items:center;padding:11px 14px}
.sc-item-no{width:30px;height:30px;border-radius:50%;background:#fde8eb;color:#a10920;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center}
.sc-item-main{min-width:0}
.sc-item-main b{display:block;font-size:15.5px;overflow-wrap:anywhere}
.sc-item-main small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;color:#5c7383}
.sc-item-w{text-align:right;white-space:nowrap}
.sc-item-w b{display:block;font-size:16px}
.sc-item-w small{font-size:12.5px}
.sc-item-toggle{min-height:36px;padding:6px 12px;font-size:13.5px;color:#9f1427;border-color:#efc3ca;white-space:nowrap}
.sc-item-body{border-top:1px dashed #e3e9ee;padding:12px 14px 14px;background:#fbfcfd;border-radius:0 0 14px 14px}
.sc-item-body .sc-item-top{grid-template-columns:1fr 110px 170px}
.sc-item-body .sc-rubric-grid{grid-template-columns:1fr;gap:8px;margin:12px 0}
.sc-item-body .sc-rubric-grid label{display:grid;grid-template-columns:120px 1fr;gap:10px;align-items:start;grid-column:auto}
.sc-item-body .sc-rubric-grid label span{padding-top:10px}
.sc-item-tech{display:grid;grid-template-columns:1.4fr 1fr 120px;gap:12px;margin-top:12px}
.sc-item-tech label{font-weight:400;color:#5c7383}
.sc-item .sc-remove{margin-top:12px}
input[readonly],textarea[readonly]{background:#f6f8fa;color:#33475a}
.sc-bad{border-color:#c40020!important;box-shadow:0 0 0 3px rgba(196,0,32,.15)}
.sc-add{border-style:dashed;color:#5c7383}
.sc-skeleton i{display:block;height:62px;margin-bottom:10px;border-radius:14px;background:linear-gradient(90deg,#eef1f4 25%,#f8f9fb 37%,#eef1f4 63%);background-size:400% 100%;animation:sc-shimmer 1.4s ease infinite}
@keyframes sc-shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}
.sc-more{border:1px dashed #cdd6de;border-radius:12px;padding:10px 14px;margin:16px 0 0;background:#fafbfc}
.sc-more>summary{color:#5c7383}
.sc-more>summary small{margin-left:6px}
.sc-more .sc-grid{margin:14px 0}
.sc-more .sc-source{margin:10px 0}
.sc-actions{position:sticky;bottom:0;z-index:5;margin:16px -24px 0;padding:14px 24px;justify-content:flex-end;background:rgba(255,255,255,.97);border-top:1px solid #e3e9ee;border-radius:0 0 16px 16px}
.sc-actions #sc-editor-error{flex-basis:100%;margin:0 0 2px}
.sc-actions #sc-save{background:#fff;color:#a10920;border-color:#efc3ca}
.sc-actions #sc-publish{min-width:260px;font-size:16px}
.sc-done{text-align:center;padding:26px 0 30px}
.sc-done-icon{font-size:46px;line-height:1.2}
.sc-done h3{font-size:24px;color:#14532d;margin:4px 0 8px}
.sc-done p{color:#33475a}
.sc-done .sc-small{font-size:13.5px;color:#5c7383}
.sc-done .sc-remind{display:inline-block;margin:10px 0 0;padding:8px 14px;border-radius:10px;background:#fff6e8;color:#8a4b06;font-size:14px}
.sc-done-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:16px}
.sc-done-actions .sc-ok{font-weight:700;margin:0;align-self:center}

@media(max-width:760px){
  .sc-heading{align-items:stretch}
  .sc-period-pick{justify-content:space-between}
  .sc-chips{grid-template-columns:1fr;gap:8px}
  .sc-chip{flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:10px;padding:10px 14px}
  .sc-chip b{font-size:24px}
  .sc-chip small{flex-basis:100%}
  .sc-big{flex-wrap:wrap;padding:14px}
  .sc-big-go{margin-left:0;width:100%}
  .sc-review-list li{flex-wrap:wrap}
  .sc-review-actions .sc-primary{margin-left:0;width:100%}
  .sc-find,.sc-find input{width:100%}
  .sc-panel{padding:2px 12px 6px}
  .sc-table thead{display:none}
  .sc-table,.sc-table tbody{display:block;width:100%}
  .sc-table tr{display:flex;flex-wrap:wrap;gap:4px 14px;padding:10px 0;border-bottom:1px solid #eef1f4}
  .sc-table tbody tr:last-child{border-bottom:0}
  .sc-table td{display:block;border:0;padding:0;width:auto}
  .sc-table td:first-child,.sc-table td.a{flex-basis:100%}
  .sc-table td[data-label]:not(:first-child)::before{content:attr(data-label) ' ';color:#7b8d9a;font-weight:400}
  .sc-table .a{text-align:left;margin-top:6px}
  .sc-table .a>*{width:100%}
  .sc-editor{padding:14px 14px 0}
  .sc-editor-head{flex-direction:column;gap:8px}
  .sc-item-sum{grid-template-columns:30px 1fr auto}
  .sc-item-toggle{grid-column:1/-1}
  .sc-item-body .sc-item-top,.sc-item-tech{grid-template-columns:1fr}
  .sc-item-body .sc-item-top label:nth-child(2){grid-column:auto;grid-row:auto}
  .sc-item-body .sc-rubric-grid label{grid-template-columns:1fr;gap:4px}
  .sc-item-body .sc-rubric-grid label span{padding-top:0}
  .sc-ai{flex-direction:column;align-items:stretch}
  #sc-ai-generate{margin-left:0}
  .sc-actions{margin:14px -14px 0;padding:12px 14px}
  .sc-actions>button{flex:1 1 100%}
  .sc-actions #sc-publish{min-width:0}
}