/* ?�?�머 UI ?��???*/
.timer-controls-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0;
  width: 100%;
  max-width: 44px;
  box-sizing: border-box;
  margin: 0 auto;
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  transition: none;
}

.timer-controls {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: stretch;
  width: 100%;
}

.timer-btn {
  background: #e74c3c;
  color: white;
  border: none;
  border-radius: 50%;
  width: 100%;
  min-width: 0;
  height: 16px;
  font-size: 8px;
  padding: 0;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(231, 76, 60, 0.3);
}

.timer-btn:hover:not(:disabled) {
  background: #c0392b;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(231, 76, 60, 0.4);
}

.timer-btn:disabled {
  background: #b8c2cc;
  cursor: not-allowed;
  box-shadow: none;
  opacity: 0.6;
}

.timer-display {
  font-family: "Courier New", monospace;
  font-size: 7px;
  font-weight: 600;
  color: #2c3e50;
  background: #f8f9fa;
  padding: 1px 2px;
  border-radius: 3px;
  border: 1px solid #ddd;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.timer-running .timer-display {
  background: #ffffff;
  border-color: #e74c3c;
  color: #e74c3c;
  font-weight: 700;
}

.plan-segment-label-text,
.plan-segment-title-text {
  display: inline-block;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  cursor: text;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

.plan-segment-label-text.is-editing,
.plan-segment-title-text.is-editing {
  cursor: text;
}

.plan-segment-title-edit-input {
  display: inline-block;
  width: auto;
  max-width: 100%;
  min-width: 3ch;
  box-sizing: border-box;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 1px solid #163a6e;
  border-radius: 4px;
  background: transparent;
  color: #111827;
  font: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-align: center;
  outline: none;
  vertical-align: bottom;
}

.plan-segment-graphic-label[hidden],
.plan-segment-graphic-title[hidden] {
  display: none !important;
}

.timer-result-input {
  flex: 1;
  padding: 8px 12px;
  border: none;
  border-radius: 0;
  font-size: 14px;
  text-align: left;
  background: transparent;
  min-width: 0;
  /* 좌측??병합 ?????�단 가림요??::after) ?�보???�에???�두리�? 보이?�록 */
  position: relative;
  z-index: 4;
  box-shadow: none;
}

.timer-result-input:focus {
  outline: none;
  border-color: transparent;
}

.timer-result-input::placeholder {
  color: #95a5a6;
  font-style: normal;
  text-align: center;
}

/* 병합???�간 ?�드 ?��???*/
.merged-time-main {
  background-color: #eceef1 !important;
  /* 병합 블록??좌측 ?��? ::before가 ??번만 그려 ?��? ?�치�?막는?? */
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: none !important;
  padding-top: 0 !important;
  padding-right: 0 !important;
  /* ?�버?�이 ?�이 계산�??�치?�키�??�해 ?�직 ?�딩 ?�거 */
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  position: relative;
  overflow: visible !important;
  isolation: isolate;
  z-index: 5;
}

/* 병합???�간?? 보조?�???�의 배경/?�두리�? ?��??�서
   ?�체가 ?�나??�?블록처럼 보이?�록 ?�다 */
.merged-time-secondary {
  background-color: #eceef1 !important;
  /* ?�간??기본 배경 ?��? */
  /* ?�로 경계??메인 ?�??::before가 ?�체 병합 ?�이�?그림 */
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  /* ?�단 경계???�거 */
  border-bottom: none !important;
  /* ?�단 경계???�거 */

  /* ?� ?�이/?�렬?� 기존 ?�과 ?�일 */
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  align-self: stretch !important;
  justify-self: stretch !important;

  /* ???�상 ?�기지 ?�음 */
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  /* 보조 ?�??병합 ?�간 ?�롯?????�역 ?�택 ?�깃으�??�용 */

  /* ?�위 구분????경계?? 가리기???��??�닝 */
  position: relative;
  overflow: hidden !important;
}

/* 병합???�간?�의 마�?�??�: ?�단 경계?�만 ?��? */
.merged-time-last {
  border-bottom: 2px solid #ccc !important;
  /* 별도 ?�단 ?�두�?지???�음: ?�의 2px 경계???�출�??�께 ?��????��? */
}

.time-entry.merge-hover .time-slot-container.merged-time-last,
.time-entry.merge-selecting .time-slot-container.merged-time-last,
.time-entry.merge-selected-range .time-slot-container.merged-time-last,
.time-entry.existing-merged-range .time-slot-container.merged-time-last {
  border-bottom-color: var(--merge-outline) !important;
}

.merged-secondary-hidden {
  display: none !important;
}

.time-entry.merge-capable .merged-time-main .time-slot-merge-affordance {
  display: none !important;
  pointer-events: none !important;
}

.merged-time-main .time-label {
  white-space: nowrap;
}

.time-slot-label,
.time-range-label {
  box-sizing: border-box;
  display: block;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-align: center;
  text-overflow: clip;
  white-space: nowrap;
}

.time-range-label {
  padding: 0 1px;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  line-height: 1.1;
  letter-spacing: 0;
}

/* 병합 시간 라벨: 시작 / 가는 세로선 / 끝(흐리게)을 세로로 쌓는다(라벨은 block, 조각도 block). */
.time-range-start,
.time-range-end {
  display: block;
  line-height: 1;
}

.time-range-end {
  line-height: 1.15;
  opacity: 0.55;
}

.time-range-divider {
  display: block;
  width: 1px;
  height: 10px;
  margin: 5px auto;
  background: currentColor;
  opacity: 0.3;
}

/* Merged time rail: draw the inner edge once across the whole block. */
.merged-time-main::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--merged-block-height, 100%);
  background: #eceef1;
  border: none;
  border-bottom: 2px solid #ccc;
  box-sizing: border-box;
  box-shadow: inset -2px 0 0 #ddd;
  pointer-events: none;
  z-index: 6;
}
.time-entry.merge-hover .time-slot-container.merged-time-main::before,
.time-entry.merge-selecting .time-slot-container.merged-time-main::before,
.time-entry.merge-selected-range .time-slot-container.merged-time-main::before,
.time-entry.existing-merged-range .time-slot-container.merged-time-main::before {
  border-bottom-color: var(--merge-outline);
  box-shadow:
    inset -2px 0 0 var(--merge-outline),
    inset 0 2px 0 var(--merge-outline);
}

/* 병합???�간??컨텐�??�이�?버튼) 중앙 ?�렬???�퍼 */
.merged-time-content {
  position: relative;
  z-index: 10;
  /* ?�곽??가�??�버?�이보다 ??*/
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

#planTitleInput,
.plan-title-input {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid #dcdfe3;
  border-radius: 6px;
  font-size: 14px;
  background: #fff;
}

.plan-title-input {
  text-align: left;
  cursor: pointer;
  position: relative;
  padding-right: 26px;
}

.plan-title-input::after {
  content: "??;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: #95a5a6;
}

.plan-title-input.empty {
  color: #9aa3ad;
}

#planTitleOptions {
  list-style: none;
  margin: 0;
  padding: 4px;
}

#planTitleOptions li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
}

#planTitleOptions li:hover,
#planTitleOptions li.active {
  background: #f5f9ff;
}

#planTitleOptions .title-option-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #2c3e50;
}

#planTitleOptions .title-option-meta {
  font-size: 12px;
  color: #7f8c8d;
}


.plan-tab:focus {
  outline: 2px solid #1d3f73;
  outline-offset: 2px;
}

.inline-plan-tabs .plan-tab[data-source="local"] {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fecaca;
  font-weight: 600;
}

.inline-plan-tabs .plan-tab[data-source="local"]:hover {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fca5a5;
}

.inline-plan-tabs .plan-tab[data-source="local"].active {
  background: #dc2626;
  color: #fff;
  border-color: #dc2626;
}

.chip {
  background: #ecf5ff;
  color: #2c3e50;
  border: 1px solid #b6dbff;
  border-radius: 12px;
  padding: 4px 8px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.chip-label {
  white-space: nowrap;
}

.pr-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 999px;
  background: #e6e9ef;
  color: #34495e;
  line-height: 1.2;
  font-weight: 600;
}

.pr-badge[data-pr="1"] {
  background: #f4d2d1;
  color: #9f3a3a;
}

.pr-badge[data-pr="2"] {
  background: #f3e2b5;
  color: #8a5c14;
}

.pr-badge[data-pr="3"] {
  background: #e5dcf4;
  color: #684699;
}

.pr-badge[data-pr="4"] {
  background: #d6e7f4;
  color: #2a6693;
}

.pr-badge[data-pr="5"] {
  background: #d6e8dd;
  color: #2f6144;
}

.pr-badge[data-pr="6"] {
  background: #e5d8cd;
  color: #71533c;
}

.pr-badge[data-pr="7"] {
  background: #f3d2e6;
  color: #984472;
}

.pr-badge[data-pr="8"] {
  background: #efd9c3;
  color: #8b4d20;
}

.pr-badge[data-pr="9"] {
  background: #dcdfe3;
  color: #4a4f55;
}

.pr-badge[data-pr="10"] {
  background: #e7e6e2;
  color: #5a5a57;
}

.chip .remove-chip {
  background: transparent;
  border: none;
  cursor: pointer;
  color: #1d3f73;
}

.multi-input-row {
  display: flex;
  gap: 6px;
  align-items: center;
}

#activityInput {
  flex: 1;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 6px 8px;
}

.add-option-btn {
  background: #2a4f86;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 6px 10px;
  cursor: pointer;
}

.add-option-btn:hover {
  background: #1d3f73;
}

.sync-btn {
  background: #7f8c8d;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 6px 10px;
  cursor: pointer;
}

.sync-btn:hover {
  background: #707b7c;
}

.dropdown {
  border: 1px solid #eee;
  border-radius: 6px;
  margin-top: 6px;
  max-height: 160px;
  overflow: auto;
}

#activityOptions {
  list-style: none;
  margin: 0;
  padding: 4px;
}

#activityOptions li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 4px;
}

#activityOptions li.disabled-option {
  opacity: 0.55;
  cursor: not-allowed;
}

#activityOptions li.disabled-option .option-label {
  color: #95a5a6;
}

#activityOptions li.disabled-option input[type="checkbox"] {
  cursor: not-allowed;
}

#activityOptions li:hover {
  background: #f5f9ff;
}

.option-actions {
  display: flex;
  gap: 4px;
}

.empty-option {
  padding: 10px;
  color: #7f8c8d;
  font-size: 13px;
  text-align: center;
}

.opt-btn {
  border: none;
  background: #eceef1;
  color: #2c3e50;
  border-radius: 4px;
  padding: 2px 6px;
  cursor: pointer;
  font-size: 12px;
}

.opt-btn:hover {
  background: #dfe6e9;
}

#activityOptions li span {
  white-space: nowrap;
}

.inline-plan-dropdown {
  position: absolute;
  background: #fff;
  border: 1px solid #e5e9ed;
  border-radius: 14px;
  box-shadow: 0 4px 10px rgba(8, 28, 52, 0.06), 0 18px 44px rgba(8, 28, 52, 0.14);
  padding: 12px;
  /* Above selection overlays (900) and floating range buttons (1000) so
     dropdown controls stay clickable even while a range is highlighted. */
  z-index: 1100;
  max-height: calc(100vh - 28px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  overscroll-behavior: contain;
}

/* 칩 보드만 줄어드는 세로 flex: 드롭다운의 max-height(앵커 아래 남은 높이)를 넘기면 보드가 그만큼
   줄고 보드 안에서만 스크롤한다. 블록 배치일 때는 보드(360px)가 패널을 넘겨 패널도 스크롤됐고,
   보드의 overscroll-behavior: contain 때문에 휠이 패널로 넘어가지 않아 보드 끝(새 카드 자리)이
   패널 밖에 갇혔으며, 패널 다른 곳의 휠은 페이지로 새어 드롭다운이 페이지를 따라 움직였다(2026-10-07).
   모바일 시트는 responsive.css가 같은 일을 한다. */
.inline-plan-dropdown:not(.inline-plan-dropdown-sheet) {
  display: flex;
  flex-direction: column;
}

.inline-plan-dropdown:not(.inline-plan-dropdown-sheet) > * {
  flex-shrink: 0;
}

.inline-plan-dropdown:not(.inline-plan-dropdown-sheet) > .activity-chip-board-shell {
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.inline-plan-dropdown:not(.inline-plan-dropdown-sheet) > .activity-chip-board-shell > .activity-chip-board {
  flex: 0 1 auto;
  min-height: 96px;
}

.inline-plan-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 28, 52, 0.36);
  z-index: 49;
}

body.inline-plan-sheet-open {
  overflow: hidden;
}

body.inline-plan-sheet-open #timeEntries.inline-plan-context-active .time-entry {
  filter: none;
  opacity: 1;
  transition: box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

body.inline-plan-sheet-open #timeEntries.inline-plan-context-active .time-entry.inline-plan-context-keep-clear {
  filter: none;
  opacity: 1;
  transform: none;
  position: relative;
  pointer-events: none;
}


body.inline-plan-sheet-open .inline-plan-sheet-context-target {
  position: relative;
  z-index: 60;
  pointer-events: auto;
}

body.inline-plan-sheet-open .split-cell-wrapper.split-type-planned.inline-plan-sheet-context-target .planned-input {
  pointer-events: auto;
}

.inline-plan-dropdown .plan-tabs {
  margin-bottom: 8px;
}

.inline-plan-input-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 6px;
  margin-bottom: 8px;
}

/* Segment sheets show the 비우기 action above the input row, pinned to the
   panel's top-right so it never crowds the search field or + button. */
.inline-plan-top-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 8px;
}

.inline-plan-top-actions[hidden] {
  display: none;
}

.inline-plan-input-row.inline-plan-input-row-mobile-close {
  grid-template-columns: 36px minmax(0, 1fr) 40px 40px;
  gap: 0;
  align-items: center;
  border: 1px solid #dcdfe3;
  border-radius: 16px;
  background: #f3f4f6;
  padding: 3px;
  box-sizing: border-box;
}

