:root {
  --app-bg: #f0f2f4;
  --surface: #ffffff;
  --border: #e5e9ed;
  --border-strong: #cfd6dd;
  --text: #1e293b;
  --text-muted: #64748b;
  --primary: #163a6e;
  --primary-hover: #0f2c57;
  --primary-soft: #f2f4f8;
  --danger: #dc2626;
  --danger-soft: #fef2f2;
  --success: #27ae60;
  --success-strong: #1e874b;
  /* 완료한 계획 카드(LUHITZ 안G): 가라앉은 아이보리 회색 + 남색 해칭·취소선. */
  --plan-done-surface: #f5f3ee;
  --plan-done-hatch: rgba(22, 58, 110, 0.11);
  --plan-done-hatch-soft: rgba(22, 58, 110, 0.03);
  --plan-done-border: rgba(22, 58, 110, 0.38);
  --plan-done-sunk: inset 0 1px 2px rgba(8, 28, 52, 0.1);
  --plan-done-strike: rgba(22, 58, 110, 0.75);
  --plan-done-text: #4e5f7d;
  --plan-done-meta: #7a8699;
  --plan-done-check: #163a6e;
  --plan-done-check-mark: #e8d3a2;
  --success-tint: rgba(39, 174, 96, 0.12);
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-card: 0 1px 2px rgba(8, 28, 52, 0.04), 0 10px 30px rgba(8, 28, 52, 0.07);
  --focus-ring: 0 0 0 3px rgba(22, 58, 110, 0.18);
  /* 회복의 금선(docs/disruption-reward-seam.md) — 세그먼트 색과 무관한 로고 꿀빛 금 한 벌.
     계획 회복 페이지(styles/recovery.css --k-seam-*)와 같은 값(2026-10-21 금선 C — 두 금선이 같아야 같은 선으로 알아본다). */
  --tt-seam-1: #f2c96a;
  --tt-seam-2: #d29434;
  --tt-seam-3: #ebbf5c;
  --tt-seam-ink: #c88a2a;
  --tt-seam-glow: rgba(226, 170, 80, 0.22);
  --tt-seam-halo: rgba(226, 170, 80, 0.18);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", "Malgun Gothic", sans-serif;
  background-color: var(--app-bg);
  color: var(--text);
  line-height: 1.6;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 24px;
  background-color: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-lg);
  margin-top: 24px;
  margin-bottom: 24px;
}

header {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.header-controls {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.header-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

/* Day title lives inside the sheet's title band (.header-row) and reads as
   the sheet headline. The band uses the 2026-07 light toolbar theme, so the
   input follows the same language: quiet face, hairline on hover, white on
   focus (see the light toolbar refresh section near the end of this file). */
.header-row > .sheet-title-cell {
  grid-column: 1 / -1;
  grid-row: 1;
  order: 0;
  padding: 8px 12px 0;
  border-right: none;
}

.day-title-input {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background-color: transparent;
  color: #2c3e50;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.day-title-input::placeholder {
  color: #9aa6b0;
  font-weight: 600;
}

.day-title-input:hover {
  border-color: #e3e7e9;
  background-color: rgba(255, 255, 255, 0.65);
}

.day-title-input:focus {
  outline: none;
  border-color: #cdd6e4;
  background-color: #ffffff;
  box-shadow: 0 1px 2px rgba(33, 41, 48, 0.06);
}

/* LUHITZ PLANNER 로고(2026-10-08): 심볼 + 워드마크 이미지. 장식이 아니라 이름이라
   워드마크 img가 alt를 갖고, 심볼은 alt=""로 읽지 않는다. */
/* 2026-10-23(펭귄 지시): 게스트 히어로와 같은 한 줄 로고 — 바탕 없는 플래너 아이콘(luhitz-hero-icon) +
   금 L·남색 UHITZ PLANNER 한 줄 워드마크(luhitz-wordmark-line). 아이콘 높이는 워드마크의 약 1.8배.
   그 전(10-11·10-12)은 남색 타일 L 심볼(luhitz-mark-192) + 두 줄 워드마크(luhitz-wordmark)였다. */
.header-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  margin-right: 6px;
}

.header-brand img {
  display: block;
}

/* 2026-10-26 펭귄 지시: 로그인한 시트의 머리에는 글귀 'Make it real'을 두지 않는다 — 워드마크 아래 글귀가 글씨 로고로 가는
   시선을 흩뜨렸다(10-25에 넣었던 것). 글귀는 게스트 히어로·로그인 페이지에만 남는다. 빈 자리만큼 워드마크를 키워
   게스트 히어로 로고와 같은 아이콘:워드마크 비례로 맞췄다 — 데스크톱 330 → 370px(index.html 속성), 휴대폰 170 → 210px,
   360px 이하 150 → 190px(styles/responsive.css). */

/* 2026-10-25 펭귄 지시(게스트 히어로 글귀): 글귀가 글씨 로고와 구분되게 양옆에 가는 선(—)을 두고, 글씨는 로고보다 한 단 작고 묽게(서브). 선은 글자색 그대로 1px. */
html.tt-guest .guest-hero-tagline::before,
html.tt-guest .guest-hero-tagline::after {
  content: "";
  flex: none;
  width: 12px;
  height: 1px;
  background: currentColor;
  opacity: 0.8;
}

.header-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.auth-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.mode-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background-color: #f9fafb;
  color: var(--text);
  cursor: pointer;
  font-size: 0.9em;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: all 0.2s ease;
}

.mode-link-btn:hover {
  background-color: var(--primary-soft);
  border-color: #94a3b8;
}

.auth-status {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 4px 10px;
  border-radius: 999px;
  background-color: #f3f5f7;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.auth-btn {
  padding: 7px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background-color: #fff;
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.auth-btn:hover {
  background-color: var(--primary-soft);
  border-color: #a7b6cd;
  color: var(--primary-hover);
}

h1 {
  color: var(--text);
  font-size: 2.2em;
}

.date-selector {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.date-selector label {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-muted);
}

.date-navigation {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-btn,
.today-btn {
  min-width: 44px;
  min-height: 42px;
  padding: 8px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background-color: white;
  color: var(--text);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
  touch-action: manipulation;
}

.nav-btn:hover {
  background-color: var(--primary-soft);
  color: var(--primary-hover);
  border-color: #a7b6cd;
}

.today-btn {
  background-color: var(--primary);
  color: white;
  border-color: var(--primary);
}

.today-btn:hover {
  background-color: var(--primary-hover);
  border-color: var(--primary-hover);
}

.date-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 42px;
  padding: 8px 12px;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background-color: #fff;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

/* The native date input owns the value + calendar popover, but it can only
   render the browser locale format with its icon locked inside. To show
   "2026.07.13 (월)" with the calendar on the right, it sits as a fully
   transparent overlay over a custom display, and its calendar-picker
   indicator is stretched across the whole field (below) so a plain click or
   tap opens the native picker. This works cross-browser, unlike showPicker()
   on a hidden (opacity:0 / pointer-events:none) input, which Safari/WebKit
   ignored — that left click-to-open doing nothing there. */
.date-selector input {
  position: absolute;
  inset: 0;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 42px;
  margin: 0;
  padding: 0;
  border: 0;
  background-color: transparent;
  color: transparent;
  cursor: pointer;
  font-family: inherit;
}

/* Invisible, but stretched to cover the whole input so a click anywhere on
   the field opens the native date picker (WebKit/Blink). */
.date-selector input::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}

.date-selector input:focus {
  outline: none;
}

.date-input-wrap:focus-within {
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
}

.date-display {
  flex: 0 1 auto;
  min-width: 0;
  color: var(--text);
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.date-display-value {
  font-variant-numeric: tabular-nums;
}

.date-weekday {
  color: var(--text);
  font-weight: 400;
}

.date-picker-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--text-muted);
  pointer-events: none;
}

.timesheet {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: visible;
  box-shadow: 0 1px 2px rgba(8, 28, 52, 0.04);
}

