@import url("https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap");

:root {
  /* Font */
  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Header */
  --header-h: 48px;

  /* Month */
  --month-w: 12rem;
  --month-h: 8rem;

  /* Day */
  --day-h: 6rem;
  --day-expanded-h: calc((var(--hours-visible) * (var(--hour-row-min-h) + var(--hour-row-gap))) + 4.6rem);
  --day-selected-extra-w: 12rem;

  --day-base-w: 5rem;
  --day-per-event-w: 1.5rem;
  --day-max-w: 24rem;

  /* Month spacer */
  --spacer-cell: 4rem;
  --spacer-events-per-cell: 4;
  --spacer-max-cells: 6;

  /* Hour grid */
  --hours-visible: 6;
  --hour-label-w: 3.2rem;
  --hour-row-gap: 0.35rem;
  --hour-row-min-h: 1.6rem;

  --hour-input-h: 1.6rem;
  --hour-input-px: 0.2rem;
  --hour-input-font: 0.85rem;

  /* Typography */
  --month-font: clamp(3rem, 4vw, 4.5rem);
  --day-font: clamp(1.6rem, 2vw, 2.25rem);
  --hour-font: clamp(0.95rem, 0.6vw, 1.15rem);

  /* Colors */
  --bg: #ffffff;
  --panel: #ffffff;
  --border: #e5e7eb;
  --muted: #6b7280;
  --text: #111827;
}

/* =========================================================
   BASE
   ========================================================= */
html, body { height: 100%; }

body {
  margin: 0;
  display: flex;
  flex-direction: column;

  background: var(--bg);
  color: var(--text);

  font-family: var(--font-sans);
  font-optical-sizing: auto;
}
/* =========================================================
   MOBILE LONG PRESS FIX
   - prevent text selection & iOS callout
   ========================================================= */

/* 기본: 캘린더 전체에서 텍스트 선택 / 롱탭 콜아웃 방지 */
.tl-grid,
.tl-item,
.tl-item * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none; /* iOS copy/share loupe */
}

/* 예외: 입력창은 텍스트 선택 가능해야 함 */
.tl-event-input,
.tl-event-edit-input {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* =========================================================
   HEADER
   ========================================================= */
.tl-header {
  flex: 0 0 var(--header-h);
  height: var(--header-h);

  position: sticky;
  top: 0;
  z-index: 10000;

  background: #fff;
  border-bottom: 0; /* ✅ remove */
}

.tl-header-inner {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 1rem;
  box-sizing: border-box;
}

.tl-header-left,
.tl-header-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.tl-header-title {
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}

.tl-header a,
.tl-header button {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  padding: 0.25rem 0.5rem;
  border-radius: 0; /* ✅ remove */
  cursor: pointer;
}

.tl-header a:hover,
.tl-header button:hover {
  background: transparent; /* ✅ remove hover bg */
}

/* =========================================================
   AUDIO CONTROLS (minimal)
   - day play button
   - year watermark toggle
   ========================================================= */
.tl-day-play {
  font: inherit;
  font-weight: 700;
  letter-spacing: -0.01em;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  line-height: 1;
  flex: 0 0 auto;
}

.tl-day-play[aria-pressed="true"] {
  opacity: 1;
}

/* make watermark clickable (used as global play toggle) */
.tl-year-watermark {
  position: fixed;
  right: 1rem;
  bottom: 1rem;

  z-index: 9999;

  /* ensure Geist is used (buttons may not inherit font-family reliably) */
  font-family: var(--font-sans);

  font-weight: 700;
  letter-spacing: -0.04em;
  font-size: clamp(3rem, 5vw, 4.5rem);
  color: var(--text);

  /* diagonal rotation */
  transform-origin: center;

  /* button reset + interaction */
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
  background: transparent;
  border: 0;
  padding: 0;
  padding-bottom: 0.2rem;

  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  outline: none;
  box-shadow: none;
}

.tl-year-watermark:focus,
.tl-year-watermark:focus-visible {
  outline: none;
  box-shadow: none;
}

.tl-year-watermark::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.tl-year-watermark[aria-pressed="true"] {
  color: var(--text);
}

/* 모바일: 2026 버튼을 좌측으로 이동 */
@media (max-width: 1000px) {
  .tl-year-watermark {
    right: auto;
    left: 1rem;
    bottom: 1rem;
  }
}


/* =========================================================
   APP
   ========================================================= */
.tl-app,
#app {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;

  position: relative;
  background: var(--panel);
}

