/* --------------------------------------------------------------------------
   UWS FONTS - AI Native Typography Studio Design System
   Obsidian Void, Cybernetic Glassmorphism & Typographic Precision Drafting
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   01. Design Tokens & CSS Variables (Calligraphr White & Violet Theme)
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces & Depths */
  --bg-deep: #fbfbfd;
  --bg-app: #ffffff;
  --bg-panel: #ffffff;
  --bg-card: #f9f9fb;
  --bg-card-hover: #f3f0f9;
  --bg-input: #ffffff;
  --bg-pill: #f1eef8;
  --bg-pill-hover: #e9e3f4;
  --bg-footer: #9a9a9f;

  /* Border & Glass Accents */
  --border-subtle: #eae7ef;
  --border-medium: #d6d3df;
  --border-focus: #5d33a8;
  --border-glow: rgba(93, 51, 168, 0.25);
  --glass-blur: blur(12px);
  --glass-specular: inset 0 1px 0 0 rgba(255, 255, 255, 0.8);

  /* Typography Hierarchy */
  --font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Noto Sans KR', sans-serif;
  --font-mono: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Text Colors */
  --text-head: #2c2538;
  --text-body: #494554;
  --text-dim: #716d7e;
  --text-muted: #9592a3;
  --text-disabled: #bdbbc7;

  /* Calligraphr Violet Palette */
  --purple-main: #5d33a8;
  --purple-hover: #4d2691;
  --purple-light: #f3effb;
  --purple-ai: #6b3ba7;
  --purple-glow: rgba(93, 51, 168, 0.28);
  --cyan-neon: #5d33a8;
  --cyan-glow: rgba(93, 51, 168, 0.2);
  --indigo-core: #5d33a8;
  --indigo-glow: rgba(93, 51, 168, 0.25);
  --emerald-val: #10b981;
  --emerald-glow: rgba(16, 185, 129, 0.2);
  --amber-warn: #d97706;
  --amber-glow: rgba(217, 119, 6, 0.2);
  --rose-danger: #e11d48;
  --rose-glow: rgba(225, 29, 72, 0.2);

  /* Brand Gradients */
  --grad-brand: linear-gradient(135deg, #5d33a8 0%, #7644cc 100%);
  --grad-ai-btn: linear-gradient(135deg, #5d33a8 0%, #6f3ebc 100%);
  --grad-ai-glow: radial-gradient(circle, rgba(93, 51, 168, 0.25) 0%, transparent 70%);
  --grad-card-shimmer: linear-gradient(90deg, rgba(93,51,168,0) 0%, rgba(93,51,168,0.06) 50%, rgba(93,51,168,0) 100%);
  --grad-active-pill: linear-gradient(135deg, #5d33a8 0%, #703ebc 100%);

  /* Layout Dimensions */
  --header-height: 64px;
  --footer-height: 38px;
  --col-left-width: 440px;
  --col-right-width: 450px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 9999px;

  /* Transitions & Animation Easing */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s var(--ease-spring);
  --transition-slow: 0.4s var(--ease-spring);
}

/* --------------------------------------------------------------------------
   02. Global Reset & Body Scaffold
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  background-color: #ffffff;
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  accent-color: var(--purple-main);
}

button, input, textarea, select {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}

button {
  cursor: pointer;
  user-select: none;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Accessibility Focus Ring */
:focus-visible {
  outline: 2px solid var(--indigo-core);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* App Skeleton Container with Calligraphr Minimal Aura */
.app-layout {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
  position: relative;
  background: #ffffff;
}

/* Custom Sleek Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-pill);
  transition: var(--transition-fast);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.28);
}

/* --------------------------------------------------------------------------
   03. Calligraphr Style Navigation Header
   -------------------------------------------------------------------------- */
.studio-header {
  height: 72px;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 28px;
  background: #ffffff;
  border-bottom: 1px solid #f0edf4;
  box-shadow: none;
  z-index: 50;
  position: relative;
  flex-wrap: nowrap;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 22px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.calligraphr-nav {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  flex-wrap: nowrap;
  scrollbar-width: thin;
}

.nav-link-item,
.nav-studio-pill {
  flex-shrink: 0;
  white-space: nowrap;
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
}

.logo-mark {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.3), var(--glass-specular);
  transition: var(--transition-normal);
}

.brand-logo:hover .logo-mark {
  border-color: var(--cyan-neon);
  box-shadow: 0 0 24px var(--cyan-glow), var(--glass-specular);
  transform: translateY(-1px);
}

.logo-icon {
  width: 24px;
  height: 24px;
  filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.6));
}

.brand-text-group {
  display: flex;
  flex-direction: column;
}

.brand-title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #5d33a8;
  text-transform: none;
}

.brand-subtitle {
  display: none;
}

/* Top Navigation Links & Studio Switcher Pill */
.nav-link-item {
  font-weight: 500;
  font-size: 14px;
  color: #4b4855;
  transition: color 0.15s ease;
  padding: 4px 2px;
  border-bottom: 2px solid transparent;
}

.nav-link-item:hover,
.nav-link-item.active {
  color: #5d33a8;
  border-bottom-color: #5d33a8;
}

.nav-studio-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 999px;
  background: #f3effb;
  border: 1px solid #d4c8ec;
  color: #5d33a8;
  font-size: 13.5px;
  font-weight: 700;
  transition: all 0.2s ease;
}

.nav-studio-pill:hover,
.nav-studio-pill.active {
  background: #5d33a8;
  border-color: #5d33a8;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(93, 51, 168, 0.25);
}

.btn-mobile-hamburger {
  display: none;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: 1px solid #dcd5ea;
  background: #f8f6fc;
  color: #5d33a8;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.18s ease;
}

.btn-mobile-hamburger:hover,
.btn-mobile-hamburger.active {
  background: #5d33a8;
  border-color: #5d33a8;
  color: #ffffff;
}

.btn-mobile-hamburger svg {
  width: 20px;
  height: 20px;
}

.btn-mobile-hamburger .icon-menu-close {
  display: none;
}

.btn-mobile-hamburger.active .icon-menu-bars {
  display: none;
}

.btn-mobile-hamburger.active .icon-menu-close {
  display: block;
}

/* Single Button Language Toggle Styling */
.btn-lang-single {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 36px;
  padding: 0 12px;
  background: #f6f3fc;
  border: 1px solid #dcd5ea;
  border-radius: 999px;
  color: #5d33a8;
  font-size: 12px;
  font-weight: 800;
  font-family: var(--font-mono);
  cursor: pointer;
  user-select: none;
  transition: all 0.18s ease;
  flex-shrink: 0;
}

.btn-lang-single:hover {
  background: #5d33a8;
  border-color: #5d33a8;
  color: #ffffff;
  box-shadow: 0 3px 10px rgba(93, 51, 168, 0.22);
}

.btn-lang-single .lang-globe-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.footer-lang-link {
  background: none;
  border: none;
  color: #716d7e;
  font-size: 12px;
  cursor: pointer;
  padding: 0;
  font-weight: 500;
  transition: all 0.15s ease;
}

.footer-lang-link:hover {
  color: #5d33a8;
  text-decoration: underline;
}

.footer-lang-link.active {
  font-weight: 800;
  color: #5d33a8;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 900px) {
  .calligraphr-global-footer {
    padding: 32px 24px 24px;
  }
  .footer-top-grid {
    flex-direction: column;
    gap: 32px;
  }
  .footer-brand-col {
    max-width: 100%;
  }
  .footer-columns-wrap {
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
    gap: 28px 20px;
  }
}

@media (max-width: 580px) {
  .footer-columns-wrap {
    grid-template-columns: 1fr;
  }
  .footer-copyright-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================================================
   Calligraphr Main Landing View Styles (Matching Attached Screenshot)
   ========================================================================== */
.landing-view-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #ffffff;
}

.studio-view-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.landing-hero-section {
  max-width: 980px;
  margin: 0 auto;
  padding: 36px 24px 56px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.landing-hero-artwork {
  width: 100%;
  max-width: 780px;
  margin: 0 auto 18px;
}

.calligraphr-illustration-svg {
  width: 100%;
  height: auto;
  display: block;
}

.landing-main-title {
  font-size: 32px;
  font-weight: 400;
  color: #5d33a8;
  line-height: 1.32;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
  word-break: keep-all;
}

.landing-main-subtitle {
  font-size: 14.5px;
  color: #555261;
  line-height: 1.65;
  max-width: 640px;
  margin: 0 auto 28px;
  word-break: keep-all;
}

.landing-cta-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 54px;
}

.btn-landing-cta {
  background: #5d33a8;
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 13px 32px;
  border-radius: 4px;
  box-shadow: 0 3px 10px rgba(93, 51, 168, 0.25);
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.btn-landing-cta:hover {
  background: #4b268c;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(93, 51, 168, 0.35);
}

.landing-cta-note {
  font-size: 11.5px;
  color: #7c7888;
}

.landing-section-heading {
  font-size: 17px;
  font-weight: 500;
  color: #5d33a8;
  margin-bottom: 26px;
  text-align: center;
}

.landing-examples-block {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Calligraphr-Style Dynamic Typing Showcase Container */
.example-anim-viewport-wrap {
  width: 100%;
  max-width: 780px;
  min-height: 200px;
  max-height: 220px;
  overflow: hidden;
  position: relative;
  margin-bottom: 24px;
  padding: 8px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
  border-left: 2px solid #5d33a8;
  background: linear-gradient(90deg, rgba(93, 51, 168, 0.03) 0%, transparent 100%);
  border-radius: 0 8px 8px 0;
}

.example-anim-line-wrap {
  min-height: 38px;
  display: flex;
  align-items: center;
}

.anim-font-text {
  color: #2c2538;
  line-height: 1.35;
  word-break: keep-all;
  display: inline-block;
  white-space: nowrap;
}

.anim-font-text.style-handwriting {
  font-family: 'Nanum Pen Script', cursive;
  font-size: 32px;
  color: #5d33a8;
}

.anim-font-text.style-cursive {
  font-family: 'Nanum Brush Script', cursive;
  font-size: 29px;
  color: #2c2538;
}

.anim-font-text.style-brush {
  font-family: 'Gowun Batang', serif;
  font-size: 23px;
  font-weight: 700;
  color: #4338ca;
}

.anim-font-text.style-modern {
  font-family: 'Gowun Dodum', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #0f172a;
}

.anim-cursor {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  background-color: #5d33a8;
  margin-left: 3px;
  vertical-align: text-bottom;
  animation: blinkCursor 0.75s step-end infinite;
}

@keyframes blinkCursor {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Calligraphr-Style Docs Tabs Inside Template Modal */
.template-docs-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 24px;
  background: #f8f6fc;
  border-bottom: 1px solid var(--border-subtle);
  overflow-x: auto;
}

.docs-tab-btn {
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: #645f73;
  background: transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.docs-tab-btn:hover {
  background: #eee8f8;
  color: #5d33a8;
}

.docs-tab-btn.active {
  background: #5d33a8;
  color: #ffffff;
  font-weight: 700;
}

.doc-tutorial-card {
  background: #fbf9fd;
  border: 1px solid #e5def2;
  border-radius: 10px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: #3b3744;
  line-height: 1.7;
}

.doc-tutorial-card h4 {
  font-size: 16px;
  font-weight: 800;
  color: #5d33a8;
}

.link-more-examples {
  font-size: 13px;
  font-weight: 600;
  color: #5d33a8;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.link-more-examples:hover {
  color: #3f1d7b;
}

/* 2. Testimonials Band (#dedede Gray Background) */
.landing-testimonials-section {
  width: 100%;
  background: #dedede;
  padding: 46px 24px 58px;
}

.landing-inner-container {
  max-width: 960px;
  margin: 0 auto;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  max-width: 780px;
  margin: 0 auto;
}

.testimonial-card {
  background: #ffffff;
  border-radius: 6px;
  padding: 18px 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}

.t-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.t-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}

.t-author-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  flex: 1;
}

.t-author-name {
  font-size: 13.5px;
  font-weight: 700;
  color: #1f1c24;
}

.t-author-handle {
  font-size: 11.5px;
  color: #657786;
}

.t-social-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.t-card-body {
  font-size: 13px;
  color: #242129;
  line-height: 1.52;
  word-break: keep-all;
}

.t-card-date {
  font-size: 11px;
  color: #78828c;
  margin-top: auto;
}

/* 3. Workflow Preview Thumbnails Section */
.landing-workflow-section {
  width: 100%;
  background: #ffffff;
  padding: 48px 24px 64px;
}

.workflow-screens-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 860px;
  margin: 0 auto;
}

.workflow-screen-card {
  background: #ffffff;
  border: 1px solid #d8d5e0;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  display: flex;
  flex-direction: column;
  height: 156px;
}

.workflow-screen-card:hover {
  transform: translateY(-3px);
  border-color: #5d33a8;
  box-shadow: 0 8px 20px rgba(93, 51, 168, 0.15);
}

.wf-window-bar {
  height: 22px;
  background: #f5f3f9;
  border-bottom: 1px solid #e6e2ef;
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 8.5px;
}

.wf-brand {
  font-weight: 800;
  color: #5d33a8;
}

.wf-menu-dots {
  color: #888496;
}

.wf-body {
  flex: 1;
  display: flex;
  padding: 8px;
  gap: 8px;
  background: #fbfafd;
  position: relative;
}

