/* UX 결정 2026-09-26 — 사용자와 합의한 가독성 개선.
   운영에 필요한 글자는 14–15px, 보조 정보는 12–13px로 읽히게 한다.
   고급스러운 인상은 제목의 세리프와 여백으로 유지하고 작은 글자를 흐리게 만들지 않는다.
   악보 표지 속 인쇄 문양은 실제 정보가 별도 본문에 있으므로 장식 크기를 유지한다. */
:root {
  --reading-body: 14px;
  --reading-secondary: 13px;
  --reading-caption: 12px;
  --motion-brief: 180ms;
  --reading-muted: #626d81;
}

body { font-size: var(--reading-body); }
button, input, select, textarea { font-family: var(--font); }
.page-heading p, .dialog-description, .notice-detail-body,
.overview-notice-content > p, .notice-stream .notice-stream-body,
.overview-handover > p, .help-content p, .handover-note p,
.form-field textarea, .info-box, .empty p {
  font-size: var(--reading-body);
  line-height: 1.85;
}
.page-heading p, .dialog-description, .overview-task p,
.overview-handover > p, .help-content p, .handover-note p,
.empty p, .empty h3 { color: var(--secondary); }
.eyebrow, .dialog-header .eyebrow {
  color: var(--reading-muted);
  font-size: var(--reading-caption);
}
.nav-label, .nav-count, .sidebar-account > div > span,
.prototype-label, .workspace-footer { font-size: var(--reading-caption); }
.nav-item, .sidebar-bottom > .nav-item { font-size: var(--reading-body); }
.breadcrumb, .role-switch select, .variant-link,
.workspace-search { font-size: var(--reading-secondary); }
.role-switch select { color: var(--navy); }
.variant-link { color: var(--navy); }
.workspace-search kbd { font-size: var(--reading-caption); }
.page-heading h1, .dialog-header h2, .notice-detail-title,
.notice-stream .notice-stream-item h2 { text-wrap: pretty; }

/* UX 결정 2026-09-26 — 골드는 선택 표시와 장식에 남기고,
   작은 작동 문구에는 브랜드 네이비를 사용해 종이색 배경에서도 읽을 수 있게 한다. */
