sori.studio/assets/css/main.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --site-bg: #fcfcfc;
    --site-panel: #fcfcfc;
    --site-panel-strong: #fcfcfc;
    --site-text: #111111;
    --site-muted: #454545;
    --site-soft: #6f7480;
    --site-line: #e2e2e0;
    --site-input: #fcfcfc;
    --site-accent: #ff4f2e;
    --site-accent-text: #ffffff;
    --site-invert: #111111;
    --site-invert-text: #ffffff;
  }

  :root[data-theme='dark'] {
    --site-bg: #050505;
    --site-panel: #080808;
    --site-panel-strong: #0d0d0d;
    --site-text: #f4f4f2;
    --site-muted: #c7c7c2;
    --site-soft: #8b8e96;
    --site-line: #252525;
    --site-input: #171717;
    --site-accent: #ff4f2e;
    --site-accent-text: #ffffff;
    --site-invert: #f4f4f2;
    --site-invert-text: #111111;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
      --site-bg: #050505;
      --site-panel: #080808;
      --site-panel-strong: #0d0d0d;
      --site-text: #f4f4f2;
      --site-muted: #c7c7c2;
      --site-soft: #8b8e96;
      --site-line: #252525;
      --site-input: #171717;
      --site-accent: #ff4f2e;
      --site-accent-text: #ffffff;
      --site-invert: #f4f4f2;
      --site-invert-text: #111111;
    }
  }

  html {
    font-family: Pretendard, ui-sans-serif, system-ui, sans-serif;
    color: var(--site-text);
    background: var(--site-bg);
  }

  .site-splash {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    background: var(--site-bg);
    transition: opacity 0.22s ease, visibility 0.22s ease;
  }

  html.site-app-ready .site-splash {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .site-splash__logo {
    width: 5rem;
    height: 5rem;
    border-radius: 1rem;
    object-fit: cover;
  }

  .site-splash__text {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--site-text);
  }

  html.site-mobile-nav-open {
    overflow: hidden;
  }

  html.site-search-open {
    overflow: hidden;
  }

  body {
    min-width: 320px;
    margin: 0;
    background: var(--site-bg);
  }

  html.admin-post-editor-document,
  body.admin-post-editor-document {
    height: 100%;
    overflow: hidden;
    background: #ffffff;
  }

  html.admin-settings-document,
  body.admin-settings-document {
    height: 100%;
    overflow: hidden;
    background: #f7f8fa;
  }
}

@layer components {
  @keyframes site-search-modal-in {
    from {
      opacity: 0;
      transform: translateY(-6px) scale(0.99);
    }

    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  .site-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    color: var(--site-text);
    background: var(--site-bg);
  }

  .site-section {
    border-bottom: 1px solid var(--site-line);
    background: var(--site-bg);
  }

  .site-section-header {
    @apply px-6 py-8;
  }

  .site-section-body {
    @apply px-6 py-4;
  }

  .site-search-modal__panel--animate {
    animation: site-search-modal-in 0.18s ease-out;
  }

  .post-prose {
    @apply max-w-none text-[17px] leading-8;
    color: var(--site-text);
  }

  .site-header {
    height: 57px;
    border-bottom: 1px solid var(--site-line);
    background: var(--site-panel);
    color: var(--site-text);
  }

  .site-main {
    min-height: 0;
    background: var(--site-bg);
  }

  .site-main--menu-closed {
    border-left: 0;
  }

  .site-sidebar {
    min-height: 0;
    background: var(--site-panel);
    color: var(--site-text);
  }

  /**
   * 사이드바 내부 스크롤 영역 — 스크롤바만 숨기고 스크롤 동작은 유지한다.
   */
  .site-sidebar-scroll {
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .site-sidebar-scroll::-webkit-scrollbar {
    display: none;
  }

  .site-sidebar-section {
    border-bottom: 1px solid var(--site-line);
  }

  .site-muted {
    color: var(--site-muted);
  }

  .site-soft {
    color: var(--site-soft);
  }

  .site-input {
    border: 1px solid var(--site-line);
    background: var(--site-input);
    color: var(--site-text);
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
  }

  .site-button {
    background: var(--site-invert);
    color: var(--site-invert-text);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  .site-button:hover {
    opacity: 0.9;
  }

  .site-accent-button {
    background: var(--site-accent);
    color: var(--site-accent-text);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  .site-accent-button:hover {
    opacity: 0.92;
  }

  .site-interactive {
    transition: color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
  }

  .site-interactive:hover {
    color: var(--site-text);
  }

  .site-input:hover,
  .site-input:focus-visible {
    border-color: color-mix(in srgb, var(--site-text) 24%, var(--site-line));
  }

  .site-panel-hover {
    transition: background-color 0.2s ease;
  }

  .site-panel-hover:hover {
    background: color-mix(in srgb, var(--site-panel) 72%, var(--site-text));
  }

  /**
   * 왼쪽 사이드바 1차 네비·태그 카테고리·테마 점 등 행 호버 — 라이트 테마에서 밝은 크림 톤, 다크는 패널 대비 유지
   */
  .site-sidebar-nav-row {
    transition: background-color 0.2s ease;
  }

  .site-sidebar-nav-row:hover {
    background-color: #f7f4ef;
  }

  :root[data-theme='dark'] .site-sidebar-nav-row:hover {
    background: color-mix(in srgb, var(--site-panel) 72%, var(--site-text));
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) .site-sidebar-nav-row:hover {
      background: color-mix(in srgb, var(--site-panel) 72%, var(--site-text));
    }
  }

  /**
   * 다크 인증 폼(signin/signup) 텍스트 입력 — UA가 부모 color를 상속하지 않는 경우 대비
   */
  .auth-form-input {
    color: #f5f7fa;
    caret-color: #2f6feb;
  }

  .auth-form-input::placeholder {
    color: #5c6570;
  }

  .auth-form-input:-webkit-autofill,
  .auth-form-input:-webkit-autofill:hover,
  .auth-form-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #f5f7fa;
    transition: background-color 9999s ease-out;
  }

}

@layer utilities {
  .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
}