.wf-sidebar {
  width: 28px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-top: 4px;
}

.wf-line {
  height: 4px;
  background: #e0dce8;
  border-radius: 2px;
}

.wf-line.active {
  background: #5d33a8;
}

.wf-main {
  flex: 1;
  background: #ffffff;
  border: 1px solid #ece9f2;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wf-mini-title {
  font-size: 8px;
  font-weight: 700;
  color: #5d33a8;
}

.wf-char-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
  font-size: 8.5px;
  font-weight: 700;
  color: #3b3744;
  text-align: center;
}

.wf-char-grid span {
  border: 1px solid #ebe8f2;
  padding: 2px 0;
  background: #fdfcff;
}

.wf-compare-box {
  align-items: center;
  justify-content: center;
  position: relative;
}

.wf-glyph-pair {
  display: flex;
  gap: 18px;
  font-size: 28px;
  font-weight: 800;
  color: #2c2538;
}

.wf-Baseline-rule {
  width: 85%;
  height: 1px;
  background: #5d33a8;
  opacity: 0.4;
}

.wf-modal-Float {
  margin: auto;
  width: 90%;
  background: #ffffff;
  border: 1px solid #d5cee6;
  border-radius: 4px;
  padding: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.wf-cursive-preview {
  font-size: 10px;
  font-style: italic;
  color: #2c2538;
  line-height: 1.3;
}

.wf-btn-chip {
  align-self: center;
  background: #5d33a8;
  color: #ffffff;
  font-size: 7.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 3px;
}

/* 4. AEO / GEO / NEO Structured Fact Sheet & FAQ Section Styles */
.landing-faq-section {
  width: 100%;
  background: #fbfafd;
  border-top: 1px solid #ece8f4;
  padding: 52px 24px 68px;
}

.landing-faq-lead {
  font-size: 13.5px;
  color: #5c576b;
  text-align: center;
  max-width: 680px;
  margin: -12px auto 30px;
  line-height: 1.65;
  word-break: keep-all;
}

.geo-spec-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 860px;
  margin: 0 auto 32px;
}

.geo-spec-card {
  background: #ffffff;
  border: 1px solid #e4dff0;
  border-radius: 10px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.geo-spec-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: #5d33a8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.geo-spec-value {
  font-size: 15px;
  font-weight: 800;
  color: #2c2538;
  line-height: 1.35;
}

.geo-spec-desc {
  font-size: 12px;
  color: #6b667a;
  line-height: 1.5;
  word-break: keep-all;
}

.aeo-faq-list {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.aeo-faq-item {
  background: #ffffff;
  border: 1px solid #e4dff0;
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.18s ease;
}

.aeo-faq-item[open] {
  border-color: #5d33a8;
}

.aeo-faq-question {
  padding: 16px 20px;
  font-size: 14px;
  font-weight: 700;
  color: #2c2538;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  user-select: none;
}

.aeo-faq-question::-webkit-details-marker {
  display: none;
}

.aeo-faq-question::after {
  content: '+';
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  color: #5d33a8;
  flex-shrink: 0;
}

.aeo-faq-item[open] .aeo-faq-question::after {
  content: '−';
}

.aeo-faq-answer {
  padding: 0 20px 18px;
  font-size: 13px;
  color: #494554;
  line-height: 1.65;
  border-top: 1px solid #f2eff8;
  padding-top: 14px;
  word-break: keep-all;
}

.aeo-faq-answer code {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: #5d33a8;
  background: #f3effb;
  padding: 2px 6px;
  border-radius: 4px;
}

.geo-compare-box {
  max-width: 860px;
  margin: 34px auto 0;
  background: #ffffff;
  border: 1px solid #e4dff0;
  border-radius: 12px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.geo-compare-title {
  font-size: 15.5px;
  font-weight: 800;
  color: #2c2538;
  text-align: center;
}

.geo-compare-table td,
.geo-compare-table th {
  font-size: 12.5px;
  padding: 11px 14px;
}

@media (max-width: 860px) {
  .geo-spec-summary-grid {
    grid-template-columns: 1fr;
  }
}

.project-spec-chip {
  display: flex;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 5px 8px 5px 14px;
  transition: var(--transition-normal);
}

.project-spec-chip:focus-within {
  border-color: var(--indigo-core);
  box-shadow: 0 0 0 2px var(--indigo-glow);
  background: var(--bg-card-hover);
}

.font-name-input {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-body);
  width: 180px;
  background: transparent;
}

.font-name-input::placeholder {
  color: var(--text-muted);
}

.font-format-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: var(--radius-xs);
  background: rgba(6, 182, 212, 0.12);
  border: 1px solid rgba(6, 182, 212, 0.25);
  color: var(--cyan-neon);
  margin-left: 8px;
}

/* Engine Cluster Badges */
.header-center {
  display: flex;
  align-items: center;
}

.engine-badge-cluster {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(15, 20, 32, 0.95);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 5px 10px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}

.engine-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  background: transparent;
  transition: var(--transition-fast);
}

.engine-badge.active {
  color: var(--text-body);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--text-muted);
}

.pulse-gemini {
  background-color: var(--purple-ai);
  box-shadow: 0 0 10px var(--purple-ai);
  animation: radarPulse 2s infinite ease-in-out;
}

.wasm-neon {
  background-color: var(--cyan-neon);
  box-shadow: 0 0 10px var(--cyan-neon);
  animation: radarPulse 2.4s infinite ease-in-out;
}

/* Global Actions */
.header-right {
  display: flex;
  align-items: center;
}

.global-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.action-btn .btn-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.action-btn.secondary {
  background: var(--bg-card);
  color: var(--text-dim);
  border: 1px solid var(--border-subtle);
}

.action-btn.secondary:hover {
  background: var(--bg-card-hover);
  color: var(--text-head);
  border-color: var(--border-medium);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.action-btn.primary-glow {
  background: #5d33a8;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 9px 22px;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(93, 51, 168, 0.25);
}

.action-btn.primary-glow:hover {
  background: #4d2691;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(93, 51, 168, 0.35);
}

.action-btn.primary-glow:active {
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   04. 3-Column Studio Workspace Grid (Full Visibility Without Inner Scroll)
   -------------------------------------------------------------------------- */
.studio-workspace {
  flex: 1;
  display: grid;
  grid-template-columns: 420px 1fr 440px;
  height: auto;
  min-height: calc(100vh - 72px - 44px);
  max-height: none;
  overflow: visible;
  align-items: stretch;
  background-color: #fcfbfe;
}

/* Panel Frame */
.panel {
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  backdrop-filter: var(--glass-blur);
  position: relative;
  overflow: visible;
  height: auto;
}

.panel:not(:last-child) {
  border-right: 1px solid var(--border-subtle);
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid var(--border-subtle);
  background: #fbfafd;
}

.panel-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.panel-step {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--cyan-neon);
  text-transform: uppercase;
}

.panel-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-head);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.info-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  color: var(--text-dim);
  white-space: nowrap;
  flex-shrink: 0;
}

.info-pill.highlight {
  background: rgba(6, 182, 212, 0.12);
  border-color: rgba(6, 182, 212, 0.35);
  color: var(--cyan-neon);
  box-shadow: 0 0 14px var(--cyan-glow);
}

/* --------------------------------------------------------------------------
   05. COLUMN 1: Input Deck (Canvas & Photo Sheet)
   -------------------------------------------------------------------------- */
.input-deck {
  display: flex;
  flex-direction: column;
  overflow: visible;
  height: auto;
}

/* Segmented Control Mode Switcher */
.segmented-control {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 5px;
  margin: 14px 20px 4px 20px;
  background: var(--bg-pill);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  gap: 6px;
}

.seg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  border-radius: var(--radius-sm);
  transition: var(--transition-normal);
}

.seg-btn:hover {
  color: var(--text-head);
  background: rgba(255, 255, 255, 0.04);
}

.seg-btn.active {
  color: var(--text-head);
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.seg-icon {
  width: 15px;
  height: 15px;
}

/* Tab View Panes */
.tab-content {
  display: none;
  flex-direction: column;
  padding: 14px 20px;
}

.tab-content.active {
  display: flex;
}

/* Reference Jamo Carousel */
.reference-selector-block {
  margin-bottom: 14px;
}

.selector-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}

.selector-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.selector-help {
  font-size: 12px;
  color: var(--cyan-neon);
  font-weight: 500;
  line-height: 1.45;
}

.pill-scroll-container {
  width: 100%;
  overflow: visible;
  padding-bottom: 4px;
}

.character-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
}

.char-pill {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  color: var(--text-body);
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
}

.char-pill:hover {
  border-color: var(--indigo-core);
  background: var(--bg-card-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.char-pill.active {
  background: var(--grad-active-pill);
  border-color: rgba(255, 255, 255, 0.3);
  color: #ffffff;
  box-shadow: 0 0 16px var(--indigo-glow);
}

.char-pill.highlight {
  border-color: rgba(6, 182, 212, 0.45);
}

/* Canvas Studio Drafting Card (Calligraphr Clean White Paper View) */
.canvas-studio-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #dcd7e6;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(93, 51, 168, 0.05);
}

.canvas-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #ffffff;
  background-image:
    linear-gradient(rgba(93, 51, 168, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(93, 51, 168, 0.04) 1px, transparent 1px);
  background-size: 20px 20px;
  cursor: crosshair;
}

#traceCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  touch-action: none;
}

/* Typographic Baseline Guides Overlay - Subtle Minimalist Lines */
.typographic-grid-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.2s ease;
}

.typographic-grid-overlay.hidden-guides {
  opacity: 0;
}

.grid-line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
}

.grid-line .line-tag {
  position: absolute;
  right: 8px;
  top: -12px;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #9993a8;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(4px);
  padding: 0 4px;
  border-radius: 2px;
}

.grid-line.ascender   { top: 18%; border-top: 1px dashed rgba(244, 63, 94, 0.25); }
.grid-line.cap-height { top: 28%; border-top: 1px dashed rgba(168, 85, 247, 0.25); }
.grid-line.x-height   { top: 44%; border-top: 1px dashed rgba(93, 51, 168, 0.25); }
.grid-line.baseline   { top: 80%; border-top: 1.5px solid rgba(93, 51, 168, 0.6); }
.grid-line.descender  { top: 92%; border-top: 1px dashed rgba(245, 158, 11, 0.25); }

.center-crosshair {
  position: absolute;
  pointer-events: none;
}

.center-crosshair.horizontal {
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
}

.center-crosshair.vertical {
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
  background: rgba(255, 255, 255, 0.06);
}

/* Watermark Ghost Guide */
.glyph-ghost-guide {
  position: absolute;
  font-size: 260px;
  font-weight: 800;
  color: rgba(93, 51, 168, 0.06);
  user-select: none;
  pointer-events: none;
  z-index: 1;
  transform: translateY(-8px);
}

/* Canvas Micro-Toolbar */
.canvas-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #fbfafd;
  border-top: 1px solid #ebe7f2;
  gap: 12px;
}

.tool-group {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-card);
  padding: 3px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
}

.tool-btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xs);
  color: var(--text-dim);
  transition: var(--transition-fast);
}

.tool-btn:hover {
  color: var(--text-head);
  background: rgba(255, 255, 255, 0.08);
}

.tool-btn.active {
  color: #ffffff;
  background: var(--indigo-core);
  box-shadow: 0 0 10px var(--indigo-glow);
}

.tool-btn svg {
  width: 15px;
  height: 15px;
}

.slider-inline-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.inline-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
}

.range-val {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--cyan-neon);
  min-width: 36px;
  text-align: right;
}

/* Register Glyph Button */
.btn-register-stroke {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  background: rgba(16, 185, 129, 0.16);
  border: 1px solid rgba(16, 185, 129, 0.38);
  color: #34d399;
  transition: var(--transition-normal);
  white-space: nowrap;
}

.btn-register-stroke:hover {
  background: rgba(16, 185, 129, 0.28);
  border-color: #34d399;
  box-shadow: 0 0 14px var(--emerald-glow);
  transform: translateY(-1px);
}

.btn-register-stroke svg {
  width: 14px;
  height: 14px;
}

/* Registered Ribbon Block */
.registered-ribbon-block {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ribbon-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ribbon-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  overflow: visible;
  padding-bottom: 4px;
}

.sample-chip {
  min-width: 46px;
  height: 50px;
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  position: relative;
  transition: var(--transition-fast);
}

.sample-chip.completed {
  border-color: rgba(16, 185, 129, 0.45);
  background: rgba(16, 185, 129, 0.08);
}

.sample-chip.empty {
  border-style: dashed;
  opacity: 0.65;
}

.sample-chip .sample-char {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-head);
}

.sample-chip .check-icon {
  font-size: 10px;
  color: var(--emerald-val);
  font-weight: 800;
}

.sample-chip .empty-icon {
  font-size: 13px;
  color: var(--text-muted);
}

/* Tab 2: Photo Dropzone View */
.dropzone-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--border-medium);
  border-radius: var(--radius-lg);
  padding: 40px 24px;
  text-align: center;
  background: #fbfafd;
  cursor: pointer;
  transition: var(--transition-normal);
  position: relative;
}

.dropzone-card:hover, .dropzone-card.drag-active {
  border-color: var(--indigo-core);
  background: rgba(99, 102, 241, 0.08);
  box-shadow: 0 0 24px var(--indigo-glow);
}

