/* Monochrome professional UI theme */
:root{
  /* Monotone gray scale */
  --bg: #eef0f2;           /* stone-like light gray */
  --panel: #ffffff;        /* paper white */
  --text: #1f2937;         /* gray-800 */
  --muted: #6b7280;        /* gray-500 */
  --border: #d1d5db;       /* gray-300 */
  --border-strong: #9ca3af;/* gray-400 */
  --accent: #111827;       /* gray-900 */
  --focus: #9ca3af;        /* subtle gray focus */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  margin:0;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* subtle stone grain using layered gradients */
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(0,0,0,0.015) 0, transparent 100%),
    radial-gradient(1px 1px at 70% 80%, rgba(0,0,0,0.012) 0, transparent 100%),
    radial-gradient(2px 2px at 40% 60%, rgba(0,0,0,0.01) 0, transparent 100%),
    linear-gradient(0deg, rgba(255,255,255,0.6), rgba(255,255,255,0.6));
  background-blend-mode: normal, normal, normal, soft-light;
}

.container{max-width:1200px;margin:2rem auto;padding:0 1rem}

h1{font-size:1.5rem;font-weight:700;margin:0 0 1rem 0;color:var(--text)}
h2{font-size:1.125rem;font-weight:600;margin:1rem 0 0.75rem;color:var(--text)}

/* Header */
.header{position:sticky;top:0;backdrop-filter:saturate(180%) blur(10px);background:rgba(255,255,255,0.7);border-bottom:1px solid var(--border);z-index:10}
.header-inner{max-width:960px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:.6rem 1rem}
.brand{font-weight:800;color:var(--text)}
.nav{display:flex;gap:1rem}
.nav-link{color:var(--muted);text-decoration:none}
.nav-link:hover{color:var(--text)}
label{display:block;font-weight:600;margin:0.75rem 0 0.375rem;color:var(--text)}

input,select,textarea{
  width:100%;
  border:1px solid var(--border);
  border-radius:8px;
  padding:0.6rem 0.75rem;
  background:var(--panel);
  color:var(--text);
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
input::placeholder,textarea::placeholder{color:var(--muted)}
input:focus,select:focus,textarea:focus{
  border-color:var(--border-strong);
  box-shadow:0 0 0 3px rgba(156,163,175,0.25);
}

button{
  appearance:none;
  border:1px solid var(--accent);
  background:var(--accent);
  color:#fff;
  border-radius:8px;
  padding:0.5rem 0.9rem;
  font-weight:600;
  cursor:pointer;
  transition:opacity .15s ease, background .15s ease, color .15s ease, transform .06s ease;
}
button:active{transform:translateY(1px)}
button:hover{opacity:.92}
button:disabled{opacity:.6;cursor:not-allowed}

/* Secondary/ghost button variant */
.btn{border:1px solid var(--border-strong);background:transparent;color:var(--text)}
.btn:hover{background:#eef0f2}

/* Layout helpers (subset) to support existing class names */
.flex{display:flex}
.flex-col{flex-direction:column}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.gap-1{gap:.25rem}
.gap-2{gap:.5rem}
.p-3{padding:.75rem}
.px-2{padding-left:.5rem;padding-right:.5rem}
.py-1{padding-top:.25rem;padding-bottom:.25rem}
.px-3{padding-left:.75rem;padding-right:.75rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}
.border{border:1px solid var(--border)}
.rounded{border-radius:8px}
.bg-white{background:var(--panel)}
.text-sm{font-size:.875rem;color:var(--text)}
.text-xs{font-size:.75rem;color:var(--muted)}
.text-gray-500{color:var(--muted)}
.text-gray-700{color:#374151}
.font-semibold{font-weight:600}
.font-bold{font-weight:700}
.text-2xl{font-size:1.5rem}
.text-xl{font-size:1.25rem}
.mb-4{margin-bottom:1rem}
.mt-4{margin-top:1rem}
.mt-6{margin-top:1.5rem}
.space-y-2 > * + *{margin-top:.5rem}
.text-red-600{color:#4b5563} /* keep monochrome */

/* New responsive two-column layout */
.layout{display:grid;grid-template-columns:320px 1fr;gap:1rem}
.col-form{position:relative}
.sticky-form{position:sticky;top:72px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.form-grid .col-span-2{grid-column:1 / span 2}

@media (max-width: 960px){
  .layout{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
}

/* Badges for stages */
.badge{display:inline-block;padding:.2rem .5rem;border:1px solid var(--border);border-radius:999px;font-size:.75rem;color:var(--muted);}
.badge-strong{border-color:var(--border-strong);color:var(--text)}

/* Card */
.card{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:1rem;box-shadow:0 1px 0 rgba(17,24,39,0.03), 0 24px 32px rgba(0,0,0,0.03)}

/* List */
ul{display:flex;flex-direction:column;gap:0.75rem;margin:0;padding:0;list-style:none}
ul li{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  padding:1rem;
  transition:box-shadow .15s ease, border-color .15s ease, background .2s ease;
  /* subtle stone paper feel */
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(0,0,0,0.012) 0, transparent 100%),
    radial-gradient(1px 1px at 80% 70%, rgba(0,0,0,0.008) 0, transparent 100%);
  background-blend-mode: normal;
}
ul li:hover{border-color:var(--border-strong);box-shadow:0 6px 18px rgba(0,0,0,0.06);background:#fbfbfc}
.content-view{cursor:pointer}
.content-view:hover{background:#f3f4f6}

/* Search row */
#search{
  width:240px;
}

/* Info grid for runsheet items */
.info-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:0.5rem;
  margin:0.75rem 0;
}
.info-item{
  display:flex;
  flex-direction:column;
  padding:0.5rem;
  background:#f9fafb;
  border-radius:6px;
  border:1px solid var(--border);
}
.info-label{
  font-size:0.65rem;
  font-weight:600;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:0.025em;
  margin-bottom:0.25rem;
}
.info-value{
  font-size:0.875rem;
  font-weight:600;
  color:var(--text);
}
.content-section{
  background:#f9fafb;
  border:1px solid var(--border);
  border-radius:8px;
  padding:0.75rem;
  margin-top:0.75rem;
}
.content-label{
  font-size:0.7rem;
  font-weight:700;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:0.05em;
  margin-bottom:0.5rem;
}
.stage-badge{
  display:inline-flex;
  align-items:center;
  padding:0.35rem 0.75rem;
  border-radius:999px;
  font-size:0.8rem;
  font-weight:700;
  border:2px solid var(--border-strong);
  background:var(--panel);
  color:var(--text);
}
.stage-badge-완료{
  border-color:#2563eb;
  background:#dbeafe;
  color:#1e40af;
  font-weight:700;
}
.stage-badge-폐기{
  border-color:#dc2626;
  background:#fee2e2;
  color:#991b1b;
  font-weight:700;
}

/* Modal for editing */
.modal{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:rgba(0,0,0,0.5);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1000;
}
.modal-content{
  background:var(--panel);
  border-radius:12px;
  padding:1.5rem;
  width:90%;
  max-width:500px;
  max-height:90vh;
  overflow-y:auto;
  box-shadow:0 20px 40px rgba(0,0,0,0.2);
}
.modal-header{
  font-size:1.25rem;
  font-weight:700;
  margin-bottom:1rem;
  color:var(--text);
}
.modal-footer{
  display:flex;
  gap:0.5rem;
  justify-content:flex-end;
  margin-top:1rem;
}

/* Subtle separator utility */
.hr{height:1px;background:var(--border);margin:1rem 0}