/* ==========================================
📌 LIST VIEW SYSTEM
Notion + Super.so optimized
========================================== */

/* =========================
1. ROOT VARIABLES
========================= */

:root{
  --prop1-width:280px;
  --prop-gap-left:40px;

  --ticket-width:85px;
  --ticket-height:27px;

  --line-color:rgba(0,0,0,.08);

  --title-width:320px;

  --text-main:#777;
  --black-btn:#37352f;
  --gray-btn:#e1e1e1;
}

/* =========================
2. LIST ITEM BASE
========================= */

.notion-collection-list__item{
  display:flex!important;
  align-items:flex-start!important;

  padding:24px 0!important;

  border:none!important;
  border-bottom:1px solid var(--line-color)!important;

  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

.notion-collection-list__item:hover{
  background:transparent!important;
}

/* =========================
3. TITLE
========================= */

.notion-collection-list__item .notion-item-title{
  flex:0 0 var(--title-width)!important;

  min-width:var(--title-width)!important;
  max-width:var(--title-width)!important;

  line-height:1.4!important;
}

/* =========================
4. PROPERTY WRAP
========================= */

.notion-collection-list__item-properties{
  display:flex!important;

  flex:1!important;

  align-items:flex-start!important;

  padding-top:5px!important;
  padding-left:var(--prop-gap-left)!important;
}

/* =========================
5. PROPERTY COMMON
========================= */

.notion-collection-list__item-property{
  font-size:13px!important;
  color:var(--text-main)!important;
}

.notion-collection-list__item-property *{
  color:inherit!important;
}

/* =========================
6. PROPERTY 1
(Location / Time)
========================= */

.notion-collection-list__item-property:nth-child(1){
  flex:0 0 var(--prop1-width)!important;

  min-width:var(--prop1-width)!important;
  max-width:var(--prop1-width)!important;

  line-height:1.5!important;

  white-space:pre-wrap!important;
}

/* =========================
7. PROPERTY 2
(Button Area)
========================= */

.notion-collection-list__item-property:nth-child(2){
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
}

/* reset */

.notion-collection-list__item-property:nth-child(2),
.notion-collection-list__item-property:nth-child(2) *{
  text-decoration:none!important;
  box-shadow:none!important;
}

/* =========================
8. BLACK BUTTON
========================= */

.notion-collection-list__item-property:nth-child(2) [class*="brown"]{
  display:inline-flex!important;

  align-items:center!important;
  justify-content:center!important;

  width:var(--ticket-width)!important;
  height:var(--ticket-height)!important;

  background:var(--black-btn)!important;

  border-radius:4px!important;

  flex-shrink:0!important;
}

.notion-collection-list__item-property:nth-child(2) [class*="brown"],
.notion-collection-list__item-property:nth-child(2) [class*="brown"] *{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;

  font-size:11px!important;
}


/* =========================
9. GRAY BUTTON (단색 100% 투명도 없는 그레이 고정)
========================= */

.notion-collection-list__item-property:nth-child(2) [class*="orange"]{
  display:inline-flex!important;

  align-items:center!important;
  justify-content:center!important;

  width:var(--ticket-width)!important;
  height:var(--ticket-height)!important;

  /* 🚨 겹침 현상을 막기 위해 노션 고유의 그라데이션 필터를 완전히 무력화 */
  background-image: none !important;

  /* 🚨 겹치지 않는 100% 불투명한 단색 그레이 배경 적용 */
  background-color: var(--gray-btn) !important;
  background: var(--gray-btn) !important;

  border-radius:4px!important;
  box-shadow: none !important;
  border: none !important;

  flex-shrink:0!important;
}

/* 🚨 중요: 버튼 내부 자식 요소들이 이중으로 칠하고 있는 불투명 배경색만 투명하게 지워줍니다. */
.notion-collection-list__item-property:nth-child(2) [class*="orange"] *,
.notion-collection-list__item-property:nth-child(2) [class*="orange"] a,
.notion-collection-list__item-property:nth-child(2) [class*="orange"] span {
  color:#000000!important;
  -webkit-text-fill-color:#000000!important;

  font-size:11px!important;

  /* 내부 자식들의 둥근 테두리와 배경 그림자 잔상을 완전히 제거 */
  background: transparent !important;
  background-color: transparent !important;
  border-radius: 0px !important;
  box-shadow: none !important;
  border: none !important;
}




/* ==========================================
📱 MOBILE GRID FIX (768px 이하 스크린)
========================================== */

@media (max-width:768px){
  /* 🚨 모바일에서는 속성1의 가로폭이 늘어나 튀어나가지 않도록 안전한 폭으로 재고정합니다. */
  .notion-collection-list__item-property:nth-child(1){
    flex: 0 0 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
  }
}