.dropzone-icon-ring {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  margin-bottom: 16px;
  color: var(--cyan-neon);
  box-shadow: 0 0 16px rgba(6, 182, 212, 0.2);
}

.dropzone-icon-ring svg {
  width: 26px;
  height: 26px;
}

.dropzone-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-head);
  margin-bottom: 6px;
}

.dropzone-desc {
  font-size: 12px;
  color: var(--text-dim);
  max-width: 290px;
  line-height: 1.5;
  margin-bottom: 18px;
}

.dropzone-features {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 18px;
}

.feature-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  padding: 4px 9px;
  border-radius: var(--radius-xs);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-subtle);
  color: var(--text-dim);
}

.template-download-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
}

.callout-text {
  font-size: 11px;
  color: var(--text-muted);
}

.template-link {
  font-size: 11px;
  font-weight: 600;
  color: var(--cyan-neon);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: var(--transition-fast);
}

.template-link:hover {
  color: #ffffff;
  text-shadow: 0 0 8px var(--cyan-glow);
}

/* Photo Slices Matrix */
.photo-preview-deck {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.deck-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.deck-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
}

.btn-rescan {
  font-size: 11px;
  font-weight: 600;
  color: var(--cyan-neon);
  background: rgba(6, 182, 212, 0.12);
  padding: 4px 10px;
  border-radius: var(--radius-xs);
  border: 1px solid rgba(6, 182, 212, 0.3);
  transition: var(--transition-fast);
}

.btn-rescan:hover {
  background: rgba(6, 182, 212, 0.25);
  box-shadow: 0 0 10px var(--cyan-glow);
}

.preview-cells-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.detected-cell-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 8px;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  position: relative;
  transition: var(--transition-fast);
}

.detected-cell-item:hover {
  border-color: var(--border-medium);
  background: var(--bg-card-hover);
}

.cell-jamo-tag {
  font-size: 10px;
  font-weight: 700;
  color: var(--cyan-neon);
  align-self: flex-start;
}

.cell-inner-vector {
  font-size: 26px;
  font-weight: 800;
  margin: 6px 0;
  color: var(--text-head);
}

.cell-accuracy {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--emerald-val);
}

/* AI Photo Analysis & Missing Character Guidance Card */
.photo-missing-guide-card {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: #fbf9ff;
  border: 1px solid #dfd6f2;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.photo-missing-guide-card.complete {
  background: #f2fdf8;
  border-color: rgba(16, 185, 129, 0.45);
}

.missing-guide-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.missing-guide-title-row {
  display: flex;
  align-items: center;
  gap: 7px;
}

.missing-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--amber-warn);
  box-shadow: 0 0 8px var(--amber-glow);
}

.missing-status-dot.complete {
  background: var(--emerald-val);
  box-shadow: 0 0 8px var(--emerald-glow);
}

.missing-guide-title {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--text-head);
}

.missing-coverage-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: rgba(93, 51, 168, 0.12);
  color: var(--purple-main);
}

.missing-progress-track {
  width: 100%;
  height: 6px;
  border-radius: var(--radius-pill);
  background: #e9e4f3;
  overflow: hidden;
}

.missing-progress-fill {
  height: 100%;
  background: var(--grad-brand);
  border-radius: var(--radius-pill);
  transition: width 0.35s ease;
}

.photo-dna-summary-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  background: #ffffff;
  border: 1px solid #e7e1f3;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--purple-main);
}

.missing-guide-desc {
  font-size: 11.5px;
  color: var(--text-body);
  line-height: 1.5;
  word-break: keep-all;
}

.missing-char-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.missing-sub-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-dim);
}

.missing-char-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.missing-pill-btn {
  min-width: 30px;
  height: 28px;
  padding: 0 8px;
  border-radius: var(--radius-xs);
  background: #ffffff;
  border: 1px dashed #b9a6e2;
  color: var(--purple-main);
  font-size: 12.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
}

.missing-pill-btn:hover {
  background: var(--purple-main);
  border-style: solid;
  border-color: var(--purple-main);
  color: #ffffff;
  transform: translateY(-1px);
}

.missing-pill-btn.syllable {
  border-color: rgba(217, 119, 6, 0.5);
  color: var(--amber-warn);
}

.missing-pill-btn.syllable:hover {
  background: var(--amber-warn);
  border-color: var(--amber-warn);
  color: #ffffff;
}

.recommend-words-callout {
  margin-top: 4px;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  background: #ffffff;
  border: 1px solid #e4dcf2;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rec-badge {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  background: #f3effb;
  color: var(--purple-main);
}

.rec-text {
  font-size: 11.5px;
  color: var(--text-head);
  line-height: 1.48;
  word-break: keep-all;
}

.photo-guide-action-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.btn-photo-add-more {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--purple-main);
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 700;
  transition: var(--transition-fast);
}

.btn-photo-add-more:hover {
  background: var(--purple-hover);
  transform: translateY(-1px);
}

.btn-photo-add-more svg {
  width: 14px;
  height: 14px;
}

.btn-photo-jump-canvas {
  padding: 8px 11px;
  border-radius: var(--radius-sm);
  background: #ffffff;
  border: 1px solid #d4c8ec;
  color: var(--purple-main);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  transition: var(--transition-fast);
}

.btn-photo-jump-canvas:hover {
  background: #f3effb;
}

/* AI Trigger Action Box */
.synthesis-action-box {
  margin-top: auto;
  padding: 18px 20px;
  background: #fbfafd;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.btn-synthesize-all {
  position: relative;
  width: 100%;
  padding: 14px 20px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.25);
  overflow: hidden;
  box-shadow: 0 0 28px var(--purple-glow), var(--glass-specular);
  transition: var(--transition-normal);
}

.btn-synthesize-all:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 0 38px rgba(168, 85, 247, 0.7), var(--glass-specular);
}

.btn-synthesize-all:active:not(:disabled) {
  transform: translateY(0);
}

.btn-synthesize-all:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  filter: grayscale(0.5);
}

.btn-bg-glow {
  position: absolute;
  inset: 0;
  background: var(--grad-ai-btn);
  z-index: 1;
}

.btn-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.sparkle-icon {
  width: 16px;
  height: 16px;
  filter: drop-shadow(0 0 6px #ffffff);
}

.ai-promise-note {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.45;
}

/* --------------------------------------------------------------------------
   06. COLUMN 2: Center Studio (Glyph Stream Matrix)
   -------------------------------------------------------------------------- */
.matrix-deck {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: #fdfcff;
}

.matrix-filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border-subtle);
  background: #fbfafd;
  flex-wrap: wrap;
  gap: 12px;
}

.matrix-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.matrix-category-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-pill);
  padding: 4px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
}

.cat-pill {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
}

.cat-pill:hover {
  color: var(--text-head);
}

.cat-pill.active {
  color: #ffffff;
  background: var(--purple-main);
  border: 1px solid var(--purple-main);
  box-shadow: 0 2px 8px rgba(93, 51, 168, 0.2);
}

/* Glyph Filter Search Input */
.search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 6px 12px;
  transition: var(--transition-normal);
}

.search-wrap:focus-within {
  border-color: var(--indigo-core);
  box-shadow: 0 0 0 2px var(--indigo-glow);
}

.search-icon {
  width: 14px;
  height: 14px;
  color: var(--text-muted);
}

.glyph-search {
  font-size: 12px;
  color: var(--text-body);
  width: 160px;
}

.glyph-search::placeholder {
  color: var(--text-muted);
}

/* Live AI Status HUD Banner */
.ai-status-banner {
  display: flex;
  flex-direction: column;
  padding: 12px 24px;
  background: #f7f4fc;
  border-bottom: 1px solid var(--border-subtle);
  gap: 8px;
}

.status-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: 12px;
}

.radar-ping {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cyan-neon);
  box-shadow: 0 0 8px var(--cyan-neon);
}

.radar-ping::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid var(--cyan-neon);
  opacity: 0.8;
  animation: radarWave 2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.status-label-main {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-body);
}

.metrics-counters {
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
}

.metrics-counters strong {
  color: var(--text-head);
  font-weight: 600;
}

.text-neon-cyan {
  color: var(--cyan-neon) !important;
}

.progress-track {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: var(--grad-brand);
  box-shadow: 0 0 12px var(--indigo-glow);
  transition: width 0.3s ease;
}

/* Glyph Cards Grid Area */
.glyph-matrix-scroll-area {
  flex: 1;
  overflow-y: auto;
  padding: 22px 24px;
}

.glyph-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
  gap: 12px;
}

/* Individual Glyph Card - Typography First Minimalist Design */
.glyph-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #ebe6f2;
  border-radius: 10px;
  padding: 10px 10px 8px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  user-select: none;
  box-shadow: 0 1px 4px rgba(44, 37, 56, 0.03);
  content-visibility: auto;
  contain-intrinsic-size: 116px 120px;
  cursor: pointer;
}

.glyph-card:hover {
  transform: translateY(-2px);
  border-color: #5d33a8;
  background: #fcfbfe;
  box-shadow: 0 6px 16px rgba(93, 51, 168, 0.12);
}

.glyph-card:hover {
  transform: translateY(-2px);
  border-color: #5d33a8;
  background: #fdfcff;
  box-shadow: 0 6px 16px rgba(93, 51, 168, 0.1);
}

.card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.char-code {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-muted);
}

.status-badge {
  font-size: 8px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: var(--radius-xs);
  text-transform: uppercase;
}

.status-badge.check {
  background: rgba(16, 185, 129, 0.16);
  color: #34d399;
}

.status-badge.ai-thinking {
  background: rgba(168, 85, 247, 0.22);
  color: #d8b4fe;
}

.status-badge.waiting {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
}

.card-preview {
  flex: 1;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.glyph-vector-char {
  font-size: 38px;
  font-weight: 700;
  color: var(--text-head);
  line-height: 1;
  transition: var(--transition-fast);
}

.glyph-vector-char.ghost {
  opacity: 0.25;
}

.glyph-vector-svg {
  width: 54px;
  height: 54px;
  color: var(--text-head);
  display: block;
  transition: transform 0.18s ease;
}

.glyph-card:hover .glyph-vector-svg {
  transform: scale(1.08);
  color: var(--purple-main);
}

.glyph-card.queued .glyph-vector-svg {
  opacity: 0.28;
}

.cell-vector-svg {
  width: 40px;
  height: 40px;
  color: var(--text-head);
  margin: 4px 0;
  display: block;
}

.card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--text-muted);
  border-top: 1px solid var(--border-subtle);
  padding-top: 6px;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
}

.card-bottom .stroke-type {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 58px;
  text-align: right;
}

/* Generating Shimmer Card State */
.glyph-card.generating {
  border-color: rgba(168, 85, 247, 0.5);
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.2);
}

.pulse-shimmer::before {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 150%;
  height: 100%;
  background: var(--grad-card-shimmer);
  animation: shimmerSweep 1.8s infinite;
}

/* --------------------------------------------------------------------------
   07. COLUMN 3: Right Inspector & Live Type Playground
   -------------------------------------------------------------------------- */
.inspector-deck {
  display: flex;
  flex-direction: column;
  overflow: visible;
  height: auto;
}

/* Interactive Playground Card */
.playground-card {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.playground-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: nowrap;
}

.playground-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  white-space: nowrap;
  flex-shrink: 0;
}

.quick-phrases-dropdown {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
}

.btn-sample-phrase {
  font-size: 10px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: var(--radius-xs);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  color: var(--text-dim);
  transition: var(--transition-fast);
  white-space: nowrap;
  flex-shrink: 0;
}

.btn-sample-phrase:hover {
  color: var(--text-head);
  border-color: var(--indigo-core);
  background: var(--bg-card-hover);
}

.type-tester-container {
  width: 100%;
  background: #ffffff;
  border: 1px solid #dcd7e6;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(93, 51, 168, 0.04);
}

.live-type-box {
  width: 100%;
  min-height: 130px;
  background: transparent;
  color: #2c2538;
  font-size: 32px;
  line-height: 1.45;
  letter-spacing: -0.02em;
  resize: vertical;
  word-break: break-all;
  border: none;
  outline: none;
}

.live-type-box::placeholder {
  font-size: 14px;
  color: var(--text-muted);
}

/* Typography Tuning Sliders Grid */
.typography-tuning-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.tune-control {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--bg-card);
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
}

.tune-control.compact {
  padding: 10px 12px;
}

.control-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.control-title {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-dim);
  white-space: nowrap;
}

.control-val {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--cyan-neon);
  white-space: nowrap;
}

/* Modern Native Range Slider with Subtle Track & Purple Thumb */
.custom-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: var(--radius-pill);
  background: #e6e1f0;
  outline: none;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.custom-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #5d33a8;
  border: 2px solid #ffffff;
  box-shadow: 0 1px 4px rgba(93, 51, 168, 0.35);
  cursor: pointer;
  transition: transform 0.12s var(--ease-spring), box-shadow 0.12s ease;
}

.custom-range::-webkit-slider-thumb:hover {
  transform: scale(1.25);
  box-shadow: 0 2px 8px rgba(93, 51, 168, 0.5);
}

.custom-range::-webkit-slider-thumb:active {
  transform: scale(1.15);
}

.custom-range.mini {
  height: 3px;
}