.text-btn, .text-btn:hover, .score-mapping-link,
.score-mapping-link:hover, .ensemble-summary > button:hover strong {
  color: var(--navy);
}
.member-group-choice.active small, .score-group-chip.active strong {
  color: #f4f6fb;
}
.info-box.amber, .form-field .confirmation-copy { color: #775e2c; }
.badge, .permission-badges .badge, .inline-admin,
.score-list .badge, .cover-corner .badge {
  font-family: var(--font);
  font-size: var(--reading-caption);
  line-height: 1.55;
}
.badge.neutral { color: var(--secondary); }
.badge.amber { color: #775e2c; }
.table-container .person strong { font-size: var(--reading-body); }
.table-container .person small, .member-picker small,
.detail-person p { color: var(--reading-muted); font-size: var(--reading-caption); }
.table-container td, .grouped-members-table td,
.part-edit, .admins-table .part-edit {
  font-size: var(--reading-body);
  line-height: 1.65;
}
.table-container th { font-size: var(--reading-caption); color: var(--secondary); }
.member-instrument, .member-memberships > span:not(.icon),
.member-group-section [data-action="group-remove-member"],
.member-group-section header p, .membership-fixed > span,
.member-group-choice small, .picker-summary, .table-note {
  font-size: var(--reading-caption);
  color: var(--reading-muted);
}
.member-group-choice > span, .member-group-section h2 > span,
.membership-options label, .membership-fixed,
.picker-summary strong, .member-tabs .tab, .selection-bar strong,
.result-count, .select-wrap select, .work-context-bar,
.members-sticky-tools { font-size: var(--reading-secondary); }
.member-memberships > span:not(.icon) { color: var(--navy); }
.member-group-choice.active > span { color: #f4f6fb; }
.member-picker > label > span:nth-child(2) { font-size: var(--reading-body); }
.tabs .tab { font-size: var(--reading-body); }
.tab > span { font-size: var(--reading-caption); }
.search-field input { font-size: var(--reading-body); }

.ensemble-summary > button > span:first-child { font-size: var(--reading-body); }
.ensemble-summary strong small { font-size: var(--reading-caption); }
.overview-section-header > span, .overview-notice-footer,
.overview-recent-score small, .overview-handover > span,
.session-overline, .session-label, .session-date > span,
.session-facts, .task-link { font-size: var(--reading-secondary); }
.overview-task p { font-size: var(--reading-body); }
.overview-recent-score strong { font-size: var(--reading-body); }
.overview-secondary h2 { font-size: 16px; }
.session-score p { font-family: var(--font); font-size: var(--reading-secondary); }
.notice-stream .notice-card-top time,
.notice-stream .notice-card-bottom, .notice-detail-meta,
.read-count { font-size: var(--reading-secondary); color: var(--reading-muted); }

.score-group-chip, .score-group-chip > span,
.score-group-chip strong, .score-view-options,
.score-view-options .segmented button, .score-results-summary,
.score-section-heading h2 > span, .score-section-heading p,
.score-row-edition, .score-row-meta-secondary,
.score-card-group, .score-card-group > span:last-child,
.score-card-footer, .score-card-footer > .btn,
.score-mapping-link, .score-list .cell-subtext,
.edition-label, .edition-label > span, .work-catalogue,
.library-summary, .library-summary > span:last-child,
.library-note, .library-note > .text-btn {
  font-size: var(--reading-secondary);
}
.score-row-work .score-work-caption,
.score-row-work .score-work-number {
  font-family: var(--font);
  font-size: var(--reading-secondary);
}
.score-row-action > .btn, .score-section-distribute {
  font-size: var(--reading-secondary);
}
.score-section-heading p, .score-row-meta-secondary,
.score-work-caption, .score-card-footer, .edition-label > span,
.score-card-group > span:last-child { color: var(--reading-muted); }
.score-group-row.is-removed { opacity: 1; }
.score-group-row.is-removed .score-cover { opacity: .65; }
.score-list-title strong { font-size: var(--reading-body); }

/* UX 결정 2026-09-26 — 일정·계약은 합의한 배치를 유지한다.
   좁은 달력 칸의 날짜·제목은 13px, 상세 운영 정보는 14px로 조정한다. */
.calendar-day, .calendar-event > strong, .calendar-event strong,
.calendar-weekdays span { font-size: var(--reading-secondary); }
.calendar-event > span { font-size: var(--reading-caption); }
.calendar-cell.outside .calendar-day { color: var(--reading-muted); }
.calendar-bottom, .next-event-heading > span,
.calendar-list-note, .month-empty, .event-card-date .badge,
.agenda-date span, .agenda-main > span, .agenda-time small,
.month-event-card p { font-size: var(--reading-secondary); color: var(--reading-muted); }
.agenda-main p, .agenda-time { font-size: var(--reading-body); }
.contract-number, .contract-wordmark small, .contract-year > span,
.contract-year > small, .seat-summary, .subtle-copy,
.contract-history p { font-size: var(--reading-secondary); color: var(--secondary); }
.contract-hero p, .contract-details > div { font-size: var(--reading-body); }
.contract-hero p { color: var(--secondary); }
.contract-year > strong > span { color: var(--reading-muted); }

.form-field > span, .form-field > label,
.settings-section-fields .form-field > span,
.form-field input:not([type=checkbox]), .form-field select,
.settings-section-fields .form-field input,
.switch-row > div strong, .settings-section-fields .switch-row strong,
.detail-list > div, .mapping-list > div, .file-list > div,
.distribution-mapping > label, .distribution-mapping select,
.activity-row strong { font-size: var(--reading-body); }
.form-field small, .settings-section-fields .form-field small,
.form-error, .quick-edit-hint, .switch-row p,
.settings-section-fields .switch-row p, .dialog-section-title,
.mapping-list > div > span:last-child, .file-list small,
.copy-field input, .distribution-choices p, .source-footnote,
.steps small, .imslp-result p, .distribution-summary p,
.edition-option span, .edition-option small, .file-drop > span,
.notification-list p, .settings-section-label p,
.settings-save-row > span, .settings-password p,
.admin-info-grid p, .admin-notice-toggle > span,
.access-intro p, .activity-row p, .activity-row time {
  font-size: var(--reading-secondary);
  line-height: 1.75;
}
.form-field small, .settings-section-fields .form-field small,
.switch-row p, .settings-section-fields .switch-row p,
.detail-list > div > span, .mapping-list > div > span:last-child,
.file-list small, .copy-field input, .imslp-result p,
.distribution-summary p, .edition-option span, .edition-option small,
.file-drop > span, .notification-list p { color: var(--reading-muted); }
.form-field input::placeholder, .form-field textarea::placeholder,
.command-input input::placeholder { color: var(--reading-muted); }
.form-error { color: #a44732; }
.info-box { color: var(--secondary); }
.info-box.amber { color: #775e2c; }
.toast { font-size: var(--reading-body); line-height: 1.65; }
.toast > .icon { color: #c8a85c; }

/* UX 결정 2026-09-26 — 작은 편집·닫기 버튼을 정확하게 누를 수 있도록
   아이콘 버튼은 36px, 일반 버튼은 40px, 체크박스는 24px의 직접 조작 영역을 확보한다. */
button { min-height: 24px; }
.btn, .calendar-navigation > .btn,
.score-row-action > .btn, .score-card-footer > .btn,
.selection-bar .btn, .activity-row .btn,
.contract-history > .btn, .settings-password > .btn {
  min-height: 40px;
  font-size: var(--reading-secondary);
  line-height: 1.5;
}
.icon-btn, .month-arrows .icon-btn {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}
.text-btn, .score-mapping-link, .part-edit,
.segmented > button, .score-view-options .segmented button {
  min-height: 36px;
  font-size: var(--reading-secondary);
}
.variant-link, .role-switch select { min-height: 32px; }
.part-edit { padding: 6px 8px; }
.part-edit .icon { opacity: .8; width: 13px; height: 13px; flex-basis: 13px; }
input[type=checkbox]:not(.switch), input[type=radio] {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  accent-color: var(--navy);
}
.checkbox-cell { min-width: 44px; }
input.switch { width: 42px; height: 26px; }
input.switch::before { width: 18px; height: 18px; top: 4px; left: 4px; }
input.switch:checked::before { transform: translateX(16px); }
.calendar-add { min-width: 24px; min-height: 24px; }
.member-group-section [data-action="group-remove-member"] { min-height: 36px; }
.toast > .btn { min-height: 36px; white-space: nowrap; }
:is(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--navy) !important;
  outline-offset: 3px;
  box-shadow: 0 0 0 5px #c8a85c40;
}

/* UX 결정 2026-09-26 — 화면 전환은 약 180ms로 짧게,
   수정한 행은 잠시 강조해 사용자가 작업 결과와 현재 위치를 확인하게 한다.
   반복 이동·장식성 튀어 오름은 줄이고 OS의 동작 줄이기 설정을 따른다. */
.page { animation: ux-content-in var(--motion-brief) ease-out; }
.member-group-sections, .score-group-sections, .notice-stream {
  animation: ux-content-in var(--motion-brief) ease-out;
}
.modal, .part-popover { animation: ux-dialog-in var(--motion-brief) var(--ease); }
.sheet { animation: ux-sheet-in var(--motion-brief) var(--ease); }
dialog::backdrop { animation: backdrop-in var(--motion-brief) ease-out; }
.nav-item, .btn, .icon-btn, .member-group-choice,
.score-group-chip, .overview-task, .member-memberships > span:not(.icon),
.score-group-row, .library-card, .library-cover-area .score-cover.printed-score {
  transition-duration: var(--motion-brief);
}
.library-card:hover { transform: none; }
.library-card:hover .library-cover-area .score-cover.printed-score {
  transform: rotate(0);
}
.row-saved td, .change-highlight, [data-changed="true"] {
  animation: ux-saved-row 1400ms ease-out;
}
@keyframes ux-content-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
@keyframes ux-dialog-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@keyframes ux-sheet-in {
  from { opacity: 0; transform: translateX(18px); }
  to { opacity: 1; transform: none; }
}
@keyframes ux-saved-row {
  0%, 35% { background-color: #f1e8d1; }
  100% { background-color: transparent; }
}

@media (max-width: 700px) {
  /* UX 결정 2026-09-26 — 손가락으로 누르는 핵심 작업은 44px로 넓히되
     표·달력의 기존 정보 구조는 그대로 둔다. 입력 중 모바일 확대도 방지한다. */
  .btn, .icon-btn, .month-arrows .icon-btn,
  .calendar-navigation > .btn, .score-row-action > .btn,
  .score-card-footer > .btn, .selection-bar .btn,
  .activity-row .btn, .contract-history > .btn,
  .settings-password > .btn, .text-btn, .score-mapping-link,
  .part-edit, .segmented > button,
  .score-view-options .segmented button { min-height: 44px; }
  .icon-btn, .month-arrows .icon-btn { width: 44px; min-width: 44px; height: 44px; }
  .form-field input:not([type=checkbox]), .form-field select,
  .form-field textarea, .settings-section-fields .form-field input,
  .search-field input, .copy-field input,
  .distribution-mapping select { font-size: 16px; }
  .member-group-choice > span, .member-tabs .tab,
  .score-group-chip > span, .score-results-summary,
  .overview-notice-footer, .overview-recent-score small { font-size: var(--reading-secondary); }
  .overview-task p, .notice-stream .notice-stream-body,
  .overview-notice-content > p { font-size: var(--reading-body); }
  .ensemble-summary > button > span:first-child { font-size: var(--reading-secondary); }
  .ensemble-summary > button { min-height: 44px; }
  .overview-task .task-link { font-size: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .row-saved td, .change-highlight, [data-changed="true"] {
    background-color: #f1e8d1;
  }
  .library-card:hover .library-cover-area .score-cover.printed-score { transform: none; }
}

/* UX 합의 · 2026-09-27: 새 악보·초대 흐름에도 같은 읽기 대비와 터치 크기를 적용한다. */
.score-draft-status,.score-selected-file small,.score-review-note,.score-workflow .form-field small,
.score-workflow .imslp-result p,.score-workflow .distribution-summary p,.score-workflow .edition-option span,
.score-workflow .edition-option small,.score-assignment-labels,.score-assignment-count,.recipient-roles,
.score-review-recipients,.score-review-recipients>span:first-child,.score-draft-card p,.score-draft-card>div>span,
.score-resume-banner span,.score-preview-caption span,.score-mapping-changes,
.invitation-target small,.invitation-cell-note,.invitation-closed-label,.invitation-mock-note,
.invitation-domain-note,.invitation-demo-example{color:var(--reading-muted);font-size:12px}
.invitation-target strong{font-size:14px}
.invitation-row-actions .btn.quiet,.invitation-status-filters>button,.invite-tabs>button{font-size:13px;min-height:40px}
.invitation-status-filters>button>span,.invitation-preview-list .badge,.invitation-preview-list>div>span:first-child{font-size:12px}
.score-workflow .btn,.score-selected-file>.btn{min-height:40px}
.score-workflow .rights-check input{width:24px;height:24px;margin-top:1px}
.score-assignment-file>.icon-btn,.score-review-table td .icon-btn{width:36px;height:36px}
@media(max-width:700px){
 .score-workflow .form-field select,.score-workflow .form-field input,.score-workflow .wide-search input,.score-assignment-row select,.work-context-bar select,.invitation-link-field input{font-size:16px}
 .score-workflow .btn,.score-workflow .dialog-actions>.btn,.score-selected-file>.btn,.invitation-row-actions .btn.quiet,.invitation-status-filters>button,.invite-tabs>button{min-height:44px}
 .score-assignment-file>.icon-btn,.score-review-table td .icon-btn{width:44px;height:44px}
 .score-workflow .steps small{font-size:12px}
 .work-context-bar select{max-width:none}
}