/* AnswerRadar — 공용 디자인 토큰·부품 SSOT (2026-08-05)
   여기서만 색·간격·부품을 정한다. 화면 HTML에 :root 토큰을 다시 박지 않는다.
   근거 = company-docs/06-design-toolkit.md 절차 + UI/UX Pro Max 사전(다크 대시보드 3단 elevation,
   semantic 추세색, 색만으로 표현 금지, transform/opacity 모션). */

:root{
  /* 표면 3단 사다리 — 페이지 → 카드 → 올림(hover·중첩) */
  --bg:#0A0F1E;
  --panel:#111A2E;
  --panel-up:#16203A;
  --sunken:#070B14;

  /* 선·글자 — 다크에서 solid grey 테두리 금지(Pro Max) */
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.16);
  --ink:#EAF0FB;
  --soft:#8FA0BF;
  --faint:#54648A;

  /* 브랜드 액센트 — 추세 의미로 쓰지 않는다 */
  --mint:#00E5A0;
  --mint-deep:#00C288;
  --mint-ink:#04120C;
  --mint-wash:rgba(0,229,160,.08);
  --mint-edge:rgba(0,229,160,.28);

  /* 의미색 — 추세·상태 전용 */
  --up:#22C55E;
  --down:#EF4444;
  --warn:#F59E0B;
  --up-wash:rgba(34,197,94,.1);
  --down-wash:rgba(239,68,68,.1);
  --warn-wash:rgba(245,158,11,.1);

  /* 간격 — 대시보드 밀도(8) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --radius:14px; --radius-sm:10px; --radius-lg:20px;

  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI','Malgun Gothic','Apple SD Gothic Neo',sans-serif;
  --font-display:'Space Grotesk','Inter',-apple-system,'Segoe UI','Malgun Gothic','Apple SD Gothic Neo',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --z-nav:20; --z-pop:30; --z-modal:50;
  --shell-h:60px;

  /* 모션 — 애플 "Designing Fluid Interfaces"의 임계감쇠 스프링(damping 1.0, response 0.3~0.4)을
     CSS 이징으로 근사한다. 오버슈트 없음이 기본이고, 튕김은 사용자가 던진 동작에만 준다.
     누름 반응은 별도로 더 짧게(100ms) — 지연이 보이는 순간 직접 조작감이 무너진다. */
  --spring:cubic-bezier(.22,1,.36,1);
  --dur:340ms;
  --dur-fast:160ms;
  --dur-press:100ms;
}

/* 타이포 — 자간은 크기마다 다르다(애플 "The Details of UI Typography").
   큰 글자는 자라면서 낱자가 멀어 보이므로 좁히고, 작은 글자는 살짝 벌려야 읽힌다.
   한 값을 전체에 걸면 어딘가는 반드시 틀린다. */
h1,.display-xl{letter-spacing:-.022em;line-height:1.06}
h2{letter-spacing:-.016em;line-height:1.15}
h3{letter-spacing:-.008em;line-height:1.25}
.micro,.badge,.card-title,.kpi .k{letter-spacing:.01em}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);background:var(--bg);color:var(--ink);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,.display{font-family:var(--font-display);letter-spacing:-.015em}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
a{color:inherit}
button,input,select{font-family:inherit}
:focus-visible{outline:2px solid var(--mint);outline-offset:2px}

/* ---------- 앱 셸 ---------- */
.shell{
  position:sticky;top:0;z-index:var(--z-nav);
  /* 떠 있는 반투명 층 — 내용이 밑으로 흐른다. saturate를 같이 걸어야 유리처럼 읽힌다(애플 §12). */
  background:rgba(10,15,30,.72);backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--line);
}
.shell-in{
  max-width:1180px;margin:0 auto;padding:0 var(--s5);
  height:var(--shell-h);display:flex;align-items:center;gap:var(--s5);
}
.wordmark{
  font-family:var(--font-display);font-weight:700;font-size:1.15rem;
  text-decoration:none;display:inline-flex;align-items:center;gap:var(--s2);flex-shrink:0;
}
.wordmark b{color:var(--mint)}
.wordmark .mark{
  width:28px;height:28px;border-radius:8px;background:var(--panel);
  border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;
}
.wordmark .mark svg{width:17px;height:17px}