.custom-range.mini::-webkit-slider-thumb {
  width: 12px;
  height: 12px;
}

/* 2-Column Compact Export Action Grid */
.modern-export-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}

.modern-export-grid .btn-download-format {
  padding: 8px 12px !important;
  gap: 8px !important;
}

.modern-export-grid .format-icon-box {
  width: 28px !important;
  height: 28px !important;
}

.modern-export-grid .format-icon-box svg {
  width: 14px !important;
  height: 14px !important;
}

/* Calligraphr-Style Individual Glyph Spacing & Baseline Fine-Tuning Box */
.glyph-fine-tune-box {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #fdfcff;
}

.fine-tune-char-selector {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.fine-tune-hint {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
}

.fine-tune-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.ft-pill {
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border-radius: var(--radius-xs);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  color: var(--text-head);
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ft-pill:hover {
  border-color: var(--purple-main);
  background: var(--purple-light);
  transform: translateY(-1px);
}

.ft-pill.active {
  background: var(--purple-main);
  border-color: var(--purple-main);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(93, 51, 168, 0.25);
}

/* Dynamic Template Builder Styling in Modal */
.template-customizer-bar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 16px;
  background: #f8f6fc;
  border: 1px solid #e7dff2;
  border-radius: 8px;
  margin-bottom: 16px;
}

.template-opt-group {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.template-opt-label {
  font-size: 12px;
  font-weight: 700;
  color: #494554;
  min-width: 65px;
}

.template-opt-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.tpl-pill {
  padding: 4px 12px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #dcd5ea;
  font-size: 11.5px;
  font-weight: 600;
  color: #555160;
  cursor: pointer;
  transition: all 0.15s ease;
}

.tpl-pill:hover {
  background: #f1ecfa;
  color: #5d33a8;
}

.tpl-pill.active {
  background: #5d33a8;
  color: #ffffff;
  border-color: #5d33a8;
}

.sheet-grid-mockup.cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.sheet-grid-mockup.cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

.sheet-grid-mockup.cols-8 {
  grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  grid-auto-rows: auto !important;
  gap: 8px !important;
}

.sheet-grid-mockup.cols-8 .mockup-cell {
  min-height: 0 !important;
  min-width: 0 !important;
}

.sheet-grid-mockup.cols-8 .mockup-cell .cell-ref {
  font-size: 11.5px;
  top: 4px;
  left: 6px;
}

/* DNA Metric Adjustments Panel */
.dna-metric-panel {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.panel-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-head);
  letter-spacing: -0.01em;
}

.dna-icon {
  width: 16px;
  height: 16px;
  color: var(--purple-ai);
}

.metric-sliders-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Package Export Hub */
.export-download-hub {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: auto;
}

/* Studio Font Metadata Input Card */
.studio-meta-input-card {
  background: #fdfcff;
  border: 1px solid #e2dbef;
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.meta-input-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.meta-card-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--purple-main);
  letter-spacing: -0.01em;
}

.meta-card-badge {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  color: #059669;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  padding: 1px 6px;
  border-radius: 999px;
}

.meta-input-group {
  display: flex;
  width: 100%;
}

.studio-meta-input {
  width: 100%;
  height: 34px;
  border: 1px solid #dcd7e6;
  border-radius: 6px;
  padding: 0 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-head);
  background: #ffffff;
  outline: none;
  transition: all 0.15s ease;
}

.studio-meta-input:focus {
  border-color: var(--purple-main);
  box-shadow: 0 0 0 2px var(--border-glow);
}

.studio-meta-textarea {
  width: 100%;
  border: 1px solid #dcd7e6;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 11.5px;
  color: var(--text-body);
  background: #ffffff;
  outline: none;
  resize: none;
  line-height: 1.45;
  transition: all 0.15s ease;
}

.studio-meta-textarea:focus {
  border-color: var(--purple-main);
  box-shadow: 0 0 0 2px var(--border-glow);
}

.hub-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hub-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-head);
}

.hub-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--emerald-val);
  background: rgba(16, 185, 129, 0.12);
  padding: 2px 7px;
  border-radius: var(--radius-xs);
  border: 1px solid rgba(16, 185, 129, 0.28);
}

.download-action-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.btn-download-format {
  display: flex;
  align-items: center;
  padding: 11px 16px;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  gap: 14px;
  transition: var(--transition-normal);
  text-align: left;
}

.btn-download-format:hover {
  transform: translateY(-2px);
  border-color: var(--border-medium);
  background: var(--bg-card-hover);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.btn-download-format:active {
  transform: translateY(0);
}

.format-icon-box {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.format-icon-box svg {
  width: 17px;
  height: 17px;
}

.btn-download-format.windows .format-icon-box svg { color: #38bdf8; }
.btn-download-format.mac .format-icon-box svg     { color: #e2e8f0; }
.btn-download-format.webfont .format-icon-box svg { color: var(--purple-ai); }
.btn-download-format.catalog-publish {
  background: linear-gradient(135deg, #f5f0ff 0%, #ede4ff 100%);
  border-color: #cbb8f0;
}
.btn-download-format.catalog-publish:hover {
  background: linear-gradient(135deg, #ece3ff 0%, #dfd0fc 100%);
  border-color: var(--purple-main);
}
.btn-download-format.catalog-publish .format-icon-box {
  background: var(--purple-main);
}
.btn-download-format.catalog-publish .format-icon-box svg {
  color: #ffffff;
}
.catalog-studio-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: #5d33a8;
  background: #f3effb;
  border: 1px solid #d8cbf0;
  padding: 2px 8px;
  border-radius: 999px;
}

.format-info {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.format-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-head);
}

.format-ext {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
}

.format-arrow {
  color: var(--text-muted);
  transition: transform var(--transition-fast);
}

.format-arrow svg {
  width: 15px;
  height: 15px;
}

.btn-download-format:hover .format-arrow {
  transform: translateX(3px);
  color: var(--text-head);
}

/* --------------------------------------------------------------------------
   08. Bottom Calligraphr Style Global Footer
   -------------------------------------------------------------------------- */
.studio-statusbar {
  display: none;
}

.calligraphr-global-footer {
  background-color: #f8f7fb;
  color: var(--text-body);
  padding: 44px 48px 30px;
  margin-top: 36px;
  border-top: 1px solid #e7e2f0;
}

.footer-top-grid {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 48px;
}

.footer-brand-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 320px;
  flex-shrink: 0;
}

.footer-brand-title {
  font-size: 26px;
  font-weight: 800;
  color: #5d33a8;
  letter-spacing: -0.03em;
}

.footer-brand-slogan {
  font-size: 13px;
  color: #6b667a;
  line-height: 1.6;
  word-break: keep-all;
}

.footer-columns-wrap {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 36px;
  flex: 1;
}

.footer-col-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col-title {
  font-size: 13px;
  font-weight: 700;
  color: #2c2538;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}

.footer-link-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 12.5px;
}

.footer-link-list a {
  color: #555160;
  transition: all 0.15s ease;
  word-break: keep-all;
}

.footer-link-list a:hover {
  color: #5d33a8;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-bottom-bar {
  max-width: 1240px;
  margin: 36px auto 0;
  padding-top: 22px;
  border-top: 1px solid #ebe6f2;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-company-info {
  font-size: 11.5px;
  color: #7e7a8c;
  line-height: 1.7;
  word-break: keep-all;
}

.footer-copyright-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-copyright-text {
  font-size: 12px;
  color: #8d8999;
}

.footer-lang-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.footer-lang-label {
  color: #716d7e;
  font-weight: 600;
}

.footer-lang-sep {
  color: #c4bcd3;
  font-size: 11px;
}

.status-left, .status-right {
  display: flex;
  align-items: center;
  gap: 18px;
}

.status-indicator-tag {
  display: flex;
  align-items: center;
  gap: 7px;
}

.pulse-point {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.pulse-point.green {
  background-color: var(--emerald-val);
  box-shadow: 0 0 8px var(--emerald-val);
}

.status-dot-dim {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--text-muted);
}

.copyright-notice {
  font-size: 10px;
  color: var(--text-muted);
}

.status-stat-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
}

.stat-value {
  color: var(--cyan-neon);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   09. Floating Toast Notification Hub
   -------------------------------------------------------------------------- */
.toast-hub {
  position: fixed;
  bottom: 54px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1000;
  pointer-events: none;
}

.toast-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 20px;
  border-radius: var(--radius-md);
  background: rgba(28, 22, 44, 0.96);
  border: 1px solid rgba(167, 139, 250, 0.35);
  backdrop-filter: var(--glass-blur);
  box-shadow: 0 12px 32px rgba(20, 14, 36, 0.38);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  opacity: 0;
  transform: translateY(16px) scale(0.96);
  transition: all var(--transition-normal);
  pointer-events: auto;
  max-width: 400px;
}

.toast-item .toast-text {
  color: #ffffff;
  line-height: 1.45;
  word-break: keep-all;
}

.toast-item.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.toast-icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

.toast-icon svg {
  width: 100%;
  height: 100%;
}

.toast-success .toast-icon { color: var(--emerald-val); }
.toast-info .toast-icon    { color: var(--cyan-neon); }
.toast-warn .toast-icon    { color: var(--amber-warn); }
.toast-error .toast-icon   { color: var(--rose-danger); }

/* --------------------------------------------------------------------------
   10. Specimen Sheet Modal Dialog
   -------------------------------------------------------------------------- */
.studio-modal {
  position: fixed;
  inset: 0;
  margin: auto;
  border: none;
  background: transparent;
  padding: 0;
  overflow: visible;
  z-index: 250;
}

.studio-modal::backdrop {
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(12px);
}

.modal-card {
  width: 760px;
  max-width: 94vw;
  background: #ffffff;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  backdrop-filter: var(--glass-blur);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalScaleUp var(--transition-normal);
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-subtle);
  background: #fbfafd;
}

.modal-title {
  font-size: 17px;
  font-weight: 800;
  color: #2c2538;
}

.modal-subtitle {
  font-size: 12.5px;
  color: #5c576b;
  margin-top: 4px;
}

.modal-close-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xs);
  color: #645f73;
  transition: var(--transition-fast);
}

.modal-close-btn:hover {
  color: var(--purple-main);
  background: #f1ecfa;
}

.modal-close-btn svg {
  width: 18px;
  height: 18px;
}

.modal-body {
  padding: 20px 24px;
  display: flex;
  justify-content: center;
}

.modal-body.template-preview-area {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  height: 540px;
  max-height: calc(85vh - 190px);
  overflow-y: auto;
  background: #f4f2f9;
}

.modal-body.template-preview-area::-webkit-scrollbar {
  width: 8px;
}

.modal-body.template-preview-area::-webkit-scrollbar-track {
  background: #ebe6f4;
  border-radius: 999px;
}

.modal-body.template-preview-area::-webkit-scrollbar-thumb {
  background: #9f8bc9;
  border-radius: 999px;
}

.modal-body.template-preview-area::-webkit-scrollbar-thumb:hover {
  background: #5d33a8;
}

.template-sheet-mockup {
  width: 100%;
  height: auto;
  flex-shrink: 0;
  background: #ffffff;
  color: #111827;
  border: 1px solid #dcd5ea;
  border-radius: var(--radius-sm);
  padding: 20px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 20px rgba(44, 37, 56, 0.08);
}

.sheet-header-mockup {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #111827;
  padding-bottom: 8px;
  margin-bottom: 16px;
}

.sheet-title-mockup {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 800;
  color: #111827;
  letter-spacing: 0.06em;
}

.sheet-meta-mockup {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  color: #4b5563;
}

.sheet-grid-mockup {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: minmax(96px, auto);
  gap: 10px;
}

.mockup-cell {
  border: 1.5px dashed #94a3b8;
  border-radius: 4px;
  background: #ffffff;
  width: 100%;
  min-width: 0;
  min-height: 96px;
  aspect-ratio: 1 / 1.1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.mockup-cell .cell-ref {
  position: absolute;
  top: 6px;
  left: 8px;
  font-size: 13px;
  font-weight: 800;
  color: #334155;
  line-height: 1;
}

.mockup-cell .cell-cross {
  width: 62%;
  height: 62%;
  border: 1px dotted #cbd5e1;
}

.modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 24px;
  border-top: 1px solid var(--border-subtle);
  background: #fbfafd;
}

/* Member Circular Profile Button & Dropdown Menu Styles */
.member-profile-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.btn-member-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  padding: 0;
  border: 2px solid #e4dcf5;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  box-shadow: 0 2px 8px rgba(93, 51, 168, 0.16);
  flex-shrink: 0;
}

.btn-member-avatar:hover,
.btn-member-avatar.active {
  transform: scale(1.05);
  border-color: var(--purple-main);
  box-shadow: 0 4px 12px rgba(93, 51, 168, 0.28);
}

.btn-member-avatar .avatar-bg-svg {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: block;
}

.btn-member-avatar .avatar-status-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #10b981;
  border: 2px solid #ffffff;
}

.member-profile-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 236px;
  background: #ffffff;
  border: 1px solid #ded8ec;
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(44, 37, 56, 0.16);
  padding: 8px;
  display: none;
  flex-direction: column;
  gap: 4px;
  z-index: 200;
  animation: modalScaleUp 0.16s ease;
}

.member-profile-dropdown.open {
  display: flex;
}