.inline-plan-input-row.inline-plan-input-row-mobile-close:focus-within {
  border-color: #5b9fff;
  box-shadow: 0 0 0 3px rgba(91, 159, 255, 0.18);
}

.inline-plan-input {
  padding: 8px 10px;
  border: 1px solid #dcdfe3;
  border-radius: 8px;
  font-size: 16px;
}

.inline-plan-input-row.inline-plan-input-row-mobile-close .inline-plan-close-btn {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  min-width: 0;
  min-height: 36px;
  font-size: 16px;
  font-weight: 600;
  color: #5f6873;
  border: 1px solid #dcdfe3;
  border-right: 0;
  border-radius: 8px 0 0 8px;
  background: #fff;
  box-sizing: border-box;
  margin-right: -4px;
}

.inline-plan-input-row.inline-plan-input-row-mobile-close .inline-plan-input {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  min-height: 36px;
  border: 1px solid #dcdfe3;
  border-left: 0;
  border-radius: 0 8px 8px 0;
  background: #fff;
  box-shadow: none;
  font-size: 16px;
  padding: 0 8px;
  box-sizing: border-box;
}

.inline-plan-input-row.inline-plan-input-row-mobile-close .inline-plan-input:focus,
.inline-plan-input-row.inline-plan-input-row-mobile-close .inline-plan-input:focus-visible {
  outline: none;
  box-shadow: none;
  border-color: #dcdfe3;
}

.inline-plan-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  min-height: 52px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #636b75;
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
  touch-action: manipulation;
}

.inline-plan-close-btn:hover {
  background: transparent;
}

.inline-plan-input-row.inline-plan-input-row-mobile-close .inline-plan-close-btn:hover,
.inline-plan-input-row.inline-plan-input-row-mobile-close .inline-plan-close-btn:focus,
.inline-plan-input-row.inline-plan-input-row-mobile-close .inline-plan-close-btn:active,
.inline-plan-input-row.inline-plan-input-row-mobile-close .inline-plan-close-btn:focus-visible {
  background: #fff;
  color: #5f6873;
  border-color: #dcdfe3;
  box-shadow: none;
  outline: none;
}

.inline-plan-input-row.inline-plan-input-row-mobile-close .inline-plan-add-btn,
.inline-plan-input-row.inline-plan-input-row-mobile-close .inline-plan-sync-btn {
  grid-row: 1;
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 36px;
  padding: 0;
  border-radius: 8px;
  font-size: 15px;
  box-sizing: border-box;
  justify-self: center;
  align-self: center;
}

.inline-plan-input-row.inline-plan-input-row-mobile-close .inline-plan-add-btn {
  grid-column: 3;
  margin-left: 2px;
}

.inline-plan-input-row.inline-plan-input-row-mobile-close .inline-plan-sync-btn {
  grid-column: 4;
  margin-left: 2px;
}

.inline-plan-add-btn,
.inline-plan-sync-btn {
  padding: 8px 10px;
  border: 1px solid #dcdfe3;
  border-radius: 8px;
  background: #f4f6f8;
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

.inline-plan-add-btn {
  background: #2a4f86;
  color: white;
  border-color: #2a4f86;
}

.inline-plan-add-btn:hover {
  background: #1d3f73;
}

.inline-plan-sync-btn {
  background: #e74c3c;
  color: white;
  border-color: #e74c3c;
}

.inline-plan-sync-btn:hover {
  background: #c0392b;
  border-color: #c0392b;
}

.inline-plan-options {
  border: 1px solid #eee;
  border-radius: 8px;
  max-height: 240px;
  overflow: auto;
  background: #f9fafb;
}

.inline-plan-options-list {
  list-style: none;
  margin: 0;
  padding: 0 8px 8px;
}

/* 보드는 세로 스크롤만 허용한다. 칩 끌기는 터치에서 길게 눌러야 들리므로 칩도
   pan-y를 유지하고, 들린 뒤의 스크롤은 컨트롤러가 touchmove를 막아 멈춘다.
   카드가 세로로 쌓이므로 예전 280px보다 조금 넉넉하게 둔다. */
.activity-chip-board {
  border: 1px solid #e6ebf1;
  border-radius: 8px;
  max-height: 360px;
  overflow: auto;
  background: #f9fafb;
  padding: 10px;
  touch-action: pan-y;
  overscroll-behavior: contain;
}

/* 스크롤 힌트: 보드가 max-height에 걸려 잘렸을 때만, 잘린 방향 가장자리를 흐린다.
   마스크는 스크롤 뷰포트 기준이라 페이드가 늘 가장자리에 붙어 있고, 끝까지
   스크롤하면 컨트롤러가 클래스를 떼어 페이드도 사라진다. */
.activity-chip-board-fade-bottom {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), rgba(0, 0, 0, 0.15) 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), rgba(0, 0, 0, 0.15) 100%);
}

.activity-chip-board-fade-top {
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.15) 0, #000 22px);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.15) 0, #000 22px);
}

.activity-chip-board-fade-top.activity-chip-board-fade-bottom {
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.15) 0,
    #000 22px,
    #000 calc(100% - 22px),
    rgba(0, 0, 0, 0.15) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.15) 0,
    #000 22px,
    #000 calc(100% - 22px),
    rgba(0, 0, 0, 0.15) 100%
  );
}

.activity-chip-board-shell {
  position: relative;
}

.activity-chip-board-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
  min-height: 28px;
}

.activity-chip-delete-mode-toggle {
  height: 28px;
  padding: 0 10px;
  border: 1px solid #d4dce6;
  border-radius: 999px;
  background: #ffffff;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}

.activity-chip-delete-mode-toggle:hover,
.activity-chip-delete-mode-toggle:focus-visible {
  border-color: #ef9a9a;
  background: #fff5f5;
  color: #b42318;
  outline: none;
  box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.12);
}

.activity-chip-rename-mode-toggle {
  height: 28px;
  padding: 0 10px;
  border: 1px solid #d4dce6;
  border-radius: 999px;
  background: #ffffff;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}

.activity-chip-rename-mode-toggle:hover,
.activity-chip-rename-mode-toggle:focus-visible {
  border-color: #a7b6cd;
  background: #f0f7ff;
  color: #0f2c57;
  outline: none;
  box-shadow: 0 0 0 3px rgba(42, 79, 134, 0.14);
}

.activity-chip-rename-mode-toggle[aria-pressed="true"] {
  border-color: #a7b6cd;
  background: #f2f4f8;
  color: #0f2c57;
}

.activity-chip-delete-mode-toggle[aria-pressed="true"] {
  border-color: #fca5a5;
  background: #fff1f2;
  color: #b42318;
}

.activity-chip-card-reorder-mode-toggle {
  height: 28px;
  padding: 0 10px;
  border: 1px solid #d4dce6;
  border-radius: 999px;
  background: #ffffff;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}

.activity-chip-card-reorder-mode-toggle:hover,
.activity-chip-card-reorder-mode-toggle:focus-visible {
  border-color: #a7b6cd;
  background: #f0f7ff;
  color: #0f2c57;
  outline: none;
  box-shadow: 0 0 0 3px rgba(42, 79, 134, 0.14);
}

.activity-chip-card-reorder-mode-toggle[aria-pressed="true"] {
  border-color: #a7b6cd;
  background: #f2f4f8;
  color: #0f2c57;
}

.activity-chip-undo-toast {
  width: 100%;
  display: block;
  box-sizing: border-box;
  min-height: 36px;
  margin: 0 0 8px;
  padding: 5px 10px;
  border: 1px solid #cdd6e4;
  border-radius: 8px;
  background: #f2f4f8;
  color: #0f2c57;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  cursor: pointer;
}

.activity-chip-undo-toast:hover,
.activity-chip-undo-toast:focus-visible {
  border-color: #7d90b0;
  background: #e5eaf2;
  outline: none;
  box-shadow: 0 0 0 3px rgba(42, 79, 134, 0.14);
}

.inline-plan-chip-delete-mode .activity-chip-board {
  border-color: #f2c2c2;
}

.inline-plan-chip-rename-mode .activity-chip-board {
  border-color: #bcd6f2;
}

.activity-chip-board-rename-mode .activity-chip {
  cursor: text;
}

.activity-chip-rename-icon {
  flex: 0 0 auto;
  margin-left: 7px;
  align-self: center;
  font-size: 12px;
  line-height: 1;
  color: #94a3b8;
  pointer-events: none;
}

.activity-chip-board-rename-mode .activity-chip-main:hover .activity-chip-rename-icon,
.activity-chip-board-rename-mode .activity-chip-main:focus-visible .activity-chip-rename-icon {
  color: #163a6e;
}

.activity-chip.activity-chip-renaming {
  border-color: #a7b6cd;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(42, 79, 134, 0.14);
}

.activity-chip.activity-chip-renaming .activity-chip-rename-icon {
  display: none;
}

.activity-chip.activity-chip-rename-disabled {
  opacity: 0.55;
}

.activity-chip.activity-chip-rename-disabled .activity-chip-main,
.activity-chip.activity-chip-rename-disabled[role="button"] {
  cursor: not-allowed;
}

.activity-chip-rename-input {
  -webkit-user-select: text;
  user-select: text;
  min-width: 5ch;
  max-width: 24ch;
  border: none;
  outline: none;
  margin: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  align-self: center;
}

.activity-chip-rename-input.activity-chip-rename-input-error {
  color: #b42318;
  text-decoration: underline wavy rgba(244, 63, 94, 0.6);
  text-underline-offset: 3px;
}

.inline-plan-chip-delete-mode .activity-chip-main {
  padding-inline-end: 8px;
}

.inline-plan-chip-delete-mode .activity-chip-split .activity-chip-main {
  padding-inline-end: 10px;
}

.activity-chip-board-section + .activity-chip-board-section,
.activity-chip-board-section + .activity-chip-card-list,
.activity-chip-card-list + .activity-chip-board-section {
  margin-top: 12px;
}

/* ===== 활동 카드: 보드 안에 세로로 쌓인 흰 카드. 타이틀은 섹션 라벨(12px 회색)과
   위계를 벌려 "제목"으로 읽히게 한다. 탭하면 그 자리에서 이름을 고친다. ===== */
.activity-chip-card-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.activity-chip-card {
  margin: 0;
  padding: 8px 10px 10px;
  border: 1px solid #e5e9ed;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(8, 28, 52, 0.04);
  transition: border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
}

.activity-chip-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  margin-bottom: 6px;
}

.activity-chip-card-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 32px;
  max-width: 100%;
  margin: 0 0 0 -6px;
  padding: 0 6px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #0f172a;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.25;
  text-align: left;
  cursor: text;
  transition: background 0.14s ease;
}

.activity-chip-card-title-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.activity-chip-card-title-icon {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  color: #94a3b8;
  transition: color 0.14s ease;
}

.activity-chip-card-title:hover,
.activity-chip-card-title:focus-visible {
  background: #f3f5f7;
  outline: none;
}

.activity-chip-card-title:hover .activity-chip-card-title-icon,
.activity-chip-card-title:focus-visible .activity-chip-card-title-icon {
  color: #163a6e;
}

.activity-chip-card-title-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 32px;
  margin: 0 0 0 -6px;
  padding: 0 6px;
  border: 1px solid #a7b6cd;
  border-radius: 8px;
  background: #ffffff;
  color: #0f172a;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  -webkit-user-select: text;
  user-select: text;
  box-shadow: 0 0 0 3px rgba(42, 79, 134, 0.14);
  outline: none;
}

.activity-chip-card-title-input-error {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.14);
}

