/* ---------- 헤더 ---------- */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.resets { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-1); }
.chip {
  font-size: .75rem;
  color: var(--text-dim);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 10px;
  white-space: nowrap;
}
.chip b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

/* 하단 탭에 가리지 않도록 여백 */
.app-main { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }

/* ---------- 섹션 제목 ---------- */
.sec-title {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: var(--space-4) 0 var(--space-2);
  font-size: .9375rem;
}
.sec-title::before {          /* 자홍빛 도트 장식 */
  content: "";
  align-self: center;
  width: 6px; height: 6px;
  background: var(--glow);
  box-shadow: 0 0 8px var(--glow);
}
.sec-count {
  margin-left: auto;
  font-family: var(--font-body);
  font-size: .75rem;
  color: var(--text-dim);
}
.note { margin-top: var(--space-2); font-size: .8125rem; color: var(--text-dim); }
.empty { padding: var(--space-3); text-align: center; font-size: .875rem; color: var(--text-dim); }

/* ---------- 다음 일정 (hero) ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: var(--space-4) var(--space-3);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: linear-gradient(135deg, var(--surface-2), var(--surface));
}
.hero::before {               /* 오른쪽 아래 도깨비불 */
  content: "";
  position: absolute;
  right: -60px; bottom: -110px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, color-mix(in srgb, var(--wisp) 35%, transparent), transparent 70%);
  pointer-events: none;
}
.hero-label { font-family: var(--font-pixel); font-size: .75rem; color: var(--wisp); }
.hero-name  { margin-top: var(--space-1); font-family: var(--font-pixel); font-size: 1.375rem; }
.hero-name .name { font-size: 1rem; color: var(--accent); }
.hero-time  { margin-top: var(--space-2); font-size: .875rem; color: var(--text-dim); }
.hero-time b { font-size: 1rem; color: var(--text); font-variant-numeric: tabular-nums; }

.hero--soon .hero-label { color: var(--accent); }
.hero--live {
  border-color: var(--wisp);
  box-shadow: 0 0 0 1px var(--wisp), 0 0 24px color-mix(in srgb, var(--wisp) 35%, transparent);
}
.hero--empty { text-align: center; color: var(--text-dim); }

/* ---------- 오늘 일정 목록 ---------- */
.timeline { list-style: none; padding: 0; display: grid; gap: 6px; }
.row {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  align-items: center;
  gap: var(--space-2);
  padding: 10px var(--space-3);
  border-left: 3px solid var(--tone, var(--line));
  border-radius: var(--radius);
  background: var(--surface);
}
.row--boss  { --tone: var(--c-boss); }
.row--guild { --tone: var(--c-guild); }
.row--reset { --tone: var(--c-reset); }
.row--alert { --tone: var(--accent); }

.row-time { font-size: .8125rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.row-name { min-width: 0; font-size: .9375rem; }
.row-sub  { font-size: .8125rem; color: var(--accent); }

.row.is-ended { opacity: .45; }
.row.is-live {
  background: color-mix(in srgb, var(--wisp) 12%, var(--surface));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--wisp) 60%, transparent),
              0 0 14px color-mix(in srgb, var(--wisp) 25%, transparent);
}

.badge {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-dim);
  font-size: .6875rem;
  white-space: nowrap;
}
.badge--soon { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); }
.badge--live { background: var(--wisp); color: #0b1f1d; }

/* ---------- 숙제 카드 ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(156px, 1fr));
  gap: var(--space-2);
}

/* .card(접힌 모서리)를 버튼에 재사용 */
.card.task {
  all: unset;
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 84px;
  padding: 12px var(--space-3) 14px;
  border-radius: var(--radius);
  background: var(--tone);
  color: #fff;
  cursor: pointer;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--fold)),
                     calc(100% - var(--fold)) 100%, 0 100%);
  transition: transform .08s, opacity .15s;
  /* 길게 누를 때 텍스트 선택·메뉴가 뜨지 않게 */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  touch-action: manipulation;
}
.task--plain { --tone: var(--surface-2); color: var(--text); }
.task--boss  { --tone: var(--c-boss); }
.task--guild { --tone: var(--c-guild); }
.task--event { --tone: var(--c-event); }

