/* ===== JGE 스크린 스타일가이드 토큰 (artifact_db 캐논 승계) ===== */
:root{
  --panel:#ffffff; --nav:#f7f8f9; --card:#f9fafb; --thumb:#f0f3f6;
  --line:#e5e7e9; --line-2:#f1f4f6;
  --ink:#20272b; --ink2:#5c5f62; --ink3:#9da1a5;
  --blue:#49b3ef; --blue-hover:#3a9fdb; --blue-active:#2d8bc5; --blue-bg:#e5f4fd;
  --ok:#1fb574; --ok-bg:#ecfdf5;
  --bad:#f25352; --bad-bg:#fef2f2; --bad-line:#f7b6bc;
  --warn:#f59e0b; --warn-bg:#fdf5e2;
  --sans:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Noto Sans KR',sans-serif;
  --sh:0 1px 3px rgba(32,39,43,.06),0 4px 14px rgba(32,39,43,.04);
  --r:8px; --r-lg:12px;
  --header-h:88px;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{font-family:var(--sans);background:var(--nav);color:var(--ink);line-height:1.5;
  word-break:keep-all;overflow-wrap:break-word;font-size:15px;-webkit-font-smoothing:antialiased}

/* ===== 공통 상단 헤더 ===== */
header.top{display:flex;align-items:center;height:var(--header-h);padding:0 48px;
  border-bottom:1px solid var(--line);background:var(--panel);position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:14px}
.brand .logo{display:block;height:32px}
.brand .x{color:var(--ink3);font-size:.9rem}
header.top .right{margin-left:auto;display:flex;align-items:center;gap:16px}
.lab-home{display:inline-flex;align-items:center;gap:6px;font-size:.88rem;font-weight:700;
  color:var(--ink2);text-decoration:none;padding:8px 14px;border:1px solid var(--line);
  border-radius:999px;transition:all .12s}
.lab-home:hover{border-color:var(--blue);color:var(--blue)}

/* ===== 기능 탭 (A/B 전환) ===== */
nav.tabs{display:flex;gap:6px;margin-left:40px}
nav.tabs a{display:inline-flex;align-items:center;padding:10px 20px;border-radius:999px;
  font-size:.92rem;font-weight:700;color:var(--ink2);text-decoration:none;transition:all .12s}
nav.tabs a:hover{color:var(--blue)}
nav.tabs a.on{background:var(--blue-bg);color:var(--blue-active)}

/* ===== 버튼 ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--blue);
  background:var(--blue);color:#fff;font-family:var(--sans);font-weight:700;font-size:.9rem;
  padding:12px 22px;border-radius:var(--r);cursor:pointer;transition:all .12s}
.btn:hover{background:var(--blue-hover);border-color:var(--blue-hover)}
.btn:active{background:var(--blue-active);border-color:var(--blue-active)}
.btn.ghost{background:var(--panel);border-color:var(--line);color:var(--ink2)}
.btn.ghost:hover{border-color:var(--blue);color:var(--blue)}

/* ===== 본문 공통 ===== */
main.page{max-width:1080px;margin:0 auto;padding:48px 40px 96px}
.page-eyebrow{font-size:.8rem;font-weight:800;color:var(--blue);letter-spacing:.08em}
.page-title{margin-top:10px;font-size:30px;font-weight:800;letter-spacing:-.02em}
.page-sub{margin-top:10px;font-size:16px;font-weight:600;color:var(--ink2);line-height:1.6;max-width:720px}

/* ===== 업로드 폼 ===== */
.form-error{margin-top:28px;padding:14px 18px;border:1px solid var(--bad-line);
  border-radius:var(--r);background:var(--bad-bg);color:var(--bad);font-weight:700;font-size:.92rem}
form.upload-panel{margin-top:28px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:28px;box-shadow:var(--sh)}
.field{margin-bottom:18px}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field label{display:block;font-size:.85rem;font-weight:800;color:var(--ink2);margin-bottom:8px}
.field input[type=text],.field input[type=password]{width:100%;max-width:420px;padding:11px 14px;border:1px solid var(--line);
  border-radius:var(--r);font-family:var(--sans);font-size:.95rem;letter-spacing:.04em;
  text-transform:uppercase;background:var(--card);color:var(--ink)}
.field input[type=text]:focus,.field input[type=password]:focus{outline:none;border-color:var(--blue);background:var(--panel)}
.field input[type=file]{display:block;width:100%;padding:10px;border:1px dashed var(--line);
  border-radius:var(--r);background:var(--card);font-family:var(--sans);font-size:.88rem;color:var(--ink2)}
form.upload-panel .btn{margin-top:4px}
form.upload-panel .btn:disabled{opacity:.6;cursor:progress}

/* ===== 판정 결과 ===== */
.result{margin-top:36px;display:grid;gap:20px}
.verdict-banner{border-radius:var(--r-lg);padding:24px 28px;border:1px solid var(--line);background:var(--panel)}
.verdict-banner.ok{background:var(--ok-bg);border-color:var(--ok)}
.verdict-banner.bad{background:var(--bad-bg);border-color:var(--bad-line)}
.verdict-banner.warn{background:var(--warn-bg);border-color:var(--warn)}
.verdict-word{font-size:24px;font-weight:800;letter-spacing:-.01em}
.ok .verdict-word{color:var(--ok)}
.bad .verdict-word{color:var(--bad)}
.warn .verdict-word{color:var(--warn)}
.flags{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
.flag{display:inline-flex;padding:4px 12px;border-radius:999px;background:var(--bad);
  color:#fff;font-size:.82rem;font-weight:800}
.reasons{margin-top:12px;padding-left:20px;color:var(--ink2);font-size:.92rem;font-weight:600;display:grid;gap:4px}

/* ADAS 4종 3-state */
.adas-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.adas-cell{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:18px;text-align:center;box-shadow:var(--sh)}
.adas-name{font-size:.88rem;font-weight:800;margin-bottom:10px}
.chip{display:inline-flex;align-items:center;padding:5px 14px;border-radius:999px;
  font-size:.85rem;font-weight:800}
.chip.yes{background:var(--ok-bg);color:var(--ok)}
.chip.no{background:var(--thumb);color:var(--ink2)}
.chip.na{background:var(--warn-bg);color:var(--warn)}
.chip.mut{background:var(--card);color:var(--ink3)}
.chip.sm{padding:3px 10px;font-size:.78rem}

/* 카드 공통 */
.cards{display:grid;gap:16px}
.cards.two{grid-template-columns:1fr 1fr}
.cards.photos{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.photo-card,.info-card{background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh)}
.photo-card img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--thumb)}
.photo-body,.info-card{padding:0}
.photo-body{padding:16px 18px}
.info-card{padding:18px 20px}
.photo-body header,.info-card header{font-size:.95rem;font-weight:800;margin-bottom:12px;
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap}
.conf{font-size:.78rem;font-weight:700;color:var(--ink3)}
.mock-note{font-size:.75rem;font-weight:700;color:var(--ink3)}
.kv{display:grid;gap:8px}
.kv > div{display:flex;gap:12px;font-size:.9rem}
.kv dt{flex:0 0 92px;color:var(--ink3);font-weight:700}
.kv dd{font-weight:700;color:var(--ink)}
.evidence{margin-top:12px;padding-top:12px;border-top:1px solid var(--line-2);
  font-size:.82rem;color:var(--ink3);line-height:1.55}
.empty{font-size:.88rem;font-weight:600;color:var(--ink3)}
.obs{display:flex;gap:6px;flex-wrap:wrap}

/* 테스트 프로필 카드 (Phase 7 — /adas 차량 선택) */
.profile-card{display:flex;gap:0;margin-bottom:18px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.profile-card[hidden]{display:none}
.profile-card img{flex:0 0 220px;width:220px;object-fit:cover;background:var(--thumb)}
.profile-body{flex:1;padding:16px 18px;min-width:0}
.profile-body header{font-size:.9rem;font-weight:800;margin-bottom:10px;
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap}
.profile-body code{font-size:.85rem;letter-spacing:.04em}
.field select{width:100%;max-width:560px;padding:11px 14px;border:1px solid var(--line);
  border-radius:var(--r);font-family:var(--sans);font-size:.95rem;font-weight:600;
  background:var(--card);color:var(--ink)}
.field select:focus{outline:none;border-color:var(--blue);background:var(--panel)}

@media (max-width:900px){
  :root{--header-h:64px}
  header.top{padding:0 16px;gap:8px}
  .brand .logo{height:24px}
  nav.tabs{margin-left:8px}
  nav.tabs a{padding:8px 12px;font-size:.85rem}
  .lab-home{display:none}
  main.page{padding:32px 20px 72px}
  .page-title{font-size:24px}
  .field-grid,.cards.two{grid-template-columns:1fr}
  .adas-grid{grid-template-columns:repeat(2,1fr)}
  .profile-card{flex-direction:column}
  .profile-card img{flex:none;width:100%;aspect-ratio:16/9}
}