/* MIDAS 데이터셋 생성기 — 공통 스타일 (Linear 스타일 다크 네이비)
   ⚠️ 색은 전부 :root 변수로만 관리한다. 개별 규칙에 색을 하드코딩하지 말 것.
   ⚠️ 반응형 미디어쿼리는 반드시 기본 선언보다 *뒤*에 둔다(동일 특이도 → 나중 선언 우선).
   공정 선택(select.html)과 3개 생성기 폼이 이 파일 하나를 공유한다. */

:root {
  /* ── 다크 네이비 팔레트 (Linear/Vercel 계열: 저채도 배경 + 고대비 텍스트) ── */
  --bg:#0A1220;           /* 페이지 배경 */
  --bg-sidebar:#080F1B;   /* 사이드바(가장 어둡게) */
  --surface:#111C2E;      /* 카드 표면 */
  --surface-2:#0D1727;    /* 입력창 배경 */
  --surface-3:#16233A;    /* hover 표면 */
  --line:#1E2D45;         /* 기본 경계선 */
  --line-2:#2A3C58;       /* 강조 경계선 */
  --ink:#EAF1FA;          /* 기본 텍스트 (대비 15:1) */
  --ink-dim:#9FB2CC;      /* 보조 텍스트 (대비 7.7:1) */
  --ink-faint:#6E829E;    /* placeholder */
  --pri:#7AA2F7;          /* 강조색 — 텍스트/아이콘용 (대비 8.2:1) */
  --pri-solid:#3B6FE0;    /* 채움 버튼 배경 (흰 글씨 대비 5.4:1) */
  --pri-soft:rgba(122,162,247,.13);
  --ok:#5FD9A0; --err:#FF9A92;
  --radius:10px;
  --sidebar-w:212px;
}
* { box-sizing: border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:-apple-system,"Segoe UI",Roboto,"Malgun Gothic",sans-serif;
       background:var(--bg); color:var(--ink); font-size:14px; line-height:1.5;
       -webkit-font-smoothing:antialiased; }

/* ── 앱 셸: 좁은 사이드바 + 넓은 콘텐츠 ── */
.app { display:grid; grid-template-columns:var(--sidebar-w) minmax(0,1fr); min-height:100vh; }

.sidebar { background:var(--bg-sidebar); border-right:1px solid var(--line);
           padding:18px 12px; position:sticky; top:0; height:100vh; overflow-y:auto; }
