@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

:root {
  --sc-bg: #F0EEE9;
  --sc-text: #2B2C30;
  --sc-gray: #656665;
  --sc-accent: #E3CC81;
  --sc-line: rgba(43, 44, 48, 0.14);
  --sc-font: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
             "Noto Sans KR", "Malgun Gothic", sans-serif;

  
  --sc-heart-outline: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 20.3C5.6 15.6 3 12.4 3 9c0-2.5 1.9-4.4 4.3-4.4 1.8 0 3.5 1 4.7 2.9 1.2-1.9 2.9-2.9 4.7-2.9C19.1 4.6 21 6.5 21 9c0 3.4-2.6 6.6-9 11.3z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/></svg>");
  --sc-heart-filled: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 20.3C5.6 15.6 3 12.4 3 9c0-2.5 1.9-4.4 4.3-4.4 1.8 0 3.5 1 4.7 2.9 1.2-1.9 2.9-2.9 4.7-2.9C19.1 4.6 21 6.5 21 9c0 3.4-2.6 6.6-9 11.3z' fill='black' stroke='black' stroke-width='2' stroke-linejoin='round'/></svg>");
  --sc-mail-outline: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='3' y='5' width='18' height='14' rx='2.5' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/><path d='M3.8 7.4l8.2 6.2 8.2-6.2' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  --sc-mail-filled: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 9.4V16.5A2.5 2.5 0 0 0 5.5 19h13a2.5 2.5 0 0 0 2.5-2.5V9.4L12 16z' fill='black'/><path d='M5.5 5h13a2.5 2.5 0 0 1 2.1 1.1L12 13.4 3.4 6.1A2.5 2.5 0 0 1 5.5 5z' fill='black'/></svg>");
}

:root,
body,
body[class*="theme"] {
  --color-bg-primary: #F0EEE9 !important;
  --color-bg-secondary: #F0EEE9 !important;
  --color-bg-tertiary: #E8E5DE !important;
  --color-bg-elevated: #F0EEE9 !important;
  --color-bg-brand-base: #E3CC81 !important;
  --color-bg-brand-base-hover: #D6BC66 !important;
  --color-bg-brand-softer: rgba(227, 204, 129, 0.3) !important;
  --color-bg-brand-soft: rgba(227, 204, 129, 0.45) !important;
  --color-text-primary: #2B2C30 !important;
  --color-text-secondary: #656665 !important;
  --color-text-tertiary: #656665 !important;
  --color-text-brand: #2B2C30 !important;
  --color-text-brand-soft: #656665 !important;
  --color-text-on-brand-base: #2B2C30 !important;
  --color-border-primary: rgba(43, 44, 48, 0.14) !important;
}

body,
body button,
body input,
body textarea,
body select,
.button,
.ui {
  font-family: var(--sc-font) !important;
}

body,
.ui,
.columns-area,
.columns-area__panels,
.columns-area__panels__pane__inner,
.drawer,
.drawer__inner,
.column,
.column > .scrollable,
.scrollable,
.status,
.status__wrapper,
.detailed-status,
.empty-column-indicator,
.error-column,
.account__section-headline,
.notification__filter-bar,
.conversation,
.account,
.notification,
.notification-group {
  background: var(--sc-bg) !important;
  color: var(--sc-text) !important;
}

.column-header,
.column-header__wrapper,
.column-header__buttons,
.column-header__collapsible,
.column-header__collapsible-inner,
.column-header__collapsible.collapsed,
.column-header__collapsible.animating,
.column-header__setting-btn,
.column-settings,
.column-settings__row,
.column-settings__section,
.column-settings__hashtags,
.column-header__back-button,
.column-back-button,
.column-back-button__button,
.tabs-bar__wrapper,
.dropdown-menu,
.dropdown-menu__container__list,
.privacy-dropdown__dropdown,
.emoji-picker-dropdown__menu,
.emoji-mart,
.emoji-mart-bar,
.emoji-mart-search input,
.modal-root__modal,
.dialog-modal,
.dialog-modal__content,
.actions-modal,
.boost-modal,
.confirmation-modal,
.report-modal,
.picture-in-picture__footer,
.search__popout,
.compose-form__modifiers,
.poll,
.reply-indicator,
.autosuggest-textarea__suggestions {
  background: var(--sc-bg) !important;
  color: var(--sc-text) !important;
  border-color: var(--sc-line) !important;
}

.column-header__title,
.column-header__button,
.column-settings__row .setting-toggle__label,
.column-settings__section,
.column-settings label,
.setting-toggle__label,
.column-back-button {
  color: var(--sc-text) !important;
}

.column-settings__section,
.setting-toggle__label {
  color: var(--sc-gray) !important;
}

.status__relative-time,
.display-name__account,
.empty-column-indicator,
.account__header__tabs__name small,
.character-counter,
.column-header__title small,
.conversation__content__relative-time {
  color: var(--sc-gray) !important;
}

.column,
.column-header,
.compose-form,
.compose-form__highlightable,
.status,
.conversation,
.account,
.notification,
.column-link,
.search__input,
.account__section-headline,
.notification__filter-bar,
hr {
  border-color: var(--sc-line) !important;
}

