/* ═══════════════════════════════════════════════════════════════
   INHOUSE 테마 (2026-09-04 리디자인 1단계 — 사장님 확정 v3 톤)
   style.css 뒤에 로드되어 색·형태만 덮어쓴다. 기능·배치는 그대로.
   빼면 예전 모습으로 돌아간다(롤백 = index.html 에서 이 파일 한 줄 제거).
   톤: 배경 #f2f4f6 · 잉크 #191f28 · 포인트 #3182f6 · 라운드 14~20px
   ═══════════════════════════════════════════════════════════════ */

body { background: #f2f4f6; color: #191f28; letter-spacing: -0.2px; }

/* ── 헤더: 다크 → 화이트 + 실제 로고 ─────────────────────────── */
header { background: #fff; color: #191f28; border-bottom: 1px solid #eceef1; padding: 13px 22px; }
header .logo img { height: 22px; display: block; }
header .badge { display: none; } /* '1단계 · 내 컴퓨터에서 실행 중' — 이제 사실도 아니다 */
header .who { color: #8b95a1; font-size: 12px; font-weight: 600; }

.gbadge { font-size: 12px; padding: 5px 12px; }
.gbadge.on { color: #0aa06e; background: #e5f9ef; border: 0; }
.gbadge.off { color: #6b7684; background: #f2f4f6; border: 0; }
.gbadge.warn { color: #e8710a; background: #fef3e0; border: 0; }
.gbtn { border: 0; background: #f2f4f6; color: #191f28; border-radius: 10px; padding: 8px 14px; font-weight: 700; }
.gbtn:hover { background: #e8eaee; }
.gbtn.main { background: #3182f6; color: #fff; }
.gbtn.main:hover { background: #2272e6; }

/* ── 메뉴: 다크 탭바 → 화이트 필 탭 ──────────────────────────── */
.menubar { background: #fff; border-bottom: 0; padding: 2px 16px 8px; gap: 4px; }
.menu-tab { color: #6b7684; border-bottom: 0; border-radius: 10px; padding: 9px 16px; font-size: 14px; }
.menu-tab:hover { color: #191f28; background: #f2f4f6; }
.menu-tab.on { color: #191f28; background: #f2f4f6; border-bottom-color: transparent; }
.submenubar { background: transparent; border-bottom: 0; padding: 10px 18px 0; }
.sub-tab { color: #8b95a1; border-bottom: 0; border-radius: 99px; padding: 7px 14px; font-weight: 700; }
.sub-tab:hover { background: #e8eaee; color: #191f28; }
.sub-tab.on { color: #fff; background: #191f28; border-bottom-color: transparent; }

/* ── 왼쪽 작가 목록 ──────────────────────────────────────────── */
aside { border-right: 0; background: transparent; padding: 16px 14px; }
aside input { border: 0; background: #fff; border-radius: 12px; padding: 11px 14px;
  box-shadow: 0 2px 8px rgba(25,31,40,.05); }
aside input:focus { outline: 2px solid #3182f6; }
.artist { border-radius: 11px; }
.artist:hover { background: #e8eaee; }
.artist.on { background: #191f28; color: #fff; }
.artist.on .dot { outline: 2px solid rgba(255,255,255,.35); }

/* ── 카드 ───────────────────────────────────────────────────── */
.card { border: 0; border-radius: 18px; box-shadow: 0 2px 10px rgba(25,31,40,.05);
  padding: 22px 24px; margin-bottom: 18px; }
.card h2 { font-size: 16px; letter-spacing: -0.4px; }
.h2sub { color: #adb5bd; }

/* ── 버튼 일괄 ───────────────────────────────────────────────── */
.actions button, .gen-choice button, .row-btn, .hbtn,
.newsong .ns-save, .cat-actions button, .mask-btns button {
  border: 0; background: #f2f4f6; color: #191f28; border-radius: 11px; font-weight: 700; cursor: pointer;
}
.actions button:hover, .gen-choice button:hover, .row-btn:hover, .hbtn:hover { background: #e8eaee; }
.actions button.main, .gen-choice button.strong, .mask-btns .save {
  background: #3182f6; color: #fff;
}
.actions button.main:hover:not(:disabled), .gen-choice button.strong:hover, .mask-btns .save:hover { background: #2272e6; }
.hbtn.ct-new { background: #3182f6; color: #fff; }
.hbtn.ct-new:hover { background: #2272e6; }

/* ── 칩·배지 파스텔 알약 ─────────────────────────────────────── */
.chip { font-weight: 700; }
.chip { background: #e5f9ef; color: #0aa06e; }
.chip.wait { background: #fef3e0; color: #e8710a; }
.chip.none { background: #f2f4f6; color: #8b95a1; }

/* ── 문서함 파일 행 — 라운드 행 스타일 ───────────────────────── */
.dp-file { border-radius: 12px; padding: 9px 12px; }
.dp-file:hover { background: #f2f4f6; }
.dp-file.on { background: #eef4fe; box-shadow: none; }
.dp-file .dl { border: 0; background: #f2f4f6; border-radius: 9px; font-weight: 700; }
.dp-file .dl:hover { background: #e8eaee; }
.dp-group { color: #8b95a1; font-size: 12px; letter-spacing: .4px; }

/* ── 문서 배지(초안/최종/날인본 등) 파스텔 ────────────────────── */
.dbadge, .doc-badge { border-radius: 99px; }

/* ── 전체 관리곡 표 ──────────────────────────────────────────── */
.cat-table th { background: transparent; color: #8b95a1; border-bottom: 1px solid #eceef1; font-size: 12px; }
.cat-row:hover { background: #f7f8fa; }

/* ── 곡 고르기 칩 ────────────────────────────────────────────── */
.sp-chip { border-radius: 99px; background: #eef4fe; color: #1f5bd8; border: 0; font-weight: 700; }

/* ── 문서 타일 (KOMCA 서류) ──────────────────────────────────── */
.doc-tile { border: 0; border-radius: 16px; background: #f7f8fa; }
.doc-tile:hover { background: #eef4fe; }
.doc-tile.on { outline: 2px solid #3182f6; background: #eef4fe; }

/* ── 패널·안내 상자 ─────────────────────────────────────────── */
.gen-choice, .addendum-panel { border: 0; background: #f7f8fa; border-radius: 14px; }
.gen-note { border: 0; background: #fef3e0; color: #b45309; border-radius: 12px; }
.errbox { border: 0; background: #fdecec; border-radius: 12px; }
.warnbox { border: 0; background: #fef3e0; border-radius: 12px; }
.next-todo { border-radius: 14px; }

/* ── 진행중/모달 ─────────────────────────────────────────────── */
.mask-box { border-radius: 20px; }
.docs2 { border: 0; }

/* ── 스크롤바(웹킷) — 은은하게 ───────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #d5d9de; border-radius: 99px; border: 2px solid #f2f4f6; }
::-webkit-scrollbar-track { background: transparent; }

/* ═══ 2026-09-04 구조 개편: 홈·계약·KOMCA·설정·작가 탭 ═══════════ */

.home-wrap { max-width: 1080px; margin: 0 auto; padding: 28px 24px; }
.pg-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.pg-head h1 { font-size: 22px; letter-spacing: -0.5px; }

/* 홈 히어로 */
.hero { background: linear-gradient(120deg, #3182f6 0%, #5f4ef0 55%, #8b46e8 100%);
  border-radius: 22px; padding: 32px 36px; color: #fff; position: relative;
  box-shadow: 0 12px 32px rgba(49,130,246,.22); }
.hero h1 { font-size: 24px; font-weight: 800; letter-spacing: -0.6px; line-height: 1.35; }
.hero-search { display: flex; align-items: center; background: #fff; border-radius: 15px;
  overflow: hidden; margin-top: 20px; box-shadow: 0 4px 14px rgba(0,0,0,.12); max-width: 620px; }
.hs-ic { padding-left: 17px; font-size: 15px; color: #8b95a1; }
.hero-search input { flex: 1; border: 0; padding: 15px 13px; font-size: 15px; outline: 0;
  color: #191f28; font-family: inherit; background: transparent; }
.hero-search input::placeholder { color: #adb5bd; }
.hero-results { background: #fff; border-radius: 16px; margin-top: 10px; max-width: 620px;
  box-shadow: 0 10px 30px rgba(0,0,0,.16); padding: 8px; position: relative; z-index: 5; }
.hr-head { font-size: 11.5px; font-weight: 800; color: #adb5bd; padding: 8px 12px 4px; letter-spacing: .4px; }
.hr-row { display: block; width: 100%; text-align: left; border: 0; background: transparent;
  padding: 10px 12px; border-radius: 10px; font-size: 14px; cursor: pointer; font-family: inherit; color: #191f28; }
.hr-row:hover { background: #f2f4f6; }
.hr-row span { color: #8b95a1; font-size: 12.5px; margin-left: 6px; }
.hr-empty { padding: 14px; font-size: 13.5px; color: #8b95a1; }

/* 현황 통계 */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 22px 0; }
.stat { background: #fff; border: 0; border-radius: 18px; padding: 20px 22px; text-align: left;
  box-shadow: 0 2px 10px rgba(25,31,40,.05); cursor: pointer; transition: .15s; font-family: inherit; }
.stat:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(25,31,40,.09); }
.s-ic { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center;
  justify-content: center; font-size: 18px; margin-bottom: 12px; }
.i-blue { background: #e8f1fe; } .i-purple { background: #f1edfe; }
.i-amber { background: #fef3e0; } .i-green { background: #e5f9ef; }
.stat .n { font-size: 26px; font-weight: 800; letter-spacing: -1px; display: block; color: #191f28; }
.stat .n small { font-size: 13px; color: #8b95a1; font-weight: 600; margin-left: 2px; }
.stat .l { font-size: 13px; color: #6b7684; margin-top: 2px; font-weight: 600; display: block; }
.stat.warn .n { color: #e8710a; } .stat.ok .n { color: #0aa06e; }

/* 바로가기 타일 */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.tile { background: #fff; border: 2px solid transparent; border-radius: 18px; padding: 22px;
  cursor: pointer; box-shadow: 0 2px 10px rgba(25,31,40,.05); transition: .15s;
  text-align: left; font-family: inherit; color: #191f28; }
.tile:hover { border-color: #3182f6; transform: translateY(-2px); }
.t-ic { width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center;
  justify-content: center; font-size: 21px; }
.tile b { display: block; margin: 13px 0 5px; font-size: 15.5px; letter-spacing: -0.4px; }
.tile > span:not(.t-ic):not(.go) { font-size: 13px; color: #6b7684; line-height: 1.6; display: block; }
.tile .go { margin-top: 12px; font-size: 13px; color: #3182f6; font-weight: 800; display: block; }

/* 계약 현황 행 */
.ct-filter { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.fchip { border: 0; background: #fff; color: #6b7684; border-radius: 99px; padding: 8px 15px;
  font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit;
  box-shadow: 0 1px 6px rgba(25,31,40,.05); }
.fchip:hover { color: #191f28; }
.fchip.on { background: #191f28; color: #fff; }
.ct-row { display: flex; align-items: center; gap: 14px; width: 100%; border: 0;
  background: transparent; padding: 13px 16px; border-radius: 12px; cursor: pointer;
  font-family: inherit; font-size: 14px; text-align: left; color: #191f28; }
.ct-row:hover { background: #f2f4f6; }
.ct-row .ct-a { font-weight: 700; flex: none; min-width: 76px; }
.ct-row .ct-s { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #4b5563; }
.ct-row .ct-t { flex: none; font-size: 12px; color: #8b95a1; font-weight: 600; }
.tag { font-size: 11.5px; font-weight: 800; padding: 4px 11px; border-radius: 99px; flex: none; }
.tag.done { background: #e5f9ef; color: #0aa06e; }
.tag.wait { background: #fef3e0; color: #e8710a; }
.act-mini { flex: none; font-size: 12.5px; color: #fff; background: #3182f6; font-weight: 700;
  padding: 7px 13px; border-radius: 10px; }

/* 설정 */
.set-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.set-info { font-size: 13px; color: #6b7684; line-height: 1.8; background: #f7f8fa;
  border-radius: 13px; padding: 13px 16px; margin-bottom: 13px; }
.set-info b { color: #191f28; }
.set-btns { display: flex; gap: 8px; }
.set-btns .set-main { background: #3182f6; color: #fff; }
.set-btns .set-main:hover { background: #2272e6; }

/* 작가 상세 탭 */
.atabs { display: flex; gap: 4px; margin: 4px 0 18px; background: #fff; border-radius: 14px;
  padding: 5px; box-shadow: 0 2px 10px rgba(25,31,40,.05); width: fit-content; }
.atab { border: 0; background: transparent; color: #6b7684; border-radius: 10px;
  padding: 9px 18px; font-size: 13.5px; font-weight: 700; cursor: pointer; font-family: inherit; }
.atab:hover { color: #191f28; background: #f2f4f6; }
.atab.on { background: #191f28; color: #fff; }

/* 서류함 3열 페이지 미세 조정 (기존 .docs3 스타일 재사용) */
#page-docs .docs3 { height: calc(100vh - 128px); border-top: 0; border-radius: 18px;
  overflow: hidden; margin: 16px 20px; box-shadow: 0 2px 10px rgba(25,31,40,.05);
  grid-template-columns: 210px 1fr; }

@media (max-width: 900px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .tiles { grid-template-columns: 1fr; }
  .set-grid { grid-template-columns: 1fr; }
}

/* 작가 카드의 곡 표 — 열 정렬 정돈 (2026-09-11) */
.artist-songs th { text-align: left; padding: 10px 14px; }
.artist-songs td { padding: 12px 14px; vertical-align: middle; }
.artist-songs .st-title { width: 52%; }
.artist-songs .st-roles { white-space: nowrap; }
.artist-songs .st-btns { text-align: right; }
.artist-songs .st-note { font-size: 12px; color: #8b95a1; margin-top: 3px; }

/* 곡 표: 역할·계약기간 볼드로 또렷하게 (2026-09-11) */
.artist-songs .st-roles { font-weight: 800; color: #191f28; }
.artist-songs .st-period { font-weight: 800; color: #191f28; letter-spacing: -0.3px; font-variant-numeric: tabular-nums; }
.artist-songs .remain { font-weight: 800; }
.artist-songs .st-title > div:first-child { font-weight: 800; font-size: 15px; }

/* 계약 카드 안 '이 계약의 서류' (2026-09-11) */
.ct-files { background: #f7f8fa; border-radius: 14px; padding: 10px 12px; margin: 12px 0; }
.ct-files-head { font-size: 12px; font-weight: 800; color: #6b7684; margin-bottom: 4px; letter-spacing: .3px; }
.ct-files .dp-file { padding: 7px 9px; }
.ct-skip { border: 0; background: transparent; color: #8b95a1; font-size: 12px; cursor: pointer;
  text-decoration: underline; font-family: inherit; margin-left: auto; }
.ct-skip:hover { color: #191f28; }

/* 계약 건 카드: 곡별 조건 줄 (2026-09-11 — 곡별 계약 구조) */
.ct-cond { margin: 10px 0 2px; display: flex; flex-direction: column; gap: 4px; }
.ct-cond-line { font-size: 13.5px; }
.ct-cond-line b { font-weight: 800; }
.ct-cond-line span { color: #6b7684; font-size: 12.5px; }

/* 작가 정보 인라인 편집 — 입력칸 모양만 다듬는다 (배치는 style.css 원래 규칙 그대로) */
.inline-form { background: transparent; border: 0; padding: 4px 0 0; }
.inline-form input[type="text"], .inline-form input[type="date"] {
  background: #f7f8fa; border: 1.5px solid transparent; border-radius: 10px; outline: none; transition: .15s;
}
.inline-form input[type="text"]:focus, .inline-form input[type="date"]:focus { border-color: #3182f6; background: #fff; }

/* 작가 목록 — ⑨ 넘버링 테이블 (2026-09-11 사장님 선택) */
.al-grid { background: #fff; border-radius: 20px; padding: 8px 24px; box-shadow: 0 2px 12px rgba(25,31,40,.06); }
.al-table { width: 100%; border-collapse: collapse; }
.al-table th { font-size: 11.5px; color: #adb5bd; font-weight: 700; text-align: left;
  padding: 14px 10px 8px; border-bottom: 1px solid #eceef1; letter-spacing: .4px; }
.al-table td { padding: 14px 10px; border-bottom: 1px solid #f7f8fa; font-size: 14px; cursor: pointer; }
.al-table tr:last-child td { border-bottom: 0; }
.al-table td b { font-weight: 800; font-size: 14.5px; transition: box-shadow .12s; }
.al-table tbody tr:hover td b { box-shadow: inset 0 -8px 0 #dbeafe; }
.al-table .al-no { color: #c4c9cf; font-size: 12px; font-weight: 700; width: 34px;
  font-variant-numeric: tabular-nums; }
.al-table .al-num { font-variant-numeric: tabular-nums; font-weight: 700; color: #4b5563; }
.al-table .dot { width: 8px; height: 8px; margin-right: 9px; vertical-align: 1px; }
.al-table .al-alias { font-size: 12px; color: #8b95a1; margin-left: 7px; }
.al-table i { color: #d5d9de; font-style: normal; }
#page-artist-docs main { max-width: 1080px; margin: 0 auto; }

/* ---- 날인본/원본 가져올 곳 선택 (2026-09-11, A안) ---- */
.srcpick-overlay { position: fixed; inset: 0; background: rgba(15,18,25,.45); z-index: 80;
  display: flex; align-items: center; justify-content: center; }
.srcpick-overlay[hidden] { display: none; }
.srcpick-box { background: #fff; border-radius: 14px; width: min(460px, 92vw); max-height: 78vh;
  display: flex; flex-direction: column; box-shadow: 0 18px 50px rgba(0,0,0,.28); padding: 18px; }
.srcpick-head { font-weight: 700; font-size: 15px; margin-bottom: 14px; }
.srcpick-choices { display: flex; flex-direction: column; gap: 10px; }
.srcpick-big { padding: 14px 16px; border-radius: 10px; border: 1px solid #dcdfe6; background: #f7f8fa;
  font-size: 15px; font-weight: 600; cursor: pointer; text-align: left; }
.srcpick-big:hover { border-color: #111; background: #fff; }
.srcpick-list { overflow-y: auto; display: flex; flex-direction: column; gap: 6px; margin-top: 2px; min-height: 60px; }
.srcpick-row { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 9px 11px;
  border: 1px solid #e3e6ec; border-radius: 8px; background: #fff; cursor: pointer; }
.srcpick-row:hover { border-color: #111; background: #f4f6f9; }
.srcpick-name { font-size: 13px; font-weight: 600; word-break: break-all; }
.srcpick-meta { font-size: 11.5px; color: #8a90a0; }
.srcpick-foot { margin-top: 12px; text-align: right; }
/* hidden 속성이 위의 display:flex에 지지 않게 (style.css의 알려진 함정) */
.srcpick-choices[hidden], .srcpick-list[hidden] { display: none !important; }