.brand { display:flex; align-items:center; gap:9px; padding:0 8px 16px; }
.brand-mark { width:26px; height:26px; border-radius:7px; flex:none;
              background:linear-gradient(135deg,#4C7DF0,#7AA2F7);
              display:grid; place-items:center; font-size:12px; font-weight:800; color:#08121F; }
.brand-name { font-size:13px; font-weight:650; letter-spacing:-.01em; }
.brand-sub { font-size:10.5px; color:var(--ink-faint); margin-top:1px; }
.nav-label { font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
             color:var(--ink-faint); padding:14px 8px 6px; }
.nav a { display:flex; align-items:center; gap:8px; padding:6.5px 9px; border-radius:7px;
         font-size:12.5px; color:var(--ink-dim); text-decoration:none; }
.nav a:hover { background:var(--surface-3); color:var(--ink); }
.nav a.on { background:var(--pri-soft); color:var(--pri); font-weight:600; }
.nav a .dot { width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.55; flex:none; }

.main { min-width:0; padding:0 32px 56px; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:16px;
          padding:20px 0 18px; border-bottom:1px solid var(--line); margin-bottom:26px; }
.topbar h1 { margin:0; font-size:19px; font-weight:650; letter-spacing:-.02em; }
.topbar p { margin:5px 0 0; font-size:12.5px; color:var(--ink-dim); }
.badge { font-size:11px; color:var(--ink-dim); border:1px solid var(--line);
         background:var(--surface); border-radius:999px; padding:5px 11px; white-space:nowrap; }

/* 콘텐츠 2열: 입력 폼 + 미리보기(고정) */
.wrap { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:28px; align-items:start; }
/* 2열을 유지할 폭이 안 되면 한 열로 — 미리보기는 폼 아래로 내려간다 */
@media (max-width:1280px){ .wrap{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:900px){
  .app { grid-template-columns:1fr; }
  .sidebar { position:static; height:auto; border-right:0; border-bottom:1px solid var(--line); }
  .nav { display:flex; flex-wrap:wrap; gap:4px; }
  .main { padding:0 18px 40px; }
}

/* ── 카드(섹션) ── */
fieldset { border:1px solid var(--line); border-radius:var(--radius); margin:0 0 18px;
           padding:20px 22px; background:var(--surface); scroll-margin-top:16px; }
legend { font-weight:650; color:var(--ink); font-size:13px; padding:0 8px; letter-spacing:-.01em; }
.grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px 16px; }
.grid.three { grid-template-columns:repeat(3,1fr); }
/* ※ 아래 두 규칙은 .grid.three 기본 선언보다 뒤에 있어야 적용된다(동일 특이도 → 나중 선언 우선) */
/* 2열 레이아웃이지만 폭이 빠듯한 구간: 3열 입력 그리드를 2열로 낮춘다 */
@media (min-width:1281px) and (max-width:1620px){ .grid.three { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .grid, .grid.three { grid-template-columns:1fr; } }
label { display:block; font-size:11.5px; color:var(--ink-dim); margin-bottom:5px; font-weight:500; }
/* ⚠️ addSensor()가 만드는 센서 입력에는 type 속성이 없다(<input class="s-model">).
   따라서 input[type=text] 로 잡으면 누락되어 글자색이 브라우저 기본(검정)이 된다.
   checkbox/radio/file 만 제외하는 방식으로 전부 포함시킨다. */
input:not([type=checkbox]):not([type=radio]):not([type=file]), textarea, select {
  width:100%; padding:8px 11px; border:1px solid var(--line); border-radius:7px; font-size:13.5px;
  background:var(--surface-2); color:var(--ink); transition:border-color .12s, box-shadow .12s; }
input:not([type=checkbox]):not([type=radio]):not([type=file]):hover,
textarea:hover, select:hover { border-color:var(--line-2); }
input:focus, textarea:focus, select:focus {
  outline:none; border-color:var(--pri); box-shadow:0 0 0 3px var(--pri-soft); }
select option { background:var(--surface-2); color:var(--ink); }
input::placeholder, textarea::placeholder { color:var(--ink-faint); }
/* 미리 채워둔 예시값은 흐리게 — 사용자가 수정하면 정상 색으로 */
input.prefilled, textarea.prefilled, select.prefilled { color:#7A8DA8; font-style:italic; }
/* 자동계산(읽기전용) 필드 */
input[readonly], input.auto-calc { background:#0B1A30; color:var(--pri); font-weight:600; cursor:not-allowed;
  border-style:dashed; }
input[readonly].prefilled { font-style:normal; color:var(--pri); }
/* 장비 종류별 조건부 표시 — body.turn 여부로 토글 */
body.turn .mc-only { display:none; }
body:not(.turn) .turn-only { display:none; }
textarea { resize:vertical; min-height:52px; }
.full { grid-column:1/-1; }
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chips label { display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink);
  background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:6px 13px; margin:0; cursor:pointer; }
.chips label:hover { border-color:var(--line-2); }
.chips input:checked + span, .chips label:has(input:checked) { color:var(--pri); }
.chips label:has(input:checked) { border-color:var(--pri); background:var(--pri-soft); }
.sensor-item { border:1px solid var(--line); border-radius:9px; padding:12px; margin-bottom:10px;
               background:var(--surface-2); }
.sensor-row { display:grid; grid-template-columns: 1.2fr 1.2fr 1.2fr .9fr .7fr 1fr auto; gap:8px; align-items:center; }
.sensor-row input, .sensor-row select { font-size:12.5px; padding:6px 9px;
  background:var(--surface); color:var(--ink); }
/* 센서 행에서도 예시값은 다른 필드와 동일하게 흐린 이탤릭으로
   (.sensor-row 규칙이 뒤에 오므로 여기서 다시 지정해야 한다) */
.sensor-row input.prefilled, .sensor-row select.prefilled { color:#7A8DA8; font-style:italic; }
@media (max-width:1100px){ .sensor-row { grid-template-columns:repeat(3,1fr); } }
.sensor-file { display:flex; align-items:center; gap:10px; margin-top:10px; }
.fbtn { display:inline-flex; align-items:center; font-size:11.5px; color:var(--pri);
        border:1px dashed var(--line-2); border-radius:7px;
        padding:5px 11px; cursor:pointer; background:transparent; white-space:nowrap; }
.fbtn:hover { background:var(--pri-soft); border-color:var(--pri); }
.s-fname { font-size:11.5px; color:var(--ink-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.s-fname.has { color:var(--ok); }
.file-row { display:flex; align-items:center; gap:12px; padding:8px 12px; border:1px solid var(--line);
            border-radius:8px; margin-bottom:7px; background:var(--surface-2); }
.file-row:hover { border-color:var(--line-2); }
.file-row .s-fname { flex:1; min-width:0; }
.fchk { display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink); margin:0;
        white-space:nowrap; min-width:126px; cursor:pointer; }
.file-row:has(.opt-inc:checked) .fchk { color:var(--pri); font-weight:600; }
.file-row:has(.opt-inc:checked) { border-color:var(--line-2); }
/* ── 버튼 ── */
.btn { background:var(--pri-solid); color:#fff; font-weight:600; border:1px solid transparent;
       border-radius:8px; padding:9px 15px; font-size:13px; cursor:pointer; letter-spacing:-.01em;
       transition:background .12s, border-color .12s; }
.btn:hover { background:#4C7DF0; }
.btn.ghost { background:var(--surface); color:var(--ink); border-color:var(--line-2); font-weight:500; }
.btn.ghost:hover { background:var(--surface-3); border-color:var(--pri); color:var(--pri); }
.btn.sm { padding:5px 11px; font-size:12px; }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.toolbar { display:flex; gap:9px; flex-wrap:wrap; margin:0 0 16px; position:sticky; top:0;
           background:var(--bg); padding:8px 0; z-index:3; }
/* ── 미리보기 패널 ── */
.preview-col { position:sticky; top:0; }
.panel { background:#070E1B; color:#C7D9F0; border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 18px; font-family:"Consolas","D2Coding",monospace;
  font-size:12px; line-height:1.62; white-space:pre; overflow:auto; max-height:62vh; }
.panel.json { color:#9FE7C0; }
.tabs { display:flex; gap:2px; margin-bottom:12px; border-bottom:1px solid var(--line); }
.tab { padding:8px 14px; font-size:12.5px; border:0; background:transparent; color:var(--ink-dim);
       cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; font-weight:500; }
.tab:hover { color:var(--ink); }
.tab.active { color:var(--pri); border-bottom-color:var(--pri); font-weight:600; }
.status { font-size:12.5px; padding:10px 13px; border-radius:8px; margin-bottom:12px; display:none; }
.status.ok { background:rgba(95,217,160,.11); color:var(--ok); border:1px solid rgba(95,217,160,.32); display:block; }
.status.err { background:rgba(255,154,146,.11); color:var(--err); border:1px solid rgba(255,154,146,.32); display:block; }
.hint { font-size:11.5px; color:var(--ink-dim); margin-top:6px; line-height:1.6; }
/* 링크: 브라우저 기본색(#0000EE/보라)은 다크 배경에서 안 보이므로 반드시 지정한다 */
a { color:#7cc4f8; text-decoration:underline; text-underline-offset:2px; }
a:visited { color:#7cc4f8; }   /* 방문 후 보라색으로 어두워지는 것 방지 */
a:hover { color:#b9e2ff; }
.hint a { color:#9ad3ff; font-weight:600; }
/* 인증서 설치처럼 눌러야 하는 링크는 버튼형으로 강조 */
a.cta { display:inline-block; background:#2563eb; color:#fff !important; font-weight:700;
        padding:2px 9px; border-radius:5px; text-decoration:none; white-space:nowrap; }
a.cta:hover { background:#3b82f6; }
h3.sec { font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
         color:var(--ink-faint); margin:18px 0 10px; }
fieldset > h3.sec:first-of-type { margin-top:6px; }
/* 스크롤바(다크 테마에 맞춤) */
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:#22334D; border-radius:6px; border:2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background:#2E4363; }

/* ═══════════════════════════════════════════════════════════════════════
   공정 선택 화면(select.html)
   ═══════════════════════════════════════════════════════════════════════ */
.select-page { max-width:1060px; margin:0 auto; padding:0 24px 64px; }
.select-hero { padding:64px 0 34px; text-align:center; }
.select-hero .brand-mark { width:42px; height:42px; border-radius:11px; font-size:17px; margin:0 auto 18px; }
.select-hero h1 { margin:0; font-size:28px; font-weight:680; letter-spacing:-.03em; }
.select-hero p { margin:11px auto 0; font-size:14px; color:var(--ink-dim); max-width:560px; line-height:1.65; }
.select-label { font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
                color:var(--ink-faint); margin:0 0 12px; }

.proc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.proc-card { display:flex; flex-direction:column; text-align:left; background:var(--surface);
             border:1px solid var(--line); border-radius:12px; padding:22px 22px 18px;
             text-decoration:none; color:inherit; transition:border-color .13s, background .13s, transform .13s; }
.proc-card:hover { border-color:var(--pri); background:var(--surface-3); transform:translateY(-2px); }
.proc-card:focus-visible { outline:none; border-color:var(--pri); box-shadow:0 0 0 3px var(--pri-soft); }
.proc-icon { width:38px; height:38px; border-radius:10px; flex:none; display:grid; place-items:center;
             font-size:19px; background:var(--pri-soft); border:1px solid var(--line-2); margin-bottom:14px; }
.proc-name { font-size:16px; font-weight:650; letter-spacing:-.02em; margin:0; }
.proc-tagline { font-size:11.5px; color:var(--pri); margin:4px 0 0; font-weight:550; }
.proc-desc { font-size:12.5px; color:var(--ink-dim); line-height:1.65; margin:12px 0 0; flex:1; }
.proc-meta { display:flex; flex-wrap:wrap; gap:6px; margin-top:16px; padding-top:14px;
             border-top:1px solid var(--line); }
.proc-meta span { font-size:10.5px; color:var(--ink-faint); border:1px solid var(--line);
                  border-radius:999px; padding:3px 9px; white-space:nowrap; }
.proc-go { font-size:12px; color:var(--pri); font-weight:600; margin-top:14px; }
.select-note { margin-top:30px; font-size:11.5px; color:var(--ink-dim); line-height:1.75;
               border:1px solid var(--line); border-radius:10px; padding:15px 18px; background:var(--surface-2); }
.select-empty { color:var(--err); font-size:13px; padding:24px; text-align:center; }
@media (max-width:860px){ .proc-grid { grid-template-columns:1fr; } .select-hero { padding:40px 0 26px; } }

/* 생성기 폼 상단의 '공정 선택으로' 되돌아가기 링크 */
.back-link { display:flex; align-items:center; gap:7px; padding:6.5px 9px; border-radius:7px;
             font-size:12px; color:var(--ink-dim); text-decoration:none; margin-bottom:4px; }
.back-link:hover { background:var(--surface-3); color:var(--ink); text-decoration:none; }
.back-link:visited { color:var(--ink-dim); }

/* ═══════════════════════════════════════════════════════════════════════
   인증 화면 (login.html) · 관리자 화면 (admin.html)
   ═══════════════════════════════════════════════════════════════════════ */
.auth-wrap { min-height:100vh; display:grid; place-items:center; padding:32px 20px; }
.auth-card { width:100%; max-width:430px; background:var(--surface); border:1px solid var(--line);
             border-radius:14px; padding:30px 30px 26px; }
.auth-head { text-align:center; margin-bottom:22px; }
.auth-head .brand-mark { width:40px; height:40px; border-radius:11px; font-size:16px; margin:0 auto 14px; }
.auth-head h1 { margin:0; font-size:19px; font-weight:660; letter-spacing:-.02em; }
.auth-head p { margin:7px 0 0; font-size:12.5px; color:var(--ink-dim); line-height:1.6; }
.auth-tabs { display:flex; gap:2px; margin-bottom:20px; border-bottom:1px solid var(--line); }
.auth-tabs button { flex:1; padding:9px 0; font-size:13px; border:0; background:transparent;
                    color:var(--ink-dim); cursor:pointer; border-bottom:2px solid transparent;
                    margin-bottom:-1px; font-weight:500; font-family:inherit; }
.auth-tabs button:hover { color:var(--ink); }
.auth-tabs button.on { color:var(--pri); border-bottom-color:var(--pri); font-weight:600; }
.auth-field { margin-bottom:13px; }
.auth-field label { display:block; font-size:11.5px; color:var(--ink-dim); margin-bottom:5px; font-weight:500; }
.auth-card .btn { width:100%; padding:11px; font-size:13.5px; margin-top:6px; }
.auth-msg { font-size:12.5px; padding:10px 13px; border-radius:8px; margin-bottom:14px; display:none; line-height:1.6; }
.auth-msg.ok  { background:rgba(95,217,160,.11); color:var(--ok);  border:1px solid rgba(95,217,160,.32); display:block; }
.auth-msg.err { background:rgba(255,154,146,.11); color:var(--err); border:1px solid rgba(255,154,146,.32); display:block; }
.auth-note { font-size:11.5px; color:var(--ink-faint); margin-top:16px; line-height:1.65; text-align:center; }

/* 관리자 화면 */
.admin-page { max-width:1100px; margin:0 auto; padding:28px 24px 64px; }
.admin-head { display:flex; align-items:center; justify-content:space-between; gap:16px;
              padding-bottom:16px; border-bottom:1px solid var(--line); margin-bottom:20px; flex-wrap:wrap; }
.admin-head h1 { margin:0; font-size:19px; font-weight:650; letter-spacing:-.02em; }
.admin-stats { display:flex; gap:8px; flex-wrap:wrap; }
.admin-stats span { font-size:11.5px; color:var(--ink-dim); border:1px solid var(--line);
                    background:var(--surface); border-radius:999px; padding:5px 12px; }
.admin-stats span b { color:var(--pri); }
table.users { width:100%; border-collapse:collapse; font-size:12.5px; }
table.users th { text-align:left; font-size:10.5px; font-weight:700; letter-spacing:.07em;
                 text-transform:uppercase; color:var(--ink-faint); padding:9px 10px;
                 border-bottom:1px solid var(--line); white-space:nowrap; }
table.users td { padding:11px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
table.users tr:hover td { background:var(--surface-2); }
table.users .nowrap { white-space:nowrap; }
.pill { font-size:10.5px; padding:3px 9px; border-radius:999px; white-space:nowrap; border:1px solid; }
.pill.pending  { color:#FFCF7A; border-color:rgba(255,207,122,.4); background:rgba(255,207,122,.1); }
.pill.active   { color:var(--ok); border-color:rgba(95,217,160,.4); background:rgba(95,217,160,.1); }
.pill.rejected,
.pill.disabled { color:var(--ink-faint); border-color:var(--line); background:var(--surface-2); }
.pill.admin    { color:var(--pri); border-color:rgba(122,162,247,.4); background:var(--pri-soft); }
.row-actions { display:flex; gap:6px; flex-wrap:wrap; }
.admin-empty { padding:40px; text-align:center; color:var(--ink-dim); font-size:13px; }
/* 폼 상단의 로그인 사용자 표시 */
.who { display:flex; align-items:center; gap:9px; font-size:11.5px; color:var(--ink-dim); }
.who b { color:var(--ink); font-weight:600; }