/*
  Are you getting a console warning about deprecated usage? Please see the migration guide at the end of this file.

  Otherwise, you can copy and paste this file and use it as a base for your customization needs.
*/
@layer grist-custom {

    /* theme-agnostic overrides
   *
   * These are always applied regardless of the current theme.
   */
    :root {
        /* logo */
        --icon-GristLogo: url("ui-icons/Logo/GristLogo.svg");
        --grist-theme-logo-bg: #040404;
        --grist-theme-logo-size: 22px 22px;
    }

    /*
   * theme-dependent overrides
   *
   * You can filter your CSS rules with the [data-grist-appearance] and [data-grist-theme] attributes to apply rules conditionally:
   *  - [data-grist-appearance] is the current appearance (light or dark)
   *  - [data-grist-theme] is the current theme (GristLight, GristDark, or HighContrastLight)
   */
    :root[data-grist-theme="GristLight"] {
        /* colors */
        --grist-theme-body: #262633;
        /* main body text */
        --grist-theme-emphasis: var(--grist-theme-black);
        /* pronounced text */
        --grist-theme-secondary: #929299;
        /* secondary, less visually pronounced text */
        --grist-theme-very-light: var(--grist-theme-white);
        /* text that is always light, whatever the current appearance (light or dark theme) */

        --grist-theme-bg-default: var(--grist-theme-white);
        /* default body bg color */
        --grist-theme-bg-secondary: #f7f7f7;
        /* bg color mostly used on panels */
        --grist-theme-bg-tertiary: #d9d9d999;
        /* transparent bg, mostly used on hover effects */
        --grist-theme-bg-emphasis: #262633;
        /* pronounced bg color, mostly used on selected items */

        --grist-theme-decoration: #d9d9d9;
        /* main decoration color, mostly used on borders */
        --grist-theme-decoration-secondary: #e8e8e8;
        /* less pronounced decoration color */
        --grist-theme-decoration-tertiary: #d9d9d9;
        /* even less pronounced decoration color */

        --grist-theme-primary: #16b378;
        /* main accent color used mostly on interactive elements */
        --grist-theme-primary-muted: #009058;
        /* alternative primary color, mostly used on hover effects */
        --grist-theme-primary-dim: #007548;
        /* dimmer primary color, rarely used */
        --grist-theme-primary-emphasis: #b1ffe2;
        /* more pronounced primary color variant, rarely used  */
        /*
      ⚠ Warning when changing the primary color ⚠
      Some colors used in themes are not yet defined in css variables.
      When changing the primary color, please refer to app/common/themes/{GristDark,GristLight}.ts files
      to see what theme tokens would need specific overrides.
      Check app/common/ThemePrefs.ts to retrieve the css variable names matching the token names.
      Contributions to make this process easier are welcome!
    */

        --grist-theme-token-cursor: var(--grist-theme-primary);
        /* cursor color in widgets */
        --grist-theme-token-cursor-inactive: #a2e1c9;
        --grist-theme-token-selection: #16b37826;
        /* transparent background of selected cells */
        --grist-theme-token-selection-opaque: #dcf4eb;
        --grist-theme-token-selection-darker-opaque: #d6eee5;
        --grist-theme-token-selection-darker: #16b37840;
        --grist-theme-token-selection-darkest: #16b37859;

        --grist-theme-token-hover: #bfbfbf;
        /* non-transparent hover effect color, rarely used */
        --grist-theme-backdrop: #262633e5;
        /* transparent modal backdrop bg color */

        --grist-theme-error: #d0021b;
        --grist-theme-error-light: #f66;
        --grist-theme-warning: #dd962c;
        --grist-theme-warning-light: #f9ae41;
        --grist-theme-info: #3b82f6;
        --grist-theme-info-light: #87b2f9;
        --grist-theme-black: #000;
        --grist-theme-white: #fff;

        /*
      ℹ There are quite a lot of other css variables available for fine-tuning.
      See app/common/ThemePrefs.ts and app/common/themes/{Base,GristDark,GristLight}.ts
      for the exhaustive list and default values.
    */
    }
}

