/* ==========================================================
   선우랩 AI Auto Regression (Pyodide Edition) — Style Sheet
   [T00] 공통 변수 · 타이포그래피/여백 스케일
   [T01] 레이아웃 컨테이너
   [T02] 카드 공통 · 섹션 제목
   [T03] 안내 문구 (helpbox)
   [T04] 업로드 영역
   [T05] 모델 탭 · 모델 설명
   [T06] 요약 카드 (통계 박스)
   [T07] 성능 지표 그리드
   [T08] 비교 테이블
   [T09] 배지 (과적합 진단)
   [T10] X변수 목록
   [T11] 예측기
   [T12] 스피너
   [T13] 반응형

   ※ 모든 선택자를 #aar4 로 스코프합니다 (ID 선택자 → 매우 높은 우선순위).
     테마/페이지빌더 CSS가 h3, table, .card 같은 범용 선택자에
     스타일을 걸어둔 경우에도 이 플러그인 안에서는 항상 이 파일이 이깁니다.
   ========================================================== */

/* [T00] ===================================================== */
:root {
  --bg:#f4f6f9; --surface:#ffffff; --surface2:#eef1f6;
  --border:#d0d8e4; --border-l:#e4eaf2;
  --accent:#0073aa; --accent2:#3a7cbd; --accent3:#1e6b5e;
  --accent-dark:#004d7a;
  --warn:#b45309; --danger:#993300;
  --text:#1e2d3d; --text-sub:#3d546b; --muted:#7a92a8;
  --radius:8px;
  --font-main:'Noto Sans KR',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
  --shadow:0 1px 4px rgba(30,45,61,.07),0 2px 12px rgba(30,45,61,.05);

  /* 타이포그래피 스케일 — 화면 어디서나 이 값들만 사용 (임의의 px 금지) */
  --fs-title:19px;     /* 카드(섹션) 제목: 데이터 업로드, 모델 선택 등 */
  --fs-body:14px;      /* 기본 본문 */
  --fs-small:13px;     /* 보조 설명, 라벨 */
  --fs-micro:11px;     /* 대문자 태그성 라벨 */
  --fs-value:20px;     /* 통계 카드 숫자값 (모든 카드 동일 크기) */
  --fs-value-hero:28px;/* 예측 결과처럼 강조가 필요한 단일 숫자 */

  --lh-body:1.85;      /* 문단형 텍스트 줄 간격 */
  --lh-tight:1.4;      /* 라벨/숫자 등 짧은 한 줄 텍스트 줄 간격 */

  --gap-xs:8px;
  --gap-sm:12px;
  --gap-md:16px;
  --gap-lg:24px;
  --gap-xl:32px;
}
/* [T00] END ================================================= */

/* [T01] ===================================================== */
#aar4 *{box-sizing:border-box;margin:0;padding:0}

#aar4{
  max-width:1040px !important;
  margin:40px auto !important;
  font-family:var(--font-main) !important;
  background:var(--bg) !important;
  color:var(--text) !important;
  padding:var(--gap-xl) !important;
  border-radius:14px !important;
  font-size:var(--fs-body) !important;
  line-height:var(--lh-body) !important;
}
#aar4::before{
  content:'AUTO REGRESSION ANALYSIS REPORT — Pyodide Edition (브라우저 내 실행)';
  display:block;
  font-size:var(--fs-micro);
  font-weight:700;
  letter-spacing:.16em;
  line-height:var(--lh-tight);
  color:var(--muted);
  border-bottom:2px solid var(--accent);
  padding-bottom:var(--gap-md);
  margin-bottom:var(--gap-xl);
}
/* [T01] END ================================================= */

/* [T02] ===================================================== */
#aar4 .a4card{
  background:var(--surface) !important;
  border:1px solid var(--border-l) !important;
  border-radius:var(--radius) !important;
  padding:var(--gap-xl) !important;
  margin-bottom:var(--gap-xl) !important;
  box-shadow:var(--shadow) !important;
}
#aar4 .a4card-hd{
  display:flex !important;
  align-items:center !important;
  gap:var(--gap-sm) !important;
  margin-bottom:var(--gap-lg) !important;
  padding-bottom:var(--gap-md) !important;
  border-bottom:2px solid var(--border-l) !important;
  line-height:var(--lh-tight) !important;
}
#aar4 .a4card-hd span{ font-size:20px !important; line-height:1 !important; }
#aar4 .a4card-hd h3{
  font-size:var(--fs-title) !important;
  font-weight:800 !important;
  letter-spacing:.01em !important;
  color:var(--accent-dark) !important;
  line-height:var(--lh-tight) !important;
}
/* [T02] END ================================================= */

