/* ==========================================================================
   Layout - Desktop 2-Column (Notion Calendar Style)
   데스크탑/태블릿에서 List + Detail 2컬럼 레이아웃.
   모바일(<768px)과 iOS 네이티브에는 영향 없음.

   패딩 규격 (양쪽 패널 동일):
   - 상단: 28px (sidebar 로고 정렬)
   - 좌우: 24px (--spacing-6)
   - 하단: 28px (상단과 동일)
   ========================================================================== */

/* ===== 2-column grid — tablet+ (≥768px) ===== */
@media (min-width: 768px) {
  .web-layout main:has(.desktop-2col) {
    max-width: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  .desktop-2col {
    display: grid;
    grid-template-columns: 1fr minmax(280px, 480px);
    gap: 0;
    height: 100dvh;
    padding: 0;
  }

  /* --- 왼쪽 패널 (List) --- */
  .desktop-2col__list {
    min-width: 0;
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 28px var(--spacing-6);
  }

  /* --- 오른쪽 패널 (Detail) --- */
  .desktop-2col__detail {
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Reserve scrollbar space so panel content never shifts when scroll appears. */
    scrollbar-gutter: stable;
    background: none;
    border-left: 1px solid var(--color-border-soft);
    padding: 28px var(--spacing-6);
  }

  .desktop-2col__detail::-webkit-scrollbar {
    width: 6px;
  }
  .desktop-2col__detail::-webkit-scrollbar-track {
    background: transparent;
  }
  .desktop-2col__detail::-webkit-scrollbar-thumb {
    background: var(--color-border-soft);
    border-radius: 3px;
  }
  .desktop-2col__detail::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-muted);
  }

  /* =================================================================
     Detail panel header: apply glass pill style (matches mobile web)
     Mobile glass styles are in @media (max-width: 767px) in header.css,
     so they don't apply on desktop. Re-apply them for the detail panel.
     ================================================================= */
  .web-layout .desktop-2col__detail .header-btn {
    background: var(--color-bg-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1.5px solid var(--color-glass-border);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
  }

  .web-layout .desktop-2col__detail .header__action {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 16px;
    border-radius: var(--radius-full);
    background: var(--color-bg-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1.5px solid var(--color-glass-border);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
  }

  .web-layout .desktop-2col__detail .header__action--danger,
  .web-layout .desktop-2col__detail .header__action--warning {
    color: var(--color-danger);
  }

  /* Detail panel: smaller title to fit narrow width
     Specificity must beat .web-layout .header--page .header__title in components/header.css */
  .web-layout .desktop-2col__detail .header .header__title {
    font-size: var(--font-size-md);
  }

  /* =================================================================
     Record tab: dashboard overrides (web desktop only)
     ================================================================= */
  .web-layout .think-sidebar__title {
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
  }

  .web-layout .today-tracker {
    padding: 0;
  }

  .web-layout .today-tracker__row-header {
    margin-bottom: var(--spacing-3);
  }

  .web-layout .today-tracker__checks {
    justify-content: space-between;
  }

  .web-layout .today-log__row {
    padding: var(--spacing-1) 0;
  }

  .web-layout .today-log__date {
    width: 24px;
    margin-right: var(--spacing-2);
  }

  .web-layout .today-log__day-num {
    font-size: var(--font-size-sm);
    line-height: 1.2;
  }

  .web-layout .today-log__day-name {
    font-size: 10px;
  }

  .web-layout .today-log__input {
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
  }

  /* =================================================================
     Search page: larger input on desktop
     ================================================================= */
  .web-layout .search-page-header {
    height: 48px;
  }

  .web-layout .search-page-input-wrapper {
    height: 48px;
    border-radius: var(--radius-lg);
  }

  .web-layout .search-page-input {
    font-size: var(--font-size-lg);
  }

  .web-layout .search-page {
    max-width: 720px;
    margin: 0 auto;
  }

  /* =================================================================
     Detail panel: force single column for project cards
     ================================================================= */
  .web-layout .desktop-2col__detail .together-cards-large {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-list-lg);
  }

  /* =================================================================
     Create menu: constrain to left panel
     JS sets --desktop-list-left and --desktop-list-width on :root
     ================================================================= */
  .web-layout:has(.desktop-2col) .create-menu-sheet {
    left: calc(var(--desktop-list-left, 240px) + var(--spacing-6));
    right: auto;
    width: calc(var(--desktop-list-width, 50vw) - var(--spacing-6) * 2);
  }

  /* =================================================================
     Detail-panel bottom sheets: constrain to the right panel width.
     Project action sheet (leave / reschedule / delete) and any other
     bottom-sheet triggered from inside the detail column should hug
     the right edge at max 480px (the grid's panel max) instead of
     stretching across the full viewport.
     ================================================================= */
  .web-layout:has(.desktop-2col) .bottom-sheet {
    left: auto;
    right: 0;
    width: min(480px, 100vw);
    border-bottom-right-radius: 0;
    border-bottom-left-radius: var(--radius-lg);
  }

  /* Thread entry sheet (inside detail panel) is not affected */
  .desktop-2col__detail .thread-entry-sheet {
    width: auto;
  }

  /* =================================================================
     Detail panel: full-page style resets
     show 페이지들이 body/html을 fixed+overflow:hidden으로 만드는 것을 해제.
     패널은 항상 overflow-y:auto 스크롤 컨테이너로 유지.
     ================================================================= */

  /* --- .create-project (planner_items/show, together/show 등) --- */
  .desktop-2col__detail .create-project {
    height: auto;
    overflow: visible;
  }

  body:has(.desktop-2col__detail .create-project) {
    overflow: visible;
    position: static;
    width: auto;
    height: auto;
  }

  /* --- .thread-detail (journal_threads/show) --- */
  body:has(.desktop-2col__detail .thread-detail) {
    overflow: visible;
    position: static;
    width: auto;
    height: auto;
  }

  html:has(.desktop-2col__detail .thread-detail) {
    overflow: visible;
    height: auto;
  }

  body:has(.desktop-2col__detail .thread-detail) > div {
    height: auto;
  }

  body:has(.desktop-2col__detail .thread-detail) main {
    overflow: visible;
  }

  /* thread-detail in desktop panel: fixed layout.
     Cover + entries + input sheet. Entries scroll internally.
     Panel padding removed so cover extends edge-to-edge.
     Individual sections get horizontal padding instead. */
  .desktop-2col__detail:has(.thread-detail) {
    padding-left: 0;
    padding-right: 0;
  }

  .desktop-2col__detail .thread-detail {
    height: calc(100dvh - 56px); /* 28px top + 28px bottom */
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: visible; /* allow input sheet box-shadow to render */
  }

  .desktop-2col__detail .thread-detail-cover {
    flex-shrink: 0;
    margin: -28px 0 0 0; /* pull cover into top padding */
    width: 100%;
    border-radius: 0;
    overflow: visible; /* allow dropdown menu to overflow */
  }

  .desktop-2col__detail .project-cover {
    margin-top: -28px; /* pull cover into top padding */
    margin-left: calc(-1 * var(--spacing-6));
    margin-right: calc(-1 * var(--spacing-6));
    width: calc(100% + var(--spacing-6) * 2);
    border-radius: 0;
    position: relative; /* override sticky for panel */
  }

  .desktop-2col__detail .project-header-actions,
  .desktop-2col__detail .thread-detail-header {
    top: 28px; /* compensate cover's -28px margin */
  }

  /* Desktop panel: show close button, hide back button */
  .desktop-2col__detail .thread-detail-back-btn {
    display: none;
  }

  .desktop-2col__detail .thread-detail-close-btn {
    display: flex;
  }

  .desktop-2col__detail .thread-detail-pinned,
  .desktop-2col__detail .thread-detail-entries,
  .desktop-2col__detail .thread-entry-sheet {
    padding-left: var(--spacing-6);
    padding-right: var(--spacing-6);
  }

  .desktop-2col__detail .thread-detail-entries {
    flex: 1;
    overflow-y: auto;
    min-height: 0; /* allow flex child to shrink below content */
  }

  /* Must beat .web-layout .thread-entry-sheet in thread_detail.css (loaded later) */
  .web-layout .desktop-2col__detail .thread-entry-sheet {
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
    flex-shrink: 0;
    z-index: 1;
  }
}

/* ===== Mobile: hide detail column ===== */
@media (max-width: 767px) {
  .desktop-2col {
    display: block;
  }

  .desktop-2col__detail {
    display: none;
  }
}

/* ===== Detail empty state ===== */
.desktop-detail-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  padding: var(--spacing-8);
  text-align: center;
  color: var(--color-text-muted);
}

.desktop-detail-empty__icon {
  width: 48px;
  height: 48px;
  margin-bottom: var(--spacing-4);
  opacity: 0.4;
}

.desktop-detail-empty__text {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}