/*
  Migration guide to new "--grist-theme-" prefixed variables.

  If you are using "--grist-color-" prefixed variables, you need to upgrade to the new css variable names.
  To help you migrate, listed below is the exhaustive mapping of the old variables to the new ones:

  --grist-color-light-grey: --grist-theme-bg-secondary
  --grist-color-medium-grey: --grist-theme-bg-tertiary
  --grist-color-medium-grey-opaque: --grist-theme-decoration-secondary
  --grist-color-dark-grey: --grist-theme-decoration
  --grist-color-light: --grist-theme-white
  --grist-color-dark: --grist-theme-body
  --grist-color-dark-bg: --grist-theme-bg-emphasis
  --grist-color-slate: --grist-theme-secondary
  --grist-color-lighter-green: --grist-theme-primary-emphasis
  --grist-color-light-green: --grist-theme-primary
  --grist-color-dark-green: --grist-theme-primary-muted
  --grist-color-darker-green: --grist-theme-primary-dim
  --grist-color-lighter-blue: --grist-theme-info-light
  --grist-color-light-blue: --grist-theme-info
  --grist-color-orange: --grist-theme-warning-light
  --grist-color-cursor: --grist-theme-token-cursor
  --grist-color-selection: --grist-theme-token-selection
  --grist-color-selection-opaque: --grist-theme-token-selection-opaque
  --grist-color-selection-darker-opaque: --grist-theme-token-selection-darker-opaque
  --grist-color-inactive-cursor: --grist-theme-token-cursor-inactive
  --grist-color-hover: --grist-theme-token-hover
  --grist-color-error: --grist-theme-error
  --grist-color-warning: --grist-theme-warning-light
  --grist-color-warning-bg: --grist-theme-warning
  --grist-color-backdrop: --grist-theme-backdrop
  --grist-font-family: --grist-theme-font-family
  --grist-font-family-data: --grist-theme-font-family-data
  --grist-xx-font-size: --grist-theme-xx-small-font-size
  --grist-x-small-font-size: --grist-theme-x-small-font-size
  --grist-small-font-size: --grist-theme-small-font-size
  --grist-medium-font-size: --grist-theme-medium-font-size
  --grist-intro-font-size: --grist-theme-intro-font-size
  --grist-large-font-size: --grist-theme-large-font-size
  --grist-x-large-font-size: --grist-theme-x-large-font-size
  --grist-xx-large-font-size: --grist-theme-xx-large-font-size
  --grist-xxx-large-font-size: --grist-theme-xxx-large-font-size
  --grist-big-control-font-size: --grist-theme-big-control-font-size
  --grist-header-control-font-size: --grist-theme-header-control-font-size
  --grist-big-text-weight: --grist-theme-big-control-text-weight
  --grist-header-text-weight: --grist-theme-header-control-text-weight
  --grist-border-radius: --grist-theme-control-border-radius
  --grist-logo-bg: --grist-theme-logo-bg
  --grist-logo-size: --grist-theme-logo-size

  These variables are not used anymore and can be safely removed from your custom css file:

  --grist-color-dark-text
  --grist-primary-bg
  --grist-primary-fg
  --grist-primary-fg-hover
  --grist-control-font-size
  --grist-small-control-font-size
  --grist-label-text-size
  --grist-label-text-bg
  --grist-label-active-bg
  --grist-normal-margin
  --grist-normal-padding
  --grist-tight-padding
  --grist-loose-padding
  --grist-control-border
  --grist-toast-bg
*/

/* Grend 브랜딩 커스터마이징 - 점진적 활성화 */

/* 로고 텍스트 변경 (기본 스타일링) */
.test-dm-logo,
.test-logo,
[data-test-id="dm-logo"],
[data-test-id="logo"] {
    font-family: 'Arial', sans-serif !important;
    font-weight: bold !important;
    color: #2196F3 !important;
}

/* Grist 텍스트를 Grend로 대체 */
.test-dm-logo::after,
.test-logo::after,
[data-test-id="dm-logo"]::after,
[data-test-id="logo"]::after {
    content: "Grend" !important;
    position: absolute;
    color: #2196F3 !important;
    font-weight: bold !important;
    font-size: inherit !important;
}