/* =========================================================
   GRID
   ========================================================= */
.tl-grid {
  width: 100%;
  height: 100%;

  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  box-sizing: border-box;
  padding-left: 1rem;
}

/* =========================================================
   ITEMS
   ========================================================= */
.tl-item {
  box-sizing: border-box;
  padding: 0.25rem; /* tighter */
  transition: all 250ms;
}

.tl-month {
  height: var(--month-h);
  cursor: pointer;
}

.tl-day {
  height: var(--day-h);
  cursor: pointer;
  overflow: hidden;

  background: #fff;

  /* ✅ remove borders/outline/shadows/radius */
  border: 0;
  outline: 0;
  border-radius: 0;
  box-shadow: none;
}

.tl-day:hover {
  background: #fff;   /* keep white */
}

/* ✅ open day: still no outlines/borders/shadows */
.tl-day.is-selected {
  height: var(--day-expanded-h);
  overflow: visible;
  position: relative;
  z-index: 9000;

  background: #fff;

  border: 0;
  outline: 0;
  border-radius: 0;
  box-shadow: none;
}

/* 현재 재생 중인 셀 - 날짜 숫자 영역만 검은색으로 채움 (누적 레이어 지원) */
.tl-day.is-playing .tl-day-head {
  background: var(--text); /* 검정색 */
  color: var(--bg); /* 흰색 텍스트 */
  padding: 0.25rem 0.5rem;
  margin: -0.25rem -0.5rem 0.25rem -0.5rem; /* 약간의 여백 조정 */
}

.tl-day.is-playing .tl-day-label {
  color: var(--bg);
}

/* 현재 진행 중인 lead 셀 추가 강조 (미세한 테두리) */
.tl-day.is-playing-lead .tl-day-head {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3);
}

.tl-month.is-playing .tl-month-label {
  background: var(--text); /* 검정색 */
  color: var(--bg); /* 흰색 텍스트 */
  padding: 0.25rem 0.5rem;
  display: inline-block;
}

/* 재생 중인 day의 이벤트 입력 영역은 검은색으로 바뀌지 않음 */
.tl-day.is-playing .tl-day-detail {
  background: #fff;
  color: var(--text);
}

.tl-spacer {
  height: var(--month-h);
  pointer-events: none;
}

.tl-spacer-thumbnails {
  height: var(--month-h);
  overflow: hidden;
}

.tl-spacer-thumb {
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}

.tl-spacer-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* inner */
.tl-item-inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}



/* =========================================================
   LABELS
   ========================================================= */
.tl-month .tl-item-inner {
  align-items: flex-start;
  justify-content: flex-start;
}

/* keep day aligned consistently with month */
.tl-day .tl-item-inner {
  align-items: flex-start;
  justify-content: flex-start;
}

.tl-month-label {
  font-weight: 700;
  letter-spacing: -0.04em;
  font-size: var(--month-font);
  line-height: 1;
  display: inline-block; 
  transform: translateX(var(--opt-x, 0px)); 
  will-change: transform; 
}

/* 월별 광학적 중앙 정렬 - 수동 설정값 */
.tl-month-label[data-month="JAN"] {
  --opt-x: 2.71px;
}

.tl-month-label[data-month="FEB"] {
  --opt-x: 4.00px;
}

.tl-month-label[data-month="MAR"] {
  --opt-x: -6px;
}

.tl-month-label[data-month="APR"] {
  --opt-x: 5px;
}