.member-dropdown-header {
  padding: 10px 12px;
  background: #f9f7fd;
  border: 1px solid #ede8f7;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 4px;
}

.member-dropdown-user-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.member-dropdown-credit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--text-dim);
}

.member-dropdown-credit-label {
  font-weight: 600;
}

.member-dropdown-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-head);
  text-align: left;
  transition: background 0.15s ease, color 0.15s ease;
}

.member-dropdown-item svg {
  width: 16px;
  height: 16px;
  color: var(--text-dim);
  flex-shrink: 0;
}

.member-dropdown-item:hover {
  background: #f3effb;
  color: var(--purple-main);
}

.member-dropdown-item:hover svg {
  color: var(--purple-main);
}

.member-dropdown-item.plan-highlight {
  background: linear-gradient(135deg, #f5f0ff 0%, #ede4ff 100%);
  border: 1px solid #d7c6f5;
  color: var(--purple-main);
  font-weight: 700;
  margin-bottom: 2px;
}

.member-dropdown-item.plan-highlight svg {
  color: var(--purple-main);
}

.member-dropdown-item.plan-highlight:hover {
  background: var(--purple-main);
  border-color: var(--purple-main);
  color: #ffffff;
}

.member-dropdown-item.plan-highlight:hover svg {
  color: #ffffff;
}

.btn-mypage-plan-mini {
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--purple-main);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  transition: background 0.15s ease, transform 0.15s ease;
}

.btn-mypage-plan-mini:hover {
  background: var(--purple-hover);
  transform: translateY(-1px);
}

/* Plan Selection & Auto-Routed PG Modal Styles */
.plan-select-modal-card {
  width: 880px;
  max-width: 96vw;
  background: #ffffff;
}

.plan-select-modal-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 24px 24px;
  max-height: 76vh;
  overflow-y: auto;
  background: #fbfafd;
}

.plan-modal-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 16px;
  background: #ffffff;
  border: 1px solid #e2dcf0;
  border-radius: 10px;
  font-size: 12.5px;
}

.plan-modal-user-status,
.plan-modal-pg-info {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-body);
}

.plan-modal-pg-info strong {
  color: #059669;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-family: var(--font-mono);
}

.plan-modal-dot {
  color: #cbc5d8;
}

.plan-modal-billing-row {
  display: flex;
  justify-content: center;
}

.plan-modal-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  align-items: stretch;
}

.plan-modal-card {
  background: #ffffff;
  border: 1.5px solid #e2dced;
  border-radius: 12px;
  padding: 20px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: pointer;
  position: relative;
  transition: all 0.18s ease;
}

.plan-modal-card:hover {
  border-color: #9f85d1;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(93, 51, 168, 0.08);
}

.plan-modal-card.selected {
  border: 2px solid var(--purple-main);
  background: #fdfbff;
  box-shadow: 0 8px 24px rgba(93, 51, 168, 0.14);
}

.pm-recommend-ribbon {
  position: absolute;
  top: -10px;
  right: 14px;
  background: var(--purple-main);
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 9px;
  border-radius: 999px;
}

.pm-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.pm-tier-badge {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 800;
  color: var(--purple-main);
  letter-spacing: 0.06em;
}

.pm-tier-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-head);
  margin-top: 2px;
}

.pm-radio-indicator {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #cbc4dc;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.plan-modal-card.selected .pm-radio-indicator {
  border-color: var(--purple-main);
  background: var(--purple-main);
  box-shadow: inset 0 0 0 3px #ffffff;
}

.pm-price-row {
  display: flex;
  align-items: baseline;
  gap: 3px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f1edf7;
  flex-wrap: wrap;
}

.pm-currency {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-head);
}

.pm-price-val {
  font-size: 26px;
  font-weight: 800;
  color: var(--text-head);
  line-height: 1.1;
}

.pm-period {
  font-size: 11px;
  color: var(--text-dim);
  margin-left: 2px;
}

.pm-specs {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 12px;
  color: var(--text-body);
  flex: 1;
}

.btn-pm-direct-pay {
  width: 100%;
  height: 38px;
  border-radius: 8px;
  background: #f4f0fb;
  border: 1px solid #d4c8ec;
  color: var(--purple-main);
  font-size: 12.5px;
  font-weight: 700;
  transition: all 0.16s ease;
  margin-top: 4px;
}

.btn-pm-direct-pay:hover,
.plan-modal-card.selected .btn-pm-direct-pay {
  background: var(--purple-main);
  border-color: var(--purple-main);
  color: #ffffff;
}

@media (max-width: 780px) {
  .plan-modal-cards-grid {
    grid-template-columns: 1fr;
  }
}

.member-dropdown-item.danger {
  color: var(--rose-danger);
}

.member-dropdown-item.danger svg {
  color: var(--rose-danger);
}

.member-dropdown-item.danger:hover {
  background: rgba(225, 29, 72, 0.08);
}

.member-plan-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: var(--purple-main);
  color: #ffffff;
  text-transform: uppercase;
}

.member-plan-tag.starter {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
}

.member-plan-tag.standard,
.member-plan-tag.pro {
  background: linear-gradient(135deg, #5d33a8 0%, #d97706 100%);
}

.member-plan-tag.ultimate,
.member-plan-tag.enterprise {
  background: linear-gradient(135deg, #059669 0%, #2563eb 100%);
}

.member-plan-tag.superadmin {
  background: linear-gradient(135deg, #e11d48 0%, #d97706 100%);
}

.member-nick-text {
  font-weight: 700;
  color: var(--text-head);
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-credit-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--purple-main);
  background: #ffffff;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  border: 1px solid #e2dbf2;
}

.member-modal-card {
  width: 560px;
  max-width: 95vw;
  background: #ffffff;
}

.member-modal-card .modal-header {
  background: #fbfafd;
}

.member-auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 6px;
  margin: 14px 24px 0;
  background: var(--bg-pill);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  gap: 6px;
}

.member-tab-btn {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dim);
  transition: var(--transition-fast);
}

.member-tab-btn.active {
  background: var(--purple-main);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(93, 51, 168, 0.25);
}

.member-modal-body {
  display: flex;
  flex-direction: column;
  padding: 20px 24px 26px;
  gap: 14px;
}

.member-auth-alert {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: rgba(225, 29, 72, 0.08);
  border: 1px solid rgba(225, 29, 72, 0.3);
  color: var(--rose-danger);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

.member-form-stack {
  display: flex;
  flex-direction: column;
  gap: 13px;
  width: 100%;
}

.member-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.member-field label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-body);
}

.member-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.member-input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-medium);
  background: #ffffff;
  color: var(--text-head);
  font-size: 13px;
  transition: var(--transition-fast);
}

.member-input:focus {
  border-color: var(--purple-main);
  box-shadow: 0 0 0 2px var(--purple-glow);
}

.member-input:disabled {
  background: #f4f2f8;
  color: var(--text-muted);
}

.member-submit-btn {
  width: 100%;
  justify-content: center;
  height: 42px;
  margin-top: 4px;
}

.mypage-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 4px;
}

.mypage-stat-box {
  background: #f8f6fc;
  border: 1px solid #e4ddf2;
  border-radius: var(--radius-sm);
  padding: 10px 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.mypage-stat-label {
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 600;
}

.mypage-stat-value {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 800;
  color: var(--purple-main);
}

.mypage-fonts-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #f9f7fd;
  border: 1px solid #e3dbf2;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}

.mypage-fonts-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mypage-fonts-title {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--text-head);
}

.mypage-fonts-count {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--purple-main);
  background: #ffffff;
  border: 1px solid #dcd3ee;
  padding: 2px 8px;
  border-radius: 999px;
}

.mypage-fonts-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
  padding-right: 2px;
}

.mypage-fonts-empty {
  text-align: center;
  padding: 18px 12px;
  font-size: 12px;
  color: var(--text-muted);
  background: #ffffff;
  border: 1px dashed #d8d0e8;
  border-radius: 6px;
}

.mypage-font-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #ffffff;
  border: 1px solid #e4ddf2;
  border-radius: 8px;
  padding: 10px 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mypage-font-item:hover {
  border-color: var(--purple-main);
  box-shadow: 0 3px 10px rgba(93, 51, 168, 0.08);
}

.mypage-font-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.mypage-font-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mypage-font-name {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-head);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mypage-font-sample {
  font-size: 15px;
  color: var(--purple-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.mypage-font-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.btn-mypage-edit {
  padding: 6px 11px;
  border-radius: 6px;
  background: var(--purple-main);
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.15s ease, transform 0.15s ease;
}

.btn-mypage-edit:hover {
  background: var(--purple-hover);
  transform: translateY(-1px);
}

.btn-mypage-dl {
  padding: 6px 9px;
  border-radius: 6px;
  background: #f3effb;
  border: 1px solid #d4c8ec;
  color: var(--purple-main);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.btn-mypage-dl:hover {
  background: #e7dff7;
}

/* --------------------------------------------------------------------------
   11. Animations
   -------------------------------------------------------------------------- */
@keyframes radarWave {
  0% { transform: scale(1); opacity: 0.9; }
  100% { transform: scale(3); opacity: 0; }
}

@keyframes radarPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.92); }
}

@keyframes shimmerSweep {
  0% { transform: translateX(0); }
  100% { transform: translateX(250%); }
}

@keyframes modalScaleUp {
  from { opacity: 0; transform: scale(0.95) translateY(12px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* --------------------------------------------------------------------------
   11.5 Modern Studio Sub-Navbar (Replaces heavy hero banner)
   -------------------------------------------------------------------------- */
.studio-sub-navbar {
  height: 44px;
  min-height: 44px;
  background: #ffffff;
  border-bottom: 1px solid #f0edf5;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  z-index: 20;
}

.studio-sub-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.studio-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #f3effb;
  border: 1px solid #e1d6f3;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: #5d33a8;
}

.studio-status-chip .pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 6px #10b981;
}

.studio-sub-desc {
  font-size: 12px;
  color: #716d7e;
  word-break: keep-all;
}

.studio-sub-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-sub-tool {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  background: #f7f5fa;
  border: 1px solid #e5dfef;
  color: #494554;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-sub-tool:hover {
  background: #f1ecf8;
  color: #5d33a8;
  border-color: #d4c8ec;
}

.btn-sub-tool.active {
  background: #5d33a8;
  color: #ffffff;
  border-color: #5d33a8;
}

/* --------------------------------------------------------------------------
   11.7 Independent Features Showcase View Styles (Matching Naver Showcase Style)
   -------------------------------------------------------------------------- */
.features-view-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #ffffff;
  padding: 32px 40px 72px;
}

.features-control-section {
  max-width: 1320px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.features-header-banner {
  background: linear-gradient(135deg, #f9f7fd 0%, #f4f0fb 100%);
  border: 1px solid #e7dff2;
  border-radius: 10px;
  padding: 30px 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.features-badge-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: #5d33a8;
  background: #ffffff;
  border: 1px solid #dcd3ee;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 6px;
}

.features-banner-title {
  font-size: 26px;
  font-weight: 800;
  color: #2c2538;
  letter-spacing: -0.02em;
}

.features-banner-desc {
  font-size: 13.5px;
  color: #5c576b;
  line-height: 1.65;
  max-width: 860px;
  word-break: keep-all;
}

.feature-spec-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  background: #f3effb;
  color: #5d33a8;
}

.feature-action-btn {
  height: 32px;
  padding: 0 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  background: #5d33a8;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.18s ease;
}

.feature-action-btn:hover {
  background: #4b268c;
  transform: translateY(-1px);
}

.feature-action-btn.secondary {
  background: #ffffff;
  color: #5d33a8;
  border: 1px solid #d5caeb;
}

.feature-action-btn.secondary:hover {
  background: #f6f2fc;
}

/* --------------------------------------------------------------------------
   11.75 Pricing Plans View Styles (Calligraphr Clean & Modern Style)
   -------------------------------------------------------------------------- */
.pricing-view-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #ffffff;
  padding: 36px 40px 72px;
}

.pricing-control-section {
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.pricing-header-banner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 780px;
  margin: 0 auto;
}

.pricing-badge-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: #5d33a8;
  background: #f3effb;
  border: 1px solid #dcd3ee;
  padding: 3px 12px;
  border-radius: 999px;
}

.pricing-banner-title {
  font-size: 32px;
  font-weight: 800;
  color: #2c2538;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.pricing-banner-desc {
  font-size: 14.5px;
  color: #5c576b;
  line-height: 1.65;
  word-break: keep-all;
}

.pricing-billing-toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #f6f3fc;
  border: 1px solid #e1d8f0;
  padding: 6px 14px;
  border-radius: 999px;
  margin-top: 10px;
  cursor: pointer;
  user-select: none;
}

.billing-label {
  font-size: 13px;
  font-weight: 600;
  color: #716d7e;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.billing-label.active {
  color: #5d33a8;
  font-weight: 800;
}

.discount-pill {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: #059669;
  background: #d1fae5;
  border: 1px solid #a7f3d0;
  padding: 2px 7px;
  border-radius: 999px;
}

.toggle-switch-pill {
  width: 44px;
  height: 24px;
  background: #d8cfea;
  border-radius: 999px;
  position: relative;
  transition: background 0.2s ease;
  cursor: pointer;
}

.toggle-switch-pill.active {
  background: #5d33a8;
}

