/* 홈 전용: 자막요청 페이지들만 스타일 강제 (관리자/다른 페이지 영향 최소화) */
.sr-page{
  background:var(--line);
  min-height: calc(100vh - 60px);
}
.sr-wrap{
  /* public_layout.html의 .container(=max-width: var(--container))를 그대로 사용 */
  padding-top: 20px;
  padding-bottom: 60px;
  font-family:'Malgun Gothic',sans-serif;
  color:var(--text);
}

/* 제목(파란 원형 길쭉이) */
.sr-title{
  font-size:24px;
  font-weight:800;
  margin:0 0 14px 0;
  display:flex;
  align-items:center;
  gap:10px;
}
.sr-title .sr-pill{
  width:10px;
  height:22px;
  border-radius:999px;
  background:var(--accent);
  display:inline-block;
}

/* 카드 */
.sr-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  padding:16px;
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
  margin-bottom:12px;
}

/* 버튼 */
/* 버튼 — 공통 btn 톤과 동일하게 */
.sr-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius: var(--radius-md);
  border:1px solid var(--line);
  background: var(--surface);
  color:var(--text);
  cursor:pointer;
  font-size:18px;
  text-decoration:none;
  user-select:none;
  box-shadow: var(--shadow-xs);
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.sr-btn:hover{
  background: var(--surface-2);
  border-color: color-mix(in oklab, var(--line) 70%, var(--text));
}
.sr-btn:active{ transform: translateY(0.5px); }

.sr-btn-primary{
  background: var(--accent-weak);
  border-color: color-mix(in oklab, var(--accent) 30%, var(--line));
  color: var(--accent);
}
.sr-btn-danger{
  background: var(--danger-weak);
  border-color: color-mix(in oklab, var(--danger) 30%, var(--line));
  color: var(--danger);
}
.sr-btn-ghost{
  background: transparent;
  border-color: transparent;
  box-shadow:none;
}
.sr-btn-ghost:hover{ background: var(--surface-2); }

/* 테이블 */
.sr-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface);
}
.sr-table thead th{
  background:var(--accent) !important;
  color:var(--surface) !important;
  text-align:left;
  font-weight:800;
  font-size:18px;
  padding:12px 12px;
  border-bottom:1px solid #1f62cc;
}
.sr-table tbody td{
  padding:12px 12px;
  font-size:18px;
  border-bottom:1px solid #eee;
  color:var(--text);
}
.sr-table tbody tr:last-child td{ border-bottom:none; }

/* 품번 링크(빨강으로 덮이는 문제 방지) */
.sr-table tbody td:first-child a{
  color:var(--accent) !important;
  font-weight:800;
  text-decoration:none;
}
.sr-table tbody td:first-child a:hover{ text-decoration:underline; }

/* 상태 배지 */
.sr-badge{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:15px;
  font-weight:800;
  border:1px solid var(--line);
  background:#f5f5f5;
  color:var(--text);
}
.sr-badge.request{ background:#e8f1ff; border-color:#b8d3ff; color:#1f62cc; }
.sr-badge.progress{ background:#fff7e6; border-color:#ffd08a; color:#9a5b00; }
.sr-badge.done{ background:#e8fff0; border-color:#a9e9c2; color:#0f7a36; }

/* 폼 */
.sr-field{ display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.sr-label{ font-size:18px; font-weight:800; }
.sr-input, .sr-textarea, .sr-select{
  font-size:18px;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid #cfcfcf;
  outline:none;
  background:var(--surface);
  color:var(--text);
}
.sr-textarea{ min-height:180px; resize:vertical; }

/* 플래시 */
.sr-flash{ margin:10px 0; }
.sr-alert{
  border-radius:12px;
  padding:10px 12px;
  margin:6px 0;
  font-size:16px;
  border:1px solid var(--line);
  background:var(--surface);
}
.sr-alert-success{ border-color:#a9e9c2; background:#e8fff0; }
.sr-alert-error, .sr-alert-danger{ border-color:#ffb7b3; background:#ffeceb; }
.sr-alert-warning{ border-color:#ffd08a; background:#fff7e6; }

/* 모바일 */
@media (max-width: 768px){
  .sr-wrap{ padding:16px 10px 50px 10px; }
  .sr-title{ font-size:22px; }
  .sr-table thead th, .sr-table tbody td{ font-size:16px; padding:10px 10px; }
  .sr-btn{ font-size:16px; padding:10px 12px; }
}