.task:active { transform: scale(.97); }
/* clip-path가 outline을 잘라내므로 안쪽 그림자로 포커스 표시 */
.task:focus-visible { box-shadow: inset 0 0 0 2px var(--wisp); }

.task-head { display: flex; align-items: center; gap: var(--space-2); }
.task-name { flex: 1; min-width: 0; font-family: var(--font-pixel); font-size: .9375rem; }
.task-mark { font-size: .75rem; opacity: .9; font-variant-numeric: tabular-nums; }
.task-hint { font-size: .75rem; opacity: .75; }

.tick {
  flex: none;
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-radius: 50%;
  opacity: .6;
}

.pips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; }
.pips i {                     /* 도트 모양 진행 표시 */
  width: 10px; height: 10px;
  background: rgb(0 0 0 / .3);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .25);
}
.pips i.on { background: var(--wisp); box-shadow: 0 0 6px var(--wisp); }

.task.is-done { opacity: .55; }
.task.is-done .tick { background: var(--wisp); border-color: var(--wisp); opacity: 1; }

/* ---------- 항목 켜기·끄기 ---------- */
.toggles { list-style: none; padding: 0; display: grid; gap: 6px; }
.toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 12px var(--space-3);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
}
.toggle-name { display: block; }
.toggle-desc { display: block; font-size: .75rem; color: var(--text-dim); }

.toggle input[type="checkbox"] {
  appearance: none;
  flex: none;
  position: relative;
  width: 44px; height: 26px;
  border-radius: 999px;
  background: var(--line);
  cursor: pointer;
  transition: background .15s;
}
.toggle input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--text);
  transition: transform .15s;
}
.toggle input[type="checkbox"]:checked { background: var(--wisp); }
.toggle input[type="checkbox"]:checked::after { transform: translateX(18px); background: #0b1f1d; }
.toggle input[type="checkbox"]:focus-visible { outline: 2px solid var(--wisp); outline-offset: 2px; }

/* 문파 시작 시각: 고정된 시(時) 표시 */
.start-hour { color: var(--text-dim); font-variant-numeric: tabular-nums; }

/* ---------- 하단 탭 ---------- */
.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  gap: var(--space-1);
  padding: 6px var(--space-2) calc(6px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: blur(8px);
}
.tabbar button {
  all: unset;
  flex: 1;
  max-width: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 0;
  border-radius: var(--radius);
  font-size: .75rem;
  color: var(--text-dim);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tabbar .ico { font-family: var(--font-pixel); font-size: 1.125rem; line-height: 1; }
.tabbar button[aria-current] {
  color: var(--wisp);
  background: color-mix(in srgb, var(--wisp) 10%, transparent);
}
.tabbar button:focus-visible { outline: 2px solid var(--wisp); }

/* ---------- Part 5: 테스트 표시 ---------- */
.chip--test { color: var(--accent); border-color: var(--accent); }

/* ---------- Part 5: 문파 시작 시각 입력 ---------- */
.start-input { flex: none; display: flex; align-items: center; gap: var(--space-2); }
.start-input input {
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-variant-numeric: tabular-nums;
  color-scheme: dark;        /* 시계 아이콘·선택 창을 어두운 색으로 */
}
:root[data-theme="light"] .start-input input { color-scheme: light; }
.start-input input:focus-visible { outline: 2px solid var(--wisp); outline-offset: 1px; }

.btn-text {
  all: unset;
  padding: 4px 6px;
  border-radius: var(--radius);
  font-size: .75rem;
  color: var(--text-dim);
  cursor: pointer;
}
.btn-text:hover,
.btn-text:focus-visible { color: var(--text); outline: 1px solid var(--line); }

/* ---------- Part 6: 설정 화면 ---------- */
.panel {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius);
  background: var(--surface);
}
.sub-title {
  margin: var(--space-3) 0 var(--space-2);
  font-size: .8125rem;
  color: var(--text-dim);
}
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.btn {
  all: unset;
  padding: 8px 14px;
  border-radius: var(--radius);
  background: var(--wisp);
  color: #0b1f1d;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 0 12px color-mix(in srgb, var(--wisp) 35%, transparent);
}
.btn--ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line);
  box-shadow: none;
}
.btn--sm { padding: 4px 10px; font-size: .75rem; font-weight: 400; }
.btn:focus-visible { outline: 2px solid var(--wisp); outline-offset: 2px; }