.switch-circle {
  width: 18px;
  height: 18px;
  background: #ffffff;
  border-radius: 50%;
  position: absolute;
  top: 3px;
  left: 3px;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.toggle-switch-pill.active .switch-circle {
  transform: translateX(20px);
}

.pricing-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
  gap: 20px;
  align-items: stretch;
}

.pricing-card {
  background: #ffffff;
  border: 1px solid #e2dded;
  border-radius: 12px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  position: relative;
}

.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(93, 51, 168, 0.1);
  border-color: #cbbde4;
}

.pricing-card.featured {
  border: 2px solid #5d33a8;
  box-shadow: 0 8px 30px rgba(93, 51, 168, 0.15);
  background: #fefdff;
}

.p-popular-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: #5d33a8;
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 4px 14px;
  border-radius: 999px;
  white-space: nowrap;
}

.p-card-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 20px;
}

.p-plan-name {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  color: #5d33a8;
  letter-spacing: 0.08em;
}

.p-plan-title {
  font-size: 22px;
  font-weight: 800;
  color: #2c2538;
}

.p-plan-desc {
  font-size: 12.5px;
  color: #6b667a;
  line-height: 1.5;
  min-height: 38px;
}

.p-price-box {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid #f0ecf6;
  flex-wrap: wrap;
}

.p-amount {
  font-size: 38px;
  font-weight: 800;
  color: #2c2538;
  font-family: var(--font-sans);
  line-height: 1;
}

.p-amount .currency {
  font-size: 22px;
  font-weight: 600;
  margin-right: 2px;
}

.p-period {
  font-size: 12px;
  color: #888299;
}

.btn-pricing-cta {
  width: 100%;
  height: 44px;
  border-radius: 6px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s ease;
  margin-bottom: 26px;
}

.btn-pricing-cta.primary {
  background: #5d33a8;
  color: #ffffff;
  border: none;
  box-shadow: 0 4px 14px rgba(93, 51, 168, 0.3);
}

.btn-pricing-cta.primary:hover {
  background: #4b268c;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(93, 51, 168, 0.4);
}

.btn-pricing-cta.secondary {
  background: #f5f2fb;
  color: #5d33a8;
  border: 1px solid #d4c8ec;
}

.btn-pricing-cta.secondary:hover {
  background: #ece5f8;
  border-color: #5d33a8;
}

.p-features-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 12.5px;
  color: #494554;
}

.p-features-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.5;
}

.p-check {
  color: #059669;
  font-weight: 800;
  flex-shrink: 0;
  margin-top: 1px;
}

.pricing-table-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}

.pricing-table-heading {
  font-size: 20px;
  font-weight: 800;
  color: #2c2538;
}

.pricing-compare-table td {
  padding: 13px 16px;
}

.p-check-bold {
  color: #059669;
  font-weight: 800;
}

/* --------------------------------------------------------------------------
   11.78 User Testimonials & Reviews View Styles (Detailed Story Showcases)
   -------------------------------------------------------------------------- */
.testimonials-view-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #fcfbfe;
  padding: 36px 40px 72px;
}

.testimonials-control-section {
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.testimonials-header-banner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 780px;
  margin: 0 auto;
}

.testimonials-badge-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: #5d33a8;
  background: #f3effb;
  border: 1px solid #dcd3ee;
  padding: 3px 12px;
  border-radius: 999px;
}

.testimonials-banner-title {
  font-size: 32px;
  font-weight: 800;
  color: #2c2538;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.testimonials-banner-desc {
  font-size: 14.5px;
  color: #5c576b;
  line-height: 1.65;
  word-break: keep-all;
}

.testimonials-filter-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.testimonials-filter-label {
  font-size: 13px;
  font-weight: 700;
  color: #3b3744;
}

.testimonials-filter-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.t-filter-btn {
  padding: 6px 14px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #dcd5ea;
  color: #555160;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.t-filter-btn:hover {
  background: #f3effb;
  color: #5d33a8;
  border-color: #5d33a8;
}

.t-filter-btn.active {
  background: #5d33a8;
  color: #ffffff;
  border-color: #5d33a8;
  box-shadow: 0 2px 8px rgba(93, 51, 168, 0.25);
}

.testimonials-showcase-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.t-story-card {
  background: #ffffff;
  border: 1px solid #e5dfef;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.03);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.t-story-card:hover {
  transform: translateY(-2px);
  border-color: #5d33a8;
  box-shadow: 0 8px 24px rgba(93, 51, 168, 0.1);
}

.t-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.t-profile-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.t-profile-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #ffffff;
  font-weight: 800;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.t-profile-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.t-profile-name {
  font-size: 14.5px;
  font-weight: 800;
  color: #2c2538;
}

.t-profile-role {
  font-size: 11.5px;
  color: #716d7e;
}

.t-rating-stars {
  color: #f59e0b;
  font-size: 14px;
  letter-spacing: 2px;
}

.t-quote-body {
  font-size: 13.5px;
  color: #3b3744;
  line-height: 1.65;
  word-break: keep-all;
}

.t-specimen-snippet {
  background: #fbf9fd;
  border: 1px dashed #ded7ec;
  border-radius: 8px;
  padding: 12px 16px;
  color: #2c2538;
  line-height: 1.4;
  word-break: keep-all;
}

.t-card-meta-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #f2edf7;
  padding-top: 12px;
  margin-top: auto;
}

.t-font-name-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: #5d33a8;
  background: #f4effb;
  padding: 3px 8px;
  border-radius: 4px;
}

.t-verified-badge {
  font-size: 11px;
  font-weight: 600;
  color: #059669;
}

.testimonials-cta-banner {
  background: linear-gradient(135deg, #5d33a8 0%, #7644cc 100%);
  border-radius: 12px;
  padding: 32px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #ffffff;
  gap: 20px;
  box-shadow: 0 10px 28px rgba(93, 51, 168, 0.25);
  margin-top: 14px;
}

.cta-banner-title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.cta-banner-desc {
  font-size: 13.5px;
  color: #e4d8fb;
  margin-top: 4px;
}

.btn-testimonials-cta {
  background: #ffffff;
  color: #5d33a8;
  font-size: 13.5px;
  font-weight: 800;
  padding: 12px 24px;
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
  transition: all 0.18s ease;
}

.btn-testimonials-cta:hover {
  background: #f7f3fd;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}

@media (max-width: 900px) {
  .pricing-cards-grid {
    grid-template-columns: 1fr;
  }
  .testimonials-showcase-grid {
    grid-template-columns: 1fr;
  }
  .testimonials-cta-banner {
    flex-direction: column;
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   11.8 Font Catalog Showcase View Styles (Naver Font Catalog Design)
   -------------------------------------------------------------------------- */
.catalog-view-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #ffffff;
  padding: 28px 40px 64px;
}

.catalog-control-section {
  max-width: 1320px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.catalog-control-box {
  background: #f8f9fb;
  border: 1px solid #e5e7ec;
  border-radius: 4px;
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.catalog-top-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.catalog-input-field {
  position: relative;
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid #dcdfe6;
  border-radius: 2px;
  height: 46px;
  padding: 0 16px;
  transition: border-color 0.15s ease;
}

.catalog-input-field:focus-within {
  border-color: #19ce60;
}

.catalog-input-field input {
  width: 100%;
  height: 100%;
  font-size: 14px;
  color: #222222;
  background: transparent;
}

.catalog-input-field input::placeholder {
  color: #999999;
}

.catalog-input-icon {
  width: 18px;
  height: 18px;
  color: #777777;
  flex-shrink: 0;
}

.catalog-clear-btn {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b0b4bd;
  transition: color 0.15s ease;
}

.catalog-clear-btn:hover {
  color: #444444;
}

.catalog-clear-btn svg {
  width: 18px;
  height: 18px;
}

.catalog-bottom-filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 4px;
}

.catalog-type-group {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.catalog-filter-label {
  font-size: 13px;
  font-weight: 700;
  color: #222222;
  white-space: nowrap;
}

.catalog-filter-label strong {
  color: #03c75a;
  font-family: var(--font-mono);
  margin-left: 4px;
}

.catalog-type-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.catalog-type-btn {
  padding: 6px 12px;
  font-size: 13.5px;
  font-weight: 500;
  color: #666666;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.catalog-type-btn:hover {
  color: #111111;
  background: #eef0f4;
}

.catalog-type-btn.active {
  color: #111111;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}

.catalog-right-controls {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.catalog-sort-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.catalog-sort-select {
  font-size: 13.5px;
  font-weight: 700;
  color: #222222;
  padding: 4px 24px 4px 8px;
  border-bottom: 1px solid #cccccc;
  cursor: pointer;
  background: transparent;
}

.catalog-size-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
}

.catalog-size-slider-box {
  display: flex;
  align-items: center;
  gap: 8px;
}

.catalog-size-step {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  color: #555555;
  border-radius: 50%;
}

.catalog-size-step:hover {
  background: #eaecef;
  color: #111111;
}

.catalog-green-range {
  -webkit-appearance: none;
  appearance: none;
  width: 140px;
  height: 4px;
  border-radius: 999px;
  background: #03c75a;
  outline: none;
  cursor: pointer;
}

.catalog-green-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #03c75a;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

/* Sub Toolbar */
.catalog-sub-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 2px;
}

.catalog-total-badge {
  font-size: 13px;
  font-weight: 600;
  color: #666666;
}

.catalog-sub-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.catalog-format-selector {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-otf-ttf-info {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: #555555;
}

.btn-otf-ttf-info .q-mark {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1px solid #b0b4bd;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #666666;
}

.btn-otf-ttf-info:hover {
  color: #111111;
}

.catalog-format-select {
  font-size: 12px;
  font-weight: 600;
  color: #444444;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 4px 8px;
  background: #ffffff;
  cursor: pointer;
}

.catalog-view-switcher {
  display: flex;
  align-items: center;
  gap: 4px;
  border-left: 1px solid #e5e7ec;
  padding-left: 14px;
}

.view-mode-btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b0b4bd;
  border-radius: 4px;
  transition: color 0.15s ease;
}

.view-mode-btn.active,
.view-mode-btn:hover {
  color: #111111;
}

.view-mode-btn svg {
  width: 18px;
  height: 18px;
}

.otf-ttf-help-banner {
  background: #f4fbf7;
  border: 1px solid #bce8ce;
  border-radius: 6px;
  padding: 14px 18px;
  font-size: 12.5px;
  color: #2b4c38;
  line-height: 1.6;
}

.otf-ttf-help-banner strong {
  color: #038f40;
}

/* 4-Column Font Cards Grid (Matching Screenshot) */
.catalog-font-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.catalog-font-grid.list-mode {
  grid-template-columns: 1fr;
}

.catalog-font-card {
  background: #ffffff;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  padding: 26px 26px 22px;
  min-height: 290px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  position: relative;
  cursor: pointer;
  content-visibility: auto;
  contain-intrinsic-size: 280px 290px;
}

.catalog-font-grid.list-mode .catalog-font-card {
  min-height: 150px;
}

.catalog-font-card:hover {
  border-color: #5d33a8;
  box-shadow: 0 8px 24px rgba(93, 51, 168, 0.1);
  transform: translateY(-2px);
}

.catalog-card-head {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 18px;
}

.catalog-font-title {
  font-size: 15px;
  font-weight: 800;
  color: #222222;
  letter-spacing: -0.01em;
}

.catalog-font-meta {
  font-size: 12px;
  color: #777777;
  font-weight: 500;
}

.catalog-card-specimen {
  flex: 1;
  display: block;
  color: #111111;
  font-size: 24px;
  line-height: 1.5;
  white-space: pre-line;
  word-break: keep-all;
  overflow-wrap: break-word;
  margin-bottom: 18px;
  max-height: 165px;
  overflow-y: auto;
}

.catalog-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}

.catalog-dl-count {
  font-size: 11px;
  color: #999999;
  font-family: var(--font-mono);
}

.catalog-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-catalog-webfont {
  height: 34px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid #d4c8ec;
  background: #f6f3fc;
  color: #5d33a8;
  font-size: 11.5px;
  font-weight: 700;
  font-family: var(--font-mono);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.18s ease;
}

.btn-catalog-webfont:hover {
  background: #5d33a8;
  border-color: #5d33a8;
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(93, 51, 168, 0.22);
}

/* WebFont API Modal Styles */
.webfont-modal-card {
  width: 680px;
  max-width: 95vw;
  background: #ffffff;
}

.webfont-modal-card .modal-header {
  background: #fbfafd;
}

.wf-api-live-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.webfont-modal-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 24px;
  max-height: 70vh;
  overflow-y: auto;
}

.wf-api-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wf-api-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wf-api-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-head);
}

.wf-api-label code {
  font-family: var(--font-mono);
  color: var(--purple-main);
  background: #f3effb;
  padding: 1px 5px;
  border-radius: 4px;
}

.btn-copy-wf {
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  background: #f3effb;
  border: 1px solid #d4c8ec;
  color: var(--purple-main);
  transition: all 0.15s ease;
}

.btn-copy-wf:hover {
  background: var(--purple-main);
  color: #ffffff;
}

.wf-code-box {
  background: #1e1b26;
  color: #e2e8f0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.55;
  padding: 12px 14px;
  border-radius: 8px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
  border: 1px solid #2d2838;
}

.wf-live-preview-box {
  background: #f9f8fc;
  border: 1px solid #e2ddf0;
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wf-preview-tag {
  font-size: 11px;
  font-weight: 700;
  color: var(--purple-main);
}

.wf-modal-specimen {
  font-size: 22px;
  color: #1f1c24;
  line-height: 1.45;
  outline: none;
  min-height: 36px;
}

.btn-catalog-download {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid #dcdfe6;
  background: #ffffff;
  color: #444444;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s ease;
}

.btn-catalog-download:hover {
  border-color: #03c75a;
  background: #03c75a;
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(3, 199, 90, 0.25);
}

.btn-catalog-download svg {
  width: 16px;
  height: 16px;
}

/* Font Detail Studio Viewer Modal & OS Download Choice Modal Styles */
.font-detail-modal-card {
  width: 1040px;
  max-width: 96vw;
  background: #ffffff;
}

/* Dedicated Font Detail Permalink Page Styles */
.font-detail-view-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #fbfafd;
  padding: 28px 40px 72px;
}

.font-detail-page-section {
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.font-detail-page-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.btn-back-catalog {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #dcd5ea;
  color: #2c2538;
  font-size: 13px;
  font-weight: 700;
  transition: all 0.18s ease;
}

.btn-back-catalog:hover {
  border-color: #5d33a8;
  color: #5d33a8;
  background: #f3effb;
  transform: translateX(-2px);
}

.font-detail-permalink-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid #e2dcf0;
  border-radius: 8px;
  padding: 6px 8px 6px 14px;
  max-width: 100%;
  overflow: hidden;
}

.permalink-label {
  font-size: 11.5px;
  font-weight: 800;
  color: #5d33a8;
  white-space: nowrap;
}

.permalink-url {
  font-family: var(--font-mono);
  font-size: 12px;
  color: #494554;
  background: #f8f6fc;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 440px;
}

.btn-copy-permalink {
  padding: 6px 12px;
  border-radius: 6px;
  background: #5d33a8;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.15s ease;
}

.btn-copy-permalink:hover {
  background: #4b268c;
}

.font-detail-page-card {
  background: #ffffff;
  border: 1px solid #e5dfef;
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(93, 51, 168, 0.06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.font-detail-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 26px 30px;
  border-bottom: 1px solid #eeeaf5;
  background: linear-gradient(135deg, #fdfcff 0%, #f7f4fc 100%);
  flex-wrap: wrap;
}

.font-detail-page-title {
  font-size: 24px;
  font-weight: 800;
  color: #2c2538;
  letter-spacing: -0.02em;
}

.font-detail-page-body {
  padding: 28px 30px;
  background: #fbfafd;
  display: block;
}

.font-detail-page-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 30px;
  border-top: 1px solid #eeeaf5;
  background: #ffffff;
  flex-wrap: wrap;
}

.detail-footer-hint {
  font-size: 12.5px;
  color: #6b667a;
}

.catalog-font-title-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}

.catalog-font-card:hover .catalog-font-title-link {
  color: #5d33a8;
}

.font-detail-modal-body {
  padding: 22px 26px;
  max-height: 76vh;
  overflow-y: auto;
  background: #fbfafd;
  display: block;
}

.font-detail-studio-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 24px;
  align-items: stretch;
}

