/*********************************************************

          ____  ____ _____ ________  _______    _   __    
         / __ \/ __ ) ___//  _/ __ \/  _/   |  / | / /     
        / / / / __  \__ \ / // / / // // /| | /  |/ /     
       / /_/ / /_/ /__/ // // /_/ // // ___ |/ /|  /      
      _\____/_____/____/___/_____/___/_/  |_/_/ |_/     
     /_  __/ ____/ __ \/  |/  /  _/ | / /   |  / /     
      / / / __/ / /_/ / /|_/ // //  |/ / /| | / /      
     / / / /___/ _, _/ /  / // // /|  / ___ |/ /___    
    /_/ /_____/_/ |_/_/  /_/___/_/ |_/_/  |_/_____/    
                                                          

    Created with :green_heart: by zcysxy (@Atlas#7560)
Github: https://github.com/zcysxy/Obsidian-Terminal-Theme
*********************************************************/

/* Style Settings */
/* @settings

name: Obsidian Terminal Style Settings
id: a-unique-id
settings:
    -
        id: colors
        title: Colors
        type: heading
        level: 1
        collapsed: false
    - 
        id: the-color
        title: Accent Color
        type: variable-color
        format: hex
        alt-format:
            -
                id: the-color-rgb
                format: rgb
        default: '#15d00d'
    - 
        id: the-background-color
        title: Background Color
        type: variable-color
        format: hex
        default: '#000000'

    -
        id: prompts
        title: Prompts (Not Supported Yet)
        type: heading
        level: 1
        collapsed: false
*/
/*
        -
        id: input-prompt
        title: Input Prompt
        type: variable-text
        default: "$"
    -
        id: not-created-note
        title: Not Created
        type: variable-text
        default: "+"
    -
        id: pin-command
        title: Pinned Command
        type: variable-text
        default: "*"
    -
        id: selected
        title: Selected Item
        type: variable-text
        default: ">"
    -
        id: active-tab
        title: Active Tab
        type: variable-text
        default: "^"
    -
        id: --collapse-right
        title: Collapsed
        type: variable-text
        default: ">"
    -
        id: --collapse-down
        title: Not Collapsed
        type: variable-text
        default: "v"
    -
        id: show-more-top
        title: Show More Above
        type: variable-text
        default: "+\\"
    -
        id: show-more-bottom
        title: Show More Below
        type: variable-text
        default: "+/"
    -
        id: search
        title: Search Prompt
        type: variable-text
        default: "/"
    -
        id: replace
        title: Replace Prompt
        type: variable-text
        default: ":"
    -
        id: prev
        title: Previous Item
        type: variable-text
        default: "<"
    -
        id: next
        title: Next Item
        type: variable-text
        default: ">"
    -
        id: all
        title: Apply to All
        type: variable-text
        default: "-a"
    -
        id: close
        title: Close
        type: variable-text
        default: "x"
    -
        id: quit
        title: Quit
        type: variable-text
        default: "/q"
    -
        id: preview-mode
        title: Switch to Preview Mode
        type: variable-text
        default: "/p"
    -
        id: edit-mode
        title: Switch to Edit Mode
        type: variable-text
        default: "/e"
    -
        id: more
        title: More Options
        type: variable-text
        default: "/?"
    -
        id: pwd
        title: Present Working Document Prompt
        type: variable-text
        default: "PWD"
*/

/* --the-font: Fira Code */
/* @font-face {
  font-family: 'Fira Code';
  src: url(data:font/truetype;charset=utf-8;base64,<<txt>>) format('truetype');
  font-weight: normal;
  font-style: normal;
} */


@import url('https://cdn.jsdelivr.net/npm/gen-interface-jp@0.1.9/all.css');

/* Root Variables */
:root {
  --the-font: "Gen Interface JP", sans-serif !important;
  --font-body: var(--the-font) !important;
  --default-font: var(--the-font) !important;

/* 見出し（明朝）の設定 */
  --header-font: "Gen Interface JP Display", sans-serif !important;

  /* Terminalテーマのカラー設定 */
  --the-color: #000000;
  --the-color-rgb: 35, 255, 24;
  --the-background-color: #ffffff;
  --the-font-size: 16px; /* 明朝体は少し大きめ（15-16px）にすると格段に読みやすくなります */
  --editor-line-height: 1.8; /* 読みやすさ重視の行間 */
  --font-weight: 400 !important;   
  --text-normal: var(--the-color) !important;
  --background-primary: var(--the-background-color) !important;
}


/* 本文領域およびサイトの根本（html/body/各カラム全体）に白背景を強制適用し、遷移時の黒いチカチカを完全に防ぐ */
html, 
body, 
.site-body, 
.site-body-left-column, 
.site-body-right-column, 
.view-content,
.markdown-rendered, 
.publish-renderer,
.publish-view-container,
.is-loading {
  font-family: var(--the-font) !important;
  font-weight: 400 !important;
  background-color: var(--the-background-color) !important;
  background: var(--the-background-color) !important;
  color: var(--the-color) !important;
  -webkit-font-smoothing: antialiased; /* 文字を滑らかにする（Mac/iOS向け） */
}


  /* Prompts */
  --input-prompt: "$";
  --not-created-note: "+";
  --pin-command: "*";
  --selected: ">";
  --active-tab: "^";
  --collapse-right: ">";
  --collapse-down: "v";
  --show-more-top: "+\\";
  --show-more-bottom: "+/";
  --search: "/";
  --replace: ":";
  --prev: "<";
  --next: ">";
  --all: "-a";
  --close: "x";
  --quit: "/q";
  --preview-mode: "/p";
  --edit-mode: "/e";
  --more: "/?";
  --pwd: "PWD";
}
body {
  line-height: var(--editor-line-height);
  font-size: var(--the-font-size);
}

.theme-dark {
  --background-primary: var(--the-background-color);
  --background-primary-alt: var(--the-background-color);
  --background-secondary: var(--the-background-color);
  --background-secondary-alt: var(--the-background-color);
  --background-modifier-border: var(--the-color);
  --background-modifier-form-field: rgba(0, 0, 0, 0);
  --background-modifier-form-field-highlighted: rgba(0, 0, 0, 0);
  --background-modifier-box-shadow: rgba(0, 0, 0, 0);
  --background-modifier-cover: rgba(0, 0, 0, 0.8);
  --text-accent: var(--the-color);
  --text-accent-hover: var(--the-color);
  --text-normal: var(--the-color);
  --text-muted: var(--the-color);
  --text-muted-rgb: var(--the-color-rgb);
  --text-faint: var(--the-color);
  --text-on-accent: var(--the-color);
  --interactive-normal: var(--the-background-color);
  --interactive-hover: var(--the-background-color);
  --interactive-accent: var(--the-background-color);
  --interactive-accent-rgb: var(--the-color-rgb);
  --interactive-accent-hover: var(--the-background-color);
  
  /* Untouch */
  --text-highlight-bg: rgba(255, 255, 0, 0.4);
  --text-highlight-bg-active: rgba(255, 128, 0, 0.4);
  --text-selection: rgba(23, 48, 77, 0.99);
  --scrollbar-active-thumb-bg: rgb(255, 255, 255);
  --scrollbar-bg: rgba(255, 255, 255, 0.05);
  --scrollbar-thumb-bg: rgba(255, 255, 255, 0.1);
  --interactive-success: #197300;
  --background-modifier-success: #197300;
  --background-modifier-error: #3d0000;
  --background-modifier-error-rgb: 61, 0, 0;
  --background-modifier-error-hover: #470000;
  --text-error: #ff3333;
  --text-error-hover: #990000;
  --highlight-mix-blend-mode: lighten;
}