a,
.status__content a,
.status__content a:not(.mention):not(.hashtag),
.detailed-status__link,
.account__header__content a,
.link-button,
.text-btn,
a.status-link {
  color: var(--sc-text) !important;
}
.status__content a:not(.mention):not(.hashtag),
.account__header__content a {
  text-decoration: underline;
}
a:hover,
.link-button:hover {
  color: var(--sc-gray) !important;
}
.mention span,
.hashtag span {
  color: var(--sc-text) !important;
  font-weight: 700;
}

.react-toggle-track { background: var(--sc-gray) !important; }
.react-toggle--checked .react-toggle-track { background: var(--sc-accent) !important; }
.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track { background: #4f504f !important; }
.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track { background: #D6BC66 !important; }
.react-toggle-thumb { background: var(--sc-bg) !important; border-color: transparent !important; }
.react-toggle--checked .react-toggle-thumb { background: var(--sc-text) !important; }
.react-toggle--focus .react-toggle-thumb { box-shadow: 0 0 0 2px var(--sc-accent) !important; }

.account__section-headline a,
.notification__filter-bar button,
.tabs-bar__link {
  color: var(--sc-gray) !important;
}
.account__section-headline a.active,
.notification__filter-bar button.active,
.tabs-bar__link.active,
.column-header__button.active,
.column-header.active .column-header__title {
  color: var(--sc-text) !important;
  background: transparent !important;
  border-color: var(--sc-accent) !important;
}
.account__section-headline a.active::before,
.account__section-headline a.active::after,
.notification__filter-bar button.active::before,
.notification__filter-bar button.active::after {
  border-color: transparent transparent var(--sc-accent) !important;
}

.conversation--unread,
.notification-group--unread,
.status__wrapper--unread {
  background: rgba(227, 204, 129, 0.35) !important;
  color: var(--sc-text) !important;
}
.conversation--unread::before,
.notification-group--unread::before {
  background: transparent !important;
  border-inline-start-color: var(--sc-text) !important;
}
.unread-indicator,
.icon-with-badge__badge,
.badge {
  background: var(--sc-accent) !important;
  color: var(--sc-text) !important;
}

.icon-button,
.text-icon-button { color: var(--sc-gray) !important; }
.icon-button:hover,
.icon-button:focus,
.text-icon-button:hover { color: var(--sc-text) !important; background: rgba(227, 204, 129, 0.35) !important; }
.icon-button.active,
.icon-button.activated { color: var(--sc-text) !important; }

.search__input,
.compose-form__highlightable,
.compose-form .autosuggest-textarea__textarea,
.compose-form .spoiler-input__input,
input[type="text"],
input[type="search"],
textarea {
  background: rgba(255, 255, 255, 0.45) !important;
  color: var(--sc-text) !important;
}
.search__input::placeholder,
.autosuggest-textarea__textarea::placeholder,
textarea::placeholder,
input::placeholder {
  color: var(--sc-gray) !important;   
}

.button,
.compose-form__publish .button,
button.button {
  background: var(--sc-accent) !important;
  color: var(--sc-text) !important;
  border-radius: 8px;
  font-weight: 700;
}
.button:hover,
.button:focus,
.button:active {
  background: var(--sc-text) !important;
  color: var(--sc-accent) !important;
}
.button.button-secondary,
.button.button--secondary {
  background: transparent !important;
  color: var(--sc-text) !important;
  border: 1px solid var(--sc-text) !important;
}

.column-link { color: var(--sc-text) !important; }
.column-link:hover,
.column-link:focus {
  background: rgba(227, 204, 129, 0.35) !important;
  color: var(--sc-text) !important;
}
.column-link.active,
.column-link--transparent.active {
  color: var(--sc-text) !important;
  background: var(--sc-accent) !important;
  border-radius: 8px;
}
.column-link .icon,
.column-link svg { color: inherit !important; }

::selection { background: var(--sc-accent); color: var(--sc-text); }

.compose-form button,
.compose-form .icon-button,
.compose-form__actions .icon-button,
.compose-form__buttons button,
.compose-form__dropdowns button,
.compose-form .dropdown-button,
.dropdown-button,
.compose-form__dropdown,
.compose-form .text-icon-button,
.compose-form__footer button,
.compose-form__actions button:not(.button) {
  color: var(--sc-text) !important;
  border-color: var(--sc-text) !important;
  background-color: transparent !important;
}
.compose-form .icon-button:hover,
.compose-form .dropdown-button:hover,
.compose-form__buttons button:hover {
  color: var(--sc-gray) !important;
  border-color: var(--sc-gray) !important;
  background-color: rgba(227, 204, 129, 0.35) !important;
}
.compose-form .icon-button.active,
.compose-form .dropdown-button.active { color: var(--sc-text) !important; }
.compose-form .button,
.compose-form__publish .button {   
  background: var(--sc-accent) !important;
  color: var(--sc-text) !important;
  border: none !important;
}
.compose-form svg { fill: currentColor; }

.columns-area__panels { display: flex !important; }
.columns-area__panels__pane--navigational { order: 1 !important; justify-content: flex-start !important; }
.columns-area__panels__main { order: 2 !important; }
.columns-area__panels__pane--compositional { order: 3 !important; justify-content: flex-end !important; }

.navigation-panel__logo .column-link--logo,
.column-link--logo {
  position: relative;
  background: transparent !important;
  min-height: 48px;
}
.navigation-panel__logo svg,
.column-link--logo svg,
.column-link--logo .logo { display: none !important; }

/* 임시 버튼 */
.column-link--logo::after {
  content: "SCHISM";
  font-family: var(--sc-font);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--sc-text);
}
.column-link--logo:hover::after { color: var(--sc-gray); }
/*
.column-link--logo::after {
  content: "";
  display: block;
  width: 160px;
  height: 44px;
  background: url("파일명.png") no-repeat left center / contain;
}
*/

.column-link[href="/favourites"] svg,
.column-link[href="/conversations"] svg,
.column-link[href="/direct"] svg {
  background-color: currentColor !important;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.column-link[href="/favourites"] svg > *,
.column-link[href="/conversations"] svg > *,
.column-link[href="/direct"] svg > * { display: none !important; }

.column-link[href="/favourites"] svg { -webkit-mask-image: var(--sc-heart-outline); mask-image: var(--sc-heart-outline); }
.column-link[href="/favourites"].active svg { -webkit-mask-image: var(--sc-heart-filled); mask-image: var(--sc-heart-filled); }
.column-link[href="/conversations"] svg,
.column-link[href="/direct"] svg { -webkit-mask-image: var(--sc-mail-outline); mask-image: var(--sc-mail-outline); }
.column-link[href="/conversations"].active svg,
.column-link[href="/direct"].active svg { -webkit-mask-image: var(--sc-mail-filled); mask-image: var(--sc-mail-filled); }

.columns-area__panels:has(.column-link[href="/favourites"].active) .column-header__title svg,
.columns-area__panels:has(.column-link[href="/conversations"].active) .column-header__title svg,
.columns-area__panels:has(.column-link[href="/direct"].active) .column-header__title svg {
  background-color: currentColor !important;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.columns-area__panels:has(.column-link[href="/favourites"].active) .column-header__title svg > *,
.columns-area__panels:has(.column-link[href="/conversations"].active) .column-header__title svg > *,
.columns-area__panels:has(.column-link[href="/direct"].active) .column-header__title svg > * {
  display: none !important;
}
.columns-area__panels:has(.column-link[href="/favourites"].active) .column-header__title svg {
  -webkit-mask-image: var(--sc-heart-filled); mask-image: var(--sc-heart-filled);
}
.columns-area__panels:has(.column-link[href="/conversations"].active) .column-header__title svg,
.columns-area__panels:has(.column-link[href="/direct"].active) .column-header__title svg {
  -webkit-mask-image: var(--sc-mail-filled); mask-image: var(--sc-mail-filled);
}

.icon-button.star-icon svg,
.status__action-bar .star-icon svg,
.detailed-status__action-bar .star-icon svg {
  background-color: currentColor !important;
  -webkit-mask: var(--sc-heart-outline) center / contain no-repeat;
          mask: var(--sc-heart-outline) center / contain no-repeat;
}
.icon-button.star-icon svg > * { display: none !important; }
.icon-button.star-icon.active svg {
  -webkit-mask-image: var(--sc-heart-filled);
          mask-image: var(--sc-heart-filled);
}
.icon-button.star-icon.active { color: var(--sc-text) !important; }

:root {
  --sc-home-filled: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3L3 11h2.6v9.2h4.6v-5.8h3.6v5.8h4.6V11H21z' fill='black' stroke='black' stroke-width='1.6' stroke-linejoin='round'/></svg>");
}

.ui__header__logo svg,
.ui__header__logo img,
img.logo--icon,
.ui__header svg[class*="logo"],
.ui__header .logo,
.column-header svg[class*="logo"],
.column-header .logo,
.column-header__title svg[class*="logo"],
.column-back-button svg[class*="logo"] {
  display: inline-block !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px;
  background: currentColor !important;
  object-fit: none !important;
  object-position: -9999px -9999px !important;
  color: var(--sc-text) !important;
  -webkit-mask: var(--sc-home-filled) center / contain no-repeat;
          mask: var(--sc-home-filled) center / contain no-repeat;
}
.ui__header__logo svg > *,
.ui__header svg[class*="logo"] > *,
.ui__header .logo > *,
.column-header svg[class*="logo"] > *,
.column-header .logo > *,
.column-header__title svg[class*="logo"] > * {
  display: none !important;
}

.ui__header svg.logo--wordmark,
.ui__header .logo--wordmark,
.column-header svg.logo--wordmark,
.column-header .logo--wordmark {
  display: none !important;
}

footer[class*="link_footer"],
[class*="link_footer__wrapper"],
footer[data-context] {
  display: none !important;
}

.switch-account__form {
  display: block;
  margin: 0 0 14px;
}
.switch-account__button {
  display: block;
  width: 100%;
  height: auto !important;
  padding: 14px 18px;
  line-height: 1.4 !important;
  white-space: normal;
  text-align: left;
}