.shell-nav{display:flex;align-items:center;gap:var(--s1);margin-right:auto}
.shell-nav a{
  font-size:.88rem;font-weight:500;color:var(--soft);text-decoration:none;
  padding:7px 11px;border-radius:8px;transition:color .15s,background .15s;
  white-space:nowrap;
}
/* 좁은 화면에서는 네비를 접는다 — 안 접으면 flex가 링크를 눌러 글자가 세로로 쪼개진다(390px 실측).
   이동 경로는 로고(홈)·본문 CTA·푸터 링크가 이미 갖고 있다. */
@media(max-width:660px){
  .shell-nav{display:none}
  .shell-in{gap:var(--s3);justify-content:space-between;padding:0 var(--s4)}
  /* 셸의 링크형 CTA도 접는다 — 로고+토글+버튼이 390px에서 30px 넘쳤다(ui-patrol 실측).
     본문에 같은 행동의 CTA가 있으므로 잃는 경로가 없다. 로그아웃(button)은 대체 경로가 없어 남긴다. */
  .shell-side a.btn{display:none}
}
.shell-nav a:hover{color:var(--ink);background:var(--panel)}
/* 활성 항목은 색만으로 표시하지 않는다(Pro Max ux-guidelines) */
.shell-nav a[aria-current="page"]{color:var(--ink);background:var(--panel);box-shadow:inset 0 -2px 0 var(--mint)}

.shell-side{display:flex;align-items:center;gap:var(--s2);flex-shrink:0}

/* 언어 토글 — 세그먼트 2칸 */
.lang{display:inline-flex;background:var(--panel);border:1px solid var(--line);border-radius:99px;padding:2px}
.lang button{
  background:none;border:none;cursor:pointer;color:var(--soft);
  font-size:.76rem;font-weight:700;letter-spacing:.03em;padding:5px 11px;border-radius:99px;
  transition:color .15s,background .15s;
}
.lang button[aria-pressed="true"]{background:var(--panel-up);color:var(--ink)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:var(--mint);color:var(--mint-ink);border:none;border-radius:var(--radius-sm);
  font-weight:700;font-size:.9rem;padding:10px 17px;cursor:pointer;text-decoration:none;
  transition:background var(--dur-fast) var(--spring),transform var(--dur-press) ease-out;
}
.btn:hover{background:var(--mint-deep)}
/* 반응은 누르는 순간에 — 떼는 순간이 아니다. 여기서 지연이 생기면 직접 조작감이 무너진다. */
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.55;cursor:default}

/* ---------- 주 CTA 버튼(.btn-fx) ----------
   사장님이 준 shadcn `interactive-hover-button`의 인터랙션을 우리 토큰 안에서 재구현했다.
   원본은 React+Tailwind이고 이 사이트는 프레임워크가 없으므로 부품을 이식하지 않고 결만 가져온다
   (06-design-toolkit §2-4 "그대로 이식 금지 — 결 일관성 = 신뢰"). 의존성 0, JS 0.
   동작: 라벨이 오른쪽으로 밀려 사라지고, 왼쪽 아래의 점이 버튼 전체로 번지며, 화살표 라벨이 들어온다.
   transform/opacity만 움직인다(컴포지터 유지 · 06 §3). 중요한 버튼에만 쓴다 — 화면당 1~2개. */