.tl-month-label[data-month="MAY"] {
  --opt-x: 3.5px;
}

.tl-month-label[data-month="JUN"] {
  --opt-x: 3px;
}

.tl-month-label[data-month="JUL"] {
  --opt-x: 3.5px;
}

.tl-month-label[data-month="AUG"] {
  --opt-x: -3px;
}

.tl-month-label[data-month="SEP"] {
  --opt-x: 3.00px;
}

.tl-month-label[data-month="OCT"] {
  --opt-x: -8px;
}

.tl-month-label[data-month="NOV"] {
  --opt-x: -0.84px;
}

.tl-month-label[data-month="DEC"] {
  --opt-x: 3.00px;
}

.tl-day-label {
  font-weight: 700;
  letter-spacing: -0.04em;
  font-size: var(--day-font);
  line-height: 1;
  flex: 0 0 auto;
  pointer-events: none;
}

/* day header row: day number + optional thumbnail */
.tl-day-head {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  min-width: 0;
}

.tl-day-thumb {
  display: block;
  height: var(--day-font);

  /* ✅ grows/shrinks with the day cell width */
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  max-width: none;

  object-fit: cover;        /* show only a portion */
  object-position: center;  /* tweak focus if needed */
  border-radius: 0;
}

.tl-day-thumb,
.tl-spacer-thumb img {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
}


/* =========================================================
   DAY DETAIL
   ========================================================= */
.tl-day-detail {
  margin-top: 0.6rem;
  overflow-y: auto;

  /* ✅ snap scrolling: stop only on full hour rows */
  scroll-snap-type: y mandatory;
  scroll-padding-top: 0.5rem;
  scroll-padding-bottom: 0;
  overscroll-behavior: contain;

  flex: 1 1 auto;
  min-height: 0;

  padding-right: 0.4rem;
  /* bottom runway removed: last row snaps to bottom instead */
  padding-bottom: 0;

  font-size: 0.875rem;
  box-sizing: border-box;

  /* ✅ remove divider line */
  border-top: 0;
  padding-top: 0.5rem;
}

.tl-hour-row {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 0.6rem;

  align-items: start;
  margin-bottom: var(--hour-row-gap);
  min-height: var(--hour-row-min-h);

  /* ✅ snap target */
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* ✅ when you reach hour 23, no extra blank space under it */
.tl-hour-row:last-child {
  margin-bottom: 0;
  scroll-snap-align: end;
}

.tl-hour-label {
  width: auto;
  justify-self: start;

  font-family: inherit;
  font-weight: 700;
  letter-spacing: -0.04em;
  font-size: var(--hour-font);
  line-height: 1;
  color: var(--text);

  padding-top: 0;

  /* ✅ only hint */
  cursor: text;
}

.tl-hour-body { min-width: 0; }

/* event pill (kept subtle, no border) */
.tl-event-pill {
  font-weight: 600;
  background: transparent;
  border-radius: 0; 
  padding: 0;
  margin: 0 0 0.25rem 0;
  word-break: break-word;
  cursor: pointer; /* 클릭 가능하도록 */
  user-select: none; /* 텍스트 선택 방지 */
  pointer-events: auto; /* 클릭 이벤트 활성화 */
}

.tl-event-input {
  display: none;

  -webkit-appearance: none;
  appearance: none;

  /* match saved event text */
  font: inherit;
  font-weight: 600;
  line-height: 1;

  width: auto;
  min-width: 6ch;

  box-sizing: border-box;
  padding: 0;
  margin: 0 0 0.25rem 0;

  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(17, 24, 39, 0.95);
  caret-color: rgba(17, 24, 39, 0.95);
}

/* prevent browser autofill tint */
.tl-event-input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px transparent inset;
  -webkit-text-fill-color: rgba(17, 24, 39, 0.95);
  transition: background-color 9999s;
}

.tl-hour-row.is-editing {
  background: transparent;
}