.header-row {
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  background-color: #34495e;
  background-image: linear-gradient(180deg, #3d5570 0%, #34495e 100%);
  color: white;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 30;
  overflow: hidden;
  border-radius: 6px 6px 0 0;
  box-shadow: 0 1px 0 #2c3e50;
}

/* Match the 12px timesheet card radius (declared after the base rule on purpose). */
.header-row {
  border-radius: 11px 11px 0 0;
}

.header-row>div {
  padding: 12px 14px;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 1em;
  font-weight: 600;
}

.header-row>div:last-child {
  border-right: none;
}

.planned-label,
.time-label {
  color: white;
  font-size: inherit;
  font-weight: inherit;
}

.planned-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.planned-label-text {
  min-width: 0;
}

.planned-mode-control-group,
.time-grid-range-controls {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}


/* ?�더??'?�간' ?�벨??본문 ?�간 ?�벨 ?��??�에 ?�향??받�? ?�도�?명시 */
.header-row .time-label {
  color: white !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}

.time-entry {
  display: grid;
  grid-template-columns: 80px 1fr;
  border-bottom: 2px solid #dde4ec;
  background-color: white;
  user-select: none;
  position: relative;
  --merge-accent: rgba(22, 58, 110, 0.96);
  --merge-surface: rgba(229, 234, 242, 0.92);
  --merge-surface-strong: rgba(205, 214, 228, 0.96);
  --merge-planned-surface: rgba(242, 244, 248, 0.98);
  --merge-border: rgba(125, 144, 176, 0.98);
  --merge-outline: rgba(22, 58, 110, 0.28);
  --merge-rail: rgba(52, 73, 94, 0.26);
  --plan-segment-default-bg: #FFFFFF;
  --plan-segment-default-border: #E5E7EB;
  --plan-segment-default-shadow:
    0 1px 2px rgba(8, 28, 52, 0.08),
    0 6px 14px rgba(8, 28, 52, 0.07),
    0 12px 24px rgba(8, 28, 52, 0.035),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  --plan-segment-hover-bg: #FAFBFC;
  --plan-segment-hover-shadow:
    0 2px 4px rgba(8, 28, 52, 0.09),
    0 8px 18px rgba(8, 28, 52, 0.075),
    0 14px 28px rgba(8, 28, 52, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

.header-row,
.time-entry {
  grid-template-columns: 80px 1fr;
}

.header-row > div.time-label {
  border-right: 1px solid #2c3e50;
  order: 1;
}

/* Visual refresh: soften the divider without touching the base rule above. */
.header-row > div.time-label {
  border-right-color: rgba(255, 255, 255, 0.1);
}

.header-row > div.planned-label {
  border-right: none;
  order: 2;
}

.time-slot-container .timer-controls-container {
  display: none;
}

.split-cell-wrapper .split-visualization-planned {
  pointer-events: auto;
}

.split-grid-segment.has-plan-segment-timer {
  padding: 0;
}

.plan-segment-graphic {
  display: grid;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 38px;
  min-width: 0;
  overflow: hidden;
}

.plan-segment-graphic-main {
  min-width: 0;
  max-width: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  overflow: hidden;
}

.plan-segment-graphic-main.has-segment-title {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

/* 1행(비확장) 세그먼트에 제목+라벨+타이머가 모두 쌓이면 기본 크기로는
   행 높이(약 42px)를 넘는다 — 라벨 행이 눌려 부모 제목이 자식 활동 라벨을
   가리던 원인. 제목·라벨·타이머를 함께 압축해 세 줄이 실제로 행 안에
   들어가게 하고, 자식 라벨 행에는 글리프가 온전히 보이는 최소 높이를
   보장한다 (부모 제목이 아니라 남는 공간이 줄어들도록). */
.split-grid-segment:not(.is-hour-multiple-tall-plan-segment)
  .plan-segment-graphic-main.has-segment-title {
  grid-template-rows: auto minmax(14px, 1fr) auto;
}

.split-grid-segment:not(.is-hour-multiple-tall-plan-segment)
  .plan-segment-graphic-main.has-segment-title
  .plan-segment-graphic-title {
  padding-top: 1px;
  font-size: 10px;
  line-height: 1.1;
}

.split-grid-segment:not(.is-hour-multiple-tall-plan-segment)
  .plan-segment-graphic-main.has-segment-title
  .plan-segment-timer-row {
  padding-bottom: 0;
  --plan-segment-done-button-width: 15px;
}

.split-grid-segment:not(.is-hour-multiple-tall-plan-segment)
  .plan-segment-graphic-main.has-segment-title
  .plan-segment-done-button {
  width: 15px;
  min-width: 15px;
  height: 15px;
  font-size: 11px;
}

.split-grid-segment:not(.is-hour-multiple-tall-plan-segment)
  .plan-segment-graphic-main.has-segment-title
  .plan-segment-timer-time {
  min-height: 14px;
}

.split-grid-segment:not(.is-hour-multiple-tall-plan-segment)
  .plan-segment-graphic-main.has-segment-title
  .plan-segment-graphic-label {
  align-self: stretch;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.2;
}

.split-grid-segment.is-hour-multiple-tall-plan-segment .plan-segment-graphic-main {
  grid-template-rows: auto auto;
  align-content: center;
  justify-items: center;
  row-gap: 8px;
}

.split-grid-segment.is-hour-multiple-tall-plan-segment .plan-segment-graphic-main.has-segment-title {
  grid-template-rows: auto auto auto;
}

.split-grid-segment.is-hour-multiple-tall-plan-segment .plan-segment-graphic-label {
  align-self: center;
  font-size: 13px;
}

.split-grid-segment.is-hour-multiple-tall-plan-segment .plan-segment-timer-row {
  padding-bottom: 0;
}

.plan-segment-graphic-title,
.plan-segment-graphic-label {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 6px;
}

.plan-segment-graphic-title {
  align-self: end;
  padding-top: 4px;
  color: #334155;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.15;
}

.plan-segment-graphic-label {
  align-self: center;
}

/* 2026-10 자리 교환: 격자 세그먼트의 이 자리는 타이머(▶)가 아니라 완료 체크박스다.
   크기는 옛 타이머 버튼 그대로(17px, 제목 있는 세그먼트 15px) — 이웃을 덮지 않는다.
   비어 있으면 테두리 상자, 완료면 성공색으로 채운 ✓ (초록은 완료 상태 전용, DESIGN.md). */
.plan-segment-done-button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 13;
  width: 17px;
  min-width: 17px;
  height: 17px;
  box-sizing: border-box;
  border: 1.5px solid rgba(22, 58, 110, 0.38);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.7);
  color: #ffffff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  padding: 0;
}

.plan-segment-done-button.is-done,
.plan-segment-done-button[aria-pressed="true"] {
  border-color: var(--plan-done-check);
  background: var(--plan-done-check);
  color: var(--plan-done-check-mark);
}

/* 체크박스 둘레의 고리(outline)는 키보드 포커스에만 그린다. 탭 뒤 모바일에 :hover가 남아 체크·해제 뒤에도
   괄호 같은 고리가 붙어 있던 것을 2026-10-09 사용자 지시로 걷어 냈다. 마우스 hover는 테두리 색만 바꾼다. */
@media (hover: hover) and (pointer: fine) {
  .plan-segment-done-button:hover {
    border-color: var(--plan-done-check);
  }
}

.plan-segment-done-button:focus-visible {
  border-color: var(--plan-done-check);
  outline: 2px solid rgba(22, 58, 110, 0.24);
  outline-offset: 1px;
}

.plan-segment-timer-row {
  --plan-segment-done-button-width: 17px;
  --plan-segment-timer-gap: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  padding: 0 8px 4px;
  white-space: nowrap;
}

.plan-segment-timer-row:has(.plan-segment-done-button) {
  transform: translateX(calc((var(--plan-segment-done-button-width) + var(--plan-segment-timer-gap)) / -2));
}

.plan-segment-timer-time {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  min-height: 16px;
  padding: 0;
  color: #4b5563;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

.plan-segment-timer-time.tone-match {
  color: #b7791f;
}

.plan-segment-timer-time.tone-over {
  color: #c2410c;
}

.time-entry:nth-child(even) .time-slot {
  background-color: #f8f9fa;
}

.time-entry:nth-child(even) {
  background-color: white;
}

.time-entry.merge-capable .time-slot-container {
  position: relative;
  overflow: hidden;
  transition: background-color 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.time-entry.merge-capable .time-slot-container {
  padding: 8px 8px 8px 18px;
  text-align: center;
  font-weight: 600;
  background-color: #eceef1;
  border-left: none;
  border-right: 2px solid #ddd;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.time-entry.merge-capable .time-slot-container:not(.merged-time-main):not(.merged-time-secondary) {
  padding: 8px;
}

.time-entry.merge-capable .time-slot-merge-affordance {
  position: static;
  order: 2;
  flex: 0 0 auto;
  width: 18px;
  height: 5px;
  margin-top: 4px;
  border-radius: 999px;
  background: var(--merge-rail);
  opacity: 0.42;
  transform: none;
  transition: opacity 0.18s ease, transform 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
  pointer-events: none;
}

.time-entry.merge-hover .time-slot-container,
.time-entry.merge-selecting .time-slot-container,
.time-entry.merge-selected-range .time-slot-container,
.time-entry.existing-merged-range .time-slot-container {
  box-shadow: inset 0 0 0 2px var(--merge-outline);
}

/* Prevent browser scroll interference during active time-slot merge drag */
.time-entry.merge-selecting .time-slot-container {
  touch-action: none;
}

.time-entry.merge-hover .time-slot-container.merged-time-main,
.time-entry.merge-hover .time-slot-container.merged-time-secondary,
.time-entry.merge-selecting .time-slot-container.merged-time-main,
.time-entry.merge-selecting .time-slot-container.merged-time-secondary,
.time-entry.merge-selected-range .time-slot-container.merged-time-main,
.time-entry.merge-selected-range .time-slot-container.merged-time-secondary,
.time-entry.existing-merged-range .time-slot-container.merged-time-main,
.time-entry.existing-merged-range .time-slot-container.merged-time-secondary {
  box-shadow: none;
}

.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 {
  box-shadow: inset 0 0 0 2px var(--merge-outline);
}

.time-entry.merge-hover .time-slot-container {
  background-color: var(--merge-planned-surface);
}

.time-entry.merge-hover .time-slot-merge-affordance,
.time-entry.merge-selecting .time-slot-merge-affordance {
  opacity: 1;
  transform: scaleY(1.18);
  background: var(--merge-accent);
}

.time-entry.merge-selected-range .time-slot-container,
.time-entry.merge-selecting .time-slot-container {
  background-color: var(--merge-surface);
  border-left-color: var(--merge-border);
  border-right-color: var(--merge-border);
}

.time-entry.merge-selected-range .time-label,
.time-entry.merge-selecting .time-label {
  color: #0f2c57;
}

.time-entry.existing-merged-range .time-slot-container {
  background-color: var(--merge-surface);
  border-left-color: var(--merge-border);
  border-right-color: var(--merge-border);
  box-shadow: inset 0 0 0 2px var(--merge-outline);
}

.time-entry.existing-merged-range .time-label {
  color: var(--merge-accent);
}

.time-entry.existing-merged-range .time-slot-merge-affordance {
  background: var(--merge-rail);
}

@media (hover: none), (pointer: coarse) {
  .time-entry.merge-capable .time-slot-merge-affordance {
    opacity: 0.82;
  }
  /* Tell the browser the rail area is not a scroll surface,
     so drag-to-merge gestures are not stolen by page scroll. */
  .time-entry.merge-capable .time-slot-container {
    touch-action: none;
  }
}

.time-entry .time-label {
  order: 1;
  font-size: 14px;
  font-weight: 700;
  color: #2c3e50;
}

.input-field {
  padding: 8px 12px;
  border: 1px solid transparent;
  /* ?�이?�웃 ?��??�을 ?�해 ?�명 ?�두�??��? */
  background: white;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 44px;
  text-align: center;
  font-size: 16px;
  box-sizing: border-box;
  /* ?�두�??�무???�른 ??변??방�? */
}

/* 루틴으로 채운 칸의 초록 표시(왼쪽 세로줄 + 번짐)는 2026-10-09 사용자 지시로 지웠다 — 입력칸 시절 표시라
   지금은 세그먼트 카드에 가려 틈으로만 삐져나와 정체 모를 초록으로 보였다. .routine-planned 클래스는 그대로 붙는다. */

.planned-input {
  border-right: 0;
  /* ?�간?�과 맞닿???�측 경계???�거 (겹침 방�?) */
}

.time-entry.merge-hover .planned-input,
.time-entry.merge-selecting .planned-input,
.time-entry.merge-selected-range .planned-input,
.time-entry.existing-merged-range .planned-input {
  background-color: var(--merge-planned-surface);
}

.time-entry.merge-hover .planned-input:hover,
.time-entry.merge-selecting .planned-input:hover,
.time-entry.merge-selected-range .planned-input:hover,
.time-entry.existing-merged-range .planned-input:hover,
.time-entry.merge-hover .split-cell-wrapper.split-type-planned:hover .planned-input,
.time-entry.merge-selecting .split-cell-wrapper.split-type-planned:hover .planned-input,
.time-entry.merge-selected-range .split-cell-wrapper.split-type-planned:hover .planned-input,
.time-entry.existing-merged-range .split-cell-wrapper.split-type-planned:hover .planned-input {
  background-color: var(--merge-planned-surface) !important;
}

.time-entry.merge-hover .split-cell-wrapper.split-type-planned,
.time-entry.merge-selecting .split-cell-wrapper.split-type-planned,
.time-entry.merge-selected-range .split-cell-wrapper.split-type-planned,
.time-entry.existing-merged-range .split-cell-wrapper.split-type-planned {
  box-shadow: inset 0 0 0 2px var(--merge-outline);
}

.time-entry.merge-selecting .split-cell-wrapper.split-type-planned,
.time-entry.merge-selected-range .split-cell-wrapper.split-type-planned {
  background-image: linear-gradient(90deg, var(--merge-planned-surface) 0, rgba(242, 244, 248, 0.7) 45%);
}

.time-entry.existing-merged-range .split-cell-wrapper.split-type-planned {
  background-image: linear-gradient(90deg, rgba(220, 252, 231, 0.96) 0, rgba(220, 252, 231, 0.72) 45%);
}

.input-field:focus {
  background-color: #fff;
  outline: 2px solid #2a4f86;
  outline-offset: -2px;
}

.input-field.planned-input:focus,
.input-field.planned-input:focus-visible {
  outline: none;
}

.input-field.planned-input.planned-input-suppress-focus-ring:focus {
  outline: none;
}

.input-field:hover {
  background-color: #e8f4fd;
}

.actions {
  margin-top: 24px;
  display: flex;
  gap: 12px;
  justify-content: center;
}

.actions button {
  padding: 10px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

#saveBtn {
  background-color: #27ae60;
  color: white;
}

#saveBtn:hover {
  background-color: #229954;
}

#loadBtn {
  background-color: #2a4f86;
  color: white;
}

#loadBtn:hover {
  background-color: #1d3f73;
}


#clearBtn {
  background-color: #fff;
  border-color: #fecaca;
  color: var(--danger);
}

