/* ui.css — Static SSR 공용 컴포넌트(Components/Shared)와 wwwroot/js/ui.js가 쓰는 스타일.
   원본 globals.css(app.css)의 .modal · .tabs · .btn 규칙 위에, 링크·폼으로 바뀐 부분만 보탠다. */

/* Avatar.razor — 원본 Avatar.tsx의 인라인 스타일 */
.ui-avatar {
  border-radius: 50%; color: #fff;
  display: inline-grid; place-items: center;
  font-weight: 600; flex-shrink: 0; letter-spacing: -.02em; line-height: 1;
}

/* Tabs.razor — 항목이 <button>이 아니라 <a>다 */
a.tabs-item { text-decoration: none; cursor: pointer; }
.tabs-badge {
  background: var(--accent); color: var(--accent-ink);
  font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 8px;
  line-height: 1.5; min-width: 17px; text-align: center;
}
.tabs-end form { display: contents; }

/* Modal.razor — 닫기는 링크, 본문이 <form>으로 감싸질 수 있다 */
.modal-head a.icon-btn { text-decoration: none; }
.modal.scroll > form { display: flex; flex-direction: column; min-height: 0; }
.modal.scroll > form > .modal-body { overflow: auto; min-height: 0; }
a.btn { text-decoration: none; }

/* ui.js 확인 모달 — 원본 ConfirmModal.tsx */
.ui-confirm-msg { font-size: 13.5px; color: var(--ink-2); line-height: 1.6; white-space: pre-line; }
.ui-confirm-quote { margin-top: 12px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; }
.ui-confirm-quote-name { font-size: 12px; font-weight: 600; color: var(--ink); margin-bottom: 3px; }
.ui-confirm-quote-body { font-size: 13px; color: var(--ink-2); line-height: 1.55; white-space: pre-wrap; word-break: break-word; max-height: 120px; overflow: auto; }
.ui-confirm-warn { margin-top: 14px; padding: 12px; background: color-mix(in oklch, var(--warn) 8%, var(--surface)); border: 1px solid color-mix(in oklch, var(--warn) 25%, var(--line)); border-radius: 10px; font-size: 12px; color: var(--ink-2); line-height: 1.55; }
.btn.confirm-danger { background: var(--danger); color: #fff; border: 0; }
.btn.confirm-danger:hover { background: var(--danger); filter: brightness(.93); }

/* MarkdownRenderer — 아직 URL을 만들 수 없는 본문 이미지(att:) 자리표시 */
.md-img-missing {
  display: inline-block; padding: 6px 10px; border-radius: 8px;
  border: 1px dashed var(--line-strong); background: var(--surface-2);
  font-size: 12px; color: var(--ink-4);
}

/* ── 투표(Static SSR): 원본의 button 기반 토글·칩을 label + hidden input으로 — app.css의 .poll-* 모양은 그대로 쓰고 상태만 :checked로 잇는다 ── */
label.poll-option-real { cursor: pointer; }
label.poll-option-real.disabled { cursor: default; }
label.poll-option-real .poll-choice-mark svg { visibility: hidden; }
label.poll-option-real:has(input:checked) { border-color: var(--accent); background: color-mix(in oklch, var(--accent) 3%, var(--surface)); }
label.poll-option-real:has(input:checked) .poll-choice-mark { background: var(--accent); border-color: var(--accent); }
label.poll-option-real:has(input:checked) .poll-choice-mark svg { visibility: visible; }
label.poll-toggle-row { cursor: pointer; }
label.poll-toggle-row .poll-switch { display: block; }
label.poll-toggle-row:has(input:checked) .poll-switch { background: var(--accent); }
label.poll-toggle-row:has(input:checked) .poll-switch > span { transform: translateX(17px); }
label.poll-toggle-row:has(input:focus-visible) .poll-switch { outline: 2px solid var(--accent); outline-offset: 2px; }
.poll-org-pills label { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink-3); font-size: 12px; cursor: pointer; }
.poll-org-pills label svg { display: none; }
.poll-org-pills label:has(input:checked), .poll-org-pills label.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.poll-org-pills label:has(input:checked) svg { display: inline; }
/* 원본은 날짜·시간 입력 둘 + 버튼(3열)인데 여기서는 datetime-local 하나라 2열로 — "마감 없음"이 입력창처럼 늘어나지 않게 */
.poll-deadline-row { grid-template-columns: 1fr auto; }
@media (max-width: 768px) { .poll-deadline-row { grid-template-columns: 1fr; } }
label.poll-no-deadline { cursor: pointer; }
label.poll-no-deadline svg { display: none; }
label.poll-no-deadline:has(input:checked) svg, label.poll-no-deadline.active svg { display: inline; }
.poll-vote-form { display: contents; }
.poll-manage-actions form, .poll-template-actions form { display: contents; }
.poll-results-modal .modal-head .kicker { font-family: var(--font-mono); }
.poll-results-modal .modal-head h3 { max-width: 640px; margin: 5px 0 0; font-size: 20px; font-weight: 650; line-height: 1.4; letter-spacing: -.02em; }

/* ── 오늘의 일과(Static SSR): 원본 tk-* 모양(app.css) 위에 링크·폼 형태만 보정 ── */
.tk-inline-form { display: contents; }
.tk-sub-date { color: var(--ink-2); font-weight: 600; }
.tk-sub-dot { margin: 0 6px; color: var(--line-strong); }
a.tk-today-btn, a.tk-day, a.tk-ov-card, a.tk-ov-more, a.tk-sub-add, a.tk-week-arrow { text-decoration: none; color: inherit; cursor: pointer; }
a.tk-ov-card { display: block; }
.tk-ov-hint a { color: var(--ink-4); text-decoration: underline; text-underline-offset: 2px; }
.tk-title-link { color: inherit; text-decoration: none; cursor: default; }
.tk-title-link:hover { text-decoration: none; }
.tk-empty { padding: 52px 0; text-align: center; color: var(--ink-4); }
.tk-empty .dot-grid { width: 100px; height: 100px; margin: 0 auto 16px; border-radius: 18px; }
.tk-empty p { font-size: 14px; margin: 0; }
.tk-ed-hint { font-size: 12px; color: var(--ink-4); margin: -2px 0 10px; }
button.tk-prio-pick { width: 100%; font-family: inherit; cursor: pointer; }
button.tk-prio-pick:disabled { cursor: not-allowed; opacity: .5; }
.tk-prio-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }

/* JS가 hidden 속성으로 숨긴 요소는 display 규칙보다 우선 */
[hidden] { display: none !important; }
/* 원본 TooltipLayer의 모든 title 공통 안내. */
.workspace-tooltip { position: fixed; z-index: 5000; pointer-events: none; }
.workspace-tooltip > div { max-width: 320px; padding: 6px 10px; border-radius: 8px; background: var(--ink); color: var(--bg); font-size: 12px; font-weight: 500; line-height: 1.45; letter-spacing: -.01em; box-shadow: var(--shadow-lg); word-break: break-word; white-space: pre-line; animation: tooltipIn .12s ease-out; }