/* 제조 데이터 분석 4종(spc·cpk·pareto·oee) 공용 스타일 — design.md 토큰 그대로 */
:root{
  --bg:#f8fafc;--card:#ffffff;--card2:#f1f5f9;
  --border:rgba(0,0,0,.1);--border2:rgba(0,0,0,.15);
  --text:#1e293b;--muted:#64748b;--dim:#94a3b8;
  --accent:#2563eb;--accent2:#6366f1;
  --amber:#d97706;--green:#059669;--red:#dc2626;--orange:#ea580c;--teal:#0d9488;
  --r:10px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'Noto Sans KR','Segoe UI',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;font-size:14px;line-height:1.6;overflow-x:hidden;}
body::before{content:'';position:fixed;inset:0;background-image:linear-gradient(rgba(37,99,235,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,.04) 1px,transparent 1px);background-size:40px 40px;pointer-events:none;z-index:0;}
.page-wrap{max-width:1400px;margin:0 auto;position:relative;}   /* design.md §6 — 다른 sim·prep 페이지와 같은 폭 */

/* 헤더 */
.site-header{padding:12px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:10px;background:rgba(248,250,252,.97);backdrop-filter:blur(16px);position:sticky;top:0;z-index:100;}
.logo{font-size:15px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:12px;min-width:0;}
.logo-brand{font-family:'Space Mono',monospace;font-size:18px;font-weight:700;color:var(--accent);letter-spacing:2px;text-decoration:none;}
.logo-brand em{color:#ea580c;font-style:normal;}
.logo-sep{width:1px;height:16px;background:var(--border2);flex-shrink:0;}
.logo-title{font-size:14px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.header-back{font-size:12px;color:var(--muted);text-decoration:none;border:1px solid var(--border2);padding:5px 14px;border-radius:8px;transition:.2s;white-space:nowrap;display:inline-flex;align-items:center;min-height:36px;}
.header-back:hover,.header-back:active{color:var(--text);border-color:rgba(0,0,0,.3);}

.page{padding:0 14px 60px;position:relative;}
.intro-box{background:rgba(59,130,246,.06);border:1px solid rgba(59,130,246,.15);border-radius:10px;padding:12px 16px;font-size:13px;color:var(--muted);line-height:1.7;margin-top:20px;}
.intro-box strong{color:var(--text);}
.intro-box a{color:var(--accent);font-weight:700;text-decoration:none;}

/* 형제 도구 줄 */
.mt-nav{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px;}
.mt-nav a{font-size:12px;font-weight:600;color:var(--muted);text-decoration:none;border:1px solid var(--border2);border-radius:999px;padding:6px 12px;background:var(--card);min-height:36px;display:inline-flex;align-items:center;}
.mt-nav a:hover,.mt-nav a:active{color:var(--teal);border-color:var(--teal);}
.mt-nav a.on{background:var(--teal);border-color:var(--teal);color:#fff;}

/* 탭 */
.stat-tabs{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--border);margin-top:20px;}
.stat-tab{padding:14px 20px;font-size:13px;font-weight:600;background:none;border:none;border-bottom:2px solid transparent;color:var(--muted);cursor:pointer;transition:all .2s;font-family:inherit;white-space:nowrap;min-height:44px;}
.stat-tab:hover{color:var(--text);}
.stat-tab.active{color:var(--accent);border-bottom-color:var(--accent);}
.stat-panel{display:none;padding-top:4px;}
.stat-panel.active{display:block;}

/* 카드 */
.a-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:16px 16px;margin-top:16px;}
.a-card-title{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.07em;text-transform:uppercase;margin-bottom:14px;}
.a-card-title b{color:var(--text);font-size:13px;letter-spacing:0;text-transform:none;margin-left:2px;}
.a-card-title .grade{text-transform:none;letter-spacing:0;margin-left:6px;}

/* 업로드·예시 */
.dc-samples{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;}
.upload-zone{border:2px dashed rgba(37,99,235,.3);border-radius:10px;padding:22px 16px;text-align:center;cursor:pointer;transition:all .2s;background:rgba(37,99,235,.03);position:relative;}
.upload-zone:hover,.upload-zone.drag{border-color:var(--accent);background:rgba(37,99,235,.07);}
.upload-zone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;}
.upload-icon{font-size:28px;margin-bottom:6px;}
.upload-main{font-size:13px;font-weight:700;color:var(--text);margin-bottom:4px;}
.upload-sub{font-size:11px;color:var(--muted);}
.file-info{display:none;padding:10px 14px;background:rgba(5,150,105,.07);border:1px solid rgba(5,150,105,.25);border-radius:8px;font-size:12px;color:#065f46;margin-top:12px;line-height:1.8;}
.file-info.show{display:block;}
.file-info.err{background:rgba(220,38,38,.06);border-color:rgba(220,38,38,.25);color:#991b1b;}
.file-meta-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:space-between;}
.file-col-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;}
.file-col-tag{font-size:10px;font-weight:700;padding:2px 8px;border-radius:4px;background:rgba(37,99,235,.08);color:var(--accent);border:1px solid rgba(37,99,235,.2);}
.file-col-tag.txt{background:rgba(0,0,0,.04);color:var(--muted);border-color:var(--border2);}