#clearBtn:hover {
  background-color: var(--danger-soft);
  border-color: #fca5a5;
}

@media (max-width: 768px) {
  .container {
    margin: 10px;
    padding: 15px;
  }

  header {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }

  h1 {
    font-size: 1.8em;
  }

  .header-row,
  .time-entry {
    grid-template-columns: 60px 1fr;
  }

  .time-slot,
  .input-field {
    padding: 8px;
    font-size: 14px;
  }

  .actions {
    flex-direction: column;
    align-items: center;
  }

  .actions button {
    width: 200px;
  }
}

.input-field.field-selected {
  background-color: transparent !important;
  color: inherit !important;
}

.input-field.field-selected::placeholder {
  color: inherit !important;
  opacity: 0.7;
}

.header-row {
  user-select: none;
  pointer-events: none;
}

.header-row>div {
  pointer-events: none;
}

.header-row .planned-slot-clear-mode-btn,
.header-row .planned-mode-control-group,
.header-row .time-grid-range-controls,
.header-row .time-grid-range-select,
.header-row .time-grid-range-btn,
.header-row .sheet-title-cell,
.header-row .day-title-input {
  pointer-events: auto;
}

/* The band disables user-select for its labels; the title field still needs
   editable text selection (Safari honors the inherited none inside inputs). */
.header-row .day-title-input {
  -webkit-user-select: text;
  user-select: text;
}

/* 병합/병합 해제/분리 플로팅 버튼 공통 스펙 (DESIGN.md 토큰: 흰 서피스, 헤어라인
   보더, accent-blue, 7px 라디우스, 소프트 섀도우, 120–220ms 트랜지션) */
.merge-button,
.undo-button,
.merge-action-button {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 44px;
  height: 30px;
  padding: 0 10px;
  background: #ffffff;
  color: #2a4f86;
  border: 1px solid #e5e7eb;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(8, 28, 52, 0.12);
  cursor: pointer;
  z-index: 1000;
  -webkit-user-select: none;
  user-select: none;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.merge-button::after,
.undo-button::after,
.merge-action-button::after {
  /* 30px 시각 크기에 36px 터치 타깃 확보 */
  content: "";
  position: absolute;
  inset: -3px;
}

.merge-button:hover,
.undo-button:hover,
.merge-action-button:hover {
  background: #f9fafb;
  border-color: #2a4f86;
  box-shadow: 0 2px 6px rgba(8, 28, 52, 0.16);
}

.merge-button:active,
.undo-button:active,
.merge-action-button:active {
  background: #f9fafb;
  box-shadow: 0 1px 2px rgba(8, 28, 52, 0.12);
}

.undo-button::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  /* Heroicons arrow-uturn-left (24/outline) — Copyright (c) Tailwind Labs, Inc., MIT License.
     전문: /THIRD-PARTY-NOTICES.txt */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%233498db' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 15 3 9m0 0 6-6M3 9h12a6 6 0 0 1 0 12h-3'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* 분리 시간대 선택 피커 */
.split-picker {
  position: absolute;
  z-index: 1001;
  min-width: 184px;
  max-width: calc(100vw - 24px);
  padding: 8px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 7px;
  box-shadow: 0 4px 12px rgba(8, 28, 52, 0.16);
  color: #333333;
  font-size: 12px;
}

.split-picker-header {
  padding: 4px 4px 8px;
  font-size: 12px;
  font-weight: 700;
  color: #2c3e50;
}

.split-picker-rows {
  display: flex;
  flex-direction: column;
  max-height: 240px;
  overflow-y: auto;
}

.split-picker-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 4px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 120ms ease;
}

.split-picker-row:hover {
  background: #f9fafb;
}

.split-picker-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #2a4f86;
}

.split-picker-hint {
  padding: 4px;
  font-size: 11px;
  color: #e74c3c;
}

.split-picker-warning {
  max-width: 220px;
  padding: 6px 4px 2px;
  font-size: 11px;
  line-height: 1.45;
  word-break: keep-all;
  color: #b45309;
}

.split-picker-warning[hidden] {
  display: none;
}

.split-picker-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding-top: 8px;
}

.split-picker-cancel,
.split-picker-confirm {
  min-width: 44px;
  height: 30px;
  padding: 0 10px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.split-picker-cancel {
  background: #f9fafb;
  color: #333333;
  border: 1px solid #e5e7eb;
}

.split-picker-cancel:hover {
  color: #2a4f86;
  border-color: #2a4f86;
}

.split-picker-confirm {
  background: #2a4f86;
  color: #ffffff;
  border: 1px solid #2a4f86;
}

.split-picker-confirm:hover:not(:disabled) {
  background: #1d3f73;
  border-color: #1d3f73;
}

.split-picker-confirm:disabled {
  opacity: 0.45;
  cursor: default;
}

.merged-field {
  border-bottom: none !important;
}

.merged-secondary {
  opacity: 0;
  visibility: visible;
  pointer-events: none;

  border: none !important;
  background: transparent !important;

  /* �??�의 기본 ?�이�??��??�여 ?�체 ?�트 ?�이�?보존 */
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;

  caret-color: transparent;
  user-select: none;
  outline: none;
}

/* 계획 병합 보조 ?�롯?� ?�치/마우???�래�??�작?�으�??�용 */
.planned-input.merged-secondary.planned-merged-secondary {
  pointer-events: auto;
}

.merged-field {
  background-color: white !important;
  border: 1px solid #ddd !important;
  border-bottom: none !important;
  border-top: none !important;
  /* ?�단 중복 ?�인 방�? */
  align-self: stretch !important;
  justify-self: stretch !important;
}

/* 병합???�력???�버 ???�한 ?��???강조가 ?��??�도�?복원 */
.merged-field:hover {
  background-color: #e8f4fd !important;
}

/* 좌측 병합 메인 컨테?�너: ?��? ?�력???��??�치�??�장 */
.planned-merged-main-container {
  position: relative;
  z-index: 7;
  /* ???��? ?�버?�이 ??*/
  overflow: visible;
}

.planned-merged-main-container .merged-field {
  box-sizing: border-box !important;
  /* ?�이, ?�치??JS?�서 runtime?�로 ?�정 */
}

/* 좌측(계획) 병합 블록: ?????�인?� ??경계??2px)??그�?�??�용 */
.planned-merged-main-container::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--merged-planned-block-height, 44px);
  border: none;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 2;
}

/* 병합??계획 ?�력???�체 병합 ?�이??맞춰 ?��?배치 */
.planned-merged-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  /* ??��/막�? ???�택 컨텍?�트�?만들???�식 z-index�??�어 */
  /* ?�단 2px(??경계????가리�? ?�도�??�이�?2px 줄임 */
  height: calc(var(--merged-planned-block-height, 44px) - 2px);
  display: flex;
  align-items: center;
  padding: 0;
  box-sizing: border-box;
}

.planned-merged-overlay::before {
  content: "";
  position: absolute;
  inset: 2px 0 2px 0;
  /* ?�·하 ?�두리�? ?�기�??��? ??경계?�만 ??�� */
  background: #fff;
  border-radius: inherit;
  z-index: 0;
  /* ??��??가???? 막�????�로 ?�림 */
  pointer-events: none;
}

.planned-merged-overlay .merged-field {
  height: 100%;
  width: 100%;
  position: relative;
  /* 배경(::before)보다 ?�로 ?�림 */
  z-index: 1;
}

/* 좌측(계획) 병합 ?�드: ?�간?�과 맞닿???�측 경계???�거 */
.planned-input.merged-field,
.planned-input.merged-main {
  border-right: 0 !important;
  border-left-color: transparent !important;
  /* ?�곽(?�?�시?? 좌측 2px?� 겹치지 ?�도�??��? */
}

/* ?�택 ?�과???�명 ?�버?�이로만 ?�용: ?�드 ?�체 배경/?�상 변�??�거 */
.merged-field.field-selected {
  background-color: transparent !important;
  color: inherit !important;
  border-color: inherit !important;
}

.merged-secondary.field-selected {
  background-color: transparent !important;
  color: inherit !important;
  border-color: inherit !important;
  box-shadow: none !important;
}

.selected-merged-planned {
  position: relative;
}

.selected-merged-planned::after {
  content: none !important;
}

.merged-field.field-selected,
.merged-secondary.field-selected {
  position: static !important;
}

.merged-field.field-selected::after,
.merged-secondary.field-selected::after {
  content: none !important;
}

.has-planned-merge {
  position: relative;
  border-bottom-color: #eceef1;
}

.has-planned-merge.merge-selected-range,
.has-planned-merge.merge-selecting,
.has-planned-merge.existing-merged-range {
  border-bottom-color: #eceef1;
}

.has-planned-merge.merge-hover {
  border-bottom-color: #eceef1;
}

.has-planned-merge::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 80px;
  right: 0;
  height: 2px;
  background-color: white;
  z-index: 1;
}

.has-planned-merge.merge-selected-range::after,
.has-planned-merge.merge-selecting::after,
.has-planned-merge.existing-merged-range::after {
  background-color: #eceef1;
}

.has-planned-merge.merge-hover::after {
  background-color: #eceef1;
}

@media (max-width: 768px) {
  .has-planned-merge::after {
    left: 60px;
    right: 0;
  }
}

.selection-overlay {
    position: absolute;
    background-color: rgba(42, 79, 134, 0.25);
  /* ?�명 ?��? ?�버?�이�?*/
  /* ?�두리는 ?�셋 박스?�?�우�??�일??진하�??��? (???�단?�과 겹침 방�?) */
  box-shadow: inset 0 0 0 2px rgba(42, 79, 134, 0.55);
  border-radius: 4px;
  pointer-events: auto;
  cursor: pointer;
  z-index: 900;
  /* 콘텐�??�버?�이 ?? 버튼(1000) ?�래 */
}

.selection-overlay[data-type="planned"] {
  --merge-overlay-surface: rgba(22, 58, 110, 0.14);
  --merge-overlay-outline: rgba(22, 58, 110, 0.44);
  background-color: var(--merge-overlay-surface);
  box-shadow: inset 0 0 0 2px var(--merge-overlay-outline);
}

.selection-overlay[data-type="planned"][data-merge-visual-state="candidate"] {
  --merge-overlay-surface: rgba(22, 58, 110, 0.14);
  --merge-overlay-outline: rgba(22, 58, 110, 0.44);
}

