/* =====================================================================
 * 조코딩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 (clean white) --------------------------------- */
  --bg:            #FFFFFF;
  --bg-2:          #eff1f4;
  --surface:       #ffffff;
  --surface-2:     #f6f7f9;
  --surface-hover: #eff1f4;
  --border:        rgba(22,23,27,0.10);
  --border-strong: rgba(45,100,250,0.45);
  --border-subtle: rgba(22,23,27,0.06);

  /* blue ramp (primary #2D64FA) */
  --p-50:  #eaf0fe;
  --p-200: #1f54d6;
  --p-300: #2d64fa;
  --p-400: #2d64fa;
  --p-500: #1f54d6;
  --p-600: #1846b3;
  --p-700: #123a90;

  --accent:        #2d64fa;
  --accent-deep:   #1f54d6;
  --accent-grad:   linear-gradient(135deg, #1f54d6 0%, #2d64fa 100%);
  --accent-grad-bright: linear-gradient(135deg, #2d64fa 0%, #5985fb 100%);

  /* text */
  --text:        #16171b;
  --text-dim:    #4f535d;
  --text-mute:   #6d717e;
  --text-faint:  #9ca0ab;

  /* 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:#E0A800; --g1-b:#F6C205;   /* 입문  Entry        gold        */
  --g2-a:#1F54D6; --g2-b:#2D64FA;   /* 초급  Elementary   blue        */
  --g3-a:#5B16C9; --g3-b:#7507E3;   /* 중급  Intermediate purple      */
  --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(45,100,250,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: var(--bg);
}
.bg-field::after { display:none; }
.bg-orb { display:none; }

/* ===== 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);
  box-shadow: 0 1px 2px rgba(16,24,40,0.04), 0 12px 32px rgba(16,24,40,0.05);
  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(31,84,214,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(45,100,250,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(45,100,250,0.10); border:1px solid rgba(45,100,250,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:780px; margin:0 auto;
  padding: 0 clamp(20px,5vw,40px) 64px;
}
.page-wide { max-width: 1180px; }

/* 초광폭(≥1920px): 콘텐츠 영역 확장 (Figma 1280→780 비율 유지) */
@media (min-width:1920px){
  .page { 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(45,100,250,0.25); border-radius:10px; border:2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(45,100,250,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(45,100,250,0.10); border:1px solid rgba(45,100,250,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;
  word-break: keep-all; /* 한글을 음절 중간이 아닌 띄어쓰기 단위로만 줄바꿈 */
  animation: fadeUp 560ms var(--ease) 60ms both;
}
.hero-headline .grad {
  background: linear-gradient(120deg, #44cdff 0%, #2d64fa 50%, #1f54d6 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  position:relative;
}
.hero-sub {
  font-size: clamp(15px, 1.9vw, 18px); color: var(--text-dim);
  line-height:1.6; max-width: 680px; margin: 22px auto 0;
  text-wrap: pretty;
  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(45,100,250,calc(0.16*var(--glow))), transparent 62%);
  filter: blur(8px);
}

/* ===== Non-tenant landing (Figma 7211-4163) — clean centered hero ===== */
.landing-hero {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: clamp(48px, 9vh, 100px); text-align:center; padding: 40px 20px 80px;
}
.page:has(.landing-hero) { display:flex; }
.landing-hero-text { display:flex; flex-direction:column; align-items:center; gap:32px; }
.landing-hero .hero-headline { margin:0; font-weight:800; animation: fadeUp 560ms var(--ease) 60ms both; }
.landing-hero .hero-headline .grad { font-weight:800; }
.landing-hero .hero-sub { margin:0; color: #ef1026; animation: fadeUp 600ms var(--ease) 130ms both; }
.btn-dark {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:400px; max-width:100%;
  padding:12px 24px; border-radius: var(--r-full);
  background:#16171b; color:#fff; font-size:18px; font-weight:700; letter-spacing:-0.18px;
  text-decoration:none; cursor:pointer;
  animation: fadeUp 640ms var(--ease) 200ms both;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.btn-dark:hover { transform: translateY(-2px); background:#25272d; }
.btn-dark:active { transform: translateY(0); }

/* Top-right admin login link (tenant welcome — Figma 7219-4293) */
.admin-login-link {
  display:inline-flex; align-items:center; gap:4px;
  color:#9ca0ab; font-size:16px; font-weight:600; letter-spacing:-0.16px;
  text-decoration:none; transition: color var(--dur) var(--ease);
}
.admin-login-link:hover { color: var(--text-mute); }

/* Tenant diagnosis-start meta row + gradient CTA (Figma 7219-4293) */
.start-meta { display:flex; gap:40px; justify-content:center; flex-wrap:wrap; }
.start-meta-item { font-size:18px; color: var(--text-mute); letter-spacing:-0.18px; }
.start-meta-sep { font-style:normal; color:#d1d3d8; margin:0 4px; }
.btn-cta {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:400px; max-width:100%;
  padding:12px 32px; border-radius: var(--r-full);
  background: linear-gradient(to right, #44cdff, #2d64fa);
  color:#fff; font-size:18px; font-weight:700; letter-spacing:-0.18px;
  text-decoration:none; cursor:pointer;
  animation: fadeUp 640ms var(--ease) 200ms both;
  transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.btn-cta:hover { transform: translateY(-2px); filter: saturate(1.08) brightness(1.04); }
.btn-cta:active { transform: translateY(0); }

/* ===== Basic info form (Figma 7219-4545) — filled fields, no card ===== */
.info-page { display:flex; flex-direction:column; align-items:center; gap:40px; padding:40px 20px 80px; }
.info-head { font-size:32px; font-weight:700; line-height:1.3; text-align:center; color:var(--text); margin:0; }
.info-form { display:flex; flex-direction:column; gap:24px; width:100%; max-width:440px; }
.info-field { display:flex; flex-direction:column; gap:8px; }
.info-label { font-size:14px; color:var(--text-dim); letter-spacing:-0.14px; }
.field-input {
  width:100%; min-height:48px; padding:0 16px;
  background: var(--bg-2); border:1px solid transparent; border-radius:12px;
  font-family:inherit; font-size:16px; color:var(--text); letter-spacing:-0.16px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.field-input::placeholder { color: var(--text-faint); }
.field-input:focus { outline:none; background:#fff; border-color: rgba(45,100,250,0.55); box-shadow: 0 0 0 3px rgba(45,100,250,0.15); }
/* override the browser autofill background (Chrome paints it light blue) */
.field-input:-webkit-autofill,
.field-input:-webkit-autofill:hover,
.field-input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--bg-2) inset;
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
  transition: background-color 9999s ease-out 0s;
}
.field-input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #fff inset; }
.info-radios { display:flex; gap:8px; padding:4px 0; }
.info-radio { flex:1; display:inline-flex; align-items:center; gap:8px; font-size:16px; font-weight:500; color:var(--text); cursor:pointer; }
.info-consent-check { display:flex; align-items:center; gap:8px; font-size:16px; font-weight:500; color:var(--text); cursor:pointer; }

/* Custom radio / checkbox controls (Figma 7219-4600) — native input visually
   hidden but still focusable/submittable; the styled span reflects state. */
.info-radio .vinput, .info-consent-check .vinput {
  position:absolute; opacity:0; width:0; height:0; margin:0;
}
.vradio, .vcheck {
  flex-shrink:0; width:20px; height:20px; box-sizing:border-box;
  border:1.5px solid #d4d4d8; background:#fff; position:relative;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.vradio { border-radius:50%; }
.vcheck { border-radius:4px; }
.info-radio .vinput:checked + .vradio { border-color: var(--accent); background: var(--accent); }
.info-radio .vinput:checked + .vradio::after {
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:7px; height:7px; border-radius:50%; background:#fff;
}
.info-consent-check .vinput:checked + .vcheck { border-color: var(--accent); background: var(--accent); }
.info-consent-check .vinput:checked + .vcheck::after {
  content:""; position:absolute; left:6px; top:2px;
  width:5px; height:9px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
}
.info-radio .vinput:focus-visible + .vradio,
.info-consent-check .vinput:focus-visible + .vcheck { box-shadow:0 0 0 3px rgba(45,100,250,0.2); }

.info-consent-detail { margin-left:28px; border:1px solid #e4e5e8; border-radius:12px; padding:16px; }
.consent-policy { font-size:14px; line-height:1.5; color:var(--text-mute); letter-spacing:-0.14px; }
.consent-policy p { margin:0; }
.consent-policy p + p { margin-top:4px; }
.consent-policy b { font-weight:600; }
.info-form .btn-cta { align-self:center; margin-top:16px; }

/* ============================ SURVEY =============================== */
.survey { padding-top: 8px; }
/* ===== Survey progress gauge (Figma 7239-4731) — unified across all questions ===== */
.step-progress { padding:0; margin-bottom:44px; }
.step-count { display:flex; align-items:flex-end; gap:4px; margin-bottom:12px; }
.step-count b { color: var(--accent); font-size:24px; font-weight:700; line-height:1.2; font-variant-numeric: tabular-nums; }
.step-total { color: var(--text-mute); font-size:18px; line-height:1.4; letter-spacing:-0.18px; }
.seg-track { display:flex; gap:8px; }
.seg { flex:1; height:6px; border-radius:99px; background:#e4e5e8;
  transition: background var(--dur) var(--ease); }
.seg.done, .seg.active { background: var(--accent); }

.q-block { animation: viewIn 420ms var(--ease-emph) both; }
.q-title { font-size:32px; font-weight:700; line-height:1.3; letter-spacing:-0.02em;
  margin:0; color: var(--text); white-space:pre-line; text-wrap:balance; }
.q-hint { margin-top:8px; font-size:16px; color: var(--text-mute); letter-spacing:-0.16px; }

/* ===== Option cards (Figma) — gray card, checkbox/radio, optional brand icon ===== */
.opt-list { display:flex; flex-direction:column; gap:12px; margin-top:44px; }
.opt {
  display:flex; align-items:center; gap:12px; width:100%; height:60px; text-align:left;
  padding:16px; border-radius:12px; cursor:pointer;
  background:#f6f7f9; border:1.5px solid transparent; color:#3c3f47;
  font-size:18px; font-weight:500; letter-spacing:-0.18px;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
  position:relative;
}
.opt:hover { border-color: rgba(45,100,250,0.35); }
.opt .marker {
  width:24px; height:24px; flex-shrink:0; border-radius:4px;
  border:1.5px solid #d4d4d8; display:flex; align-items:center; justify-content:center;
  color:#fff; background:#fff; transition: all var(--dur) var(--ease);
}
.opt:not(.multi) .marker { border-radius:50%; }

/* 2열 그리드(좌→우, 위→아래로 채움): q1·q10 + q3 그룹(.opt-grid) */
.q-block[data-qid="q1"] .opt-list,
.q-block[data-qid="q10"] .opt-list,
.opt-grid {
  display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:12px;
}
.opt .marker svg { opacity:0; transform: scale(0.5); transition: all var(--dur) var(--ease); }
.opt .opt-icon { width:28px; height:28px; flex-shrink:0; border-radius:4px; overflow:hidden; }
.opt .opt-icon img { width:100%; height:100%; object-fit:cover; display:block; }
.opt .label { flex:1; }
.opt .label .opt-sub { font-size:16px; font-weight:500; color:#6d717e; }

/* Q6 레벨 카드 (Figma 7276-8258) — Level 뱃지 + 메인 라벨 + 예시 */
.opt.opt-level { height:auto; align-items:flex-start; padding:16px; }
.opt-level-body { display:flex; flex-direction:column; gap:4px; flex:1; min-width:0; }
.opt-level-tag { font-size:14px; font-weight:600; color: var(--accent); letter-spacing:-0.14px; }
.opt-level .label { flex:none; font-weight:500; }
.opt-level-ex { font-size:14px; color:#6d717e; letter-spacing:-0.14px; }

/* Q8 카테고리 태그 (Figma 7277-8671) — 기초/실무 활용/업무 혁신 색상 + 원형 멀티 컨트롤 */
.opt-tag { font-size:16px; font-weight:600; letter-spacing:-0.16px; }
.opt-tag--basic { color:#f6c205; }
.opt-tag--practical { color: var(--accent); }
.opt-tag--innovation { color:#7507e3; }
.opt-q8 .marker { border-radius:50%; }

/* Q9 결과물 카드 (Figma 7318-5328) — 썸네일 + 메인 + 보조설명, 2열 단일 선택 */
.q9-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:24px 52px;
  margin-top:44px; align-items:start; }
.q9-card { height:auto; align-items:flex-start; gap:12px; padding:16px 0;
  background:transparent; border:1.5px solid transparent; }
.q9-card:hover { border-color:transparent; }
.q9-card .marker { width:28px; height:28px; }
.q9-body { display:flex; flex-direction:column; gap:12px; flex:1; min-width:0; }
.q9-thumb { width:100%; aspect-ratio:2880/2048; border:1px solid #e4e5e8; border-radius:8px;
  overflow:hidden; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.q9-thumb img { width:100%; height:100%; object-fit:cover; display:block;
  pointer-events:none; -webkit-user-drag:none; user-select:none; }
.q9-text { display:flex; flex-direction:column; gap:4px; }
.q9-card .label { flex:none; font-size:20px; font-weight:600; color:#3c3f47;
  line-height:1.3; letter-spacing:-0.2px; }
.q9-sub { font-size:16px; color:#6d717e; line-height:1.5; letter-spacing:-0.16px; }
/* 보조설명 없는 이미지 카드(아직 구체적이지 않아요): 회색 박스, 이미지 없음 */
.q9-card--plain { background:#f6f7f9; padding:16px; border-radius:12px; margin-top:16px; }
/* 선택 상태: 카드 전체 배경·스트로크 제거(.opt.selected 보다 높은 specificity로 승리).
   선택 효과는 체크아이콘(.marker)·이미지(.q9-thumb)·텍스트(.label)에만 적용. */
.opt.q9-card.selected { background:transparent; border-color:transparent; }
.opt.q9-card.selected .q9-thumb { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
/* 단, "아직 구체적이지 않아요"(이미지 없는 카드)는 다른 페이지 옵션처럼 전체 배경+스트로크 */
.opt.q9-card--plain.selected { background:#eaf0fe; border-color: var(--accent); }

/* Q3 카테고리 그룹 (Figma 7276-7712) — 헤더(아이콘+라벨) + 2열 그리드 */
.opt-group { margin-top:44px; display:flex; flex-direction:column; gap:12px; }
.opt-group .opt-list { margin-top:0; }
.opt-group-header { display:flex; align-items:center; gap:8px; font-size:16px; color:var(--text); letter-spacing:-0.16px; }
.opt-group-icon { width:20px; height:20px; flex-shrink:0; display:inline-flex; }
.opt-group-icon img { width:100%; height:100%; display:block; }

/* Q4 월 지출 슬라이더 (Figma 7276-7917) — 카드 선택 시 wrap 60% dim */
@property --pct { syntax: "<number>"; inherits: true; initial-value: 0; }
.spend-slider-wrap { position:relative; margin-top:44px; padding:20px 0; --pct:0;
  display:flex; flex-direction:column; gap:12px;
  transition: opacity var(--dur) var(--ease), --pct 0.18s var(--ease); }
/* 카드 선택 시: 슬라이더 영역 dim + primary(fill/thumb/tooltip) → gray/400 */
.q-block.q4-card-mode .spend-slider-wrap { opacity:0.6; --accent: #9ca0ab; }
.spend-tooltip-row { position:relative; height:40px; }
.spend-tooltip {
  position:absolute; bottom:0; left: calc(10px + var(--pct) * (100% - 20px)); transform: translateX(-50%);
  background:#fff; color: var(--accent); font-size:18px; font-weight:600; letter-spacing:-0.18px;
  padding:8px 16px; border-radius:8px; white-space:nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 14px 28px rgba(0,0,0,0.05);
}
.spend-tooltip::after { content:""; position:absolute; bottom:-4px; left:50%; transform: translateX(-50%) rotate(45deg);
  width:10px; height:10px; background:#fff; border-radius:1px; }
.spend-slider {
  -webkit-appearance:none; appearance:none; display:block; width:100%; height:12px;
  border-radius:99px; outline:none; cursor:pointer;
  background: linear-gradient(to right,
    var(--accent) 0, var(--accent) calc(10px + var(--pct) * (100% - 20px)),
    #e4e5e8 calc(10px + var(--pct) * (100% - 20px)), #e4e5e8 100%);
}
.spend-slider::-webkit-slider-thumb { -webkit-appearance:none; width:20px; height:20px; border-radius:50%;
  background: var(--accent); border:1.2px solid #fff;
  box-shadow: 0 2.4px 3.6px -0.6px rgba(0,0,0,0.1), 0 0.6px 1.2px -0.6px rgba(0,0,0,0.1); cursor:pointer; }
.spend-slider::-moz-range-thumb { width:20px; height:20px; border:1.2px solid #fff; border-radius:50%;
  background: var(--accent);
  box-shadow: 0 2.4px 3.6px -0.6px rgba(0,0,0,0.1), 0 0.6px 1.2px -0.6px rgba(0,0,0,0.1); cursor:pointer; }
.spend-marks { position:relative; height:21px; }
.spend-marks span { position:absolute; transform:translateX(-50%); white-space:nowrap; font-size:14px; color:#52525b; letter-spacing:-0.14px; }
.spend-marks span:first-child { transform:none; }
.spend-marks span:last-child { transform:translateX(-100%); }
.opt.selected { background:#eaf0fe; border-color: var(--accent); }
.opt.selected .marker { background: var(--accent); border-color: var(--accent); }
.opt.selected .marker svg { opacity:1; transform: scale(1); }
.opt.selected .label { color: var(--accent-deep); font-weight:600; }

/* subtle context chip above q10 echoing the q9 result-type pick */
.q-goal-ref { display:inline-flex; align-items:center; gap:9px; margin-top:20px;
  padding:8px 14px; border-radius: var(--r-full);
  background: rgba(45,100,250,0.08); border:1px solid rgba(45,100,250,0.2); }
.q-goal-ref-tag { font-size:12px; font-weight:600; color: var(--text-mute); letter-spacing:0.02em; }
.q-goal-ref-val { font-size:13px; font-weight:700; color: var(--accent); }
/* tighten the gap only when the chip is actually shown (hidden → textarea keeps its default top) */
.q-goal-ref:not([hidden]) + .q-textarea { margin-top:12px; }

.q-textarea {
  width:100%; margin-top:44px; min-height:140px; resize:vertical;
  padding:16px; border-radius: var(--r-lg);
  background: var(--surface-2); border:1.5px solid transparent; color: var(--text);
  font-family: inherit; font-size:16px; line-height:1.5; letter-spacing:-0.16px;
  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(45,100,250,0.6);
  box-shadow: 0 0 0 3px rgba(45,100,250,0.18); }

/* 주관식 최소 글자수 카운터 */
.q-charcount { margin-top:8px; font-size:14px; color: var(--text-faint); text-align:right; letter-spacing:-0.14px; }
.q-charcount b { font-weight:700; color: var(--text-mute); }
.q-charcount.ok { color: var(--accent); }
.q-charcount.ok b { color: var(--accent); }

/* free-text for the "기타" option — single-line, full width (mirrors q-textarea) */
.q-other-input {
  width:100%; margin-top:12px; padding:16px 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.4; letter-spacing:-0.01em;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.q-other-input::placeholder { color: var(--text-faint); }
.q-other-input:focus { outline:none; border-color: rgba(45,100,250,0.6);
  box-shadow: 0 0 0 3px rgba(45,100,250,0.18); }

.nav-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:44px; }
.nav-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-width:140px; padding:12px 32px; border-radius: var(--r-full);
  font-size:18px; font-weight:600; letter-spacing:-0.18px; cursor:pointer; border:none;
  transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav-prev { background: var(--bg-2); color: var(--text-dim); }
.nav-prev:hover { transform: translateY(-1px); background: var(--surface-hover); }
.nav-next { background: linear-gradient(to right, #44cdff, #2d64fa); color:#fff; font-weight:700; }
.nav-next:hover { transform: translateY(-2px); filter: saturate(1.08) brightness(1.04); }
.nav-btn:active { transform: translateY(0); }

.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.07); border:1px solid rgba(239,16,38,0.28);
  color:#C8102E; font-size:14px; font-weight:500;
  animation: fadeUp 240ms var(--ease) both;
}
.err-toast svg { color:#E0142A; }

/* ============================ RESULT =============================== */
.result { padding-top: 12px; display:flex; flex-direction:column; align-items:center; text-align:center;
  gap: clamp(56px, 8vw, 100px); }

/* 상단: 제목 + (등급 박스 + 점수 원형 그래프) 나란히 */
.result-top { display:flex; flex-direction:column; align-items:center; gap:24px; }
.result-title { margin:0; font-size:32px; font-weight:700; line-height:1.3; letter-spacing:-0.02em; color: var(--text);
  animation: fadeUp 460ms var(--ease) both; }
.result-hero { display:flex; flex-direction:row-reverse; align-items:center; justify-content:center; gap:40px; flex-wrap:wrap; }

.result-badge {
  position:relative; display:inline-flex; flex-direction:column; align-items:center;
  gap:6px; margin:0; 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));
  /* meter 원형그래프의 글로우(SVG feGaussianBlur stdDeviation 4)와 동일한 강도의 부드러운 색 글로우 */
  box-shadow: 0 0 14px 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:0; font-size:28px; font-weight:700; line-height:1.2; letter-spacing:0; color: var(--text);
  animation: fadeUp 560ms var(--ease) 200ms both; }
.result-desc { margin:0; font-size:20px; line-height:1.5; color:#3c3f47;
  max-width:720px; white-space:pre-line; letter-spacing:-0.2px; animation: fadeUp 600ms var(--ease) 280ms both; }

/* score meter (기존 컴포넌트 재사용) */
.meter { position:relative; width:230px; height:230px; flex-shrink:0; }
.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); }

/* 단계 탭 + 태그 + 특징 + 설명 (Figma 7324-161) */
.result-detail { display:flex; flex-direction:column; align-items:center; gap:28px; width:100%;
  animation: fadeUp 640ms var(--ease) 420ms both; }
.level-tabs { display:flex; gap:8px; }
.level-tab { padding:6px 14px; border-radius:8px; background: var(--bg-2);
  font-size:14px; font-weight:400; color: var(--text-faint); letter-spacing:-0.14px; }
.level-tab.on { background: var(--t-c); color:#fff; font-weight:600; }

/* traits — Figma: 파랑 캡슐 + 체크 아이콘 (등급 무관 primary blue) */
.trait-row { display:flex; flex-direction:column; gap:8px; align-items:center; }
.trait {
  display:flex; align-items:center; gap:8px; width:400px; max-width:100%; text-align:left;
  padding:10px 12px; border-radius: var(--r-full); background: rgba(45,100,250,0.1);
  font-size:16px; font-weight:500; color: var(--accent); letter-spacing:-0.16px;
}
.trait-check { width:24px; height:24px; flex-shrink:0; border-radius:50%; background: var(--accent);
  color:#fff; display:inline-flex; align-items:center; justify-content:center; }

/* 하단 완료 안내 카드 (Figma) */
.result-card { width:600px; max-width:100%; background: var(--surface-2); border-radius:12px;
  padding:24px 16px; display:flex; flex-direction:column; align-items:center; gap:32px;
  animation: fadeUp 700ms var(--ease) 560ms both; }
.rc-title { margin:0; font-size:16px; font-weight:600; color:#3c3f47; letter-spacing:-0.16px; }
.rc-body { margin-top:8px; font-size:14px; color: var(--text-mute); line-height:1.5; letter-spacing:-0.14px; }
.rc-body p { margin:0; }
.rc-logo { display:flex; align-items:center; gap:7px; }
.rc-logo-icon { height:16px; width:auto; display:block; }
.rc-logo-text { font-size:18px; font-weight:700; color:#16171b; letter-spacing:-0.18px; line-height:1.2; }

/* ============================ 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,#5985fb,#1f54d6); -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(31,84,214,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(45,100,250,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:#1F9D57; 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(22,23,27,0.07); 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:auto; max-height:560px; }
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;
  position:sticky; top:0; z-index:1; background: var(--surface); }
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(22,23,27,0.03); }
.cell-name { color: var(--text); font-weight:600; }
.cell-name .resp-link { color: var(--text); text-decoration:none; cursor:pointer;
  transition: color var(--dur-fast) var(--ease); }
.cell-name .resp-link::after { content:"\203A"; margin-left:6px; color: var(--text-faint); font-weight:700;
  display:inline-block; transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.cell-name .resp-link:hover { color: var(--accent); text-decoration:underline; text-underline-offset:3px; }
.cell-name .resp-link:hover::after { color: var(--accent); transform: translateX(3px); }
.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:11px 14px; font-size:14.5px; gap:11px; }
  .q-block[data-qid="q1"] .opt-list,
  .q-block[data-qid="q9"] .opt-list,
  .q-block[data-qid="q10"] .opt-list,
  .opt-grid { grid-template-columns: 1fr; }
  .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-btn { flex:1; min-width:0; padding:12px 20px; }
}

/* ===== Superadmin operator console ================================== */
.sa-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:18px; }
.sa-count { font-size:13px; color: var(--text-mute); font-weight:500; }

/* Collapsible "신규 기업 생성" */
.sa-create { padding:0; margin-bottom:20px; overflow:hidden; }
.sa-create > summary {
  list-style:none; cursor:pointer; padding:18px 22px;
  display:flex; align-items:center; gap:10px; font-size:15px; font-weight:600; color: var(--text);
}
.sa-create > summary::-webkit-details-marker { display:none; }
.sa-create > summary .chev { margin-left:auto; color: var(--text-mute); transition: transform var(--dur) var(--ease); }
.sa-create[open] > summary { border-bottom:1px solid var(--border-subtle); }
.sa-create[open] > summary .chev { transform: rotate(90deg); }
.sa-create-body { padding:20px 22px 22px; }
.sa-field-label { display:block; margin-bottom:6px; font-size:13px; color: var(--text-mute); }

/* Layout: compact list (left) + detail panel (right) */
.sa-layout { display:grid; grid-template-columns: minmax(0,1.05fr) minmax(360px,0.95fr); gap:20px; align-items:start; }
@media (max-width: 900px){ .sa-layout { grid-template-columns: 1fr; } }

.sa-list { padding:0; overflow:hidden; }
.sa-table { width:100%; border-collapse:collapse; font-size:14px; }
.sa-table thead th {
  text-align:left; font-size:12px; font-weight:600; letter-spacing:0.02em; color: var(--text-mute);
  padding:13px 16px; border-bottom:1px solid var(--border); background: var(--surface-2);
}
.sa-table th.num, .sa-table td.num { text-align:right; }
.sa-row { cursor:pointer; transition: background var(--dur) var(--ease); }
.sa-row + .sa-row td { border-top:1px solid var(--border-subtle); }
.sa-row:hover { background: var(--surface-2); }
.sa-row:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.sa-row.is-active { background: var(--p-50); }
.sa-row.is-active td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.sa-row td { padding:14px 16px; vertical-align:middle; }
.sa-row td.num { font-variant-numeric:tabular-nums; color: var(--text-dim); }
.sa-co-name { font-weight:600; color: var(--text); letter-spacing:-0.01em; }
.sa-co-slug { font-size:12px; color: var(--text-mute); margin-top:2px; }
.sa-co-slug code { font-size:12px; }

.sa-badge { display:inline-flex; align-items:center; gap:6px; height:25px; padding:0 10px; border-radius: var(--r-full); font-size:12px; font-weight:600; white-space:nowrap; }
.sa-badge .dot { width:6px; height:6px; border-radius:50%; background:currentColor; }
.sa-badge--on { background: rgba(45,100,250,0.10); color: var(--p-200); border:1px solid rgba(45,100,250,0.24); }
.sa-badge--off { background: rgba(224,20,42,0.07); color:#c0142a; border:1px solid rgba(224,20,42,0.20); }

/* Detail panel */
.sa-panel { padding:24px; position:sticky; top:20px; }
@media (max-width: 900px){ .sa-panel { position:static; } }
.sa-panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.sa-panel-title { font-size:20px; font-weight:700; margin:0; letter-spacing:-0.02em; }
.sa-panel-slug { margin-top:6px; }
.sa-panel-slug code { font-size:13px; }

.sa-stats { display:flex; gap:10px; margin:18px 0 2px; flex-wrap:wrap; }
.sa-stat { flex:1; min-width:88px; background: var(--surface-2); border:1px solid var(--border-subtle); border-radius: var(--r-lg); padding:12px 14px; }
.sa-stat-label { font-size:12px; color: var(--text-mute); }
.sa-stat-value { font-size:20px; font-weight:700; margin-top:3px; font-variant-numeric:tabular-nums; letter-spacing:-0.01em; }

.sa-section { margin-top:22px; }
.sa-section-label { font-size:11px; font-weight:700; letter-spacing:0.06em; color: var(--text-mute); text-transform:uppercase; margin-bottom:10px; }
.sa-action-row { display:flex; gap:8px; flex-wrap:wrap; }
.sa-form-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

.sa-danger { margin-top:22px; border:1px solid rgba(224,20,42,0.26); border-radius: var(--r-lg); padding:16px; background: rgba(224,20,42,0.025); }
.sa-danger-title { display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:#c0142a; margin-bottom:10px; }
.sa-btn-danger { border:0; cursor:pointer; height:38px; background:#e0142a; color:#fff; font-weight:600; border-radius: var(--r-md); padding:0 16px; font-size:13.5px; }
.sa-btn-danger:hover { filter:brightness(1.06); }

.sa-empty { padding:56px 24px; text-align:center; color: var(--text-mute); }