.select {
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  color-scheme: dark;
}
:root[data-theme="light"] .select { color-scheme: light; }
.select:focus-visible { outline: 2px solid var(--wisp); outline-offset: 1px; }

/* 테마 선택 (라디오 버튼을 탭 모양으로) */
.segmented {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 10px;
  background: var(--surface);
}
.segmented label {
  flex: 1;
  padding: 8px 0;
  border-radius: var(--radius);
  text-align: center;
  font-size: .875rem;
  color: var(--text-dim);
  cursor: pointer;
}
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label:has(input:checked) {
  background: var(--surface-2);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--wisp);
}
.segmented label:has(input:focus-visible) { outline: 2px solid var(--wisp); }

/* ---------- Part 6: 토스트 ---------- */
.toasts {
  position: fixed;
  left: 50%;
  bottom: calc(80px + env(safe-area-inset-bottom));
  z-index: 20;
  transform: translateX(-50%);
  display: grid;
  gap: var(--space-2);
  width: min(420px, calc(100% - 32px));
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  padding: 12px var(--space-3);
  border: 1px solid var(--wisp);
  border-radius: 10px;
  background: var(--surface-2);
  box-shadow: 0 0 20px color-mix(in srgb, var(--wisp) 30%, transparent),
              0 8px 24px rgb(0 0 0 / .4);
  cursor: pointer;
  animation: toast-in .2s ease-out;
}
.toast-title { font-family: var(--font-pixel); }
.toast-body { margin-top: 2px; font-size: .8125rem; color: var(--text-dim); }

@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

/* 문파 공지 시작 시각 */
.start-fixed {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-variant-numeric: tabular-nums;
}
.badge--guild {
  background: color-mix(in srgb, var(--c-guild) 45%, transparent);
  color: var(--text);
}

/* ---------- Part 7: 토스트 버튼 ---------- */
.toast-action { margin-top: var(--space-2); }

/* ---------- Part 10: 잠금 화면 ---------- */
body.locked .app-main,
body.locked .tabbar,
body.locked .resets { display: none !important; }

.gate { max-width: 420px; margin: var(--space-4) auto; padding: 0 var(--space-3); }
.gate-card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-3);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: linear-gradient(135deg, var(--surface-2), var(--surface));
}
.gate-title { font-size: 1.25rem; }
.gate-notice {
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  font-size: .875rem;
}
.gate-field { display: grid; gap: var(--space-1); font-size: .875rem; color: var(--text-dim); }
.gate-field input,
.admin-login input {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
}
.gate-field input:focus-visible,
.admin-login input:focus-visible { outline: 2px solid var(--wisp); outline-offset: 1px; }
.gate-error { min-height: 1.2em; font-size: .8125rem; color: #ff8fa3; }
.gate-code {
  padding: var(--space-3) 0;
  font-family: var(--font-pixel);
  font-size: 2.25rem;
  letter-spacing: .3em;
  text-align: center;
  color: var(--accent);
}

/* ---------- Part 10: 관리자 페이지 ---------- */
.admin { padding-bottom: var(--space-4); }
.admin .toasts { bottom: calc(16px + env(safe-area-inset-bottom)); }
.admin-code { margin-left: 6px; font-family: var(--font-pixel); color: var(--accent); }
.admin-login { display: grid; gap: var(--space-2); max-width: 360px; margin: var(--space-4) auto; }