/* ===== 디자인 토큰 ===== */
:root{
  --surface:#ffffff;
  --surface-alt:#f7f9fc;
  --text:#0f172a;
  --muted:#64748b;
  --primary:#111827;      /* 포인트 색 (원하면 #2563eb 등으로 변경) */
  --primary-ink:#ffffff;
  --ring:#a5b4fc;
  --radius:14px;
  --shadow:0 10px 30px rgba(2,6,23,.10);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:#fff; color:var(--text);
  font-family:"Noto Sans KR", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  line-height:1.6;
}

/* 공통 레이아웃 */
.container{max-width:1000px; margin:0 auto; padding:0 20px}
.section{padding:72px 0; background:var(--surface)}
.section.alt{background:var(--surface-alt)}
.section-title{ margin:0 0 8px; font-size:clamp(20px,3.5vw,28px) }
.center{text-align:center}
.muted{color:var(--muted)}

/* 헤더 */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.88);
  backdrop-filter:saturate(1.1) blur(10px);
  border-bottom:1px solid #e5e7eb;
}
.header-inner{ height:64px; display:flex; align-items:center; justify-content:space-between; }
.logo{font-weight:700; text-decoration:none; color:var(--text)}
.nav{display:flex; gap:18px}
.nav a{color:#334155; text-decoration:none}
.nav a:hover{text-decoration:underline}
.menu-btn{ display:none; border:0; background:#eef2ff; padding:8px 10px; border-radius:10px; cursor:pointer; }

/* 히어로 */
.hero-min{
  background: linear-gradient(180deg,#fbfdff 0%, #f7f9fc 100%);
  border-bottom:1px solid #eef2f7;
}
.hero-stack{ text-align:center; }
.hero-stack h1{ margin:0 0 8px; font-size:clamp(28px,5vw,44px); letter-spacing:-.3px }
.hero-stack .sub{ margin:0 0 20px; color:var(--muted) }

/* 버튼 */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px; border-radius:var(--radius);
  border:1px solid #e5e7eb; background:#fff; cursor:pointer; font-weight:700;
  transition: transform .06s ease, box-shadow .2s ease, background .2s ease, opacity .2s ease;
  user-select:none; text-decoration:none; color:inherit;
}
.btn:hover{ box-shadow:var(--shadow) }
.btn:active{ transform: translateY(1px) }
.btn.primary{ background:var(--primary); color:var(--primary-ink); border-color:transparent }
.btn.ghost{ background:#fff; color:#0f172a }

/* 분석 버튼 그리드 */
.btn-grid{
  display:grid; gap:12px; justify-content:center;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  max-width:560px; margin:16px auto 0;
}
@media (max-width:560px){ .btn-grid{ grid-template-columns: 1fr } }

/* FAQ 단독 섹션 & 큰 버튼 */
.faq-section{ padding-top:40px; }
.faq-large{
  margin-top:14px;
  padding:18px 22px;
  font-size:18px;
  border-radius:18px;
  width:100%;
  max-width:420px;
  background:var(--primary);
  color:var(--primary-ink);
  border:0;
}

/* 조용한(anchor) 링크 스타일 */
.link-quiet{
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 1px;
  transition: color .2s, border-color .2s, background-color .2s;
}
.link-quiet:visited{ color: inherit; }
.link-quiet:hover{ border-bottom-color:#cbd5e1; background:#f8fafc; }
.link-quiet:focus-visible{ outline:3px solid var(--ring); outline-offset:2px; border-radius:6px; }

/* 푸터 */
.site-footer{border-top:1px solid #e5e7eb; background:#fff}
.footer-inner{height:68px; display:flex; align-items:center; justify-content:space-between}

/* ===== 업로드 페이지 전용 ===== */
.upload-hero{
  text-align:center;
  padding:44px 0 18px;
  border-bottom:1px solid #eef2f7;
  background: linear-gradient(180deg,#fbfdff 0%, #f7f9fc 100%);
}
.upload-hero h1{ margin:0 0 8px; font-size:clamp(24px,4.5vw,36px) }
.upload-hero .muted{ color:var(--muted) }

.upload-wrap{ padding:28px 0; }
.dropzone{
  position:relative;
  border:2px dashed #cbd5e1;
  border-radius:16px;
  background:#fff;
  padding:28px;
  text-align:center;
  transition: border-color .2s, background .2s;
}
.dropzone.dragover{
  border-color:#93c5fd;
  background:#f8fafc;
}
.dropzone input[type="file"]{
  position:absolute; inset:0;
  opacity:0; cursor:pointer;
}
.dropzone .hint{
  margin:8px 0 0; color:var(--muted); font-size:14px;
}

.file-list{
  margin-top:18px;
  border:1px solid #e5e7eb; border-radius:12px;
  overflow:hidden; background:#fff;
}
.file-list table{ width:100%; border-collapse:collapse; }
.file-list th, .file-list td{ padding:10px 12px; border-bottom:1px solid #f1f5f9; text-align:left; }
.file-list th{ background:#f8fafc; font-weight:600; font-size:14px; }
.file-list td{ font-size:14px; }
.file-list tr:last-child td{ border-bottom:none; }

/* 반응형 */
@media (max-width: 900px){
  .nav{gap:14px}
}
@media (max-width: 640px){
  .nav{display:none}
  .menu-btn{display:inline-block}
}