/* ============================================================
   Patient Grow — Design System v3 "Aurora"
   Linear/Stripe-inspired modern SaaS aesthetic
   ============================================================ */
* { -webkit-tap-highlight-color: transparent; }
:root {
  --brand: #0e7a5f; --brand-dark: #0b6650; --brand-deep: #095344;
  --brand-vivid: #10b981; --mint: #34d399; --teal: #14b8a6;
  --ink: #0f172a; --shadow-c: 15 23 42;
}
html { scroll-behavior: smooth; }
body {
  background: #f6f8f9;
  position: relative;
  letter-spacing: -0.011em;
}
/* ---- aurora ambient background ---- */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(900px 480px at 12% -8%, rgba(16,185,129,.13), transparent 55%),
    radial-gradient(800px 420px at 88% -6%, rgba(20,184,166,.11), transparent 55%),
    radial-gradient(700px 500px at 50% 110%, rgba(14,122,95,.07), transparent 60%);
}
body::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .4;
  background-image: radial-gradient(rgba(15,23,42,.045) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(to bottom, black, transparent 70%);
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 70%);
}

/* ---------- typography flair ---------- */
.text-gradient {
  background: linear-gradient(92deg, #0f172a 30%, #0e7a5f 75%, #10b981);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- cards ---------- */
.card {
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-radius: 1.15rem; border: 1px solid rgba(15,23,42,.07);
  box-shadow:
    0 1px 2px rgb(var(--shadow-c) / .04),
    0 8px 24px -12px rgb(var(--shadow-c) / .12),
    inset 0 1px 0 rgba(255,255,255,.7);
  transition: box-shadow .2s, transform .2s, border-color .2s;
}
.card-hover:hover, button.card:hover {
  box-shadow:
    0 2px 6px rgb(var(--shadow-c) / .06),
    0 18px 40px -14px rgb(var(--shadow-c) / .2),
    inset 0 1px 0 rgba(255,255,255,.7);
  transform: translateY(-2px); border-color: rgba(14,122,95,.25);
}
.card-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(128deg, #0c8a6a 0%, #0b6650 48%, #07463a 100%);
  color: #fff; border: 1px solid rgba(255,255,255,.14); border-radius: 1.3rem;
  box-shadow: 0 16px 40px -12px rgba(11,102,80,.55), inset 0 1px 0 rgba(255,255,255,.2);
}
.card-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(360px 200px at 85% -30%, rgba(52,211,153,.4), transparent 65%),
    radial-gradient(280px 180px at -10% 120%, rgba(20,184,166,.25), transparent 60%);
}
.card-hero::after {
  content: ''; position: absolute; top: -60%; left: -30%; width: 55%; height: 220%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.09), transparent);
  transform: rotate(18deg); pointer-events: none;
}

/* ---------- buttons ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-weight:700;
  border-radius:.85rem; padding:.75rem 1.25rem; transition:all .16s cubic-bezier(.2,.8,.3,1); cursor:pointer;
  letter-spacing:-.01em; position: relative;
}
.btn:active { transform: scale(.96); }
.btn-primary {
  background: linear-gradient(180deg, #11997a 0%, #0b6650 100%);
  color:#fff;
  box-shadow:
    0 1px 2px rgba(11,102,80,.5), 0 6px 16px -4px rgba(14,122,95,.55),
    inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.12);
}
.btn-primary:hover {
  background: linear-gradient(180deg, #12a582 0%, #0c705a 100%);
  box-shadow: 0 2px 4px rgba(11,102,80,.5), 0 10px 24px -6px rgba(14,122,95,.65), inset 0 1px 0 rgba(255,255,255,.25);
  transform: translateY(-1px);
}
.btn-primary:disabled { background:#c3c9d1; box-shadow:none; cursor:not-allowed; transform:none; }
.btn-ghost {
  background: rgba(15,23,42,.05); color:#374151;
  border: 1px solid rgba(15,23,42,.06);
}
.btn-ghost:hover { background: rgba(15,23,42,.09); }
.btn-danger { background:#fef2f2; color:#dc2626; border:1px solid #fecaca; }
.btn-danger:hover { background:#fee2e2; }

/* ---------- 눌림 피드백 (체감 속도) ----------
   서버 응답은 15~60ms로 충분히 빠른데도 "굼뜨고 눌린 건지 헷갈린다"는 피드백을 받았다.
   원인은 속도가 아니라 침묵이었다: .btn 클래스가 없는 버튼 46개는 :active 축소조차 없어서
   누른 순간 화면에 아무 변화가 없었다. 사람은 반응이 없으면 안 눌렸다고 보고 두 번 누른다.
   → 모든 button/역할버튼에 눌림 반응을 기본값으로 준다 (개별 클래스 부착에 의존하지 않는다). */
