/* =========================================================
   Mastodon Theme — Modern Psychic High School
   Version: Full unified stylesheet
   Mood:
   - modern supernatural high school
   - simple black UI
   - rose-gold pink + protagonist red
   - classroom window light background
========================================================= */

:root {
  --bg-body: #101117;
  --bg-body-2: #141624;
  --bg-panel: #171922;
  --bg-panel-2: #1c1f2c;
  --bg-panel-3: #232736;
  --bg-hover: #292d3f;

  --text-main: #f6f2f5;
  --text-sub: #c1b5bd;
  --text-dim: #8e828a;

  --pink: #cfa8b2;
  --pink-strong: #bf8f9d;
  --pink-soft: rgba(207, 168, 178, 0.12);

  --red: #d84057;
  --red-strong: #ea556b;
  --red-soft: rgba(216, 64, 87, 0.12);

  --border: #343140;
  --border-strong: #474255;
  --border-pink: rgba(207, 168, 178, 0.34);
  --border-red: rgba(216, 64, 87, 0.34);

  --shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.20);
  --shadow-card: 0 8px 22px rgba(0, 0, 0, 0.18);

  --glow-pink: 0 0 0 1px rgba(207, 168, 178, 0.22), 0 0 18px rgba(207, 168, 178, 0.08);
  --glow-red: 0 0 0 1px rgba(216, 64, 87, 0.24), 0 0 18px rgba(216, 64, 87, 0.10);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;
}

/* =========================================================
   Global background
   - classroom window light mood
   - modern academy night
========================================================= */

html,
body,
.ui {
  background:
    radial-gradient(circle at 18% 16%, rgba(207, 168, 178, 0.10) 0%, transparent 24%),
    radial-gradient(circle at 82% 14%, rgba(216, 64, 87, 0.08) 0%, transparent 20%),
    radial-gradient(circle at 52% 78%, rgba(207, 168, 178, 0.05) 0%, transparent 28%),
    linear-gradient(rgba(255, 244, 248, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 244, 248, 0.030) 1px, transparent 1px),
    linear-gradient(180deg, var(--bg-body-2) 0%, var(--bg-body) 100%);
  background-size:
    auto,
    auto,
    auto,
    100% 48px,
    48px 100%,
    100% 100%;
  background-attachment: fixed;
  color: var(--text-main);
}

body {
  font-family: "Inter", "Noto Sans KR", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.01em;
}

/* 전체 은은한 비네팅 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at center, transparent 40%, rgba(0, 0, 0, 0.16) 100%);
  z-index: 0;
}

/* 위쪽 조명 같은 얇은 광 */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(255, 244, 248, 0.016) 0%,
      rgba(255, 244, 248, 0.006) 18%,
      transparent 38%
    );
  z-index: 0;
}

.ui {
  position: relative;
  z-index: 1;
}

/* 좌하단 / 우상단 이능 분위기 빛 */
.ui::before {
  content: "";
  position: fixed;
  left: -60px;
  bottom: -60px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle, rgba(207, 168, 178, 0.10) 0%, rgba(207, 168, 178, 0.05) 32%, transparent 68%);
  filter: blur(16px);
  z-index: 0;
}

.ui::after {
  content: "";
  position: fixed;
  right: -80px;
  top: -80px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle, rgba(216, 64, 87, 0.08) 0%, rgba(216, 64, 87, 0.04) 28%, transparent 64%);
  filter: blur(18px);
  z-index: 0;
}

::selection {
  background: rgba(207, 168, 178, 0.35);
  color: #ffffff;
}

a {
  color: var(--pink);
  text-decoration: none;
}

a:hover,
a:focus {
  color: #f7dbe3;
  text-decoration: none;
}

hr {
  border-color: var(--border);
}

/* =========================================================
   Layout
========================================================= */

.columns-area,
.drawer,
.drawer__inner,
.ui__drawer,
.columns-area__panels {
  background: transparent !important;
}

.columns-area__panels__pane {
  padding: 6px;
}

/* 메인 컬럼 */
.column {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.030) 0%, rgba(255,255,255,0.010) 100%),
    rgba(24, 26, 36, 0.92) !important;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(10px);
  overflow: hidden;
}

/* 상단 포인트 라인 */
.column::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background:
    linear-gradient(
      90deg,
      var(--pink) 0%,
      var(--pink) 38%,
      var(--red) 68%,
      rgba(216, 64, 87, 0.15) 100%
    );
  pointer-events: none;
  z-index: 2;
}

/* =========================================================
   Column header
========================================================= */

.column-header {
  position: relative;
  background:
    linear-gradient(90deg, rgba(207,168,178,0.08) 0%, rgba(216,64,87,0.05) 60%, rgba(255,255,255,0.02) 100%),
    linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%),
    var(--bg-panel-2) !important;
  border-bottom: 1px solid var(--border-strong);
  color: var(--text-main);
}

