* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; background: #f4f6f9; color: #1f2430; }

header { background: #1f2937; color: #fff; padding: 14px 22px; display: flex; align-items: center; gap: 12px; }
header .logo { font-weight: 800; font-size: 17px; letter-spacing: -0.3px; }
header .logo span { color: #7dd3fc; }
header .badge { font-size: 11.5px; font-weight: 700; color: #bbf7d0; background: rgba(34, 197, 94, 0.18); border: 1px solid rgba(74, 222, 128, 0.45); padding: 4px 10px; border-radius: 999px; }
header .who { margin-left: auto; font-size: 12.5px; color: #cbd5e1; }

/* 헤더 오른쪽: 구글 연동 상태 */
header .gbox { display: flex; align-items: center; gap: 8px; flex: none; }
.gbadge { font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.gbadge.off { color: #cbd5e1; background: rgba(148, 163, 184, 0.18); border: 1px solid rgba(148, 163, 184, 0.45); }
.gbadge.on { color: #bbf7d0; background: rgba(34, 197, 94, 0.18); border: 1px solid rgba(74, 222, 128, 0.45); }
.gbadge.warn { color: #fed7aa; background: rgba(245, 158, 11, 0.22); border: 1px solid rgba(251, 191, 36, 0.55); } /* 구글 연결 만료 임박(D-2 이하) */
.gbtn { border: 1px solid #64748b; background: #334155; color: #e2e8f0; border-radius: 8px; padding: 6px 12px; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.gbtn:hover { background: #3f5168; }
.gbtn.main { background: #2c56a8; border-color: #2c56a8; color: #fff; }
.gbtn.main:hover { background: #244a94; }
.gbtn:disabled { opacity: 0.55; cursor: not-allowed; }

/* 1차 메뉴 (상단 탭 바) — 헤더와 이어지는 다크 톤 */
.menubar { background: #111827; display: flex; align-items: stretch; gap: 2px; padding: 0 18px; border-bottom: 1px solid #0b101b; }
.menu-tab { appearance: none; border: none; background: none; color: #9ca3af; font-family: inherit; font-size: 13.5px; font-weight: 700; padding: 11px 18px; cursor: pointer; border-bottom: 3px solid transparent; letter-spacing: -0.2px; }
.menu-tab:hover { color: #e2e8f0; }
.menu-tab.on { color: #fff; border-bottom-color: #7dd3fc; }

/* 2차 메뉴 (하위 탭) */
.submenubar { background: #fff; display: flex; align-items: stretch; gap: 2px; padding: 0 18px; border-bottom: 1px solid #e5e9f0; }
.sub-tab { appearance: none; border: none; background: none; color: #6b7280; font-family: inherit; font-size: 13px; font-weight: 600; padding: 10px 15px; cursor: pointer; border-bottom: 2px solid transparent; }
.sub-tab:hover { color: #1f2430; background: #f7f9fc; }
.sub-tab.on { color: #1650b8; border-bottom-color: #2c56a8; }

/* 페이지 컨테이너 — 활성 페이지만 표시 */
#pages > .page { display: none; }
#pages > .page.on { display: block; }

.wrap { display: flex; min-height: calc(100vh - 52px - 43px - 39px); }

/* 왼쪽: 작가 목록 */
aside { width: 230px; flex: none; background: #fff; border-right: 1px solid #e5e9f0; padding: 14px 12px; }
aside input { width: 100%; padding: 9px 12px; border: 1px solid #d7dde6; border-radius: 9px; font-size: 13.5px; margin-bottom: 12px; }
.artist { padding: 10px 12px; border-radius: 9px; cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 14.5px; margin-bottom: 2px; }
.artist:hover { background: #f1f5fb; }
.artist.on { background: #e8f1ff; font-weight: 700; color: #1650b8; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dot.g { background: #22c55e; } .dot.y { background: #f59e0b; } .dot.r { background: #cbd5e1; }
.legend { margin-top: 16px; font-size: 11.5px; color: #8a94a3; line-height: 1.9; padding: 0 6px; }
.no-artist { font-size: 13px; color: #98a1b0; padding: 8px 6px; }

/* 본문 */
main { flex: 1; min-width: 0; padding: 22px 26px; max-width: 860px; }
h1 { font-size: 21px; margin-bottom: 4px; }
.sub { color: #7b8494; font-size: 13px; margin-bottom: 4px; }
.privacy { color: #98a1b0; font-size: 11.5px; margin-bottom: 14px; }
.chips { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.chip { font-size: 12.5px; padding: 5px 11px; border-radius: 999px; background: #e8f7ee; color: #14803c; font-weight: 600; }
.chip.wait { background: #fdf0d8; color: #955d10; }
.chip.none { background: #eef1f6; color: #6b7280; }
.card { background: #fff; border: 1px solid #e5e9f0; border-radius: 14px; padding: 18px 20px; margin-bottom: 16px; }
.card h2 { font-size: 15px; margin-bottom: 13px; display: flex; align-items: center; gap: 8px; }
.h2sub { font-size: 12px; color: #98a1b0; font-weight: 400; }

/* 드롭존 */
.drop { border: 2px dashed #9db8e8; background: #f6f9ff; border-radius: 12px; padding: 30px 16px; text-align: center; cursor: pointer; transition: 0.15s; }
.drop:hover, .drop.over { background: #edf3ff; border-color: #5c8ae0; }
.drop .big { font-size: 15px; font-weight: 700; color: #2c56a8; margin-bottom: 5px; }
.drop .small { font-size: 12.5px; color: #7b8494; }
/* 수동 생성 카드 안의 작은 드롭 영역 (계약 없이 처리할 때 예비용) */
.yangdo-mini-title { margin-top: 16px; padding-top: 12px; border-top: 1px solid #eef1f6; }
.drop.mini { padding: 14px 12px; }
.drop.mini .big { font-size: 13.5px; margin-bottom: 3px; }
.drop.mini .small { font-size: 12px; }

/* 진행 단계 */
.steps { display: none; margin-top: 4px; }
.step { display: flex; align-items: center; gap: 10px; padding: 8px 4px; font-size: 14px; color: #98a1b0; }
.step .ic { width: 22px; height: 22px; border-radius: 50%; background: #eef1f6; display: flex; align-items: center; justify-content: center; font-size: 12px; flex: none; }
.step.doing { color: #1650b8; font-weight: 700; }
.step.doing .ic { background: #dbe8ff; }
.step.done { color: #14803c; }
.step.done .ic { background: #d9f2e3; }
.spin { display: inline-block; width: 12px; height: 12px; border: 2px solid #9db8e8; border-top-color: transparent; border-radius: 50%; animation: sp 0.8s linear infinite; }
@keyframes sp { to { transform: rotate(360deg); } }

/* 오류·안내 상자 */
.errbox { display: none; margin-top: 12px; background: #fdecec; border: 1px solid #f5b5b1; color: #a12622; border-radius: 10px; padding: 12px 14px; font-size: 13.5px; line-height: 1.6; }
.warnbox { display: none; margin-top: 12px; background: #fff7d6; border: 1px solid #eadb9a; color: #6b5d1f; border-radius: 10px; padding: 12px 14px; font-size: 13px; line-height: 1.7; }

/* 파일 목록 */
.file { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-bottom: 1px solid #f0f2f6; font-size: 14px; }
.file:last-child { border-bottom: none; }
.file .fi { flex: none; width: 30px; height: 30px; border-radius: 8px; background: #fde8e8; color: #c0392b; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; }
.file .fi.img { background: #e8f1ff; color: #2c56a8; }
.file .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file .dt { color: #98a1b0; font-size: 12px; flex: none; }
.file a.dl { border: 1px solid #d7dde6; background: #fff; border-radius: 8px; padding: 6px 12px; font-size: 12.5px; cursor: pointer; flex: none; color: #1f2430; text-decoration: none; }
.file a.dl:hover { background: #f1f5fb; }
.file.new { background: #f2fbf5; border-radius: 8px; animation: pop 0.5s; }
@keyframes pop { from { opacity: 0; transform: translateY(6px); } }
.empty { color: #98a1b0; font-size: 13.5px; padding: 14px 6px; }

/* 새 문서 만들기 */
.actions { display: flex; gap: 10px; flex-wrap: wrap; }
.actions button { border: 1px solid #d7dde6; background: #fff; border-radius: 10px; padding: 11px 16px; font-size: 13.5px; }
.actions button.main { background: #2c56a8; color: #fff; border-color: #2c56a8; cursor: pointer; }
.actions button.main:hover:not(:disabled) { background: #244a94; }
.actions button:disabled { opacity: 0.45; cursor: not-allowed; }
.actions button .spin { border-color: rgba(255, 255, 255, 0.6); border-top-color: transparent; vertical-align: -1px; }
.actions-note { margin-top: 10px; font-size: 12px; color: #98a1b0; }

/* 관리계약서 생성: 상시 안내줄 · 초안/최종 선택 · 결과 목록 */
.gen-note { background: #fff7d6; border: 1px solid #eadb9a; color: #6b5d1f; border-radius: 8px; padding: 9px 13px; font-size: 12.5px; font-weight: 700; margin-bottom: 12px; line-height: 1.5; }
/* 자체 엔진 안내줄 (작게) */
.engine-note { color: #98a1b0; font-size: 11.5px; margin: -6px 0 10px 2px; }
.gen-choice { display: flex; align-items: center; gap: 8px; margin-top: 12px; background: #f7f9fc; border: 1px solid #e5e9f0; border-radius: 10px; padding: 10px 14px; flex-wrap: wrap; }
.gen-choice-label { font-size: 13px; color: #4b5563; font-weight: 600; }
.gen-choice button { border: 1px solid #d7dde6; background: #fff; border-radius: 8px; padding: 8px 14px; font-size: 13px; cursor: pointer; }
.gen-choice button:hover { background: #f1f5fb; }
.gen-choice button.strong { background: #2c56a8; border-color: #2c56a8; color: #fff; }
.gen-choice button.strong:hover { background: #244a94; }
.addendum-panel { flex-direction: column; align-items: stretch; gap: 10px; }
.addendum-panel .ad-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.addendum-panel .ad-row .gen-choice-label { flex: none; width: 90px; }
/* 설명만 있는 줄은 라벨 폭(90px)에 갇히면 좁게 줄바꿈된다 → 한 줄 전체를 쓰게 */
.addendum-panel .ad-row.ad-note .gen-choice-label { width: auto; flex: 1; line-height: 1.5; }
.addendum-panel .ad-songs-row { align-items: flex-start; }
.addendum-panel .ad-songs { display: flex; flex-direction: column; gap: 5px; max-height: 180px; overflow-y: auto; padding: 2px 0; }
.addendum-panel .ad-nosong { font-size: 13px; color: #98a1b0; }
.addendum-panel input[type="date"] { padding: 7px 9px; border: 1px solid #d7dde6; border-radius: 8px; font-size: 13px; font-family: inherit; }
.gen-result { margin-top: 6px; }
.gen-file { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-bottom: 1px solid #f0f2f6; font-size: 13.5px; }
.gen-file:last-child { border-bottom: none; }
.gen-file .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gen-file a.dl { border: 1px solid #d7dde6; background: #fff; border-radius: 8px; padding: 6px 12px; font-size: 12.5px; cursor: pointer; flex: none; color: #1f2430; text-decoration: none; }
.gen-file a.dl:hover { background: #f1f5fb; }

/* 헤더 구글 연결 버튼 강조 (문서 생성 권한 추가가 필요할 때) */
.gbtn.attention { animation: gpulse 0.9s ease-in-out 4; box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.6); }
@keyframes gpulse { 50% { transform: scale(1.07); } }

/* 토스트 */
.toast { position: fixed; right: 20px; bottom: 20px; background: #16a34a; color: #fff; padding: 13px 18px; border-radius: 11px; font-size: 14px; box-shadow: 0 8px 24px rgba(0,0,0,0.18); display: none; max-width: 420px; z-index: 50; }

/* 시트 불러오기 결과 모달 */
.modal-back { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px; }
.modal { background: #fff; border-radius: 14px; padding: 20px 22px; max-width: 480px; width: 100%; max-height: 80vh; overflow-y: auto; box-shadow: 0 18px 50px rgba(0,0,0,0.25); }
.modal h3 { font-size: 16px; margin-bottom: 12px; }
.import-line { font-size: 14px; padding: 5px 2px; line-height: 1.6; }
.import-line.zero { color: #98a1b0; }
.import-details { margin-top: 10px; font-size: 12.5px; color: #6b7280; }
.import-details summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.import-details li { margin-left: 18px; line-height: 1.7; }
.modal-btns { margin-top: 16px; text-align: right; }
.modal-btns button { background: #2c56a8; color: #fff; border: 1px solid #2c56a8; border-radius: 8px; padding: 9px 22px; font-size: 13.5px; cursor: pointer; }
.modal-btns button:hover { background: #244a94; }

/* 작가 목록 역할 미니 배지 (사/곡/편, 미입력 ?) */
.rbadges { display: inline-flex; gap: 3px; margin-left: auto; flex: none; }
.rb { width: 16px; height: 16px; border-radius: 5px; background: #e8f1ff; color: #2c56a8; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.rb.none { background: #eef1f6; color: #98a1b0; }

/* 카드 제목 옆 작은 버튼 */
.hbtn { margin-left: auto; border: 1px solid #d7dde6; background: #fff; border-radius: 8px; padding: 6px 12px; font-size: 12.5px; cursor: pointer; color: #1f2430; font-weight: 400; }
.hbtn:hover { background: #f1f5fb; }

/* 작가 정보 카드 */
.info-row { display: flex; align-items: center; gap: 8px; padding: 6px 4px; font-size: 14px; flex-wrap: wrap; }
.info-label { flex: none; width: 52px; color: #98a1b0; font-size: 12.5px; }
.role-chip { font-size: 12.5px; padding: 4px 11px; border-radius: 999px; background: #e8f1ff; color: #2c56a8; font-weight: 600; }
.role-chip.none { background: #eef1f6; color: #6b7280; font-weight: 400; }

/* 인라인 입력 폼 (정보 수정 · 곡 추가) */
.inline-form { margin-top: 12px; background: #f7f9fc; border: 1px solid #e5e9f0; border-radius: 10px; padding: 12px 14px; }
.form-row { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; flex-wrap: wrap; }
.form-row:last-child { margin-bottom: 0; }
.form-label { flex: none; width: 60px; font-size: 12.5px; color: #6b7280; font-weight: 600; }
.form-row input[type="text"] { flex: 1; min-width: 160px; padding: 8px 11px; border: 1px solid #d7dde6; border-radius: 8px; font-size: 13.5px; }
.form-row input[type="date"] { padding: 7px 9px; border: 1px solid #d7dde6; border-radius: 8px; font-size: 13px; font-family: inherit; }
.form-row .tilde { color: #98a1b0; }
.ck { display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; cursor: pointer; }
.form-btns { margin-top: 4px; }
.form-btns .save { background: #2c56a8; color: #fff; border: 1px solid #2c56a8; border-radius: 8px; padding: 8px 18px; font-size: 13px; cursor: pointer; }
.form-btns .save:hover { background: #244a94; }
.form-btns .save:disabled { opacity: 0.5; cursor: not-allowed; }
.form-btns .cancel { background: #fff; border: 1px solid #d7dde6; border-radius: 8px; padding: 8px 14px; font-size: 13px; cursor: pointer; color: #1f2430; }
.form-btns .cancel:hover { background: #f1f5fb; }
.form-err { color: #a12622; font-size: 12.5px; margin-top: 8px; }
.form-err:empty { display: none; }

/* 작가 정보 카드: 도장 줄 */
.stamp-row { border-top: 1px dashed #eef1f6; margin-top: 4px; padding-top: 10px; }
.stamp-holder { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; }
.stamp-holder.none { color: #98a1b0; font-size: 13px; min-width: 0; }
.stamp-img { height: 44px; width: 44px; object-fit: contain; border: 1px solid #e5e9f0; border-radius: 8px; background: #fff; padding: 2px; }

/* 통합 작가 정보 카드: 이름 부분과 개인정보 부분 사이 옅은 구분선 */
.info-divider { border-top: 1px dashed #e5e9f0; margin: 6px 0 4px; }
/* 계약 정보 카드: 라벨이 조금 길다 (계약일(체결일)·퍼블리싱 분배율) */
.contract-card .pv-label { width: 110px; }

/* 📑 계약 카드: 진행 중 계약 목록 + 단계 진행 바 + 마법사 */
.hbtn.ct-new { background: #2c56a8; border-color: #2c56a8; color: #fff; font-weight: 600; }
.hbtn.ct-new:hover { background: #244a94; }
.hbtn.ct-new + .hbtn { margin-left: 6px; }
.ct-info-title { margin-top: 14px; padding-top: 10px; border-top: 1px dashed #eef1f6; }
.ct-item { border: 1px solid #dbe4f2; background: #f9fbff; border-radius: 11px; padding: 11px 14px; margin-bottom: 10px; }
.ct-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ct-kind { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: #e8f1ff; color: #1650b8; flex: none; }
.ct-kind.add { background: #f3e8ff; color: #7c3aed; }
.ct-title { font-size: 14px; font-weight: 700; }
.ct-date { font-size: 11.5px; color: #98a1b0; }
.ct-del { margin-left: auto; }
.ct-stages { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 9px 0 4px; font-size: 12.5px; }
.ct-dot { color: #98a1b0; white-space: nowrap; }
.ct-dot.done { color: #14803c; font-weight: 600; }
.ct-dot.cur { color: #1650b8; font-weight: 800; }
.ct-sep { color: #d7dde6; }
.ct-hint { font-size: 12.5px; color: #4b5563; margin: 2px 0 8px; line-height: 1.5; }
.ct-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ct-btn { border: 1px solid #d7dde6; background: #fff; border-radius: 8px; padding: 7px 13px; font-size: 12.5px; cursor: pointer; color: #1f2430; }
.ct-btn:hover { background: #f1f5fb; }
.ct-btn.strong { background: #2c56a8; border-color: #2c56a8; color: #fff; font-weight: 600; }
.ct-btn.strong:hover { background: #244a94; }
.ct-go { font-size: 12.5px; color: #2c56a8; text-decoration: none; font-weight: 600; }
.ct-go:hover { text-decoration: underline; }
/* 계약 카드 실행 버튼 진행 표시: 스피너·완료(✓)·잠금 */
.ct-btn:disabled, .contract-card .hbtn:disabled, .contract-card .row-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.ct-btn .spin { vertical-align: -1px; margin-right: 2px; }
.ct-btn.strong .spin, .form-btns .save .spin { border-color: rgba(255, 255, 255, 0.6); border-top-color: transparent; }
.ct-btn.ok, .form-btns .save.ok { background: #16a34a; border-color: #16a34a; color: #fff; font-weight: 600; opacity: 1; }
.ct-done-line { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #6b7280; padding: 6px 6px; border-bottom: 1px dashed #f0f2f6; }
.ct-done-line:last-child { border-bottom: none; }
.ct-done-line .ct-del { margin-left: auto; }
.ct-wizard { margin-top: 0; margin-bottom: 12px; }
.ctw-title { font-size: 13px; font-weight: 700; color: #1650b8; margin-bottom: 10px; }
.ctw-songs-row { align-items: flex-start; }
.ctw-songs { flex: 1; display: flex; flex-direction: column; gap: 5px; max-height: 160px; overflow-y: auto; padding: 2px 0; }
.ctw-nosong { font-size: 12.5px; color: #98a1b0; }
.ctw-newsongs { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.ctw-newrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ctw-newrow .ctw-title-in { width: 200px; padding: 7px 10px; border: 1px solid #d7dde6; border-radius: 8px; font-size: 13px; }
.ctw-hint { font-size: 12px; color: #98a1b0; margin: -3px 0 9px 110px; line-height: 1.5; }

/* 작가 정보 카드: 개인자료 부분 */
.pv-section { border-top: 1px dashed #eef1f6; margin-top: 8px; padding-top: 10px; }
.pv-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.pv-title { font-size: 13px; font-weight: 700; color: #4b5563; }
.pv-note { background: #fff7d6; border: 1px solid #eadb9a; color: #6b5d1f; border-radius: 8px; padding: 9px 13px; font-size: 12.5px; font-weight: 700; margin-bottom: 8px; line-height: 1.5; }
.pv-row { display: flex; align-items: center; gap: 8px; padding: 5px 4px; font-size: 14px; flex-wrap: wrap; }
.pv-label { flex: none; width: 100px; color: #98a1b0; font-size: 12.5px; }
.pv-none { color: #98a1b0; font-size: 13px; }
.pv-btns { margin-top: 10px; }
.pv-btns .row-btn { margin-left: 0; margin-right: 6px; }
.pv-form-label { width: 100px; }

/* 문서함: 업무 단계별 드라이브 서류 + 이 컴퓨터 결과물 */
.docs-title { font-size: 13px; font-weight: 700; color: #4b5563; margin: 2px 0 6px; }
.docs-title.local { margin-top: 16px; padding-top: 12px; border-top: 1px solid #eef1f6; }
.docs-loading { display: flex; align-items: center; gap: 8px; color: #7b8494; font-size: 13px; padding: 10px 4px; }
.drive-link-row { padding: 2px 4px 8px; font-size: 12.5px; }
.drive-link-row a { color: #2c56a8; text-decoration: none; font-weight: 600; }
.drive-link-row a:hover { text-decoration: underline; }
.dgroup { margin-bottom: 10px; border: 1px solid #eef1f6; border-radius: 10px; padding: 6px 10px 4px; }
.dgroup-head { display: flex; align-items: baseline; gap: 8px; padding: 4px 2px 4px; flex-wrap: wrap; }
.dgroup-title { font-size: 13px; font-weight: 700; color: #4b5563; }
.dgroup-desc { font-size: 11.5px; color: #98a1b0; }
.dgroup-go { margin-left: auto; font-size: 12px; color: #2c56a8; text-decoration: none; font-weight: 600; flex: none; }
.dgroup-go:hover { text-decoration: underline; }

/* 문서함 배지: 초안(회색)·최종(파랑)·날인본(초록)·V번호·문서종류 */
.doc-badge { display: inline-block; flex: none; margin-right: 5px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 1.6; vertical-align: 1px; white-space: nowrap; }
.doc-badge.b-draft { background: #eceff3; color: #6b7484; }
.doc-badge.b-final { background: #e3edff; color: #2c56a8; }
.doc-badge.b-stamp { background: #e2f5e8; color: #1e7d43; }
.doc-badge.b-ver { background: #fff; color: #6b7484; border: 1px solid #d7dde6; padding: 0 6px; font-weight: 700; }
.doc-badge.b-type { background: #f6f2e8; color: #8a6d1f; }

/* 이전 버전 접기 */
.ver-toggle { display: block; width: 100%; text-align: left; border: none; background: none; color: #7b8494; font-size: 12px; font-weight: 600; cursor: pointer; padding: 4px 8px 6px 48px; }
.ver-toggle:hover { color: #2c56a8; }
.old-versions .file { opacity: 0.75; background: #fafbfc; }
.old-versions .file .nm { font-size: 13px; }
.empty.small { padding: 4px 8px; font-size: 12.5px; }

/* 「다음 할 일」 안내줄 (작가 상태 기반) */
.next-todo { background: #eef6ff; border: 1px solid #bdd7f5; color: #1650b8; border-radius: 9px; padding: 10px 13px; font-size: 13px; font-weight: 600; margin-bottom: 12px; line-height: 1.5; }
.next-todo.done { background: #eefaf2; border-color: #bfe8cd; color: #14803c; }

/* 안내 링크로 이동한 생성 버튼/드롭존 강조 */
.flash { animation: gpulse 0.8s ease-in-out 3; box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.55); }

/* 관리 중인 곡 표 */
.table-wrap { overflow-x: auto; }
.songs-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.songs-table th { text-align: left; font-size: 12px; color: #98a1b0; font-weight: 600; padding: 6px 8px; border-bottom: 1px solid #e5e9f0; white-space: nowrap; }
.songs-table td { padding: 9px 8px; border-bottom: 1px solid #f0f2f6; vertical-align: top; }
.songs-table tbody tr:last-child td { border-bottom: none; }
.st-title { font-weight: 700; }
.st-note { font-weight: 400; font-size: 12px; color: #98a1b0; margin-top: 2px; }
.st-none { color: #98a1b0; font-size: 12.5px; }
.st-roles { white-space: nowrap; }
.st-period { white-space: nowrap; color: #4b5563; }
.remain { font-weight: 700; font-size: 12.5px; white-space: nowrap; }
.remain.ok { color: #14803c; }
.remain.soon { color: #b45309; }
.remain.over { color: #c0392b; }
.st-btns { white-space: nowrap; text-align: right; }
.row-btn { border: 1px solid #d7dde6; background: #fff; border-radius: 7px; padding: 5px 10px; font-size: 12px; cursor: pointer; color: #1f2430; margin-left: 4px; }
.row-btn:hover { background: #f1f5fb; }
.row-btn.del { color: #c0392b; border-color: #eecfcb; }
.row-btn.del:hover { background: #fdf1f0; }

/* 곡 수정 폼 — 신고서 정보 (KOMCA 저작물 신고서용) */
.report-box { margin: 4px 0 10px; border: 1px solid #e5e9f0; border-radius: 8px; background: #fff; padding: 0 10px; }
.report-box summary { cursor: pointer; font-size: 13px; font-weight: 600; color: #4b5563; padding: 8px 2px; }
.report-box[open] summary { border-bottom: 1px dashed #e5e9f0; margin-bottom: 9px; }
.report-box .form-row:last-of-type { margin-bottom: 9px; }
.creators-row { align-items: flex-start; }
.creators-box { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.creator-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.creator-line select { padding: 6px 8px; border: 1px solid #d7dde6; border-radius: 7px; font-size: 13px; font-family: inherit; }
.creator-line input { padding: 6px 9px; border: 1px solid #d7dde6; border-radius: 7px; font-size: 13px; }
.creator-line .cr-name { width: 130px; }
.creator-line .cr-code { width: 110px; }
.creator-line .cr-share { width: 64px; }
.creators-empty { font-size: 12.5px; color: #98a1b0; }
.paste-box { margin: 4px 0 10px; }
.paste-box textarea { width: 100%; box-sizing: border-box; border: 1px solid #d7dde6; border-radius: 8px; padding: 9px 11px; font-size: 12.5px; font-family: inherit; resize: vertical; }
.paste-ok { color: #14803c; }
#kmSong { padding: 7px 9px; border: 1px solid #d7dde6; border-radius: 8px; font-size: 13px; font-family: inherit; max-width: 280px; }

/* 작가 표 붙여넣기 등록 ([표로 추가]) */
.aside-btns { margin-bottom: 10px; }
.aside-btns button { width: 100%; border: 1px dashed #9db8e8; background: #f6f9ff; color: #2c56a8; border-radius: 9px; padding: 8px 10px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.aside-btns button:hover { background: #edf3ff; }
.bulk-modal { max-width: 760px; }
.bulk-help { font-size: 12.5px; color: #6b7280; line-height: 1.7; margin-bottom: 10px; }
.bulk-modal textarea { width: 100%; box-sizing: border-box; border: 1px solid #d7dde6; border-radius: 8px; padding: 9px 11px; font-size: 12.5px; font-family: inherit; resize: vertical; }
.bulk-btns { text-align: left; display: flex; gap: 8px; margin-top: 10px; }
.bulk-btns .bulk-cancel { background: #fff; border: 1px solid #d7dde6; color: #1f2430; margin-left: auto; }
.bulk-btns .bulk-cancel:hover { background: #f1f5fb; }
#bulkPreview { margin-top: 12px; }
.bulk-table td, .bulk-table th { font-size: 12.5px; white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.bulk-kind { font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: #eef1f6; color: #6b7280; }
.bulk-kind.new { background: #e8f7ee; color: #14803c; }
.bulk-keep { color: #b45309; font-size: 12px; font-weight: 600; }
.bulk-note { margin-top: 8px; font-size: 12px; color: #6b7280; }

/* [작가 추가] 모달 — 방식 전환 탭 + 직접 입력 폼 */
.bulk-tabs { display: flex; gap: 4px; border-bottom: 1px solid #e5e9f0; margin-bottom: 14px; }
.bulk-tab { appearance: none; border: none; background: none; color: #6b7280; font-family: inherit; font-size: 13px; font-weight: 600; padding: 9px 14px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.bulk-tab:hover { color: #1f2430; background: #f7f9fc; }
.bulk-tab.on { color: #1650b8; border-bottom-color: #2c56a8; }
#directPane .form-label { width: 110px; }
#directPane .form-label .req { color: #a12622; font-weight: 700; }
#directPane .bulk-help { margin-top: 4px; }

/* ── 문서 만들기 4택 (2026-08-27) ─────────────────────────────── */
.doc-pick-label { font-size: 12.5px; font-weight: 700; color: #4b5563; margin: 12px 0 8px; }
/* 4칸이라 auto-fit 을 쓰면 3+1 로 어색하게 갈라진다 → 2x2 또는 1x4 로만 놓는다 */
.doc-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 1180px) { .doc-pick { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.doc-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  padding: 14px; text-align: left; cursor: pointer;
  border-radius: 12px; border: 1px solid #d7dde6; background: #fff; color: #1f2430;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.doc-tile:hover { border-color: #2c56a8; background: #f7f9fc; }
.doc-tile.on { border-color: #2c56a8; background: #eef3fc; box-shadow: 0 0 0 2px rgba(44,86,168,0.18); }
.doc-tile .dt-ic { font-size: 21px; line-height: 1; }
.doc-tile .dt-name { font-size: 14px; font-weight: 800; color: #1f2430; }
.doc-tile .dt-desc { font-size: 11.5px; font-weight: 400; color: #6b7280; line-height: 1.5; }

/* ── 곡 고르기(검색형) ─────────────────────────────────────────── */
.song-pick-wrap { flex: 1; min-width: 240px; }
.sp { display: flex; flex-direction: column; gap: 7px; }
.sp-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 24px; }
.sp-empty { font-size: 12.5px; color: #9aa3b0; }
.sp-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 5px 4px 10px;
  border-radius: 999px; font-size: 12.5px; font-weight: 600;
  color: #1e40af; background: #eef3fc; border: 1px solid #c7d7f0;
}
.sp-chip.isnew { color: #92400e; background: #fef6e7; border-color: #f3d9a4; }
.sp-x { border: 0; background: transparent; cursor: pointer; padding: 0 3px; color: inherit; opacity: .6; font-size: 15px; line-height: 1; }
.sp-x:hover { opacity: 1; }
.sp-input-wrap { position: relative; }
.sp-input {
  width: 100%; box-sizing: border-box; padding: 8px 11px; font-size: 13.5px;
  border: 1px solid #d7dde6; border-radius: 8px; background: #fff; color: #1f2430;
  font-family: inherit;
}
.sp-input:focus { outline: none; border-color: #2c56a8; box-shadow: 0 0 0 2px rgba(44,86,168,0.12); }
.sp-menu {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px);
  max-height: 264px; overflow-y: auto; padding: 4px;
  border: 1px solid #d7dde6; border-radius: 10px; background: #fff;
  box-shadow: 0 10px 26px rgba(31,36,48,0.14);
}
.sp-opt {
  display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
  padding: 7px 9px; border: 0; border-radius: 7px; cursor: pointer;
  background: transparent; color: #1f2430; font-family: inherit;
}
.sp-opt:hover { background: #f1f5fb; }
.sp-opt-title { font-size: 13.5px; font-weight: 700; }
.sp-opt-sub { font-size: 11.5px; color: #6b7280; }
.sp-opt-new { color: #92400e; font-size: 12.5px; font-weight: 600; }

/* 곡 고르기가 든 줄은 위아래로 여유를 준다 (후보 목록이 겹치지 않게) */
.ad-songs-row, .ctw-songs-row { align-items: flex-start; }

/* 고른 곡을 담아 두는 숨은 체크박스 자리.
   .ad-songs / .ctw-songs 에 display:flex 가 걸려 있어서 hidden 속성만으로는 안 숨는다. */
.ad-songs[hidden], .ctw-songs[hidden] { display: none; }

/* 곡 폼 안내 문구 (별지 저작자 설명 등) */
.form-hint { font-size: 12px; color: #6b7280; line-height: 1.5; flex: 1; min-width: 200px; }
.credits-head { margin-top: 6px; }

/* ── 아직 등록되지 않은 곡: 그 자리에서 정보 받기 (2026-08-27) ───── */
.newsongs { display: none; margin-top: 10px; }
.newsong-head { font-size: 12px; font-weight: 700; color: #92400e; background: #fef6e7;
  border: 1px solid #f3d9a4; border-radius: 8px; padding: 7px 10px; margin-bottom: 8px; }
.newsong { border: 1px solid #e5e9f0; border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; background: #fbfcfe;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.newsong .ns-title { grid-column: 1 / -1; font-size: 13px; font-weight: 800; color: #1f2430; }
.ns-field { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ns-field.wide { grid-column: 1 / -1; }
.ns-label { flex: none; width: 46px; font-size: 12.5px; color: #4b5563; font-weight: 600; }
.ns-field input { flex: 1; min-width: 0; padding: 7px 10px; font-size: 13px;
  border: 1px solid #d7dde6; border-radius: 8px; background: #fff; color: #1f2430; font-family: inherit; }
.ns-field input:focus { outline: none; border-color: #2c56a8; }

/* ── 퍼블리싱 · 전체 관리곡 (2026-08-27) ─────────────────────── */
/* ⚠️ .songs-table 은 작가 화면의 곡 표가 이미 쓰고 있어 cat- 로 따로 둔다 */
.songs-wrap main { max-width: 1180px; margin: 0 auto; padding: 18px 22px; width: 100%; }
.cat-table { margin-top: 10px; border: 1px solid #e5e9f0; border-radius: 10px; overflow: hidden; }
.cat-row { display: grid; grid-template-columns: 1.4fr 1fr 0.8fr 1.6fr 2.4fr auto;
  gap: 10px; align-items: center; padding: 9px 12px; border-bottom: 1px solid #eef1f6; font-size: 13px; }
.cat-row:last-child { border-bottom: 0; }
.cat-row.head { background: #f7f9fc; font-weight: 700; font-size: 12px; color: #4b5563; }
.cat-row.on { background: #eef3fc; }
.cat-row > span { min-width: 0; overflow-wrap: anywhere; }
.cat-row .st-title { font-weight: 700; }
.cat-row .st-who, .cat-row .st-cred { font-size: 12px; color: #4b5563; line-height: 1.45; }
.cat-row .warn { color: #92400e; }
.part-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 10px; border: 1px solid #e5e9f0; border-radius: 8px; margin-bottom: 6px; background: #fbfcfe; }
.part-row .part-name { font-weight: 700; font-size: 13px; min-width: 74px; }
.part-row .part-note { flex: 1; min-width: 140px; padding: 6px 9px; font-size: 12.5px;
  border: 1px solid #d7dde6; border-radius: 7px; font-family: inherit; }
.row-btn.danger { color: #b91c1c; border-color: #f0c9c9; }
.row-btn.danger:hover { background: #fdf1f1; }

/* 문서함 삭제 버튼 — 눈에 덜 띄게, 실수 방지는 확인창이 담당 */
.dl.del { border: 0; background: transparent; cursor: pointer; color: #b91c1c; opacity: .55; font-size: 12px; padding: 2px 6px; }
.dl.del:hover { opacity: 1; text-decoration: underline; }
.dl.del:disabled { opacity: .3; cursor: default; }

/* ── 서류함 전용 화면 (2026-08-28 대개편) ──────────────────────
   왼쪽 작가 / 가운데 문서 / 오른쪽 미리보기 — 화면 높이를 꽉 쓴다 */
.docs3 {
  display: grid; grid-template-columns: 200px minmax(340px, 1fr) minmax(380px, 1.2fr);
  gap: 0; height: calc(100vh - 110px); background: #fff;
  border-top: 1px solid #e5e9f0;
}
.d3-artists { border-right: 1px solid #e5e9f0; overflow-y: auto; padding: 10px; background: #fbfcfe; }
.d3-artists input {
  width: 100%; box-sizing: border-box; padding: 8px 10px; margin-bottom: 8px;
  border: 1px solid #d7dde6; border-radius: 8px; font-size: 13px; font-family: inherit;
}
.dp-artist {
  display: block; width: 100%; text-align: left; padding: 7px 10px; margin-bottom: 2px;
  border: 0; border-radius: 7px; background: transparent; cursor: pointer;
  font-size: 13.5px; color: #1f2430; font-family: inherit;
}
.dp-artist:hover { background: #f1f5fb; }
.dp-artist.on { background: #2c56a8; color: #fff; font-weight: 700; }

.d3-files { border-right: 1px solid #e5e9f0; overflow-y: auto; padding: 12px 14px; }
.d3-files-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
  font-size: 15px; font-weight: 800;
}
.d3-files-head #dpDriveLink { font-size: 12px; font-weight: 400; color: #2c56a8; }
.d3-files-head .hbtn { margin-left: auto; }
.dp-group { font-size: 12.5px; font-weight: 800; color: #4b5563; margin: 14px 0 6px; }
.dp-group:first-of-type { margin-top: 2px; }
.dp-file {
  display: flex; align-items: center; gap: 8px; padding: 7px 9px;
  border-radius: 8px; cursor: pointer; font-size: 13px;
}
.dp-file:hover { background: #f1f5fb; }
.dp-file.on { background: #eef3fc; box-shadow: 0 0 0 1px #c7d7f0 inset; }
/* 제목은 자르지 않는다 — 길면 줄바꿈 (2026-08-28 사장님 "제목이 짤리잖아") */
.dp-file .nm { flex: 1; min-width: 0; overflow-wrap: anywhere; line-height: 1.45; }
.dp-file .dt { flex: none; font-size: 11.5px; color: #9aa3b0; }
.dp-file .dl { flex: none; font-size: 12px; }
.dp-extra { margin: 2px 0 6px; }
.dp-extra summary { font-size: 12px; color: #6b7280; cursor: pointer; padding: 4px 9px; }
.dp-extra summary:hover { color: #2c56a8; }

.d3-preview { display: flex; flex-direction: column; overflow: hidden; }
.d3-preview-head {
  flex: none; padding: 10px 14px; font-size: 13px; font-weight: 700;
  border-bottom: 1px solid #e5e9f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.d3-preview-body { flex: 1; min-height: 0; background: #f0f2f6; position: relative; }
.dp-frame { width: 100%; height: 100%; border: 0; display: block; }
.d3-preview-empty {
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: 8px;
  align-items: center; justify-content: center; color: #9aa3b0; font-size: 14px;
  text-align: center; line-height: 1.7;
}
.d3-preview-empty .dl.big {
  font-size: 14px; font-weight: 700; color: #2c56a8; border: 1px solid #c7d7f0;
  border-radius: 8px; padding: 8px 14px; background: #fff; text-decoration: none;
}

/* 좁은 화면: 미리보기를 아래로 */
@media (max-width: 1080px) {
  .docs3 { grid-template-columns: 170px 1fr; grid-template-rows: 1fr 45vh; height: auto; }
  .d3-artists { grid-row: 1 / 3; }
  .d3-preview { grid-column: 2; border-top: 1px solid #e5e9f0; }
}

/* ── 문서함 카드 2열: 목록 | 미리보기 (2026-08-28) ───────────── */
.docs2 { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(320px, 1.1fr); gap: 0;
  height: 62vh; min-height: 420px; border: 1px solid #e5e9f0; border-radius: 10px; overflow: hidden; }
.docs2-list { overflow-y: auto; padding: 8px 10px; border-right: 1px solid #e5e9f0; }
.docs2-preview { display: flex; flex-direction: column; min-width: 0; background: #f0f2f6; }
@media (max-width: 980px) { .docs2 { grid-template-columns: 1fr; grid-template-rows: 1fr 45vh; height: auto; } .docs2-list { border-right: 0; border-bottom: 1px solid #e5e9f0; } }
#dpDriveLink { margin-left: 8px; font-weight: 400; }

/* ── 신분증 직접 가리기 모달 (2026-08-28) ─────────────────────── */
.mask-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(15,23,42,0.55);
  display: flex; align-items: center; justify-content: center; padding: 24px; }
.mask-overlay[hidden] { display: none; }
.mask-box { background: #fff; border-radius: 14px; max-width: 860px; width: 100%;
  max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; }
.mask-head { padding: 12px 16px; font-size: 13.5px; border-bottom: 1px solid #e5e9f0; }
.mask-stage { position: relative; overflow: auto; background: #f0f2f6; flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center; padding: 10px; }
.mask-stage img { max-width: 100%; max-height: 62vh; display: block; user-select: none; -webkit-user-drag: none; }
.mask-stage canvas { position: absolute; cursor: crosshair; touch-action: none; }
.mask-btns { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid #e5e9f0; }
.mask-btns .save { margin-left: auto; }
.mask-count { font-size: 12.5px; color: #6b7280; }

/* 리드 창고 월별 묶음 머리 (2026-09-25) */
.lh-month{margin:14px 2px 6px;font-size:13px;font-weight:700;color:var(--ink,#111)}
.lh-month:first-child{margin-top:4px}