/* 컨트롤 */
.form-grid{display:grid;grid-template-columns:1fr;gap:12px;}
.fld{display:flex;flex-direction:column;gap:5px;min-width:0;}
.fld>label,.fld>.lbl{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.03em;}
.fld .hint{font-size:11px;color:var(--dim);line-height:1.5;}
.inp,.sel{font-family:inherit;font-size:16px;padding:0 11px;border:1px solid var(--border2);border-radius:8px;background:#fff;color:var(--text);height:44px;min-height:44px;width:100%;line-height:normal;}   /* 선택·입력·날짜 상자 높이를 44px 하나로 (크롬 select 46px·date 기본 높이 차이 제거) */
.inp:focus,.sel:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.12);}
.inp.mono{font-family:'Space Mono',monospace;}
.chk{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text);cursor:pointer;min-height:36px;}
.chk input{width:18px;height:18px;accent-color:var(--accent);flex-shrink:0;}
.chk small{color:var(--muted);font-size:11px;}
.rule-list{display:grid;grid-template-columns:1fr;gap:2px;}
.range-inp{-webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:3px;background:rgba(37,99,235,.15);outline:none;cursor:pointer;margin:14px 0;}
.range-inp::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--accent);cursor:pointer;}
.range-inp::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--accent);cursor:pointer;border:none;}

/* 종류 선택 버튼 */
.method-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
.method-btn{font-family:inherit;text-align:left;padding:10px 12px;border:1px solid var(--border2);border-radius:8px;background:var(--card);cursor:pointer;transition:.15s;min-height:44px;}
.method-btn b{display:block;font-size:13px;color:var(--text);}
.method-btn span{display:block;font-size:11px;color:var(--muted);line-height:1.45;margin-top:2px;}
.method-btn:hover{border-color:var(--accent);}
.method-btn.active{border-color:var(--accent);background:rgba(37,99,235,.07);box-shadow:inset 0 0 0 1px var(--accent);}
.method-btn.active b{color:var(--accent);}

/* 버튼 */
.btn{font-family:inherit;font-size:12px;font-weight:700;padding:9px 14px;border-radius:8px;border:1px solid var(--border2);background:var(--card);color:var(--muted);cursor:pointer;transition:.15s;min-height:44px;display:inline-flex;align-items:center;gap:6px;text-decoration:none;}
.btn:hover,.btn:active{color:var(--accent);border-color:var(--accent);}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;}
.btn-primary:hover{opacity:.88;color:#fff;}
.btn-sm{min-height:34px;padding:5px 10px;font-size:11px;}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;}