.selection-overlay[data-type="planned"][data-merge-visual-state="existing"] {
  --merge-overlay-surface: rgba(22, 163, 74, 0.14);
  --merge-overlay-outline: rgba(22, 163, 74, 0.42);
}

.selection-overlay[data-type="planned"][data-merge-visual-state="single"],
.selection-overlay[data-type="planned"][data-fill="outline"] {
    background-color: transparent;
    pointer-events: none;
}

/* An already-merged block keeps its selection tint as pure feedback: the
   overlay must never swallow clicks meant for the segments, their resize
   handles, or an open dropdown underneath (undo/schedule buttons float
   above as separate elements and stay clickable). */
.selection-overlay[data-type="planned"][data-merge-visual-state="existing"] {
    pointer-events: none;
}

.hover-selection-overlay {
  pointer-events: none;
  z-index: 880;
}

.selected-merged-planned::after,
.has-planned-merge::after,
.merged-field.field-selected::after,
.merged-secondary.field-selected::after {
  pointer-events: none;
}


.planned-input.merged-field:focus,
.planned-input.merged-main:focus,
.planned-input.merged-secondary.planned-merged-secondary:focus {
  outline: none !important;
}

/* ============================================================
   2026-07 light toolbar refresh.
   Regression tests lock the literal text of the base .header-row /
   .today-btn / mode-button rules above, so every visual change here
   is a later override — do not fold these back into the base rules.
   ============================================================ */

/* Tones are sampled from the sheet body (#eceef1 time cells, near-neutral
   plan cells) — keep this band desaturated, not tailwind slate. The base
   rule's overflow:hidden (locked literal text) would clip the time-range
   popover that hangs below the band, so it is relaxed here. */
.header-row {
  background-color: #edeff2;
  background-image: linear-gradient(180deg, #fafbfb 0%, #ebeef1 100%);
  color: #38424c;
  box-shadow: 0 1px 0 #d8dde2;
  overflow: visible;
}

.header-row > div {
  border-right-color: var(--border);
}

.header-row .planned-label,
.header-row .time-label {
  color: #38424c;
}

/* The title row does not need a time-column header: hide the cell and let
   the toolbar span the full width. The element and its base rules stay in
   place because regression tests assert their literal text.
   (.timesheet prefix outranks the locked mobile grid-template overrides.) */
.timesheet .header-row {
  grid-template-columns: minmax(0, 1fr);
}

.header-row > div.time-label {
  display: none;
}

.header-row .planned-label-text {
  color: #38424c;
}

/* "오늘" button: soft sheet-blue instead of the saturated primary. */
.today-btn {
  background-color: var(--primary-soft);
  border-color: #cdd6e4;
  color: #0f2c57;
}

.today-btn:hover {
  background-color: #e5eaf2;
  border-color: #a7b6cd;
  color: var(--primary-hover);
}

/* Drawing-tool style clusters in the sheet title row. 루틴·슬롯 삭제 묶음(.planned-mode-control-group)은 2026-10-24부터
   상자를 그리지 않는다 — 단추마다 '계획 회복' 같은 흰 상자다(아래 Title-row tools). */
.header-row .time-grid-range-controls {
  gap: 3px;
  padding: 3px;
  background: #ffffff;
  border: 1px solid #e3e7e9;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(33, 41, 48, 0.06);
}

/* 계획 회복(/recovery) 진입 — 시트 제목 줄, 루틴과 같은 줄 오른쪽, 로그인 사용자 모두(script.js updateAuthUI). 진입점은 이것 하나다 —
   머리(.auth-controls)에 있던 링크는 아래 시간을 고칠 때 화면 밖이라 동작 편의로 늘 보이는 제목 줄(sticky)로 옮겼다(2026-10-21 펭귄 지시).
   금선의 금빛 점이 이리로 날아와 담긴다(같은 날 펭귄 선택 C, docs/disruption-reward-seam.md). 도구 상자와 같은 높이의 글자 버튼
   (이름이 보여야 한다 — 아이콘으로 줄이지 않는다). 모양은 같은 날 펭귄 선택 A '금선 표식'(시안 docs/renewal-sketch/recovery-button.html):
   흰 몸체·회색 테두리·남색 글자는 도구 상자와 같고, 글자 앞에 금선을 줄인 표식 하나(출발 원 → 꺾임 → 화살촉)만 금이다 — '오늘'의
   남색 글자 + 금 ✦와 같은 문법(DESIGN.md: 남색과 금은 함께, 시트 위 버튼 줄에 금 테두리 없음). 점이 닿는 순간은 interactions.css(.is-seam-landed). */
.header-row .sheet-recovery-link {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid #e3e7e9;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(33, 41, 48, 0.06);
  color: #14254a;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  gap: 6px;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.header-row .sheet-recovery-mark {
  flex: none;
  width: 16px;
  height: 14px;
  overflow: visible;
}

/* 금박 선(그라디언트를 못 그리면 깊은 금 단색). pathLength 1 + dasharray 1 — 닿는 순간 다시 그어진다. */
.sheet-recovery-mark-line {
  fill: none;
  stroke: url(#ttRecoveryMarkFoil) var(--tt-seam-ink);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.sheet-recovery-mark-head {
  fill: none;
  stroke: var(--tt-seam-ink);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

.header-row .sheet-recovery-link[hidden] {
  display: none;
}

.header-row .sheet-recovery-link:hover {
  border-color: rgba(184, 143, 62, 0.55);
  background: var(--lz-ivory);
}

.header-row .sheet-recovery-link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* 게스트 첫 화면에도 보인다(2026-10-23 펭귄 선택 C — 금선 시연의 점이 여기에 담긴다, 누르면 로그인 안내). 도구가 숨은 제목 줄의 오른쪽. */
html.tt-guest .header-row .sheet-recovery-link {
  margin-left: auto;
}

.header-row .time-grid-range-btn {
  position: relative;
  min-width: 34px;
  min-height: 30px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #4d565e;
  /* The button label text stays in the DOM for tests and screen
     readers; the visible face is the masked tool icon below. */
  font-size: 0;
  line-height: 0;
  overflow: visible;
  box-shadow: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.header-row .time-grid-range-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 17px;
  height: 17px;
  background-color: currentColor;
  -webkit-mask: var(--toolbar-icon) center / contain no-repeat;
  mask: var(--toolbar-icon) center / contain no-repeat;
  pointer-events: none;
}


.header-row .planned-slot-clear-mode-btn {
  --toolbar-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M9 3h6l1 2h4v2H4V5h4l1-2zm-3 6h12l-.9 11.1a2 2 0 0 1-2 1.9H8.9a2 2 0 0 1-2-1.9L6 9zm4 3h1.6v6H10v-6zm3.4 0H15v6h-1.6v-6z'/></svg>");
}

.header-row .time-grid-range-btn {
  /* Material Symbols 계열 check — Google, Apache License 2.0. 전문: /THIRD-PARTY-NOTICES.txt */
  --toolbar-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9.55 17.05 4.5 12l1.4-1.4 3.65 3.65 8.55-8.55 1.4 1.4z'/></svg>");
}


.header-row .time-grid-range-btn:hover {
  background: var(--primary-soft);
  border-color: #cdd6e4;
  color: var(--primary-hover);
}

.header-row .planned-slot-clear-mode-btn:hover {
  background: var(--danger-soft);
  border-color: #fecaca;
  color: var(--danger);
}

.header-row .planned-slot-clear-mode-btn:focus-visible,
.header-row .time-grid-range-btn:focus-visible,
.header-row .time-grid-range-select:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Selected tool. */


.header-row .planned-slot-clear-mode-btn[aria-pressed="true"] {
  background: var(--danger);
  border-color: var(--danger);
  color: #ffffff;
  box-shadow: inset 0 1px 2px rgba(8, 28, 52, 0.22);
}


/* Range picker fields inside the light toolbar. */
.header-row .time-grid-range-field {
  color: #6e777e;
}

.header-row .time-grid-range-select {
  border: 1px solid #e3e7e9;
  border-radius: 7px;
  background: #f6f8f8;
  color: #38424c;
}

.header-row .time-grid-range-field + .time-grid-range-field::before {
  color: #9aa4ab;
}

/* ===== Title-row tools: 루틴 · 슬롯 삭제 ===== */

/* 아이콘 + 이름, 단추마다 흰 상자(2026-10-24 펭귄 지시 — '계획 회복'처럼 이름이 보여야 하고, 상자 하나에 함께 담지 않고 따로 선다;
   그 전엔 흰 도구 상자 하나 안에 글자를 0px로 숨긴 아이콘 단추 둘이었다). 상자는 '계획 회복'(.sheet-recovery-link)과 같은 흰 몸체·회색 테두리·
   10px 모서리·38px 높이·남색 글자 13px/600이고, 글자 앞 아이콘 16px은 글자와 같은 색이다(금은 '계획 회복' 표식에만). 두 상자 사이는 6px.
   슬롯 삭제는 켜면 글자가 '삭제 완료'로 바뀐다(planned-slot-move-controller.js) — 아이콘은 ::before라 글자를 바꿔도 남는다. */
.header-row .planned-mode-control-group {
  gap: 6px;
}

.header-row .planned-routine-mode-btn,
.header-row .planned-slot-clear-mode-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid #e3e7e9;
  border-radius: 10px;
  background: #ffffff;
  color: #14254a;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  overflow: visible;
  box-shadow: 0 1px 2px rgba(33, 41, 48, 0.06);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.header-row .planned-routine-mode-btn {
  /* Material Icons repeat — Google, Apache License 2.0. 전문: /THIRD-PARTY-NOTICES.txt */
  --toolbar-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z'/></svg>");
}

.header-row .planned-routine-mode-btn::before,
.header-row .planned-slot-clear-mode-btn::before {
  content: '';
  flex: none;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: var(--toolbar-icon) center / contain no-repeat;
  mask: var(--toolbar-icon) center / contain no-repeat;
  pointer-events: none;
}

.header-row .planned-routine-mode-btn:hover {
  background: var(--primary-soft);
  border-color: #cdd6e4;
  color: var(--primary-hover);
}

.header-row .planned-routine-mode-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.header-row .planned-routine-mode-btn[aria-pressed="true"] {
  background: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
  box-shadow: inset 0 1px 2px rgba(8, 28, 52, 0.22);
}

/* 루틴 지정 모드: 지정 가능한(세그먼트 입력된) 블록에 점선 어포던스 */
body.planned-routine-mode .time-entry.routine-designation-eligible .planned-merged-main-container,
body.planned-routine-mode .time-entry.routine-designation-eligible .split-cell-wrapper.split-type-planned,
body.planned-routine-mode .time-entry.routine-designation-eligible .planned-input {
  outline: 2px dashed rgba(22, 58, 110, 0.55);
  outline-offset: -2px;
  cursor: pointer;
}

/* ===== Time-grid range popover (6th toolbar tool) ===== */

/* The tool cluster anchors the popover. */
.header-row .planned-mode-control-group {
  position: relative;
}

.header-row .time-grid-range-toggle-btn {
  position: relative;
  min-width: 34px;
  min-height: 30px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #4d565e;
  cursor: pointer;
  /* The button label text stays in the DOM for screen readers; the visible
     face is the masked clock icon below. */
  font-size: 0;
  line-height: 0;
  overflow: visible;
  box-shadow: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  /* Material Icons schedule — Google, Apache License 2.0. 전문: /THIRD-PARTY-NOTICES.txt */
  --toolbar-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'/></svg>");
}

.header-row .time-grid-range-toggle-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 17px;
  height: 17px;
  background-color: currentColor;
  -webkit-mask: var(--toolbar-icon) center / contain no-repeat;
  mask: var(--toolbar-icon) center / contain no-repeat;
  pointer-events: none;
}

.header-row .time-grid-range-toggle-btn:hover {
  background: var(--primary-soft);
  border-color: #cdd6e4;
  color: var(--primary-hover);
}

.header-row .time-grid-range-toggle-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.header-row .time-grid-range-toggle-btn[aria-expanded="true"] {
  background: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
  box-shadow: inset 0 1px 2px rgba(8, 28, 52, 0.22);
}

.header-row .time-grid-range-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  padding: 8px;
  background: #ffffff;
  border: 1px solid #e3e7e9;
  border-radius: 12px;
  box-shadow:
    0 10px 24px rgba(33, 41, 48, 0.14),
    0 2px 6px rgba(33, 41, 48, 0.08);
}

/* The popover's own display rule would defeat the hidden attribute. */
.header-row .time-grid-range-popover[hidden] {
  display: none !important;
}

/* Inside the popover the range controls drop their standalone box chrome —
   the popover card is the box. */
.header-row .time-grid-range-popover .time-grid-range-controls {
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  flex-wrap: nowrap;
}

/* ===== Sheet title as a real title box ===== */

/* Give the day title a persistent quiet face so it reads as the sheet's
   title box instead of bare text; hover/focus still step up the emphasis. */
.header-row .day-title-input {
  border-color: #e3e7e9;
  background-color: rgba(255, 255, 255, 0.72);
  box-shadow: 0 1px 2px rgba(33, 41, 48, 0.05);
  font-size: 18px;
}

.header-row .day-title-input:hover {
  border-color: #d3dade;
  background-color: rgba(255, 255, 255, 0.9);
}

.header-row .day-title-input:focus {
  border-color: #cdd6e4;
  background-color: #ffffff;
  box-shadow: 0 1px 2px rgba(33, 41, 48, 0.06);
}

/* ===== PC: tool cluster rides in the title row ===== */

/* On desktop the tool box gives up its own band row and rises into the
   title row, split into its two 3-button halves: edit tools on the left,
   status tools on the right, with the title box centered between them.

   The band spans the full card, but the sheet's content lives in the plan
   column — the body rows carry an 80px time gutter on the left, so the
   visual center of the boxes sits ~40px right of the card center. To make
   the title read as centered over the boxes (not the raw band), the toolbar
   is placed in a plan-column track that mirrors the body's grid: an empty
   time-gutter track on the left, then the tools + title in the plan track.
   Because the gutter width tracks the body's own (80px here, 60px at the
   ≤768px breakpoint below), the alignment holds at every desktop width.
   Mobile (≤640px) fuses the halves back into the single stacked box. */
@media (min-width: 641px) {
  .timesheet .header-row {
    grid-template-columns: 80px minmax(0, 1fr);
  }

  .header-row > div.planned-label {
    grid-row: 1;
    grid-column: 2;
    justify-self: stretch;
    align-self: center;
    z-index: 1;
    padding: 8px 12px;
    justify-content: space-between;
    flex-wrap: nowrap;
  }

  /* Title cell rides the plan track and centers the input over it. The
     140px side insets (≈ one 3-button half + breathing room, equal both
     sides) keep the title box clear of the two tool halves while its text
     lands on the plan column's center — i.e. the boxes' center. */
  .header-row > .sheet-title-cell {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    padding: 8px 140px;
  }
}

/* The body's time gutter narrows to 60px at ≤768px; match it so the plan
   track — and the centered title — stay aligned with the boxes there too. */
@media (min-width: 641px) and (max-width: 768px) {
  .timesheet .header-row {
    grid-template-columns: 60px minmax(0, 1fr);
  }
}

/* --- Footer, consent banner, status strip (production-readiness) --- */
.app-footer {
  margin-top: 24px;
  padding: 16px 8px;
  text-align: center;
  font-size: 12px;
  color: #647084;
}
.app-footer nav {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.app-footer a {
  color: #647084;
  text-decoration: none;
}
.app-footer a:hover,
.app-footer a:focus-visible {
  color: #1f6feb;
  text-decoration: underline;
}

.status-strip {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 6px;
  min-height: 0;
}
.status-strip .status-chip[hidden] {
  display: none;
}

.consent-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 2000;
  max-width: 560px;
  margin: 0 auto;
  padding: 16px 18px;
  border: 1px solid #d9dee6;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 18px 40px rgba(28, 36, 48, 0.18);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.consent-banner[hidden] { display: none; }
.consent-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #1c2430;
}
.consent-text a { color: #1f6feb; }
.consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.consent-btn[hidden] { display: none; }
.consent-btn {
  min-height: 40px;
  padding: 0 16px;
  border-radius: 8px;
  border: 1px solid #d9dee6;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.consent-btn-primary {
  background: #1f6feb;
  color: #ffffff;
  border-color: #1f6feb;
}
.consent-btn-ghost {
  background: #ffffff;
  color: #647084;
}

/* Account deletion (footer) */
.footer-danger-btn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 12px;
  color: #a42323;
  cursor: pointer;
  text-decoration: none;
}
.footer-danger-btn:hover,
.footer-danger-btn:focus-visible {
  text-decoration: underline;
}
.footer-danger-btn[hidden] { display: none; }

/* 부팅 로딩 베일: 저장된 로그인 세션이 감지되면 boot/early-sync.js가 <html>에
   tt-hydrating을 달아, 원격 계획이 도착하기 전의 빈 그리드가 "데이터가
   사라졌다"로 읽히지 않게 한다. 동기화 컨트롤러가 현재 날짜의 원격 상태를
   확인(성공·실패·비로그인 판명)하는 즉시 클래스를 제거한다. */
html.tt-hydrating .time-entries {
  position: relative;
  pointer-events: none;
}
html.tt-hydrating .time-entries > * {
  opacity: 0.45;
}
html.tt-hydrating .time-entries::after {
  content: '저장된 계획을 불러오는 중…';
  position: absolute;
  top: 88px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(28, 36, 48, 0.85);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(8, 28, 52, 0.18);
  animation: tt-hydrating-pulse 1.4s ease-in-out infinite;
  z-index: 5;
}
@keyframes tt-hydrating-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  html.tt-hydrating .time-entries::after {
    animation: none;
  }
}