.btn-fx{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:99px;border:1.5px solid var(--mint-edge);background:transparent;
  color:var(--ink);font:inherit;font-weight:700;font-size:1rem;
  padding:14px 30px;cursor:pointer;text-decoration:none;
  transition:border-color var(--dur-fast) var(--spring),transform var(--dur-press) ease-out;
}
.btn-fx:hover{border-color:var(--mint)}
.btn-fx:active{transform:scale(.97)}
.btn-fx .fx-label,.btn-fx .fx-go{
  transition:transform var(--dur) var(--spring),opacity var(--dur) var(--spring);
}
.btn-fx .fx-label{position:relative;z-index:2;display:inline-block}
.btn-fx .fx-go{
  position:absolute;inset:0;z-index:2;
  display:flex;align-items:center;justify-content:center;gap:8px;
  color:var(--mint-ink);transform:translateX(34px);opacity:0;
}
.btn-fx .fx-go svg{width:17px;height:17px;flex-shrink:0}
/* 번지는 점 — 왼쪽 여백 안(글자와 겹치지 않는 자리)에서 시작해 버튼을 덮는다.
   커지는 방향이 결과를 미리 가리킨다(애플 §8 — 중간 프레임이 결말을 예고한다).
   위치는 left/top으로만 잡는다 — transform은 scale 전용이라 translate를 섞으면 서로 덮어쓴다. */
.btn-fx .fx-dot{
  position:absolute;z-index:1;left:13px;top:calc(50% - 4.5px);width:9px;height:9px;
  border-radius:99px;background:var(--mint);
  transition:transform var(--dur) var(--spring);
}
.btn-fx:hover .fx-label,.btn-fx:focus-visible .fx-label{transform:translateX(34px);opacity:0}
.btn-fx:hover .fx-go,.btn-fx:focus-visible .fx-go{transform:translateX(0);opacity:1}
/* 배율은 가장 넓은 버튼(요금표의 전폭 버튼 ~340px)이 완전히 덮이게 잡는다.
   점 중심이 왼쪽 끝이라 반지름이 버튼 폭을 넘어야 한다: 4.5px × 90 = 405px.
   모자라면 오른쪽 끝에 테두리 원호가 남는다(라이브 실측으로 46 → 90). */
.btn-fx:hover .fx-dot,.btn-fx:focus-visible .fx-dot{transform:scale(90)}
.btn-fx.on-panel{border-color:var(--line-strong)}
.btn-ghost{
  background:var(--panel);color:var(--ink);border:1px solid var(--line-strong);
}
.btn-ghost:hover{background:var(--panel-up)}
.btn-sm{font-size:.82rem;padding:7px 13px}

/* ---------- 레이아웃 ---------- */
.page{max-width:1180px;margin:0 auto;padding:var(--s5) var(--s5) var(--s7)}
.page-narrow{max-width:760px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s5)}
.page-head h1{font-size:1.75rem;font-weight:700}
.page-head .sub{color:var(--soft);font-size:.92rem;margin-top:2px}

/* 대시보드 = 좌 도메인 레일 + 우 본문 */
.app-grid{display:grid;grid-template-columns:250px minmax(0,1fr);gap:var(--s5);align-items:start}
@media(max-width:900px){ .app-grid{grid-template-columns:1fr} }

.rail{display:flex;flex-direction:column;gap:var(--s2);position:sticky;top:calc(var(--shell-h) + var(--s5))}
@media(max-width:900px){ .rail{position:static;flex-direction:row;overflow-x:auto;padding-bottom:var(--s2)} }
.rail-label{
  font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);padding:0 var(--s3);margin-bottom:var(--s1);
}
@media(max-width:900px){ .rail-label{display:none} }
.rail-item{
  display:flex;flex-direction:column;gap:2px;text-align:left;width:100%;flex-shrink:0;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:11px var(--s3);cursor:pointer;transition:border-color .15s,background .15s;
}
@media(max-width:900px){ .rail-item{width:auto;min-width:150px} }
.rail-item:hover{background:var(--panel-up)}
.rail-item[aria-current="true"]{border-color:var(--mint-edge);background:var(--panel-up)}
.rail-item .d{font-weight:600;font-size:.9rem;word-break:break-all;line-height:1.3}
.rail-item .m{font-size:.76rem;color:var(--soft);display:flex;align-items:center;gap:5px}
.rail-add{
  background:none;border:1px dashed var(--line-strong);color:var(--soft);
  border-radius:var(--radius-sm);padding:11px var(--s3);cursor:pointer;font-size:.85rem;
  text-decoration:none;display:block;text-align:center;transition:color .15s,border-color .15s;
}
.rail-add:hover{color:var(--ink);border-color:var(--mint-edge)}