.column-header__title {
  color: var(--text-main);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.column-header__button,
.column-header__back-button {
  color: var(--text-sub);
  border-radius: 10px;
}

.column-header__button:hover,
.column-header__back-button:hover {
  color: #ffffff;
  background: var(--pink-soft);
}

.column-header::after {
  content: "ACADEMY NET";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  pointer-events: none;
}

/* =========================================================
   Panels / side areas
========================================================= */

.navigation-panel,
.getting-started,
.trends,
.link-footer,
.pinned-account-panel,
.about-user,
.explore__search-header,
.account {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0) 100%),
    var(--bg-panel) !important;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  color: var(--text-main);
}

.account {
  border-color: rgba(207, 168, 178, 0.14);
}

.navigation-panel a,
.getting-started a {
  color: var(--text-sub);
  border-radius: 10px;
  transition: all 0.16s ease;
}

.navigation-panel a:hover,
.getting-started a:hover {
  color: #ffffff;
  background: rgba(207, 168, 178, 0.08);
}

/* =========================================================
   Search / compose / inputs
========================================================= */

.search,
.search__input {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0) 100%),
    #171a24 !important;
}

.search__input,
.compose-form .autosuggest-textarea__textarea,
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
textarea,
select {
  background: #10131b !important;
  color: var(--text-main) !important;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}

.search__input::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--text-dim);
}

.search__input:focus,
.compose-form .autosuggest-textarea__textarea:focus,
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--pink);
  box-shadow: var(--glow-pink);
}

/* 작성 박스 */
.compose-form {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%),
    #1a1c26 !important;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}

.compose-form .autosuggest-textarea__textarea,
.compose-form__warning,
.compose-form__buttons-wrapper,
.compose-form__modifiers,
.compose-form__upload-wrapper,
.compose-form__uploads-wrapper {
  background: transparent !important;
}

.compose-form__publish {
  background: rgba(255,255,255,0.02) !important;
  border-top: 1px solid var(--border);
}

/* =========================================================
   Buttons
========================================================= */

.button,
button[type="submit"] {
  background: linear-gradient(180deg, #3a2c35 0%, #2a2127 100%) !important;
  border: 1px solid var(--border-pink);
  color: #fff7fa !important;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: all 0.16s ease;
}

.button:hover,
button[type="submit"]:hover {
  background: linear-gradient(180deg, #4a333c 0%, #33252c 100%) !important;
  box-shadow: var(--glow-pink);
  transform: translateY(-1px);
}

/* 게시 버튼 */
.compose-form__publish .button,
.button.button-primary {
  background: linear-gradient(180deg, #6a2a37 0%, #4a1f29 100%) !important;
  border: 1px solid var(--border-red);
}

.compose-form__publish .button:hover,
.button.button-primary:hover {
  background: linear-gradient(180deg, #7c3140 0%, #56212d 100%) !important;
  box-shadow: var(--glow-red);
}

.icon-button,
.text-icon-button {
  color: var(--text-sub);
  border-radius: 10px;
  transition: all 0.16s ease;
}

.icon-button:hover,
.text-icon-button:hover {
  color: #ffffff;
  background: rgba(207, 168, 178, 0.08);
}

/* =========================================================
   Timeline / status / notifications
========================================================= */

.status,
.notification,
.detailed-status,
.announcements__item,
.card,
.attachment-list__item {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0) 100%),
    #181b25 !important;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-main);
  box-shadow: none;
}

.status,
.notification {
  margin: 8px 10px;
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease,
    background 0.16s ease;
}

/* 좌측 포인트 라인 */
.status::before,
.notification::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 0;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--pink) 20%,
    var(--red) 80%,
    transparent 100%
  );
  opacity: 0.8;
}

.status:hover,
.notification:hover {
  background:
    linear-gradient(180deg, rgba(207,168,178,0.05) 0%, rgba(255,255,255,0) 100%),
    #1c202c !important;
  border-color: var(--border-pink);
  box-shadow: 0 10px 24px rgba(0,0,0,0.22), 0 0 0 1px rgba(207,168,178,0.12);
  transform: translateY(-1px);
}

.status__content,
.detailed-status__wrapper,
.notification__message,
.status__content p,
.detailed-status__wrapper p {
  color: var(--text-main) !important;
}

.status__display-name strong,
.display-name strong,
.account__display-name strong {
  color: #fff8fb !important;
  font-weight: 700;
}

.display-name__account,
.status__relative-time,
.account__header__tabs__name small,
.status__prepend,
.reply-indicator__content {
  color: var(--text-sub) !important;
}

.status__content a,
.account__header__fields a {
  color: #f0cad4;
  border-bottom: 1px dotted rgba(207, 168, 178, 0.45);
}

.status__content a:hover,
.account__header__fields a:hover {
  color: #ffffff;
  border-bottom-color: var(--red);
}

/* 액션 바 */
.status__action-bar-button,
.status__action-bar .icon-button {
  color: var(--text-sub);
  transition: all 0.16s ease;
}