/* [T03] ===================================================== */
#aar4 .helpbox{
  background:#f0f5fb !important;
  border-left:4px solid var(--accent2) !important;
  border-radius:0 8px 8px 0 !important;
  padding:var(--gap-md) var(--gap-lg) !important;
  font-size:var(--fs-small) !important;
  color:var(--text-sub) !important;
  line-height:var(--lh-body) !important;
  margin-bottom:var(--gap-lg) !important;
}
#aar4 .helpbox b{color:var(--accent-dark) !important; font-weight:700 !important;}
/* [T03] END ================================================= */

/* [T04] ===================================================== */
#aar4 #upload_zone4{
  border:2px dashed var(--border) !important;
  border-radius:var(--radius) !important;
  padding:56px 40px !important;
  text-align:center !important;
  cursor:pointer !important;
  background:var(--surface2) !important;
  transition:.2s;
  line-height:var(--lh-body) !important;
}
#aar4 #upload_zone4:hover{border-color:var(--accent2);background:#e8eff7}
#aar4 #upload_zone4 h2{
  font-size:var(--fs-title) !important;
  font-weight:700 !important;
  color:var(--accent-dark) !important;
  margin-bottom:var(--gap-sm) !important;
  line-height:var(--lh-tight) !important;
}
#aar4 #upload_zone4 p{ font-size:var(--fs-small) !important; color:var(--muted) !important; margin-top:var(--gap-xs) !important; }
#aar4 .a4-srv-status{ margin-top:var(--gap-md) !important; font-size:var(--fs-small) !important; }
#aar4 .a4-srv-status #srv_status4{ color:var(--muted); }
/* [T04] END ================================================= */

/* [T05] ===================================================== */
#aar4 .mtabs4{display:flex !important;gap:var(--gap-sm) !important;flex-wrap:wrap !important;margin-bottom:var(--gap-lg) !important}
#aar4 .mtab4{
  padding:9px 18px !important;
  border-radius:6px !important;
  font-size:var(--fs-small) !important;
  font-weight:600 !important;
  line-height:var(--lh-tight) !important;
  cursor:pointer;
  border:1.5px solid var(--border) !important;
  background:var(--surface2) !important;
  color:var(--text-sub) !important;
  transition:.15s;
}
#aar4 .mtab4:hover{border-color:var(--accent2);color:var(--accent2)}
#aar4 .mtab4.active{background:var(--accent) !important;border-color:var(--accent) !important;color:#fff !important}
#aar4 .mtab4.best::after{content:'★';margin-left:5px;font-size:var(--fs-micro)}

#aar4 .model-info4{
  background:var(--surface2) !important;
  border-radius:8px !important;
  padding:var(--gap-md) var(--gap-lg) !important;
  font-size:var(--fs-body) !important;
  color:var(--text-sub) !important;
  line-height:var(--lh-body) !important;
  border-left:4px solid var(--accent) !important;
}
#aar4 .model-info4 b{ color:var(--text) !important; }
#aar4 .a4-model-desc{
  display:block !important;
  font-size:var(--fs-small) !important;
  color:var(--muted) !important;
  line-height:var(--lh-body) !important;
  margin-top:var(--gap-xs) !important;
}

