/* 담당 E — 메인 플래너(section.planner#planner) 보정. 퍼블 fb-main.css 위에 얹는다. */

/* JS가 토글하는 hidden 이 .empty/.tl_list 의 display:flex 에 지지 않도록 */
#planner [hidden] { display: none !important; }

/* 왼쪽 추천 상품: 퍼블은 2개 기준. 3개 이상이면 목록 높이를 오른쪽 타임라인 열 높이에 맞추고 세로 스크롤.
   (contain:size 로 목록 자체 높이가 패널 높이에 영향을 주지 않게 → 왼쪽 열은 오른쪽 열 높이로 stretch) */
#planner .plist_scroll {
  flex: 1 1 0;
  min-height: 0;
  contain: size;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 6px;
  margin-right: -6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
  /* 아래 더 있음을 알리는 옅은 페이드 */
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 28px), rgba(0, 0, 0, 0.25));
  mask-image: linear-gradient(180deg, #000 calc(100% - 28px), rgba(0, 0, 0, 0.25));
}
#planner .plist_scroll::-webkit-scrollbar { width: 4px; }
#planner .plist_scroll::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.18); border-radius: 4px; }
/* 패널이 세로로 쌓이는 폭: 2개 + 다음 카드 일부가 보이는 고정 높이 */
@media (max-width: 1180px) {
  #planner .plist_scroll { flex: none; contain: none; max-height: 300px; }
}

/* 담기 버튼: + 아이콘 ↔ 담김(체크) */
#planner .pitem_add { position: relative; }
#planner .pitem_add svg { display: block; width: 28px; height: 28px; }
#planner .pitem_add .pitem_add_done { display: none; }
#planner .pitem_add.is_added .pitem_add_on { display: none; }
#planner .pitem_add.is_added .pitem_add_done { display: block; }
#planner .pitem_add.is_added:hover { transform: scale(1.08); }

/* 일수 스테퍼: 비활성 상태 */
#planner .stepper button:disabled { opacity: 0.3; cursor: not-allowed; transform: none; }

/* Day 탭이 많아지면(최대 14일) 탭 줄만 가로 스크롤 */
#planner .panel_ctrl { min-width: 0; max-width: 100%; }
#planner .days {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px 0; /* hover translateY(-2px) 잘림 방지 */
}
#planner .days::-webkit-scrollbar { display: none; }
#planner .days button { flex: none; white-space: nowrap; }

/* 타임라인: 피그마의 레일 위 점(7px) — 항목마다 */
#planner .tl_item { position: relative; cursor: grab; }
#planner .tl_item::before {
  content: "";
  position: absolute;
  left: -30px;
  top: 36px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--map-tour, #3b82f6);
}
#planner .tl_item.is_hotel::before { background: var(--green, #1d783b); }
#planner .tl_item.is_hotel .tl_ico { background: rgba(29, 120, 59, 0.1); }
#planner .tl_item.is_hotel .tl_meta { color: var(--green, #1d783b); }
#planner .tl_ico svg { display: block; width: 16px; height: 16px; }
#planner .tl_item.is_ghost { opacity: 0.4; }
#planner .tl_item.is_chosen { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); }
#planner .tl_item.is_new { animation: fbPlannerNew 0.9s ease; }
@keyframes fbPlannerNew {
  0% { background: rgba(59, 130, 246, 0.1); transform: translateY(6px); opacity: 0.4; }
  40% { background: rgba(59, 130, 246, 0.08); transform: none; opacity: 1; }
  100% { background: #fff; }
}
#planner .tl_t { word-break: keep-all; overflow-wrap: anywhere; }
#planner .tl_del { white-space: nowrap; }

/* 4단계: 피그마 — 번호+제목 한 줄, 카드 폭 260 기준(총 1172) 중앙, 사이 화살표는 원형 */
#planner .steps { max-width: 1172px; margin-inline: auto; }
#planner .step { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 11px; }
#planner .step b { width: 34px; height: 34px; font-size: 13px; }
#planner .step strong { margin-top: 0; }
#planner .step > span { flex: 1 0 100%; }
#planner .steps > li + li::before {
  left: -34px;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  border: 1px solid var(--l10, rgba(0, 0, 0, 0.1));
  border-radius: 50%;
  background: #fff url("/assets/main/ico-chevron.svg") center/5px auto no-repeat;
  opacity: 1;
}
@media (max-width: 1340px) {
  #planner .steps > li + li::before { left: -29px; }
}

/* 세로 레일이 가로로 바뀌는 폭에서는 점 숨김 */
@media (max-width: 600px) {
  #planner .tl_item::before { display: none; }
}