/* Buttons/Input/Dropdown */
button,
.checkbox-container,
input[type='text']:not(.prompt-input),
input[type='text']:focus:not(.prompt-input),
input[type='search'],
input[type='email'],
input[type='password'],
input[type='number'] {
  border: solid 1px var(--the-color);
  font-size: var(--the-font-size);
  font-family: var(--the-font);
}
.checkbox-container:after {
  background-color: var(--the-color);
}
.dropdown {
  border: solid 1px var(--the-color);
  font-size: var(--the-font-size);
}

/* Tabs */
.workspace-tab-header-spacer {
  display: none;
}
/* .workspace-tab-header-container {
  justify-content: center;
} */
.mod-root .workspace-tab-header-container-inner {
  margin: 0;
  /* width: 100%; */
  justify-content: center;
  padding-top: 0;
}

.workspace .mod-root .workspace-tab-header:only-child {
  /* width: 300%; */
  max-width: unset;
  background-color: transparent;
  box-shadow: none;
  align-items: center;
  border-left: none;
}
/* .workspace-tab-header:only-child .workspace-tab-header-inner-close-button {
  display: none;
} */
.workspace-tab-header:before,
.workspace-tab-header:after {
  display: none;
}
.mod-root .workspace-tab-header-new-tab,
.mod-root .workspace-tab-header-tab-list {
  display: none;
}
.workspace .mod-root .workspace-tab-header-inner:after {
  display: none;
}

.workspace .mod-root .workspace-tab-header .workspace-tab-header-inner-close-button {
  left: 0px;
  position: absolute;
  right: unset
}
.workspace .mod-root .workspace-tab-header .workspace-tab-header-inner-close-button svg {
  display: none;
}
.workspace .mod-root .workspace-tab-header .workspace-tab-header-inner-close-button:before {
  content: "X";
  padding-left: 5px;
}
.workspace .mod-root .workspace-tab-header.mod-active .workspace-tab-header-inner-close-button:before {
  content: ">";
  font-size: 1.1em;
}

.workspace .mod-root .workspace-tab-header {
  box-shadow: none;
  padding-left: 20px;
  border-radius: 0;
  border-right: 1px solid var(--the-color);
  padding-top: 0;
}

/* STATUS BAR */
.status-bar {
  --status-bar-position: relative;
  --status-bar-radius: 0;
  justify-content: flex-start;
  gap: 0px;
  padding: 0;
  border-left: none;
  border-top: 1px solid var(--the-color);
}
.status-bar > div.status-bar-item {
  border-radius: 0;
  padding: 0;
  padding-left: 5px;
  margin-top: -0.2px;
}
.status-bar > div.status-bar-item:nth-last-child(odd) {
  --status-bar-text-color: var(--the-background-color);
  --status-bar-background: var(--the-color);
  color: var(--status-bar-text-color);
  background-color: var(--status-bar-background);
  border-radius: 0;
}
.status-bar > div.status-bar-item:nth-last-child(even) {
  --status-bar-text-color: var(--the-color);
  --status-bar-background: var(--the-background-color);
}
.status-bar > .status-bar-item:after {
  content: "";
  border-top: calc(0.5 * var(--status-bar-height)) solid var(--status-bar-text-color);
  border-bottom: calc(0.5 * var(--status-bar-height)) solid var(--status-bar-text-color);
  border-left: calc(0.5 * var(--status-bar-height)) solid transparent;
  margin-left: 5px;
}

/* Settings Icon */
.workspace-ribbon.mod-left .side-dock-ribbon-action[aria-label="Settings"]:before {
  content: "\2699";
  font-weight: bold;
  font-size: 1em;
  position: fixed;
  left: 0px;
  bottom: 0px;
  width: 20px;
  height: var(--status-bar-height);
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid var(--icon-color-hover);
}
.workspace-ribbon.mod-left .side-dock-ribbon-action[aria-label="Settings"] {
  opacity: 1;
}
.status-bar {
  margin-left: 20px;
}

/* HIDER */
/* Frameless */
body {
  padding-top: 0 !important;
}
/* Hide ribbon */
.workspace-ribbon.mod-left,
.workspace-ribbon.mod-right {
  /* display: none; */
  flex-basis: 0px;
  border-width: 0px;
}
.workspace-ribbon.mod-left:before {
  display: none;
}
.workspace-split.mod-right-split,
.workspace-split.mod-left-split {
  margin-right:0;
}

.mod-macos {
  --frame-left-space: calc(100px - var(--ribbon-width));
  --frame-right-space: 0px;
}

.sidebar-toggle-button {
  display: none;
}

/* Frameless */
.titlebar-button-container {
  display:none;
}
.titlebar,
.titlebar-inner {
  position:fixed;
  top:0;
  height:12px;
  background:transparent;
}
/* .workspace-split.mod-left-split > .workspace-tabs {
  padding-top:18px;
} */
/* Hide scrollbars */
::-webkit-scrollbar {
  display:none;
}
/* !(temporarily) Hide search suggestions */
.suggestion-container.mod-search-suggestion {
  display: none;
}
/* Hide instructions */
.prompt-instructions {
  display:none;
}

/* EDITOR */
/******************************/
.markdown-source-view.mod-cm5 {
  padding: 0px;
}
.CodeMirror-lines {
  padding-left: 20px;
}
.CodeMirror-line {
  line-height: var(--editor-line-height);
  text-indent: unset !important; /* important added for hard-coded style */
  padding-left: 5px !important;
}
.cm-s-obsidian {
  line-height: var(--editor-line-height);
  font-size: var(--the-font-size);
  font-family: var(--the-font);
  /* ~~top border~~ ! move to .view-header */
  /* border-style: solid;
  border-width: 1px 0px 0px 0px;
  border-color: var(--the-color); */
}

/* Active Line Prompt */
.CodeMirror-activeline .CodeMirror-line:before {
  content: var(--input-prompt);
  position: absolute;
  left: -0.5em;
}

/* Cursor */
.cm-focused .cm-vimCursorLayer .cm-fat-cursor.cm-fat-cursor.cm-fat-cursor {
	background-color: var(--the-color);
}