.test-dm-logo,
.test-logo,
[data-test-id="dm-logo"],
[data-test-id="logo"] {
    position: relative !important;
    color: transparent !important;
}

/* 홈페이지 타이틀 변경 - 과감한 텍스트 치환 */
h1:contains("Grist"),
h2:contains("Grist"),
h3:contains("Grist"),
.welcome-title:contains("Grist"),
.app-header:contains("Grist") {
    position: relative;
    color: transparent !important;
}

h1:contains("Grist")::after,
h2:contains("Grist")::after,
h3:contains("Grist")::after,
.welcome-title:contains("Grist")::after,
.app-header:contains("Grist")::after {
    content: "Grend";
    position: absolute;
    left: 0;
    top: 0;
    color: #2196F3 !important;
    font-weight: bold !important;
    font-size: inherit !important;
    line-height: inherit !important;
}

/* 사이드바 로고 (안전함) */
.test-dm-logo-sm::after,
[data-test-id="dm-logo-sm"]::after {
    content: "G" !important;
    color: #2196F3 !important;
    font-weight: bold !important;
}

.test-dm-logo-sm,
[data-test-id="dm-logo-sm"] {
    color: transparent !important;
    position: relative !important;
}

/* 탭 타이틀에서 Grist → Grend 변경 */
title {
    visibility: hidden;
}

title::after {
    content: "Grend";
    visibility: visible;
}

/* 메인 브랜딩 컬러 (안전함) */
:root {
    --grist-color-primary: #2196F3;
    --grist-color-primary-dark: #1976D2;
}

/* 버튼 및 액센트 컬러 변경 (안전함) */
.btn-primary,
.test-dm-basic-button,
[data-test-id="dm-basic-button"] {
    background-color: var(--grist-color-primary) !important;
    border-color: var(--grist-color-primary) !important;
}

.btn-primary:hover {
    background-color: var(--grist-color-primary-dark) !important;
    border-color: var(--grist-color-primary-dark) !important;
}

/* 모든 요소에서 포괄적인 Grist → Grend 변환 */

/* 특정 클래스와 데이터 속성 대상 */
.test-dm-title:contains("Grist"),
[data-test-id*="title"]:contains("Grist"),
.app-title:contains("Grist"),
.page-title:contains("Grist"),
.section-title:contains("Grist"),
.card-title:contains("Grist"),
.modal-title:contains("Grist"),
.dialog-title:contains("Grist") {
    position: relative;
    color: transparent !important;
}

.test-dm-title:contains("Grist")::after,
[data-test-id*="title"]:contains("Grist")::after,
.app-title:contains("Grist")::after,
.page-title:contains("Grist")::after,
.section-title:contains("Grist")::after,
.card-title:contains("Grist")::after,
.modal-title:contains("Grist")::after,
.dialog-title:contains("Grist")::after {
    content: "Grend";
    position: absolute;
    left: 0;
    top: 0;
    color: #2196F3 !important;
    font-size: inherit !important;
    font-weight: bold !important;
    visibility: visible !important;
}

/* 메타데이터와 설명 텍스트도 변환 */
.description:contains("Grist"),
.tooltip:contains("Grist"),
.help-text:contains("Grist"),
.placeholder:contains("Grist") {
    position: relative;
    color: transparent !important;
}

.description:contains("Grist")::after,
.tooltip:contains("Grist")::after,
.help-text:contains("Grist")::after,
.placeholder:contains("Grist")::after {
    content: "Grend";
    position: absolute;
    left: 0;
    top: 0;
    color: #2196F3 !important;
    font-size: inherit !important;
    visibility: visible !important;
}

/* 헤더 타이틀 스타일링 (안전함) */
.welcome_title h1,
.home_title h1,
.header_title h1,
.test-home-title,
[data-test-id="home-title"] {
    position: relative;
    color: #2196F3 !important;
    font-weight: bold !important;
}

