:root {
  --bg: #f6f6f4; --card: #fff; --ink: #1d1d1b; --muted: #6b6b66; --line: #e3e2de;
  --accent: #895896; --add: #e6f4ea; --del: #fdecec; --chg: #fff5dc; --warn: #b35c00;
  font-family: -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; font-size: 14px; color: var(--ink);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); }
a { color: var(--accent); }
h1, h2, h3 { margin: 0 0 8px; }
.muted { color: var(--muted); }
.err { color: #b00020; min-height: 1em; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 16px; }
.login { max-width: 340px; margin: 0 auto 12vh; display: grid; gap: 12px; }
.conf-notice { max-width: 520px; margin: 9vh auto 20px; padding: 0 16px; text-align: center; }
.conf-notice strong { display: block; font-size: 30px; font-weight: 800; color: #d0021b; letter-spacing: .12em; }
.conf-notice p { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: #333; word-break: keep-all; }
.login label { display: grid; gap: 4px; }
.login h1 { word-break: keep-all; }
input, select, textarea, button { font: inherit; }
input, select, textarea { padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
button, .btn { padding: 6px 12px; border: 1px solid var(--line); border-radius: 6px; background: #fff; cursor: pointer; text-decoration: none; color: var(--ink); display: inline-flex; gap: 6px; align-items: center; }
button.primary, .btn.primary, form button { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn.ghost { border-color: transparent; }
button:disabled { opacity: .45; cursor: not-allowed; }
.badge { background: #c0392b; color: #fff; border-radius: 10px; padding: 0 7px; font-size: 12px; }
.badge.zero { background: #bbb; }
.top { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; background: #fff; border-bottom: 1px solid var(--line); gap: 12px; flex-wrap: wrap; position: sticky; top: 0; z-index: 2; }
.top nav a { margin-right: 14px; text-decoration: none; color: var(--muted); font-weight: 600; }
.top nav a.on { color: var(--ink); border-bottom: 2px solid var(--accent); }
.top .right { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.layout { display: flex; align-items: flex-start; }
main { flex: 1; padding: 16px; min-width: 0; }
aside#nika { width: 380px; max-width: 100%; border-left: 1px solid var(--line); background: #fff; height: calc(100vh - 54px); position: sticky; top: 54px; display: flex; flex-direction: column; }
.nika-head { padding: 10px 12px; border-bottom: 1px solid var(--line); display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
#chat { flex: 1; overflow: auto; padding: 12px; display: grid; gap: 10px; align-content: start; }
.msg { padding: 8px 10px; border-radius: 8px; line-height: 1.55; white-space: normal; }
.msg.user { background: #f3edf5; justify-self: end; max-width: 90%; }
.msg.assistant { background: #fafaf8; border: 1px solid var(--line); }
.msg ul { margin: 4px 0; padding-left: 18px; }
#askForm { display: flex; gap: 6px; padding: 10px; border-top: 1px solid var(--line); }
#askForm textarea { flex: 1; resize: vertical; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.company { text-decoration: none; color: inherit; display: grid; gap: 6px; }
.company:hover { border-color: var(--accent); }
.company .stats { display: flex; gap: 10px; flex-wrap: wrap; font-size: 13px; }
table { width: 100%; border-collapse: collapse; background: #fff; }
th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: #f0efeb; font-weight: 600; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.add { background: var(--add); } tr.del { background: var(--del); } tr.chg { background: var(--chg); }
.timeline { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 16px; }
.step { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: #fff; cursor: pointer; min-width: 120px; }
.step.sel { border-color: var(--accent); box-shadow: 0 0 0 2px #89589622; }
.step .lbl { font-weight: 700; }
.section { margin: 18px 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pill { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; background: #eee; }
.pill.active { background: #efe5f1; color: var(--accent); } .pill.done_proposed { background: #fff0d6; color: var(--warn); }
.pill.done, .pill.archive { background: #e9e9e9; color: #555; }
.proposal { border-color: #f0c36d; background: #fffaf0; }
.queue-item { display: grid; gap: 8px; margin-bottom: 12px; }
.queue-item .fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.queue-item label { display: grid; gap: 3px; font-size: 13px; }
#toast { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); background: #222; color: #fff; padding: 10px 14px; border-radius: 8px; max-width: 90vw; white-space: pre-line; z-index: 9; }
.pct-in, .amt-in { width: 110px; text-align: right; font-variant-numeric: tabular-nums; }
.doc-frame { width: 100%; height: 80vh; border: 1px solid var(--line); border-radius: 8px; background: #fff; margin-bottom: 12px; }
.ratio { border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 10px 12px; margin-bottom: 8px; text-align: center; }
.ratio-names { color: var(--muted); font-size: 13px; }
.ratio-values { font-size: 22px; font-weight: 700; letter-spacing: .5px; font-variant-numeric: tabular-nums; }
.color-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
@media (max-width: 1100px) { .color-grid { grid-template-columns: 1fr; } }
details summary { cursor: pointer; color: var(--muted); padding: 6px 0; }
@media (max-width: 900px) {
  .layout { flex-direction: column; }
  aside#nika { width: 100%; position: static; height: 70vh; border-left: 0; border-top: 1px solid var(--line); }
  .table-wrap { overflow-x: auto; }
}

/* ---------- 웹 수정 ---------- */
.edit-cta { display: flex; align-items: center; gap: 16px; padding: 16px 18px; margin: 4px 0 14px; border: 2px solid var(--accent); border-radius: 12px; background: #f5eff6; }
.edit-cta-icon { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; }
.edit-cta-text { flex: 1; display: grid; gap: 3px; min-width: 0; }
.edit-cta-text > b { font-size: 17px; }
.edit-cta-text span { color: var(--muted); font-size: 13px; }
.edit-cta-btn { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 14px 26px; font-size: 17px; font-weight: 700; border-radius: 10px; background: var(--accent); color: #fff; border: 0; cursor: pointer; box-shadow: 0 2px 6px #89589640; }
.edit-cta-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.edit-banner { display: flex; align-items: center; gap: 8px; padding: 10px 14px; margin-bottom: 8px; border-radius: 8px; background: #fff5dc; color: #6b4b00; border: 1px solid #f0d58c; }
#linesOut.editing table { box-shadow: 0 0 0 2px #f0d58c; border-radius: 6px; }
#linesOut.editing .pct-in, #linesOut.editing .amt-in { width: 130px; height: 38px; font-size: 16px; font-weight: 600; padding: 4px 10px; border: 2px solid #c9c7c0; border-radius: 8px; }
#linesOut.editing .pct-in:focus, #linesOut.editing .amt-in:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px #89589630; }
#linesOut.editing tr.chg .pct-in, #linesOut.editing tr.chg .amt-in { border-color: #d39b00; background: #fffbea; }
#linesOut.editing td { vertical-align: middle; }
.edit-bar { position: sticky; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 12px 14px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 -4px 16px #0000001a; flex-wrap: wrap; }
.edit-bar-status { flex: 1; display: flex; gap: 14px; font-size: 15px; font-weight: 600; color: var(--muted); }
.edit-bar-status .on { color: #8a6100; }
.edit-bar-status .ok { color: var(--accent); }
.edit-bar-status .warn { color: #b00020; }
.edit-bar-cancel { padding: 12px 18px; font-size: 15px; border-radius: 10px; }
.edit-bar-save { padding: 12px 24px; font-size: 16px; font-weight: 700; border-radius: 10px; background: var(--accent); color: #fff; border: 0; cursor: pointer; }
.edit-bar-save:disabled { background: #c2adc7; }
.revise-dialog { border: 0; border-radius: 14px; padding: 20px 22px; width: min(560px, 92vw); box-shadow: 0 20px 60px #00000040; }
.revise-dialog::backdrop { background: #0006; }
.revise-dialog h3 { font-size: 20px; }
.revise-dialog td.arrow { color: var(--muted); text-align: center; width: 24px; }
.warn-box { background: #fdecec; color: #8a1020; padding: 8px 10px; border-radius: 8px; }
@media (max-width: 700px) { .edit-cta { flex-wrap: wrap; } .edit-cta-btn { width: 100%; justify-content: center; } .edit-bar-save { width: 100%; } }
.revise-dialog button.ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); padding: 12px 18px; font-size: 15px; border-radius: 10px; }

/* 원료 추가·삭제, 공정확인 */
.row-btn { padding: 6px 12px; font-size: 13px; border-radius: 8px; white-space: nowrap; }
.row-btn.danger { color: #b00020; border-color: #e5b5bd; }
.row-btn.danger:hover { background: #fdeef0; }
.del-pill { background: #fdeef0; color: #b00020; }
#linesOut.editing tr.del td { color: var(--muted); }
#linesOut.editing tr.del .pct-in, #linesOut.editing tr.del .amt-in { opacity: .45; }
#linesOut.editing .name-in { width: 100%; min-width: 160px; height: 38px; font-size: 15px; font-weight: 600; padding: 4px 10px; border: 2px solid #c7a9cc; border-radius: 8px; }
.sg-lbl { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13px; color: var(--muted); }
#linesOut.editing .sg-in { width: 80px; height: 30px; font-size: 14px; padding: 2px 8px; border: 1px solid #c9c7c0; border-radius: 6px; text-align: right; }
.add-line-wrap { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 0 4px; }
.add-line { padding: 10px 18px; font-size: 15px; font-weight: 700; border-radius: 10px; border: 2px dashed var(--accent); color: var(--accent); background: #f8f4f9; cursor: pointer; }
.add-line:hover { background: #efe5f1; }
.proc h3 { margin-bottom: 6px; }
.proc-table td { vertical-align: top; }
.proc-table .step-no { width: 44px; font-weight: 700; font-size: 16px; color: var(--accent); }
.proc-table .step-text { white-space: pre-wrap; line-height: 1.55; }
.proc-table .step-chips { min-width: 180px; max-width: 320px; }
.chip { display: inline-flex; align-items: center; gap: 5px; margin: 2px 4px 2px 0; padding: 3px 9px; border-radius: 999px; background: #f3eef4; border: 1px solid #e0d3e3; font-size: 13px; white-space: nowrap; }
.chip b { color: var(--accent); }
.chip.fresh { background: var(--add); border-color: #a9d8b8; }
.step-in { width: 100%; min-width: 260px; font: inherit; font-size: 15px; line-height: 1.5; padding: 8px 10px; border: 2px solid #c9c7c0; border-radius: 8px; resize: vertical; }
.step-in:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px #89589630; }
.step-tools { white-space: nowrap; }
.icon-btn { width: 34px; height: 34px; padding: 0; font-size: 16px; border-radius: 8px; }
.icon-btn.danger { color: #b00020; }
.warn-line { margin-top: 4px; font-size: 13px; color: #b00020; }
.proc-preview { margin: 6px 0 10px 20px; padding: 0; line-height: 1.5; }
@media (max-width: 700px) { .proc-table .step-chips { min-width: 0; } .step-in { min-width: 0; } }
#linesOut.editing th { white-space: nowrap; }
.chips-box { margin-bottom: 6px; }
.chip-x { margin-left: 2px; padding: 0 4px; border: 0; background: none; color: #b00020; font-size: 12px; line-height: 1; cursor: pointer; border-radius: 4px; }
.chip-x:hover { background: #fdeef0; }
.chip-add { max-width: 100%; height: 32px; font-size: 13px; padding: 2px 6px; border: 1px dashed var(--accent); border-radius: 8px; color: var(--accent); background: #f8f4f9; cursor: pointer; }
.link-btn { padding: 0 4px; border: 0; background: none; color: var(--accent); text-decoration: underline; font-size: 13px; cursor: pointer; }
.denied { max-width: 460px; margin: 10vh auto; text-align: center; padding: 32px 24px; }
.denied-icon { font-size: 34px; }
.denied h2 { margin: 8px 0; }
.denied p { margin: 0; font-size: 16px; font-weight: 600; color: #895896; }

/* ---------- 니카: 오른쪽 아래 떠 있는 버튼 + 패널 ---------- */
.layout { display: block; }
.nika-fab { position: fixed; right: 20px; bottom: 20px; z-index: 20; display: inline-flex; align-items: center; gap: 8px; height: 56px; padding: 0 20px 0 18px; border: 0; border-radius: 28px; background: var(--accent); color: #fff; font-size: 16px; font-weight: 700; box-shadow: 0 6px 20px #89589666; cursor: pointer; }
.nika-fab:hover { filter: brightness(1.08); }
.nika-fab.open { background: #5e3b67; }
aside#nika { position: fixed; right: 20px; bottom: 88px; z-index: 19; width: 400px; max-width: calc(100vw - 40px); height: min(640px, calc(100vh - 120px)); top: auto; border: 1px solid var(--line); border-left: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 16px 48px #00000033; overflow: hidden; display: flex; flex-direction: column; }
.nika-head { position: relative; padding-right: 44px; }
.nika-close { position: absolute; right: 8px; top: 6px; width: 32px; height: 32px; padding: 0; justify-content: center; border: 0; background: none; color: var(--muted); font-size: 16px; }
.edit-bar { margin-right: 84px; }
main { padding-bottom: 96px; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
#reviseBody { overflow-x: auto; }

/* ---------- 휴대폰·태블릿 ---------- */
@media (max-width: 900px) { /* 예전 '아래로 붙는 패널' 규칙을 덮어쓴다 */
  aside#nika { position: fixed; width: 400px; height: min(640px, calc(100vh - 120px)); top: auto; border: 1px solid var(--line); }
}
@media (max-width: 700px) {
  :root { font-size: 15px; }
  input, select, textarea { font-size: 16px; } /* iOS 확대 방지 */
  .top { padding: 8px 12px; gap: 6px; }
  .top nav { display: flex; overflow-x: auto; white-space: nowrap; width: 100%; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .top nav a { margin-right: 16px; padding: 6px 0; }
  .top .right { width: 100%; gap: 6px; }
  .top .right .btn { padding: 6px 10px; font-size: 13px; }
  #who { display: none; }
  .login h1 { font-size: 22px; word-break: keep-all; }
  main { padding: 12px 12px 96px; }
  h2 { font-size: 19px; }
  .conf-notice { margin-top: 5vh; }
  .conf-notice strong { font-size: 26px; }
  .login { margin: 0 16px 8vh; }
  .timeline { flex-direction: column; }
  .timeline > .muted { display: none; }
  .step { min-width: 0; }
  th, td { padding: 6px 6px; }
  #linesOut.editing .pct-in, #linesOut.editing .amt-in { width: 92px; font-size: 16px; padding: 4px 6px; }
  #linesOut.editing .name-in { min-width: 120px; }
  .edit-banner { font-size: 13px; }
  .edit-bar { margin-right: 0; bottom: 76px; padding: 10px; }
  .edit-bar-status { flex-wrap: wrap; gap: 4px 10px; font-size: 14px; }
  .edit-bar-cancel { flex: 1; }
  /* 공정확인: 표 대신 단계별 카드 */
  .proc-table, .proc-table tbody { display: block; }
  .proc-table .proc-head { display: none; }
  .proc-table tr { display: grid; grid-template-columns: 34px 1fr; gap: 6px 8px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .proc-table td { display: block; border: 0; padding: 0; }
  .proc-table td.step-no { grid-row: span 3; }
  .proc-table td:not(.step-no) { grid-column: 2; }
  .proc-table .step-chips { max-width: none; }
  .step-tools { display: flex; gap: 6px; }
  .icon-btn { width: 40px; height: 40px; }
  .ratio-values { font-size: 18px; }
  .nika-fab { right: 14px; bottom: 14px; height: 52px; }
  aside#nika { inset: 0; width: auto; height: auto; max-width: none; border-radius: 0; border: 0; }
  body.nika-open .nika-fab { display: none; }
  .nika-close { width: 40px; height: 40px; top: 2px; font-size: 18px; }
  #askForm textarea { font-size: 16px; }
  .revise-dialog { padding: 16px; }
  .queue-item .fields { grid-template-columns: 1fr; }
}
/* 휴대폰: 수정 표를 원료별 카드로 (윗줄 순서·원료명·삭제, 아랫줄 함량·투입량) */
@media (max-width: 700px) {
  #linesOut.editing table, #linesOut.editing tbody { display: block; }
  #linesOut.editing tr.edit-head { display: none; }
  #linesOut.editing tr[data-row], #linesOut.editing tr[data-add], #linesOut.editing tr.tot {
    display: grid; grid-template-columns: 30px 1fr 1fr auto; grid-template-areas: "seq name name btn" "seq opct pct pct" "seq oamt amt amt"; gap: 6px 8px; padding: 10px 8px; border-bottom: 1px solid var(--line); align-items: center; }
  #linesOut.editing tr td, #linesOut.editing tr th { border: 0; padding: 0; background: none; }
  #linesOut.editing .c-seq { grid-area: seq; align-self: start; font-weight: 700; color: var(--accent); text-align: left; }
  #linesOut.editing .c-name { grid-area: name; font-weight: 600; }
  #linesOut.editing .c-btn { grid-area: btn; }
  #linesOut.editing .c-pct { grid-area: pct; text-align: left; }
  #linesOut.editing .c-amt { grid-area: amt; text-align: left; }
  #linesOut.editing .c-opct { grid-area: opct; text-align: left; align-self: end; padding-bottom: 8px; }
  #linesOut.editing .c-oamt { grid-area: oamt; text-align: left; align-self: end; padding-bottom: 8px; }
  #linesOut.editing .c-opct::before, #linesOut.editing .c-oamt::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 400; color: var(--muted); margin-bottom: 2px; }
  #linesOut.editing .c-pct::before, #linesOut.editing .c-amt::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 400; color: var(--muted); margin-bottom: 2px; }
  #linesOut.editing .c-delta { display: none; }
  #linesOut.editing tr:not([data-row]):not([data-add]):not(.tot):not(.edit-head) { display: none; }
  #linesOut.editing .pct-in, #linesOut.editing .amt-in { width: 100%; }
  #linesOut.editing tr.tot { background: #f0efeb; font-weight: 700; }
  #linesOut.editing tr.tot > :not(.c-seq):not(.c-name):not(.c-pct):not(.c-amt):not(.c-opct):not(.c-oamt) { display: none; }
  #linesOut.editing table { box-shadow: 0 0 0 2px #f0d58c; }
}

/* ---------- 휴대폰: 글자가 세로로 서지 않게 + 카드 표 ---------- */
.nowrap { white-space: nowrap; }
@media (max-width: 700px) {
  th { white-space: nowrap; }
  td { word-break: keep-all; overflow-wrap: anywhere; } /* 한글은 단어 단위로만 줄바꿈, 너무 긴 낱말만 끊음 */
  .pill { white-space: nowrap; }
  .m-hide { display: none; }

  /* 카드 표: 머리글 줄을 숨기고 행마다 카드 한 장 (칸 위에 작은 이름표) */
  table.m-cards, table.m-cards tbody { display: block; background: none; }
  table.m-cards tr:first-child { display: none; }
  table.m-cards tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; padding: 12px; margin-bottom: 10px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
  table.m-cards.cards-3 tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  table.m-cards.cards-1 tr { grid-template-columns: minmax(0, 1fr); }
  table.m-cards tr.add { background: var(--add); } table.m-cards tr.del { background: var(--del); } table.m-cards tr.chg { background: var(--chg); }
  table.m-cards td { display: block; padding: 0; border: 0; text-align: left; min-width: 0; }
  table.m-cards td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; color: var(--muted); margin-bottom: 2px; white-space: nowrap; }
  table.m-cards td.m-head, table.m-cards td.m-tag, table.m-cards td.m-full { grid-column: 1 / -1; }
  table.m-cards td.m-head { order: -1; font-size: 16px; font-weight: 700; }
  table.m-cards td.m-head::before, table.m-cards td.m-tag::before { display: none; }
  table.m-cards td.m-tag { order: -2; font-size: 12px; font-weight: 700; color: var(--accent); }
  table.m-cards td[colspan] { grid-column: 1 / -1; }

  /* 공정확인: 번호를 동그란 표로, 설명과 간격 */
  .proc-table tr { grid-template-columns: 30px 1fr; column-gap: 12px; }
  .proc-table td.step-no { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #f3eef4; color: var(--accent); font-size: 14px; text-align: center; }
}

/* 원료 구분 색 (엑셀 원본 칸 색) */
.chip[style] { border-color: #0000001f; }
.swatches { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.swatch { width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 1px solid #00000033; cursor: pointer; }
.swatch.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--accent); }
.swatch-lbl { font-size: 12px; }

/* 분류코드 표시 */
.cat { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 1px 2px; border-radius: 999px; font-size: 12px; background: #f1f0ec; color: var(--ink); white-space: nowrap; }
.cat b { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 11px; }
.cat-A b { background: #c2185b; } .cat-B b { background: #5b8c2a; } .cat-C b { background: #d9822b; } .cat-D b { background: #3f6fb5; } .cat-E b { background: var(--accent); }
.ing-link { color: inherit; text-decoration: none; border-bottom: 1px dotted #0004; }
.ing-link:hover { color: var(--accent); }

/* 원료 백과사전 */
.ing-tools { display: grid; gap: 10px; margin: 12px 0 6px; }
#ingQ { max-width: 420px; height: 40px; font-size: 15px; }
.ing-filter { display: flex; gap: 6px; flex-wrap: wrap; }
.ing-f { border-radius: 999px; padding: 6px 12px; }
.ing-f.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.ing-f.on .muted { color: #fff; }
.ing-cat { margin: 18px 0; }
.ing-cat h3 { display: flex; align-items: center; gap: 8px; font-size: 17px; }
.ing-cat h3 .cat { font-size: 14px; padding: 3px 12px 3px 3px; } .ing-cat h3 .cat b { width: 22px; height: 22px; font-size: 13px; }
details.ing { padding: 0; margin-bottom: 8px; }
details.ing summary { display: flex; align-items: center; gap: 8px; padding: 12px 14px; cursor: pointer; list-style: none; flex-wrap: wrap; }
details.ing summary::-webkit-details-marker { display: none; }
details.ing summary::after { content: "▾"; margin-left: 4px; color: var(--muted); }
details.ing[open] summary::after { content: "▴"; }
details.ing[open] summary { border-bottom: 1px solid var(--line); }
.ing-dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid #00000026; background: #fff; flex: none; }
.ing-name { font-size: 15px; }
.ing-meta { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.ing-body { padding: 10px 14px 14px; display: grid; gap: 10px; }
.ver-pct { display: inline-block; padding: 1px 6px; border-radius: 6px; text-decoration: none; color: var(--ink); background: #f3f2ee; white-space: nowrap; }
.ver-pct.cur { background: #efe5f1; color: var(--accent); }
.ing-cat-edit { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
@media (max-width: 700px) { .ing-meta { margin-left: 22px; width: 100%; } }
@media (max-width: 700px) { #linesOut td .cat { padding: 1px; } #linesOut td .cat .cat-l { display: none; } }

/* ---------- 표 가독성: 칸 나눔을 분명하게, 원료 표는 내용 폭에 맞춰 (넓은 화면에서 열 사이가 벌어지지 않게) ---------- */
table { border: 1px solid #c9c6bf; }
th, td { border: 1px solid #d3d0c9; }
tr[style] > td, tr[style] > th, td[style] { border-color: #00000029; } /* 원료 색이 칠해진 칸도 경계가 보이게 */
th { border-bottom: 2px solid #b9b5ad; }
#linesOut table { width: auto; min-width: min(100%, 640px); max-width: 100%; }
#linesOut td, #linesOut th { padding: 7px 14px; }
#linesOut td:nth-last-child(-n+2).num, #linesOut th.num { white-space: nowrap; }
#linesOut:not(.editing) td:has(> .ing-link) { min-width: 200px; }
.proc-table td, .proc-table th { padding: 8px 12px; }
@media (max-width: 700px) {
  #linesOut td, #linesOut th { padding: 6px 8px; }
  table.m-cards, .proc-table { border: 0; }
  #linesOut.editing table { border: 0; }
}
.proc-table th { white-space: nowrap; }
@media (max-width: 700px) { #linesOut:not(.editing) td:has(> .ing-link) { min-width: 0; } #linesOut:not(.editing) th { white-space: normal; word-break: keep-all; } }
.cat-sel { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; color: var(--muted); }
.cat-sel select { height: 30px; font-size: 13px; padding: 2px 6px; border-radius: 6px; }
#linesOut.editing tr.cchg .cat-sel select { border: 2px solid #d39b00; background: #fffbea; }
#linesOut.editing .nm { font-weight: 600; }
tr.ing-other td { opacity: .55; }
.ing-pcat { height: 30px; font-size: 13px; }

/* 비교하기 */
.edit-cta-btns { display: flex; gap: 10px; flex: none; flex-wrap: wrap; }
.edit-cta-btn.ghost-btn { background: #fff; color: var(--accent); border: 2px solid var(--accent); box-shadow: none; }
.edit-cta-btn.ghost-btn.on { background: #f5eff6; }
.edit-cta-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.cmp { margin: 0 0 14px; border: 2px solid var(--accent); }
.cmp-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.cmp-head b { font-size: 16px; }
.cmp-pick { display: flex; align-items: center; gap: 8px; }
.cmp-cur { font-weight: 700; color: var(--accent); }
#cmpWith { height: 34px; font-size: 14px; }
#cmpClose { margin-left: auto; border: 0; background: none; font-size: 16px; color: var(--muted); }
@media (max-width: 700px) { .edit-cta-btns { width: 100%; } .edit-cta-btns .edit-cta-btn { flex: 1; justify-content: center; } }

/* ---------- 수정완료 바: 화면에 떠 있게 (스크롤해도 오른쪽 아래, 니카 버튼 위에 항상 보임) ---------- */
.edit-bar { position: fixed; right: 20px; bottom: 88px; left: auto; z-index: 18; width: 300px; margin: 0; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border: 2px solid var(--accent); border-radius: 14px; box-shadow: 0 12px 32px #00000033; }
.edit-bar-status { width: 100%; flex: none; flex-direction: row; flex-wrap: wrap; gap: 2px 10px; font-size: 13px; }
.edit-bar-cancel { order: 1; flex: 1; padding: 10px 8px; font-size: 14px; }
.edit-bar-save { order: 2; flex: 2.4; padding: 10px 8px; font-size: 15px; }
body.nika-open .edit-bar { right: 440px; } /* 니카 창이 열려 있으면 그 왼쪽에 */
@media (max-width: 1100px) { body.nika-open .edit-bar { display: none; } }
body:has(.edit-bar) main { padding-bottom: 260px; }
@media (max-width: 700px) {
  .edit-bar { left: 8px; right: 8px; bottom: 74px; width: auto; padding: 10px; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .edit-bar-status { flex-direction: row; flex-wrap: wrap; gap: 2px 10px; width: 100%; font-size: 13px; }
  .edit-bar-save { order: 2; flex: 2; width: auto; padding: 12px; }
  .edit-bar-cancel { order: 1; flex: 1; width: auto; padding: 12px; }
  body.nika-open .edit-bar { display: none; }
}
.edit-bar-save { white-space: nowrap; }

/* ---------- 새 프로젝트 ---------- */
.np { margin-bottom: 14px; }
.np h3 { display: flex; align-items: baseline; gap: 10px; }
.np-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
#npTpl { min-width: 280px; max-width: 100%; height: 36px; }
.np-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 14px; }
.np-grid label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.np-grid label.wide { grid-column: span 2; }
.np-grid input { height: 36px; font-size: 15px; color: var(--ink); }
.np-calc { align-self: end; padding: 8px 0; }
.np-lines { display: grid; gap: 4px; margin-bottom: 10px; }
.np-line { display: grid; grid-template-columns: 40px 120px minmax(160px, 2fr) minmax(100px, 1fr) 100px 80px 100px auto; gap: 6px; align-items: center; padding: 5px 6px; border-radius: 8px; border: 1px solid var(--line); background: linear-gradient(90deg, var(--cat, transparent) 0 6px, #fff 6px); }
.np-line input, .np-line select { height: 34px; font-size: 14px; min-width: 0; }
.np-line input[type=number] { text-align: right; }
.np-head { background: #f0efeb; font-size: 12px; font-weight: 600; color: var(--muted); border: 0; }
.np-seq { text-align: center; font-weight: 700; color: var(--accent); }
.np-amt { text-align: right; font-variant-numeric: tabular-nums; }
.np-tools { display: flex; gap: 4px; justify-content: flex-end; }
.np-step { display: grid; grid-template-columns: 30px minmax(0, 1fr) minmax(160px, 260px) auto; gap: 8px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--line); }
.np-step .step-no { font-weight: 700; color: var(--accent); font-size: 16px; text-align: center; }
.np-step textarea { width: 100%; font: inherit; font-size: 15px; padding: 8px; border: 2px solid #c9c7c0; border-radius: 8px; resize: vertical; }
.ok-text { color: var(--accent); } .warn-text { color: #b00020; }
.np-bar { width: 300px; }
.np-bar .edit-bar-save { flex: 1; }
.np-f { display: block; min-width: 0; } .np-f input { width: 100%; } .np-l { display: none; }
@media (max-width: 900px) {
  .np-line { grid-template-columns: 30px 1fr 1fr; grid-template-areas: "seq cat tools" "seq name name" "seq cas cas" "seq pct sg" "seq amt amt"; padding: 10px 8px 10px 12px; }
  .np-line .np-seq { grid-area: seq; align-self: start; padding-top: 8px; }
  .np-line select { grid-area: cat; } .np-line [data-k="name"] { grid-area: name; } .np-line [data-k="cas"] { grid-area: cas; }
  .np-line .np-pct { grid-area: pct; } .np-line .np-sg { grid-area: sg; } .np-line .np-amtw { grid-area: amt; display: flex; justify-content: space-between; align-items: center; }
  .np-line .np-tools { grid-area: tools; }
  .np-l { display: block; font-size: 12px; color: var(--muted); margin-bottom: 2px; }
  .np-amtw .np-l { margin: 0; }
  .np-head { display: none; }
  .np-step { grid-template-columns: 26px minmax(0, 1fr); }
  .np-step .np-chips, .np-step .np-tools { grid-column: 2; }
  .np-grid label.wide { grid-column: auto; }
  .np-bar { width: auto; }
}

/* ---------- 차수별 코멘트 (레시피 표 옆) ---------- */
.recipe-row { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.recipe-row > #linesOut { flex: 0 1 auto; max-width: 100%; }
.cmt { flex: 1 1 320px; max-width: 520px; padding: 14px; position: sticky; top: 64px; }
#linesOut.editing + .cmt { flex-basis: 100%; max-width: none; position: static; } /* 수정 중에는 표 아래로 */
.cmt h3 { font-size: 16px; display: flex; gap: 8px; align-items: baseline; }
.cmt-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; max-height: 420px; overflow-y: auto; }
.cmt-item { padding: 8px 10px; border-radius: 10px; background: #f8f4f9; border: 1px solid #ebe1ee; }
.cmt-item.del { background: none; border-style: dashed; font-size: 12px; }
.cmt-meta { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.cmt-act { margin-left: auto; display: flex; gap: 2px; }
.link-btn.danger { color: #b00020; }
.cmt-body { margin-top: 4px; white-space: pre-wrap; word-break: break-word; line-height: 1.55; }
.cmt-body textarea, .cmt-form textarea { width: 100%; font: inherit; font-size: 14px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; resize: vertical; }
.cmt-form-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px; font-size: 12px; }
.cmt-empty { font-size: 13px; padding: 4px 0; }
.step-cmt { margin-top: 4px; font-size: 12px; color: var(--accent); font-weight: 600; }
@media (max-width: 700px) { .cmt { max-width: none; position: static; } .cmt-list { max-height: none; } }

/* ---------- 메뉴 개편: 상단 · 첫 화면 4개 큰 메뉴 · 세부 메뉴 ---------- */
.top { justify-content: flex-start; }
.brand { display: flex; flex-direction: column; line-height: 1.1; text-decoration: none; color: var(--accent); padding-right: 14px; border-right: 1px solid var(--line); }
.brand b { font-size: 17px; } .brand span { font-size: 11px; color: var(--muted); }
.crumbs { flex: 1; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; min-width: 0; }
.crumbs a { color: var(--muted); text-decoration: none; } .crumbs a:hover { color: var(--accent); text-decoration: underline; }
.crumbs [aria-current] { font-weight: 700; color: var(--ink); }
.crumbs .sep { color: #b9b5ad; }
.hub { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 1100px; margin: 3vh auto; }
.hub-card, .sub-card { display: flex; flex-direction: column; gap: 8px; padding: 28px 26px; background: #fff; border: 2px solid var(--line); border-radius: 18px; text-decoration: none; color: var(--ink); transition: border-color .15s, box-shadow .15s, transform .15s; }
.hub-card { min-height: 200px; }
.hub-card:hover, .sub-card:hover { border-color: var(--accent); box-shadow: 0 10px 28px #89589624; transform: translateY(-2px); }
.hub-icon { font-size: 34px; }
.hub-title { font-size: 24px; font-weight: 800; color: var(--accent); } .hub-title small, .sub-title small { font-size: 15px; font-weight: 600; color: var(--muted); }
.sub-title { font-size: 20px; font-weight: 800; color: var(--accent); }
.hub-sub { color: var(--muted); font-size: 14px; line-height: 1.5; }
.hub-stat { margin-top: auto; font-size: 14px; font-weight: 600; }
.hub-alert { align-self: flex-start; padding: 3px 10px; border-radius: 999px; background: #fdecec; color: #b00020; font-size: 13px; font-weight: 700; }
.sub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; max-width: 1100px; margin: 14px 0; }
.sub-card { min-height: 170px; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.btn.sm { padding: 5px 10px; font-size: 13px; }
/* 단계 표시 */
.stage-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #eee; color: #555; white-space: nowrap; vertical-align: middle; }
.stage-pill.st-sampling { background: #fff0d6; color: #8a5a00; }
.stage-pill.st-confirmed { background: #efe5f1; color: var(--accent); }
.stage-pill.st-recent { background: #e6f4ea; color: #2c6b3c; }
.stage-pill.st-archived { background: #e9e9e9; color: #555; }
.stage-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; margin: 6px 0 12px; border-radius: 12px; background: #fffaf0; border: 1px solid #f0d58c; }
.stage-bar.st-confirmed { background: #f8f4f9; border-color: #d9c4de; }
.stage-bar.st-recent, .stage-bar.st-archived { background: #f3f9f4; border-color: #bfe0c8; }
/* 제조 요청 카드 */
.req-list { display: grid; gap: 10px; }
.req { padding: 12px 14px; }
.req-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; }
.req-meta { margin-top: 4px; font-size: 14px; }
.req-act { margin-top: 8px; }
.req-form .np-grid { margin-top: 8px; }
/* 원료 표 옆에 공정확인, 코멘트는 아래 */
.recipe-row { gap: 18px; }
.recipe-row > #procOut { flex: 1 1 320px; min-width: 0; }
.recipe-row > #procOut .proc-table .step-chips { min-width: 120px; }
.recipe-row { flex-wrap: nowrap; }
#linesOut.editing { flex: 0 1 auto; }
@media (max-width: 980px) { .recipe-row { flex-wrap: wrap; } }
body:has(#linesOut.editing) .recipe-row { flex-wrap: wrap; } /* 수정 중에는 표가 넓어 공정은 아래로 */
.recipe-row > #procOut .section { margin-top: 0; }
.cmt { position: static; max-width: 820px; flex: none; margin-top: 14px; }
@media (max-width: 700px) {
  .hub { grid-template-columns: 1fr; gap: 12px; margin: 8px 0; }
  .hub-card { min-height: 0; padding: 18px; } .hub-title { font-size: 20px; } .hub-icon { font-size: 26px; }
  .sub-card { min-height: 0; padding: 18px; }
  .brand { border: 0; padding: 0; }
  .crumbs { width: 100%; font-size: 13px; order: 3; }
}

/* 니카 분할 요청 · 분할 지시서 · 용량 단위 */
.nika-task { padding: 8px 12px; background: #f3edf5; border-bottom: 1px solid var(--line); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.nika-task .btn { margin-left: auto; }
.msg-act { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.req-batches { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.req-batches .batch { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.unit-in { display: flex; gap: 6px; }
.unit-in input { flex: 1; min-width: 0; }
.unit-in select { width: auto; }

/* 품목 구분 · 제조 요청 표 */
.np-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
.np-tabs button { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 14px; font-weight: 600; color: var(--muted); }
.np-tabs button.on { background: var(--accent, #895896); border-color: var(--accent, #895896); color: #fff; }
.item-type-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 6px; font-size: 14px; }
.item-type-row select { width: auto; }
.req-table td { vertical-align: middle; }
.req-table tr.req-sub td { background: #faf7fb; padding-top: 6px; padding-bottom: 8px; }
.req-table tr.req-sub .batch { display: inline-flex; gap: 6px; align-items: center; margin: 2px 14px 2px 0; white-space: nowrap; }
.req-table .batch-title { margin-right: 10px; }
.req-table th { white-space: nowrap; }
.req-table td.m-full:nth-child(2) { min-width: 170px; }
.req-ops { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.req-ops .btn { justify-content: center; white-space: nowrap; }
@media (max-width: 760px) { .req-ops { flex-direction: row; flex-wrap: wrap; } .req-table .batch-title { display: none; } }
@media (max-width: 760px) { .req-table tr.req-sub { margin-top: -8px; background: #faf7fb; } .req-table tr.req-sub td { background: none; } }

/* 감사 로그 (한글) */
.audit-filter { gap: 8px; margin: 6px 0 10px; flex-wrap: wrap; }
.audit-filter input { flex: 1 1 260px; }
.audit-filter select { width: auto; }
.audit-act { display: inline-block; padding: 2px 8px; border-radius: 999px; background: #f3edf5; font-size: 13px; font-weight: 600; }
.audit-act.a-download { background: #e8f0fb; } .audit-act.a-download_denied, .audit-act.a-login_failed, .audit-act.a-audit_denied, .audit-act.a-password_change_failed { background: #fdecec; color: #a02020; }
.audit-act.a-view { background: #f2f2f0; color: var(--muted); font-weight: 500; }
.audit-table tr[hidden] { display: none !important; }