/* 에톤 고객 설문 — 공통 스타일 (의존성 없음, 순수 CSS) 환자 설문 = 모바일 기준, 직원 화면 = 데스크탑+모바일 반응형 (CLAUDE.md 규칙 9) */ :root { --green-900: #2f4f4a; /* ETONNE 차분한 그린 */ --green-100: #e8f3ee; --ink: #1f2a28; --muted: #6b7a76; --line: #dde5e2; --bg: #f6f8f7; --card: #ffffff; --danger: #b4423a; } /* ==== 디자인 토큰 — QUAD DUR 디자인 시스템 이식 (2026-07, tokens.css) 대시보드(body.dashboard) 전용. 환자 설문(body.bare)은 위 기존 변수로 유지. 테마는 서버가 로 렌더 (profiles.theme, 기본 light) ==== */ :root { --c-bg-1: #ffffff; --c-bg-2: #f7f6f0; --c-bg-3: #f0eee5; --c-bg-danger: #fcebeb; --c-bg-info: #e6f1fb; --c-bg-success: #eaf3de; --c-bg-warning: #faeeda; --c-text-1: #2c2c2a; --c-text-2: #5f5e5a; --c-text-3: #888780; --c-text-danger: #a32d2d; --c-text-info: #185fa5; --c-text-success: #3b6d11; --c-text-warning: #854f0b; --c-border-3: rgba(60, 60, 60, 0.14); --c-border-2: rgba(60, 60, 60, 0.28); --c-border-1: rgba(60, 60, 60, 0.4); --c-border-danger: rgba(163, 45, 45, 0.4); --c-border-info: rgba(24, 95, 165, 0.4); --c-border-success: rgba(59, 109, 17, 0.4); --c-border-warning: rgba(133, 79, 11, 0.4); --c-accent: #0f6e56; --c-accent-weak: rgba(29, 158, 117, 0.08); --c-accent-weak2: rgba(29, 158, 117, 0.15); --font-sans: -apple-system, BlinkMacSystemFont, "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif; --radius-md: 8px; --radius-lg: 12px; } :root[data-theme="dark"] { --c-bg-1: #2a2a28; --c-bg-2: #232220; --c-bg-3: #1c1c1a; --c-bg-danger: #4a1a1a; --c-bg-info: #0e2842; --c-bg-success: #1f3d0a; --c-bg-warning: #3e2606; --c-text-1: #e0ddd2; --c-text-2: #a6a39a; --c-text-3: #73726c; --c-text-danger: #f09595; --c-text-info: #85b7eb; --c-text-success: #97c459; --c-text-warning: #efa027; --c-border-3: rgba(200, 200, 200, 0.14); --c-border-2: rgba(200, 200, 200, 0.24); --c-border-1: rgba(200, 200, 200, 0.4); --c-border-danger: rgba(240, 149, 149, 0.4); --c-border-info: rgba(133, 183, 235, 0.4); --c-border-success: rgba(151, 196, 89, 0.4); --c-border-warning: rgba(239, 160, 39, 0.4); --c-accent: #5dcaa5; --c-accent-weak: rgba(93, 202, 165, 0.1); --c-accent-weak2: rgba(93, 202, 165, 0.18); } /* 대시보드의 기존 변수를 토큰으로 재매핑 — 기존 규칙 전체가 두 테마를 자동 지원 */ body.dashboard { --green-900: var(--c-accent); --green-100: var(--c-accent-weak); --ink: var(--c-text-1); --muted: var(--c-text-2); --line: var(--c-border-3); --bg: var(--c-bg-3); --card: var(--c-bg-1); --danger: var(--c-text-danger); font-family: var(--font-sans); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif; background: var(--bg); color: var(--ink); line-height: 1.6; } a { color: var(--green-900); } /* ---- 상단 바 (직원 화면) ---- */ .topbar { display: flex; align-items: center; gap: 24px; padding: 0 20px; height: 56px; background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; } .brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); white-space: nowrap; } .brand span { color: var(--muted); font-size: 0.85em; } .brand-logo { height: 14px; width: auto; display: block; } .logo-dark { display: none; } :root[data-theme="dark"] .logo-light { display: none; } :root[data-theme="dark"] .logo-dark { display: block; } .topnav { display: flex; gap: 4px; flex: 1; } .nav-link { text-decoration: none; color: var(--ink); padding: 6px 12px; border-radius: 8px; font-size: 0.95em; } .nav-link:hover { background: var(--green-100); } .nav-link.active { background: var(--green-900); color: #fff; } .whoami { color: var(--muted); font-size: 0.9em; white-space: nowrap; } .whoami .logout { margin-left: 10px; font-size: 0.9em; color: var(--muted); } .whoami .logout:hover { color: var(--danger); } /* ---- 본문 ---- */ .content { max-width: 960px; margin: 0 auto; padding: 24px 16px 96px; } .page-title { font-size: 1.4em; margin: 4px 0 16px; } .card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 20px 24px; margin-bottom: 16px; } .card.center { max-width: 480px; margin: 15vh auto 0; text-align: center; } .muted { color: var(--muted); } /* ---- 모바일 하단 탭 바 (직원 화면) ---- */ .tabbar { display: none; } @media (max-width: 720px) { .topnav { display: none; } .tabbar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: var(--card); border-top: 1px solid var(--line); padding: 4px 8px calc(4px + env(safe-area-inset-bottom)); } .tabbar .nav-link { flex: 1; text-align: center; padding: 12px 4px; /* 터치 타깃 44px 이상 */ font-size: 0.9em; } } /* ---- 환자 설문 등 단순 화면 ---- */ body.bare { background: var(--green-100); } body.bare .content { max-width: 640px; } /* ---- 환자 설문 (모바일 기준, ETONNE 톤) ---- */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } /* honeypot */ .js .step { display: none; } .js .step.active { display: block; } .survey-brand { text-align: center; padding: 32px 0 8px; } .survey-brand .logo { font-size: 2em; letter-spacing: 0.35em; font-weight: 500; color: var(--ink); } .survey-brand .tagline { color: var(--muted); font-size: 0.85em; margin-top: 4px; } .intro { background: var(--card); border-radius: 14px; padding: 8px 24px 32px; text-align: center; } .intro-title { font-size: 1.5em; margin: 24px 0 16px; } .intro-body p { margin: 0.2em 0; } .intro-body p:empty { height: 0.8em; } .section-card { background: var(--card); border: 1px solid var(--green-900); border-radius: 14px; padding: 20px; } .section-title { font-size: 1.25em; margin: 4px 0 20px; } .question { margin-bottom: 24px; } .question.invalid .q-label { color: var(--danger); } .q-label { font-weight: 600; margin: 0 0 10px; } .req { color: var(--green-900); } .scale-row { display: flex; gap: 10px; } .scale-item input { position: absolute; opacity: 0; } .scale-circle { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; /* 터치 타깃 44px 이상 */ border: 1px solid var(--line); border-radius: 50%; background: var(--card); color: var(--green-900); font-size: 1.1em; cursor: pointer; user-select: none; } .scale-item input:checked + .scale-circle { background: var(--green-900); color: #fff; border-color: var(--green-900); } .scale-item input:focus-visible + .scale-circle { outline: 2px solid var(--green-900); outline-offset: 2px; } .scale-caption { display: flex; justify-content: space-between; max-width: 300px; color: var(--muted); font-size: 0.85em; margin-top: 6px; } .text-input, .text-area { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; font: inherit; background: var(--card); } .text-input:focus, .text-area:focus { outline: 2px solid var(--green-900); border-color: var(--green-900); } .text-input.invalid, .text-area.invalid { border-color: var(--danger); } .checks { display: flex; flex-direction: column; gap: 4px; } .check-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; cursor: pointer; } .check-item input { width: 20px; height: 20px; accent-color: var(--green-900); } .step-actions { margin-top: 24px; } .intro .step-actions { text-align: center; } .btn { background: var(--green-900); color: #fff; border: none; border-radius: 999px; padding: 14px 32px; font: inherit; font-weight: 600; cursor: pointer; min-height: 48px; } .btn:hover { opacity: 0.92; } .done h1 { margin-top: 24px; } @media (max-width: 420px) { .scale-row { gap: 6px; } .scale-circle { width: 48px; height: 48px; } } /* ==== 대시보드 (Phase 3) ==== */ .sub-title { font-size: 1.05em; margin: 28px 0 10px; } .sub-title .muted { font-weight: 400; font-size: 0.85em; } .sub-title .more { float: right; font-size: 0.85em; text-decoration: none; } .meta { color: var(--muted); margin: 4px 0; } .meta a { color: var(--green-900); } /* 상단 검색 */ .topsearch { flex: 0 1 260px; margin-left: auto; } .topsearch input, .searchbox input[type="search"] { width: 100%; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; font: inherit; background: var(--bg); } .searchbox { display: flex; gap: 8px; align-items: center; } .home-search { padding: 14px 16px; } .home-search input { flex: 1; padding: 12px 16px; } /* 카드형 목록 (표 대신 — 모바일에서 자연스럽게 세로 스택) */ .rows { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; } .row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; text-decoration: none; color: var(--ink); min-height: 44px; } a.row:hover { border-color: var(--green-900); } .row.static { cursor: default; } .rows.plain .row { border: none; border-bottom: 1px solid var(--line); border-radius: 0; padding: 8px 4px; } .cell.time { color: var(--muted); font-size: 0.85em; white-space: nowrap; } .cell.survey { font-weight: 600; white-space: nowrap; } .cell.patient { color: var(--ink); } .cell.praise { color: var(--green-900); } .cell.badges { margin-left: auto; display: flex; gap: 6px; } .cell.grow { flex: 1; min-width: 200px; } .cell.num { width: 64px; text-align: right; white-space: nowrap; } .cell.bar { flex: 1; min-width: 120px; height: 8px; background: var(--green-100); border-radius: 4px; overflow: hidden; } .avgbar { display: block; height: 100%; background: var(--green-900); border-radius: 4px; } .m-label { display: none; color: var(--muted); } .badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.8em; border: 1px solid var(--line); white-space: nowrap; } .badge.low { background: #fdecea; border-color: #f2b8b3; color: var(--danger); } .badge.note { background: var(--green-100); border-color: var(--green-900); color: var(--green-900); } .badge.st-in_progress { background: #fff6e0; border-color: #e3c56b; color: #8a6d1a; } .badge.st-done { background: var(--green-100); color: var(--green-900); } .badge.st-on_hold { background: #eee; color: #666; } /* 필터 폼 */ .filter { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 14px 16px; } .filter select, .filter input[type="date"], .filter input[type="text"] { padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; background: var(--card); } .filter .chk { display: flex; align-items: center; gap: 6px; font-size: 0.9em; color: var(--muted); } .btn.sm { padding: 9px 18px; min-height: 40px; font-size: 0.95em; } .btn.ghost { background: var(--card); color: var(--green-900); border: 1px solid var(--green-900); } .btn.copied { background: var(--green-100); color: var(--green-900); } .pager { display: flex; gap: 12px; align-items: center; justify-content: center; margin: 16px 0; } /* 상세 */ .detail-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .detail-head .page-title { margin-bottom: 4px; } .qa { padding: 10px 0; border-bottom: 1px solid var(--line); } .qa:last-child { border-bottom: none; } .qa .q-label { margin-bottom: 4px; } .qa-answer { white-space: pre-wrap; } .score { font-weight: 700; color: var(--green-900); } .score.low { color: var(--danger); } .answer-text { } /* 홈 요약 카드 */ .home-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0; } .stat .stat-label { color: var(--muted); margin: 0 0 6px; font-size: 0.9em; } .stat .stat-value { font-size: 2em; font-weight: 700; margin: 0; } .stat .unit { font-size: 0.5em; font-weight: 400; color: var(--muted); margin-left: 4px; } .top3 { margin: 4px 0; padding-left: 20px; } /* 탭 */ .tabs { display: flex; gap: 4px; margin-bottom: 14px; } .tab { padding: 8px 18px; border-radius: 999px; text-decoration: none; color: var(--ink); border: 1px solid var(--line); background: var(--card); } .tab.active { background: var(--green-900); color: #fff; border-color: var(--green-900); } /* 발송 도우미 */ .send { display: flex; flex-direction: column; gap: 14px; max-width: 560px; } .send label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; } .send select, .send input, .send textarea { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; font-weight: 400; } .send textarea { background: var(--bg); } /* 차트 */ .chart { width: 100%; height: auto; } /* ==== 이슈·칭찬직원 (Phase 4) ==== */ .tab-cnt { opacity: 0.7; font-size: 0.85em; } .stat-link { text-decoration: none; color: inherit; } .stat-link:hover { text-decoration: underline; } /* 수정·수정 내역 토글 */ .edit-toggle { margin-top: 8px; } .edit-toggle > summary { cursor: pointer; color: var(--muted); font-size: 0.9em; padding: 6px 0; user-select: none; min-height: 32px; } .edit-toggle > summary:hover { color: var(--green-900); } .edit-toggle[open] > summary { color: var(--green-900); font-weight: 600; } .edit-toggle form { margin-top: 8px; } .log-row { font-size: 0.92em; } /* 칭찬직원 인라인 수정 */ .praise-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .praise-form input[type="text"] { flex: 1; min-width: 220px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; } /* 응답 상세: 문항별 이슈 등록 링크 */ .qa-issue { display: inline-block; margin-top: 6px; font-size: 0.82em; color: var(--muted); text-decoration: none; } .qa-issue:hover { color: var(--danger); text-decoration: underline; } /* 이슈 등록/수정 폼 */ .issue-form { max-width: none; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } /* 이슈 목록 행 본문 발췌 — 목록의 제목 역할 (GitHub 이슈 목록처럼 강조) */ .cell.excerpt { color: var(--ink); min-width: 160px; font-weight: 600; } /* 링크 복사 등 상세 액션 — 카드 우상단 고정 */ .detail-head.card { position: relative; } .detail-actions.corner { position: absolute; top: 14px; right: 16px; } /* 처리 기록 — GitHub 이슈식 타임라인 (댓글 카드 + 상태 전환 이벤트 라인 + 연결선) */ .timeline { position: relative; margin: 8px 0 16px; } .timeline::before { content: ""; position: absolute; left: 15px; top: 6px; bottom: 6px; width: 2px; background: var(--line); } .tl-item { position: relative; margin: 0 0 14px 40px; } .tl-item::before, .tl-event::before { content: ""; position: absolute; left: -29px; top: 13px; width: 9px; height: 9px; border-radius: 50%; background: var(--c-border-2); outline: 3px solid var(--bg); } .tl-card { background: var(--card); border: 0.5px solid var(--line); border-radius: var(--radius-md); overflow: hidden; } .tl-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; padding: 8px 14px; background: var(--c-bg-2); border-bottom: 0.5px solid var(--line); font-size: 0.88em; color: var(--muted); } .tl-head strong { color: var(--ink); } .tl-body { padding: 12px 14px; } .tl-event { position: relative; margin: 0 0 14px 40px; padding: 6px 0; color: var(--muted); font-size: 0.95em; } .tl-event strong { color: var(--ink); } .comment-body { margin: 0; font-size: 1.03em; white-space: pre-wrap; } /* 새 댓글 폼 — 하단 카드, 버튼은 오른쪽 아래 (상태 전환 버튼은 댓글과 함께 저장됨) */ .comment-form { max-width: none; } .comment-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; } .c-actions { display: flex; gap: 12px; align-items: baseline; margin-top: 8px; } /* 인라인 수정 토글 (댓글 .c-edit / 이슈 본문 .issue-edit 공용): "수정"을 누르면 보기 영역이 숨고 그 자리가 수정 폼으로 바뀐다 */ .c-edit > summary, .issue-edit > summary { list-style: none; cursor: pointer; color: var(--muted); font-size: 0.9em; user-select: none; } .c-edit > summary::-webkit-details-marker, .issue-edit > summary::-webkit-details-marker { display: none; } .c-edit > summary:hover, .issue-edit > summary:hover { color: var(--green-900); text-decoration: underline; } .c-edit > summary .when-open, .issue-edit > summary .when-open { display: none; } .c-edit[open] > summary .when-open, .issue-edit[open] > summary .when-open { display: inline; } .c-edit[open] > summary .when-closed, .issue-edit[open] > summary .when-closed { display: none; } .tl-body:has(.c-edit[open]) > .comment-body { display: none; } .tl-body:has(.c-edit[open]) .inline-form { display: none; } /* 수정 중에는 삭제 숨김 */ .c-actions { flex-wrap: wrap; } .c-actions .c-edit[open] { flex: 1 1 100%; } /* 수정창은 카드 전체 폭 */ .c-edit-form { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; margin-top: 6px; width: 100%; } .c-edit-form textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: 1.03em; } /* 이슈 본문 카드: 수정 열면 보기 영역 숨김 (댓글 인라인 수정과 동일 UX) */ .issue-content:has(.issue-edit[open]) .issue-view { display: none; } .issue-edit[open] > summary { margin-bottom: 10px; } /* 이슈 상세 헤드: [상태 pill] [발생일] 제목 */ .detail-head .page-title .badge { font-size: 0.7em; padding: 5px 14px; border-radius: 999px; font-weight: 600; vertical-align: 3px; } .issue-title .issue-date { color: var(--muted); font-weight: 400; font-size: 0.8em; margin: 0 2px; } .detail-head .meta .sep { color: var(--line); } /* 본문 카드 우하단: 작성·수정 메타 */ .byline { text-align: right; margin: 14px 0 0; font-size: 0.88em; } /* @멘션 — 본문 하이라이트 + 자동완성 메뉴 */ .mention { color: var(--c-text-info); background: var(--c-bg-info); border-radius: 4px; padding: 0 4px; font-weight: 600; } .mention-menu { position: absolute; z-index: 100; min-width: 160px; padding: 4px; background: var(--card); border: 0.5px solid var(--c-border-2); border-radius: var(--radius-md); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); } .mention-item { padding: 7px 10px; border-radius: 6px; cursor: pointer; } .mention-item.active, .mention-item:hover { background: var(--c-accent-weak); } /* 타임라인 수정 이벤트의 변경 내용 펼침 */ .log-diff { margin-top: 4px; } .log-diff > summary { cursor: pointer; font-size: 0.9em; color: var(--muted); list-style: none; } .log-diff > summary::-webkit-details-marker { display: none; } .log-diff > summary:hover { color: var(--green-900); text-decoration: underline; } .log-diff ul { margin: 6px 0 0; padding-left: 18px; font-size: 0.92em; } .inline-form { display: inline; } .linklike { background: none; border: none; padding: 0; font: inherit; font-size: 0.9em; color: var(--muted); cursor: pointer; } .linklike:hover { text-decoration: underline; } .linklike.danger:hover { color: var(--danger); } /* 응답 행: 행 전체 링크 + 내부 이슈 배지 링크 (stretched-link) */ .row.linkable { position: relative; } .row.linkable:hover { border-color: var(--green-900); } .row-link { position: absolute; inset: 0; z-index: 0; border-radius: 12px; } .row.linkable .badge.issue { position: relative; z-index: 1; } .badge.issue { background: #fdecea; border-color: #f2b8b3; color: var(--danger); text-decoration: none; } .badge.issue:hover { background: #f2b8b3; } /* 직원 통계 2단 */ .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } /* 모바일 */ /* ==== QUAD 디자인 언어 — 대시보드 전용 오버라이드 (환자 설문 body.bare 는 제외) ==== */ body.dashboard { font-size: 14.5px; -webkit-font-smoothing: antialiased; } body.dashboard .card { border-width: 0.5px; border-radius: var(--radius-lg); } body.dashboard .row { border-width: 0.5px; } body.dashboard .topbar { border-bottom-width: 0.5px; } body.dashboard .tabbar { border-top-width: 0.5px; } /* 버튼 — 기본은 잉크 반전(primary), ghost 는 서페이스 */ body.dashboard .btn { background: var(--c-text-1); color: var(--c-bg-1); border: 0.5px solid var(--c-text-1); border-radius: var(--radius-md); font-weight: 500; } body.dashboard .btn:hover { opacity: 0.88; } body.dashboard .btn.ghost { background: var(--card); color: var(--ink); border-color: var(--c-border-2); opacity: 1; } body.dashboard .btn.ghost:hover { background: var(--c-bg-2); } body.dashboard .btn.copied { background: var(--c-bg-success); color: var(--c-text-success); border-color: var(--c-border-success); } /* 내비·탭 활성 — 반전 스타일 (다크에서 accent 배경+흰 글자 대비 문제 회피) */ body.dashboard .nav-link.active, body.dashboard .tab.active { background: var(--c-text-1); color: var(--c-bg-1); border-color: var(--c-text-1); } /* 상태·의미 배지 — 시맨틱 토큰으로 두 테마 지원 */ body.dashboard .badge { border-radius: 4px; } body.dashboard .badge.low, body.dashboard .badge.issue { background: var(--c-bg-danger); border-color: var(--c-border-danger); color: var(--c-text-danger); } body.dashboard .badge.issue:hover { filter: brightness(0.95); background: var(--c-bg-danger); } body.dashboard .badge.note { background: var(--c-bg-info); border-color: var(--c-border-info); color: var(--c-text-info); } /* GitHub 이슈 관례: 진행중(open)=초록, 완료(closed)=파랑, 보류=노랑 */ body.dashboard .badge.st-in_progress { background: var(--c-bg-success); border-color: var(--c-border-success); color: var(--c-text-success); } body.dashboard .badge.st-done { background: var(--c-bg-info); border-color: var(--c-border-info); color: var(--c-text-info); } body.dashboard .badge.st-on_hold { background: var(--c-bg-warning); border-color: var(--c-border-warning); color: var(--c-text-warning); } /* 폼 요소 포커스·다크 가시성 */ body.dashboard input:focus, body.dashboard select:focus, body.dashboard textarea:focus { border-color: var(--c-border-1); outline: none; } :root[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1) brightness(1.4); cursor: pointer; } /* 차트 — 하드코딩 색 대신 테마 변수 */ .chart-bar { fill: var(--green-900); } .chart-val { fill: var(--ink); } .chart-lbl { fill: var(--muted); } .chart-axis { stroke: var(--line); } /* 멘션 알림 벨 (상단 바) — 테마 토글과 같은 라인 아이콘 스타일 */ .bell { position: relative; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 0.5px solid var(--c-border-2); background: var(--card); color: var(--muted); text-decoration: none; } .bell:hover { color: var(--ink); background: var(--c-bg-2); } .bell svg { width: 17px; height: 17px; display: block; } .bell-badge { position: absolute; top: -2px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; background: var(--c-text-danger); color: #fff; border-radius: 999px; font-size: 10px; font-weight: 700; line-height: 1; } .row.mention-new { border-color: var(--c-border-info); background: var(--c-bg-info); } /* 관리 화면 — 세로 배치, 담당원장 폼은 전체 폭 (.send 의 560px 제한 해제) */ .admin-settings { max-width: none; } .user-row select { padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; background: var(--card); } .key-reveal { background: var(--c-bg-success); border-color: var(--c-border-success); } .api-key { font-family: ui-monospace, Menlo, monospace; background: var(--card); padding: 4px 8px; border-radius: 6px; word-break: break-all; } /* 설문 편집 (관리 > 설문 관리) — 섹션 카드 안에 질문 행, 수정은 인라인 토글(.c-edit 재사용) */ .survey-meta { max-width: none; } .survey-meta textarea { font-size: 0.95em; line-height: 1.5; } .sec-head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; } .sec-rename { display: flex; gap: 8px; align-items: center; flex: 1; min-width: 240px; } .sec-rename input { flex: 1; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius-md); font: inherit; font-size: 1.1em; font-weight: 600; background: var(--card); color: var(--ink); } .sec-tools { display: flex; gap: 6px; } .q-item { padding: 12px 4px; border-top: 0.5px solid var(--line); } .q-item.archived .q-label-line { color: var(--muted); text-decoration: line-through; } .q-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .q-label-line { flex: 1; min-width: 200px; } .q-tools { display: flex; gap: 6px; } .q-tools .btn:disabled { opacity: 0.35; cursor: default; } .q-item:has(.q-edit[open]) .q-label-line { color: var(--muted); } .q-edit { margin-top: 6px; } .q-edit-form { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; } .q-edit-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; } .q-edit-form label.chk { flex-direction: row; align-items: center; gap: 8px; font-weight: 400; } .q-edit-form input, .q-edit-form select, .q-edit-form textarea { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-md); font: inherit; background: var(--card); color: var(--ink); } .q-edit-form .step-actions { margin-top: 0; text-align: right; } .q-add { padding: 14px 0 0; } .q-add input[name="label"] { flex: 1; min-width: 200px; } /* 테마 토글 (상단 바 우측) */ .theme-form { display: flex; } .theme-toggle { width: 34px; height: 34px; border-radius: 50%; padding: 0; border: 0.5px solid var(--c-border-2); background: var(--card); color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .theme-toggle:hover { color: var(--ink); background: var(--c-bg-2); } .theme-toggle svg { width: 17px; height: 17px; display: block; } /* 모바일 */ @media (max-width: 720px) { .topsearch { display: none; } .home-grid { grid-template-columns: 1fr; } .form-grid { grid-template-columns: 1fr; } .stats-grid { grid-template-columns: 1fr; } .row { flex-direction: column; align-items: flex-start; gap: 4px; } .cell.badges { margin-left: 0; } .m-label { display: inline; } .detail-head { flex-direction: column; } .filter { flex-direction: column; align-items: stretch; } .sec-head { flex-direction: column; align-items: stretch; } .q-head { align-items: flex-start; } .q-tools { width: 100%; justify-content: flex-end; } }