/* Headers */
.cm-s-obsidian .HyperMD-header {
  padding-bottom: 0;
  line-height: var(--editor-line-height) !important;
}
.cm-header {
  font-size: var(--the-font-size);
}

/* Inline Formats */
.cm-s-obsidian .cm-header, .cm-s-obsidian .cm-strong {
  font-weight: bold;
}
.cm-formatting.cm-formatting-code.cm-inline-code {
  background-color: transparent;
}
.cm-s-obsidian span.cm-inline-code {
  color: var(--the-color);
  font-size: var(--the-font-size);
  font-style: italic;
  font-weight: bold;
}

.cm-s-obsidian span.cm-formatting-highlight,
.cm-s-obsidian span.cm-highlight {
  background-color: unset;
  font-weight: bold;
  font-size: var(--the-font-size);
}

/* List */
.cm-s-obsidian .HyperMD-list-line {
  padding-top: 0px;
  min-height: unset;
}

/* Code block */
.cm-s-obsidian span.cm-inline-code.cm-hmd-indented-code {
  font-style: normal;
}

.cm-s-obsidian .HyperMD-codeblock,
.cm-formatting.cm-formatting-code-block,
.cm-hmd-codeblock {
  color: var(--the-color);
  font-size: var(--the-font-size);
  line-height: var(--editor-line-height);
  font-weight: bold;
}

/* Footnote & Links */
.cm-s-obsidian span.cm-footref,
.cm-s-obsidian span.cm-blockid,
.cm-s-obsidian .HyperMD-footnote span.cm-hmd-barelink {
  display: inline;
  vertical-align: unset;
  margin-top: 0;
  font-size: var(--the-font-size);
}
.cm-s-obsidian span.cm-link.cm-hmd-barelink.cm-footref:not(.cm-formatting-link),
.cm-s-obsidian span.cm-blockid,
.cm-s-obsidian .HyperMD-footnote span.cm-hmd-barelink:not(.cm-formatting-link) {
  font-style: italic;
  text-decoration: underline;
}
.cm-s-obsidian .HyperMD-footnote span.cm-hmd-footnote:not(.cm-formatting-link) {
  text-decoration: underline;
}
/* .cm-s-obsidian span.cm-link.cm-hmd-barelink:not(.cm-formatting-link) {
  font-style: normal;
} */
.cm-s-obsidian .HyperMD-footnote {
  font-size: var(--the-font-size);
}

/* math */
.cm-s-obsidian .cm-math {
  color: var(--the-color);
}

/* Escape char */
.cm-s-obsidian span.cm-hmd-escape-char,
.cm-s-obsidian span.cm-hmd-escape-backslash {
  color: var(--the-color);
}
/******************************/

/* VIEW HEADER */
.view-header {
  flex-wrap: nowrap;
  /* align-items: center; */
}
.workspace-split.mod-root > .workspace-leaf:first-of-type:last-of-type .view-header {
  border-bottom: 1px solid var(--text-accent);
}
.workspace-leaf.mod-active .view-header {
border-width: 0 0 1px 0;
border-color: var(--text-accent);
}
.view-header-title {
  font-size: var(--the-font-size);
  height: var(--header-height);
  display: flex;
  align-items: center;
}
.workspace-split.mod-root > .workspace-leaf:last-of-type .workspace-leaf-content,
.workspace-split.mod-root > .workspace-leaf:first-of-type .workspace-leaf-content {
  border-radius: 0;
}
/* Active Pane Prompt (Header Icon) */
.mod-active .view-header-icon,
.mod-active .view-header-icon:hover {
  background-color: var(--the-color);
  color: transparent;
  font-size: 0;
  padding-right: 0;
  width: calc(4 * var(--char-width));
  min-width: calc(4 * var(--char-width)); /* required for header flex display */
  height: calc(var(--header-height) + 1px);
  top: -1px;
  /* padding-top: 0.25rem !important; */
  border: 1px solid var(--the-color);
  margin-right: 20px;
  border-right: 10px solid transparent;
}
.mod-active .view-header-icon:after {
  content: "";
  position: absolute;
  right: calc(-0.5 * var(--header-height) - 10px); /* 1/2 * header-height + .view-header-icon(border-right) */
  top: 0px;
  width: 0;
  height: 0;
  border-top: calc(0.5 * var(--header-height)) solid transparent;
  border-bottom: calc(0.5 * var(--header-height)) solid transparent;
  border-left: calc(0.5 * var(--header-height)) solid var(--the-color); 
}
.mod-active .view-header-icon:before {
  content: var(--pwd);
  color: var(--the-background-color);
  font-weight: bold;
  font-size: var(--the-font-size);
  position: absolute;
  height: var(--header-height);
  top: 0;
  left: 6px;
  display: flex;
  align-items: center;
  /* margin-right: -10px; */
  /* border: 1px solid var(--the-color); */
}
.view-header-icon,
.view-header-icon:hover {
  color: transparent;
  font-size: 0;
  padding-right: 0;
  width: 3em;
  /* padding-top: 0.25rem !important; */
}

.view-actions {
  padding: 0 10px;
}
.view-action[aria-label="Close"],
.view-action[aria-label="More options"],
.view-action[aria-label*="Preview"],
.view-action[aria-label*="Edit"] {
  color: transparent;
  width: var(--the-font-size);
}
.view-action:before {
  color: var(--the-color);
  font-weight: bold;
  font-size: var(--the-font-size);
  position: relative;
  bottom: 3px;
}
.view-action[aria-label*="Preview"]:before,
.view-action[aria-label*="Edit"]:before,
.view-action.mod-close-leaf:before,
a[aria-label="More options"]:before {
  height: var(--header-height);
  display: flex;
  align-items: center;
  /* bottom: 0; */
}
.view-action[aria-label*="Preview"]:before {
  content: var(--preview-mode);
}
.view-action[aria-label*="Edit"]:before {
  content: var(--edit-mode);
}
.view-action.mod-close-leaf:before {
  content: var(--quit);
}
a[aria-label="More options"]:before {
  content: var(--more);
}