.font-detail-info-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.detail-info-card {
  background: #ffffff;
  border: 1px solid #e5dfef;
  border-radius: 10px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.detail-section-label {
  font-size: 11.5px;
  font-weight: 800;
  color: #5d33a8;
  letter-spacing: -0.01em;
}

.detail-desc-text {
  font-size: 13px;
  color: #3b3744;
  line-height: 1.6;
  word-break: keep-all;
}

.detail-meta-Grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid #f2eff8;
}

.detail-meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.detail-meta-item .dm-label {
  font-size: 10.5px;
  color: #888299;
}

.detail-meta-item .dm-val {
  font-size: 12px;
  font-weight: 700;
  color: #2c2538;
}

.detail-dna-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.dna-spec-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: #5d33a8;
  background: #f3effb;
  border: 1px solid #ded4f2;
  padding: 4px 9px;
  border-radius: 6px;
}

.detail-original-specimen {
  background: #fdfcff;
  border: 1px dashed #d5c9ec;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 21px;
  line-height: 1.55;
  color: #2c2538;
  white-space: pre-line;
  max-height: 180px;
  overflow-y: auto;
}

.font-detail-playground-col {
  display: flex;
  flex-direction: column;
}

.detail-playground-card {
  background: #ffffff;
  border: 1px solid #e5dfef;
  border-radius: 10px;
  padding: 18px 20px;
  height: 100%;
}

.detail-tester-box .live-type-box {
  min-height: 180px;
  font-size: 34px;
}

.detail-waterfall-box {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid #f0ecf6;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.detail-waterfall-box .wf-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.detail-waterfall-box .wf-size-tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: #888299;
  min-width: 34px;
  flex-shrink: 0;
}

.detail-waterfall-box .wf-sample-line {
  color: #2c2538;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.detail-modal-actions {
  justify-content: space-between;
  flex-wrap: wrap;
}

.detail-os-download-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.detail-dl-btn {
  padding: 8px 16px !important;
  min-width: 210px;
  background: #ffffff;
  border: 1px solid #d5cee6;
}

.detail-dl-btn.windows:hover {
  border-color: #0284c7;
  background: #f0f9ff;
}

.detail-dl-btn.mac:hover {
  border-color: #5d33a8;
  background: #f5f0ff;
}

/* OS Format Choice Modal */
.download-choice-modal-card {
  width: 520px;
  max-width: 94vw;
  background: #ffffff;
}

.download-choice-modal-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 24px 24px;
}

.os-choice-card {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border-radius: 12px;
  background: #fbfafd;
  border: 1.5px solid #e4ddf2;
  text-align: left;
  transition: all 0.18s ease;
}

.os-choice-card:hover {
  border-color: #5d33a8;
  background: #f4effc;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(93, 51, 168, 0.12);
}

.os-choice-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.os-choice-icon.windows {
  background: rgba(56, 189, 248, 0.14);
  color: #0284c7;
}

.os-choice-icon.mac {
  background: rgba(93, 51, 168, 0.12);
  color: #5d33a8;
}

.os-choice-icon svg {
  width: 22px;
  height: 22px;
}

.os-choice-content {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.os-choice-title {
  font-size: 14.5px;
  font-weight: 800;
  color: #2c2538;
}

.os-choice-desc {
  font-size: 11.5px;
  color: #6b667a;
  line-height: 1.45;
  word-break: keep-all;
}

.os-choice-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
  background: #5d33a8;
  padding: 6px 11px;
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .font-detail-studio-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1200px) {
  .catalog-font-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .catalog-view-container {
    padding: 20px 16px 48px;
  }
  .catalog-top-inputs {
    grid-template-columns: 1fr;
  }
  .catalog-font-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 580px) {
  .catalog-font-grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   11.9 Developer & AI Agent API Documentation View Styles
   -------------------------------------------------------------------------- */
.api-docs-view-container {
  flex: 1;
  width: 100%;
  background: #fbfafd;
  padding: 32px 40px 72px;
}

.api-docs-layout {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 36px;
  align-items: flex-start;
}

.api-docs-sidebar {
  position: sticky;
  top: 24px;
  background: #ffffff;
  border: 1px solid #e6e2ef;
  border-radius: 12px;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 0 4px 16px rgba(93, 51, 168, 0.04);
}

.api-sidebar-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.api-sidebar-title {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  color: #888299;
  letter-spacing: 0.06em;
  padding: 4px 8px;
}

.api-sidebar-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: #494554;
  transition: all 0.15s ease;
}

.api-sidebar-link:hover,
.api-sidebar-link.active {
  background: #f3effb;
  color: #5d33a8;
}

.m-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  flex-shrink: 0;
}

.m-tag.get {
  background: rgba(16, 185, 129, 0.14);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.m-tag.post {
  background: rgba(93, 51, 168, 0.14);
  color: #5d33a8;
  border: 1px solid rgba(93, 51, 168, 0.3);
}

.api-docs-main {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}

.api-doc-section {
  background: #ffffff;
  border: 1px solid #e6e2ef;
  border-radius: 14px;
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.025);
}

.api-doc-badge-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.api-ver-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  background: #5d33a8;
  color: #ffffff;
  padding: 3px 10px;
  border-radius: 999px;
}

.api-cors-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 3px 10px;
  border-radius: 999px;
}

.api-raw-link {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  color: #5d33a8;
  background: #f3effb;
  border: 1px solid #d4c8ec;
  padding: 3px 10px;
  border-radius: 6px;
  margin-left: auto;
}

.api-raw-link + .api-raw-link {
  margin-left: 0;
}

.api-raw-link:hover {
  background: #5d33a8;
  color: #ffffff;
}

.api-doc-h1 {
  font-size: 26px;
  font-weight: 800;
  color: #2c2538;
  letter-spacing: -0.02em;
}

.api-doc-h2 {
  font-size: 18px;
  font-weight: 800;
  color: #2c2538;
}

.api-doc-h3 {
  font-size: 13.5px;
  font-weight: 700;
  color: #5d33a8;
  margin-top: 4px;
}

.api-doc-lead {
  font-size: 14px;
  color: #494554;
  line-height: 1.65;
}

.api-doc-desc {
  font-size: 13px;
  color: #5c576b;
  line-height: 1.6;
}

.api-overview-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 4px;
}

.api-meta-card {
  background: #f8f6fc;
  border: 1px solid #e4ddf2;
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.api-meta-card .meta-label {
  font-size: 11px;
  font-weight: 700;
  color: #716d7e;
}

.api-meta-card .meta-val {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
  color: #5d33a8;
  word-break: break-all;
}

.api-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.endpoint-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: #f8f7fb;
  border: 1px solid #e6e2ef;
  padding: 10px 14px;
  border-radius: 8px;
}

.endpoint-path {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: #1e1b26;
}

.endpoint-alias {
  font-size: 12px;
  color: #716d7e;
  margin-left: auto;
}

.endpoint-alias code {
  font-family: var(--font-mono);
  color: #5d33a8;
  font-weight: 600;
}

.api-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #e6e2ef;
  border-radius: 8px;
}

.api-param-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 12.5px;
}

.api-param-table th {
  background: #f6f4fa;
  color: #3f3a4d;
  font-weight: 700;
  padding: 10px 14px;
  border-bottom: 1px solid #e6e2ef;
  white-space: nowrap;
}

.api-param-table td {
  padding: 11px 14px;
  border-bottom: 1px solid #f0edf6;
  color: #494554;
  line-height: 1.5;
  vertical-align: top;
}

.api-param-table tr:last-child td {
  border-bottom: none;
}

.api-param-table code {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  color: #5d33a8;
  background: #f3effb;
  padding: 2px 5px;
  border-radius: 4px;
}

.api-code-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Interactive Sandbox Styles */
.api-sandbox-card {
  background: #f8f6fc;
  border: 1px solid #dcd3f0;
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sandbox-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.sandbox-select {
  flex: 1;
  min-width: 240px;
  height: 40px;
  background: #ffffff;
  border: 1px solid #cfc5e6;
  border-radius: 6px;
  padding: 0 12px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  color: #2c2538;
  cursor: pointer;
}

.sandbox-status-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 12px;
  color: #5c576b;
  font-family: var(--font-mono);
}

.sandbox-output {
  max-height: 260px;
  overflow-y: auto;
  margin: 0;
}

@media (max-width: 1024px) {
  .api-docs-view-container {
    padding: 20px 16px 48px;
  }
  .api-docs-layout {
    grid-template-columns: 1fr;
  }
  .api-docs-sidebar {
    position: static;
  }
  .api-overview-cards,
  .api-code-split {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   11.10 Brand Identity (CI/BI) Guideline View Styles
   -------------------------------------------------------------------------- */
.brand-guide-view-container {
  flex: 1;
  width: 100%;
  background-color: #fbfafd;
  padding: 52px 24px 84px;
}

.brand-guide-inner {
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.bg-hero-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
}

.bg-eyebrow {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #2c2538;
  text-transform: uppercase;
}

.bg-main-title {
  font-family: 'Gowun Batang', 'Nanum Myeongjo', serif;
  font-size: 46px;
  font-weight: 700;
  color: #1e1b26;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.bg-main-desc {
  font-size: 14.5px;
  color: #555160;
  line-height: 1.7;
  max-width: 680px;
  word-break: keep-all;
}

.bg-hero-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  flex-wrap: wrap;
  justify-content: center;
}

.bg-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 18px;
  border-radius: 999px;
  background: #5d33a8;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(93, 51, 168, 0.25);
  transition: all 0.18s ease;
}

.bg-pill-btn:hover {
  background: #4b268c;
  transform: translateY(-1px);
}

.bg-pill-btn.secondary {
  background: #ffffff;
  color: #5d33a8;
  border: 1px solid #d4c8ec;
  box-shadow: none;
}

.bg-pill-btn.secondary:hover {
  background: #f3effb;
}

.bg-section-frame {
  background: #ffffff;
  border: 1px solid #2c2538;
  padding: 42px 48px;
  display: flex;
  flex-direction: column;
}