/* 읽기 전인 날의 편집 잠금(2026-10-25 출시 검토 1-5): 이 세션에서 그날 서버 읽기가 아직 성공하지 않았으면(처음 여는 날로
   이동·느린 망·읽기 실패) script.js syncSheetLoadLock이 <html>에 tt-sheet-locked를 달고 시트 위 알림(#sheetLoadLock)을 보인다.
   부팅 베일처럼 pointer-events를 끄고(키보드·합성 이벤트는 window 캡처 가드가 막는다), 짧은 읽기에 번쩍이지 않게 흐림·알림은
   0.4초 뒤에 나온다 — 막힌 입력이 있거나(.is-nudged) 읽기가 실패했으면 바로. 게스트·Supabase 미설정은 잠그지 않는다. */
html.tt-sheet-locked .time-entries,
html.tt-sheet-locked .header-row .planned-mode-control-group,
html.tt-sheet-locked #clearBtn,
html.tt-sheet-locked .merge-button,
html.tt-sheet-locked .merge-action-button,
html.tt-sheet-locked .split-button,
html.tt-sheet-locked .undo-button,
html.tt-sheet-locked .split-picker {
  pointer-events: none;
}
html.tt-sheet-locked .time-entries > *,
html.tt-sheet-locked .header-row .planned-mode-control-group,
html.tt-sheet-locked #clearBtn {
  animation: tt-sheet-lock-dim 0.2s ease 0.4s both;
}
.sheet-load-lock {
  position: sticky;
  top: 48px;
  z-index: 29;
  height: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.sheet-load-lock[hidden],
html.tt-hydrating .sheet-load-lock {
  display: none;
}
.sheet-load-lock-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(28, 36, 48, 0.85);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(8, 28, 52, 0.18);
  animation: tt-sheet-lock-in 0.2s ease 0.4s both;
}
.sheet-load-lock.is-nudged .sheet-load-lock-pill,
.sheet-load-lock[data-state="failed"] .sheet-load-lock-pill {
  animation: none;
}
.sheet-load-lock-retry {
  padding: 4px 12px;
  border: 0;
  border-radius: 999px;
  background: #ffffff;
  color: #163a6e;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.sheet-load-lock-retry:hover {
  background: #f6edd6;
}
.sheet-load-lock-retry:focus-visible {
  outline: 2px solid #f8cf74;
  outline-offset: 2px;
}
.sheet-load-lock-retry[hidden] {
  display: none;
}
@keyframes tt-sheet-lock-dim {
  from { opacity: 1; }
  to { opacity: 0.45; }
}
@keyframes tt-sheet-lock-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 새 버전 띠(2026-10-25 출시 검토 1-9): boot/app-version.js가 /version.json으로 새 빌드를 알아채면 화면 아래 가운데에 띄운다.
   가리지 않는 안내라 시트를 막지 않는다 — 남색 몸체 + 금 ✦(헤더 '오늘'과 같은 문법), 흰 '새로고침'. 휴대폰은 오른쪽 아래
   '불편사항' 단추 위로 올린다. 바텀시트·대화상자·동의 배너보다는 아래 층이다. */
.app-version-banner {
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 1950;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
  padding: 8px 8px 8px 16px;
  border-radius: 14px;
  background: #163a6e;
  color: #ffffff;
  font-size: 13px;
  line-height: 1.35;
  box-shadow: 0 8px 22px rgba(8, 28, 52, 0.24);
}
.app-version-banner[hidden] {
  display: none;
}
.app-version-banner-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.app-version-banner-title {
  font-weight: 700;
}
.app-version-banner-title::before {
  content: '✦';
  margin-right: 6px;
  color: #f8cf74;
}
.app-version-banner-detail {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.82);
}
.app-version-banner-detail:empty {
  display: none;
}
.app-version-banner-reload {
  flex: none;
  min-height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: #ffffff;
  color: #163a6e;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.app-version-banner-reload:hover {
  background: #f6edd6;
}
.app-version-banner-reload[disabled] {
  cursor: progress;
  opacity: 0.75;
}
.app-version-banner-close {
  flex: none;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #ffffff;
  font-size: 18px;
  line-height: 1;
  opacity: 0.75;
  cursor: pointer;
}
.app-version-banner-close:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.16);
}
.app-version-banner-close[hidden] {
  display: none;
}
.app-version-banner-reload:focus-visible,
.app-version-banner-close:focus-visible {
  outline: 2px solid #f8cf74;
  outline-offset: 2px;
}
@media (max-width: 640px) {
  .app-version-banner {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
}

/* --- Guest landing hero ---------------------------------------------------
   Visibility contract: boot/guest-hero.js adds html.tt-guest pre-paint when
   no Supabase session token exists; updateAuthUI() reconciles once the
   session resolves. Everything guest-only is gated on that class so a
   signed-in user never sees a hide→show flash. */
.guest-hero { display: none; }
html.tt-guest .guest-hero { display: block; }
.guest-demo-chip { display: none; }
html.tt-guest .guest-demo-chip { display: block; }
/* First-visit view hides the expert plan tools (slot move/shift/clear, done,
   routine, range) — they read as noise before the product is understood. */
html.tt-guest .planned-mode-control-group { display: none; }

.guest-hero {
  margin: 4px 0 20px;
  padding: 28px 28px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.guest-hero-title {
  margin: 0 0 10px;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--text);
  text-wrap: balance;
}
.guest-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 22px;
}
.guest-hero-cta-primary,
.guest-hero-cta-secondary {
  min-height: 44px;
  padding: 0 22px;
  border-radius: var(--radius-md);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}