/* PROMPT WINDOW */
.prompt {
  font-size: var(--the-font-size);
  display: unset;
  /* position: absolute; */
  bottom: var(--status-bar-height);
  top: 50%;
  width: 100%;
  max-width: unset;
  max-height: 50%;
  border-style: solid;
  border-width: 1px 0 0px 0;
  border-radius: unset;
  /* padding-top: 9px; */
  padding: 0px 20px;
}
.modal-bg {
  background-color: unset;
}
input {
  font-family: var(--the-font) !important;
}
input.prompt-input {
  font-size: var(--the-font-size);
  padding: 0 0 0 5px; /* same as CodeMirror line */
  border-width: 0;
}
.prompt:before {
  content: var(--input-prompt);
  position: absolute;
  top: calc(20px - 0.5 * var(--editor-line-height) * 1em);
  left: calc(20px - 0.5em);
}
.prompt-results {
  position: absolute;
  top: calc(20px + 1em);
  bottom: 0;
  right: 20px;
  left: 10px;
  /* max-height: 90%; */
  padding-top: 0;
}
.suggestion-item {
  font-size: var(--the-font-size);
  padding: 0 0 0 15px;
  border-width: 0;
  height: calc(var(--editor-line-height) * 1em);
}
/* .is-selected {
  border-style: solid;
  border-color: var(--the-color);
  border-width: 1px 0;
} */
.is-selected:not(.community-theme):before {
  content: var(--selected);
  position: absolute;
  left: calc(-0.5em + 10px); /* 10px = .suggestion-item(border-left) - .CodeMirror-line(border-left) */
  bottom: 1px;
}
.suggestion-flair {
  color: transparent;
  height: 1.5em;
  position: absolute;
  top: 0;
}
.suggestion-item:not(.is-selected) > .suggestion-content + .suggestion-flair:before {
  content: var(--pin-command);
  color: var(--the-color);
  position: absolute;
  left: -0.5em;
  bottom: 0.02em;
}

/* Quick Switcher */
.suggestion-item:not(.is-selected) > .suggestion-flair[aria-label*="Not"]:before {
  content: var(--not-created-note);
  color: var(--the-color);
  position: absolute;
  left: -0.5em;
  /* bottom: 1em; */
}
kbd {
  font-size: var(--the-font-size);
}
.suggestion-hotkey {
  font-family: var(--the-font);
}

/* Suggestion (Slash Command/Link suggestion) */
.suggestion-container {
  max-width: unset;
  left: 0 !important;
  width: 100%;
  height: calc(var(--editor-line-height) * var(--the-font-size) * 8 + 2px);
  border-radius: 0;
  border-width: 1px 0 1px 0;
  padding: 0 10px 0 10px;
  margin-top: -5px;
  box-shadow: none;
}
.suggestion {
  max-height: 100%;
}
.suggestion-item .suggestion-note {
  /* display: none; */
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: var(--the-font-size);
}
/*TODO Position adjustment when window is above */

/* Setting/Store page */
.modal.mod-settings,
.modal.mod-community-plugin,
.modal.mod-community-theme {
  width: 100%;
  height: 100%;
  max-width: unset;
  border-radius: 0;
}
.modal.mod-settings .vertical-tab-header,
.modal.mod-settings .vertical-tab-content-container {
  /* height: 100%; */
  height: 100vh;
  overflow: auto;
  padding: 0;
}
.modal.mod-settings .vertical-tab-header,
.community-plugin-search {
  border-right: 1px solid var(--the-color);
}
.community-theme {
  border: 1px solid var(--the-color)
}
/* Setting Fonts */
.horizontal-tab-nav-item,
.vertical-tab-nav-item,
.setting-item-description,
.setting-item-name {
  font-size: var(--the-font-size);
}
.setting-item-name {
  font-weight: bold;
}
.setting-item-control select {
  max-width: calc(20 * var(--char-width));
}
.setting-item-control button {
  font-size: var(--the-font-size);
}
.setting-hotkey {
  font-size: var(--the-font-size);
  display: flex;
  align-items: center;
}
.mobile-option-setting-item {
  font-size: var(--the-font-size);
}
/* Setting item padding */
.vertical-tab-content {
  padding: 16px 0;
}
.setting-item {
  padding: 18px 30px;
}
.setting-item + .setting-item.setting-item-heading {
  border-top: 1px solid var(--the-color);
}
.community-theme-filters-container,
.hotkey-search-container {
  padding: 10px 30px 30px 30px;
}
.hotkey-list-container {
  padding-right: 0;
}
.setting-item + .setting-item-heading.setting-item:first-child {
  padding-top: 18px;
}
.mobile-option-setting-item {
  padding: 0 30px;
}
/* Active item */
.vertical-tab-nav-item.is-active:before {
  content: var(--selected);
  margin-right: 5px;
}
.vertical-tab-nav-item.is-active {
  padding-left: calc(24px - 5px - var(--char-width));
}
/* Close button */
.modal-close-button {
  top: 4px;
  right: 10px;
  font-size: var(--the-font-size);
}
.modal-close-button::before {
  content: var(--close);
}
/* Store */
.community-plugin-search-summary,
.community-plugin-info .community-plugin-desc,
.community-plugin-item .community-plugin-author,
.community-plugin-item .community-plugin-desc,
.community-plugin-downloads {
  font-size: var(--the-font-size);
}
.community-plugin-item .community-plugin-author,
.community-plugin-name {
  font-weight: bold;
}


/* Title & Heading */
.vertical-tab-header-group-title,
.setting-item.setting-item-heading {
  font-weight: bold;
  text-transform: uppercase;
  font-size: var(--the-font-size);
  padding-left: 24px;
}
/* Slider */
input[type='range']::-webkit-slider-thumb {
  border: 1.5px solid var(--the-color);
}


/* SIDE PANELS */
/********************************************/
.mod-right-split {
  margin-left: -1px;
  border-left: 0.9px solid var(--the-color);
  /* border-bottom: 1px solid var(--the-color); */
}
.mod-left-split {
  border-right: 1px solid var(--the-color);
  /* border-bottom: 1px solid var(--the-color); */
}
/* Hider specific */
/* .hider-frameless .workspace-split.mod-left-split > div.workspace-tabs {
  padding: 0;
} */
.workspace-leaf-resize-handle:not(:hover) {
  background-color: transparent;
}
.workspace-tabs + .workspace-tabs {
  margin-top: -1px;
  border-top: 1px solid var(--the-color);
}
.workspace-tabs {
  padding-right: 0;
}
/* Active tab */
.workspace-tab-header-container {
  padding-top: 2px;
  height: 36.7px; /* should be 36px, but ...*/
  border-bottom: 1px solid var(--the-color);
}
.workspace-tab-container-before {
  /* display: none; */
  width: 5px;
}
.workspace-tab-header.is-active:after {
  content: var(--active-tab);
  color: var(--the-color);
  position: relative;
  top: -12px;
}
.nav-header {
  padding-top: 4px;
}

/* Collapse Icons */
.collapse-icon svg.svg-icon {
  width: 0;
}
.is-collapsed .collapse-icon:before,
.collapse-icon:before {
  color: var(--the-color);
  width: 3px;
  position: relative;
  bottom: 1px;
  font-weight: bold;
}
.is-collapsed .collapse-icon:before {
  content: var(--collapse-right);
}
.collapse-icon:before {
  content: var(--collapse-down);
}

/* Show more content icons */
.search-result-hover-button.mod-top:before,
.search-result-hover-button.mod-bottom:before {
  width: 16px;
  font-size: 13px;
  font-weight: bold;
  position: relative;
  background-color: transparent;
}
.search-result-hover-button.mod-top:before {
  content: var(--show-more-top);
  top: -4px;
}
.search-result-hover-button.mod-bottom:before {
  content: var(--show-more-bottom);
  bottom: -4px
}
.search-result-hover-button.mod-top svg,
.search-result-hover-button.mod-bottom svg {
  width: 0;
}
.search-result-hover-button.mod-bottom,
.search-result-hover-button.mod-top {
  background-color: transparent;
}