/* ---------- 카드 ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s5)}
.card + .card{margin-top:var(--s4)}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s4);flex-wrap:wrap}
.card-title{font-size:.78rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
.card-note{font-size:.82rem;color:var(--soft)}

.badge{
  display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:700;
  letter-spacing:.04em;padding:4px 10px;border-radius:99px;
  border:1px solid var(--line-strong);color:var(--soft);white-space:nowrap;
}
.badge.on{color:var(--mint);border-color:var(--mint-edge);background:var(--mint-wash)}
.badge.warn{color:var(--warn);border-color:rgba(245,158,11,.35);background:var(--warn-wash)}
.badge.off{color:var(--down);border-color:rgba(239,68,68,.35);background:var(--down-wash)}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}

/* ---------- 지표 ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--s3)}
.kpi{background:var(--panel-up);border:1px solid var(--line);border-radius:var(--radius-sm);padding:var(--s4)}
.kpi .k{font-size:.75rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}
.kpi .v{font-family:var(--font-display);font-weight:700;font-size:2.1rem;line-height:1.15;margin-top:6px;font-variant-numeric:tabular-nums}
.kpi .v small{font-size:.95rem;font-weight:500;color:var(--soft);margin-left:3px}
.kpi .c{font-size:.8rem;color:var(--soft);margin-top:3px}
.trend{display:inline-flex;align-items:center;gap:4px;font-size:.85rem;font-weight:600;margin-top:4px}
.trend.up{color:var(--up)} .trend.down{color:var(--down)} .trend.flat{color:var(--soft)}

/* 신뢰구간 막대 — 값 하나가 아니라 구간을 보여주는 것이 제품 축이다 */
.ci{margin-top:var(--s3)}
.ci-track{position:relative;height:8px;background:var(--sunken);border:1px solid var(--line);border-radius:99px;overflow:hidden}
.ci-band{position:absolute;top:0;bottom:0;background:var(--mint-wash);border-left:1px solid var(--mint-edge);border-right:1px solid var(--mint-edge)}
.ci-pt{position:absolute;top:-2px;width:3px;height:12px;background:var(--mint);border-radius:2px}
.ci-cap{display:flex;justify-content:space-between;font-size:.72rem;color:var(--faint);margin-top:5px}

/* 엔진별 막대 */
.bars{display:flex;flex-direction:column;gap:var(--s3)}
.bar-row{display:grid;grid-template-columns:110px minmax(0,1fr) 62px;align-items:center;gap:var(--s3);font-size:.86rem}
@media(max-width:520px){ .bar-row{grid-template-columns:88px minmax(0,1fr) 54px;font-size:.8rem} }
.bar-row .nm{color:var(--soft);display:flex;align-items:center;gap:6px}
.bar-track{height:9px;background:var(--sunken);border:1px solid var(--line);border-radius:99px;overflow:hidden}
.bar-fill{height:100%;background:var(--mint);border-radius:99px;transform-origin:left;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.bar-row .vl{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600}
.bar-row.dead .vl{color:var(--faint)}

/* 스파크라인 */
.spark{width:100%;height:88px;display:block;overflow:visible}
.spark .ln{fill:none;stroke:var(--mint);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.spark .ar{fill:var(--mint);opacity:.12}
.spark .pt{fill:var(--mint)}
.spark .gd{stroke:var(--line);stroke-width:1}
.spark-cap{display:flex;justify-content:space-between;font-size:.74rem;color:var(--faint);margin-top:6px}

/* ---------- 목록·표 ---------- */
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.88rem}
thead th{
  position:sticky;top:0;background:var(--panel);text-align:left;font-weight:600;
  font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);
  padding:0 var(--s3) var(--s2);white-space:nowrap;
}
tbody td{padding:11px var(--s3);border-top:1px solid var(--line);vertical-align:middle}
tbody tr:hover td{background:var(--panel-up)}
/* nowrap은 대시보드 표(짧은 날짜·비율·링크)에만 건다.
   전역으로 걸었더니 리포트의 긴 질문 문장이 한 줄로 뻗어 옆 열을 덮었다(2026-08-05 사장님 지적). */