/* 푸터, 메뉴, 버튼 등에서 과감한 Grist → Grend 변환 */
.footer-text:contains("Grist"),
.copyright:contains("Grist"),
.menu-item:contains("Grist"),
.nav-item:contains("Grist"),
.btn:contains("Grist"),
.link:contains("Grist"),
span:contains("Grist"),
div:contains("Grist"),
p:contains("Grist"),
a:contains("Grist") {
    position: relative;
    color: transparent !important;
}

.footer-text:contains("Grist")::after,
.copyright:contains("Grist")::after,
.menu-item:contains("Grist")::after,
.nav-item:contains("Grist")::after,
.btn:contains("Grist")::after,
.link:contains("Grist")::after,
span:contains("Grist")::after,
div:contains("Grist")::after,
p:contains("Grist")::after,
a:contains("Grist")::after {
    content: "Grend";
    position: absolute;
    left: 0;
    top: 0;
    color: #2196F3 !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    visibility: visible !important;
}

/* 로딩 화면 브랜딩 (안전함) */
.loading-logo,
.app-logo {
    position: relative;
    color: transparent !important;
}

.loading-logo::after,
.app-logo::after {
    content: "Grend";
    position: absolute;
    left: 0;
    top: 0;
    color: #2196F3;
    font-weight: bold;
    font-size: inherit;
}

/* 추가 UI 요소 스타일링 (안전함) */
.test-welcome-text,
[data-test-id="welcome-text"],
.grist-logo,
.app-logo-text {
    color: #2196F3 !important;
    font-weight: bold !important;
}

/* 네비게이션 및 링크 색상 */
.test-dm-nav-link,
[data-test-id="nav-link"] {
    color: #2196F3 !important;
}

.test-dm-nav-link:hover,
[data-test-id="nav-link"]:hover {
    color: #1976D2 !important;
}

/* 모바일 반응형 (안전함) */
@media (max-width: 768px) {

    .test-dm-logo::after,
    [data-test-id="dm-logo"]::after {
        font-size: 18px !important;
    }

    .welcome_title h1,
    .home_title h1 {
        font-size: 24px !important;
    }
}

/* 폼 및 카드 스타일링 (안전함) */
.test-dm-card,
[data-test-id="card"],
.grist-card {
    border-color: #E3F2FD !important;
}

.test-dm-card:hover,
[data-test-id="card"]:hover {
    border-color: #2196F3 !important;
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.15) !important;
}

/* 입력 요소 포커스 색상 */
.test-dm-input:focus,
[data-test-id="input"]:focus,
input:focus,
textarea:focus {
    border-color: #2196F3 !important;
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2) !important;
}

/* 아이콘 색상 변경 */
.test-dm-icon,
[data-test-id="icon"],
.grist-icon {
    color: #2196F3 !important;
}

/* 테이블 및 데이터 요소 스타일링 */
.test-dm-table-header,
[data-test-id="table-header"],
.table-header {
    background-color: #E3F2FD !important;
    color: #1976D2 !important;
    font-weight: bold !important;
}

/* 선택된 요소 하이라이트 */
.test-dm-selected,
[data-test-id="selected"],
.selected {
    background-color: rgba(33, 150, 243, 0.1) !important;
    border-color: #2196F3 !important;
}

/* 사이드바 및 패널 스타일링 */
.test-dm-sidebar,
[data-test-id="sidebar"],
.sidebar {
    border-right-color: #E3F2FD !important;
}

/* 상태 표시기 */
.test-dm-status-active,
[data-test-id="status-active"],
.status-active {
    background-color: #2196F3 !important;
    color: white !important;
}

/* 극강 포괄적 Grist → Grend 변환 (모든 누락 방지) */

/* 모든 텍스트 요소에서 Grist → Grend 변환 */
*:contains("Grist"):not(script):not(style):not(title) {
    position: relative !important;
}

*:contains("Grist"):not(script):not(style):not(title)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: var(--grist-theme-bg-default, white);
    z-index: 1;
}

*:contains("Grist"):not(script):not(style):not(title)::after {
    content: "Grend";
    position: absolute;
    left: 0;
    top: 0;
    color: #2196F3 !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    z-index: 2;
    background: transparent;
}

/* 입력 필드의 placeholder와 value도 변환 */
input[value*="Grist"],
input[placeholder*="Grist"],
textarea[placeholder*="Grist"] {
    position: relative;
}