/* Search Result */
.search-result-file-match + .search-result-file-match {
  border-top: 0.5px solid var(--the-color);
  border-radius: 0;
}
.search-result-file-match:not(:last-child) {
  margin-bottom: 0;
}
.search-result-file-match:after {
  height: 0;
}

/* Not created files */
div[aria-label*="Not created"]:before {
  content: var(--not-created-note);
  color: var(--the-color);
  position: relative;
  right: 8px;
  bottom: 1px;
  font-weight: bold;
}
div[aria-label*="Not created"] svg {
  width: 0;
}
/********************************************/

/* Workspace (Center Panes) */
.workspace-split.mod-vertical > .workspace-leaf,
.workspace-split.mod-vertical > .workspace-split {
  padding-right: 0;
}
.workspace-split.mod-vertical > .workspace-leaf + .workspace-leaf,
.workspace-leaf + .workspace-split.mod-horizontal,
.workspace-split.mod-horizontal + .workspace-leaf,
.workspace-split.mod-horizontal + .workspace-split.mod-horizontal {
  margin-left: -1px;
  border-left: 1px solid var(--the-color);
}
.workspace-leaf + .workspace-split.mod-vertical,
.workspace-split.mod-horizontal > .workspace-leaf + .workspace-leaf {
  margin-top: -1px;
  border-top: 1px solid var(--the-color);
}
.workspace-split.mod-vertical + .workspace-split.mod-vertical,
.workspace-split.mod-vertical + .workspace-leaf {
  margin-top: -1px;
  border-top: 0.98px solid var(--the-color);
}


/* PAGE PREVIEW */
.popover.hover-popover.is-loaded {
  width: 100%;
  left: 0 !important;
  border-radius: 0;
  border-width: 1px 0;
  border-top: 1px solid var(--the-color);
  border-bottom: 1px solid var(--the-color);
  height: calc(var(--editor-line-height) * var(--the-font-size) * 10);
  /* max-height: unset; */
}
.popover.hover-popover .markdown-embed {
  height: 100%;
}

/* GENERAL PREVIEW */
.markdown-preview-view {
  padding: 20px 20px;
  line-height: var(--editor-line-height);
  font-size: var(--the-font-size);
}
.workspace-leaf-content[data-mode="preview"] .view-content {
  border-top: 1px solid var(--the-color);
}

/* EMBED PREVIEW */
/******************************/
.markdown-embed .markdown-preview-view {
  padding: 0px 25px;
  line-height: var(--editor-line-height);
  font-size: var(--the-font-size);
  font-family: var(--the-font);
}

/* Headers */
.markdown-preview-view h1,
.markdown-preview-view h2,
.markdown-preview-view h3,
.markdown-preview-view h4,
.markdown-preview-view h5,
.markdown-preview-view h6 {
  margin: 0;
  font-size: var(--the-font-size);
}

/* Inline Formats */
.markdown-preview-view p {
  margin: 0;
}
.markdown-preview-view code {
  color: var(--the-color);
  padding: 0;
  font-size: var(--the-font-size);
  font-style: italic;
}

.markdown-preview-view mark {
  background-color: unset;
  font-weight: bold;
}

a:hover {
  color: var(--the-color);
}

.external-link {
  padding-right: 0;
  background: none;
}

/* List */
.markdown-preview-view ul {
  margin: 0;
  padding-inline-start: calc(2 * var(--char-width));
}
.markdown-preview-view ol {
  margin: 0;
  margin-left: var(--char-width);
  padding-inline-start: calc(2 * var(--char-width));
}
.markdown-preview-view ol li {
  padding-inline-start: 0;
}
.markdown-preview-view input.task-list-item-checkbox {
  margin: 0;
  width: calc(6.5 * var(--char-width));
}
.markdown-preview-view .task-list-item-checkbox {
  filter: hue-rotate(290);
}

/* Embed */
span.internal-embed.file-embed.mod-empty.is-loaded {
  margin: -1px;
  border-radius: 0;
  padding: calc(var(--editor-line-height) * var(--the-font-size)) calc(2 * var(--char-width));
}

/* Blockquote */
.markdown-preview-view blockquote {
  border-radius: 0;
  border-left-width: 1px;
  margin: -1px 0;
  padding: calc(var(--editor-line-height) * var(--the-font-size)) calc(2 * var(--char-width));
}

.markdown-rendered blockquote,
.publish-renderer blockquote {
  /* 1. 外観（マージン、パディング）をコードブロックに合わせる */
  margin: 1.5em 0 !important;
  padding: 24px !important;
  line-height: var(--editor-line-height) !important;
  
  /* 2. 背景色と枠線をコードブロック（またはテーマの標準）に合わせる */
  background-color: var(--background-secondary) !important; 
  border: 1px solid var(--background-modifier-border) !important;
  /* 引用特有の左側の太い線を解除し、全周を均一な枠線にする */
  border-left: 1px solid var(--background-modifier-border) !important; 
  border-radius: 0px !important; /* ターミナル風のテーマに合わせて角を四角に */

  /* 3. 文字のスタイルをコードブロック（code）の設定と同期 */
  font-family: var(--the-font) !important;
  color: #696969 !important;  
  font-weight: 550 !important; 
  font-style: italic !important;
}

/* 引用内の段落（pタグ）の固有マージンや文字設定をリセット */
.markdown-rendered blockquote p,
.publish-renderer blockquote p {
  margin: 0 !important;
  color: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  font-style: inherit !important;
}

/*.markdown-source-view.mod-cm6.is-live-preview .HyperMD-quote:before {*/
    /*left: unset;*/
/*}*/
.markdown-source-view.mod-cm6.is-live-preview .HyperMD-quote:before, .markdown-source-view.mod-cm6 .cm-blockquote-border:before {
    /*content: "|";*/
    /*color: var(--the-color);*/
    /*border: none;*/
    border-color: var(--the-color);
}

.markdown-rendered pre,
.markdown-rendered pre[class*="language-"],
.publish-renderer pre {
  margin: 1.5em 0 !important;
  padding: 24px !important;
  line-height: var(--editor-line-height) !important;
}

.markdown-rendered code,
.markdown-rendered code[class*="language-"],
.publish-renderer code {
  /* 本文と同じフォントを強制適用 */
  font-family: var(--the-font) !important;
  
  /* 文字のスタイル：濃いグレーかつ少し太め */
  color: #696969 !important;  /* 濃いグレー */
  font-weight: 550 !important; 
  
  font-style: italic !important;
  line-height: var(--editor-line-height) !important;
  background-color: transparent !important;
}

/* Table */
.markdown-preview-view table {
  margin: 0;
}
.markdown-preview-view th, .markdown-preview-view td {
  padding: 0 var(--char-width);
}

