/* 웹콘솔 공정 배치(/ants/processes) — store.css 의 st-* 위에 얹는다. 목록은 ants_line_controller.js 가 그린다 */
.al-nav a[aria-current] { color: #1a1a1a; font-weight: 700; text-decoration: none; border-bottom: 2px solid #C2401F; }

/* 단계 — 왼쪽 번호 상자(설치 순서 .st-steps 와 같은 모양)를 세로 선으로 잇는다 */
.al-steps { list-style: none; margin: 0; padding: 0; }
.al-step { position: relative; display: grid; grid-template-columns: 26px 1fr auto; gap: 4px 12px; padding: 0 0 14px; }
.al-step::before { content: ""; position: absolute; left: 12px; top: 26px; bottom: 0; border-left: 1.5px solid #1a1a1a; }
.al-no { width: 26px; height: 26px; box-sizing: border-box; border: 1.5px solid #1a1a1a; background: #fff; text-align: center; font-size: 13px; line-height: 23px; font-weight: 700; position: relative; }
.al-step-body { min-width: 0; display: grid; gap: 4px; }
.al-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* 병렬 — 같은 단계의 공정을 옆으로 나란히, 점선 상자로 묶는다 */
.al-step.is-parallel .al-chips { border: 1px dashed #8fb0d6; background: #f4f8fd; padding: 6px; border-radius: 12px; }
.al-tag { justify-self: start; font-size: 11px; font-weight: 700; color: #1565c0; letter-spacing: .04em; margin-top: -2px; }

/* 칩 — 지메일 받는 사람 칸처럼 */
.al-chip { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px 4px; max-width: 100%; box-sizing: border-box; min-height: 34px;
  padding: 3px 4px 3px 12px; border: 1px solid #d4d4d0; border-radius: 17px; background: #f3f3f0; font-size: 14px; }
.al-chip.is-placed { background: #fff; border-color: #2e7d32; }
.al-chip.is-selected { outline: 2px solid #C2401F; outline-offset: 1px; background: #fdf3f0; }
.al-chip.is-flash { animation: al-flash 1.2s ease-out; }
@keyframes al-flash { 0% { background: #fff3c4; } 100% { background: inherit; } }
.al-name { all: unset; cursor: text; font-weight: 700; color: #1a1a1a; padding: 3px 2px; overflow-wrap: anywhere; }
.al-name:hover { text-decoration: underline dotted; }
.al-name:focus-visible { outline: 2px solid #1565c0; }
.al-rename { font: inherit; font-size: 16px; font-weight: 700; width: 11em; max-width: 60vw; padding: 2px 6px; border: 1px solid #1a1a1a; border-radius: 6px; }

/* 노트북 고르기 — 보이는 건 글자, 누르면 위에 겹친 투명 select 가 열린다(폭이 가장 긴 항목에 끌려가지 않게) */
.al-pick { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border: 1px dashed #999; border-radius: 13px;
  background: #fff; color: #777; font-size: 12px; white-space: nowrap; max-width: 100%; }
.al-pick::after { content: "▾"; font-size: 10px; }
.al-pick span { overflow: hidden; text-overflow: ellipsis; }
.al-pick select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.al-pick:focus-within { outline: 2px solid #1565c0; outline-offset: 1px; }
.al-chip.is-placed .al-pick { border: 1px solid #2e7d32; color: #2e7d32; font-weight: 600; }
.al-x { all: unset; cursor: pointer; width: 24px; height: 24px; border-radius: 50%; text-align: center; line-height: 23px; font-size: 16px; color: #777; }
.al-x:hover, .al-x:focus-visible { background: #e3e3df; color: #1a1a1a; }

/* 단계 도구 — 마우스가 있으면 줄에 올렸을 때만 진하게 */
.al-step-tools { display: flex; gap: 2px; align-items: flex-start; }
.al-tool { all: unset; cursor: pointer; font-size: 12px; color: #1565c0; padding: 5px 7px; border-radius: 4px; white-space: nowrap; line-height: 1.2; }
.al-tool:hover, .al-tool:focus-visible, .al-menu[open] > .al-tool { background: #eef3fa; }
.al-menu { position: relative; }
.al-menu > summary { list-style: none; font-size: 15px; color: #555; }
.al-menu > summary::-webkit-details-marker { display: none; }
.al-menu-list { position: absolute; right: 0; top: calc(100% + 4px); z-index: 6; display: grid; min-width: 200px; background: #fff; border: 1px solid #1a1a1a; box-shadow: 0 6px 18px rgb(0 0 0 / .12); }
.al-menu-list button { all: unset; cursor: pointer; padding: 9px 14px; font-size: 14px; }
.al-menu-list button:hover, .al-menu-list button:focus-visible { background: #f4f1ea; }
.al-menu-list button:disabled { color: #bbb; cursor: default; background: none; }
.al-menu-list button:last-child { color: #C2401F; border-top: 1px solid #eee; }
@media (hover: hover) {
  .al-step-tools { opacity: .3; transition: opacity .15s; }
  .al-step:hover .al-step-tools, .al-step:focus-within .al-step-tools { opacity: 1; }
}

/* 입력 칸 — 목록 맨 아래, 다음 번호 자리 */
.al-entry { display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; align-items: center; }
.al-entry .al-no { border-style: dashed; color: #999; }
.al-input { font: inherit; font-size: 16px; padding: 9px 12px; border: 1px solid #bbb; border-radius: 0; min-width: 0; width: 100%; box-sizing: border-box; }
.al-input:focus { outline: none; border-color: #1a1a1a; box-shadow: 0 0 0 1px #1a1a1a; }
.al-input-par { width: auto; flex: 1 1 12em; padding: 5px 10px; border-radius: 17px; border-style: dashed; }
.al-add { padding: 10px 16px; }
.al-help { margin: 10px 0 0 38px; padding: 0; list-style: none; font-size: 13px; color: #666; display: grid; gap: 2px; }
.al-help code { background: #f4f1ea; padding: 1px 5px; font-size: 12.5px; }
.al-help kbd { font: 12px ui-monospace, Menlo, monospace; border: 1px solid #ccc; border-bottom-width: 2px; border-radius: 3px; padding: 0 4px; background: #fff; }

/* 노트북 배치 — 1~18 이 어느 공정에 있는지 */
.al-sub { margin: -4px 0 10px; }
.al-laptops { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.al-lt { all: unset; box-sizing: border-box; display: grid; align-content: start; gap: 1px; padding: 7px 10px; border: 1px solid #e0e0e0; border-left-width: 3px; background: #fff; font-size: 12px; color: #999; min-width: 0; }
.al-lt b { font-size: 13px; color: #1a1a1a; }
.al-lt span { color: #555; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-lt em { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-lt.is-placed { cursor: pointer; border-left-color: #2e7d32; }
.al-lt.is-placed em { color: #2e7d32; font-weight: 600; }
.al-lt.is-placed:hover, .al-lt.is-placed:focus-visible { background: #f3faf3; }

/* 저장 줄 — 화면 아래에 붙어 따라온다 */
.al-bar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between;
  margin: 28px -16px 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 2px solid #1a1a1a; box-shadow: 0 -6px 12px rgb(255 255 255 / .9); }
.al-summary { flex: 1 1 14em; min-width: 0; font-size: 13px; color: #444; }
.al-bar-actions { display: flex; gap: 6px; margin-left: auto; }
.al-bar-actions [hidden] { display: none; }
.al-bar .st-btn { padding: 9px 22px; }

@media (max-width: 560px) {
  .al-step { grid-template-columns: 26px 1fr; }
  .al-step-tools { grid-column: 2; margin-top: -4px; }
  .al-menu-list { left: 0; right: auto; }
  .al-entry { gap: 8px 12px; }
  .al-add { padding: 10px 12px; }
  .al-help { margin-left: 0; }
}