.status__action-bar-button:hover,
.status__action-bar .icon-button:hover {
  color: #ffffff;
  background: rgba(207, 168, 178, 0.08);
}

.icon-button.active,
.status__action-bar-button.active {
  color: var(--red-strong);
  text-shadow: 0 0 10px rgba(234, 85, 107, 0.28);
}

/* =========================================================
   Empty timeline / white area fix
========================================================= */

/* 흰 영역 강제 제거 */
.column > .scrollable,
.column .scrollable,
.column .item-list,
.column .status-list,
.column .status-list__item,
.column .regeneration-indicator,
.column .entry,
.column .load-more,
.column .account-gallery__container,
.column-back-button,
.column-link {
  background: transparent !important;
}

/* 비어 있는 홈 타임라인 */
.empty-column-indicator,
.empty-column-indicator > div,
.empty-column-indicator__content {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.00) 100%),
    #161924 !important;
  color: var(--text-sub) !important;
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

/* 빈 영역 안쪽 정렬 */
.empty-column-indicator {
  margin: 0 !important;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
}

.empty-column-indicator::before {
  content: "✦";
  display: block;
  font-size: 24px;
  line-height: 1;
  margin-bottom: 14px;
  color: var(--pink);
  text-shadow: 0 0 14px rgba(207,168,178,0.18);
}

/* 일부 화면에서 비어 있는 패널 배경 */
.columns-area .column > div,
.columns-area .column > section,
.columns-area .column .scrollable > div {
  background-color: transparent !important;
}

/* =========================================================
   Profile
========================================================= */

.account__header {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0) 100%),
    linear-gradient(90deg, rgba(207,168,178,0.08) 0%, rgba(216,64,87,0.05) 55%, rgba(0,0,0,0) 100%),
    var(--bg-panel-2) !important;
  border-bottom: 1px solid var(--border);
}

.account__header__bar {
  background: rgba(16, 17, 23, 0.72) !important;
  backdrop-filter: blur(8px);
}

.account__header__tabs {
  border-top: 1px solid var(--border);
}

.account__header__tabs__button {
  color: var(--text-sub);
}

.account__header__tabs__button.active {
  color: #ffffff;
  border-bottom: 2px solid var(--pink);
}

.account__avatar,
.avatar {
  border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04);
}

/* =========================================================
   Dropdown / modal / menus
========================================================= */

.dropdown-menu,
.dropdown-menu__container,
.actions-modal,
.confirmation-modal,
.report-dialog-modal,
.modal-root__modal {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0) 100%),
    #12141b !important;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  color: var(--text-main);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
}

.dropdown-menu__item,
.actions-modal ul li button {
  color: var(--text-main);
}

.dropdown-menu__item:hover,
.actions-modal ul li button:hover {
  background: rgba(207, 168, 178, 0.08);
  color: #ffffff;
}

/* =========================================================
   Section accents
========================================================= */

.account__section-headline,
.explore__search-header,
.announcements__pagination,
.trends__header {
  border-left: 2px solid var(--pink);
  padding-left: 10px;
  color: var(--text-main);
}

.status__content__spoiler-link,
.privacy-dropdown__option.active,
.language-dropdown__dropdown__results__item.active {
  color: var(--red-strong);
}

.drawer__inner__mastodon {
  color: var(--text-sub);
  position: relative;
}

.drawer__inner__mastodon::after {
  content: "CITY ACADEMY // STUDENT NETWORK";
  display: block;
  margin-top: 4px;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--text-dim);
}

/* =========================================================
   Media / cards / scrollbar
========================================================= */

.media-gallery,
.video-player,
.card,
.attachment-list__item {
  border-radius: var(--radius-md);
  overflow: hidden;
}

.card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0) 100%),
    #101219 !important;
  border: 1px solid var(--border);
  color: var(--text-main);
}

.attachment-list {
  border-color: var(--border);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #0d0e13;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #47343b 0%, #2a242b 100%);
  border: 2px solid #0d0e13;
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #5f313c 0%, #352228 100%);
}

/* =========================================================
   Focus / selected
========================================================= */

.notification.unread,
.focusable:focus,
.focusable:focus-visible {
  background:
    linear-gradient(180deg, rgba(216,64,87,0.06) 0%, rgba(255,255,255,0) 100%),
    #151821 !important;
}

.selected,
.active {
  background-color: rgba(207, 168, 178, 0.08);
}

/* =========================================================
   Mobile
========================================================= */

@media (max-width: 768px) {
  html,
  body,
  .ui {
    background-size:
      auto,
      auto,
      auto,
      100% 32px,
      32px 100%,
      100% 100%;
  }

  .column {
    border-radius: 0;
    border-left: none;
    border-right: none;
    box-shadow: none;
  }

  .status,
  .notification {
    margin: 6px 8px;
  }

  .column-header::after {
    display: none;
  }

  .empty-column-indicator {
    border-radius: 14px;
  }
}