button:not(:disabled), [role="button"]:not([aria-disabled="true"]) { cursor: pointer; }
button:not(:disabled):active { transform: scale(.97); }
button { transition: transform .1s cubic-bezier(.2,.8,.3,1), background .16s, box-shadow .16s, opacity .16s; }

/* 클릭 순간 JS가 붙이는 클래스 — :active보다 확실하다.
   :active는 손가락을 떼면 즉시 사라져서 '눌렀다'는 확인이 남지 않는다.
   pg-pressed는 220ms 유지되므로 탭 후에도 눌림이 눈에 남는다. */
.pg-pressed { transform: scale(.96) !important; filter: brightness(.94); }

/* 요청 진행 중인 버튼 */
.pg-busy { opacity: .72; cursor: progress !important; pointer-events: none; }

/* 상단 진행 바 — 200ms 넘게 걸리는 요청에만 나타난다.
   빠른 응답에도 번쩍이면 오히려 더 어수선하고 느리게 느껴진다. */
#pg-topbar {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 9999;
  pointer-events: none; opacity: 0; transition: opacity .15s;
}
#pg-topbar.on { opacity: 1; }
#pg-topbar .pg-topbar-fill {
  height: 100%; width: 40%;
  background: linear-gradient(90deg, transparent, #10b981 40%, #0e7a5f 60%, transparent);
  animation: pgBarSlide 1.1s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes pgBarSlide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}
@media (prefers-reduced-motion: reduce) {
  button:not(:disabled):active, .pg-pressed { transform: none !important; }
  #pg-topbar .pg-topbar-fill { animation: none; width: 100%; opacity: .5; }
}

/* ---------- forms ---------- */
/* width는 :where()로 특이도 0으로 낮춘다.
   style.css가 tailwind.css보다 뒤에 로드되므로, 여기에 width:100%를 그냥 두면
   w-16 / w-20 같은 유틸리티를 짓밟는다. 실제로 온보딩 STEP1에서 인원수 칸이 100%로
   부풀고 직급명 칸(flex-1, basis 0)이 0폭으로 짜부라져 "이름을 입력할 수 없는" 화면이 됐다.
   :where()는 특이도가 0이라 어떤 유틸리티에도 지고, 지정이 없으면 100%가 적용된다. */