/* Footnote */
sup {
  vertical-align: unset;
  font-size: var(--the-font-size);
}

/* hr */
.markdown-preview-view hr {
  margin: 0;
  margin-top: calc(var(--editor-line-height) * var(--the-font-size));
  height: calc(var(--editor-line-height) * var(--the-font-size));
}

/* Metadata */
.frontmatter-container {
  padding: calc(var(--editor-line-height) * var(--the-font-size)) calc(2 * var(--char-width));
  border-radius: 0;
  font-size: var(--the-font-size);
  margin: -1px 0;
}
.frontmatter-container .frontmatter-container-header {
  font-size: var(--the-font-size);
  margin: 0 0 -1px 0;
}
.frontmatter-container .frontmatter-collapse-indicator:before {
  font-weight: normal;
}
.frontmatter-container .frontmatter-section {
  margin: 0;
}
.frontmatter-container .tag,
.frontmatter-container .frontmatter-alias {
  font-size: var(--the-font-size);
  border-radius: 0;
  padding: 0 0;
  margin: 0 var(--char-width);
  line-height: var(--editor-line-height);
  border-width: 0;
  background-color: transparent;
}
.frontmatter-container .mod-aliases .frontmatter-section-label {
  flex-basis: calc(8 * var(--char-width));
}
.frontmatter-container .mod-tags .frontmatter-section-label {
  flex-basis: calc(5 * var(--char-width));
}
.frontmatter-container .frontmatter-alias-icon {
  width: var(--char-width);
  margin-right: 0;
}
.frontmatter-container .frontmatter-alias-icon > svg {
  width: 10px !important;
}
/******************************/

/* Graph View */
canvas {
  border-top: 1px solid var(--the-color) !important;
}
.theme-dark .graph-view.color-fill-tag,
.theme-dark .graph-view.color-fill-attachment {
  color: var(--the-color);
  opacity: 0.6;
}
.graph-view.color-fill-focused {
  color: var(--the-color);
}

/* Search result matched color */
.search-result-file-matched-text,
.cm-s-obsidian span.obsidian-search-match-highlight,
.markdown-preview-view .search-highlight > div,
.markdown-preview-view .search-highlight > div.is-active {
  background-color: unset;
  border: 1px solid var(--the-color);
  mix-blend-mode: normal;
}
.cm-s-obsidian span.obsidian-search-match-highlight,
.search-result-file-matched-text {
  margin: -1px;
}

/* GUTTER */
.CodeMirror-foldgutter-open:after {
  content: var(--collapse-down);
  font-size: var(--the-font-size);
}
.CodeMirror-foldgutter-folded:after {
  content: var(--collapse-right);
  font-size: var(--the-font-size);
}
.CodeMirror-foldgutter-open,
.CodeMirror-foldgutter-folded {
  font-size: var(--the-font-size);
  display: flex;
  align-items: center;
}
/* Move gutter to the left */
/* And keep gutter 4-char-width for line number, */
/* keep gutter 1-char-width for gutter only */
.CodeMirror-linenumber {
  min-width: none;
  width: calc(3 * var(--char-width)) !important;
  padding: 0;
}
.CodeMirror-gutter.CodeMirror-linenumbers {
  width: calc(3 * var(--char-width)) !important;
}
.CodeMirror-sizer[style*="margin-left: 3"],  /* line number only */
.CodeMirror-sizer[style*="margin-left: 4"] { /* line number + gutter */
  margin-left: calc(4 * var(--char-width)) !important;
}
.CodeMirror-sizer[style*="margin-left: 1"] { /* gutter only */
  margin-left: calc(1 * var(--char-width)) !important;
}
.CodeMirror-sizer[style*="margin-left: 3"] .CodeMirror-gutter-wrapper,
.CodeMirror-sizer[style*="margin-left: 4"] .CodeMirror-gutter-wrapper {
  left: calc(-30px - 2 * var(--char-width)) !important;
}
.CodeMirror-sizer[style*="margin-left: 1"] .CodeMirror-gutter-wrapper {
  left: calc(-2 * var(--char-width)) !important;
}
.CodeMirror-gutters {
  left: var(--char-width) !important;
}

/* Preview folding */
.markdown-preview-view.allow-fold-heading,
.markdown-preview-view.allow-fold-lists {
  padding-left: 30px;
}
.markdown-preview-view ul > li > .list-collapse-indicator {
  padding-left: 14px;
  padding-top: 2px;
}
.markdown-preview-view ol > li > .list-collapse-indicator {
  padding-left: 2px;
  padding-top: 0.5px;
}
.markdown-preview-view li.task-list-item .list-collapse-indicator {
  padding-left: 12px;
  padding-top: 0.5px;
}

/* Search */
.document-search-container,
.document-search-container.mod-replace-mode {
  height: auto;
  padding: 0 5px;
  border-top: 0;
}
.document-search,
.document-replace {
  height: calc(var(--editor-line-height) * var(--the-font-size));
}
.search-input-container > input,
.document-search > input[type='text'],
.document-search > input[type='text']:focus,
.document-search > input[type='text']:hover,
.document-replace > input[type='text'],
.document-replace > input[type='text']:focus,
.document-replace > input[type='text']:hover {
  border-width: 0;
  padding: 0 14px 1px 12px;
  background-color: var(--background-primary);
  height: calc(var(--editor-line-height) * var(--the-font-size));
  margin: 0 8px;
}
.document-search > .document-search-buttons:before {
  content: var(--search);
  position: absolute;
  font-size: var(--the-font-size);
  left: 15px;
}
.document-replace > .document-replace-buttons:before {
  content: var(--replace);
  position: absolute;
  font-size: var(--the-font-size);
  left: 15px;
}
button.document-search-button {
  font-size: 0;
  border: none;
  margin-top: 0;
  padding-bottom: 4px;
}
button.document-search-button:before {
  font-size: var(--the-font-size);
}
button.document-search-button[aria-label='Shift + F3']:before {
  content: var(--prev);
}
button.document-search-button[aria-label='Enter or F3']:before {
  content: var(--next);
}
button.document-search-button[aria-label='Enter']:before {
  content: var(--next);
}
button.document-search-button:not([aria-label]):before {
  content: var(--all);
}
.document-search-close-button:before {
  content: var(--close);
  font-size: var(--the-font-size);
}
.document-search-close-button {
  top: unset;
}
.document-replace-buttons {
  margin-right: 18px;
}

/* Global search close button */
.search-input-clear-button:before {
  content: var(--close);
  font-size: var(--the-font-size);
  position: relative;
  bottom: 2px;
  right: -12px;
}

