/* 생산 키오스크 체험판 · 우정소프트웨어 (공개 데모) */
:root {
  --navy: #1e2547;
  --brand: #4f46e5;
  --line: #dfe2ea;
  --bg: #f4f5f8;
  --ink: #1a1d29;
  --mute: #6b7186;
  --good: #16a34a;
  --warn: #d97706;
  --bad: #dc2626;
  --rest: #fff8c9;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Malgun Gothic", "맑은 고딕", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--brand); }

/* ── 맨 위: 이게 무슨 화면인지 ── */
.top {
  background: var(--navy); color: #fff; padding: 12px 16px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.topTitle { font-size: 19px; font-weight: 800; display: block; }
.topTitle em {
  font-style: normal; font-size: 11px; background: #4f46e5; border-radius: 99px;
  padding: 3px 9px; margin-left: 6px; vertical-align: middle; font-weight: 700;
}
.topDesc { font-size: 13px; color: #b9c0dc; display: block; margin-top: 3px; }
.topHome { margin-left: auto; color: #b9c0dc; font-size: 13px; text-decoration: none; font-weight: 700; }
.topHome:hover { color: #fff; }

/* ── 현황판 ── */
.board {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: #dfe2ea; border-bottom: 1px solid var(--line);
}
.boardItem { background: #fff; padding: 8px 12px; }
.bk { display: block; font-size: 11px; color: var(--mute); font-weight: 700; }
.bv { display: block; font-size: 15px; font-weight: 800; margin-top: 2px; }

.machineRow { display: flex; gap: 6px; padding: 10px 16px 0; flex-wrap: wrap; }
.machineBtn {
  background: #fff; border: 1.5px solid var(--line); border-radius: 9px;
  padding: 7px 14px; font-size: 14px; font-weight: 800; cursor: pointer;
  font-family: inherit; color: var(--navy); line-height: 1.25;
}
.machineBtn .mJob { display: block; font-size: 11px; font-weight: 500; color: var(--mute); }
.machineBtn.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.machineBtn.on .mJob { color: #b9c0dc; }

/* ── 탭 ── */
.tabs { display: flex; gap: 6px; padding: 12px 16px 0; flex-wrap: wrap; }
.tabBtn {
  background: #fff; border: 1.5px solid var(--line); border-bottom: 0;
  border-radius: 10px 10px 0 0; padding: 11px 18px;
  font-size: 15px; font-weight: 800; color: var(--mute); cursor: pointer; font-family: inherit;
}
.tabBtn.on { background: var(--brand); border-color: var(--brand); color: #fff; }

.page { display: none; padding: 0 16px 16px; }
.page.on { display: block; }

.howto {
  background: #eef0ff; border: 1.5px solid #c9cdf5; border-radius: 0 10px 10px 10px;
  padding: 12px 15px; font-size: 14px; line-height: 1.75; margin: 0 0 12px;
}

.twoCol { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.cardH { font-size: 15px; font-weight: 800; color: var(--navy); margin: 0 0 10px; }
.cardH.mt { margin-top: 18px; }
.cardSub { font-weight: 500; font-size: 12px; color: var(--mute); margin-left: 6px; }

/* ── 시간별 줄 ── */
.rows { display: flex; flex-direction: column; gap: 5px; }
.row {
  display: grid; grid-template-columns: 118px 78px 1fr 22px;
  align-items: center; gap: 8px; width: 100%;
  background: #fff; border: 1.5px solid var(--line); border-radius: 10px;
  padding: 11px 12px; cursor: pointer; font-family: inherit; font-size: 14px; text-align: left;
}
.row:hover { border-color: #b9bff0; }
.row.picked { border-color: var(--brand); background: #f3f4ff; box-shadow: 0 0 0 2px #dfe1fb; }
.row.lunch { background: var(--rest); border-color: #ecd97a; }
.row.lunch.picked { background: #f6ebc0; }
.rowTime { font-weight: 800; font-variant-numeric: tabular-nums; }
.rowMade { font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
.rowMade i, .rowStop i { font-style: normal; color: #a8aec1; font-weight: 500; }
.rowStop { color: var(--mute); font-size: 13px; }
.rowStop b { color: var(--ink); }
.rowMark { color: var(--good); font-weight: 900; text-align: center; }

/* ── 입력판 ── */
.pickHint {
  background: #eef0ff; color: var(--brand); border: 1.5px solid #c9cdf5;
  border-radius: 9px; padding: 10px 12px; font-size: 14px; font-weight: 800; margin-bottom: 12px;
}
.pickHint.off { background: #f2f3f7; color: var(--mute); border-color: var(--line); }
.pickHint.blink { animation: bk .6s; }
@keyframes bk { 0%, 100% { background: #eef0ff; } 50% { background: #ffe0e0; color: var(--bad); border-color: #f0a9a9; } }

#padBody.dim { opacity: .4; pointer-events: none; }

.madeNow { text-align: center; margin: 4px 0 10px; }
.madeNow span { font-size: 44px; font-weight: 900; color: var(--navy); font-variant-numeric: tabular-nums; }
.madeNow i { font-style: normal; font-size: 17px; color: var(--mute); font-weight: 700; margin-left: 4px; }

.qtyGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.qtyBtn {
  background: var(--brand); color: #fff; border: 0; border-radius: 10px; padding: 15px 0;
  font-size: 17px; font-weight: 800; cursor: pointer; font-family: inherit;
}
.qtyBtn.minus { background: #eceef5; color: var(--navy); }
.qtyBtn.clear { background: #fff; color: var(--mute); border: 1.5px solid var(--line); }

.stopPad { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.stopBtn {
  background: #fff; border: 1.5px solid var(--line); border-radius: 10px;
  padding: 14px 8px; font-size: 14px; font-weight: 700; color: var(--navy);
  cursor: pointer; font-family: inherit;
}
.stopBtn.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.stopBtn.restBtn { background: var(--rest); border-color: #ecd97a; }
.stopBtn.restBtn.on { background: #bfa63c; border-color: #bfa63c; color: #fff; }

.minRow { display: flex; align-items: center; gap: 9px; margin-top: 12px; }
.minRow label { font-size: 13px; font-weight: 700; color: var(--mute); }
.minRow input {
  width: 90px; border: 1.5px solid var(--line); border-radius: 9px; padding: 10px;
  font-size: 17px; font-weight: 800; text-align: right; font-family: inherit;
}

.btnRow { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.ghost {
  background: #fff; border: 1.5px solid var(--line); border-radius: 9px; padding: 11px 16px;
  font-size: 14px; font-weight: 700; color: var(--navy); cursor: pointer; font-family: inherit;
}

/* ── 아래 요약 띠 ── */
.sumBar {
  position: sticky; bottom: 0; margin-top: 12px; display: flex; align-items: stretch;
  background: var(--navy); border-radius: 12px; overflow: hidden;
}
.sumCell { flex: 1; padding: 10px 8px; text-align: center; border-right: 1px solid rgba(255,255,255,.14); }
.sk { display: block; font-size: 11px; color: #b9c0dc; font-weight: 700; }
.bigVal { display: block; font-size: 19px; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; }
.bigVal.good { color: #6ee7a8; } .bigVal.warn { color: #fcd34d; } .bigVal.bad { color: #fca5a5; }
.sumGo {
  background: var(--brand); color: #fff; border: 0; padding: 0 22px;
  font-size: 15px; font-weight: 800; cursor: pointer; font-family: inherit;
}

/* ── 결과 ── */
.oeeBig { font-size: 60px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.oeeBig.good { color: var(--good); } .oeeBig.warn { color: var(--warn); } .oeeBig.bad { color: var(--bad); }
.bar { height: 13px; background: #eceef5; border-radius: 99px; overflow: hidden; margin: 12px 0 7px; }
.barFill { height: 100%; border-radius: 99px; transition: width .35s; }
.barFill.good { background: var(--good); } .barFill.warn { background: var(--warn); } .barFill.bad { background: var(--bad); }
.oeeVs { font-size: 14px; color: var(--mute); font-weight: 700; }

.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.tBox { background: #f7f8fc; border: 1px solid var(--line); border-radius: 10px; padding: 11px; text-align: center; }
.tk { display: block; font-size: 12px; color: var(--mute); font-weight: 800; }
.tv { display: block; font-size: 23px; font-weight: 900; color: var(--navy); font-variant-numeric: tabular-nums; }
.tn { display: block; font-size: 11px; color: var(--mute); margin-top: 4px; line-height: 1.45; }

.formula {
  background: #eef0f6; border-radius: 9px; padding: 10px; text-align: center;
  font-size: 14px; font-weight: 800; color: var(--navy); margin: 14px 0 0;
}

.defGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.defItem {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border: 1.5px solid var(--line); border-radius: 10px; padding: 9px 12px;
  font-size: 14px; font-weight: 700;
}
.defItem input {
  width: 86px; border: 0; border-bottom: 2px solid var(--line); padding: 5px;
  font-size: 16px; font-weight: 800; text-align: right; font-family: inherit;
}

.calc { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.calc td { border-bottom: 1px solid #eef0f5; padding: 8px 6px; }
.calc td.v { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc td.n { color: var(--mute); font-size: 12px; }

.note { font-size: 13px; color: var(--mute); line-height: 1.75; margin-top: 12px; }
.note.mt0 { margin-top: 0; }

/* ── 카카오톡 ── */
.phone { background: #b2c7d9; border-radius: 12px; overflow: hidden; max-width: 420px; }
.phoneBar { background: #a1b8cc; padding: 10px 13px; font-size: 14px; font-weight: 800; color: #3c1e1e; }
.phoneBody { padding: 13px; min-height: 300px; }
.phoneDay {
  text-align: center; font-size: 11px; color: #47586a; background: rgba(0,0,0,.08);
  border-radius: 99px; padding: 3px 11px; width: fit-content; margin: 0 auto 13px;
}
.phoneLine { display: flex; gap: 8px; align-items: flex-start; }
.phoneIcon {
  width: 35px; height: 35px; border-radius: 11px; background: var(--navy); color: #fff;
  font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.phoneWho { font-size: 12px; color: #33414d; margin-bottom: 4px; font-weight: 600; }
.bubble {
  background: #fff; border-radius: 4px 14px 14px 14px; padding: 11px 13px;
  font-size: 13px; line-height: 1.7; white-space: pre-wrap; box-shadow: 0 1px 2px rgba(0,0,0,.12);
  max-width: 330px;
}

.kakaoBtn {
  background: #fee500; color: #3c1e1e; border: 0; border-radius: 10px;
  padding: 14px 24px; font-size: 16px; font-weight: 800; cursor: pointer; font-family: inherit;
}
.kkOut {
  margin-top: 10px; background: #f2f3f7; border-radius: 9px; padding: 10px 12px;
  font-size: 13px; color: var(--mute); font-weight: 700; line-height: 1.65;
}
.kkOut.ok { background: #e7f7ee; color: #14663a; }

.bullets { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.85; color: var(--ink); }
.bullets li { margin-bottom: 5px; }

.foot {
  background: #fff; border-top: 1px solid var(--line); padding: 14px 16px;
  font-size: 12.5px; color: var(--mute); text-align: center; line-height: 1.8;
}

@media (max-width: 860px) {
  .twoCol { grid-template-columns: 1fr; }
  .board { grid-template-columns: repeat(3, 1fr); }
  .row { grid-template-columns: 100px 68px 1fr 20px; font-size: 13px; }
  .oeeBig { font-size: 48px; }
  .sumBar { flex-wrap: wrap; }
  .sumGo { width: 100%; padding: 12px 0; }
}

/* 수량 직접 입력 */
.madeInput { display: flex; align-items: baseline; gap: 8px; justify-content: center; margin: 6px 0 4px; }
.madeInput input {
  width: 190px; border: 0; border-bottom: 3px solid var(--brand); background: transparent;
  font-size: 40px; font-weight: 900; color: var(--navy); text-align: right;
  font-family: inherit; padding: 2px 6px; font-variant-numeric: tabular-nums;
}
.madeInput span { font-size: 17px; font-weight: 700; color: var(--mute); }
.tinyNote { font-size: 12px; color: var(--mute); text-align: center; margin: 0 0 10px; }

/* 종합효율 뜻풀이 */
.plain {
  background: #f7f8fc; border-left: 3px solid var(--brand); border-radius: 0 9px 9px 0;
  padding: 10px 13px; font-size: 14px; line-height: 1.7; color: var(--ink); margin: 12px 0 0;
}

.board .bv em { font-style: normal; font-weight: 600; color: var(--mute); font-size: 13px; }
.topDesc b { color: #fff; }
@media (max-width: 860px) { .board { grid-template-columns: repeat(2, 1fr); } }

/* 위험한 버튼은 떨어뜨려 두고 색으로 구분합니다. 태블릿 오터치 방지 */
.btnGap { flex: 1; min-width: 20px; }
.ghost.danger { color: var(--bad); border-color: #f0c4c4; }
.ghost.danger:hover { background: #fff5f5; }