/* Base Theme */
:root{
  --bg: #ffffff;
  --text: #0f172a; /* slate-900 */
  --muted: #64748b; /* slate-500 */
  --accent: #6ecb8b; /* 차분한 연초록 */
  --accent-600:#2f9e61;
  --border: #e2e8f0;
  --card: #ffffff;
  --shadow: 0 8px 30px rgba(2, 6, 23, 0.06);
  --radius: 18px;
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, NanumGothic, Apple SD Gothic Neo, 'Noto Sans KR', sans-serif;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.container{ width:min(1080px, 92%); margin-inline:auto; }

.site-header{
  position:sticky; top:0; z-index:10;
  backdrop-filter:saturate(140%) blur(8px);
  background-color:rgba(255,255,255,0.8);
  border-bottom:1px solid var(--border);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; }
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit}
.logo-circle{fill:var(--accent); opacity:0.15}
.nav{display:flex; gap:18px}
.nav-link{color:var(--muted); text-decoration:none; font-weight:600}
.nav-link:hover{color:var(--accent-600)}

.main{padding:26px 0 60px}

.h1{font-size:clamp(22px, 3.2vw, 34px); margin:4px 0 10px}
.h2{font-size:clamp(18px, 2.4vw, 24px); margin:0 0 12px}
.muted{color:var(--muted); margin:0 0 18px}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px;
  margin:16px 0;
  box-shadow:var(--shadow);
}
.card-sm{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
}

textarea{
  width:100%; min-height:260px; resize:vertical;
  padding:14px 16px;
  background:#fff;
  border:1.2px solid var(--border);
  border-radius:14px;
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(110,203,139,.2);
}

.actions{display:flex; gap:10px; margin:8px 0 12px; flex-wrap:wrap}
.btn{
  appearance:none; border:1px solid var(--accent-600);
  background:var(--accent);
  padding:8px 12px; border-radius:12px; cursor:pointer;
  font-weight:700; color:#053b22;
  box-shadow:0 2px 0 rgba(0,0,0,.06);
}
.btn:hover{filter:brightness(0.98)}
.btn:active{transform:translateY(1px)}
.btn-outline{ background:#fff; color:#2f9e61; border:1px solid var(--accent-600); }

.file{
  display:inline-flex; align-items:center; gap:10px;
  border:1px dashed var(--accent-600); border-radius:12px; padding:8px 12px; cursor:pointer;
  color:#053b22; background:rgba(110,203,139,.12);
}
.file input{ display:none }

.opts{ display:flex; gap:14px; flex-wrap:wrap; margin: 4px 0 12px; color:#053b22; font-weight:600 }
.opts input{ transform: translateY(1px); }

.stats-grid{
  display:grid; gap:12px;
  grid-template-columns:repeat(3, minmax(0,1fr));
  margin-top:14px;
}
.stat-label{font-size:12px; color:var(--muted)}
.stat-value{font-size:clamp(20px, 2.8vw, 28px); font-weight:800}

.table-wrap{ overflow:auto; border:1px solid var(--border); border-radius:14px; }
.table{ width:100%; border-collapse:collapse; font-size:15px }
.table th,.table td{ padding:10px 12px; border-bottom:1px solid var(--border) }
.table th{ text-align:left; background:#f8fafc }
.table tr:hover td{ background:#fafafa }

.dup-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px }

.site-footer{ border-top:1px solid var(--border); padding:24px 0; text-align:center; color:var(--muted) }

/* Responsive */
@media (max-width:920px){
  .stats-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (max-width:600px){
  .stats-grid{grid-template-columns:1fr}
}

/* Accessibility helpers */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
:focus-visible{outline:3px solid rgba(110,203,139,.5); outline-offset:2px}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}