.activity-chip-card-count {
  flex: 0 0 auto;
  min-width: 20px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #f3f5f7;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

.activity-chip-card-delete {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin-left: auto;
  border: 1px solid #fca5a5;
  border-radius: 999px;
  background: #fff1f2;
  color: #b42318;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.activity-chip-card-delete:hover,
.activity-chip-card-delete:focus-visible {
  background: #ffe4e6;
  outline: none;
  box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.12);
}

/* 카드 순서 모드: 헤더 오른쪽 끝의 ▲▼. 끝 카드의 바깥 방향 버튼은 꺼진다. */
.activity-chip-card-move {
  flex: 0 0 auto;
  display: inline-flex;
  gap: 4px;
  margin-left: auto;
}

.activity-chip-card-move-btn {
  width: 32px;
  height: 28px;
  padding: 0;
  border: 1px solid #a7b6cd;
  border-radius: 8px;
  background: #f2f4f8;
  color: #0f2c57;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}

.activity-chip-card-move-btn:hover:not(:disabled),
.activity-chip-card-move-btn:focus-visible {
  background: #e5eaf2;
  outline: none;
  box-shadow: 0 0 0 3px rgba(42, 79, 134, 0.14);
}

.activity-chip-card-move-btn:disabled {
  border-color: #e5e9ed;
  background: #f9fafb;
  color: #cfd6dd;
  cursor: default;
}

.activity-chip-card-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 10px;
  border: 1px dashed #cfd6dd;
  border-radius: 10px;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.activity-chip-card-add {
  display: block;
  width: 100%;
  min-height: 36px;
  padding: 0 12px;
  border: 1px dashed #cfd6dd;
  border-radius: 12px;
  background: transparent;
  color: #475569;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

.activity-chip-card-add:hover,
.activity-chip-card-add:focus-visible {
  border-color: #a7b6cd;
  background: #f0f7ff;
  color: #0f2c57;
  outline: none;
}

/* 카드 헤더의 ＋: 그 카드에 바로 활동을 만든다. 칩 수 알약 뒤 오른쪽 끝. */
.activity-chip-card-item-add {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin-left: auto;
  padding: 0;
  border: 1px solid #cfd6dd;
  border-radius: 999px;
  background: #ffffff;
  color: #163a6e;
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease;
}

.activity-chip-card-item-add:focus-visible {
  border-color: #a7b6cd;
  background: #f0f7ff;
  outline: none;
}

@media (hover: hover) {
  .activity-chip-card-item-add:hover {
    border-color: #a7b6cd;
    background: #f0f7ff;
  }
}

.activity-chip-card-composer {
  margin-top: 8px;
}

.activity-chip-card-composer-input,
.inline-plan-child-composer-input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 34px;
  padding: 0 10px;
  border: 1px solid #a7b6cd;
  border-radius: 8px;
  background: #ffffff;
  color: #0f172a;
  font: inherit;
  font-size: 14px;
  -webkit-user-select: text;
  user-select: text;
  outline: none;
}

.activity-chip-card-composer-input:focus,
.inline-plan-child-composer-input:focus {
  box-shadow: 0 0 0 3px rgba(42, 79, 134, 0.14);
}

.activity-chip-card-composer-input-error,
.inline-plan-child-composer-input-error {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.14);
}

/* 끄는 동안 놓을 카드를 강조한다. 빈 카드 안내도 함께 밝힌다. */
.activity-chip-card.activity-chip-card-drop-target {
  border-color: #163a6e;
  background: #f8fbff;
  box-shadow: 0 0 0 3px rgba(22, 58, 110, 0.14);
}

.activity-chip-card-drop-target .activity-chip-card-empty {
  border-color: #7d90b0;
  color: #0f2c57;
}

.activity-chip-board-title {
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 700;
  color: #637083;
}

.activity-chip-board-note {
  margin: 0 0 8px;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.activity-chip-board-note {
  margin-top: -3px;
}

.activity-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* 칩 라벨은 어느 모드에서도 드래그 선택 대상이 아니다 (모바일 롱프레스
   텍스트 콜아웃 방지). 인라인 이름 편집 입력만 예외로 되돌린다. */
.activity-chip {
  display: inline-flex;
  align-items: stretch;
  max-width: 100%;
  min-height: 38px;
  -webkit-user-select: none;
  user-select: none;
  border: 1px solid #d5dee8;
  border-radius: 11px;
  background: #ffffff;
  color: #111827;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(8, 28, 52, 0.035),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transition:
    border-color 0.14s ease,
    background 0.14s ease,
    box-shadow 0.14s ease;
}

/* 끌 수 있는 칩: 스크롤(pan-y)은 그대로 두고, 길게 누를 때 iOS 콜아웃만 막는다. */
.activity-chip[data-draggable-activity="true"] {
  -webkit-touch-callout: none;
  touch-action: pan-y;
}

/* 누르는 중(아직 들리기 전). 짧은 탭·스크롤에는 보이지 않게 120ms 늦게 눌림이 시작되고,
   길게 누르면 살짝 눌렸다가 들린다. */
.activity-chip-drag-pending {
  transform: scale(0.97);
  border-color: #a7b6cd;
  background: #f2f4f8;
  transition:
    transform 0.18s ease 0.12s,
    border-color 0.14s ease 0.12s,
    background 0.14s ease 0.12s;
}

.activity-chip-board-drag-active {
  cursor: grabbing;
  overscroll-behavior: contain;
}

/* 끄는 동안 데스크톱 커서는 어디서든 grabbing. */
html.activity-chip-drag-cursor,
html.activity-chip-drag-cursor * {
  cursor: grabbing !important;
}

.activity-chip-drag-preview {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2147483647;
  display: inline-flex;
  align-items: stretch;
  max-width: min(420px, calc(100vw - 24px));
  min-height: 38px;
  pointer-events: none;
  transform: translate3d(-9999px, -9999px, 0);
  will-change: transform;
  opacity: 0.98;
  box-sizing: border-box;
  filter: drop-shadow(0 14px 28px rgba(8, 28, 52, 0.18));
}

.activity-chip-drag-preview .activity-chip,
.activity-chip-drag-preview-chip {
  width: 100%;
  height: 100%;
  min-height: inherit;
  max-width: 100%;
  pointer-events: none;
  border-color: #a7b6cd;
  background: #ffffff;
  box-shadow:
    0 0 0 2px rgba(22, 58, 110, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.activity-chip-drag-preview .activity-chip-main,
.activity-chip-drag-preview .activity-chip-caret {
  cursor: grabbing;
}

/* 들린 프리뷰: 붙은 크기에서 다음 프레임에 살짝 커지고 기울며 그림자가 깊어진다. */
.activity-chip-drag-preview .activity-chip-drag-preview-chip {
  transform-origin: 30% 50%;
  transition: transform 0.14s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.14s ease;
}

.activity-chip-drag-preview.is-lifted .activity-chip-drag-preview-chip {
  transform: scale(1.06) rotate(-1.5deg);
  box-shadow:
    0 0 0 2px rgba(22, 58, 110, 0.16),
    0 12px 24px rgba(8, 28, 52, 0.22);
}

@media (prefers-reduced-motion: reduce) {
  .activity-chip-drag-pending,
  .activity-chip-drag-preview .activity-chip-drag-preview-chip {
    transition: none;
  }

  .activity-chip-drag-preview.is-lifted .activity-chip-drag-preview-chip {
    transform: scale(1.04);
  }
}

.activity-chip-drag-preview .activity-chip-main {
  flex: 1 1 auto;
}

/* 들린 칩의 원래 자리: 흐린 점선 자리표시. */
.activity-chip-dragging {
  opacity: 0.38;
  border-style: dashed;
  border-color: #94a3b8;
  box-shadow: none;
}

.activity-chip-drop-before,
.activity-chip-drop-after,
.activity-chip-drop-nest,
.activity-chip-drop-invalid {
  position: relative;
  overflow: visible;
}

.activity-chip-drop-before::before,
.activity-chip-drop-after::after {
  content: "";
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 3px;
  border-radius: 999px;
  background: #163a6e;
  box-shadow: 0 0 0 3px rgba(22, 58, 110, 0.14);
}

.activity-chip-drop-before::before {
  left: -6px;
}

.activity-chip-drop-after::after {
  right: -6px;
}

.activity-chip-drop-nest {
  border-color: #163a6e;
  background: #f2f4f8;
  box-shadow:
    0 0 0 3px rgba(22, 58, 110, 0.14),
    inset 0 0 0 1px rgba(22, 58, 110, 0.22);
}

.activity-chip-drop-invalid {
  border-color: #ef4444;
  background: #fff5f5;
  box-shadow:
    0 0 0 3px rgba(239, 68, 68, 0.12),
    inset 0 0 0 1px rgba(239, 68, 68, 0.2);
}

.activity-chip-drop-label {
  position: absolute;
  top: 3px;
  left: 50%;
  z-index: 5;
  transform: translateX(-50%);
  padding: 2px 7px;
  max-width: calc(100% - 8px);
  border-radius: 999px;
  background: #0f2c57;
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  box-shadow: 0 8px 16px rgba(8, 28, 52, 0.14);
}

.activity-chip-drop-before .activity-chip-drop-label {
  left: 4px;
  transform: none;
}

.activity-chip-drop-after .activity-chip-drop-label {
  right: 4px;
  left: auto;
  transform: none;
}

.activity-chip-drop-label-invalid {
  background: #dc2626;
}

.activity-chip-parent {
  padding: 0;
}

.activity-chip-split {
  overflow: hidden;
  isolation: isolate;
}

.activity-chip-split.activity-chip-drop-before,
.activity-chip-split.activity-chip-drop-after,
.activity-chip-split.activity-chip-drop-nest,
.activity-chip-split.activity-chip-drop-invalid {
  overflow: visible;
}

button.activity-chip,
.activity-chip-main,
.activity-chip-caret {
  min-height: 38px;
  border: 0;
  color: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition:
    background 0.14s ease,
    color 0.14s ease,
    box-shadow 0.14s ease;
}

button.activity-chip,
.activity-chip-main {
  padding: 0 13px;
  background: transparent;
}

.activity-chip-main {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.activity-chip-split .activity-chip-main {
  flex: 1 1 auto;
  justify-content: flex-start;
  padding-inline-end: 15px;
}

.activity-chip-label {
  min-width: 0;
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activity-chip-caret {
  position: relative;
  width: 38px;
  flex: 0 0 38px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #334155;
  background:
    linear-gradient(
      180deg,
      rgba(249, 251, 253, 0.96) 0%,
      rgba(244, 247, 251, 0.96) 100%
    );
}

.activity-chip-caret::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  bottom: 9px;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(207, 214, 221, 0.85) 18%,
    rgba(207, 214, 221, 0.85) 82%,
    transparent 100%
  );
}

.activity-chip:hover,
.activity-chip:focus-within {
  border-color: #b7c8da;
  background: #fff;
  box-shadow:
    0 2px 5px rgba(8, 28, 52, 0.045),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.activity-chip-split .activity-chip-main:hover {
  background: #fbfdff;
}

/* 세부활동이 없는 칩의 캐럿: 팝업은 열리지만(첫 세부활동 추가) 있는 부모보다 옅게. */
.activity-chip-split .activity-chip-caret.activity-chip-caret-empty {
  color: #a7b2c0;
}

.activity-chip-split .activity-chip-caret:hover {
  background:
    linear-gradient(
      180deg,
      rgba(243, 245, 247, 1) 0%,
      rgba(236, 242, 248, 1) 100%
    );
  color: #0f172a;
}

.activity-chip-split .activity-chip-caret:active {
  background: #eef6ff;
  color: #163a6e;
}

.activity-chip-main:focus-visible,
.activity-chip-caret:focus-visible {
  outline: 2px solid rgba(42, 79, 134, 0.45);
  outline-offset: -2px;
}

.activity-chip-split .activity-chip-caret:focus-visible,
.activity-chip-split .activity-chip-main:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(42, 79, 134, 0.28);
}

.activity-chip.activity-chip-open {
  position: relative;
  z-index: 31;
  border-color: #b7c8da;
  background: #fff;
}

.activity-chip.activity-chip-open .activity-chip-caret {
  position: relative;
  z-index: 1;
  color: #0f172a;
  background:
    linear-gradient(
      180deg,
      rgba(243, 245, 247, 1) 0%,
      rgba(236, 242, 248, 1) 100%
    );
}

.activity-chip.activity-chip-open .activity-chip-caret svg {
  transform: translateX(1px) rotate(180deg);
}

.activity-chip-caret svg {
  width: 15px;
  height: 15px;
  stroke-width: 2.25;
  transform: translateX(1px);
  pointer-events: none;
}

.activity-chip-delete {
  position: relative;
  flex: 0 0 24px;
  width: 24px;
  min-width: 24px;
  height: 24px;
  margin: 0 4px 0 2px;
  border: 1px solid #fecaca;
  border-radius: 999px;
  background: #fff1f2;
  color: #be123c;
  font-size: 14px;
  line-height: 1;
  font-weight: 800;
  cursor: pointer;
  align-self: center;
  z-index: 1;
  box-shadow: 0 2px 4px rgba(8, 28, 52, 0.12);
}

.activity-chip-delete::before,
.activity-chip-color-swatch::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 999px;
}

.activity-chip-delete:hover,
.activity-chip-delete:focus-visible {
  background: #ffe4e6;
  border-color: #fb7185;
  color: #9f1239;
  outline: none;
}

/* Single color indicator on each chip; tapping it opens the palette popover. */
.activity-chip-color-dot {
  position: relative;
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  min-width: 15px;
  margin-left: 8px;
  align-self: center;
  border-radius: 50%;
  border: 1px solid rgba(8, 28, 52, 0.22);
  background: var(--activity-chip-color, #fff);
  padding: 0;
  cursor: pointer;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.55);
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

.activity-chip-color-dot::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 999px;
}

.activity-chip-color-dot-empty::after {
  content: '';
  position: absolute;
  left: 2px;
  right: 2px;
  top: 50%;
  height: 1.5px;
  margin-top: -0.75px;
  border-radius: 2px;
  background: #cfd6dd;
  transform: rotate(-45deg);
}

.activity-chip-color-dot:hover,
.activity-chip-color-dot:focus-visible,
.activity-chip-color-dot[aria-expanded="true"] {
  border-color: #163a6e;
  box-shadow: 0 0 0 3px rgba(22, 58, 110, 0.16);
  outline: none;
}

.chip-color-popover {
  position: absolute;
  z-index: 120;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid #dbe3ec;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(8, 28, 52, 0.18);
}

.activity-chip-color-swatch {
  position: relative;
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 50%;
  border: 1px solid rgba(8, 28, 52, 0.18);
  background: var(--activity-chip-color, #fff);
  padding: 0;
  flex: 0 0 auto;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.activity-chip-color-swatch:hover {
  transform: scale(1.12);
  box-shadow: 0 2px 6px rgba(8, 28, 52, 0.16);
}

.activity-chip-color-swatch[aria-pressed="true"] {
  outline: 2px solid rgba(8, 28, 52, 0.5);
  outline-offset: 2px;
}

.activity-chip-color-swatch:focus-visible {
  outline: 2px solid rgba(22, 58, 110, 0.82);
  outline-offset: 2px;
}

.activity-chip-color-swatch-clear::after {
  content: '';
  position: absolute;
  left: 3px;
  right: 3px;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background: #f43f5e;
  opacity: 0.65;
  transform: rotate(-45deg);
}

/* 파스텔 여섯과 루히츠 한 칸 사이의 가는 칸막이(2026-10-23). 루히츠 견본·칩 색 점은 남색 원 + 가운데 금 점(남색 위 금 L). */
.activity-chip-color-swatch[data-color="#163A6E"],
.activity-chip-color-dot.is-luhitz-color {
  background: radial-gradient(circle closest-side, #f3d58a 0 34%, #163a6e 40%);
  border-color: #0f2c57;
}

.chip-color-popover-divider {
  flex: 0 0 auto;
  width: 1px;
  height: 18px;
  background: #d6dbe1;
}

@media (max-width: 380px) {
  .chip-color-popover {
    gap: 7px;
    padding: 10px;
  }
}

.activity-chip-drag-preview .activity-chip-caret,
.activity-chip-drag-preview .activity-chip-delete,
.activity-chip-drag-preview .activity-chip-color-dot,
.activity-chip-drag-preview .activity-chip-color-swatches {
  display: none;
}

.activity-chip {
  position: relative;
}

.inline-plan-subsection .activity-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid #d5dee8;
  border-radius: 11px;
  background: #fff;
  color: #111827;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  box-shadow:
    0 1px 2px rgba(8, 28, 52, 0.035),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

/* 삭제 모드: 팝업 칩은 .activity-chip-main 래퍼가 없어 칩 루트가 곧 본문이다 —
   × 버튼이 칩 경계 안에 들어오도록 오른쪽 패딩을 직접 줄인다. */
.inline-plan-subsection .inline-plan-sub-board.activity-chip-board-delete-mode .activity-chip {
  padding-inline-end: 4px;
}

.inline-plan-subsection .activity-chip:hover,
.inline-plan-subsection .activity-chip:focus-visible {
  border-color: #b7c8da;
  background: #fbfdff;
  box-shadow:
    0 2px 5px rgba(8, 28, 52, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
  outline: none;
}

/* 종속칩: 부모칩 색을 배경 틴트 + 표시 전용 점으로 노출 */
.activity-chip.activity-chip-dependent {
  background: var(--activity-chip-tint, #ffffff);
}

.activity-chip.activity-chip-dependent:hover,
.activity-chip.activity-chip-dependent:focus-visible,
.inline-plan-subsection .activity-chip.activity-chip-dependent:hover,
.inline-plan-subsection .activity-chip.activity-chip-dependent:focus-visible {
  background: var(--activity-chip-tint, #fbfdff);
}

.activity-chip-color-dot-static {
  cursor: default;
  pointer-events: none;
}

.inline-plan-subsection {
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
  width: min(360px, calc(100vw - 32px));
  max-width: 360px;
  max-height: min(420px, calc(100vh - 96px));
  padding: 12px;
  border: 1px solid #d8e1ea;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(8, 28, 52, 0.12);
  overflow: hidden;
  z-index: 80;
}

.inline-plan-subsection[hidden] {
  display: none !important;
  visibility: hidden !important;
}

.inline-plan-dropdown:not(.inline-plan-child-popover-open) .inline-plan-subsection {
  display: none !important;
  visibility: hidden !important;
}

.inline-plan-child-popover-layer {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 2100;
  pointer-events: none;
}

.inline-plan-child-popover-layer[hidden] {
  display: none !important;
}

.inline-plan-child-popover-layer .inline-plan-subsection {
  position: fixed;
  visibility: visible;
  pointer-events: auto;
}

.inline-plan-subsection::before {
  display: none;
}

.inline-plan-subsection.inline-plan-subsection-anchored::before {
  content: "";
  position: absolute;
  top: -6px;
  left: var(--inline-plan-subsection-notch-left, 24px);
  width: 12px;
  height: 12px;
  transform: rotate(45deg);
  background: #fff;
  border-left: 1px solid #d8e1ea;
  border-top: 1px solid #d8e1ea;
  pointer-events: none;
}

/* 세부활동 패널은 .inline-plan-child-popover-layer로 포털되어
   `.inline-plan-chip-delete-mode ...` 셀렉터가 닿지 않는다 — 패널 테두리로
   메인 보드와 같은 삭제 모드 신호를 준다 (노치도 같은 색으로 맞춘다). */
.inline-plan-subsection.inline-plan-subsection-delete-mode {
  border-color: #f2c2c2;
}

.inline-plan-subsection.inline-plan-subsection-delete-mode.inline-plan-subsection-anchored::before {
  border-left-color: #f2c2c2;
  border-top-color: #f2c2c2;
}

.inline-plan-subsection-flow {
  position: relative;
  width: 100%;
  max-width: none;
  padding: 10px;
}

.inline-plan-subsection-flow::before {
  display: none;
}

.inline-plan-subsection-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
  min-width: 0;
}

.inline-plan-subsection-title {
  min-width: 0;
  flex: 1 1 auto;
  color: #0f172a;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}

.inline-plan-subsection-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #64748b;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  flex: 0 0 26px;
}

/* 세부활동 팝업 제목 줄 × 왼쪽의 ＋: 눌렀을 때만 아래 입력칸이 열린다(다시 누르면 접힘). */
.inline-plan-subsection-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #163a6e;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  flex: 0 0 26px;
}

.inline-plan-subsection-add[hidden] {
  display: none;
}

.inline-plan-subsection-add.is-active {
  background: #e5eaf2;
}

.inline-plan-subsection-add:hover,
.inline-plan-subsection-add:focus-visible,
.inline-plan-subsection-close:hover,
.inline-plan-subsection-close:focus-visible {
  background: #f3f5f7;
  color: #0f172a;
  outline: none;
}

.inline-plan-subsection .inline-plan-sub-board {
  border: 0;
  background: transparent;
  padding: 0;
  max-height: none;
  overflow: auto;
  min-height: 0;
  flex: 1 1 auto;
}

.inline-plan-child-actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.inline-plan-child-actions:empty {
  display: none;
}

.inline-plan-child-composer {
  display: flex;
  align-items: center;
  gap: 6px;
}

.inline-plan-child-composer-add {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid #2a4f86;
  border-radius: 8px;
  background: #2a4f86;
  color: #ffffff;
  font: inherit;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.inline-plan-child-composer-error {
  color: #b42318;
  font-size: 12px;
  line-height: 1.4;
}

.inline-plan-sub-board .activity-chip-row + .activity-chip-board-title,
.inline-plan-sub-board .inline-plan-empty {
  margin-top: 6px;
}

.inline-plan-empty {
  padding: 4px 8px 4px;
  color: #6b7a89;
  font-size: 13px;
  line-height: 1.4;
}

.activity-chip-new-highlight {
  border-color: #a7b6cd;
  background: #f2f4f8;
}

.activity-chip-duplicate-highlight {
  border-color: #f59e0b;
  background: #fff7ed;
}

.inline-plan-option.inline-plan-option-row {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0;
  margin-bottom: 8px;
}

.inline-plan-priority-chip {
  min-width: 48px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  border: 1px solid #e6d9d2;
  border-radius: 8px;
  padding: 4px 8px;
  background: #f7ebe6;
  color: #8f5b4b;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  cursor: pointer;
}

.inline-plan-priority-chip[data-pr="1"] {
  background: #f4d2d1;
  color: #9f3a3a;
}

.inline-plan-priority-chip[data-pr="2"] {
  background: #f3e2b5;
  color: #8a5c14;
}

.inline-plan-priority-chip[data-pr="3"] {
  background: #e5dcf4;
  color: #684699;
}

.inline-plan-priority-chip[data-pr="4"] {
  background: #d6e7f4;
  color: #2a6693;
}

.inline-plan-priority-chip[data-pr="5"] {
  background: #d6e8dd;
  color: #2f6144;
}

.inline-plan-priority-chip[data-pr="6"] {
  background: #e5d8cd;
  color: #71533c;
}

.inline-plan-priority-chip[data-pr="7"] {
  background: #f3d2e6;
  color: #984472;
}

.inline-plan-priority-chip[data-pr="8"] {
  background: #efd9c3;
  color: #8b4d20;
}

.inline-plan-priority-chip[data-pr="9"] {
  background: #dcdfe3;
  color: #4a4f55;
}

.inline-plan-priority-chip[data-pr="10"] {
  background: #e7e6e2;
  color: #5a5a57;
}

.inline-plan-priority-chip[data-empty="true"] {
  background: #f1f4f7;
  color: #7d8793;
  border-style: dashed;
}

.inline-plan-priority-chip:disabled {
  cursor: default;
  opacity: 0.8;
}

.inline-priority-menu {
  position: absolute;
  min-width: 132px;
  max-height: 360px;
  overflow-y: auto;
  background: #fbfbfc;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 16px 28px rgba(8, 28, 52, 0.16);
  padding: 8px;
  z-index: 2106;
}

.inline-priority-menu-title {
  padding: 6px 6px 10px;
  font-size: 12px;
  font-weight: 700;
  color: #7a838f;
}

.inline-priority-menu-item {
  width: 100%;
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border: none;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.inline-priority-menu-item:hover {
  background: #f3f5f7;
}

.inline-priority-menu-item.active {
  background: #eef4fb;
}

.inline-priority-menu-item .inline-plan-priority-chip {
  min-width: 0;
  width: auto;
  padding: 6px 12px;
  pointer-events: none;
}

.inline-priority-menu-grip {
  width: 8px;
  height: 18px;
  opacity: 0.55;
  background-image: radial-gradient(circle, #9aa3ad 1.2px, transparent 1.3px);
  background-size: 4px 4px;
  background-position: center;
  background-repeat: repeat-y;
}

.inline-plan-task-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid #e4ebf3;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.inline-plan-task-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}

.inline-plan-task-cell:hover {
  background: #f5f9ff;
}

.inline-plan-option.selected {
  border-radius: 12px;
}

.inline-plan-option.selected .inline-plan-task-cell {
  background: #ecf5ff;
  border-color: #b6dbff;
  box-shadow: inset 0 0 0 1px rgba(42, 79, 134, 0.08);
}

.inline-plan-task-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.inline-plan-option-label {
  min-width: 0;
  flex: 1 1 auto;
  display: inline-block;
  position: relative;
  top: -0.01px;
  font-size: 14px;
  color: #1f2d3d;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inline-plan-option-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: #7f8c8d;
}

.inline-plan-option-source {
  background: #f4f6f8;
  color: #2c3e50;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
}

.inline-plan-option-routine {
  border: 1px solid rgba(42, 79, 134, 0.35);
  border-radius: 999px;
  padding: 2px 8px;
  background: #f5f9ff;
  color: #1f5fa5;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.inline-plan-option-routine:hover {
  background: #eaf4ff;
  border-color: rgba(42, 79, 134, 0.55);
}

.inline-plan-option-routine.active {
  background: #2a4f86;
  border-color: #2a4f86;
  color: #fff;
}

.inline-plan-option-remove {
  border: 1px solid #f0b3b3;
  border-radius: 999px;
  padding: 2px 8px;
  background: #fff5f5;
  color: #a53b3b;
  font-size: 11px;
  font-weight: 700;
}

.inline-plan-option-remove:hover {
  background: #ffe9e9;
  border-color: #e79a9a;
}

.inline-plan-option-time {
  color: #1d3f73;
  font-weight: 700;
}

.routine-day-picker {
  position: absolute;
  min-width: 232px;
  background: #fff;
  border: 1px solid #e6ebf1;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
  padding: 10px;
  z-index: 70;
}

.routine-day-picker-presets {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.routine-day-preset {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid #dbe2ea;
  border-radius: 8px;
  background: #f9fafb;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: #2c3e50;
}

.routine-day-preset:hover {
  background: #ecf5ff;
  border-color: #cdd6e4;
  color: #1f5fa5;
}

.routine-day-picker-days {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
}

.routine-day-chip {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid #dbe2ea;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: #2c3e50;
}

.routine-day-chip:hover {
  background: #f5f9ff;
  border-color: #cdd6e4;
}

.routine-day-chip[aria-pressed="true"] {
  background: var(--primary, #163a6e);
  border-color: var(--primary, #163a6e);
  color: #ffffff;
}

.routine-day-picker-actions {
  display: flex;
  gap: 6px;
}

.routine-day-picker-apply {
  flex: 1;
  padding: 7px 10px;
  border: 1px solid var(--primary, #163a6e);
  border-radius: 8px;
  background: var(--primary, #163a6e);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
}

.routine-day-picker-apply:hover {
  background: var(--primary-hover, #0f2c57);
  border-color: var(--primary-hover, #0f2c57);
}

.routine-day-picker-apply:disabled {
  opacity: 0.45;
  cursor: default;
}

.routine-day-picker-remove {
  padding: 7px 10px;
  border: 1px solid #f3d1cc;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: #c0392b;
}

.routine-day-picker-remove:hover {
  background: #fdf2f0;
}

.plan-activity-menu {
  position: absolute;
  min-width: 220px;
  max-width: 280px;
  max-height: 320px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #e6ebf1;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
  padding: 8px;
  z-index: 80;
}

.plan-activity-menu-section {
  margin-top: 8px;
}

.plan-activity-menu-section:first-of-type {
  margin-top: 0;
}

.plan-activity-menu-title {
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;
  color: #7f8c8d;
}

.plan-activity-menu-item {
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: #2c3e50;
}

.plan-activity-menu-item:hover {
  background: #f5f9ff;
}

.plan-activity-menu-item.active {
  background: #ecf5ff;
  color: #1f5fa5;
}

.plan-activity-menu-item.plan-activity-menu-clear {
  color: #7f8c8d;
}

.plan-activity-menu-empty {
  padding: 6px 8px;
  font-size: 12px;
  color: #95a5a6;
}

.plan-activity-menu-divider {
  height: 1px;
  background: #eef1f4;
  margin: 6px 2px;
}

.inline-plan-empty {
  padding: 10px;
  text-align: center;
  color: #7f8c8d;
  font-size: 13px;
}

.inline-plan-split-btn {
  margin-top: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 1px dashed #b6dbff;
  border-radius: 10px;
  background: #f7fbff;
  color: #1f2d3d;
  font-weight: 700;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

.inline-plan-split-btn:hover {
  background: #ecf5ff;
  border-color: #2a4f86;
}

.inline-plan-subsection {
  margin-top: 10px;
  border: 1px solid #eef1f4;
  border-radius: 10px;
  padding: 10px;
  background: #fbfcfd;
}

.inline-plan-sub-summary {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #34495e;
  margin-bottom: 10px;
}

.inline-plan-sub-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.inline-plan-sub-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid #e6ebf1;
  border-radius: 8px;
  background: #fff;
}

.inline-plan-sub-input {
  padding: 8px 10px;
  border: 1px solid #dcdfe3;
  border-radius: 8px;
  font-size: 13px;
  background: #f9fbff;
}

.inline-plan-sub-time {
  font-size: 13px;
  font-weight: 700;
  color: #2c3e50;
  padding: 6px 10px;
  border-radius: 8px;
  background: #f3f5f7;
  border: 1px solid #e1e7ef;
}

.inline-plan-sub-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.inline-plan-sub-actions button {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #dcdfe3;
  background: #f4f6f8;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

.inline-plan-sub-actions button:hover {
  background: #e9edf2;
  border-color: #cdd4dc;
}

.inline-plan-sub-note {
  font-size: 12px;
  color: #7f8c8d;
}

.sub-activities-group {
  border: 1px solid #eef1f4;
  border-radius: 8px;
  padding: 12px;
  background: #fbfcfd;
}

.split-toggle-btn {
  width: 100%;
  background: #ecf5ff;
  border: 1px solid #b6dbff;
  border-radius: 6px;
  padding: 8px 10px;
  color: #1f2d3d;
  font-weight: 600;
  cursor: pointer;
}

.split-toggle-btn:hover {
  background: #dcefff;
}

.sub-activities-section {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sub-activities-summary {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #34495e;
}

.sub-activities-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sub-activities-empty {
  font-size: 12px;
  color: #7f8c8d;
}

.sub-activity-row {
  display: grid;
  grid-template-columns: 1fr minmax(110px, auto) 60px;
  gap: 8px;
  align-items: center;
}

.sub-activity-row input,
.sub-activity-row select,
.sub-activity-row button.plan-activity-label {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #d0d6dc;
  border-radius: 4px;
  font-size: 13px;
  background: #fff;
}

.sub-activity-row .plan-activity-label {
  text-align: left;
  cursor: pointer;
  position: relative;
  padding-right: 26px;
}

.sub-activity-row .plan-activity-label::after {
  content: "??;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: #95a5a6;
}

.sub-activity-row .plan-activity-label.empty {
  color: #9aa3ad;
}

.sub-activity-row.active {
  background: #f0f6ff;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(42, 79, 134, 0.38);
}

.sub-activity-row.active .plan-activity-label {
  border-color: #2a4f86;
}

.sub-activity-row.active .spinner-display {
  border-color: #2a4f86;
}

.sub-activity-row.invalid .spinner-display {
  border-color: #e74c3c;
  color: #e74c3c;
}

.time-spinner {
  display: flex;
  align-items: center;
  gap: 6px;
}

.spinner-display {
  min-width: 70px;
  padding: 6px 10px;
  border: 1px solid #d0d6dc;
  border-radius: 4px;
  background: #fff;
  font-size: 13px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.spinner-controls {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.spinner-btn {
  width: 24px;
  height: 18px;
  background: #f4f6f8;
  border: 1px solid #d0d6dc;
  border-radius: 4px;
  padding: 0;
  font-size: 10px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.spinner-btn:hover {
  background: #e9edf2;
}

.spinner-btn:disabled {
  cursor: default;
  opacity: 0.4;
}

.split-cell-wrapper {
  position: relative;
  min-height: 56px;
}

.split-cell-wrapper.split-has-data > :first-child {
  position: relative;
  z-index: 1;
}

.split-cell-wrapper.split-has-data .input-field {
  border-color: transparent;
  background: transparent;
}

.split-cell-wrapper.split-type-planned.split-has-data .input-field {
  color: transparent;
  caret-color: transparent;
  opacity: 0;
  pointer-events: none;
}

.split-cell-wrapper.split-type-planned.split-has-data
  .input-field::placeholder {
  color: transparent;
}

.split-cell-wrapper .split-visualization {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 0;
  right: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  z-index: 2;
  /* 기본?�으�?컨텐�??�에 ?�시 */
}

.split-plan-merged-visualization {
  top: 6px;
  bottom: auto;
  height: var(--split-plan-merged-height, auto);
  /* 고정 높이 블록: 내부 그리드가 어떤 이유로든 더 커져도
     아래 슬롯을 관통해 그려지지 않게 잘라낸다. */
  overflow: clip;
}

.split-visualization-planned {
  box-shadow: none;
  background: transparent;
  z-index: 3;
  pointer-events: auto;
}

.split-visualization.no-title {
  justify-content: center;
}

.split-visualization-single-title .split-title-band {
  gap: 0;
}

.split-visualization-single-title .split-title-segment {
  border-radius: 6px;
}

.split-title-band {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
  margin-left: 6px !important;
  margin-right: 6px !important;
  font-size: 11px;
  font-weight: 600;
  color: #2c3e50;
}

.split-grid {
  display: grid;
  position: relative;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(18px, 1fr);
  margin-left: 6px !important;
  margin-right: 6px !important;
  /* �?간격 최소 18px, ?�분 공간?� 균등 분배 */
  row-gap: 0;
  column-gap: 0;
  align-content: stretch;
  flex: 1;
  /* Fill extra space within the overlay */
  /* flex 아이템 기본 min-height:auto가 그리드의 고유 콘텐츠 높이(제목+
     라벨+타이머가 쌓인 세그먼트의 min-content)를 하한으로 만들어, 고정
     높이 오버레이를 뚫고 아래 슬롯까지 자라던 원인. 0으로 풀어야 행이
     1fr 균등 분배로 줄어들고 세그먼트 내부는 overflow:hidden이 처리한다. */
  min-height: 0;
}

.split-visualization-planned .split-grid {
  row-gap: 2px;
  column-gap: 2px;
}

.split-grid-label {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

.split-title-segment {
  background: var(--split-segment-color, rgba(224, 228, 233, 0.6));
  border-radius: 4px;
  padding: 2px 4px;
  min-height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.split-visualization-planned .split-title-segment:not(.split-empty) {
  border: 1px solid var(--plan-segment-default-border, #E5E7EB);
  box-shadow: 0 1px 2px rgba(8, 28, 52, 0.055);
}

.split-title-segment.split-empty {
  background: rgba(236, 238, 241, 0.35);
  color: transparent;
}

.split-grid-segment {
  min-height: 0;
  border-radius: 7px;
  background: var(--split-segment-color, rgba(224, 228, 233, 0.5));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 4px;
  font-size: 12px;
  font-weight: 600;
  color: #2c3e50;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-bottom: 3px solid #fff;
  background-clip: padding-box;
  box-shadow: inset 0 0 0 1px rgba(44, 62, 80, 0.08);
}

.split-visualization .split-title-segment,
.split-visualization .split-grid-segment {
  position: relative;
  z-index: var(--split-segment-layer, 2);
  /* ??��(::before)보다 ?�에 ?�시??막�?가 가?��?지 ?�도�?*/
}

.split-grid-segment.connect-top {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.split-grid-segment.connect-bottom {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  /* ?�단 분리???�을 고정???�어지??막�????�일???�이�?보이?�록 */
  border-bottom-color: #fff;
}

.split-grid-segment.split-empty {
  background: rgba(236, 238, 241, 0.25);
  border-bottom-color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(184, 194, 204, 0.2);
  color: transparent;
}

.split-visualization-planned .split-grid-segment-virtual-rest {
  position: relative;
  z-index: 3;
  pointer-events: auto;
  background: rgba(16, 38, 64, 0.035) !important;
  border: 1px dashed rgba(8, 28, 52, 0.14);
  border-bottom: 1px dashed rgba(8, 28, 52, 0.14) !important;
  color: transparent;
  height: 100%;
  box-sizing: border-box;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.16),
    inset 0 -1px 1px rgba(8, 28, 52, 0.025);
  cursor: pointer;
}

.split-visualization-planned .split-grid-segment-virtual-rest:hover,
.split-visualization-planned .split-grid-segment-virtual-rest:focus-visible {
  background: rgba(16, 38, 64, 0.055) !important;
  border-color: rgba(8, 28, 52, 0.18);
  border-bottom-color: rgba(8, 28, 52, 0.18) !important;
}

.split-visualization-planned .split-grid-segment-virtual-rest[data-segment-kind="virtual-rest"] .split-grid-label,
.split-visualization-planned [data-segment-kind="virtual-rest"] .split-grid-label,
.plan-segment-reorder-preview-rest .split-grid-label,
.plan-segment-resize-preview-rest .split-grid-label,
.plan-segment-resize-preview-rest .plan-segment-resize-preview-label,
.plan-segment-resize-preview-rest .plan-segment-resize-preview-duration {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* 빈칸 손잡이(2026-10-23 사용자 선택 E 선 손, 시안 docs/renewal-sketch/rest-grip.html): 카드와 같은 블록의 빈칸 가운데
   남색 선 손 + 아이보리 + 손바닥 금 곡선 하나 — 빈칸도 끌어 옮길 수 있다는 단서. 글자 없이 늘 보이고(모바일 포함), 마우스는
   올리면 아이보리 + 옅은 금 테두리(시트 위 버튼의 hover만 옅은 금)와 grab 커서. 누르면 그대로 채우기 드롭다운이다.
   끄는 동안 손가락을 따라다니는 고스트는 body에 붙으므로 .split-visualization-planned 없이 쓴다. */
.split-grid-segment-virtual-rest .plan-rest-grip {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 17px;
  height: 17px;
  transform: translate(-50%, -50%);
  opacity: 0.88;
  pointer-events: none;
  transition: opacity 0.16s ease;
}

.plan-rest-grip svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.plan-rest-grip-hand {
  fill: #fffaf0;
  stroke: rgba(22, 58, 110, 0.75);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.plan-rest-grip-fingers {
  fill: none;
  stroke: rgba(22, 58, 110, 0.6);
  stroke-width: 1.3;
  stroke-linecap: round;
}

.plan-rest-grip-palm {
  fill: none;
  stroke: #e2aa50;
  stroke-width: 1.6;
  stroke-linecap: round;
}

.plan-rest-grip-closed {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .split-visualization-planned .split-grid-segment-virtual-rest.has-rest-grip {
    cursor: grab;
  }

  .split-visualization-planned .split-grid-segment-virtual-rest.has-rest-grip:hover {
    background: #fffcf4 !important;
    border-style: solid !important;
    border-color: rgba(184, 143, 62, 0.45) !important;
  }

  .split-visualization-planned .split-grid-segment-virtual-rest.has-rest-grip:hover .plan-rest-grip {
    opacity: 1;
  }

  .split-grid.is-plan-segment-reorder-active > .split-grid-segment-virtual-rest.has-rest-grip {
    cursor: grabbing;
  }
}

/* 끄는 중: 고스트는 오므린 손 + 아이보리 + 남색 점선(금 점선은 금선의 '원래' 유령 문법이라 쓰지 않는다). */
.plan-segment-reorder-drag-ghost.split-grid-segment.split-grid-segment-virtual-rest.has-rest-grip {
  background: #fffdf8 !important;
  border: 1px dashed rgba(22, 58, 110, 0.45) !important;
  border-radius: 7px !important;
  color: transparent;
}

.plan-segment-reorder-drag-ghost .plan-rest-grip {
  opacity: 1;
}

.plan-segment-reorder-drag-ghost .plan-rest-grip-open {
  display: none;
}

.plan-segment-reorder-drag-ghost .plan-rest-grip-closed {
  display: inline;
}

.split-visualization-planned .split-grid-segment-virtual-rest[data-segment-kind="virtual-rest"].is-rest-slot-targeted {
  background: rgba(16, 38, 64, 0.065) !important;
  border-color: rgba(8, 28, 52, 0.2);
  border-bottom-color: rgba(8, 28, 52, 0.2) !important;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.18),
    inset 0 -1px 1px rgba(8, 28, 52, 0.035),
    inset 0 0 0 1px rgba(8, 28, 52, 0.025);
  color: transparent;
}

.split-visualization-planned .split-grid-segment[data-segment-kind="real-plan"] {
  position: relative;
  overflow: visible;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  border: 1px solid var(--plan-segment-default-border, #E5E7EB);
  border-color: rgba(22, 58, 110, 0.5);
  border-bottom-color: rgba(22, 58, 110, 0.5);
  box-shadow:
    0 1px 2px rgba(8, 28, 52, 0.095),
    0 8px 18px rgba(8, 28, 52, 0.095),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  border-radius: 7px;
  background-clip: border-box;
}

.split-visualization-planned .split-grid-segment[data-segment-kind="real-plan"]::after {
  display: none;
}

.split-visualization-planned .split-grid-segment[data-segment-kind="real-plan"]:hover::after {
  display: none;
}

.split-visualization-planned .split-grid-segment[data-segment-kind="real-plan"]:hover {
  /* Hover tints the segment's own color instead of forcing the white-card
     hover, so custom-colored segments keep their assigned hue. The first
     declaration is the fallback for engines without color-mix(). */
  background-color: var(--plan-segment-hover-bg, #FAFBFC);
  background-color: color-mix(in srgb, var(--split-segment-color, var(--plan-segment-default-bg, #FFFFFF)) 96%, #0F172A 4%);
}

/* 터치 기기에서는 탭한 카드에 :hover가 남는다 — 체크를 풀어도 카드가 원래 흰색(지정 색)으로 돌아가지 않고 흐린 남색으로
   남던 것을 2026-10-09 사용자 지시로 막는다. 완료 카드는 자기 hover 규칙(.is-plan-done:hover)이 따로 덮는다. */
@media (hover: none), (pointer: coarse) {
  .split-visualization-planned .split-grid-segment[data-segment-kind="real-plan"]:not(.is-plan-done):hover {
    background-color: var(--split-segment-color, var(--plan-segment-default-bg, #FFFFFF));
  }
}

.split-visualization-planned .split-grid-segment[data-segment-kind="real-plan"].is-selected-plan-segment {
  border-color: rgba(22, 58, 110, 0.5);
  border-bottom-color: rgba(22, 58, 110, 0.5);
  box-shadow:
    0 1px 2px rgba(8, 28, 52, 0.095),
    0 8px 18px rgba(8, 28, 52, 0.095),
    0 0 0 3px rgba(22, 58, 110, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

.split-visualization-planned .split-grid-segment[data-segment-kind="real-plan"].is-selected-plan-segment::after {
  display: none;
}

.split-visualization-planned .split-grid-segment[data-segment-kind="real-plan"].is-selected-plan-segment:focus-visible {
  outline: 2px solid #2a4f86;
  outline-offset: 2px;
}

/* 루히츠 카드(2026-10-24 펭귄 선택 — 팔레트 끝의 루히츠 한 칸 #163A6E, 시안 docs/renewal-sketch/segment-signature.html B
   '금 글씨'): 남색과 금을 따로가 아니라 한 칸으로 — 로고의 남색 타일 위 금 L처럼 남색 바탕에 금빛 이름, 상위 활동 이름·분은
   아이보리, 체크박스 테두리는 금. 길이 조절 손잡이는 H5(시안 lz-resize-handle.html): 지금 알약 모양 그대로 속은 아이보리,
   테는 금 — 올리면 옅은 금 테, 끄는 중엔 금 테가 2px로 굵어진다(번짐 없음). 클래스는 렌더가 단다(getPlannedSegmentColorClass).
   완료(안G) 카드는 지정 색을 덮으므로 달지 않는다. 길이 조절·끌기 미리보기와 끄는 고스트(body에 붙음)도 같은 클래스라
   .split-visualization-planned 없이 쓴다. */
.split-grid-segment.is-plan-color-luhitz {
  color: #fdf6e3;
}

/* 흰 카드의 위쪽 안쪽 흰 선(1px)은 남색 위에서 하얀 금처럼 보여 옅게 둔다 — 선택 고리는 그대로. */
.split-visualization-planned .split-grid-segment[data-segment-kind="real-plan"].is-plan-color-luhitz {
  box-shadow:
    0 1px 2px rgba(8, 28, 52, 0.095),
    0 8px 18px rgba(8, 28, 52, 0.095),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.split-visualization-planned .split-grid-segment[data-segment-kind="real-plan"].is-plan-color-luhitz.is-selected-plan-segment {
  box-shadow:
    0 1px 2px rgba(8, 28, 52, 0.095),
    0 8px 18px rgba(8, 28, 52, 0.095),
    0 0 0 3px rgba(22, 58, 110, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.split-grid-segment.is-plan-color-luhitz .plan-segment-label-text,
.split-grid-segment.is-plan-color-luhitz .plan-segment-resize-preview-label {
  color: #f3d58a;
}

.split-grid-segment.is-plan-color-luhitz .plan-segment-graphic-title {
  color: rgba(253, 246, 227, 0.82);
}

.split-grid-segment.is-plan-color-luhitz .plan-segment-timer-time {
  color: rgba(253, 246, 227, 0.78);
}

.split-grid-segment.is-plan-color-luhitz .plan-segment-timer-time.tone-match {
  color: #f8d888;
}

.split-grid-segment.is-plan-color-luhitz .plan-segment-timer-time.tone-over {
  color: #ffb08a;
}

/* 체크박스는 손잡이(H5)와 같은 아이보리 칸 + 금 테 — 남색 위에 남색이 비치는 반투명 칸은 누를 자리로 안 보였다(2026-10-24 펭귄 보고). */
.split-grid-segment.is-plan-color-luhitz .plan-segment-done-button {
  border-color: #e2b55e;
  background: #fdf6e3;
}

@media (hover: hover) and (pointer: fine) {
  .split-grid-segment.is-plan-color-luhitz .plan-segment-done-button:hover {
    border-color: #f3d58a;
    background: #fffaf0;
  }
}

.split-grid-segment.is-plan-color-luhitz .plan-segment-done-button:focus-visible {
  border-color: #f3d58a;
  background: #fffaf0;
  outline-color: rgba(243, 213, 138, 0.5);
}

.split-grid-segment.is-plan-color-luhitz .plan-segment-title-edit-input {
  border-color: #e2b55e;
  color: #f3d58a;
}

/*
 * Planned real segments always stay rounded as independent white cards.
 * Generic .connect-top / .connect-bottom square off corners for colored
 * actual-segment bars; those must never apply to planned real segments.
 */
.split-visualization-planned .split-grid-segment[data-segment-kind="real-plan"].connect-top {
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
}
.split-visualization-planned .split-grid-segment[data-segment-kind="real-plan"].connect-bottom {
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
}
.split-visualization-planned .split-grid-segment[data-segment-kind="real-plan"].connect-top.connect-bottom {
  border-radius: 7px;
}


.split-visualization-planned .split-grid-segment-virtual-rest[data-segment-kind="virtual-rest"] {
  overflow: visible;
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 768px), (hover: none), (pointer: coarse) {
  .split-visualization-planned .split-grid-segment[data-segment-kind="real-plan"],
  .split-visualization-planned .split-grid-segment-virtual-rest[data-segment-kind="virtual-rest"] {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
  }

  .split-visualization-planned .split-grid-segment[data-segment-kind="real-plan"] .plan-segment-title-edit-input {
    -webkit-touch-callout: default;
    -webkit-user-select: text;
    user-select: text;
    touch-action: manipulation;
    font-size: 16px;
  }

  .split-visualization-planned .split-grid-segment[data-segment-kind="real-plan"].is-plan-segment-reorder-armed,
  .split-visualization-planned .split-grid-segment[data-segment-kind="real-plan"].is-plan-segment-reorder-suppressing-selection,
  .split-visualization-planned .split-grid-segment-virtual-rest[data-segment-kind="virtual-rest"].is-plan-segment-reorder-armed,
  .split-visualization-planned .split-grid-segment-virtual-rest[data-segment-kind="virtual-rest"].is-plan-segment-reorder-suppressing-selection,
  .split-visualization-planned .split-grid.is-plan-segment-reorder-active,
  .split-visualization-planned .split-grid.is-plan-segment-reorder-suppressing-selection {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: none;
  }
}

.split-visualization-planned .split-grid-segment.has-shared-plan-boundary-handle {
  z-index: var(--split-segment-layer, 13);
}

.split-grid.is-previewing-plan-resize > .split-grid-segment[data-segment-kind="real-plan"] {
  opacity: 0;
}

.split-grid.is-previewing-plan-resize > .split-grid-segment-virtual-rest {
  opacity: 0;
}

.split-grid.is-plan-segment-reorder-active {
  cursor: grabbing;
}

/* 마우스는 롱프레스 대기가 사실상 없으므로, 누른 순간 눌림 피드백만 준다. */
@media (hover: hover) and (pointer: fine) {
  .split-grid-segment.is-plan-segment-reorder-armed:not(.is-plan-segment-reorder-dragging),
  .split-grid-segment-virtual-rest.is-plan-segment-reorder-armed:not(.is-plan-segment-reorder-dragging) {
    transform: scale(0.985);
    box-shadow: inset 0 0 0 1px rgba(44, 62, 80, 0.22);
    transition:
      transform 90ms ease,
      box-shadow 90ms ease;
  }
}

.split-grid.is-plan-segment-reorder-active > .split-grid-segment[data-segment-kind="real-plan"],
.split-grid.is-plan-segment-reorder-active > .split-grid-segment-virtual-rest[data-segment-kind="virtual-rest"] {
  transition:
    opacity 0.12s ease,
    transform 0.12s ease,
    box-shadow 0.12s ease;
}

.split-grid.is-previewing-plan-reorder > .split-grid-segment {
  opacity: 0.18;
}

.split-grid-segment.is-plan-segment-reorder-dragging {
  z-index: 24;
  opacity: 0.78;
  transform: translateY(-2px) scale(1.015);
  box-shadow: 0 9px 20px rgba(8, 28, 52, 0.22);
}

.split-grid.is-plan-segment-reorder-cancel {
  cursor: no-drop;
}

.planned-input.is-plan-segment-reorder-drop-target,
.split-cell-wrapper.split-type-planned.is-plan-segment-reorder-drop-target,
.planned-merged-main-container.is-plan-segment-reorder-drop-target,
.split-grid.is-plan-segment-reorder-drop-target,
.split-grid-segment-virtual-rest[data-segment-kind="virtual-rest"].is-plan-segment-reorder-drop-target {
  outline: 2px solid rgba(14, 165, 153, 0.78);
  outline-offset: -2px;
  box-shadow:
    inset 0 0 0 2px rgba(14, 165, 153, 0.2);
}

.planned-input.is-plan-segment-reorder-invalid-target,
.split-cell-wrapper.split-type-planned.is-plan-segment-reorder-invalid-target,
.planned-merged-main-container.is-plan-segment-reorder-invalid-target,
.split-grid.is-plan-segment-reorder-invalid-target,
.split-grid-segment-virtual-rest[data-segment-kind="virtual-rest"].is-plan-segment-reorder-invalid-target {
  outline-color: rgba(239, 68, 68, 0.84);
  box-shadow:
    inset 0 0 0 2px rgba(239, 68, 68, 0.18),
    0 0 0 3px rgba(239, 68, 68, 0.08);
  cursor: no-drop;
}

.split-grid.is-plan-segment-reorder-cancel > .split-grid-segment.is-plan-segment-reorder-dragging {
  opacity: 0.5;
}

.plan-segment-reorder-drop-target-overlay {
  position: fixed;
  z-index: 10001;
  pointer-events: none;
  box-sizing: border-box;
  border: 2px solid rgba(14, 165, 153, 0.86);
  border-radius: 6px;
  background: transparent;
  box-shadow:
    inset 0 0 0 2px rgba(14, 165, 153, 0.2),
    0 8px 20px rgba(8, 28, 52, 0.08);
}

.plan-segment-reorder-drop-target-overlay.is-plan-segment-reorder-overlay-invalid {
  border-color: rgba(239, 68, 68, 0.9);
  box-shadow:
    inset 0 0 0 2px rgba(239, 68, 68, 0.18),
    0 0 0 3px rgba(239, 68, 68, 0.12),
    0 8px 20px rgba(127, 29, 29, 0.08);
}

.plan-segment-reorder-insert-marker {
  position: absolute;
  z-index: 25;
  width: 4px;
  min-height: 18px;
  border-radius: 999px;
  background: #111827;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.95),
    0 0 0 5px rgba(14, 165, 153, 0.18);
  pointer-events: none;
  transform: translateX(-50%);
}

.plan-segment-reorder-insert-marker[data-placement="empty"] {
  display: none !important;
}

.plan-segment-reorder-preview-layer {
  position: absolute;
  inset: 0;
  z-index: 23;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(18px, 1fr);
  pointer-events: none;
  column-gap: 0;
  row-gap: 0;
  overflow: hidden;
}

.plan-segment-reorder-preview-real {
  z-index: var(--split-segment-layer, 2);
}

.plan-segment-reorder-preview-layer .split-grid-segment {
  min-height: 0;
  height: 100%;
  box-sizing: border-box;
}

.plan-segment-reorder-preview-layer .plan-segment-reorder-preview-real {
  border-bottom: 0 !important;
  background-clip: border-box;
}

.plan-segment-reorder-preview-rest {
  pointer-events: none;
}

.plan-segment-reorder-drag-ghost {
  position: fixed;
  z-index: 10000;
  pointer-events: none;
  opacity: 0.94;
  transform-origin: 0 0;
  filter: drop-shadow(0 14px 24px rgba(8, 28, 52, 0.24));
  box-shadow:
    inset 0 0 0 1px rgba(44, 62, 80, 0.1),
    0 10px 24px rgba(8, 28, 52, 0.2);
  scale: 1.025;
  cursor: grabbing;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  will-change: transform;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: 3px;
}

.plan-segment-reorder-drag-ghost.split-grid-segment,
.plan-segment-reorder-drag-ghost .split-grid-segment,
.split-grid-segment.is-plan-segment-reorder-dragging {
  border-radius: 3px !important;
  border-bottom: 0 !important;
  background-clip: border-box !important;
}

.plan-segment-reorder-drag-ghost .plan-segment-graphic,
.plan-segment-reorder-drag-ghost .plan-segment-graphic-main {
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
  border-radius: inherit;
  overflow: hidden;
}

.plan-segment-reorder-drag-ghost,
.plan-segment-reorder-drag-ghost * {
  pointer-events: none !important;
}

body.is-plan-segment-reorder-ghost-active {
  cursor: grabbing;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.plan-segment-resize-preview-layer {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(18px, 1fr);
  pointer-events: none;
  column-gap: 0;
  row-gap: 0;
  overflow: hidden;
}

.plan-segment-resize-preview-segment {
  align-self: stretch;
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}

.plan-segment-resize-preview-segment.has-plan-segment-timer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.plan-segment-resize-preview-graphic {
  min-height: 100%;
}

.plan-segment-resize-preview-timer-row {
  transform: none;
}

.plan-segment-resize-preview-segment.plan-segment-resize-preview-rest {
  height: 100%;
  box-sizing: border-box;
  border: 1px dashed rgba(8, 28, 52, 0.14);
  border-bottom: 1px dashed rgba(8, 28, 52, 0.14);
  background: rgba(16, 38, 64, 0.035);
  color: transparent;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.16),
    inset 0 -1px 1px rgba(8, 28, 52, 0.025);
}

.plan-segment-resize-preview-segment.plan-segment-resize-preview-empty {
  background: rgba(236, 238, 241, 0.25);
  border-bottom-color: #fff;
  box-shadow: inset 0 0 0 1px rgba(184, 194, 204, 0.2);
  color: transparent;
}

.plan-segment-resize-preview-label,
.plan-segment-resize-preview-duration {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-segment-resize-preview-label {
  font-size: 12px;
  font-weight: 600;
}

.plan-segment-resize-preview-duration {
  font-size: 11px;
  font-weight: 700;
}

.plan-segment-resize-preview-guide {
  position: absolute;
  z-index: 4;
  display: block;
  width: 40px;
  min-width: 40px;
  height: 28px;
  overflow: visible;
  pointer-events: none;
  opacity: 1;
  transform: translate(-50%, -50%);
  transition: opacity 0.1s ease;
  filter:
    drop-shadow(0 0 5px rgba(220, 251, 254, 0.95))
    drop-shadow(0 0 11px rgba(190, 183, 223, 0.72))
    drop-shadow(0 0 17px rgba(220, 251, 254, 0.48));
}

.plan-segment-resize-preview-guide.plan-segment-resize-preview-arrow-inside-before {
  transform: translate(calc(-100% - 3px), -50%);
}

.plan-segment-resize-preview-guide.plan-segment-resize-preview-arrow-inside-after {
  transform: translate(3px, -50%);
}

.plan-segment-resize-preview-arrow-shape {
  stroke: rgba(255, 255, 255, 0.96);
  stroke-width: 1px;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.94;
}

.plan-segment-resize-preview-arrow-sheen {
  fill: none;
  stroke: rgba(255, 255, 255, 0.86);
  stroke-width: 0.9px;
  stroke-linecap: round;
  opacity: 0.74;
  filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.95));
}

.plan-segment-resize-preview-arrow-spark {
  fill: #fff;
  opacity: 0.92;
  filter:
    drop-shadow(0 0 1.5px rgba(255, 255, 255, 1))
    drop-shadow(0 0 5px rgba(220, 251, 254, 0.92));
}

.plan-segment-resize-handle {
  position: absolute;
  top: 50%;
  /* 히트박스는 세그먼트 폭의 40%를 넘지 않는다. 10분 세그먼트(390px 폭에서 약 50px)의 가운데를
     핸들이 덮으면 탭이 시트 대신 리사이즈로 잡힌다 — planned-segment-reorder-controller.js의
     모바일 가장자리 구역(rect.width * 0.4 상한)과 같은 비율이다. 넓은 세그먼트에서는 그대로 30px. */
  width: min(var(--plan-segment-handle-hitbox-width), 40%);
  height: min(46px, calc(100% - 12px));
  z-index: 12;
  cursor: ew-resize;
  opacity: 1;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  transform: translateY(-50%);
  box-sizing: border-box;
  --plan-segment-handle-hitbox-width: 30px;
  --plan-segment-handle-visual-width: 8px;
  --plan-segment-handle-color: var(--split-segment-color, rgba(224, 228, 233, 0.85));
  --plan-segment-handle-stroke: rgba(22, 58, 110, 0.55);
  transition:
    opacity 0.12s ease,
    transform 0.12s ease;
}

.plan-segment-resize-handle-right {
  right: 0;
}

.plan-segment-resize-handle-right.plan-segment-boundary-resize-handle-shared {
  right: 0;
}

.plan-segment-boundary-resize-handle-line {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 3px;
  width: var(--plan-segment-handle-visual-width);
  border-radius: 999px;
  background: color-mix(in srgb, var(--plan-segment-handle-color) 34%, #ffffff 66%);
  border: 1px solid var(--plan-segment-handle-stroke);
  box-sizing: border-box;
  pointer-events: none;
  box-shadow: 0 1px 2px rgba(8, 28, 52, 0.18);
}

.plan-segment-boundary-resize-handle-line {
  display: block;
}

.plan-segment-resize-handle::after,
.plan-segment-boundary-resize-handle-line::after {
  content: none;
}

.plan-segment-resize-handle:hover .plan-segment-boundary-resize-handle-line,
.plan-segment-resize-handle:focus-visible .plan-segment-boundary-resize-handle-line,
.split-grid-segment.is-resizing-plan-segment .plan-segment-boundary-resize-handle-line {
  background: color-mix(in srgb, var(--plan-segment-handle-color) 42%, #ffffff 58%);
  border-color: var(--plan-segment-handle-stroke);
  box-shadow: 0 2px 5px rgba(8, 28, 52, 0.24);
}

.split-grid-segment.is-resizing-plan-segment {
  outline: 1px solid rgba(11, 38, 80, 0.22);
  outline: 1px solid color-mix(in srgb, var(--split-segment-color, #0b2650) 72%, #0b2650 28%);
  outline-offset: -1px;
}

/* 손잡이 H5: 아이보리 알약 + 금 테. 루히츠 카드(위 is-plan-color-luhitz 블록)만. 기본 손잡이 규칙(바탕색 34% + 흰색, 남색 테) 뒤에 두고 상태마다 한 단계 더 붙인다. */
.split-grid-segment.is-plan-color-luhitz .plan-segment-boundary-resize-handle-line {
  background: #fdf6e3;
  border: 1px solid #e2b55e;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.split-grid-segment.is-plan-color-luhitz .plan-segment-resize-handle:hover .plan-segment-boundary-resize-handle-line,
.split-grid-segment.is-plan-color-luhitz .plan-segment-resize-handle:focus-visible .plan-segment-boundary-resize-handle-line {
  background: #fffaf0;
  border-color: #f3d58a;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
}

.split-grid-segment.is-plan-color-luhitz.is-resizing-plan-segment .plan-segment-resize-handle .plan-segment-boundary-resize-handle-line {
  background: #ffffff;
  border: 2px solid #e2b55e;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.split-grid-segment.is-plan-segment-resize-disabled {
  cursor: default;
}

.split-grid > .split-grid-segment:last-child {
  border-bottom-color: transparent;
}

.split-visualization-planned .split-grid > .split-grid-segment[data-segment-kind="real-plan"]:last-child {
  border-bottom-color: rgba(22, 58, 110, 0.5);
}

.remove-sub-activity {
  background: transparent;
  border: none;
  color: #e74c3c;
  cursor: pointer;
  font-size: 13px;
}

.remove-sub-activity:hover {
  text-decoration: underline;
}

.sub-activities-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.sub-activity-action-btn {
  background: #f4f6f8;
  border: 1px solid #d0d6dc;
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
  color: #2c3e50;
}

.sub-activity-action-btn:hover {
  background: #e9edf2;
}

.sub-activity-action-btn.sub-activity-action-compact {
  padding: 6px 8px;
  font-size: 11px;
  min-width: 52px;
  text-align: center;
}

.sub-activities-notice {
  font-size: 12px;
  color: #e67e22;
}

.sub-activities-notice.ok {
  color: #2ecc71;
}

/* Header chrome is styled in foundation.css; keep interactions.css free of
   competing skin overrides so the design system stays in one place. */


.planned-slot-clear-mode-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  min-height: 30px;
  padding: 7px 10px;
  pointer-events: auto;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.planned-slot-clear-mode-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.44);
  color: #ffffff;
}

.planned-slot-clear-mode-btn[aria-pressed="true"] {
  background: #ffffff;
  border-color: #ffffff;
  color: #243447;
}

.time-grid-range-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.time-grid-range-field {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.time-grid-range-select {
  min-height: 28px;
  max-width: 72px;
  padding: 0 22px 0 7px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.92);
  color: #243447;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.time-grid-range-btn {
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.time-grid-range-btn:hover,
.time-grid-range-btn:focus-visible {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.92);
  color: #243447;
  outline: none;
}


.planned-slot-clear-target {
  position: relative;
  overflow: visible;
  z-index: 6;
}

.planned-slot-clearable-target {
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.18);
}

.planned-slot-clear-merged-target {
  background: linear-gradient(0deg, rgba(239, 68, 68, 0.05), rgba(239, 68, 68, 0.05));
  box-shadow:
    inset 0 0 0 1px rgba(239, 68, 68, 0.24),
    0 0 0 2px rgba(239, 68, 68, 0.08);
}


.planned-slot-clear-overlay {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 30;
}


.planned-slot-clear-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 999px;
  background: #ef4444;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 4px 10px rgba(239, 68, 68, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.9);
  cursor: pointer;
  pointer-events: auto;
  z-index: 31;
}

.planned-slot-clear-btn::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 999px;
}

.planned-slot-clear-merged {
  box-shadow:
    0 5px 12px rgba(239, 68, 68, 0.34),
    0 0 0 2px rgba(255, 255, 255, 0.96),
    0 0 0 5px rgba(239, 68, 68, 0.18);
}

.planned-slot-clear-btn:hover {
  background: #dc2626;
  transform: translateY(-1px);
}

.planned-slot-clear-btn:active {
  transform: translateY(0);
}

.planned-slot-clear-icon {
  width: 14px;
  height: 14px;
  fill: currentColor;
  display: block;
}

.planned-slot-clear-mode .split-grid-segment[data-segment-kind="real-plan"],
.planned-slot-clear-mode .plan-segment-resize-handle,
.planned-slot-clear-mode .plan-segment-done-button,
.planned-slot-clear-mode .plan-segment-graphic-title,
.planned-slot-clear-mode .plan-segment-label-text {
  pointer-events: none !important;
}

.planned-slot-clear-mode .planned-slot-clear-btn {
  pointer-events: auto !important;
}

.plan-segment-done-button::before {
  content: '';
  position: absolute;
  inset: -10px;
}

.plan-segment-reorder-preview-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: calc(100% - 12px);
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(8, 28, 52, 0.84);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  z-index: 3;
}


.planned-slot-clear-status {
  background: #fef2f2;
  border-bottom: 1px solid #fecaca;
  color: #991b1b;
  font-size: 13px;
  padding: 8px 12px;
  text-align: center;
}


/* ===== Plan segment done (TODO-style completion) ===== */

/* 완료 이펙트는 세그먼트 색과 무관하게 하나다(LUHITZ 안G, 2026-10-09 사용자 지시).
   완료한 카드는 '더 이상 안 해도 되는 칸'으로 아직 안 한 흰 카드보다 낮게 가라앉는다:
   떠 있는 그림자 대신 안쪽으로 눌린 그림자, 옅은 남색 테두리, 아이보리 회색 바탕 위
   초기 디자인과 같은 6px 사선 해칭(초록 → 남색). 원색은 덮는다 — 끝난 칸끼리 같아 보이게. */
.split-visualization-planned .split-grid-segment.is-plan-done {
  background:
    repeating-linear-gradient(
      -45deg,
      var(--plan-done-hatch) 0 6px,
      var(--plan-done-hatch-soft) 6px 12px
    ),
    var(--plan-done-surface);
  border-color: var(--plan-done-border);
  box-shadow: var(--plan-done-sunk);
}

.split-visualization-planned .split-grid-segment.is-plan-done .plan-segment-label-text,
.split-visualization-planned .split-grid-segment.is-plan-done .plan-segment-graphic-title {
  /* Strike line drawn as a background layer so it can animate its width
     on completion (text-decoration width cannot be animated). */
  text-decoration: none;
  background-image: linear-gradient(var(--plan-done-strike), var(--plan-done-strike));
  background-repeat: no-repeat;
  background-position: 0 55%;
  background-size: 100% 2px;
  color: var(--plan-done-text);
  opacity: 1;
}

/* 부모 계획 제목은 block이라 세그먼트 전체 폭으로 늘어나므로, 배경 레이어
   취소선이 밴드를 가로지르는 긴 선으로 그려진다. 완료 상태에서만 제목을 내용
   폭으로 줄이고 취소선 기준을 content-box로 잡아 글자 폭만 긋는다 (라벨과 동일
   거동). 좁은 세그먼트의 말줄임은 max-width가 그대로 지켜준다. */
.split-visualization-planned .split-grid-segment.is-plan-done .plan-segment-graphic-title {
  justify-self: center;
  width: fit-content;
  max-width: 100%;
  background-origin: content-box;
}

/* 마우스를 올리거나 모바일에서 탭한 직후(남는 :hover)에도 지정 색이 되살아나지 않게 한다 —
   기본 hover 규칙은 [data-segment-kind] 속성 선택자라 위 완료 규칙보다 우선순위가 높다. */
.split-visualization-planned .split-grid-segment[data-segment-kind="real-plan"].is-plan-done:hover {
  background-color: var(--plan-done-surface);
}

/* 줄의 마지막 카드는 아래 테두리를 검게 다시 칠하는 규칙(:last-child)이 따로 있어 완료 카드도 아래만 검게 남았다. */
.split-visualization-planned .split-grid > .split-grid-segment[data-segment-kind="real-plan"].is-plan-done {
  border-bottom-color: var(--plan-done-border);
}

/* 지정 색은 완료 카드에서 손잡이까지 걷어 낸다 — 손잡이만 원색이 남으면 끝난 칸이 아직 색을 가진 것처럼 보인다. */
.split-visualization-planned .split-grid-segment.is-plan-done .plan-segment-resize-handle {
  --plan-segment-handle-color: var(--plan-done-surface);
}

/* 체크박스는 흐리지 않는다 — 해제하러 누를 자리라서 시간 글자만 물러난다. */
.split-visualization-planned .split-grid-segment.is-plan-done .plan-segment-timer-time {
  color: var(--plan-done-meta);
  opacity: 1;
}

/* ===== Completion moment micro-interactions ===== */

/* 체크하는 순간 카드가 떠 있던 자리에서 시트로 내려앉는다. 끝 프레임은 정지 상태의
   눌린 그림자(--plan-done-sunk)와 같아야 끝에서 깜빡이지 않는다. */
@keyframes planDoneSegmentSettle {
  0% {
    transform: translateY(-1px);
    box-shadow:
      0 1px 2px rgba(8, 28, 52, 0.095),
      0 8px 18px rgba(8, 28, 52, 0.095);
  }
  100% {
    transform: none;
    box-shadow: var(--plan-done-sunk);
  }
}

@keyframes planDoneStrikeDraw {
  from { background-size: 0% 2px; }
  to { background-size: 100% 2px; }
}

.split-visualization-planned .split-grid-segment.plan-done-just-completed {
  animation: planDoneSegmentSettle 0.28s ease-out;
}

.split-visualization-planned .split-grid-segment.plan-done-just-completed .plan-segment-label-text,
.split-visualization-planned .split-grid-segment.plan-done-just-completed .plan-segment-graphic-title {
  animation: planDoneStrikeDraw 0.26s ease-out 0.1s backwards;
}

@media (prefers-reduced-motion: reduce) {
  .split-visualization-planned .split-grid-segment.plan-done-just-completed,
  .split-visualization-planned .split-grid-segment.plan-done-just-completed .plan-segment-label-text,
  .split-visualization-planned .split-grid-segment.plan-done-just-completed .plan-segment-graphic-title {
    animation: none;
  }
}

/* ===== 회복의 금선 (docs/disruption-reward-seam.md) =====
   센서가 회복을 기록한 저장 순간, 계획 회복 페이지(/recovery, styles/recovery.css .rc-seam)의 금선과 같은 문법으로 한 번 그린다
   (2026-10-21 펭귄 선택 C): 원래 칸 유령(금 점선) → 출발 원 → 시간 칸 오른쪽 안쪽 레일 → 화살촉 → 도착 카드 금박 테두리,
   대신은 바뀐 카드 금박 테두리. 그 끝에서 금빛 점(.tt-seam-spark)이 시트 제목 줄의 '계획 회복'으로 날아가 담기고 그 버튼이
   잠깐 아이보리로 물들며 그 금선 표식이 다시 그어진다(.sheet-recovery-link.is-seam-landed). 선 0.4초 → 굳음 → 1.05초부터 0.3초에 걸쳐 사라짐 — 시트 위 표식 1.35초
   (JS SEAM_LIFETIME_MS와 같은 길이). 색은 로고 꿀빛 금(--tt-seam-*, 계획 회복 페이지 --k-seam-*와 같은 값).
   입력을 막지 않는다(pointer-events: none) — 드롭다운·드래그 위에도 그대로 그린다.
   문서 좌표 원점의 SVG 한 장에 overflow로 그린다(폭·높이가 0인 SVG는 그리지 않으므로 1px 상자). */
.tt-seam-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: visible;
  pointer-events: none;
  z-index: 10050;
}

.tt-seam-foil-0 { stop-color: var(--tt-seam-1); }
.tt-seam-foil-1 { stop-color: var(--tt-seam-2); }
.tt-seam-foil-2 { stop-color: var(--tt-seam-3); }

.tt-seam-overlay .tt-seam-mark {
  animation: ttSeamMark 1.35s linear forwards;
}

.tt-seam-mark .tt-seam-glow {
  fill: none;
  stroke: var(--tt-seam-glow);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: ttSeamIn 0.4s ease-out both;
}

/* 금박 선 — 그라디언트를 못 그리면 깊은 금 단색. */
.tt-seam-mark .tt-seam-line {
  fill: none;
  stroke: url(#ttSeamFoil) var(--tt-seam-ink);
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: ttSeamDraw 0.4s ease-out forwards;
}

.tt-seam-mark .tt-seam-head {
  fill: none;
  stroke: var(--tt-seam-ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: ttSeamIn 0.15s ease-out 0.35s both;
}

.tt-seam-mark .tt-seam-from {
  fill: #ffffff;
  stroke: var(--tt-seam-ink);
  stroke-width: 2;
}

/* 도착·바뀐 카드의 금박 테두리 + 옅은 금빛 번짐(계획 회복 페이지 .rc-card.is-seam). */
.tt-seam-mark .tt-seam-halo {
  fill: none;
  stroke: var(--tt-seam-halo);
  stroke-width: 6;
}

.tt-seam-mark .tt-seam-dest {
  fill: none;
  stroke: url(#ttSeamFoil) var(--tt-seam-ink);
  stroke-width: 1.75;
}

/* 선은 화살촉이 닿을 때 도착 카드가 금박으로 둘러진다. 대신은 테두리가 그어진다. */
.tt-seam-mark[data-seam-shape="line"] .tt-seam-halo,
.tt-seam-mark[data-seam-shape="line"] .tt-seam-dest {
  animation: ttSeamIn 0.15s ease-out 0.4s both;
}

.tt-seam-mark[data-seam-shape="ring"] .tt-seam-halo {
  animation: ttSeamIn 0.4s ease-out both;
}

.tt-seam-mark[data-seam-shape="ring"] .tt-seam-dest {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: ttSeamDraw 0.4s ease-out forwards;
}

/* 동반 가는 선(2026-10-22 펭귄 결정 — 늦잠 뒤 함께 밀린 뒤 계획, 연쇄): 같은 금박 선을 가늘고 옅게, 주 레일 안쪽에.
   출발 원·도착 금박·번짐은 없고(JS가 그리지 않는다) 주 표식 아래에 깔린다. 그어지고 사라지는 시간은 주 금선과 같다. */
.tt-seam-mark[data-seam-companion] .tt-seam-line {
  stroke-width: 1.25;
  opacity: 0.7;
}

.tt-seam-mark[data-seam-companion] .tt-seam-head {
  stroke-width: 1.25;
  opacity: 0.7;
}

/* 원래 칸 유령(계획 회복 페이지 .rc-ghost.is-from): 원래 분 범위에 금 점선 + 아이보리 + '원래' + 이름 + 분. */
.tt-seam-ghost {
  position: absolute;
  z-index: 10049;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  padding: 0 6px;
  overflow: hidden;
  border: 1.5px dashed var(--tt-seam-ink);
  border-radius: 7px;
  background: #fffaf0;
  color: #14254a;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  animation: ttSeamGhost 1.35s linear forwards;
}

.tt-seam-ghost b {
  flex: none;
  padding: 0 3px;
  border: 1px solid var(--tt-seam-ink);
  border-radius: 3px;
  color: var(--tt-seam-ink);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
}

.tt-seam-ghost span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tt-seam-ghost small {
  flex: none;
  color: #8a6a2e;
  font-size: 10.5px;
  font-weight: 500;
}

.tt-seam-ghost.is-short {
  padding: 0 3px;
  font-size: 11px;
}

.tt-seam-ghost.is-short b {
  display: none;
}

/* 담기: 금선 끝에서 '계획 회복'으로 날아가는 금빛 점(화면 좌표, JS가 매 프레임 자리를 정한다). */
.tt-seam-spark {
  position: fixed;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff6d6, var(--tt-seam-1) 45%, var(--tt-seam-ink));
  box-shadow: 0 0 10px 3px rgba(226, 170, 80, 0.55);
  pointer-events: none;
  z-index: 10051;
  will-change: transform;
}

/* 점이 닿은 '계획 회복'(2026-10-21 펭귄 선택 A): 금선 표식이 다시 그어지고 버튼이 0.6초 아이보리 + 옅은 금 테두리로 물든다.
   번짐(glow)은 쓰지 않는다(DESIGN.md Depth). */
.header-row .sheet-recovery-link.is-seam-landed {
  border-color: rgba(200, 138, 42, 0.7);
  background: #fffaf0;
  color: #14254a;
}

.header-row .sheet-recovery-link.is-seam-landed .sheet-recovery-mark-line {
  animation: ttSeamMarkDraw 0.4s ease-out;
}

@keyframes ttSeamMark {
  0%, 77.78% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes ttSeamGhost {
  0% { opacity: 0; }
  11.11%, 77.78% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes ttSeamDraw {
  to { stroke-dashoffset: 0; }
}

@keyframes ttSeamMarkDraw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@keyframes ttSeamIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 움직임 줄이기: 그어지거나 사라지는 움직임 없이 1.35초 보였다가 지운다(점은 날지 않고 '계획 회복'이 함께 물든다 — JS). */
@media (prefers-reduced-motion: reduce) {
  .tt-seam-overlay .tt-seam-mark,
  .tt-seam-mark .tt-seam-glow,
  .tt-seam-mark .tt-seam-line,
  .tt-seam-mark .tt-seam-head,
  .tt-seam-mark[data-seam-shape] .tt-seam-halo,
  .tt-seam-mark[data-seam-shape] .tt-seam-dest,
  .tt-seam-ghost,
  .header-row .sheet-recovery-link.is-seam-landed .sheet-recovery-mark-line {
    animation: none;
  }

  .tt-seam-mark .tt-seam-line,
  .tt-seam-mark[data-seam-shape] .tt-seam-dest {
    stroke-dashoffset: 0;
  }
}

/* 2026-07 segment-clear action in the inline plan sheet: replaces the old
   mobile close (×) button. Deletes only the tapped segment (rest fills the
   gap), so it is scoped and red per the danger token (#e74c3c, DESIGN.md).
   Sits in the top-right actions row, above the search input and + button. */
.inline-plan-segment-clear-btn {
  min-height: 32px;
  min-width: 56px;
  padding: 0 12px;
  border: 1px solid #e74c3c;
  border-radius: 999px;
  background: #e74c3c;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  align-self: center;
  transition: background 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}

.inline-plan-segment-clear-btn:hover,
.inline-plan-segment-clear-btn:focus-visible {
  background: #d64534;
  border-color: #d64534;
  outline: none;
  box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.2);
}

.inline-plan-segment-clear-btn:active {
  background: #c0392b;
  border-color: #c0392b;
}

/* 2026-10 swap: the slot left of 비우기 holds the segment timer, not 완료.
   Done is tapped far more often, so it moved onto the grid segment (the old ▶
   spot); the rarer timer lives here. Neutral outline while idle, filled dark
   while running — green stays reserved for the completed state (DESIGN.md). */
.inline-plan-segment-timer-btn {
  min-height: 32px;
  min-width: 56px;
  margin-right: 8px;
  padding: 0 12px;
  border: 1px solid #334155;
  border-radius: 999px;
  background: #ffffff;
  color: #334155;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  align-self: center;
  white-space: nowrap;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}

.inline-plan-segment-timer-btn:hover,
.inline-plan-segment-timer-btn:focus-visible {
  background: #f3f5f7;
  outline: none;
  box-shadow: 0 0 0 3px rgba(51, 65, 85, 0.16);
}

.inline-plan-segment-timer-btn.is-running,
.inline-plan-segment-timer-btn[aria-pressed="true"] {
  background: #334155;
  color: #ffffff;
}

.inline-plan-segment-timer-btn.is-running:hover,
.inline-plan-segment-timer-btn.is-running:focus-visible {
  background: #1e293b;
  border-color: #1e293b;
}

/* 시간 병합 안내 — B 손가락 시연(2026-10-24 펭귄 선택, 시안 docs/renewal-sketch/merge-hint.html B,
   controllers/merge-hint-controller.js): 병합을 안 써 본 사용자에게 가끔. 금빛 손가락이 시간 숫자를 누르고 아래 행까지 끌어 내리면
   두 칸이 실제 병합 선택처럼 남색으로 덮이고 '병합' 단추가 뜬다(그림일 뿐). 2.8초 시연을 두 번, 꼬리표 '✦ 끌어서 합치기'는 사라질 때까지.
   전부 pointer-events: none — 그대로 시간 숫자를 끌면 진짜 병합 선택이 이어진다. 길이는 JS가 --mh-first·--mh-total·--mh-drop로 준다. */
.merge-hint {
  --mh-dur: 2.8s;
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  z-index: 60;
  pointer-events: none;
}

.merge-hint > * {
  position: absolute;
  pointer-events: none;
  white-space: nowrap;
}

.merge-hint-selection {
  height: var(--mh-first);
  background: rgba(22, 58, 110, 0.14);
  box-shadow: inset 0 0 0 2px rgba(22, 58, 110, 0.44);
  opacity: 0;
  animation: mergeHintSelection var(--mh-dur) ease-in-out 2;
}

@keyframes mergeHintSelection {
  0%, 18% { height: var(--mh-first); opacity: 0; }
  22% { height: var(--mh-first); opacity: 1; }
  50% { height: var(--mh-total); opacity: 1; }
  86% { height: var(--mh-total); opacity: 1; }
  96%, 100% { height: var(--mh-total); opacity: 0; }
}

.merge-hint-button {
  padding: 5px 11px;
  border: 1px solid #d5dbe4;
  border-radius: 8px;
  background: #ffffff;
  color: #163a6e;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  box-shadow: 0 3px 10px rgba(15, 44, 87, 0.12);
  transform: translateY(-50%);
  opacity: 0;
  animation: mergeHintButton var(--mh-dur) ease-out 2;
}

@keyframes mergeHintButton {
  0%, 54% { opacity: 0; transform: translateY(-50%) scale(0.9); }
  60%, 86% { opacity: 1; transform: translateY(-50%); }
  96%, 100% { opacity: 0; transform: translateY(-50%); }
}

.merge-hint-finger {
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(242, 201, 106, 0.95) 0 38%, rgba(242, 201, 106, 0.35) 39% 62%, transparent 63%);
  box-shadow: 0 0 0 1.5px rgba(210, 148, 52, 0.8);
  opacity: 0;
  animation: mergeHintFinger var(--mh-dur) ease-in-out 2;
}

@keyframes mergeHintFinger {
  0%, 6% { opacity: 0; transform: translateY(0) scale(1.25); }
  12% { opacity: 1; transform: translateY(0) scale(1); }
  20% { opacity: 1; transform: translateY(0) scale(0.9); }
  50% { opacity: 1; transform: translateY(var(--mh-drop)) scale(0.9); }
  58% { opacity: 1; transform: translateY(var(--mh-drop)) scale(1); }
  68%, 100% { opacity: 0; transform: translateY(var(--mh-drop)) scale(1.2); }
}

.merge-hint-tag {
  padding: 4px 10px;
  border-radius: 999px;
  background: #163a6e;
  color: #f6dd9c;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(15, 44, 87, 0.18);
  animation: mergeHintTagIn 0.3s ease-out both;
}

.merge-hint-tag::before {
  content: "✦ ";
  color: var(--tt-seam-1, #f2c96a);
}

@keyframes mergeHintTagIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

.time-entry .time-slot-container.is-merge-hint-from {
  animation: mergeHintRailFrom 2.8s ease-in-out 2;
}

.time-entry .time-slot-container.is-merge-hint-to {
  animation: mergeHintRailTo 2.8s ease-in-out 2;
}

@keyframes mergeHintRailFrom {
  0%, 18% { background-color: #eceef1; }
  22%, 86% { background-color: #e5eaf2; color: #0f2c57; }
  96%, 100% { background-color: #eceef1; }
}

@keyframes mergeHintRailTo {
  0%, 46% { background-color: #eceef1; }
  50%, 86% { background-color: #e5eaf2; color: #0f2c57; }
  96%, 100% { background-color: #eceef1; }
}

/* 움직임 줄이기: 마지막 장면(두 칸 선택 + 병합 단추 + 꼬리표)을 멈춘 그림으로. 손가락은 숨긴다. */
@media screen and (prefers-reduced-motion: reduce) {
  .merge-hint > *,
  .time-entry .time-slot-container.is-merge-hint-from,
  .time-entry .time-slot-container.is-merge-hint-to {
    animation: none !important;
  }
  .merge-hint-selection {
    height: var(--mh-total);
    opacity: 1;
  }
  .merge-hint-button {
    opacity: 1;
  }
  .merge-hint-finger {
    display: none;
  }
  .time-entry .time-slot-container.is-merge-hint-from,
  .time-entry .time-slot-container.is-merge-hint-to {
    background-color: #e5eaf2 !important;
  }
}