/* FIM 관리 webClient — 재설계(2026-10). docs/fim_ui_mockup.html 기반 */
:root{
    --bg:#0e1626; --bg2:#0b1120; --card:#17233a; --card2:#1f2e49; --line:#2c3b57;
    --accent:#38bdf8; --accent2:#34d399; --warn:#fbbf24; --danger:#f87171; --purple:#c084fc;
    --text:#e6edf6; --muted:#93a3ba; --chip:#0b2234;
  }
  *{box-sizing:border-box;}
  body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans KR",sans-serif;
    background:linear-gradient(160deg,#0e1626,#0b1120);color:var(--text);line-height:1.6;}
  .wrap{max-width:1180px;margin:0 auto;padding:22px 20px 70px;}
  header.top{text-align:center;padding:14px 0 6px;}
  header.top h1{font-size:1.55rem;margin:0 0 4px;}
  header.top p{color:var(--muted);margin:2px 0;font-size:.9rem;}
  .mockbadge{display:inline-block;background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.45);
    color:var(--warn);padding:3px 12px;border-radius:999px;font-size:.78rem;margin-top:8px;}

  /* 전역 스코프 바 (메뉴버튼 위) */
  .scopebar{background:linear-gradient(100deg,#13203a,#172a46);border:1px solid var(--line);
    border-radius:16px;padding:16px 18px;margin:18px 0 14px;display:grid;
    grid-template-columns:1.2fr 1.2fr 1.6fr auto;gap:14px;align-items:end;}
  .scopebar .fld label{display:block;font-size:.76rem;color:var(--accent);font-weight:700;margin-bottom:5px;letter-spacing:.3px;}
  .scopebar .hint{font-size:.68rem;color:var(--muted);font-weight:400;}
  select,input[type=text],input[type=number],input[type=date]{
    width:100%;background:var(--bg2);border:1px solid var(--line);color:var(--text);
    border-radius:9px;padding:9px 11px;font-size:.9rem;font-family:inherit;}
  select:focus,input:focus{outline:none;border-color:var(--accent);}
  .multi{background:var(--bg2);border:1px solid var(--line);border-radius:9px;padding:7px;display:flex;flex-wrap:wrap;gap:6px;min-height:42px;}
  .tag{background:var(--chip);border:1px solid var(--accent);color:#bfe6ff;border-radius:7px;padding:3px 9px;font-size:.82rem;display:inline-flex;align-items:center;gap:6px;}
  .tag.off{border-color:var(--line);color:var(--muted);background:transparent;cursor:pointer;}
  .tag b{font-weight:700;}
  .scopebtn{background:var(--accent);color:#06263a;border:none;border-radius:10px;padding:10px 18px;font-weight:800;cursor:pointer;font-size:.9rem;white-space:nowrap;}

  /* 탭 메뉴 */
  .tabs{display:flex;gap:8px;margin:6px 0 16px;flex-wrap:wrap;}
  .tab{background:var(--card);border:1px solid var(--line);color:var(--muted);border-radius:12px 12px 0 0;
    padding:12px 20px;font-size:.98rem;font-weight:700;cursor:pointer;border-bottom:3px solid transparent;transition:.15s;}
  .tab:hover{color:var(--text);}
  .tab.active{color:var(--text);background:var(--card2);border-bottom-color:var(--accent);}
  .tab .sub{display:block;font-size:.68rem;color:var(--muted);font-weight:400;margin-top:2px;}
  .tab.active .sub{color:var(--accent);}

  .panel{display:none;animation:fade .2s;}
  .panel.active{display:block;}
  @keyframes fade{from{opacity:0;transform:translateY(4px);}to{opacity:1;}}

  .card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin-bottom:16px;}
  .card h3{margin:0 0 4px;font-size:1.08rem;display:flex;align-items:center;gap:8px;}
  .card .desc{color:var(--muted);font-size:.86rem;margin:0 0 14px;}
  .cols{display:grid;grid-template-columns:2fr 1fr;gap:16px;}
  @media(max-width:860px){.cols{grid-template-columns:1fr;}.scopebar{grid-template-columns:1fr 1fr;}}

  /* 평가 — 절차 흐름 스테퍼 */
  .stepper{position:relative;padding-left:8px;}
  .step{position:relative;padding:0 0 4px 34px;margin-bottom:12px;}
  .step::before{content:attr(data-n);position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;
    background:var(--chip);border:1px solid var(--accent);color:var(--accent);font-size:.78rem;font-weight:800;
    display:flex;align-items:center;justify-content:center;}
  .step::after{content:"";position:absolute;left:11.5px;top:24px;bottom:-12px;width:1.5px;background:var(--line);}
  .step:last-child::after{display:none;}
  .step .st-h{font-weight:700;font-size:.93rem;}
  .step .st-d{color:var(--muted);font-size:.8rem;margin:1px 0 6px;}
  .vchips{display:flex;flex-wrap:wrap;gap:6px;}
  .vchip{background:var(--bg2);border:1px solid var(--line);border-radius:7px;padding:3px 9px;font-size:.8rem;}
  .vchip b{color:var(--accent2);}
  .vchip.in{border-color:rgba(56,189,248,.5);}
  .vchip.out{border-color:rgba(248,113,113,.5);} .vchip.out b{color:var(--danger);}
  .step.final::before{background:var(--accent2);border-color:var(--accent2);color:#06281c;}
  .finalbox{background:linear-gradient(100deg,rgba(52,211,153,.12),rgba(56,189,248,.08));
    border:1px solid rgba(52,211,153,.5);border-radius:12px;padding:14px 16px;margin-top:4px;}
  .finalbox .big{font-size:1.5rem;font-weight:800;color:var(--accent2);}
  .finalbox .big span{font-size:.95rem;color:var(--muted);font-weight:500;}

  /* 설정값 패널 */
  .side h4{margin:0 0 8px;font-size:.9rem;color:var(--purple);}
  table{width:100%;border-collapse:collapse;font-size:.85rem;}
  th,td{border:1px solid var(--line);padding:7px 10px;text-align:left;}
  th{background:var(--card2);color:var(--muted);font-weight:700;font-size:.8rem;}
  td.k{color:var(--muted);width:46%;} td.v{color:var(--text);font-weight:600;}
  .kv-amber td.v{color:var(--warn);}

  /* 검증(정합성) */
  .valid-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
  @media(max-width:700px){.valid-grid{grid-template-columns:repeat(2,1fr);}.cols,.valid-grid{}}
  .kpi{background:var(--bg2);border:1px solid var(--line);border-radius:11px;padding:12px;text-align:center;}
  .kpi .n{font-size:1.25rem;font-weight:800;}
  .kpi .l{font-size:.72rem;color:var(--muted);margin-top:2px;}
  .pill{display:inline-block;border-radius:999px;padding:2px 10px;font-size:.78rem;font-weight:700;}
  .pill.ok{background:rgba(52,211,153,.15);color:var(--accent2);border:1px solid rgba(52,211,153,.5);}
  .pill.warn{background:rgba(251,191,36,.15);color:var(--warn);border:1px solid rgba(251,191,36,.5);}

  /* silo 등록 폼 — 항목/값 */
  .ctxrow{background:var(--bg2);border:1px dashed var(--line);border-radius:10px;padding:10px 14px;margin-bottom:12px;
    font-size:.86rem;color:var(--muted);}
  .ctxrow b{color:var(--accent);}
  .formtab th{width:auto;} .formtab td.k{width:38%;font-weight:600;color:#cbd5e1;}
  .formtab input,.formtab select{max-width:260px;}
  .unit{color:var(--muted);font-size:.8rem;margin-left:6px;}
  .ro{background:transparent !important;border-color:transparent !important;color:var(--accent2) !important;font-weight:700;}
  .mapbox{height:150px;border:1px solid var(--line);border-radius:10px;background:
    repeating-linear-gradient(0deg,#10203a,#10203a 18px,#13243f 18px,#13243f 36px),
    repeating-linear-gradient(90deg,transparent,transparent 18px,rgba(255,255,255,.03) 18px,rgba(255,255,255,.03) 36px);
    position:relative;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.82rem;}
  .mapbox .pin{position:absolute;left:52%;top:46%;color:var(--danger);font-size:1.6rem;}
  .btnrow{display:flex;gap:10px;margin-top:14px;}
  .btn{border:none;border-radius:10px;padding:10px 20px;font-weight:800;cursor:pointer;font-size:.9rem;}
  .btn.primary{background:var(--accent2);color:#06281c;}
  .btn.ghost{background:transparent;border:1px solid var(--line);color:var(--muted);}
  .note{border-radius:10px;padding:11px 14px;margin:12px 0;font-size:.85rem;border:1px solid;}
  .note.tip{background:rgba(52,211,153,.08);border-color:rgba(52,211,153,.4);}
  .note.warn{background:rgba(251,191,36,.08);border-color:rgba(251,191,36,.4);}
  .note.info{background:rgba(56,189,248,.08);border-color:rgba(56,189,248,.4);}
  .src{font-size:.72rem;color:var(--accent);background:var(--chip);border:1px solid var(--line);border-radius:6px;padding:1px 7px;margin-left:6px;}
  footer{text-align:center;color:var(--muted);font-size:.8rem;margin-top:26px;}