/* 브랜드 강화를 위한 추가 스타일링 */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #2196F3, #1976D2, #1565C0);
    z-index: 9999;
    pointer-events: none;
}

/* 문서 제목과 메타태그 강제 변환 */
head>title {
    display: block !important;
    position: fixed;
    top: -9999px;
}

head>title::after {
    content: "Grend" !important;
}

/* 모든 텍스트에서 Grist 단어를 Grend로 강제 교체 */
*[title*="Grist"] {
    position: relative;
}

*[title*="Grist"]::before {
    content: attr(title);
    position: absolute;
    opacity: 0;
}

/* 최종 백업: content 속성을 이용한 전역 치환 */
*:contains("Grist") {
    text-shadow: 0 0 0 #2196F3 !important;
    font-weight: bolder !important;
}

/* 추가 브랜드 식별자 */
.grend-branded {
    border-left: 3px solid #2196F3 !important;
    padding-left: 8px !important;
}

/* JavaScript 파일 로드 */
/* body::before {
    content: '';
    background: url('data:text/javascript;base64,') no-repeat;
    display: none;
} */

/* JavaScript 로드를 위한 임시 스타일 */
/* @supports (background: url('text-replacer.js')) {
    html::after {
        content: '';
        background: url('text-replacer.js');
        display: none;
    }
} */

/* 특정 요소들 개별 처리 - JavaScript로 처리해야 함 */

/* JavaScript 기반 텍스트 치환을 위한 스타일 준비 */
.grend-text-replaced {
    color: #2196F3 !important;
    font-weight: bold !important;
}

/* "Grist 후원" 버튼 완전 숨김 */
.test-support-grist-button,
button:contains("Grist 후원"),
._grain12_.test-support-grist-button {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* 폼 하단 푸터 숨김 ("제공: Grist", "나만의 양식 만들기" 등) */
footer._grain257_,
._grain257_,
._grain241_,
._grain242_,
._grain244_,
._grain245_,
._grain243_,
._grain16_,
footer:contains("제공"),
footer:contains("나만의 양식 만들기"),
a:contains("Grist에서 제공"),
a:contains("나만의 양식 만들기"),
a[href*="getgrist.com"],
a[href*="grist-forms"],
a[aria-label*="Grist"],
a[aria-label*="제공"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
}

/* 폼 푸터 관련 모든 요소 강제 숨김 */
footer[class*="grain"],
div[class*="grain241"],
div[class*="grain242"],
div[class*="grain243"],
div[class*="grain244"],
div[class*="grain245"],
a[class*="grain242"],
a[class*="grain245"] {
    display: none !important;
    visibility: hidden !important;
}

/* 위험한 JavaScript 실행 부분 주석 처리 (WebSocket 문제 해결용) */
/*
@keyframes grend-branding {
    0% { 
        --grend-loaded: 1; 
    }
}

body {
    animation: grend-branding 0.1s;
    animation-fill-mode: forwards;
}

body::after {
    content: "";
    position: fixed;
    top: -1px;
    left: -1px;
    width: 1px;
    height: 1px;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cscript%3E%0A(function()%7B%0Aif(window.grendBrandingLoaded) return%3B%0Awindow.grendBrandingLoaded = true%3B%0A%0Afunction replaceText()%7B%0Adocument.querySelectorAll('*').forEach(el =%3E %7B%0Aif(el.textContent %26%26 el.textContent.includes('Grist'))%7B%0Ael.textContent = el.textContent.replace(/Grist/g, 'Grend')%3B%0A%7D%0A%7D)%3B%0Aif(document.title.includes('Grist'))%7B%0Adocument.title = document.title.replace(/Grist/g, 'Grend')%3B%0A%7D%0A%7D%0A%0AreplaceText()%3B%0AsetInterval(replaceText, 2000)%3B%0Aconsole.log('Grend branding loaded via CSS')%3B%0A%7D)()%3B%0A%3C/script%3E%3C/svg%3E") no-repeat;
}
*/

._grain134_ {
    margin-bottom: 60px;
}