/* Admin web — shell, navigation, guide editor (ใช้ tokens จาก ds.css) */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);min-height:60px;padding:var(--sp-2) var(--sp-5);background:var(--navy-900);color:#fff;position:sticky;top:0;z-index:30}
.brand{display:flex;align-items:center;gap:var(--sp-3)}
.brand strong{font-size:var(--fs-lg)}
.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:#fff;color:var(--navy-900);font-weight:700}
.topbar .badge--brand{background:rgba(255,255,255,.16);color:#fff}
.topbar-right{display:flex;align-items:center;gap:var(--sp-3)}
.auth-state{font-size:var(--fs-sm);color:#cfe3ec}
.badge--env-local{background:#e9eff2;color:#12354c}.badge--env-dev{background:var(--info-bg);color:var(--info)}.badge--env-uat{background:var(--warn-bg);color:var(--warn)}.badge--env-prod{background:var(--danger-bg);color:var(--danger)}

.shell{display:grid;grid-template-columns:240px minmax(0,1fr);gap:var(--sp-6);max-width:1360px;margin:0 auto;padding:var(--sp-6) var(--sp-5) var(--sp-12)}
.sidebar{position:sticky;top:calc(60px + var(--sp-6));align-self:start}
.sidebar nav{display:grid;gap:var(--sp-1)}
.nav-link{display:block;padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);color:var(--ink);text-decoration:none;border-left:4px solid transparent}
.nav-link:hover{background:var(--teal-50);color:var(--ink)}
.nav-link.is-active{background:var(--surface);border-left-color:var(--teal-700);box-shadow:var(--shadow-1)}
.nav-title{display:block;font-weight:600}
.nav-sub{display:block;font-size:var(--fs-xs);color:var(--ink-muted)}
.nav-link.is-soon{color:var(--ink-hint);cursor:default;margin-top:var(--sp-3);border-top:1px dashed var(--line);border-radius:0 0 var(--r-md) var(--r-md)}
.nav-link.is-soon:hover{background:transparent}

main{min-width:0}
main:focus{outline:none}
.workspace{display:grid;gap:var(--sp-4)}
.page-head h1{font-size:var(--fs-2xl);margin:2px 0 var(--sp-1)}
#notice{margin-bottom:var(--sp-4);position:sticky;top:calc(60px + var(--sp-3));z-index:25;box-shadow:var(--shadow-1)}

.actions{display:flex;justify-content:flex-end;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.alert+.actions,.readiness+.alert,.alert+.btn{margin-top:var(--sp-4)}
.toolbar{display:flex;gap:var(--sp-3);align-items:flex-end;padding:var(--sp-4) var(--sp-5)}
.toolbar .field{flex:1;margin:0}
.field-grid--wide{grid-template-columns:2fr 1fr}
.select{appearance:auto}

/* Guide editor */
.guide-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--sp-4);align-items:start}
.steps-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-4);margin:var(--sp-6) 0 var(--sp-3);padding-top:var(--sp-5);border-top:1px solid var(--line)}
.steps-heading h3{margin:0}
.steps{display:grid;gap:var(--sp-3)}
.step-card{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:var(--sp-3);padding:var(--sp-4);border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2)}
.step-card .field{margin-bottom:var(--sp-3)}.step-card .field:last-child{margin-bottom:0}
.step-card label{font-weight:600}
.step-card label input,.step-card label textarea{margin-top:var(--sp-2);font-weight:400}
.step-number{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--teal-700);color:#fff;font-weight:700}
.step-controls{display:grid;gap:var(--sp-2);align-content:start}
.sticky-actions{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin:var(--sp-6) calc(-1*clamp(var(--sp-4),3.2vw,var(--sp-8))) calc(-1*clamp(var(--sp-4),3.2vw,var(--sp-8)));padding:var(--sp-4) clamp(var(--sp-4),3.2vw,var(--sp-8));background:var(--surface);border-top:1px solid var(--line);border-radius:0 0 var(--r-lg) var(--r-lg)}
.field-label{display:block;margin-bottom:var(--sp-2);font-weight:600;color:var(--ink)}
.file-picker{display:flex;align-items:center;gap:var(--sp-3);min-height:48px;padding:var(--sp-2);border:1px solid var(--line-strong);border-radius:var(--r-md);background:var(--surface);cursor:pointer}
.file-picker:hover{border-color:var(--teal-700)}
.file-picker:focus-within{outline:3px solid var(--focus);outline-offset:2px}
.file-picker .btn{flex:none;pointer-events:none}
.file-picker-name{min-width:0;color:var(--ink-muted);font-weight:400;overflow-wrap:anywhere}
.publish-card{position:sticky;top:calc(60px + var(--sp-6));display:grid;gap:var(--sp-4);border-color:var(--warn-line);background:var(--warn-bg)}
.publish-card .eyebrow{color:var(--warn)}
.publish-card .alert{background:var(--surface)}
.publish-card .btn--secondary{background:var(--surface);color:var(--warn);border-color:var(--warn)}
.publish-card .btn--secondary:hover{background:#fff}
.publish-card .btn:disabled{background:#f3e6d3;border-color:#f3e6d3;color:#7a5a38}
.checklist{display:grid;gap:var(--sp-2)}
.checklist li{display:flex;gap:var(--sp-3);align-items:flex-start}
.checklist small{color:var(--ink-muted)}
.check-dot{flex:none;display:grid;place-items:center;width:22px;height:22px;margin-top:2px;border-radius:50%;border:2px solid var(--line-strong);background:var(--surface);font-size:.75rem;font-weight:700;line-height:1}
.checklist li.is-ok .check-dot{background:var(--success);border-color:var(--success);color:#fff}
.checklist li.is-ok .check-dot::before{content:"✓"}
.checklist li.is-bad .check-dot{border-color:var(--danger);color:var(--danger)}
.checklist li.is-bad .check-dot::before{content:"!"}
.preview-step{margin-top:var(--sp-3);padding:var(--sp-4);border-radius:var(--r-md);background:var(--surface-2);border:1px solid var(--line)}
.preview-step h3{margin:0 0 var(--sp-1);font-size:var(--fs-md)}
.preview-step p{white-space:pre-line;color:var(--ink-muted);overflow-wrap:anywhere}
.dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-4)}
#preview-dialog .alert{margin:var(--sp-4) 0}
.confirm-detail{margin:var(--sp-4) 0;padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);background:var(--surface-2);border:1px solid var(--line)}
.confirm-detail:empty{display:none}
#confirm-ack-row{margin-top:var(--sp-4)}
#confirm-dialog.dialog--danger .dialog-body{border-top:6px solid var(--danger);border-radius:var(--r-lg) var(--r-lg) 0 0}
#confirm-dialog .dialog-list{color:var(--ink)}