/* Empty State */
.empty-state-container:after {
  content: "---------------------------------\A                     \\   ^__^\A                      \\  (oo)\\_______\A                         (__)\\        )\\/\\\A                             ||----w |\A                             ||     ||";
  white-space: pre;
}
.empty-state-title {
  margin-top: 0;
}
/* Empty right sidebar */
.mod-right-split .u-muted:before {
  content: "\A\A    |\\__/,|   (`\\\A  _.|o o  |_   ) )\A-(((---(((--------\A";
  white-space: pre;
}
.mod-left-split .u-muted:before {
  content: "    /\\___/\\\A     `)9 9('\A     {_:Y:.}_\A----( )U-'( )----------\A     ```   '''\A";
  white-space: pre;
}
.suggestion-empty {
  font-size: var(--the-font-size);
  line-height: calc(0.8 * var(--editor-line-height));
}
.suggestion-empty:before {
  content: ' _      _      _\A __(.)< __(.)> __(.)=\A \\___)  \\___)  \\___) \A';
  white-space: pre;
}
div.search-empty-state {
  font-size: var(--the-font-size);
  line-height: calc(0.8 * var(--editor-line-height));
}
div.search-empty-state:before {
  content: '        (\\ /)\A        ( . .)\A        c(")(")\A';
  white-space: pre;
  font-style: italic;
  letter-spacing: -3px;
}


/* Notice */
.notice {
  border: 1px solid var(--the-color);
}
.modal:not(.mod-settings):not(.mod-community-plugin):not(.mod-community-theme) {
  border: 1px solid var(--the-color);
}

/* TOGGLE */
/* .checkbox-container,
.checkbox-container:after {
  border: none;
  box-shadow: none;
  color: transparent;
  background-color: transparent;
}
.checkbox-container:before {
  white-space: pre;
  color: var(--the-color);
  opacity: 1;
  position: absolute;
  top: -11px;
  left: -31px;
  font-weight: bold;
}
.checkbox-container:not(.is-enabled):before {
  content: "____\A     O___)";
}
.checkbox-container.is-enabled:before {
  content: "____\A    (###O";
} */
/* BUTTON */
/* button {
  border: none;
}
button:before, button:after,
button:focus:before, button:focus:after {
  font-weight: bold;
}
button:before {
  content: "[";
}
button:after {
  content: "]"
}
button:focus:before {
  content: ">"
}
button:focus:after {
  content: "<"
} */

/* TABS */
/* .plugin-tabs .mod-root.workspace-split.mod-vertical div.workspace-split.mod-vertical > div.workspace-leaf.stayopen,
.plugin-tabs div.mod-root.workspace-split.mod-vertical > div.workspace-leaf.stayopen,
.plugin-tabs .mod-root.workspace-split.mod-vertical div.workspace-split.mod-vertical > div.workspace-leaf.mod-active,
.plugin-tabs div.mod-root.workspace-split.mod-vertical > div.workspace-leaf.mod-active {
  height: var(--headerheight);
  min-height: unset;
  top: 0;
  min-width: var(--w1);
  max-width: var(--w2);
  flex-grow: 1;
  flex-shrink: 1;
  align-self: unset;
  position: unset;
  contain: unset;
  display: unset;
}
.plugin-tabs .workspace-leaf.mod-active.stayopen .workspace-leaf-content {
  contain: unset !important;
  position: absolute !important;
  display: unset !important;
}
.plugin-tabs .workspace-leaf.mod-active.stayopen .workspace-leaf-content .view-content {
  position: absolute;
  align-self: stretch;
  bottom: 0;
  left: 0;
  order: 99;
  min-width: 100%;
  max-width: 100%;
  min-height: calc(100% - var(--headerheight) * var(--rows));
  overflow-y: hidden;
  padding-right: 1px;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
} */

/* TEST FILED */
/* Fix dettached PWD */
/* .workspace-leaf.mod-active {
  contain: none;
  margin-left: -1px;
}
.workspace-leaf.mod-active:before {
  content: "";
  position: absolute;
  top: 0;
  left: -1px;
  border-style: solid;
  border-width: var(--header-height) 0px 0px 1px;
  border-color: var(--the-color);
  z-index: 9999;
}
.workspace-leaf.mod-active .view-header:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0px;
  border-style: solid;
  border-width: var(--header-height) 0px 0px 1px;
  border-color: var(--the-color);
  z-index: 9999;
} */



/* 段落間の余白を調整 */
.markdown-rendered p {
    margin-top: 1.8em !important;
    margin-bottom: 1.8em !important;
}

/* 空行（連続した改行）が消えないようにする設定 */
.markdown-rendered br {
    content: "";
    display: block;
    margin-top: 1em;
}

/* サイト全体の行間（文章の密度）を調整 */
body {
    --editor-line-height: 1.8 !important; /* 標準の1.3から1.8に変更 */
}

/* プレビューおよびPublish環境の行間を個別に指定する場合 */
.markdown-rendered {
    line-height: 1.8 !important;
}

/* リスト（箇条書き）の間隔も少し広げるとさらに読みやすくなります */
.markdown-rendered li {
    margin-bottom: 0.5em;
}



/* 1. プレイヤー全体の土台 */
.markdown-rendered audio {
    filter: none !important;
    background-color: #ffffff !important;
    border: 1px solid #000000 !important;
    border-radius: 8px !important;
    width: 100% !important;
    height: 40px !important;
    color-scheme: light !important;
}

/* 2. 内部パネルの背景を強制的に白にする */
audio::-webkit-media-controls-enclosure,
audio::-webkit-media-controls-panel {
    background-color: #ffffff !important;
}

/* 3. 再生時間等のテキストを黒にする */
audio::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-time-remaining-display {
    color: #000000 !important;
    text-shadow: none !important;
}

/* 4. 3点リーダーを含む全ボタン・全パーツを強制的に黒くする */
/* brightness(0) で見えない場合は invert(1) を試すため、より広範囲なセレクタを使用します */
audio::-webkit-media-controls-play-button,
audio::-webkit-media-controls-mute-button,
audio::-webkit-media-controls-timeline,
audio::-webkit-media-controls-volume-slider,
audio::-webkit-media-controls-overflow-button,
audio::-internal-media-controls-overflow-button, /* 内部名称の予備 */
audio::-webkit-media-controls-button {
    filter: brightness(0) !important;
    -webkit-filter: brightness(0) !important;
}

/* 5. 一部のブラウザで3点リーダーが隠れる現象への対策 */
audio::-webkit-media-controls-settings-button {
    display: block !important;
    filter: brightness(0) !important;
}

/* --- 見出し領域（明朝体・太字） --- */
.markdown-rendered h1,
.markdown-rendered h2,
.markdown-rendered h3,
.markdown-rendered h4,
.markdown-rendered h5,
.markdown-rendered h6,
.publish-renderer h1,
.publish-renderer h2,
.publish-renderer h3 {
  font-family: var(--header-font) !important;
  font-weight: 700 !important; /* 見出しは常に太字 */
  color: var(--the-color) !important;
  margin-top: 1.5em;
  margin-bottom: 0.1em;
}