/* 독립변수(X) 선택 체크박스 목록 */
#aar4 .a4-var-check-list{
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:var(--gap-sm) !important;
  margin-bottom:var(--gap-md) !important;
}
#aar4 .a4-var-check{
  display:flex !important;
  align-items:center !important;
  gap:var(--gap-xs) !important;
  padding:10px 14px !important;
  border:1px solid var(--border) !important;
  border-radius:7px !important;
  background:var(--surface2) !important;
  cursor:pointer;
  font-size:var(--fs-small) !important;
  color:var(--text-sub) !important;
  line-height:var(--lh-tight) !important;
  transition:.15s;
}
#aar4 .a4-var-check:hover{ border-color:var(--accent2) !important; }
#aar4 .a4-var-check input{ accent-color:var(--accent); width:16px; height:16px; flex-shrink:0; margin:0 !important; }
#aar4 .a4-var-tag{
  font-size:10px !important;
  font-weight:700 !important;
  color:var(--accent2) !important;
  background:#eaf3fb !important;
  border-radius:4px !important;
  padding:2px 6px !important;
  margin-left:auto !important;
  white-space:nowrap;
}
#aar4 .a4-var-check-disabled{
  cursor:default;
  background:#f2f3f5 !important;
  border-style:dashed !important;
  color:var(--muted) !important;
  opacity:.85;
}
#aar4 .a4-var-tag-off{ color:var(--danger) !important; background:#fdf1ee !important; }
#aar4 .a4-var-check-actions{ display:flex !important; gap:var(--gap-md) !important; margin-bottom:var(--gap-lg) !important; }
#aar4 .a4-link-btn{
  background:none !important;
  border:none !important;
  color:var(--accent) !important;
  font-size:var(--fs-small) !important;
  font-weight:600 !important;
  cursor:pointer;
  padding:0 !important;
  text-decoration:underline;
}
#aar4 .a4-link-btn:hover{ color:var(--accent2) !important; }
/* [T05] END ================================================= */

/* [T06] 요약 카드 (통계 박스) ================================= */
#aar4 .a4-stat-grid{
  display:flex !important;
  gap:var(--gap-md) !important;
  flex-wrap:wrap !important;
}
#aar4 .a4-stat-box{
  flex:1;
  min-width:170px;
  background:var(--surface2) !important;
  padding:var(--gap-lg) !important;
  border-radius:8px !important;
  border-left:4px solid var(--accent) !important;
  line-height:var(--lh-tight) !important;
}
#aar4 .a4-stat-box.is-accent2{ border-left-color:var(--accent2) !important; }
#aar4 .a4-stat-box.is-best{ background:#f0f7ff !important; border-left-color:var(--accent3) !important; }

#aar4 .a4-stat-label{
  font-size:var(--fs-micro) !important;
  font-weight:700 !important;
  color:var(--muted) !important;
  text-transform:uppercase !important;
  letter-spacing:.08em !important;
  margin-bottom:var(--gap-sm) !important;
  line-height:var(--lh-tight) !important;
}
#aar4 .a4-stat-value{
  font-size:var(--fs-value) !important;
  font-weight:800 !important;
  color:var(--text) !important;
  line-height:var(--lh-tight) !important;
}
#aar4 .a4-stat-value.is-accent3{ color:var(--accent3) !important; }
#aar4 .a4-stat-sub{
  font-size:var(--fs-small) !important;
  color:var(--muted) !important;
  margin-top:var(--gap-xs) !important;
  line-height:var(--lh-tight) !important;
}
/* [T06] END ================================================= */

/* [T07] 성능 지표 그리드 ====================================== */
#aar4 .mgrid4{
  display:grid !important;
  grid-template-columns:repeat(4,1fr);
  gap:var(--gap-md) !important;
  margin-bottom:var(--gap-lg) !important;
}
#aar4 .mcard4{
  background:var(--surface) !important;
  border:1px solid var(--border-l) !important;
  border-top:4px solid var(--accent) !important;
  border-radius:var(--radius) !important;
  padding:var(--gap-lg) var(--gap-md) !important;
  text-align:center !important;
}
#aar4 .mcard4 .mlabel{
  font-size:var(--fs-micro) !important;
  font-weight:700 !important;
  color:var(--muted) !important;
  text-transform:uppercase !important;
  letter-spacing:.1em !important;
  margin-bottom:var(--gap-sm) !important;
  line-height:var(--lh-tight) !important;
}
/* 카드 종류와 관계없이 값 글자 크기는 항상 동일 (fs-value) */
#aar4 .mcard4 .mval{
  font-family:var(--font-mono) !important;
  font-size:var(--fs-value) !important;
  font-weight:700 !important;
  color:var(--accent) !important;
  line-height:var(--lh-tight) !important;
  word-break:keep-all;
}
#aar4 .mcard4 .mval.warn{color:var(--warn) !important}
#aar4 .mcard4 .mval.good{color:var(--accent3) !important}
#aar4 .mcard4 .mval.danger{color:var(--danger) !important}
#aar4 .mcard4 .mtip{
  font-size:var(--fs-micro) !important;
  color:var(--muted) !important;
  margin-top:var(--gap-sm) !important;
  line-height:var(--lh-body) !important;
}
/* [T07] END ================================================= */