@media (max-width:1100px){.guide-grid{grid-template-columns:1fr}.publish-card{position:static}}
@media (max-width:900px){
  .shell{grid-template-columns:1fr;gap:var(--sp-3);padding:var(--sp-3) var(--sp-3) var(--sp-12)}
  .sidebar{position:static}
  .sidebar nav{display:flex;overflow-x:auto;gap:var(--sp-2);padding-bottom:var(--sp-1)}
  .nav-link{flex:none;border-left:0;border-bottom:4px solid transparent;border-radius:var(--r-md) var(--r-md) 0 0;background:var(--surface)}
  .nav-link.is-active{border-bottom-color:var(--teal-700);box-shadow:none}
  .nav-sub{display:none}
  .nav-link.is-soon{display:none}
  .auth-state{display:none}
  #notice{top:calc(60px + var(--sp-2))}
}
@media (max-width:640px){
  .topbar{padding-inline:var(--sp-3)}
  .toolbar{flex-direction:column;align-items:stretch}
  .field-grid--wide{grid-template-columns:1fr}
  .step-card{grid-template-columns:32px minmax(0,1fr)}
  .step-controls{grid-column:2;display:flex}
  .sticky-actions{flex-direction:column;align-items:stretch}
  .sticky-actions .actions{flex-direction:row;flex-wrap:nowrap}
  .sticky-actions .actions .btn{flex:1;padding-inline:8px}
  .actions .btn{width:100%}
  .sticky-actions .actions .btn{width:auto}
}