/* 통계 박스 */
.stat-grid-4{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.stat-box{background:var(--card2);border:1px solid var(--border);border-radius:8px;padding:12px 8px;text-align:center;min-width:0;}
.stat-val{font-family:'Space Mono',monospace;font-size:20px;font-weight:700;color:var(--accent);word-break:break-all;line-height:1.3;}
.stat-val.orange{color:var(--orange);}
.stat-val.green{color:var(--green);}
.stat-val.red{color:var(--red);}
.stat-val.amber{color:var(--amber);}
.stat-val.teal{color:var(--teal);}
.stat-lbl{font-size:11px;color:var(--muted);margin-top:4px;line-height:1.4;}
.stat-sub{font-size:10px;color:var(--dim);font-family:'Space Mono',monospace;}

/* 차트 */
.chart-container{position:relative;height:300px;}
.chart-container.sm{height:200px;}
.chart-legend{display:flex;gap:12px;flex-wrap:wrap;font-size:11px;color:var(--muted);margin-bottom:8px;}
.chart-legend i{display:inline-block;width:14px;height:3px;border-radius:2px;vertical-align:middle;margin-right:4px;}

/* 표 */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--border);border-radius:8px;}
.table-wrap.scroll{max-height:360px;overflow-y:auto;}
.table-wrap.scroll th{position:sticky;top:0;z-index:1;}
table.dt{width:100%;border-collapse:collapse;font-size:12px;}
table.dt th{background:var(--card2);font-weight:700;color:var(--muted);text-align:left;padding:8px 10px;border-bottom:1px solid var(--border);white-space:nowrap;}
table.dt td{padding:7px 10px;border-bottom:1px solid var(--border);white-space:nowrap;}
table.dt tr:last-child td{border-bottom:none;}
table.dt td.num,table.dt th.num{text-align:right;font-family:'Space Mono',monospace;}
table.dt tr.hl td{background:rgba(220,38,38,.05);}
table.dt tr.vital td{background:rgba(13,148,136,.06);}
.mini-bar{display:inline-block;height:8px;border-radius:4px;background:var(--teal);vertical-align:middle;}

/* 정보 블록·해석 */
.info-block{font-size:12px;color:var(--muted);line-height:1.75;padding:10px 14px;background:rgba(37,99,235,.04);border-radius:8px;border:1px solid rgba(37,99,235,.1);}
.info-block strong{color:var(--text);}
.info-block code{font-family:'Space Mono',monospace;font-size:11px;background:rgba(0,0,0,.05);padding:1px 5px;border-radius:4px;color:var(--text);}
.insight{list-style:none;display:flex;flex-direction:column;gap:8px;}
.insight li{font-size:13px;line-height:1.65;padding:10px 12px 10px 14px;border-radius:8px;background:var(--card2);border-left:3px solid var(--accent);}
.insight li.warn{border-left-color:var(--amber);background:rgba(217,119,6,.06);}
.insight li.bad{border-left-color:var(--red);background:rgba(220,38,38,.05);}
.insight li.good{border-left-color:var(--green);background:rgba(5,150,105,.06);}
.insight li b{color:var(--text);}
.grade{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:4px;font-family:'Space Mono',monospace;}
.grade.g1{background:rgba(5,150,105,.12);color:var(--green);}
.grade.g2{background:rgba(37,99,235,.1);color:var(--accent);}
.grade.g3{background:rgba(217,119,6,.12);color:var(--amber);}
.grade.g4{background:rgba(220,38,38,.1);color:var(--red);}
.empty-note{font-size:13px;color:var(--muted);text-align:center;padding:26px 10px;}
.formula{font-family:'Space Mono',monospace;font-size:12px;color:var(--text);background:var(--card2);border:1px solid var(--border);border-radius:8px;padding:10px 12px;line-height:1.9;overflow-x:auto;white-space:nowrap;}
.formula .k{color:var(--muted);font-family:'Noto Sans KR',sans-serif;}
.mono{font-family:'Space Mono',monospace;}
.hidden{display:none !important;}

/* 태블릿 */
@media(min-width:768px){
  .site-header{padding:14px 24px;}
  .page{padding:0 24px 80px;}
  .a-card{padding:16px 18px;}
  .form-grid{grid-template-columns:repeat(2,1fr);}
  .stat-grid-4{grid-template-columns:repeat(4,1fr);}
  .method-grid{grid-template-columns:repeat(4,1fr);}
  .rule-list{grid-template-columns:repeat(2,1fr);}
  .stat-val{font-size:22px;}
  .chart-container{height:340px;}
  .chart-container.sm{height:220px;}
}
/* 데스크톱 */
@media(min-width:1024px){
  .form-grid.c3{grid-template-columns:repeat(3,1fr);}
  .form-grid.c4{grid-template-columns:repeat(4,1fr);}
}