/* [T08] 비교 테이블 =========================================== */
#aar4 .ctable4{width:100% !important;border-collapse:collapse !important;font-size:var(--fs-small) !important;line-height:var(--lh-tight) !important}
#aar4 .ctable4 th{
  background:var(--surface2) !important;
  padding:14px 16px !important;
  text-align:left !important;
  font-size:var(--fs-micro) !important;
  font-weight:700 !important;
  letter-spacing:.06em !important;
  color:var(--muted) !important;
  border-bottom:2px solid var(--border) !important;
}
#aar4 .ctable4 td{
  padding:14px 16px !important;
  border-bottom:1px solid var(--border-l) !important;
  color:var(--text-sub) !important;
  font-size:var(--fs-small) !important;
}
#aar4 .ctable4 tr.best-row td{background:#f0f7ff !important;color:var(--accent-dark) !important;font-weight:700 !important}
#aar4 .ctable4 .cell-mono{ font-family:var(--font-mono) !important; }
#aar4 .ctable4 .cell-strong{ font-weight:700 !important; }
#aar4 .ctable4 .cell-muted{ color:var(--muted) !important; font-size:var(--fs-micro) !important; }
#aar4 .ctable4 .cell-r2.good{ color:var(--accent3) !important; }
#aar4 .ctable4 .cell-r2.warn{ color:var(--warn) !important; }
#aar4 .ctable4 .cell-r2.danger{ color:var(--danger) !important; }

#aar4 .bar-sm4{height:7px;background:var(--surface2);border-radius:4px;overflow:hidden;margin-top:6px;min-width:80px}
#aar4 .bar-fill4{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:4px}
/* [T08] END ================================================= */

/* [T09] 배지 =================================================== */
#aar4 .badge4{display:inline-block !important;padding:4px 12px !important;border-radius:5px !important;font-size:var(--fs-micro) !important;font-weight:700 !important;line-height:var(--lh-tight) !important}
#aar4 .badge4.good{background:#f0fdf8 !important;color:var(--accent3) !important;border:1px solid #a7f3d0 !important}
#aar4 .badge4.warn{background:#fffbeb !important;color:var(--warn) !important;border:1px solid #fde68a !important}
#aar4 .badge4.danger{background:#fef2f2 !important;color:var(--danger) !important;border:1px solid #fecaca !important}
/* [T09] END ================================================= */

/* [T10] X변수 목록 ============================================= */
#aar4 .a4-var-list{ display:flex !important; flex-direction:column !important; gap:var(--gap-md) !important; }
#aar4 .a4-var-item{ display:flex !important; align-items:center !important; gap:var(--gap-sm) !important; }
#aar4 .a4-var-num{
  width:26px;height:26px;border-radius:50% !important;
  background:var(--accent) !important;color:#fff !important;
  font-size:var(--fs-micro) !important;font-weight:700 !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  flex-shrink:0;line-height:1 !important;
}
#aar4 .a4-var-name{ font-size:var(--fs-body) !important; color:var(--text-sub) !important; line-height:var(--lh-tight) !important; }
#aar4 .a4-note-list{
  padding-left:20px !important;
  display:flex !important;
  flex-direction:column !important;
  gap:var(--gap-xs) !important;
  font-size:var(--fs-small) !important;
  color:var(--text-sub) !important;
  line-height:var(--lh-body) !important;
}
/* [T10] END ================================================= */