.bg-section-title {
  font-family: 'Gowun Batang', 'Nanum Myeongjo', serif;
  font-size: 27px;
  font-weight: 700;
  color: #1e1b26;
  padding-bottom: 14px;
  border-bottom: 1px solid #2c2538;
  margin-bottom: 26px;
  letter-spacing: -0.02em;
}

.bg-sub-title {
  font-family: 'Gowun Batang', 'Nanum Myeongjo', serif;
  font-size: 16.5px;
  font-weight: 700;
  color: #1e1b26;
  margin-bottom: 12px;
}

.bg-horizontal-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.bg-logo-canvas {
  width: 100%;
  min-height: 156px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  border: 1px solid #9592a3;
}

.bg-logo-canvas.light-surface {
  background: #fbfafd;
}

.bg-logo-canvas.dark-surface {
  background: #191522;
  border-color: #191522;
}

.bg-logo-canvas.tall {
  min-height: 290px;
}

.bg-sig-horizontal {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
}

.bg-symbol-badge {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}

.bg-symbol-badge.violet {
  background: linear-gradient(135deg, #5d33a8 0%, #7644cc 100%);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(93, 51, 168, 0.28);
}

.bg-symbol-badge.white-inv {
  background: #5d33a8;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.bg-symbol-badge .sym-char {
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 800;
}

.bg-symbol-badge .sym-dot {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
}

.bg-wordmark-group {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

.bg-wordmark-en {
  font-family: 'Gowun Batang', 'Pretendard', serif;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.bg-wordmark-ko {
  font-family: var(--font-sans);
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.bg-wordmark-sep {
  font-size: 24px;
  color: #c4bcd3;
  font-weight: 300;
}

.bg-wordmark-sep.dark-sep {
  color: #5d33a8;
}

.dark-ink {
  color: #1e1b26;
}

.white-ink {
  color: #ffffff;
}

.violet-ink {
  color: #5d33a8;
}

.lavender-ink {
  color: #c4b5fd;
}

.bg-motto-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.bg-stacked-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}

.bg-stacked-en {
  font-family: 'Gowun Batang', serif;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.02em;
}

.bg-stacked-ko {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.bg-motto-rule {
  width: 48px;
  height: 1.5px;
  margin: 6px 0;
}

.bg-motto-rule.dark-rule {
  background: #5d33a8;
}

.bg-motto-rule.light-rule {
  background: #a78bfa;
}

.bg-motto-text {
  font-family: 'Gowun Batang', serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}

.bg-motto-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: #716d7e;
}

.bg-motto-sub.light-sub {
  color: #a39eb2;
}

/* 2. Color System Grid */
.bg-color-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 24px;
}

.bg-color-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  transition: transform 0.18s ease;
}

.bg-color-card:hover {
  transform: translateY(-2px);
}

.bg-color-swatch {
  width: 100%;
  height: 104px;
  border: 1px solid #9592a3;
}

.bg-color-name {
  font-size: 15px;
  font-weight: 800;
  color: #1e1b26;
  margin-top: 4px;
}

.bg-color-hex {
  font-family: var(--font-mono);
  font-size: 13px;
  color: #6b667a;
}

/* 3. Typography Stack */
.bg-typo-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.bg-typo-card {
  border: 1px solid #9592a3;
  background: #fbfafd;
  padding: 28px 34px;
  display: flex;
  align-items: center;
  gap: 36px;
}

.bg-typo-sample {
  font-size: 54px;
  font-weight: 800;
  color: #1e1b26;
  min-width: 96px;
  text-align: center;
  line-height: 1;
}

.bg-typo-sample.serif-sample {
  font-family: 'Gowun Batang', 'Nanum Myeongjo', serif;
}

.bg-typo-sample.sans-sample {
  font-family: var(--font-sans);
}

.bg-typo-sample.mono-sample {
  font-family: var(--font-mono);
  font-size: 40px;
  color: #5d33a8;
}

.bg-typo-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bg-typo-name {
  font-family: 'Gowun Batang', serif;
  font-size: 18px;
  font-weight: 700;
  color: #1e1b26;
}

.bg-typo-desc {
  font-size: 13.5px;
  color: #494554;
  line-height: 1.6;
  word-break: keep-all;
}

/* 4. Favicon Showcase Grid */
.bg-favicon-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

.bg-favicon-card {
  border: 1px solid #9592a3;
  background: #fbfafd;
  min-height: 210px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 28px;
}

.bg-favicon-box {
  width: 88px;
  height: 88px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 8px 24px rgba(93, 51, 168, 0.22);
}

.bg-favicon-box.dark-fav {
  background: #5d33a8;
  border: none;
}

.bg-favicon-box.light-fav {
  background: #ffffff;
  border: 2px solid #5d33a8;
  box-shadow: 0 4px 16px rgba(44, 37, 56, 0.08);
}

.bg-favicon-box .fav-ko {
  font-family: var(--font-sans);
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
}

.bg-favicon-box.dark-fav .fav-ko {
  color: #ffffff;
}

.bg-favicon-box.light-fav .fav-ko {
  color: #5d33a8;
}

.bg-favicon-box .fav-dot {
  position: absolute;
  top: 11px;
  right: 14px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #10b981;
}

.bg-favicon-label {
  font-size: 14.5px;
  font-weight: 700;
  color: #2c2538;
}

.bg-favicon-footnote {
  font-size: 14px;
  color: #3b3744;
  line-height: 1.75;
  word-break: keep-all;
}

@media (max-width: 768px) {
  .bg-section-frame {
    padding: 28px 20px;
  }
  .bg-main-title {
    font-size: 32px;
  }
  .bg-motto-grid,
  .bg-favicon-grid {
    grid-template-columns: 1fr;
  }
  .bg-color-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .bg-typo-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 22px;
  }
  .bg-typo-sample {
    min-width: auto;
  }
}

/* --------------------------------------------------------------------------
   12. Responsive Media Queries (Mobile Optimized)
   -------------------------------------------------------------------------- */
@media (max-width: 1400px) {
  :root {
    --col-left-width: 380px;
    --col-right-width: 390px;
  }
}

@media (max-width: 1200px) {
  .studio-workspace {
    grid-template-columns: 360px 1fr;
  }

  .inspector-deck {
    display: none;
  }
}

@media (max-width: 860px) {
  body {
    overflow-y: auto;
  }

  .app-layout {
    height: auto;
    min-height: 100vh;
  }

  /* Header Mobile Optimization */
  .studio-header {
    height: auto;
    min-height: 60px;
    padding: 10px 16px;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 8px;
    position: sticky;
    top: 0;
    z-index: 120;
  }

  .header-left {
    overflow: visible;
    flex: 0 1 auto;
  }

  .calligraphr-nav {
    display: none !important;
  }

  .calligraphr-nav.mobile-open {
    display: flex !important;
    flex-direction: column;
    align-items: stretch !important;
    gap: 4px !important;
    margin-left: 0 !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    background: #ffffff;
    border-bottom: 1px solid #e3deed;
    box-shadow: 0 14px 28px rgba(44, 37, 56, 0.12);
    padding: 12px 16px 18px;
    z-index: 150;
    white-space: normal;
    overflow: visible;
  }

  .calligraphr-nav.mobile-open .nav-link-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 11px 12px;
    font-size: 14.5px;
    font-weight: 600;
    border-radius: 8px;
    border-bottom: none;
  }

  .calligraphr-nav.mobile-open .nav-link-item:hover,
  .calligraphr-nav.mobile-open .nav-link-item.active {
    background: #f3effb;
    color: #5d33a8;
    border-bottom-color: transparent;
  }

  .calligraphr-nav.mobile-open .nav-studio-pill {
    margin-top: 6px;
    width: 100%;
    justify-content: center;
    padding: 11px 16px;
    font-size: 14px;
    border-radius: 8px;
  }

  .brand-title {
    font-size: 20px;
  }

  .brand-subtitle, .project-spec-chip, .engine-badge-cluster {
    display: none !important;
  }

  .header-right {
    margin-left: auto;
  }

  .global-actions {
    gap: 8px;
  }

  .action-btn {
    padding: 6px 12px !important;
    font-size: 12px !important;
  }

  #btnAdminConsole {
    display: none !important;
  }

  .btn-mobile-hamburger {
    display: inline-flex;
  }

  /* Landing Page Mobile Responsive */
  .testimonials-grid {
    grid-template-columns: 1fr;
  }

  .workflow-screens-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .landing-main-title {
    font-size: 24px;
  }

  /* Hero Banner Mobile */
  .calligraphr-hero-banner {
    padding: 18px 16px 16px;
  }

  .hero-title {
    font-size: 19px;
    line-height: 1.4;
  }

  .hero-desc {
    font-size: 12.5px;
    line-height: 1.5;
  }

  /* 3-Column Stack Layout */
  .studio-workspace {
    display: flex;
    flex-direction: column;
    overflow-y: visible;
    height: auto;
  }

  .panel {
    border-right: none !important;
    border-bottom: 1px solid var(--border-subtle);
    min-height: auto;
  }

  .input-deck, .matrix-deck, .inspector-deck {
    width: 100%;
    max-width: 100%;
  }

  .inspector-deck {
    display: flex;
  }

  /* Drawing Canvas Mobile & Touch Optimization */
  .canvas-viewport {
    touch-action: none !important;
  }

  .glyph-ghost-guide {
    font-size: 180px;
  }

  .canvas-toolbar {
    flex-wrap: wrap;
    gap: 8px;
  }

  .slider-inline-group {
    min-width: 120px;
  }

  /* Glyph Matrix HUD & Filter Controls */
  .matrix-filter-header {
    flex-direction: column;
    align-items: stretch;
    padding: 12px 16px;
  }

  .matrix-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .matrix-category-tabs {
    overflow-x: auto;
    padding: 3px;
  }

  .search-wrap {
    width: 100%;
  }

  .glyph-search {
    width: 100%;
  }

  .ai-status-banner {
    padding: 10px 16px;
  }

  .status-summary {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .metrics-counters {
    flex-wrap: wrap;
    gap: 10px;
    font-size: 10px;
  }

  .glyph-matrix-scroll-area {
    padding: 14px 16px;
  }

  .glyph-cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 8px;
  }

  .glyph-card {
    padding: 8px 6px;
  }

  .card-preview {
    min-height: 56px;
  }

  .glyph-vector-char {
    font-size: 28px;
  }

  /* Step 03: Typography Sliders Single-Column Fix */
  .typography-tuning-grid {
    grid-template-columns: 1fr !important;
    gap: 8px;
  }

  .live-type-box {
    font-size: 26px;
    min-height: 95px;
  }

  /* Global Footer Mobile Grid */
  .calligraphr-global-footer {
    padding: 24px 20px 20px;
  }

  .footer-inner-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 16px;
  }

  .footer-brand-col {
    grid-column: 1 / -1;
  }

  .toast-hub {
    right: 16px;
    bottom: 24px;
    left: 16px;
  }

  .toast-item {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: 17px;
  }

  .header-right {
    width: auto;
  }

  .global-actions {
    width: auto;
    justify-content: flex-end;
    gap: 6px;
  }

  .action-btn {
    flex: 0 0 auto;
    justify-content: center;
    padding: 6px 10px !important;
    font-size: 11.5px !important;
  }

  #btnAdminConsole {
    display: none !important;
  }

  .footer-inner-grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   13. Print Stylesheet (300 DPI Clean A4 Specimen Sheet Output)
   -------------------------------------------------------------------------- */
@media print {
  @page {
    size: A4 portrait;
    margin: 12mm;
  }

  body, html {
    background: #ffffff !important;
    color: #000000 !important;
    overflow: visible !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Hide entire background app layout and modal UI chrome */
  .app-layout,
  .toast-hub,
  #memberAuthModal,
  #webfontApiModal,
  .modal-header,
  .template-docs-tabs,
  .template-customizer-bar,
  .modal-actions,
  #docTabContentT1,
  #docTabContentT2,
  #docTabContentT3 {
    display: none !important;
  }

  .studio-modal::backdrop {
    display: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
  }

  #templateModal {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  #templateModal .modal-card {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    background: #ffffff !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    animation: none !important;
    overflow: visible !important;
  }

  #templateModal .modal-body,
  #templateModal .modal-body.template-preview-area {
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    background: #ffffff !important;
    display: block !important;
  }

  #docTabContentSheet {
    display: block !important;
    width: 100% !important;
  }

  .template-sheet-mockup {
    width: 100% !important;
    height: auto !important;
    box-shadow: none !important;
    padding: 14px !important;
    border: 1.5px solid #1e293b !important;
    border-radius: 0 !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .sheet-header-mockup {
    border-bottom: 2px solid #000000 !important;
    padding-bottom: 8px !important;
    margin-bottom: 14px !important;
  }

  .sheet-title-mockup,
  .sheet-meta-mockup {
    color: #000000 !important;
  }

  .sheet-grid-mockup {
    gap: 8px !important;
    grid-auto-rows: minmax(84px, auto) !important;
  }

  .mockup-cell {
    border: 1px dashed #334155 !important;
    min-width: 0 !important;
    min-height: 84px !important;
    aspect-ratio: 1 / 1.05 !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .sheet-grid-mockup.cols-8 .mockup-cell {
    min-height: 0 !important;
  }

  .mockup-cell .cell-cross {
    border: 1px dotted #94a3b8 !important;
  }

  .mockup-cell .cell-ref {
    color: #000000 !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
  }
}