/* 各レベルのサイズ指定（エディタの標準的な比率に合わせています） */
/* お好みのサイズ感に合わせて数値を微調整してください */
.markdown-rendered h1 { font-size: 2.0em !important; }
.markdown-rendered h2 { font-size: 1.5em !important; }
.markdown-rendered h3 { font-size: 1.25em !important; }
.markdown-rendered h4 { font-size: 1.1em !important; }
.markdown-rendered h5 { font-size: 1em !important; }
.markdown-rendered h6 { font-size: 1em !important; }

/* ターミナル風テーマの「h2だけ中央寄せ」などを解除したい場合は以下も追加 */
.markdown-rendered h1, 
.markdown-rendered h2 {
    text-align: left !important;
}


/* --- リンクの色指定 --- */

/* 内部リンク（Internal Link）の色 */
.markdown-rendered .internal-link {
    color: #03588C !important;
    text-decoration: underline; /* リンクであることを強調する場合 */
}

/* 外部リンク（External Link）の色 */
.markdown-rendered .external-link {
    color: #F20530 !important;
    text-decoration: underline;
}

/* ホバー時（マウスを乗せた時）の色の変化（お好みで調整してください） */
.markdown-rendered .internal-link:hover,
.markdown-rendered .external-link:hover {
    opacity: 0.8;
    filter: brightness(1.2);
}

/* --- テキスト選択時のハイライト色設定 --- */

/* Publish公開サイト用 */
::selection {
    background-color: #d2f205 !important;
}

/* Obsidianアプリのエディタ（編集画面）用 */
.cm-s-obsidian .CodeMirror-selected {
    background-color: #d2f205 !important;
}

/* ライブプレビュー等のレンダリング済み画面用 */
.markdown-rendered ::selection {
    background-color: #d2f205 !important;
}





/* --- レスポンシブ・カードレイアウト（全体リンク版） --- */

.vault-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 10px;
    margin: 20px 0;
}

/* カード本体を A タグにするための設定 */
a.vault-card {
    text-decoration: none !important; /* リンクの下線を消す */
    color: inherit !important;      /* 文字色を継承 */
    border: 1px solid var(--the-color);
    border-radius: 0px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-color: transparent;
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%, 0 100%);
    transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, clip-path 0.25s ease !important;
}



/* 画像エリア：高さを 360px に変更 */
.vault-card img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-bottom: 1px solid var(--the-color);
    margin: 0 !important;
    border-radius: 0px !important;
}

.vault-card-content {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vault-card-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* タイトルがリンク色（青）にならないように上書き */
.vault-card-title h3 {
    margin: 0 !important;
    font-size: 1.2rem !important;
    line-height: 1.4;
    color: var(--the-color) !important; 
}


/* --- 手動管理型メディアサイト化CSS（左下記事消去 ＆ 右側目次維持版） --- */

/* 1. 左カラムの元のファイル・フォルダ一覧（ルートに溢れる記事一覧）を確実に非表示にする */
.site-body-left-column .nav-view .nav-folder,
.site-body-left-column .nav-view .nav-file,
.site-body-left-column .nav-view .tree-item,
.site-body-left-column .nav-view .nav-container > div:not(.custom-tag-menu):not(.search-input-container) {
    display: none !important;
}

/* 2. 左の固定属性メニューのスタイリング */
.custom-tag-menu {
    padding: 20px 10px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.custom-menu-item {
    display: block !important;
    font-family: var(--header-font) !important;
    font-size: 1.1em !important;
    font-weight: 700 !important;
    color: var(--the-color) !important;
    text-decoration: none !important;
    padding: 6px 12px;
    border: 1px solid transparent;
    transition: all 0.2s ease;
}
.custom-menu-item:hover {
    border: 1px solid var(--the-color);
    background-color: rgba(0,0,0,0.02);
}


/* --- 手動管理型・横長リストレイアウト（左サムネ ＆ 右情報 ＆ 日付・タグ縦並び完全統合版） --- */

/* 1. 縦に1列で並ぶリストの土台 */
.custom-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin: 20px 0 !important;
}

/* 2. 横長の行全体（リンクエリア） */
a.custom-card {
    text-decoration: none !important;
    color: inherit !important;
    border-bottom: 1px solid var(--the-color) !important; /* 各行を分ける下線 */
    border-radius: 0px !important;
    padding: 20px 0 !important;
    display: flex !important;
    flex-direction: row !important; /* 左にサムネ、右にテキストを横並びにする */
    align-items: flex-start !important;
    background-color: transparent !important;
    position: relative !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
    clip-path: none !important;
}

/* ホバー時はシンプルに背景をわずかにトーン変更 */
a.custom-card:hover {
    background-color: rgba(0, 0, 0, 0.015) !important;
}

/* 3. 左側の小さなサムネイル画像（サイズはお好みに合わせてあります） */
.custom-card img {
    width: 180px !important;       
    height: 120px !important;       
    object-fit: cover !important;
    margin: 0 20px 0 0 !important; /* 右側のテキストとの間の余白 */
    border: 1px solid var(--the-color) !important; /* サムネイルを締める薄い枠線 */
    border-radius: 0px !important;
    flex-shrink: 0 !important;     /* 画面が狭くなっても画像が潰れないように固定 */
}

/* 4. 右側のテキスト情報エリア（上から順に縦並びにする設定） */
.custom-card-content {
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    flex-grow: 1 !important;
}

/* 【1段目】日付のスタイル */
.custom-card-date {
    font-size: 0.8rem !important;
    color: #696969 !important; /* 落ち着いた濃いグレー */
    font-family: var(--font-body) !important;
    margin: 0 0 2px 0 !important; /* 下のタグとの隙間 */
}

/* 【2段目】タグが並ぶコンテナ（日付の下で横並びにする） */
.custom-card-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;         /* タグとタグの間の隙間 */
    margin: 0 0 6px 0 !important; /* 下のタイトルとの隙間 */
    padding: 0 !important;
}

/* タグ単体の文字スタイル */
.custom-card-tag {
    font-size: 0.8rem !important;
    color: #696969 !important;
    font-family: var(--font-body) !important;
    font-weight: 550 !important;  /* ほんの少しだけ太めにしてニュアンスを出す */
}

/* 【3段目】タイトル */
.custom-card-title {
    font-family: var(--header-font) !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    color: var(--the-color) !important;
}

/* 【4段目】記事のリード文・説明文 */
.custom-card-excerpt {
    margin: 2px 0 0 0 !important;
    font-size: 0.9rem !important;
    color: var(--the-color) !important;
    opacity: 0.8 !important;
    line-height: 1.6 !important;
}

/* 検索結果の親要素を縦並びに強制 */
.search-results .suggestion-content {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    gap: 6px !important; /* 各項目の行間スペース */
}

/* 子要素（タイトル・詳細・ノート）の絶対配置と重なりを解除 */
.search-results .suggestion-content > div {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    height: auto !important;
    line-height: 1.5 !important;
    white-space: normal !important; /* 長いテキストの折り返しを許可 */
}