.tl-hour-row.is-editing .tl-event-input {
  display: inline-block;

  /* ✅ still no underline unless you want it.
     If you want ZERO line too, keep it 0. */
  border-bottom: 0;
}

.tl-event-input::placeholder {
  color: rgba(107, 114, 128, 0.45);
}

.tl-hour-row.is-editing .tl-event-input:focus,
.tl-hour-row.is-editing .tl-event-input:focus-visible {
  outline: none;
  box-shadow: none;
  background: transparent;
}

/* 이벤트 편집 input (pill을 교체한 input) */
.tl-event-edit-input {
  display: inline-block;
  font: inherit;
  font-weight: 600;
  line-height: 1;
  font-size: var(--hour-font);
  padding: 0;
  margin: 0 0 0.25rem 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(17, 24, 39, 0.95);
  caret-color: rgba(17, 24, 39, 0.95);
  width: 100%;
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;
}

.tl-event-edit-input:focus,
.tl-event-edit-input:focus-visible {
  outline: none;
  box-shadow: none;
  background: transparent;
}

/* 이벤트 액션 메뉴 (모바일 롱프레스 시 표시) */
.tl-event-action-menu {
  font-family: inherit;
  font-size: 14px;
}

.tl-event-action-menu button {
  font-family: inherit;
  font-size: inherit;
  color: var(--text);
}

.tl-event-action-menu button:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* scrollbars (optional) */
.tl-day-detail::-webkit-scrollbar { width: 6px; }
.tl-day-detail::-webkit-scrollbar-track { background: rgba(0,0,0,0.00); }
.tl-day-detail::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); border-radius: 999px; }

/* =========================================================
   YEAR WATERMARK
   ========================================================= */
/* (moved to AUDIO CONTROLS section above) */

/* =========================================================
   MISC
   ========================================================= */
.tl-error {
  padding: 1rem;
  font-weight: 600;
}

#app::-webkit-scrollbar,
.tl-day-detail::-webkit-scrollbar {
  width: 0;
  height: 0;
}

#app,
.tl-day-detail {
  scrollbar-width: none;
  -ms-overflow-style: none;
}


/* =========================================================
   MENU CONTEXT
   ========================================================= */
.tl-menu-context {
  position: fixed;
  z-index: 10000;
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 0.5rem 0;
  min-width: 160px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  opacity: 0;
  transition: opacity 0.15s ease;
  font-family: var(--font-sans);
}

.tl-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 1rem;
  background: transparent;
  border: 0;
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s ease;
  box-sizing: border-box;
}

.tl-menu-item:hover {
  background: rgba(0, 0, 0, 0.04);
}

.tl-menu-item[data-active="true"] {
  background: rgba(0, 0, 0, 0.06);
  font-weight: 700;
}

.tl-menu-item[data-has-submenu="true"]::after {
  content: " →";
  float: right;
  opacity: 0.5;
}

.tl-menu-submenu {
  display: none;
  margin-top: 0.25rem;
  padding-top: 0.25rem;
  border-top: 1px solid var(--border);
}

.tl-bpm-controls {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.tl-bpm-controls .tl-menu-item {
  padding-left: 1.5rem;
  font-size: 0.9rem;
}

/* =========================================================
   IMAGE POPUP
   ========================================================= */
.tl-image-popup-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: transparent;
}

.tl-image-popup-container {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tl-image-popup-img {
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.tl-day-thumb,
.tl-day-thumb-area,
.tl-spacer-thumb {
  cursor: pointer;
}

  .tl-day-thumb-area {
    display: block;
    height: var(--day-font);
    flex: 1 1 auto;
    min-width: 0;
  }

/* =========================================================
   LOADING SCREEN
   ========================================================= */
.tl-loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.tl-loading.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.tl-loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.tl-loading-text {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.04em;
  font-size: var(--month-font);
  line-height: 1;
  color: var(--text);
}

.tl-loading-percent {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.04em;
  font-size: var(--month-font);
  line-height: 1;
  color: var(--text);
  margin-top: 0.5rem;
}