/* 기존 위클벨 web/public/index.html 의 화면 전용 스타일을 그대로 옮긴 파일 */
.badge-open { background: var(--success-bg); color: var(--success); }
    .badge-open::before { background: var(--success); }
    .badge-warning { background: var(--warning-bg,#fffbeb); color: var(--warning,#d97706); }
    .badge-warning::before { background: var(--warning,#d97706); }
    .badge-scheduled { background: #e0f0ff; color: #1d6fb8; }
    .badge-scheduled::before { background: #1d6fb8; }
    .badge-completed { background: var(--success-bg); color: var(--success); }
    .badge-completed::before { background: var(--success); }
    .badge-group { background: #f0e8ff; color: #6d28d9; }
    .badge-group::before { background: #6d28d9; }
    /* attention */
    .attention-panel { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px; background:var(--warning-bg,#fffbeb); border:1.5px solid var(--warning-muted,#fde68a); border-radius:var(--radius-md); margin-bottom:18px; }
    .attention-panel h2 { margin:2px 0; font-size:15px; font-weight:800; }
    .attention-panel p { margin:0; font-size:13px; color:var(--text-secondary); }
    /* week calendar */
    .week-calendar { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-top:12px; }
    .week-day { border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; }
    .week-day.today { border-color:var(--primary); }
    .week-day-head { display:flex; flex-direction:column; align-items:center; padding:8px 4px 6px; background:var(--line-light); }
    .week-day-head span { font-size:11px; font-weight:700; color:var(--text-secondary); }
    .week-day-head strong { font-size:17px; font-weight:900; }
    .week-day.today .week-day-head { background:var(--primary); }
    .week-day.today .week-day-head span, .week-day.today .week-day-head strong { color:#fff; }
    .week-day-body { padding:6px; display:flex; flex-direction:column; gap:4px; min-height:56px; }
    .calendar-event { padding:5px 7px; border-radius:6px; font-size:12px; }
    .calendar-event span { display:block; opacity:.7; font-size:11px; }
    .calendar-event strong { display:block; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .calendar-event.approved { background:var(--success-bg); color:var(--success); }
    .calendar-event.open { background:#e0f5ff; color:#1d6fb8; }
    .calendar-event.pending { background:var(--warning-bg,#fffbeb); color:var(--warning,#d97706); }
    .calendar-event.group { background:#f0e8ff; color:#6d28d9; }
    .calendar-empty { font-size:12px; color:var(--muted); text-align:center; padding:8px 0; margin:0; }
    /* topbar overflow fix */
    #topbarLeft { min-width:0; flex:1; overflow:hidden; }
    .workspace-title { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    /* section-label */
    .section-label { margin:0 0 2px; font-size:11px; font-weight:700; color:var(--text-secondary); letter-spacing:.5px; text-transform:uppercase; }
    /* period presets */
    .period-preset-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:6px; }
    .period-check-choice { display:flex; align-items:center; gap:8px; padding:8px 10px; border:1.5px solid var(--line); border-radius:var(--radius-sm); cursor:pointer; font-size:13px; }
    .period-check-choice.active { border-color:var(--primary); background:var(--primary-bg,#fff5f5); }
    .period-check-choice input { accent-color:var(--primary); }
    .period-check-text strong { display:block; font-size:13px; font-weight:700; }
    .period-check-text span { font-size:11px; color:var(--text-secondary); }
    .manual-period-choice { width:100%; text-align:left; background:#fff; font-family:inherit; }
    .manual-period-choice.is-booked { cursor:not-allowed; border-color:#d9dee7; background:#edf1f5; color:#8b96a5; }
    .manual-period-choice.is-booked .period-check-text span { color:#97a1af; }
    .manual-period-choice.is-available { border-color:#a9dccc; background:#f0fbf7; }
    .manual-period-status { margin-left:auto; flex:0 0 auto; padding:3px 6px; border-radius:999px; font-size:10px; font-weight:700; }
    .is-booked .manual-period-status { color:#6f7a88; background:#dde3ea; }
    .is-available .manual-period-status { color:#17815e; background:#d8f3e7; }
    .draft-slot-box { margin-top:12px; padding:12px; background:var(--line-light); border-radius:var(--radius-sm); }
    .draft-slot-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
    .draft-slot-count { font-size:12px; font-weight:700; color:var(--primary); }
    .draft-slot-list { display:flex; flex-direction:column; gap:6px; }
    .draft-slot-item { display:flex; align-items:center; justify-content:space-between; padding:7px 10px; background:var(--panel); border-radius:6px; font-size:13px; }
    .draft-slot-item button { font-size:12px; color:var(--danger,#ef4444); background:none; border:none; cursor:pointer; padding:0; }
    .slot-empty { font-size:12px; color:var(--muted); text-align:center; padding:8px 0; margin:0; }
    /* month calendar */
    .month-calendar-head { display:grid; grid-template-columns:repeat(5,1fr); gap:4px; margin-bottom:4px; }
    .month-calendar-head span { text-align:center; font-size:11px; font-weight:700; color:var(--text-secondary); padding:4px 0; }
    .availability-calendar { display:grid; grid-template-columns:repeat(5,1fr); gap:4px; }
    .availability-day { border:1px solid var(--line); border-radius:6px; padding:6px; min-height:72px; cursor:pointer; transition:border-color .12s; }
    .availability-day:hover { border-color:var(--primary); }
    .availability-day.today { border-color:var(--primary); background:var(--primary-bg,#fff5f5); }
    .availability-day.past { opacity:.5; }
    .availability-day.outside-month { opacity:.3; }
    .availability-day-number { font-size:13px; font-weight:800; display:block; }
    .availability-slots { display:flex; flex-direction:column; gap:3px; margin-top:4px; }
    .slot-chip { display:flex; justify-content:space-between; align-items:center; padding:3px 6px; border-radius:4px; font-size:11px; font-weight:600; line-height:1.3; }
    .slot-chip.open { background:#e0f5ff; color:#1d6fb8; }
    .slot-chip.pending { background:var(--warning-bg,#fffbeb); color:var(--warning,#d97706); }
    .slot-chip.approved { background:var(--success-bg); color:var(--success); }
    .slot-chip.group { background:#f0e8ff; color:#6d28d9; }
    .slot-empty-chip { font-size:10px; color:var(--muted); padding:2px 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
    .availability-legend { display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
    .legend-pill { font-size:11px; padding:3px 8px; border-radius:20px; font-weight:600; }
    .legend-pill.approved { background:var(--success-bg); color:var(--success); }
    .legend-pill.open { background:#e0f5ff; color:#1d6fb8; }
    .legend-pill.pending { background:var(--warning-bg,#fffbeb); color:var(--warning,#d97706); }
    .legend-pill.group { background:#f0e8ff; color:#6d28d9; }
    .avail-cal-header { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
    .avail-cal-title { font-size:15px; font-weight:800; flex:1; text-align:center; margin:0; white-space:nowrap; }
    .slot-chip-action { font-size:10px; background:none; border:none; cursor:pointer; color:inherit; opacity:.7; padding:0 2px; }
    .slot-chip-action:hover { opacity:1; }
    /* login */
    .login-shell { min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--bg); }
    .login-card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-xl); box-shadow:var(--shadow-md); width:min(380px,calc(100% - 32px)); padding:40px 32px; text-align:center; }
    .login-logo { display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:16px; background:linear-gradient(145deg,var(--primary),#ff8e84); margin-bottom:20px; position:relative; overflow:hidden; box-shadow:0 4px 12px rgb(255 107 95/.28); }
    .login-logo::before { content:''; position:absolute; left:14px; top:12px; width:22px; height:28px; border-radius:4px; background:#fff; box-shadow:inset 0 -5px 0 rgb(255 209 102/.72); }
    .login-logo::after { content:''; position:absolute; right:8px; top:8px; width:13px; height:13px; border:2.5px solid #fff; border-radius:50%; background:var(--accent); }
    .login-card h1 { font-size:26px; font-weight:900; letter-spacing:-0.5px; margin:0 0 6px; }
    .login-card p { margin:0 0 28px; color:var(--text-secondary); font-size:14px; line-height:1.6; }
    /* slot kind tabs */
    .slot-kind-tabs { display:flex; border:1.5px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; margin-bottom:16px; }
    .slot-kind-tab { flex:1; padding:9px 0; text-align:center; font:inherit; font-size:14px; font-weight:700; cursor:pointer; background:var(--bg); border:none; color:var(--text-secondary); transition:background .12s,color .12s; }
    .slot-kind-tab.active { background:var(--primary); color:#fff; }
    /* notification message management: readable at desktop widths without making dense calendar screens larger */
    .message-settings-page { width:min(1120px,100%); }
    .message-settings-page .slot-kind-tabs { margin-bottom:18px !important; }
    .message-settings-page .slot-kind-tab { min-height:48px; padding:11px 8px; font-size:15px; }
    .message-settings-page .card-body { padding:26px 30px; }
    .message-schedule-layout { display:flex; align-items:center; justify-content:space-between; gap:28px; }
    .message-card-title { margin:0 0 6px; font-size:17px; font-weight:800; letter-spacing:-.2px; }
    .message-card-help { max-width:590px; margin:0; font-size:14px; line-height:1.65; color:var(--text-secondary); }
    .operation-profile-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:18px; }
    .operation-profile-option { min-height:104px; padding:15px; text-align:left; border:1.5px solid var(--line); border-radius:var(--radius-sm); background:#fff; color:var(--text); font:inherit; cursor:pointer; transition:border-color .15s,background .15s,box-shadow .15s; }
    .operation-profile-option:hover { border-color:#ffb8b1; }
    .operation-profile-option.active { border-color:var(--primary); background:var(--primary-bg,#fff5f5); box-shadow:0 0 0 2px rgb(255 107 95/.08); }
    .operation-profile-option strong { display:block; margin-bottom:5px; font-size:15px; font-weight:800; }
    .operation-profile-option span { display:block; color:var(--text-secondary); font-size:13px; line-height:1.5; }
    .operation-profile-note { margin:14px 0 0; font-size:13px; line-height:1.6; color:var(--text-secondary); }
    .message-schedule-control { display:flex; align-items:flex-end; gap:10px; flex:0 0 auto; }
    .message-schedule-control .field { min-width:142px; }
    .message-template-desc { font-size:15px; line-height:1.65; color:var(--text-secondary); margin:0 0 14px; }
    .message-variable-row { margin-bottom:12px; display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
    .message-variable-label { font-size:13px; color:var(--text-secondary); }
    .message-var-chip { font-size:12px; font-family:inherit; cursor:pointer; }
    .message-template-input { min-height:172px; font-family:inherit; font-size:15px; line-height:1.75; resize:vertical; }
    .message-save-status { font-size:13px; color:var(--color-primary); display:none; }
    /* settings: match the message-management information hierarchy */
    .settings-page { width:min(1120px,100%); }
    .settings-page .card-body { padding:26px 30px; }
    .settings-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:22px; }
    .settings-card-title { margin:0 0 6px; font-size:17px; font-weight:800; letter-spacing:-.2px; }
    .settings-card-help { max-width:680px; margin:0; font-size:14px; line-height:1.65; color:var(--text-secondary); }
    .period-editor-head, .period-editor-row { display:grid; grid-template-columns:minmax(120px,1fr) minmax(160px,1.25fr) minmax(160px,1.25fr) 42px; gap:10px; align-items:center; }
    .period-editor-head { margin:0 0 8px; padding:0 2px; color:var(--text-secondary); font-size:12px; font-weight:700; }
    .period-editor-row { padding:8px 10px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--panel); }
    .period-editor-row .field-input { min-width:0; width:100%; }
    .period-editor-row .btn { width:32px; height:32px; justify-self:end; }
    .settings-actions { display:flex; align-items:center; gap:10px; margin-top:16px; }
    @media (max-width:720px) {
      .message-settings-page .card-body { padding:20px; }
      .message-settings-page .slot-kind-tab { flex:1 1 31%; min-height:44px; font-size:14px; }
      .message-schedule-layout { align-items:stretch; flex-direction:column; gap:18px; }
      .message-schedule-control { align-items:flex-end; }
      .operation-profile-grid { grid-template-columns:1fr; }
      .operation-profile-option { min-height:0; }
      .settings-page .card-body { padding:20px; }
      .period-editor-head { display:none; }
      .period-editor-row { grid-template-columns:1fr 1fr 34px; gap:7px; padding:8px; }
      .period-editor-row input:first-child { grid-column:1 / 3; }
    }
    /* modal */
    .modal-back { position:fixed; inset:0; background:rgb(15 23 42/.48); display:grid; place-items:center; z-index:100; padding:24px; }
    .modal-card { background:var(--panel); border-radius:var(--radius-xl); padding:28px; width:min(440px,100%); box-shadow:var(--shadow-modal,0 20px 60px rgb(0 0 0/.25)); }
    .modal-card h3 { margin:0 0 6px; font-size:17px; font-weight:800; }
    .modal-card .modal-desc { margin:0 0 14px; color:var(--text-secondary); font-size:14px; }
    .modal-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:16px; }
    .form-stack { display:grid; gap:14px; }
    .field { display:grid; gap:6px; }
    .field-label { font-size:13px; font-weight:700; color:var(--text-secondary); }
    .field-input,.field-select { height:44px; padding:0 14px; border:1.5px solid var(--line); border-radius:var(--radius-sm); font:inherit; font-size:15px; color:var(--text); background:var(--bg); transition:border-color .15s; }
    .field-input:focus,.field-select:focus { outline:none; border-color:var(--primary); }
    textarea.field-input { height:auto; padding:10px 14px; resize:vertical; }
    /* link row */
    .link-copy-row { display:flex; align-items:center; gap:10px; padding:12px 16px; background:var(--line-light); border:1px solid var(--line); border-radius:var(--radius-sm); }
    .link-copy-row span { font-size:13px; font-family:monospace; color:var(--text-secondary); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    :root { --warning-bg:#fffbeb; --warning-muted:#fde68a; --warning:#d97706; }
    @media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--warning-bg:#2a1f05;--warning-muted:#6b4a10;}}
    :root[data-theme="dark"]{--warning-bg:#2a1f05;--warning-muted:#6b4a10;}