ltcai 2.2.2 → 2.2.7

package/static/css/reference/base.css

@@ -0,0 +1,1658 @@
+/* Lattice AI — reference base skin (shared resets, rail, dashboard, page-1 skins). Token-native; values come from /static/css/tokens.css. */
+
+/* Lattice AI PPT reference skin.
+   The deck uses a bright basic workspace and a dark administrator workspace. */
+
+/* 색 토큰(--ref-*, color-scheme 포함)은 tokens.css 가 라이트/다크 모두 제공한다. */
+
+.lattice-ref-auth,
+.lattice-ref-chat {
+  font-family: "Inter", "Pretendard", "Apple SD Gothic Neo", -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
+.lattice-ref-auth {
+  background:
+    radial-gradient(circle at 74% 25%, rgba(255,255,255,0.70), transparent 16%),
+    radial-gradient(circle at 80% 58%, rgba(111,66,232,0.15), transparent 28%),
+    radial-gradient(circle at 15% 72%, rgba(111,66,232,0.13), transparent 34%),
+    linear-gradient(135deg, var(--surface) 0%, var(--surface) 48%, #ffffff 100%);
+  min-height: 100dvh;
+  /* 타이틀바(58px)를 제외한 나머지 영역의 수직 중앙에 카드 배치 */
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  /* padding-top: 타이틀바 높이만큼만 → justify-content가 나머지 공간에서 중앙 정렬 */
+  padding: 58px 18px clamp(72px, 8dvh, 90px);
+  overflow: auto;
+}
+
+.lattice-ref-auth .login-shell {
+  width: min(460px, calc(100vw - 36px));
+  display: block;
+  z-index: 3;
+}
+
+.lattice-ref-auth .brand-preview {
+  display: none;
+}
+
+.lattice-ref-auth .card {
+  width: 100%;
+  min-height: auto;
+  max-height: none;
+  overflow: visible;
+  border-radius: 16px;
+  padding: clamp(40px, 4.6dvh, 50px) clamp(28px, 3.6vw, 40px) clamp(20px, 2.4dvh, 28px);
+  background: var(--card);
+  border-color: var(--accent-soft);
+  box-shadow: 0 20px 64px rgba(102, 82, 168, 0.20), inset 0 1px 0 rgba(255,255,255,0.86);
+  backdrop-filter: blur(26px);
+}
+
+.lattice-ref-auth .card::before {
+  display: none;
+}
+
+.auth-titlebar {
+  position: fixed;
+  inset: 0 0 auto;
+  height: 58px;
+  z-index: 4;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 22px;
+  color: var(--ref-ink);
+  background: var(--surface);
+  border-bottom: 1px solid rgba(111,66,232,0.08);
+  backdrop-filter: blur(12px);
+}
+
+.auth-window-brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 21px;
+  font-weight: 720;
+}
+
+.auth-window-brand i {
+  color: var(--ref-purple);
+  font-size: 26px;
+}
+
+.auth-window-controls {
+  display: inline-flex;
+  align-items: center;
+  gap: 30px;
+}
+
+.auth-window-controls span {
+  width: 18px;
+  height: 18px;
+  position: relative;
+}
+
+.auth-window-controls span:nth-child(1)::before {
+  content: '';
+  position: absolute;
+  left: 2px;
+  right: 2px;
+  top: 9px;
+  height: 2px;
+  background: #202033;
+}
+
+.auth-window-controls span:nth-child(2)::before {
+  content: '';
+  position: absolute;
+  inset: 2px;
+  border: 2px solid #202033;
+  border-radius: 2px;
+}
+
+.auth-window-controls span:nth-child(3)::before,
+.auth-window-controls span:nth-child(3)::after {
+  content: '';
+  position: absolute;
+  top: 8px;
+  left: 1px;
+  width: 18px;
+  height: 2px;
+  background: #202033;
+}
+
+.auth-window-controls span:nth-child(3)::before { transform: rotate(45deg); }
+.auth-window-controls span:nth-child(3)::after { transform: rotate(-45deg); }
+
+.auth-wave {
+  position: fixed;
+  z-index: 0;
+  pointer-events: none;
+  opacity: 0.78;
+  filter: blur(0.2px);
+}
+
+.auth-wave::before,
+.auth-wave::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: 50% 50% 0 0;
+  border-top: 3px solid rgba(255,255,255,0.68);
+  transform: skewY(-11deg);
+}
+
+.auth-wave::after {
+  inset: 34px -80px -20px 40px;
+  border-top-color: rgba(124,92,255,0.16);
+}
+
+.auth-wave-left {
+  left: -130px;
+  bottom: -80px;
+  width: 780px;
+  height: 360px;
+  background: radial-gradient(ellipse at 45% 80%, rgba(111,66,232,0.23), transparent 58%);
+  transform: rotate(4deg);
+}
+
+.auth-wave-right {
+  right: -140px;
+  bottom: -88px;
+  width: 760px;
+  height: 340px;
+  background: radial-gradient(ellipse at 55% 82%, rgba(111,66,232,0.20), transparent 58%);
+  transform: scaleX(-1) rotate(2deg);
+}
+
+.auth-network {
+  position: fixed;
+  right: 160px;
+  top: 300px;
+  width: 430px;
+  height: 330px;
+  z-index: 0;
+  opacity: 0.28;
+  pointer-events: none;
+  background:
+    linear-gradient(32deg, transparent 0 33%, rgba(255,255,255,0.9) 33.2% 33.5%, transparent 33.7%),
+    linear-gradient(90deg, transparent 0 49.8%, rgba(255,255,255,0.8) 50% 50.3%, transparent 50.5%),
+    linear-gradient(148deg, transparent 0 38%, rgba(255,255,255,0.9) 38.2% 38.5%, transparent 38.7%);
+}
+
+.auth-network span {
+  position: absolute;
+  width: 13px;
+  height: 13px;
+  border-radius: 50%;
+  background: var(--surface);
+  box-shadow: 0 0 20px rgba(255,255,255,0.9);
+}
+
+.auth-network span:nth-child(1) { left: 36px; top: 82px; }
+.auth-network span:nth-child(2) { left: 155px; top: 42px; width: 20px; height: 20px; }
+.auth-network span:nth-child(3) { left: 294px; top: 68px; }
+.auth-network span:nth-child(4) { left: 190px; top: 170px; }
+.auth-network span:nth-child(5) { left: 350px; top: 168px; }
+.auth-network span:nth-child(6) { left: 255px; top: 250px; width: 18px; height: 18px; }
+
+.lattice-ref-auth .hero-logo {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: clamp(10px, 1.5vw, 16px);
+  margin-bottom: clamp(12px, 1.8dvh, 20px);
+}
+
+.lattice-ref-auth .hero-logo-mark {
+  width: clamp(46px, 5.4dvh, 62px);
+  height: clamp(46px, 5.4dvh, 62px);
+  display: grid;
+  place-items: center;
+  color: var(--ref-purple);
+  font-size: clamp(40px, 4.8dvh, 56px);
+  filter: drop-shadow(0 8px 14px rgba(111,66,232,0.20));
+}
+
+.lattice-ref-auth .hero-logo-mark i {
+  display: none;
+}
+
+.lattice-ref-auth .hero-logo-mark::before {
+  content: '';
+  width: 86%;
+  height: 86%;
+  display: block;
+  background:
+    linear-gradient(30deg, transparent 42%, rgba(255,255,255,0.55) 42% 47%, transparent 47%),
+    linear-gradient(90deg, transparent 42%, rgba(255,255,255,0.48) 42% 47%, transparent 47%),
+    linear-gradient(150deg, transparent 42%, rgba(255,255,255,0.48) 42% 47%, transparent 47%),
+    conic-gradient(from 30deg, #4f7dff, var(--accent), var(--accent-2), #4f7dff);
+  clip-path: polygon(50% 0, 88% 20%, 88% 67%, 50% 100%, 12% 67%, 12% 20%);
+  border-radius: 18px;
+  box-shadow: inset 0 0 0 8px rgba(255,255,255,0.16), 0 14px 28px rgba(111,66,232,0.24);
+}
+
+.lattice-ref-auth .title {
+  margin: 0;
+  font-size: clamp(28px, 3vw, 40px);
+  line-height: 1;
+  letter-spacing: 0;
+  text-align: left;
+  -webkit-text-fill-color: transparent;
+  background: linear-gradient(90deg, #10142b 0 68%, var(--ref-purple) 69% 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+}
+
+.lattice-ref-auth .subtitle {
+  margin: 0 0 clamp(14px, 1.9dvh, 22px);
+  color: var(--text);
+  font-size: clamp(17px, 2vw, 24px);
+  font-weight: 860;
+  line-height: 1.25;
+  letter-spacing: 0;
+}
+
+.lattice-ref-auth .subtitle::first-line {
+  color: var(--text);
+}
+
+.lattice-ref-auth .submit,
+.lattice-ref-chat .send-btn,
+.lattice-ref-chat .workspace-icon,
+.lattice-ref-chat .mode-icon {
+  background: linear-gradient(135deg, var(--ref-purple), #7b61ff);
+}
+
+.lattice-ref-auth .input {
+  height: 100%;
+  margin: 0;
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+  padding: 0 10px;
+  color: var(--ref-ink);
+  font-size: clamp(13px, 1.3vw, 15px);
+  font-weight: 650;
+}
+
+.lattice-ref-auth .input:focus {
+  box-shadow: none;
+  border: 0;
+}
+
+.auth-field {
+  height: clamp(40px, 4.4dvh, 46px);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: clamp(8px, 1.1dvh, 12px);
+  padding: 0 16px;
+  border: 1px solid #d9d6e4;
+  border-radius: 8px;
+  background: var(--surface);
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
+  color: var(--faint);
+}
+
+.auth-field:focus-within {
+  border-color: rgba(111,66,232,0.44);
+  box-shadow: 0 0 0 3px rgba(111,66,232,0.09), inset 0 1px 0 rgba(255,255,255,0.8);
+}
+
+.auth-field > i {
+  font-size: 19px;
+}
+
+.field-eye {
+  border: 0;
+  background: transparent;
+  color: var(--faint);
+  font-size: 18px;
+  cursor: pointer;
+}
+
+.lattice-ref-auth .msg {
+  min-height: clamp(14px, 1.5dvh, 18px);
+  margin: 2px 0 4px;
+  color: #d44f5c;
+}
+
+.lattice-ref-auth .submit,
+.lattice-ref-auth .register-cta {
+  height: clamp(42px, 4.6dvh, 48px);
+  border-radius: 8px;
+  font-size: clamp(14px, 1.5vw, 17px);
+}
+
+.lattice-ref-auth .submit {
+  margin-top: 0;
+  box-shadow: 0 10px 24px rgba(111,66,232,0.24);
+}
+
+.lattice-ref-auth .register-cta {
+  width: 100%;
+  margin-top: clamp(8px, 1.1dvh, 12px);
+  border: 2px solid rgba(111,66,232,0.56);
+  color: var(--ref-purple);
+  background: rgba(255,255,255,0.28);
+  font-family: inherit;
+  font-weight: 850;
+  cursor: pointer;
+}
+
+.lattice-ref-auth .sso-divider {
+  margin: clamp(12px, 1.5dvh, 18px) 0 clamp(8px, 1dvh, 10px);
+  color: var(--muted);
+  font-size: clamp(12px, 1.2vw, 14px);
+  font-weight: 700;
+}
+
+.lattice-ref-auth .sso-divider::before,
+.lattice-ref-auth .sso-divider::after {
+  background: var(--surface-2);
+}
+
+.lattice-ref-auth .sso-btn {
+  height: clamp(40px, 4.5dvh, 48px);
+  margin-bottom: clamp(8px, 1.1dvh, 12px);
+  justify-content: flex-start;
+  gap: clamp(10px, 1.4vw, 16px);
+  padding: 0 clamp(18px, 2.8vw, 28px);
+  border-radius: 8px;
+  border-color: #d9d6e4;
+  background: var(--surface-2);
+  color: var(--text);
+  font-size: clamp(13px, 1.4vw, 16px);
+  font-weight: 850;
+  box-shadow: 0 6px 16px rgba(88,72,150,0.08);
+}
+
+.ms-logo {
+  width: clamp(22px, 2.5dvh, 26px);
+  height: clamp(22px, 2.5dvh, 26px);
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 3px;
+  flex: 0 0 auto;
+}
+
+.ms-logo b:nth-child(1) { background: #f35325; }
+.ms-logo b:nth-child(2) { background: #81bc06; }
+.ms-logo b:nth-child(3) { background: #05a6f0; }
+.ms-logo b:nth-child(4) { background: #ffba08; }
+
+.okta-logo {
+  width: clamp(22px, 2.5dvh, 28px);
+  height: clamp(22px, 2.5dvh, 28px);
+  border-radius: 50%;
+  flex: 0 0 auto;
+  background:
+    conic-gradient(from 0deg, #111 0 10%, transparent 10% 17%, #111 17% 27%, transparent 27% 34%, #111 34% 44%, transparent 44% 51%, #111 51% 61%, transparent 61% 68%, #111 68% 78%, transparent 78% 85%, #111 85% 95%, transparent 95% 100%);
+}
+
+.local-start {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  width: 100%;
+  margin-top: clamp(10px, 1.4dvh, 16px);
+  border: 0;
+  background: transparent;
+  color: var(--ref-purple);
+  font-family: inherit;
+  font-size: clamp(13px, 1.3vw, 16px);
+  font-weight: 850;
+  cursor: pointer;
+}
+
+.local-start i {
+  font-size: clamp(17px, 1.9dvh, 22px);
+}
+
+.lattice-ref-auth .lang-wrap {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  z-index: 6;
+}
+
+.lattice-ref-auth .lang-btn {
+  height: auto;
+  border: 1px solid rgba(111,66,232,0.38);
+  border-radius: 12px;
+  padding: 4px 9px;
+  color: var(--text);
+  background: var(--surface-2);
+  font-size: 11px;
+  font-weight: 700;
+  box-shadow: 0 1px 5px rgba(111,66,232,0.08);
+}
+
+.lattice-ref-auth .lang-menu {
+  background: var(--surface-elevated);
+  min-width: 110px;
+}
+
+.lattice-ref-auth .lang-opt {
+  font-size: 11px;
+  padding: 5px 8px;
+}
+
+.auth-footer {
+  position: fixed;
+  left: 48px;
+  bottom: 28px;
+  z-index: 5;
+  display: flex;
+  align-items: center;
+  gap: 34px;
+}
+
+.auth-footer button {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  height: 42px;
+  border-radius: 11px;
+  border: 1px solid var(--accent-soft);
+  font-size: 16px;
+  color: var(--muted);
+  box-shadow: 0 8px 22px rgba(88,72,150,0.06);
+  cursor: pointer;
+}
+
+.auth-footer a {
+  color: var(--muted);
+  text-decoration: none;
+  font-size: 16px;
+  font-weight: 720;
+}
+
+.lattice-ref-auth #register-section .hero-logo,
+.lattice-ref-auth #register-section .logo {
+  display: none;
+}
+
+.lattice-ref-auth #register-section .title {
+  text-align: center;
+  font-size: 38px;
+  margin-bottom: 10px;
+  display: block;
+}
+
+.lattice-ref-auth #register-section .subtitle {
+  font-size: 16px;
+  text-align: center;
+  color: var(--ref-muted);
+  letter-spacing: 0;
+}
+
+.lattice-ref-auth #register-section .input {
+  height: 48px;
+  margin-bottom: 10px;
+  border: 1px solid #d9d6e4;
+  background: var(--input);
+  border-radius: 9px;
+  padding: 0 14px;
+  font-size: 15px;
+}
+
+:root[data-lt-theme="dark"] .lattice-ref-auth .card {
+  background: rgba(22, 22, 58, 0.94);
+  border-color: rgba(167, 139, 250, 0.24);
+  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.58);
+  backdrop-filter: none;
+}
+
+:root[data-lt-theme="dark"] .lattice-ref-auth .title,
+:root[data-lt-theme="dark"] .lattice-ref-auth #register-section .title {
+  background: linear-gradient(90deg, #f4f5fb 0 68%, var(--accent-2) 69% 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+:root[data-lt-theme="dark"] .lattice-ref-auth .input,
+:root[data-lt-theme="dark"] .lattice-ref-auth #register-section .input {
+  background: rgba(255, 255, 255, 0.06);
+  border-color: rgba(160, 170, 230, 0.24);
+  color: var(--text);
+}
+
+:root[data-lt-theme="dark"] .lattice-ref-auth .input::placeholder {
+  color: rgba(226, 232, 255, 0.52);
+}
+
+:root[data-lt-theme="dark"] .auth-window-controls span:nth-child(1)::before,
+:root[data-lt-theme="dark"] .auth-window-controls span:nth-child(3)::before,
+:root[data-lt-theme="dark"] .auth-window-controls span:nth-child(3)::after {
+  background: var(--text);
+}
+
+:root[data-lt-theme="dark"] .auth-window-controls span:nth-child(2)::before {
+  border-color: var(--text);
+}
+
+.lattice-ref-auth #register-section .submit {
+  height: 54px;
+  font-size: 17px;
+}
+
+@media (max-width: 1100px) {
+  .auth-window-controls {
+    display: none;
+  }
+
+  .auth-network {
+    display: none;
+  }
+}
+
+@media (max-height: 760px) {
+  .lattice-ref-auth {
+    padding-top: 58px;
+    padding-bottom: 16px;
+  }
+
+  .auth-footer {
+    display: none;
+  }
+
+  .lattice-ref-auth .card {
+    padding: 38px 30px 16px;
+  }
+
+  .lattice-ref-auth .hero-logo {
+    margin-bottom: 8px;
+  }
+
+  .lattice-ref-auth .hero-logo-mark {
+    width: 40px;
+    height: 40px;
+    font-size: 36px;
+  }
+
+  .lattice-ref-auth .title {
+    font-size: 26px;
+  }
+
+  .lattice-ref-auth .subtitle {
+    margin-bottom: 12px;
+    font-size: 16px;
+    line-height: 1.2;
+  }
+
+  .auth-field,
+  .lattice-ref-auth .submit,
+  .lattice-ref-auth .register-cta,
+  .lattice-ref-auth .sso-btn {
+    height: 38px;
+  }
+
+  .auth-field {
+    margin-bottom: 7px;
+  }
+
+  .lattice-ref-auth .submit,
+  .lattice-ref-auth .register-cta,
+  .lattice-ref-auth .sso-btn,
+  .local-start {
+    font-size: 13px;
+  }
+
+  .lattice-ref-auth .sso-divider {
+    margin: 10px 0 6px;
+    font-size: 12px;
+  }
+
+  .lattice-ref-auth .sso-btn {
+    margin-bottom: 7px;
+  }
+
+  .local-start {
+    margin-top: 8px;
+  }
+}
+
+@media (max-width: 760px) {
+  .auth-titlebar,
+  .auth-footer,
+  .auth-wave,
+  .auth-network {
+    display: none;
+  }
+
+  .lattice-ref-auth {
+    padding: 18px;
+  }
+
+  .lattice-ref-auth .card {
+    min-height: auto;
+    max-height: none;
+    padding: 28px 22px;
+  }
+
+  .lattice-ref-auth .hero-logo {
+    gap: 12px;
+  }
+
+  .lattice-ref-auth .hero-logo-mark {
+    width: 58px;
+    height: 58px;
+    font-size: 52px;
+  }
+
+  .lattice-ref-auth .title {
+    font-size: 34px;
+  }
+
+  .lattice-ref-auth .subtitle {
+    font-size: 26px;
+  }
+
+}
+
+/* Shared PPT rail */
+.reference-rail {
+  background: var(--sidebar);
+  border-right: 1px solid var(--ref-line);
+  color: var(--ref-ink);
+  min-height: 100vh;
+  padding: 26px 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  box-shadow: 12px 0 48px rgba(88,72,150,0.08);
+}
+
+.rail-brand {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 23px;
+  font-weight: 850;
+  letter-spacing: -0.04em;
+}
+
+.rail-brand i {
+  color: var(--ref-purple);
+  font-size: 30px;
+}
+
+.rail-brand span {
+  display: block;
+  font-size: 12px;
+  color: var(--ref-purple-2);
+  letter-spacing: 0;
+}
+
+.reference-rail nav {
+  display: flex;
+  flex-direction: column;
+  gap: 9px;
+}
+
+.reference-rail a,
+.reference-nav-item {
+  width: 100%;
+  border: 0;
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  border-radius: 10px;
+  padding: 13px 16px;
+  color: var(--text);
+  font: inherit;
+  font-size: 15px;
+  font-weight: 700;
+  background: transparent;
+  cursor: pointer;
+  transition: 160ms ease;
+}
+
+.reference-rail a.active,
+.reference-rail a:hover,
+.reference-nav-item.active,
+.reference-nav-item:hover {
+  color: var(--ref-purple);
+  background: linear-gradient(90deg, var(--border), rgba(111,66,232,0.05));
+}
+
+.reference-rail i,
+.reference-nav-item i {
+  font-size: 20px;
+}
+
+.rail-project {
+  margin-top: auto;
+  border: 1px solid var(--ref-line);
+  border-radius: 12px;
+  padding: 15px 16px;
+  background: var(--surface);
+  color: var(--ref-muted);
+}
+
+.rail-project span {
+  display: block;
+  font-size: 12px;
+  margin-bottom: 4px;
+}
+
+.rail-project strong {
+  display: block;
+  color: var(--ref-ink);
+  font-size: 14px;
+}
+
+/* Chat and home dashboard */
+.lattice-ref-chat {
+  background: var(--app-bg);
+}
+
+.lattice-ref-chat .sidebar {
+  width: 280px;
+  min-width: 280px;
+  background: var(--sidebar);
+  border-right: 1px solid rgba(111,66,232,0.13);
+  box-shadow: 12px 0 46px rgba(88,72,150,0.08);
+}
+
+.lattice-ref-chat .sidebar-header {
+  padding: 30px 24px 18px;
+  border-bottom: 0;
+}
+
+.lattice-ref-chat .logo-box {
+  width: 42px;
+  height: 42px;
+  border-radius: 13px;
+}
+
+.lattice-ref-chat .brand-title {
+  color: var(--ref-ink);
+  font-size: 23px;
+  letter-spacing: -0.04em;
+}
+
+.lattice-ref-chat .brand-subtitle {
+  display: inline-flex;
+  margin-top: 6px;
+  padding: 3px 10px;
+  border-radius: 999px;
+  color: var(--ref-purple);
+  background: rgba(111,66,232,0.10);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.lattice-ref-chat .user-strip {
+  margin: 0 18px 16px;
+  border: 1px solid var(--ref-line);
+  border-radius: 14px;
+  background: var(--sidebar);
+  order: 20;
+}
+
+.lattice-ref-chat .reference-side-nav {
+  padding: 12px 18px;
+}
+
+.lattice-ref-chat .sidebar-search,
+.lattice-ref-chat .sidebar-primary-actions {
+  margin: 0 18px;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.lattice-ref-chat .history-container {
+  padding: 10px 18px;
+}
+
+.lattice-ref-chat .sidebar-footer {
+  padding: 14px 18px 18px;
+}
+
+.lattice-ref-chat .new-chat-btn,
+.lattice-ref-chat .status-btn,
+.lattice-ref-chat .setup-wizard-sidebar-btn,
+.lattice-ref-chat .admin-btn,
+.lattice-ref-chat .file-type-btn,
+.lattice-ref-chat .logout-btn,
+.lattice-ref-chat .status-pill,
+.lattice-ref-chat .model-badge {
+  border: 1px solid rgba(111,66,232,0.16);
+  border-radius: 10px;
+  background: var(--surface-2);
+  color: var(--ref-ink);
+}
+
+.lattice-ref-chat .new-chat-btn:first-child {
+  border-color: rgba(111,66,232,0.28);
+  color: var(--ref-purple);
+}
+
+.lattice-ref-chat .chat-header {
+  min-height: 88px;
+  padding: 18px 28px;
+  background: var(--sidebar);
+  border-bottom: 1px solid rgba(111,66,232,0.11);
+  box-shadow: 0 2px 12px rgba(88,72,150,0.06);
+  backdrop-filter: blur(14px);
+}
+
+.lattice-ref-chat .messages-viewport {
+  padding: 30px 38px 20px;
+}
+
+.lattice-ref-chat .ops-strip {
+  display: flex;
+}
+
+.lattice-ref-chat .empty-state {
+  width: min(100%, 1320px);
+  max-width: none;
+  margin: 0 auto;
+  text-align: left;
+}
+
+.reference-home {
+  display: flex;
+  flex-direction: column;
+  gap: 22px;
+}
+
+.reference-home-head h1 {
+  margin: 0;
+  color: var(--ref-ink);
+  font-size: clamp(30px, 3vw, 40px);
+  font-weight: 860;
+  letter-spacing: -0.04em;
+}
+
+.reference-home-head p {
+  margin: 8px 0 0;
+  color: var(--ref-muted);
+  font-size: 15px;
+}
+
+.reference-card-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 20px;
+}
+
+.reference-dash-card,
+.reference-lists article {
+  border: 1px solid var(--ref-line);
+  border-radius: 18px;
+  background: var(--ref-card);
+  box-shadow: var(--ref-shadow);
+  transition: transform 200ms var(--lt-motion-ease, ease), box-shadow 200ms var(--lt-motion-ease, ease);
+}
+
+.reference-dash-card:hover,
+.reference-lists article:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 24px 64px rgba(88,72,150,0.18);
+}
+
+.reference-dash-card {
+  min-height: 260px;
+  padding: 22px 24px;
+}
+
+.reference-card-icon {
+  width: 56px;
+  height: 56px;
+  border-radius: 15px;
+  display: grid;
+  place-items: center;
+  margin-bottom: 18px;
+  color: var(--ref-purple);
+  background: linear-gradient(135deg, rgba(111,66,232,0.13), rgba(111,66,232,0.06));
+  font-size: 28px;
+}
+
+.reference-dash-card h3 {
+  margin: 0 0 20px;
+  color: var(--ref-ink);
+  font-size: 22px;
+}
+
+.reference-dash-card p {
+  color: var(--ref-muted);
+  margin: 0 0 14px;
+}
+
+.green-dot {
+  display: inline-block;
+  width: 11px;
+  height: 11px;
+  border-radius: 50%;
+  background: #28c66f;
+  box-shadow: 0 0 0 8px rgba(40,198,111,0.12);
+  margin-right: 10px;
+}
+
+.reference-stat-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: var(--ref-muted);
+  margin: 12px 0;
+}
+
+.reference-stat-row strong,
+.reference-big-number {
+  color: var(--ref-purple);
+  font-size: 22px;
+}
+
+.reference-big-number {
+  font-size: 34px;
+  font-weight: 850;
+}
+
+.reference-progress {
+  height: 10px;
+  border-radius: 999px;
+  background: var(--surface);
+  overflow: hidden;
+  margin: 16px 0 26px;
+}
+
+.reference-progress span {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, var(--ref-purple), var(--ref-purple-2));
+}
+
+.reference-dash-card button,
+.reference-lists button {
+  width: 100%;
+  border: 1px solid rgba(111,66,232,0.35);
+  border-radius: 10px;
+  padding: 12px 14px;
+  color: var(--ref-purple);
+  background: var(--card);
+  font: inherit;
+  font-weight: 800;
+  cursor: pointer;
+}
+
+.reference-lists {
+  display: grid;
+  grid-template-columns: 1fr 1.1fr;
+  gap: 20px;
+}
+
+.reference-lists article {
+  padding: 0 22px 12px;
+}
+
+.reference-lists header {
+  height: 58px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  border-bottom: 1px solid var(--ref-line);
+  color: var(--ref-ink);
+  font-weight: 850;
+}
+
+.reference-lists header button {
+  margin-left: auto;
+  width: auto;
+  border: 0;
+  padding: 0;
+  color: var(--ref-purple);
+  background: transparent;
+}
+
+.reference-lists p {
+  display: flex;
+  justify-content: space-between;
+  gap: 18px;
+  margin: 0;
+  padding: 15px 0;
+  border-bottom: 1px solid #f0ecf7;
+  color: var(--ref-ink);
+}
+
+.reference-lists p span {
+  color: var(--ref-faint);
+  white-space: nowrap;
+}
+
+.lattice-ref-chat .empty-grid {
+  display: flex;
+  justify-content: flex-start;
+  gap: 10px;
+}
+
+.lattice-ref-chat .empty-chip {
+  border-radius: 999px;
+  padding: 12px 16px;
+  box-shadow: none;
+}
+
+.lattice-ref-chat .input-area {
+  background: linear-gradient(0deg, var(--input), var(--input), transparent);
+}
+
+.lattice-ref-chat .input-box {
+  max-width: 1120px;
+  border-radius: 18px;
+  background: var(--input);
+  border-color: rgba(111,66,232,0.17);
+  box-shadow: 0 8px 32px rgba(88,72,150,0.10);
+}
+
+.lattice-ref-chat .user .bubble {
+  background: linear-gradient(135deg, var(--ref-purple), #6536d9);
+  border-radius: 16px 16px 4px 16px;
+}
+
+.lattice-ref-chat .ai .bubble {
+  background: var(--surface);
+  color: var(--ref-ink);
+  border-color: var(--accent-soft);
+  border-radius: 16px 16px 16px 4px;
+  box-shadow: 0 4px 18px rgba(88,72,150,0.08);
+}
+
+.lattice-ref-chat .workspace-modal,
+.lattice-ref-chat .mode-modal {
+  border-radius: 22px;
+}
+
+/* Graph page: slide 6 light graph workspace */
+.lattice-ref-graph {
+  margin: 0;
+  display: grid;
+  grid-template-columns: 264px minmax(0, 1fr);
+  min-height: 100vh;
+  overflow: hidden;
+  background: var(--surface);
+  color: var(--ref-ink);
+  font-family: "Inter", "Pretendard", "Apple SD Gothic Neo", -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
+.lattice-ref-graph .app {
+  height: 100vh;
+  grid-template-columns: minmax(0, 1fr) 320px;
+  background: var(--surface);
+}
+
+.lattice-ref-graph .stage {
+  border-right: 0;
+  background:
+    radial-gradient(circle, var(--border) 1px, transparent 1.8px),
+    linear-gradient(180deg, #fff 0%, var(--surface) 100%);
+  background-size: 28px 28px, 100% 100%;
+  margin: 98px 14px 40px 24px;
+  border: 1px solid var(--ref-line);
+  border-radius: 14px;
+  overflow: hidden;
+}
+
+.lattice-ref-graph .stage::before {
+  content: "지식 그래프";
+  position: fixed;
+  top: 34px;
+  left: 324px;
+  color: var(--ref-ink);
+  font-size: 31px;
+  font-weight: 860;
+  letter-spacing: -0.04em;
+}
+
+.lattice-ref-graph .stage::after {
+  content: "\ea2e";
+  font-family: "tabler-icons";
+  position: fixed;
+  top: 30px;
+  left: 288px;
+  width: 40px;
+  height: 40px;
+  display: grid;
+  place-items: center;
+  border-radius: 10px;
+  color: var(--ref-purple);
+  background: rgba(111,66,232,0.10);
+  font-size: 22px;
+}
+
+.lattice-ref-graph .search-shell {
+  top: -72px;
+  left: auto;
+  right: 250px;
+  width: min(520px, 42vw);
+  border-radius: 10px;
+  background: var(--input);
+  box-shadow: none;
+}
+
+.lattice-ref-graph .search-head {
+  display: none;
+}
+
+.lattice-ref-graph .search-input-wrap {
+  padding: 0;
+}
+
+.lattice-ref-graph .search-input {
+  height: 48px;
+  background: var(--input);
+  color: var(--ref-ink);
+  border-color: var(--ref-line);
+}
+
+.lattice-ref-graph #clear-search-btn {
+  display: none;
+}
+
+.lattice-ref-graph .search-results {
+  display: none;
+}
+
+.lattice-ref-graph .toolbar {
+  top: auto;
+  bottom: 12px;
+  left: 50%;
+  right: auto;
+  transform: translateX(-50%);
+  background: var(--surface-2);
+  border-color: var(--ref-line);
+  box-shadow: var(--ref-shadow);
+  border-radius: 12px;
+}
+
+.lattice-ref-graph .tb-btn {
+  background: var(--surface-2);
+  color: var(--ref-ink);
+  border-color: var(--ref-line);
+}
+
+.lattice-ref-graph aside:not(.reference-rail) {
+  margin: 98px 20px 40px 0;
+  border: 1px solid var(--ref-line);
+  border-radius: 14px;
+  background: var(--sidebar);
+  color: var(--ref-ink);
+  box-shadow: var(--ref-shadow);
+  display: flex;
+  flex-direction: column;
+  overflow-x: hidden;
+  overflow-y: auto;
+  min-height: 0;
+}
+
+.lattice-ref-graph .sidebar-head,
+.lattice-ref-graph .section {
+  border-color: var(--ref-line);
+}
+
+.lattice-ref-graph .eyebrow {
+  color: var(--ref-purple);
+}
+
+.lattice-ref-graph .sidebar-sub,
+.lattice-ref-graph .filter-count,
+.lattice-ref-graph .legend-meta,
+.lattice-ref-graph .detail-summary,
+.lattice-ref-graph .empty-hint {
+  color: var(--ref-muted);
+}
+
+.lattice-ref-graph .stat,
+.lattice-ref-graph .metric-card,
+.lattice-ref-graph .meta-block,
+.lattice-ref-graph .search-item {
+  background: var(--surface);
+  border-color: var(--ref-line);
+}
+
+.lattice-ref-graph #tooltip {
+  background: var(--surface-elevated);
+  color: var(--ref-ink);
+  border-color: var(--ref-line);
+}
+
+/* Admin page — light lavender theme (matches graph/chat) */
+.lattice-ref-admin {
+  margin: 0;
+  display: grid;
+  grid-template-columns: 264px minmax(0, 1fr);
+  min-height: 100vh;
+  overflow: hidden;
+  background:
+    radial-gradient(circle at 82% 12%, var(--border), transparent 30%),
+    radial-gradient(circle at 10% 80%, rgba(180,160,255,0.16), transparent 35%),
+    linear-gradient(180deg, var(--bg) 0%, var(--surface-2) 52%, var(--surface) 100%);
+  color: var(--text);
+}
+
+.lattice-ref-admin::before {
+  display: none;
+}
+
+.lattice-ref-admin .admin-rail {
+  background: var(--sidebar);
+  border-right: 1px solid rgba(111,66,232,0.13);
+  color: var(--text);
+  box-shadow: 12px 0 46px rgba(88,72,150,0.08);
+}
+
+.lattice-ref-admin .admin-rail .rail-brand {
+  align-items: flex-start;
+  flex-direction: column;
+  gap: 4px;
+  font-size: 25px;
+  color: var(--text);
+}
+
+.lattice-ref-admin .admin-rail .rail-brand i {
+  font-size: 34px;
+  color: var(--ref-purple);
+}
+
+.lattice-ref-admin .admin-rail a {
+  color: var(--text);
+}
+
+.lattice-ref-admin .admin-rail a.active,
+.lattice-ref-admin .admin-rail a:hover {
+  background: linear-gradient(90deg, var(--border), rgba(111,66,232,0.05));
+  color: var(--text);
+}
+
+.lattice-ref-admin .admin-rail .rail-project {
+  background: var(--sidebar);
+  border-color: rgba(111,66,232,0.13);
+}
+
+.lattice-ref-admin .admin-rail .rail-project strong {
+  color: var(--text);
+}
+
+.lattice-ref-admin .admin-rail .rail-project span {
+  color: var(--muted);
+}
+
+.lattice-ref-admin .page {
+  min-height: 100vh;
+  overflow-y: auto;
+}
+
+.lattice-ref-admin .topbar {
+  height: 96px;
+  background: var(--sidebar);
+  border-bottom: 1px solid rgba(111,66,232,0.10);
+  backdrop-filter: blur(14px);
+  padding: 22px 34px 8px;
+  position: sticky;
+}
+
+.lattice-ref-admin .brand-mark {
+  display: none;
+}
+
+.lattice-ref-admin .brand h1 {
+  font-size: 36px;
+  letter-spacing: -0.05em;
+  color: var(--text);
+}
+
+.lattice-ref-admin .brand p {
+  color: var(--muted);
+  font-size: 15px;
+}
+
+.lattice-ref-admin .top-actions .btn {
+  background: var(--surface-2);
+  border-color: rgba(111,66,232,0.18);
+  color: var(--text);
+}
+
+.lattice-ref-admin .top-actions .btn:hover {
+  background: rgba(111,66,232,0.10);
+  border-color: rgba(111,66,232,0.32);
+  color: var(--accent);
+}
+
+.lattice-ref-admin #admin-lang-btn {
+  min-width: 180px;
+  justify-content: center;
+  border-color: var(--border-strong);
+}
+
+.lattice-ref-admin .content {
+  width: min(1500px, calc(100vw - 316px));
+  padding: 8px 34px 28px;
+  gap: 18px;
+}
+
+.lattice-ref-admin .admin-view {
+  display: none;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.lattice-ref-admin .admin-view.active {
+  display: flex;
+}
+
+.lattice-ref-admin .hero {
+  display: none;
+}
+
+.lattice-ref-admin .summary-grid {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.lattice-ref-admin .summary-card,
+.lattice-ref-admin .panel,
+.lattice-ref-admin .subpanel,
+.lattice-ref-admin .session-card,
+.lattice-ref-admin .table-wrap,
+.lattice-ref-admin .audit-metric {
+  background: var(--card);
+  border-color: var(--accent-soft);
+  box-shadow: 0 8px 28px rgba(88,72,150,0.08);
+  color: var(--text);
+  border-radius: 12px;
+}
+
+.lattice-ref-admin .summary-card {
+  min-height: 118px;
+  padding: 18px 18px 16px 88px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  overflow: hidden;
+  transition: transform 200ms ease, box-shadow 200ms ease;
+}
+
+.lattice-ref-admin .summary-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 14px 40px rgba(88,72,150,0.14);
+}
+
+.lattice-ref-admin .summary-card::before {
+  content: "\ea02";
+  font-family: "tabler-icons";
+  position: absolute;
+  left: 20px;
+  top: 50%;
+  width: 48px;
+  height: 48px;
+  display: grid;
+  place-items: center;
+  border-radius: 8px;
+  color: #fff;
+  background: linear-gradient(135deg, var(--accent), #5332b8);
+  font-size: 24px;
+  transform: translateY(-50%);
+  box-shadow: 0 12px 24px rgba(111,66,232,0.16);
+}
+
+.lattice-ref-admin .summary-card:nth-child(2)::before { content: "\ea9a"; }
+.lattice-ref-admin .summary-card:nth-child(3)::before { content: "\eaa4"; }
+.lattice-ref-admin .summary-card:nth-child(4)::before {
+  content: "\eadd";
+  background: linear-gradient(135deg, #0d8f72, #116b6d);
+}
+
+.lattice-ref-admin .summary-card .label,
+.lattice-ref-admin .panel-header p,
+.lattice-ref-admin .summary-card .meta {
+  color: var(--muted);
+}
+
+.lattice-ref-admin .summary-card .label {
+  font-size: 12px;
+  font-weight: 800;
+  letter-spacing: 0;
+  text-transform: none;
+  margin-bottom: 8px;
+}
+
+.lattice-ref-admin td,
+.lattice-ref-admin th {
+  color: var(--text);
+}
+
+.lattice-ref-admin .summary-card .value {
+  color: var(--accent);
+  font-size: clamp(24px, 2.15vw, 34px);
+  line-height: 1.05;
+  letter-spacing: 0;
+  overflow: hidden;
+  overflow-wrap: anywhere;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.lattice-ref-admin .summary-card .meta {
+  margin-top: 8px;
+  min-height: 0;
+  line-height: 1.4;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.lattice-ref-admin .panel-header {
+  border-bottom-color: rgba(111,66,232,0.10);
+}
+
+.lattice-ref-admin .panel-header h3,
+.lattice-ref-admin .subpanel h4 {
+  color: var(--text);
+}
+
+.lattice-ref-admin table {
+  color: var(--text);
+  background: transparent;
+}
+
+.lattice-ref-admin tr,
+.lattice-ref-admin th,
+.lattice-ref-admin td {
+  border-color: rgba(111,66,232,0.10);
+}
+
+.lattice-ref-admin th {
+  background: rgba(111,66,232,0.05);
+  color: var(--muted);
+}
+
+.lattice-ref-admin input,
+.lattice-ref-admin textarea,
+.lattice-ref-admin select {
+  background: var(--input);
+  border-color: rgba(111,66,232,0.16);
+  color: var(--text);
+}
+
+.lattice-ref-admin input:focus,
+.lattice-ref-admin textarea:focus,
+.lattice-ref-admin select:focus {
+  border-color: rgba(111,66,232,0.44);
+  box-shadow: 0 0 0 3px rgba(111,66,232,0.08);
+}
+
+.lattice-ref-admin label {
+  color: var(--muted);
+}
+
+.lattice-ref-admin .item {
+  background: var(--surface-2);
+  border-color: rgba(111,66,232,0.10);
+  color: var(--text);
+}
+
+.lattice-ref-admin .preview {
+  color: var(--muted);
+}
+
+.lattice-ref-admin .tag {
+  color: var(--muted);
+  border-color: rgba(111,66,232,0.15);
+  background: var(--surface-2);
+}
+
+.lattice-ref-admin .muted {
+  color: var(--muted);
+}
+
+.lattice-ref-admin .notice {
+  background: rgba(111,66,232,0.08);
+  border-color: rgba(111,66,232,0.20);
+  color: var(--muted);
+}
+
+.lattice-ref-admin .status-copy {
+  color: var(--muted);
+}
+
+.lattice-ref-admin .inline-control {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.lattice-ref-admin .inline-control input {
+  flex: 1;
+}
+
+.lattice-ref-admin .button-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
+.lattice-ref-admin .sso-template-help {
+  margin-top: 12px;
+  padding: 11px 12px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: rgba(111,66,232,0.06);
+  color: var(--muted);
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.lattice-ref-admin .enterprise-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 10px;
+}
+
+.lattice-ref-admin .enterprise-cap-card {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  border: 1px solid var(--accent-soft);
+  border-radius: 8px;
+  background: var(--card);
+  padding: 11px 12px;
+}
+
+.lattice-ref-admin .enterprise-cap-card i {
+  color: var(--faint);
+  font-size: 18px;
+}
+
+.lattice-ref-admin .enterprise-cap-card.on i {
+  color: var(--success);
+}
+
+.lattice-ref-admin .enterprise-cap-card span {
+  flex: 1;
+  min-width: 0;
+  color: var(--text);
+  font-size: 13px;
+  font-weight: 800;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-transform: capitalize;
+}
+
+.lattice-ref-admin .enterprise-cap-card strong {
+  color: var(--muted);
+  font-size: 11px;
+}
+
+.lattice-ref-admin .enterprise-kv {
+  display: grid;
+  gap: 8px;
+}
+
+.lattice-ref-admin .enterprise-kv div {
+  display: grid;
+  grid-template-columns: 150px minmax(0, 1fr);
+  gap: 10px;
+  align-items: start;
+  border: 1px solid rgba(111,66,232,0.10);
+  border-radius: 8px;
+  background: var(--surface);
+  padding: 9px 10px;
+}
+
+.lattice-ref-admin .enterprise-kv span {
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.lattice-ref-admin .enterprise-kv strong {
+  color: var(--text);
+  font-size: 12px;
+  line-height: 1.45;
+  overflow-wrap: anywhere;
+}
+
+.lattice-ref-admin .enterprise-json {
+  max-height: 280px;
+  overflow: auto;
+  margin: 12px 0 0;
+  border: 1px solid rgba(111,66,232,0.10);
+  border-radius: 8px;
+  background: rgba(20,22,44,0.05);
+  color: var(--text);
+  padding: 12px;
+  font-size: 12px;
+  white-space: pre-wrap;
+}
+
+@media (max-width: 980px) {
+  .lattice-ref-chat .reference-card-grid,
+  .reference-lists {
+    grid-template-columns: 1fr;
+  }
+
+  .lattice-ref-graph,
+  .lattice-ref-admin {
+    display: block;
+    overflow: auto;
+  }
+
+  .reference-rail {
+    min-height: auto;
+  }
+}