.guest-hero-cta-primary {
  border: 1px solid var(--primary);
  background: var(--primary);
  color: #ffffff;
}
.guest-hero-cta-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.guest-hero-cta-secondary {
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
}
.guest-hero-cta-secondary:hover { background: var(--primary-soft); border-color: var(--primary); }
.guest-hero-cta-primary:focus-visible,
.guest-hero-cta-secondary:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.guest-demo-chip {
  width: fit-content;
  margin: 0 0 10px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 12.5px;
  font-weight: 700;
}

/* --- Guest landing v2 (landing-loop SPEC v1) -------------------------------
   비회원 첫 화면을 앱 운영 화면과 분리한다: 날짜 내비·상태칩·앱용 로그인이
   담긴 header 전체를 게스트에게 숨긴다 (로그인 → tt-guest 제거 → 자동 복구). */
html.tt-guest header { display: none; }


/* 히어로 카드 크롬 제거 — 히어로는 페이지 배경 위 소개 밴드로만 남는다. */
html.tt-guest .guest-hero {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
}

/* --- 게스트 첫 화면 확정 구조 (SPEC v2 §4: hero-min 루프 승자 V3 흡수) --------
   히어로를 소개 밴드로 최소화해 전체 시트가 첫 화면의 주인공이 되게 한다.
   2026-10-23 펭귄 선택 A(시안 docs/renewal-sketch/start-button.html, SPEC v3.1): 1열 가운데, 큰 '무료로 시작하기' 하나.
   같은 날 SPEC v3.2(펭귄 지시): 플래너 아이콘·아이브로·제목 문장·부제를 지우고 가로형 워드마크
   (brand/luhitz-wordmark-line.png — 금 L + 남색 UHITZ PLANNER, 투명 바탕)가 h1이 된다. 워드마크와 버튼이
   한 축(가운데)에 위아래로 서서, 남은 두 요소가 같은 중심선을 나눠 갖는다. 버튼 주변 글씨는 없다. 탐색 원장: docs/landing-loop/hero-min/VARIANTS.md */
html.tt-guest .guest-hero {
  margin: 0 0 8px;
  padding-top: 18px;
  padding-bottom: 18px;
  text-align: center;
}
/* 같은 날 펭귄 지시로 플래너 아이콘(brand/luhitz-hero-icon.png, 바탕 없는 수첩)을 워드마크 왼쪽에 다시 둔다 — 아이콘 + 워드마크를
   한 줄 가로형 로고로 묶어 가운데에 세운다. 아이콘 높이는 워드마크 높이의 약 1.6배(글자보다 한 단 크게, 링이 보이게). */
html.tt-guest .guest-hero-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 0 20px;
  line-height: 0;
}
html.tt-guest .guest-hero-icon { flex: none; width: 56px; height: 56px; }
html.tt-guest .guest-hero-wordmark { display: block; width: 440px; min-width: 0; max-width: 100%; height: auto; }
/* 2026-10-25(펭귄 선택 A, 시안 docs/renewal-sketch/make-it-real.html, SPEC v3.4): 로고와 버튼 사이 가운데 한 줄 'Make it real'.
   로고 쪽 간격(10px)을 버튼 쪽(18px)보다 좁게 두어 로고에 딸린 말로 읽힌다. 테두리·금·기울임·마침표 없음. */
/* 글귀는 로고 전체·'무료로 시작하기'와 같은 가운데 축에 선다(2026-10-25 펭귄 지시, SPEC v3.5 — 워드마크 중심(padding-left 70·48px)이면 버튼보다 오른쪽으로 비켜 보였다). */
html.tt-guest .guest-hero-tagline { display: flex; align-items: center; justify-content: center; gap: 9px; margin: -10px 0 18px; font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: 0.1em; color: #8d97a9; }
html.tt-guest .guest-hero-actions { margin-bottom: 0; justify-content: center; }
html.tt-guest .guest-hero-cta-primary { min-height: 46px; min-width: 240px; padding: 0 36px; font-size: 16px; }
/* 앱이 아직 실리는 중에 누른 '무료로 시작하기' — 기억해 두었다가 준비되면 로그인으로 넘어간다(boot/guest-hero.js). 글자 없이 잠깐 옅게. */
html.tt-guest .guest-hero-cta-primary[aria-busy="true"] { opacity: 0.72; cursor: progress; }
@media (max-width: 640px) {
  html.tt-guest .guest-hero { padding-top: 16px; padding-bottom: 14px; }
  html.tt-guest .guest-hero-title { gap: 10px; margin-bottom: 14px; }
  html.tt-guest .guest-hero-icon { width: 38px; height: 38px; }
  html.tt-guest .guest-hero-wordmark { width: 250px; }
  html.tt-guest .guest-hero-tagline { margin: -6px 0 14px; font-size: 10.5px; gap: 7px; }
}

/* --- 게스트 제스처 그래픽 가이드 (SPEC v2.6 §3: 통합 사이클 무한 반복) --------
   문구 없는 모션 안내. 마스터 사이클 5.33s·지연 1.2s·무한 반복 — 사용자가 시트를
   직접 조작(pointerdown 해제)할 때까지. 휴식 세그먼트의 1사이클 = 리사이징 왕복
   1회(전반 위상 ~0-33%, H13 문법) → S16 스왑 왕복 1회(후반 위상 ~50-86%: 그립 →
   리프트 이동·파트너 양보 → 교환 정착 → 닷 재등장 → 역방향 복귀). 팀 회의는
   같은 사이클의 전반 모션 창(~6-29%)에서 13→14시 왕복을 반복한다. 밴드는 스왑
   그립에 동조한 단일 감광 아크. 핸들은 본래 디자인 유지 — 상태 변화는 실제
   리사이즈 상태 선언(혼합비 34→42%)만 재생(SPEC v2.2). 탐색 원장:
   docs/landing-loop/gesture-hint/HINTS.md, docs/landing-loop/gesture-swap/SWAPS.md */
html.tt-guest .split-grid-segment[data-segment-kind="real-plan"] {
  transition: background-color 400ms ease;
}
html.tt-guest .tt-gesture-glyph { display: none; }
html.tt-guest.tt-gesture-hints .tt-gesture-glyph {
  display: block;
  position: absolute;
  pointer-events: none;
  opacity: 0;
  z-index: 6;
}
html.tt-guest.tt-gesture-hints .tt-hint-drag {
  z-index: 30;
  animation: tt-hint-drag-move 5.33s ease-in-out 1.2s infinite;
}
html.tt-guest.tt-gesture-hints .tt-gesture-glyph-drag {
  left: 20%;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  border-radius: 50%;
  background: rgba(22, 58, 110, 0.85);
  box-shadow: 0 0 0 0 rgba(22, 58, 110, 0.35);
  animation: tt-hint-touch 5.33s ease-in-out 1.2s infinite;
}
/* 휴식: 스왑 뼈대(파트너)가 없을 때의 방어 기본값 — 뼈대가 잡히면 아래
   .tt-hint-swap 결합 바인딩이 이 선언을 대체한다. */
html.tt-guest.tt-gesture-hints .tt-hint-resize {
  animation: tt-hint-resize-width 5.33s ease-in-out 1.2s infinite;
}
html.tt-guest.tt-gesture-hints .tt-hint-resize .plan-segment-boundary-resize-handle-line {
  animation: tt-hint-handle 5.33s ease-in-out 1.2s infinite;
}
/* 실제 리사이즈 프리뷰 가이드(.plan-segment-resize-preview-guide)와 동일한
   시각 언어: 흰 양방향 화살표 + 글로우. 세그먼트 폭이 줄면 우측 모서리를
   따라 함께 이동한다 (글리프는 세그먼트 내부 우측 고정). */
html.tt-guest.tt-gesture-hints .tt-gesture-glyph-resize {
  top: 50%;
  right: 14px;
  width: 26px;
  height: 13px;
  margin: -7px 0 0;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2012%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%220.8%22%20stroke-linejoin%3D%22round%22%20d%3D%22M6%200%200%206l6%206V8h12v4l6-6-6-6v4H6z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  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));
  animation: tt-hint-resize-guide 5.33s ease-in-out 1.2s infinite;
}
/* 시연 대상 선택 착색(팀 회의·휴식) — 가이드 동안만, 해제 시 400ms 복귀.
   data-index는 시각이 아니라 표시 범위 내 위치다(본 상품 규칙). 데모 그리드가
   08시 시작이므로(SPEC v2.9 §4) 팀 회의 13시=5, 휴식 10시 병합=2. */