.tbl-wrap tbody td{white-space:nowrap}
td.num{text-align:right;font-variant-numeric:tabular-nums}
td a{color:var(--mint);text-decoration:none;font-weight:600}
td a:hover{text-decoration:underline}

.chips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.chip{
  display:inline-flex;align-items:center;gap:7px;background:var(--panel-up);
  border:1px solid var(--line);border-radius:99px;padding:6px 13px;font-size:.85rem;
}
.chip .n{font-size:.74rem;color:var(--faint);font-variant-numeric:tabular-nums}
.chip.me{border-color:var(--mint-edge);background:var(--mint-wash);color:var(--mint);font-weight:600}

/* ---------- 상태 화면 ---------- */
.empty{text-align:center;padding:var(--s7) var(--s5)}
.empty .ico{
  width:46px;height:46px;margin:0 auto var(--s4);border-radius:13px;
  background:var(--panel-up);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--soft);
}
.empty h3{font-size:1.1rem;font-weight:600;margin-bottom:6px}
.empty p{color:var(--soft);font-size:.9rem;max-width:400px;margin:0 auto var(--s4)}

.skel{background:linear-gradient(90deg,var(--panel) 25%,var(--panel-up) 50%,var(--panel) 75%);
  background-size:200% 100%;animation:sh 1400ms ease-in-out infinite;border-radius:8px}
@keyframes sh{to{background-position:-200% 0}}
.skel-line{height:13px;margin-bottom:9px}
.skel-kpi{height:96px}

/* ---------- 폼 ---------- */
.field{display:flex;gap:var(--s2);flex-wrap:wrap}
.field input{
  flex:1;min-width:210px;background:var(--sunken);border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);padding:12px 14px;color:var(--ink);font-size:.95rem;
  outline:none;transition:border-color .15s;
}
.field input::placeholder{color:var(--faint)}
.field input:focus{border-color:var(--mint)}
.msg{margin-top:var(--s3);font-size:.88rem}
.msg.err{color:var(--down)}
.msg.ok{color:var(--mint)}
.micro{font-size:.82rem;color:var(--soft)}

.site-foot{
  border-top:1px solid var(--line);margin-top:var(--s7);
  padding:var(--s5);text-align:center;font-size:.82rem;color:var(--faint);
}
.site-foot a{color:var(--soft);text-decoration:none}
.site-foot a:hover{color:var(--ink);text-decoration:underline}

.stack{display:flex;flex-direction:column;gap:var(--s4)}
.row{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.grow{flex:1}
.hide{display:none !important}

/* 접근성 3신호 — 애플은 "모션 줄이기"를 "피드백 없애기"로 보지 않는다.
   전정기관을 자극하는 이동·확대는 빼되, 이해를 돕는 불투명도 변화는 남긴다. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  /* 번지는 점은 큰 이동이라 뺀다. 대신 라벨 교체는 그대로 읽히게 둔다. */
  .btn-fx .fx-dot{display:none}
  .btn-fx:hover,.btn-fx:focus-visible{background:var(--mint);border-color:var(--mint)}
  .btn-fx:hover .fx-label,.btn-fx:focus-visible .fx-label{transform:none;opacity:0}
  .btn-fx:hover .fx-go,.btn-fx:focus-visible .fx-go{transform:none;opacity:1}
}
/* 반투명을 줄이라는 신호 — 블러를 걷고 불투명하게. 유리 위에 유리를 얹지 않는다. */
@media(prefers-reduced-transparency:reduce){
  .shell{background:var(--bg);backdrop-filter:none}
}
/* 대비를 높이라는 신호 — 테두리를 뚜렷하게, 흐린 글자를 올린다. */
@media(prefers-contrast:more){
  :root{--line:rgba(255,255,255,.28);--line-strong:rgba(255,255,255,.45);--soft:#B9C6DC;--faint:#8698B8}
  .shell{background:var(--bg);backdrop-filter:none}
}