/* [T11] 예측기 ================================================= */
#aar4 .a4-pred-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:var(--gap-lg) !important;
  margin-bottom:var(--gap-lg) !important;
}
#aar4 .a4-pred-field label{
  font-size:var(--fs-small) !important;
  font-weight:700 !important;
  color:var(--text-sub) !important;
  display:block !important;
  margin-bottom:var(--gap-xs) !important;
  line-height:var(--lh-tight) !important;
}
#aar4 .a4-pred-field input,
#aar4 .a4-pred-field select{
  width:100% !important;
  border:1px solid var(--border) !important;
  border-radius:7px !important;
  font-family:var(--font-main) !important;
  font-size:var(--fs-body) !important;
  background:var(--surface2) !important;
  color:var(--text) !important;
  outline:none !important;
  box-shadow:none !important;
  transition:.2s;
  box-sizing:border-box !important;
}
#aar4 .a4-pred-field input{
  height:46px !important;
  padding:0 14px !important;
  line-height:46px !important;
}
#aar4 .a4-pred-field select{
  height:46px !important;
  line-height:46px !important;
  padding:0 38px 0 14px !important;
  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  appearance:none !important;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%237a92a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M5 8l5 5 5-5'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right 12px center !important;
  background-size:14px 14px !important;
}
#aar4 .a4-pred-field input:focus,
#aar4 .a4-pred-field select:focus{ border-color:var(--accent2) !important; background:#fff !important; outline:none !important; box-shadow:none !important; }

#aar4 .a4-pred-btn{
  width:100% !important;
  background:var(--accent) !important;
  color:#fff !important;
  border:none !important;
  border-radius:8px !important;
  padding:14px !important;
  font-family:var(--font-main) !important;
  font-size:var(--fs-body) !important;
  font-weight:700 !important;
  line-height:var(--lh-tight) !important;
  cursor:pointer;
  transition:.2s;
  letter-spacing:.02em !important;
}
#aar4 .a4-pred-btn.a4-run-btn{ font-size:16px !important; }
#aar4 .a4-pred-btn:hover{ background:var(--accent2) !important; }
#aar4 .a4-pred-btn:disabled{ background:var(--muted) !important; cursor:default; }

#aar4 .a4-pred-result{
  margin-top:var(--gap-lg) !important;
  display:none;
  background:#f0f7ff !important;
  border:2px solid var(--accent) !important;
  border-radius:10px !important;
  padding:var(--gap-lg) !important;
  text-align:center !important;
}
#aar4 .a4-pred-result-label{ font-size:var(--fs-small) !important; color:var(--muted) !important; margin-bottom:var(--gap-xs) !important; line-height:var(--lh-tight) !important; }
#aar4 .a4-pred-result-value{ font-family:var(--font-mono) !important; font-size:var(--fs-value-hero) !important; font-weight:700 !important; color:var(--accent3) !important; line-height:var(--lh-tight) !important; }
#aar4 .a4-pred-result-sub{ font-size:var(--fs-small) !important; color:var(--muted) !important; margin-top:var(--gap-xs) !important; line-height:var(--lh-tight) !important; }

#aar4 .a4-pred-error{
  display:none;
  margin-top:var(--gap-md) !important;
  padding:14px 18px !important;
  background:#fff5f5 !important;
  color:var(--danger) !important;
  border-radius:8px !important;
  border:1px solid #fecaca !important;
  font-size:var(--fs-small) !important;
  line-height:var(--lh-body) !important;
}
/* [T11] END ================================================= */

/* [T12] 스피너 =================================================== */
#aar4 #progress4{
  display:none;
  text-align:center !important;
  padding:40px !important;
  background:var(--surface) !important;
  border-radius:var(--radius) !important;
  margin-bottom:var(--gap-xl) !important;
  border:1px solid var(--border-l) !important;
  line-height:var(--lh-body) !important;
}
#aar4 .spinner4{width:34px;height:34px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin4 .8s linear infinite;margin:0 auto 16px}
#aar4 .a4-progress-msg{ color:var(--muted) !important; font-size:var(--fs-body) !important; }
@keyframes spin4{to{transform:rotate(360deg)}}
/* [T12] END ================================================= */

/* [T13] 반응형 =================================================== */
@media (max-width: 768px){
  #aar4 .mgrid4{ grid-template-columns:repeat(2,1fr) !important; }
  #aar4 .a4-stat-box{ min-width:100% !important; }
}
@media (max-width: 480px){
  #aar4{ padding:var(--gap-lg) !important; }
  #aar4 .a4card{ padding:var(--gap-lg) !important; }
  #aar4 .ctable4{ font-size:var(--fs-micro) !important; }
}
/* [T13] END ================================================= */