html.tt-guest.tt-gesture-hints .split-grid-segment[data-segment-kind="real-plan"][data-index="5"][data-segment-index="0"] { background: #e5eaf2; }
html.tt-guest.tt-gesture-hints .split-grid-segment[data-segment-kind="real-plan"][data-index="2"][data-segment-index="1"] { background: #fef3c7; }
/* 휴식 통합 바인딩: 리사이즈 위상 → 스왑 위상 (SPEC v2.4 §3 바인딩 계약) */
html.tt-guest.tt-gesture-hints .tt-hint-swap {
  z-index: 30;
  animation: tt-hint-resize-width 5.33s ease-in-out 1.2s infinite, tt-hint-swap-move 5.33s ease-in-out 1.2s infinite;
}
html.tt-guest.tt-gesture-hints .tt-hint-swap-partner {
  animation: tt-hint-swap-yield 5.33s ease-in-out 1.2s infinite;
}
html.tt-guest.tt-gesture-hints .tt-hint-swap-band {
  animation: tt-hint-swap-band-arc 5.33s ease-in-out 1.2s infinite;
}
html.tt-guest.tt-gesture-hints .tt-gesture-glyph-swap {
  left: 45%;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  border-radius: 50%;
  background: rgba(22, 58, 110, 0.85);
  box-shadow: 0 0 0 0 rgba(22, 58, 110, 0.35);
  animation: tt-hint-swap-touch 5.33s ease-in-out 1.2s infinite;
}
@keyframes tt-hint-drag-move {
  0%, 6% { transform: none; box-shadow: inset 0 0 0 1px rgba(44, 62, 80, 0.08); }
  10% { transform: translateY(-3px) scale(1.012); box-shadow: 0 10px 22px rgba(8, 28, 52, 0.20); }
  17% { transform: translateY(48px) scale(1.012); box-shadow: 0 10px 22px rgba(8, 28, 52, 0.20); }
  23% { transform: translateY(48px) scale(1.012); box-shadow: 0 10px 22px rgba(8, 28, 52, 0.20); }
  29% { transform: none; box-shadow: inset 0 0 0 1px rgba(44, 62, 80, 0.08); }
  100% { transform: none; box-shadow: inset 0 0 0 1px rgba(44, 62, 80, 0.08); }
}
@keyframes tt-hint-touch {
  0%, 4% { opacity: 0; transform: scale(0.5); box-shadow: 0 0 0 0 rgba(22, 58, 110, 0.35); }
  8% { opacity: 0.95; transform: scale(1); box-shadow: 0 0 0 9px rgba(22, 58, 110, 0); }
  24% { opacity: 0.95; }
  30%, 100% { opacity: 0; transform: scale(0.9); }
}
@keyframes tt-hint-handle {
  0%, 5% {
    background: color-mix(in srgb, var(--plan-segment-handle-color) 34%, #ffffff 66%);
    box-shadow: 0 1px 2px rgba(8, 28, 52, 0.18);
  }
  8%, 30% {
    background: color-mix(in srgb, var(--plan-segment-handle-color) 42%, #ffffff 58%);
    box-shadow: 0 2px 5px rgba(8, 28, 52, 0.24);
  }
  34%, 100% {
    background: color-mix(in srgb, var(--plan-segment-handle-color) 34%, #ffffff 66%);
    box-shadow: 0 1px 2px rgba(8, 28, 52, 0.18);
  }
}
@keyframes tt-hint-resize-width {
  0%, 6% { width: 100%; outline: 1px solid transparent; outline-offset: -1px; }
  13% {
    width: 66%;
    outline: 1px solid color-mix(in srgb, var(--split-segment-color, #0b2650) 72%, #0b2650 28%);
    outline-offset: -1px;
  }
  25% {
    width: 66%;
    outline: 1px solid color-mix(in srgb, var(--split-segment-color, #0b2650) 72%, #0b2650 28%);
    outline-offset: -1px;
  }
  33%, 100% { width: 100%; outline: 1px solid transparent; outline-offset: -1px; }
}
@keyframes tt-hint-resize-guide {
  0%, 4% { opacity: 0; }
  7% { opacity: 1; }
  29% { opacity: 1; }
  35%, 100% { opacity: 0; }
}
@keyframes tt-hint-swap-move {
  0%, 50% { transform: none; box-shadow: inset 0 0 0 1px rgba(44, 62, 80, 0.08); }
  53% { transform: translateY(-3px) scale(1.012); box-shadow: 0 10px 22px rgba(8, 28, 52, 0.20); }
  62% { transform: translateX(-100%) translateY(-3px) scale(1.012); box-shadow: 0 10px 22px rgba(8, 28, 52, 0.20); }
  65% { transform: translateX(-100%); box-shadow: inset 0 0 0 1px rgba(44, 62, 80, 0.08); }
  71% { transform: translateX(-100%); box-shadow: inset 0 0 0 1px rgba(44, 62, 80, 0.08); }
  74% { transform: translateX(-100%) translateY(-3px) scale(1.012); box-shadow: 0 10px 22px rgba(8, 28, 52, 0.20); }
  83% { transform: translateY(-3px) scale(1.012); box-shadow: 0 10px 22px rgba(8, 28, 52, 0.20); }
  86% { transform: none; box-shadow: inset 0 0 0 1px rgba(44, 62, 80, 0.08); }
  100% { transform: none; box-shadow: inset 0 0 0 1px rgba(44, 62, 80, 0.08); }
}
@keyframes tt-hint-swap-yield {
  0%, 55% { transform: none; }
  63% { transform: translateX(100%); }
  75% { transform: translateX(100%); }
  84%, 100% { transform: none; }
}
@keyframes tt-hint-swap-touch {
  0%, 50% { opacity: 0; transform: scale(0.5); box-shadow: 0 0 0 0 rgba(22, 58, 110, 0.35); }
  53% { opacity: 0.95; transform: scale(1); box-shadow: 0 0 0 9px rgba(22, 58, 110, 0); }
  63% { opacity: 0.95; transform: scale(1); box-shadow: 0 0 0 0 rgba(22, 58, 110, 0); }
  66% { opacity: 0; transform: scale(0.9); box-shadow: 0 0 0 0 rgba(22, 58, 110, 0.35); }
  71% { opacity: 0; transform: scale(0.5); box-shadow: 0 0 0 0 rgba(22, 58, 110, 0.35); }
  74% { opacity: 0.95; transform: scale(1); box-shadow: 0 0 0 9px rgba(22, 58, 110, 0); }
  83% { opacity: 0.95; transform: scale(1); box-shadow: 0 0 0 0 rgba(22, 58, 110, 0); }
  86%, 100% { opacity: 0; transform: scale(0.9); }
}
@keyframes tt-hint-swap-band-arc {
  0%, 52% { opacity: 1; }
  55% { opacity: 0.6; }
  84% { opacity: 0.6; }
  88%, 100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  html.tt-guest.tt-gesture-hints .tt-hint-drag,
  html.tt-guest.tt-gesture-hints .tt-hint-resize,
  html.tt-guest.tt-gesture-hints .tt-hint-swap,
  html.tt-guest.tt-gesture-hints .tt-hint-swap-partner,
  html.tt-guest.tt-gesture-hints .tt-hint-swap-band,
  html.tt-guest.tt-gesture-hints .tt-gesture-glyph-drag,
  html.tt-guest.tt-gesture-hints .tt-gesture-glyph-resize,
  html.tt-guest.tt-gesture-hints .tt-gesture-glyph-swap,
  html.tt-guest.tt-gesture-hints .tt-hint-resize .plan-segment-boundary-resize-handle-line {
    animation: none;
  }
  html.tt-guest.tt-gesture-hints .tt-gesture-glyph { opacity: 0; }
}

/* ---- 불편사항 접수 위젯 -------------------------------------------------
   진입점(플로팅·푸터)은 마크업에서 hidden이고, 로그인 여부에 따라 script.js의
   updateAuthUI가 토글한다. 게스트에게는 header 자체가 숨겨지므로(html.tt-guest)
   추가 게스트 규칙이 필요 없다. */
.footer-link-btn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 12px;
  color: #647084;
  cursor: pointer;
  text-decoration: none;
}
.footer-link-btn:hover,
.footer-link-btn:focus-visible {
  color: #1f6feb;
  text-decoration: underline;
}
.footer-link-btn[hidden] { display: none; }

.feedback-fab {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1900;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background-color: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(8, 28, 52, 0.16);
}
.feedback-fab:hover {
  background-color: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary-hover);
}
.feedback-fab:focus-visible { box-shadow: var(--focus-ring); }
.feedback-fab[hidden] { display: none; }
.feedback-fab-icon { font-size: 15px; }

/* 동의 배너(z-index 2000, 화면 하단 고정)와 겹치는 동안에는 비켜 준다.
   클래스 토글은 boot/consent.js가 배너를 열고 닫을 때 소유한다. */
html.tt-consent-open .feedback-fab { display: none; }

.feedback-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2400;
  background: rgba(8, 28, 52, 0.35);
}
.feedback-backdrop[hidden] { display: none; }

.feedback-dialog {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 2500;
  max-width: 460px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background-color: var(--surface);
  box-shadow: 0 18px 40px rgba(8, 28, 52, 0.24);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
}
.feedback-dialog[hidden] { display: none; }
.feedback-dialog-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
}
.feedback-dialog-desc {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.feedback-field {
  display: block;
  margin-bottom: 12px;
}
.feedback-field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.feedback-select,
.feedback-input,
.feedback-textarea {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background-color: #fff;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
}
.feedback-textarea {
  resize: vertical;
  min-height: 96px;
  line-height: 1.5;
}
.feedback-select:focus-visible,
.feedback-input:focus-visible,
.feedback-textarea:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
}
.feedback-error {
  font-size: 13px;
  color: var(--danger);
  margin-bottom: 10px;
}
.feedback-error[hidden] { display: none; }
.feedback-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.feedback-mail-fallback {
  margin-right: auto;
  font-size: 13px;
  color: var(--primary);
}
.feedback-mail-fallback[hidden] { display: none; }
.feedback-btn {
  min-height: 40px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.feedback-btn-ghost {
  border: 1px solid var(--border-strong);
  background-color: #fff;
  color: var(--text);
}
.feedback-btn-primary {
  border: 1px solid var(--primary);
  background-color: var(--primary);
  color: #fff;
}
.feedback-btn-primary:hover { background-color: var(--primary-hover); }
.feedback-btn:disabled { opacity: 0.6; cursor: default; }


/* ============================================================
   LUHITZ PLANNER 버튼 — 로고 반영 60% (2026-10-09, 사용자 지시: 범위는 버튼만)
   남색 몸체 + 금박 그라데이션 테두리 + 안쪽 가는 금선. 글자는 흰색/남색 그대로 읽힌다.
   시트 위 버튼 줄(오늘·이전·다음·로그인·헤더 링크)은 같은 날 금 테두리를 뺐다 — 금박은 게스트 CTA·로그인 페이지에만.
   --primary 등 전역 토큰은 바꾸지 않는다(칩·시트의 파랑은 이번 범위 밖). 시트 안쪽 작은 버튼
   (타이머·완료 ✓·비우기)과 활동 카드 칩도 범위 밖. 이 블록은 뒤에 붙인 덮어쓰기라 위의 잠긴 규칙은 그대로다.
   ============================================================ */
:root {
  --lz-navy: #163a6e;
  --lz-navy-hover: #0c2650;
  --lz-navy-press: #082043;
  --lz-navy-top: #1c4278;
  --lz-navy-bottom: #0f2c57;
  --lz-ivory: #fffdf8;
  --lz-gold-foil: linear-gradient(135deg, #f0dca6, #b88f3e 45%, #e8cf8e);
  --lz-gold-soft: rgba(217, 189, 130, 0.7);
  --lz-focus: 0 0 0 2px #ffffff, 0 0 0 4px #163a6e;
}

/* 주 버튼 / 로그인 주 버튼 — 남색 + 금박 테두리 */
.guest-hero-cta-primary {
  border: 1.5px solid transparent;
  background:
    linear-gradient(180deg, var(--lz-navy-top), var(--lz-navy-bottom)) padding-box,
    var(--lz-gold-foil) border-box;
  color: #ffffff;
  box-shadow: inset 0 0 0 2px var(--lz-navy-bottom), inset 0 0 0 3px var(--lz-gold-soft);
}

.guest-hero-cta-primary {
  border-radius: 12px;
  letter-spacing: 0.03em;
}

.guest-hero-cta-primary:hover {
  background:
    linear-gradient(180deg, #24427f, #162d59) padding-box,
    var(--lz-gold-foil) border-box;
  border-color: transparent;
}

.guest-hero-cta-primary:active {
  background:
    linear-gradient(180deg, var(--lz-navy-hover), var(--lz-navy-press)) padding-box,
    var(--lz-gold-foil) border-box;
  transform: translateY(1px);
}

.guest-hero-cta-primary:focus-visible,
.guest-hero-cta-secondary:focus-visible {
  outline: none;
  box-shadow: var(--lz-focus), inset 0 0 0 2px var(--lz-navy-bottom), inset 0 0 0 3px var(--lz-gold-soft);
}

.guest-hero-cta-primary:disabled {
  opacity: 1;
  background: linear-gradient(180deg, #9aa8c4, #8c9bb9) padding-box, var(--lz-gold-foil) border-box;
  box-shadow: none;
}

/* '오늘'은 지금을 가리키는 버튼 — 남색 몸체 + 로고의 별.
   시트 위 버튼 줄의 금 테두리가 과해 2026-10-09 사용자 지시로 금박 테두리·안쪽 금선을 뺐다(금은 별에만 남는다). */
.today-btn {
  border: 1px solid var(--lz-navy-bottom);
  background: linear-gradient(180deg, var(--lz-navy-top), var(--lz-navy-bottom));
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  font-weight: 700;
}

.today-btn:hover {
  border-color: #162d59;
  background: linear-gradient(180deg, #24427f, #162d59);
}

.today-btn:active {
  border-color: var(--lz-navy-press);
  background: linear-gradient(180deg, var(--lz-navy-hover), var(--lz-navy-press));
  transform: translateY(1px);
}

.today-btn:focus-visible {
  outline: none;
  box-shadow: var(--lz-focus);
}

.today-btn::before {
  /* 로고 별에서 온 4각 별. 처음(2026-10-09)엔 로고 실측 모양 |x|^0.58 + |y|^0.58 = 1을 0.43em으로 옮겼는데
     끝이 가늘어 버튼 크기에선 점처럼 보여 겉돌았다 — 2026-10-10 사용자 선택 S2로 가운데가 조금 통통한
     |x|^0.7 + |y|^0.7 = 1, 약 1.4배(0.6em)로 바꿨다. 가로:세로 = 60:62, 색은 가운데가 밝은 금속 금. */
  content: "";
  display: inline-block;
  width: 0.6em;
  height: 0.62em;
  margin-right: 0.42em;
  vertical-align: -0.03em;
  background: radial-gradient(circle at 50% 50%, #fbe9b8 0%, #ecc577 45%, #c2913d 100%);
  -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M96.5,50.0 L96.2,50.0 L95.4,49.9 L94.0,49.5 L92.1,49.0 L89.8,48.1 L87.1,46.9 L84.1,45.3 L80.8,43.4 L77.4,41.0 L74.0,38.4 L70.6,35.4 L67.3,32.2 L64.1,28.8 L61.3,25.2 L58.7,21.7 L56.4,18.2 L54.5,14.8 L53.0,11.7 L51.8,8.9 L51.0,6.5 L50.4,4.6 L50.1,3.2 L50.0,2.3 L50.0,2.0 L50.0,2.3 L49.9,3.2 L49.6,4.6 L49.0,6.5 L48.2,8.9 L47.0,11.7 L45.5,14.8 L43.6,18.2 L41.3,21.7 L38.7,25.2 L35.9,28.8 L32.7,32.2 L29.4,35.4 L26.0,38.4 L22.6,41.0 L19.2,43.4 L15.9,45.3 L12.9,46.9 L10.2,48.1 L7.9,49.0 L6.0,49.5 L4.6,49.9 L3.8,50.0 L3.5,50.0 L3.8,50.0 L4.6,50.1 L6.0,50.5 L7.9,51.0 L10.2,51.9 L12.9,53.1 L15.9,54.7 L19.2,56.6 L22.6,59.0 L26.0,61.6 L29.4,64.6 L32.7,67.8 L35.9,71.2 L38.7,74.8 L41.3,78.3 L43.6,81.8 L45.5,85.2 L47.0,88.3 L48.2,91.1 L49.0,93.5 L49.6,95.4 L49.9,96.8 L50.0,97.7 L50.0,98.0 L50.0,97.7 L50.1,96.8 L50.4,95.4 L51.0,93.5 L51.8,91.1 L53.0,88.3 L54.5,85.2 L56.4,81.8 L58.7,78.3 L61.3,74.8 L64.1,71.2 L67.3,67.8 L70.6,64.6 L74.0,61.6 L77.4,59.0 L80.8,56.6 L84.1,54.7 L87.1,53.1 L89.8,51.9 L92.1,51.0 L94.0,50.5 L95.4,50.1 L96.2,50.0Z'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M96.5,50.0 L96.2,50.0 L95.4,49.9 L94.0,49.5 L92.1,49.0 L89.8,48.1 L87.1,46.9 L84.1,45.3 L80.8,43.4 L77.4,41.0 L74.0,38.4 L70.6,35.4 L67.3,32.2 L64.1,28.8 L61.3,25.2 L58.7,21.7 L56.4,18.2 L54.5,14.8 L53.0,11.7 L51.8,8.9 L51.0,6.5 L50.4,4.6 L50.1,3.2 L50.0,2.3 L50.0,2.0 L50.0,2.3 L49.9,3.2 L49.6,4.6 L49.0,6.5 L48.2,8.9 L47.0,11.7 L45.5,14.8 L43.6,18.2 L41.3,21.7 L38.7,25.2 L35.9,28.8 L32.7,32.2 L29.4,35.4 L26.0,38.4 L22.6,41.0 L19.2,43.4 L15.9,45.3 L12.9,46.9 L10.2,48.1 L7.9,49.0 L6.0,49.5 L4.6,49.9 L3.8,50.0 L3.5,50.0 L3.8,50.0 L4.6,50.1 L6.0,50.5 L7.9,51.0 L10.2,51.9 L12.9,53.1 L15.9,54.7 L19.2,56.6 L22.6,59.0 L26.0,61.6 L29.4,64.6 L32.7,67.8 L35.9,71.2 L38.7,74.8 L41.3,78.3 L43.6,81.8 L45.5,85.2 L47.0,88.3 L48.2,91.1 L49.0,93.5 L49.6,95.4 L49.9,96.8 L50.0,97.7 L50.0,98.0 L50.0,97.7 L50.1,96.8 L50.4,95.4 L51.0,93.5 L51.8,91.1 L53.0,88.3 L54.5,85.2 L56.4,81.8 L58.7,78.3 L61.3,74.8 L64.1,71.2 L67.3,67.8 L70.6,64.6 L74.0,61.6 L77.4,59.0 L80.8,56.6 L84.1,54.7 L87.1,53.1 L89.8,51.9 L92.1,51.0 L94.0,50.5 L95.4,50.1 L96.2,50.0Z'/></svg>") center / contain no-repeat;
}

/* 흰 '오늘'(오늘 시트 보는 중) 위에서는 연한 금이 바탕에 묻혀 한 톤 진한 금으로. */
.today-btn.is-today-view::before {
  background: radial-gradient(circle at 50% 50%, #e3b95e 0%, #c99a45 50%, #9c6f27 100%);
}

/* '오늘' 상태형(2026-10-10 사용자 선택 C): 오늘 시트를 보는 중에는 누를 일이 없으니 옆 버튼들과 같은
   흰 바탕에 남색 테두리·글자로 조용히, 다른 날로 넘어가면 위의 남색 버튼으로 돌아온다. */
.today-btn.is-today-view {
  border-color: #163a6e;
  background: #ffffff;
  color: #163a6e;
  box-shadow: none;
}

.today-btn.is-today-view:hover {
  border-color: #0f2c57;
  background: #f2f4f8;
}

.today-btn.is-today-view:active {
  background: #e5eaf2;
}

/* 게스트 보조 버튼 — 아이보리 + 금박 테두리, 글자는 짙은 남색 */
.guest-hero-cta-secondary {
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--lz-ivory), var(--lz-ivory)) padding-box,
    var(--lz-gold-foil) border-box;
  color: #14254a;
}

.guest-hero-cta-secondary:hover {
  background:
    linear-gradient(#f6f0e2, #f6f0e2) padding-box,
    var(--lz-gold-foil) border-box;
  border-color: transparent;
  color: #14254a;
}

.guest-hero-cta-secondary:active {
  background:
    linear-gradient(#efe6d0, #efe6d0) padding-box,
    var(--lz-gold-foil) border-box;
  transform: translateY(1px);
}

/* 시트 위 버튼 줄(이전·다음·로그인) — 옆 날짜 칸과 같은 회색 1px 테두리 + 흰 바탕. 로그인·로그아웃·메모는 2026-10-23부터
   ☰ 메뉴 안의 항목이라 모양은 responsive.css 끝 '시트 상단 B1'이 덮는다(원장 링크는 같은 날 머리에서 뺐다).
   금박 테두리가 네 개씩 붙어 과해 2026-10-09 사용자 지시로 뺐고, 금은 hover에서만 옅게 비친다. */
.nav-btn,
.auth-btn {
  border: 1px solid #d6dbe1;
  background: #ffffff;
  color: #14254a;
  box-shadow: none;
}

.nav-btn:hover,
.auth-btn:hover {
  border-color: rgba(184, 143, 62, 0.55);
  background: var(--lz-ivory);
  color: #14254a;
}

.nav-btn:active,
.auth-btn:active {
  background: #f6f0e2;
  transform: translateY(1px);
}

.nav-btn:focus-visible,
.auth-btn:focus-visible {
  outline: none;
  box-shadow: var(--lz-focus);
}

.nav-btn:disabled,
.auth-btn:disabled {
  opacity: 1;
  color: #94a3b8;
  border-color: #e5e9ed;
  background: #f9fafb;
}

/* 시트 LUHITZ 안C(2026-10-09, 사용자 지시 — 반영도 20% 안팎, 남색 + 금 두 색 조합):
   제목 띠 아래 남색 1px 선·금 2px 선은 2026-10-09 사용자 지시로 둘 다 제거 — 위의 옅은 회색 1px 선만 남는다.
   지금 시각 행(.is-now-hour — now-view-controller syncNowHourMarker, 로그인 + 오늘)은
   행 왼쪽 끝에 남색 세로줄 + 가는 금선, 시간 숫자는 남색, 앞에 작은 금 ✦.
   숫자 글꼴·행 높이는 건드리지 않는다(세리프 숫자는 모바일에서 깨졌다). */
.time-entry.is-now-hour::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: linear-gradient(90deg, var(--lz-navy) 0 3px, #d9bf85 3px 4px);
  pointer-events: none;
  z-index: 2;
}

.time-entry.is-now-hour .time-slot-label {
  color: var(--lz-navy);
}

.time-entry.is-now-hour .time-slot-label::before {
  content: '\2726';
  margin-right: 3px;
  color: #c49a4c;
  font-size: 0.62em;
  vertical-align: 0.18em;
}

@media screen and (prefers-reduced-motion: reduce) {
  .guest-hero-cta-primary:active,
  .today-btn:active,
  .guest-hero-cta-secondary:active,
  .nav-btn:active,
  .auth-btn:active {
    transform: none;
  }
}