:where(.input) { width:100%; }
.input {
  border:1.5px solid rgba(15,23,42,.1); border-radius:.85rem; padding:.72rem 1rem; font-size:.95rem;
  outline:none; transition:border .16s, box-shadow .16s, background .16s;
  background: rgba(255,255,255,.85); backdrop-filter: blur(8px);
}
.input:hover { border-color: rgba(15,23,42,.18); }
.input:focus { border-color:var(--brand-vivid); background:#fff; box-shadow:0 0 0 4px rgba(16,185,129,.14), 0 2px 8px -2px rgba(16,185,129,.2); }
.label { display:block; font-size:.85rem; font-weight:700; color:#334155; margin-bottom:.4rem; letter-spacing:-.01em; }

/* ---------- badges & pills ---------- */
.badge { display:inline-flex; align-items:center; gap:.25rem; font-size:.72rem; font-weight:700; padding:.22rem .62rem; border-radius:9999px; }
.grade-pill {
  display:inline-flex; align-items:center; justify-content:center; width:2.7rem; height:2.7rem;
  border-radius:9999px; font-weight:800; font-size:1.1rem; color:#fff; position:relative;
  box-shadow: inset 0 -3px 6px rgba(0,0,0,.22), inset 0 2px 3px rgba(255,255,255,.35), 0 4px 12px -2px rgba(0,0,0,.3);
}
.grade-pill::after {
  content:''; position:absolute; inset:2px; border-radius:9999px; pointer-events:none;
  background: radial-gradient(circle at 32% 24%, rgba(255,255,255,.35), transparent 55%);
}

/* ---------- likert ---------- */
.likert-btn {
  flex:1; padding:1rem 0; border:2px solid rgba(15,23,42,.09); border-radius:.9rem; font-weight:800; font-size:1.1rem;
  background: rgba(255,255,255,.9); transition:all .15s cubic-bezier(.2,.8,.3,1); cursor:pointer; color:#475569;
}
.likert-btn:hover { border-color:#7fd4bc; background:#f2fbf8; transform: translateY(-2px); box-shadow: 0 6px 14px -6px rgba(16,185,129,.35); }
.likert-btn.on {
  border-color: transparent; color:#fff;
  background: linear-gradient(160deg, #10b981, #0b6650);
  box-shadow: 0 6px 18px -4px rgba(16,185,129,.55), inset 0 1px 0 rgba(255,255,255,.25);
  transform: scale(1.07) translateY(-1px);
}

/* ---------- header ---------- */
#main-header {
  backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6);
  background: rgba(255,255,255,.68) !important;
  border-bottom: 1px solid rgba(15,23,42,.06) !important;
}
.brand-logo {
  background: linear-gradient(135deg, #14b8a6, #0e7a5f 60%, #07463a);
  box-shadow: 0 3px 10px -2px rgba(14,122,95,.6), inset 0 1px 0 rgba(255,255,255,.35);
}

/* ---------- floating dock nav ---------- */
#bottom-nav {
  background: transparent !important; border: none !important; box-shadow: none !important;
  padding: 0 .75rem calc(.6rem + env(safe-area-inset-bottom));
  pointer-events: none;
}
#bottom-nav > div {
  pointer-events: auto;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(20px) saturate(1.8); -webkit-backdrop-filter: blur(20px) saturate(1.8);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 1.4rem;
  box-shadow: 0 12px 36px -10px rgb(var(--shadow-c) / .28), inset 0 1px 0 rgba(255,255,255,.8);
  max-width: 26rem !important;
  margin-bottom: 0;
}
.nav-item { position:relative; transition: color .18s; }
.nav-item .nav-ico {
  width:2.7rem; height:1.8rem; display:flex; align-items:center; justify-content:center;
  border-radius:9999px; transition: all .22s cubic-bezier(.2,.8,.3,1);
}
.nav-item.on .nav-ico {
  background: linear-gradient(160deg, #10b981, #0b6650);
  color: #fff; transform: translateY(-2px);
  box-shadow: 0 4px 12px -3px rgba(16,185,129,.6);
}
.nav-item.on { color: var(--brand-deep) !important; }
.nav-item:not(.on):hover .nav-ico { background: rgba(15,23,42,.06); }

/* ---------- motion & feedback ---------- */
.fade-in { animation: fadeIn .32s cubic-bezier(.16,1,.3,1); }
@keyframes fadeIn { from { opacity:0; transform:translateY(10px);} to { opacity:1; transform:none;} }
.toast {
  animation: toastIn .28s cubic-bezier(.16,1,.3,1);
  box-shadow: 0 12px 32px -8px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
}
@keyframes toastIn { from { opacity:0; transform:translateY(14px) scale(.94);} to { opacity:1; transform:none;} }

/* ---------- progress ---------- */
.progress-bar { height:.55rem; border-radius:9999px; background:rgba(15,23,42,.07); overflow:hidden; }
.progress-bar > div {
  height:100%; border-radius:9999px; position:relative;
  background:linear-gradient(90deg,#14b8a6,#10b981 55%,#0b6650);
  transition:width .5s cubic-bezier(.16,1,.3,1);
}
.progress-bar > div::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  animation: shimmer 2.2s infinite;
}

/* ---------- tabs / steps ---------- */
.tab-btn { padding:.6rem 1rem; border-radius:.8rem; font-weight:600; font-size:.9rem; color:#64748b; transition: all .15s; }
.tab-btn.on {
  background: linear-gradient(180deg, #11997a, #0b6650); color:#fff;
  box-shadow: 0 3px 10px -2px rgba(14,122,95,.5);
}
.step-dot { width:2rem; height:2rem; border-radius:9999px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem; }

/* ---------- skeleton loading ---------- */
.sk { position:relative; overflow:hidden; background:rgba(15,23,42,.07); border-radius:.6rem; }
.sk::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
  animation: shimmer 1.3s infinite;
}
@keyframes shimmer { from { transform:translateX(-100%);} to { transform:translateX(100%);} }

/* ---------- modal ---------- */
.pg-modal-backdrop {
  position:fixed; inset:0; background:rgba(15,23,42,.45); backdrop-filter: blur(6px);
  z-index:60; display:flex; align-items:center; justify-content:center; padding:1rem;
  animation: fadeIn .2s ease;
}
.pg-modal {
  background: rgba(255,255,255,.96); backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.6);
  border-radius:1.4rem; width:100%; max-width:24rem; padding:1.6rem;
  box-shadow: 0 32px 80px -20px rgba(15,23,42,.45), inset 0 1px 0 rgba(255,255,255,.9);
  animation: modalIn .26s cubic-bezier(.16,1,.3,1);
}
@keyframes modalIn { from { opacity:0; transform:translateY(20px) scale(.96);} to { opacity:1; transform:none;} }

/* details accordion polish */
details > summary { list-style:none; cursor:pointer; }
details > summary::-webkit-details-marker { display:none; }
details[open] > summary { color: var(--brand-deep); }

/* stat number pop */
.stat-num { font-variant-numeric: tabular-nums; letter-spacing: -.03em; }

/* scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(15,23,42,.16); border-radius: 8px; border: 3px solid #f6f8f9; }
::-webkit-scrollbar-thumb:hover { background: rgba(15,23,42,.28); }