/* =====================================================================
 * 조코딩AX파트너스 — AI 활용 수준 진단
 * Premium dark-purple theme over demodev Design Kit foundations.
 * Base tokens (type scale, spacing, radius, motion) follow demodev;
 * brand accent swapped to JoCoding purple per the kit's per-project rule.
 * ===================================================================== */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

:root {
  /* ---- Brand palette (dark purple-black) ---------------------------- */
  --bg:            #0A0510;
  --bg-2:          #0F0818;
  --surface:       rgba(255,255,255,0.035);
  --surface-2:     rgba(255,255,255,0.055);
  --surface-hover: rgba(255,255,255,0.075);
  --border:        rgba(255,255,255,0.09);
  --border-strong: rgba(168,85,247,0.45);
  --border-subtle: rgba(255,255,255,0.055);

  /* purple ramp */
  --p-50:  #F5EEFF;
  --p-200: #D9C2F2;
  --p-300: #C29CEC;
  --p-400: #A855F7;
  --p-500: #8337BF;
  --p-600: #6D2BA0;
  --p-700: #4E1C75;

  --accent:        #A855F7;
  --accent-deep:   #8337BF;
  --accent-grad:   linear-gradient(135deg, #8337BF 0%, #A855F7 100%);
  --accent-grad-bright: linear-gradient(135deg, #9A45D6 0%, #C06BFF 100%);

  /* text */
  --text:        #F4EFFA;
  --text-dim:    #C3B6D6;
  --text-mute:   #8A7CA3;
  --text-faint:  #5E5274;

  /* glow strength (0–1) — tuned to user's ~60% preference */
  --glow: 0.6;

  /* fonts */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
               "system-ui", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;

  /* radius (demodev) */
  --r-md: 10px;  --r-lg: 12px;  --r-xl: 16px;  --r-2xl: 20px;  --r-3xl: 28px; --r-full: 9999px;

  /* spacing (demodev 4px grid) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
  --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px; --s-20:80px;

  /* motion (demodev) */
  --ease: cubic-bezier(0.2,0,0,1);
  --ease-emph: cubic-bezier(0.3,0,0,1);
  --dur-fast:120ms; --dur:200ms; --dur-slow:340ms;

  /* group identity colors */
  --g1-a:#5B8DEF; --g1-b:#7C5BF0;   /* 입문  Entry        blue→violet */
  --g2-a:#8337BF; --g2-b:#A855F7;   /* 초급  Elementary   violet      */
  --g3-a:#A855F7; --g3-b:#D946EF;   /* 중급  Intermediate purple→magenta */
  --g4-a:#D946EF; --g4-b:#F5A623;   /* 고급  Advanced     magenta→gold  */
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
html {
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body {
  margin:0;
  min-height:100vh;
  letter-spacing:-0.01em;
  overflow-x:hidden;
}
button { font-family: inherit; }
::selection { background: rgba(168,85,247,0.35); color:#fff; }

/* ---- App background : layered purple glows ------------------------- */
#root { position:relative; min-height:100vh; z-index:1; }
.bg-field {
  position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  background:
    radial-gradient(1100px 700px at 18% -8%, rgba(131,55,191,calc(0.30*var(--glow))), transparent 60%),
    radial-gradient(900px 650px at 92% 8%, rgba(168,85,247,calc(0.22*var(--glow))), transparent 58%),
    radial-gradient(1000px 800px at 50% 116%, rgba(110,43,160,calc(0.26*var(--glow))), transparent 60%),
    var(--bg);
}
.bg-field::after {
  /* faint grain to avoid banding */
  content:""; position:absolute; inset:0; opacity:0.5;
  background-image: radial-gradient(rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size: 4px 4px;
}
.bg-orb {
  position:absolute; border-radius:50%; filter: blur(60px);
  opacity: calc(0.5 * var(--glow));
}

/* ===== Typography helpers (demodev scale) =========================== */
.eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600; letter-spacing:0.04em;
  color: var(--p-300); text-transform:none;
}
.t-dim { color: var(--text-dim); }
.t-mute{ color: var(--text-mute); }

/* ===== Glass card =================================================== */
.card {
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--r-2xl);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ===== Buttons (demodev heights) ==================================== */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:48px; padding:0 26px; border:none; border-radius: var(--r-lg);
  font-size:16px; font-weight:600; letter-spacing:-0.01em; cursor:pointer;
  color:#fff; background: var(--accent-grad);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), filter var(--dur) var(--ease);
  box-shadow: 0 8px 24px rgba(131,55,191,calc(0.45*var(--glow))), inset 0 1px 0 rgba(255,255,255,0.18);
  position:relative; overflow:hidden;
}
.btn::after{ /* sheen */
  content:""; position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform 600ms var(--ease);
}
.btn:hover { transform: translateY(-2px); filter:saturate(1.08) brightness(1.06);
  box-shadow: 0 14px 38px rgba(168,85,247,calc(0.6*var(--glow))), inset 0 1px 0 rgba(255,255,255,0.22); }
.btn:hover::after{ transform: translateX(120%); }
.btn:active { transform: translateY(0) scale(0.985); }
.btn:disabled { opacity:0.4; cursor:not-allowed; filter:grayscale(0.3); box-shadow:none; }
.btn:disabled:hover { transform:none; }

.btn-ghost {
  background: var(--surface); color: var(--text-dim);
  border:1px solid var(--border); box-shadow:none;
}
.btn-ghost::after{ display:none; }
.btn-ghost:hover { background: var(--surface-hover); color: var(--text); transform: translateY(-1px); box-shadow:none; filter:none; border-color: var(--border-strong); }
.btn-sm { height:40px; padding:0 18px; font-size:14px; border-radius: var(--r-md); }

/* ===== Chip ========================================================= */
.chip {
  display:inline-flex; align-items:center; gap:7px;
  height:32px; padding:0 14px; border-radius: var(--r-full);
  font-size:13px; font-weight:600; color: var(--p-200);
  background: rgba(168,85,247,0.10); border:1px solid rgba(168,85,247,0.28);
}

/* ===== View transition ============================================= */
.view-enter { animation: viewIn 460ms var(--ease-emph) both; }
@keyframes viewIn {
  from { opacity:0; transform: translateY(14px) scale(0.992); }
  to   { opacity:1; transform: none; }
}
@keyframes fadeUp {
  from { opacity:0; transform: translateY(16px); }
  to   { opacity:1; transform:none; }
}
@keyframes popIn {
  0%   { opacity:0; transform: scale(0.8); }
  60%  { opacity:1; transform: scale(1.04); }
  100% { transform: scale(1); }
}

/* ===== Layout shell ================================================= */
.shell { position:relative; z-index:2; min-height:100vh; display:flex; flex-direction:column; }
.topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding: 22px clamp(20px,5vw,56px);
}
.topbar .logo { height:26px; }
.page {
  flex:1; width:100%; max-width:760px; margin:0 auto;
  padding: 0 clamp(20px,5vw,40px) 64px;
}
.page-wide { max-width: 1180px; }

@media (max-width:640px){
  .topbar { padding:16px 18px; }
  .topbar .logo { height:22px; }
}

/* scrollbar */
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background: rgba(168,85,247,0.25); border-radius:10px; border:2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(168,85,247,0.4); background-clip: padding-box; }
/* =====================================================================
 * screens.css — per-screen styles (welcome / survey / result / admin)
 * ===================================================================== */

/* ============================ WELCOME ============================== */
.welcome {
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding-top: clamp(36px, 9vh, 96px);
}
.welcome .eyebrow {
  padding:8px 16px; border-radius: var(--r-full);
  background: rgba(168,85,247,0.10); border:1px solid rgba(168,85,247,0.28);
  animation: fadeUp 500ms var(--ease) both;
}
.hero-headline {
  font-size: clamp(40px, 7vw, 72px); font-weight:800; line-height:1.08;
  letter-spacing:-0.03em; margin: 26px 0 0;
  animation: fadeUp 560ms var(--ease) 60ms both;
}
.hero-headline .grad {
  background: linear-gradient(120deg, #C06BFF 0%, #A855F7 45%, #7C5BF0 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  position:relative;
}
.hero-sub {
  font-size: clamp(16px, 2.2vw, 20px); color: var(--text-dim);
  line-height:1.6; max-width: 540px; margin: 22px auto 0;
  animation: fadeUp 600ms var(--ease) 130ms both;
}
.hero-meta {
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:30px;
  animation: fadeUp 640ms var(--ease) 200ms both;
}
.meta-chip {
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 15px; border-radius: var(--r-full);
  background: var(--surface); border:1px solid var(--border);
  font-size:14px; color: var(--text-dim); font-weight:500;
}
.meta-chip svg { color: var(--p-300); }
.welcome-cta { margin-top:40px; animation: fadeUp 680ms var(--ease) 270ms both; }
.welcome-cta .btn { height:54px; padding:0 34px; font-size:17px; }
.welcome-note {
  margin-top:18px; font-size:13px; color: var(--text-mute);
  display:flex; align-items:center; gap:7px; justify-content:center;
  animation: fadeUp 720ms var(--ease) 340ms both;
}
.welcome-note svg { color: var(--text-mute); }

/* floating preview ring behind hero */
.hero-orb {
  position:absolute; left:50%; top: 38%; transform: translate(-50%,-50%);
  width: min(680px, 90vw); height: min(680px,90vw); z-index:-1; pointer-events:none;
  border-radius:50%;
  background: radial-gradient(circle, rgba(168,85,247,calc(0.16*var(--glow))), transparent 62%);
  filter: blur(8px);
}

/* ============================ SURVEY =============================== */
.survey { padding-top: 8px; }
.step-progress { position:sticky; top:0; z-index:5; padding: 18px 0 22px;
  background: linear-gradient(180deg, var(--bg) 60%, transparent); }
.step-progress-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px; }
.step-count { font-size:15px; letter-spacing:0.02em; }
.step-count b { color: var(--text); font-weight:700; font-variant-numeric: tabular-nums; }
.step-pct { font-size:13px; font-weight:600; font-variant-numeric: tabular-nums; }
.seg-track { display:flex; gap:6px; }
.seg { flex:1; height:5px; border-radius: var(--r-full); background: rgba(255,255,255,0.08);
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.seg.done { background: var(--accent-grad); }
.seg.active { background: linear-gradient(90deg, var(--accent) 0%, rgba(168,85,247,0.25) 100%);
  box-shadow: 0 0 14px rgba(168,85,247,calc(0.7*var(--glow))); }

.q-block { animation: viewIn 420ms var(--ease-emph) both; }
.q-eyebrow { font-size:13px; font-weight:700; letter-spacing:0.06em; color: var(--p-300); }
.q-title { font-size: clamp(24px, 4vw, 34px); font-weight:700; line-height:1.28;
  letter-spacing:-0.02em; margin:10px 0 0; text-wrap:balance; }
.q-hint { margin-top:12px; font-size:14px; color: var(--text-mute); display:inline-flex; align-items:center; gap:7px; }
.q-hint .dot { width:5px; height:5px; border-radius:50%; background: var(--p-400); }

.opt-list { display:flex; flex-direction:column; gap:10px; margin-top:28px; }
.opt {
  display:flex; align-items:center; gap:16px; width:100%; text-align:left;
  padding:18px 20px; border-radius: var(--r-xl); cursor:pointer;
  background: var(--surface); border:1px solid var(--border); color: var(--text);
  font-size:16.5px; font-weight:500; letter-spacing:-0.01em;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
              background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  position:relative; overflow:hidden;
}
.opt:hover { transform: translateY(-2px); background: var(--surface-hover);
  border-color: rgba(168,85,247,0.4); }
.opt:active { transform: translateY(0); }
.opt .marker {
  width:26px; height:26px; flex-shrink:0; border-radius: var(--r-full);
  border:2px solid var(--border-strong); display:flex; align-items:center; justify-content:center;
  color:#fff; transition: all var(--dur) var(--ease); background: transparent;
}
.opt.multi .marker { border-radius: 8px; }
.opt .marker svg { opacity:0; transform: scale(0.5); transition: all var(--dur) var(--ease); }
.opt .label { flex:1; }
.opt.selected {
  background: linear-gradient(135deg, rgba(131,55,191,0.22), rgba(168,85,247,0.12));
  border-color: rgba(168,85,247,0.7);
  box-shadow: 0 0 0 1px rgba(168,85,247,0.5), 0 10px 34px rgba(131,55,191,calc(0.45*var(--glow)));
}
.opt.selected .marker { background: var(--accent-grad); border-color: transparent;
  box-shadow: 0 0 16px rgba(168,85,247,calc(0.7*var(--glow))); }
.opt.selected .marker svg { opacity:1; transform: scale(1); }
.opt.selected .label { color:#fff; font-weight:600; }
.opt .glow-line { position:absolute; left:0; top:0; bottom:0; width:3px; border-radius:3px;
  background: var(--accent-grad); opacity:0; transition: opacity var(--dur) var(--ease); }
.opt.selected .glow-line { opacity:1; }

.q-textarea {
  width:100%; margin-top:24px; min-height:140px; resize:vertical;
  padding:18px 20px; border-radius: var(--r-xl);
  background: var(--surface); border:1px solid var(--border); color: var(--text);
  font-family: inherit; font-size:16px; line-height:1.6; letter-spacing:-0.01em;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.q-textarea::placeholder { color: var(--text-faint); }
.q-textarea:focus { outline:none; border-color: rgba(168,85,247,0.6);
  box-shadow: 0 0 0 3px rgba(168,85,247,0.18); }

.nav-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:34px; }
.nav-row .spacer { flex:1; }

.err-toast {
  display:flex; align-items:center; gap:10px; margin-top:18px;
  padding:13px 16px; border-radius: var(--r-lg);
  background: rgba(239,16,38,0.10); border:1px solid rgba(239,16,38,0.32);
  color:#FFB4BC; font-size:14px; font-weight:500;
  animation: fadeUp 240ms var(--ease) both;
}
.err-toast svg { color:#FF6B78; }

/* ============================ RESULT =============================== */
.result { padding-top: 12px; display:flex; flex-direction:column; align-items:center; text-align:center; }
.result .eyebrow { animation: fadeUp 460ms var(--ease) both; }

.result-badge {
  position:relative; display:inline-flex; flex-direction:column; align-items:center;
  gap:6px; margin-top:22px; padding:30px 46px; border-radius: var(--r-3xl);
  color:#fff; animation: popIn 640ms var(--ease-emph) both;
  background: linear-gradient(135deg, var(--g-a), var(--g-b));
  box-shadow: 0 24px 70px rgba(0,0,0,0.4), 0 0 80px var(--g-glow), inset 0 1px 0 rgba(255,255,255,0.3);
}
.result-badge::after {
  content:""; position:absolute; inset:0; border-radius: inherit; pointer-events:none;
  background: radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,0.28), transparent 60%);
}
.result-badge .b-en { font-size:13px; font-weight:700; letter-spacing:0.18em; opacity:0.85; text-transform:uppercase; }
.result-badge .b-name { font-size: clamp(44px, 9vw, 68px); font-weight:800; line-height:1; letter-spacing:-0.02em; }
.result-tag { margin-top:22px; font-size: clamp(18px,3vw,24px); font-weight:600; color: var(--text);
  animation: fadeUp 560ms var(--ease) 200ms both; }
.result-desc { margin-top:14px; font-size:16px; line-height:1.7; color: var(--text-dim);
  max-width:560px; animation: fadeUp 600ms var(--ease) 280ms both; }

/* score meter */
.meter-wrap { margin-top:40px; display:flex; flex-direction:column; align-items:center;
  animation: fadeUp 600ms var(--ease) 340ms both; }
.meter { position:relative; width:230px; height:230px; }
.meter svg { transform: rotate(-90deg); }
.meter-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.meter-score { font-size:64px; font-weight:800; line-height:1; letter-spacing:-0.03em; font-variant-numeric: tabular-nums; }
.meter-score .unit { font-size:24px; font-weight:600; color: var(--text-mute); margin-left:3px; }
.meter-label { margin-top:6px; font-size:13px; font-weight:600; letter-spacing:0.04em; color: var(--text-mute); }

/* spectrum of all 4 groups */
.spectrum { width:100%; max-width:600px; margin-top:46px; animation: fadeUp 640ms var(--ease) 420ms both; }
.spectrum-head { display:flex; justify-content:space-between; margin-bottom:12px; }
.spectrum-head .lbl { font-size:13px; font-weight:600; color: var(--text-mute); }
.spectrum-bar { display:flex; gap:6px; height:64px; }
.spec-seg { flex:1; border-radius: var(--r-lg); position:relative; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border); background: var(--surface); transition: all var(--dur) var(--ease); overflow:hidden; }
.spec-seg .seg-name { font-size:14px; font-weight:600; color: var(--text-mute); z-index:1; }
.spec-seg.on { border-color: transparent; }
.spec-seg.on .seg-name { color:#fff; font-weight:700; }
.spec-seg.on::before { content:""; position:absolute; inset:0;
  background: linear-gradient(135deg, var(--s-a), var(--s-b)); }
.spec-seg.on::after { content:""; position:absolute; inset:0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25); }
.spec-seg.on .seg-name { position:relative; }
.spec-marker { margin-top:10px; font-size:13px; color: var(--p-200); font-weight:600;
  display:flex; align-items:center; gap:6px; justify-content:center; }

/* traits */
.trait-row { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:40px;
  animation: fadeUp 660ms var(--ease) 480ms both; }
.trait {
  display:inline-flex; align-items:center; gap:9px; padding:11px 17px; border-radius: var(--r-full);
  background: var(--surface); border:1px solid var(--border); font-size:14.5px; color: var(--text-dim); font-weight:500;
}
.trait svg { color: var(--g-a); }

/* process / next-step timeline */
.next-card { width:100%; max-width:680px; margin-top:54px; padding: clamp(26px,4vw,38px);
  text-align:left; animation: fadeUp 700ms var(--ease) 560ms both; }
.next-head { display:flex; align-items:center; gap:12px; }
.next-head .ic { width:44px; height:44px; border-radius: var(--r-lg); display:flex; align-items:center; justify-content:center;
  color:#fff; background: var(--accent-grad); box-shadow: 0 8px 22px rgba(131,55,191,calc(0.5*var(--glow))); }
.next-title { font-size:20px; font-weight:700; }
.next-sub { margin-top:14px; font-size:15.5px; line-height:1.7; color: var(--text-dim); }
.timeline { margin-top:28px; display:flex; flex-direction:column; gap:0; }
.tl-step { display:flex; gap:18px; position:relative; padding-bottom:26px; }
.tl-step:last-child { padding-bottom:0; }
.tl-rail { display:flex; flex-direction:column; align-items:center; }
.tl-node { width:38px; height:38px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:15px; z-index:1; transition: all var(--dur) var(--ease); }
.tl-node.cur { background: var(--accent-grad); color:#fff; box-shadow: 0 0 20px rgba(168,85,247,calc(0.7*var(--glow))); }
.tl-node.todo { background: var(--surface-2); color: var(--text-mute); border:1px solid var(--border); }
.tl-line { flex:1; width:2px; background: linear-gradient(180deg, rgba(168,85,247,0.5), rgba(255,255,255,0.08));
  margin:4px 0; min-height:20px; }
.tl-step:last-child .tl-line { display:none; }
.tl-body { padding-top:6px; }
.tl-step-title { font-size:16px; font-weight:600; display:flex; align-items:center; gap:9px; }
.tl-badge { font-size:11px; font-weight:700; padding:3px 9px; border-radius: var(--r-full);
  background: rgba(168,85,247,0.18); color: var(--p-200); }
.tl-step-desc { margin-top:5px; font-size:14px; color: var(--text-mute); line-height:1.6; }

.result-actions { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:44px;
  animation: fadeUp 740ms var(--ease) 640ms both; }

/* ============================ ADMIN =============================== */
.admin { padding-top:10px; }
.admin-head { display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom:30px; }
.admin-title { font-size: clamp(26px,4vw,34px); font-weight:800; letter-spacing:-0.02em; }
.admin-title .grad { background: linear-gradient(120deg,#C06BFF,#7C5BF0); -webkit-background-clip:text; background-clip:text; color:transparent; }
.admin-sub { margin-top:8px; font-size:14.5px; color: var(--text-mute); }
.admin-filters { display:flex; gap:8px; flex-wrap:wrap; }
.fchip { height:38px; padding:0 16px; border-radius: var(--r-md); font-size:13.5px; font-weight:600;
  background: var(--surface); border:1px solid var(--border); color: var(--text-dim); cursor:pointer;
  display:inline-flex; align-items:center; transition: all var(--dur) var(--ease); }
.fchip:hover { border-color: var(--border-strong); color: var(--text); }
.fchip.on { background: var(--accent-grad); color:#fff; border-color:transparent;
  box-shadow: 0 6px 18px rgba(131,55,191,calc(0.4*var(--glow))); }

.stat-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:16px; }
.stat-card { padding:22px 22px 20px; border-radius: var(--r-xl); position:relative; overflow:hidden; }
.stat-card .ic { width:40px; height:40px; border-radius: var(--r-md); display:flex; align-items:center; justify-content:center;
  background: rgba(168,85,247,0.14); color: var(--p-300); margin-bottom:16px; }
.stat-val { font-size:34px; font-weight:800; letter-spacing:-0.02em; line-height:1; font-variant-numeric: tabular-nums; }
.stat-val .unit { font-size:17px; font-weight:600; color: var(--text-mute); margin-left:3px; }
.stat-lbl { margin-top:9px; font-size:13.5px; color: var(--text-mute); font-weight:500; }
.stat-trend { position:absolute; top:22px; right:20px; font-size:12.5px; font-weight:700;
  color:#5FE39A; display:inline-flex; align-items:center; gap:3px; }

.chart-row { display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin-top:16px; }
.chart-card { padding:24px; border-radius: var(--r-xl); }
.chart-title { font-size:16px; font-weight:700; display:flex; align-items:center; gap:9px; }
.chart-title svg { color: var(--p-300); }
.chart-note { font-size:13px; color: var(--text-mute); margin-top:4px; }

/* group distribution bars */
.gbars { margin-top:22px; display:flex; flex-direction:column; gap:16px; }
.gbar-row { display:grid; grid-template-columns: 64px 1fr auto; align-items:center; gap:14px; }
.gbar-name { font-size:14px; font-weight:700; }
.gbar-track { height:14px; border-radius: var(--r-full); background: rgba(255,255,255,0.06); overflow:hidden; }
.gbar-fill { height:100%; border-radius: var(--r-full); width:0;
  transition: width 900ms var(--ease-emph); box-shadow: 0 0 16px var(--gb-glow); }
.gbar-val { font-size:13.5px; font-weight:700; color: var(--text-dim); font-variant-numeric: tabular-nums;
  min-width:78px; text-align:right; }

/* histogram */
.histo { margin-top:26px; display:flex; align-items:flex-end; gap:8px; height:160px; }
.histo-col { flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; height:100%; justify-content:flex-end; }
.histo-bar { width:100%; border-radius:6px 6px 3px 3px; background: var(--accent-grad);
  min-height:4px; transition: height 800ms var(--ease-emph); position:relative; }
.histo-bar:hover::after { content: attr(data-v); position:absolute; top:-22px; left:50%; transform:translateX(-50%);
  font-size:11px; font-weight:700; color: var(--text); white-space:nowrap; }
.histo-x { font-size:10.5px; color: var(--text-mute); font-weight:500; }

/* table */
.table-card { margin-top:16px; padding:6px 6px 6px; border-radius: var(--r-xl); overflow:hidden; }
.table-head { padding:20px 22px 14px; display:flex; align-items:center; justify-content:space-between; }
.tbl-wrap { overflow-x:auto; }
table.resp { width:100%; border-collapse:collapse; font-size:14px; }
table.resp th { text-align:left; padding:11px 16px; font-size:12px; font-weight:700; letter-spacing:0.03em;
  color: var(--text-mute); text-transform:uppercase; border-bottom:1px solid var(--border); white-space:nowrap; }
table.resp td { padding:14px 16px; border-bottom:1px solid var(--border-subtle); color: var(--text-dim); white-space:nowrap; }
table.resp tr:last-child td { border-bottom:none; }
table.resp tbody tr { transition: background var(--dur-fast) var(--ease); }
table.resp tbody tr:hover { background: rgba(255,255,255,0.03); }
.cell-name { color: var(--text); font-weight:600; }
.cell-dept { color: var(--text-mute); font-size:13px; }
.cell-score { font-weight:700; color: var(--text); font-variant-numeric: tabular-nums; }
.gbadge { display:inline-flex; align-items:center; gap:7px; padding:5px 12px; border-radius: var(--r-full);
  font-size:13px; font-weight:700; color:#fff; }
.gbadge .dot { width:7px; height:7px; border-radius:50%; background: rgba(255,255,255,0.9); }

.admin-link { position:fixed; right:18px; bottom:18px; z-index:20; }

/* ===== responsive ===== */
@media (max-width: 900px){
  .stat-grid { grid-template-columns: repeat(2,1fr); }
  .chart-row { grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  .opt { padding:16px 16px; font-size:15.5px; gap:13px; }
  .result-badge { padding:24px 30px; }
  .meter { width:200px; height:200px; }
  .next-card { padding:22px; }
  .stat-card { padding:18px; }
  .stat-val { font-size:28px; }
  .spectrum-bar { height:54px; }
  .nav-row .btn { flex:1; }
}