/* =========================================================================
   AI Shot Pipeline — 공통 디자인 시스템 (Claude / warm paper)
   디자인 변경은 원칙적으로 이 파일의 토큰(:root 변수)만 고치면 앱 전체 반영.
   폰트: 영문 = Sharp Sans 계열(지오메트릭), 한글 = 맑은 고딕.
   ========================================================================= */
:root {
  /* 팔레트 (라이트) */
  --bg: #F4EFE6;            /* warm paper 배경 */
  --surface: #FCFAF5;       /* 카드/패널 */
  --surface-2: #EFE9DC;     /* inset/fill */
  --ink: #262218;           /* 본문 */
  --ink-2: #6E6759;         /* 보조 텍스트 */
  --ink-3: #9C9483;         /* 흐린 텍스트/placeholder */
  --line: #E6DECD;          /* 경계선 */
  --accent: #D97757;        /* 코럴 (버튼/강조 fill) */
  --accent-ink: #B15234;    /* 크림 위 강조 텍스트/링크 */
  --accent-soft: #F3E2D7;   /* 코럴 배경(칩 등) */
  --ok: #5E7F51;   --ok-soft: #E4EADB;   /* 승인 */
  --warn: #B4863A; --warn-soft: #F3E9D3; /* 대기 */
  --danger: #BB4A2E; --danger-soft: #F4DDD3; /* 반려/삭제 */
  --info: #3A6EA5; --info-soft: #E3EAF3;     /* 정보/안내(파랑) */
  --teal: #2F7F7A; --teal-soft: #DFEDEB;     /* 참조 렌더 배지(청록) */
  --pink: #E0218A; --pink-soft: #FBE0EF;     /* 감독컨펌(핫핑크) */
  --radius: 12px;
  --radius-lg: 16px;
  --shadow: 0 1px 2px rgba(70,55,35,.05), 0 6px 20px rgba(70,55,35,.06);
  /* 영문 = Helvetica(윈도우는 Arial로 대체=거의 동일), 한글 = 맑은 고딕 */
  --font: "Helvetica Neue", Helvetica, Arial, "Malgun Gothic", "맑은 고딕",
          "Apple SD Gothic Neo", sans-serif;
  --mono: "SF Mono", ui-monospace, "Cascadia Code", Consolas, "D2Coding", monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #211E18; --surface: #2B2820; --surface-2: #38332A;
    --ink: #EDE7DA; --ink-2: #ADA593; --ink-3: #7E7767; --line: #3E382D;
    --accent: #E0906F; --accent-ink: #E7A184; --accent-soft: #3A2C24;
    --ok: #8CB07E; --ok-soft: #2C3327; --warn: #D8AF63; --warn-soft: #38301F;
    --danger: #DB7A5E; --danger-soft: #3A281F;
    --info: #86AEDA; --info-soft: #24303D; --teal: #6CBDB7; --teal-soft: #1F332F;
    --pink: #FF6EC7; --pink-soft: #3A1F30;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 26px rgba(0,0,0,.32);
  }
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #211E18; --surface: #2B2820; --surface-2: #38332A;
  --ink: #EDE7DA; --ink-2: #ADA593; --ink-3: #7E7767; --line: #3E382D;
  --accent: #E0906F; --accent-ink: #E7A184; --accent-soft: #3A2C24;
  --ok: #8CB07E; --ok-soft: #2C3327; --warn: #D8AF63; --warn-soft: #38301F;
  --danger: #DB7A5E; --danger-soft: #3A281F;
  --info: #86AEDA; --info-soft: #24303D; --teal: #6CBDB7; --teal-soft: #1F332F;
  --pink: #FF6EC7; --pink-soft: #3A1F30;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 26px rgba(0,0,0,.32);
}

/* ---- 전역 기본 ---- */
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
}
h1, h2, h3, h4 { letter-spacing: -0.02em; color: var(--ink); }
a { color: var(--accent-ink); }
hr { border: none; border-top: 1px solid var(--line); }
code, pre, .mono { font-family: var(--mono); }
::placeholder { color: var(--ink-3); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- 폼/버튼 ---- */
input[type=text], input[type=password], input[type=email], input[type=search],
input:not([type]), textarea, select {
  font-family: var(--font);
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 11px;
}
input:focus, textarea:focus, select:focus { border-color: var(--accent); outline: none; }

button, .btn {
  font-family: var(--font);
  font-weight: 600;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 8px 15px;
  cursor: pointer;
}
button:hover, .btn:hover { filter: brightness(0.97); }

/* 보조/작은 버튼 (앱 전반 공용 클래스) */
.mini-btn {
  background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 9px;
  padding: 4px 10px; font-size: 12px; font-weight: 600;
}
.mini-btn:hover { filter: none; background: var(--line); }
.danger-btn {
  background: var(--danger-soft); color: var(--danger);
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
  border-radius: 9px; padding: 4px 10px; font-size: 12px; font-weight: 600;
}
.danger-btn:hover { filter: none; background: color-mix(in srgb, var(--danger) 15%, var(--danger-soft)); }
.confirm-btn { background: var(--accent); color: #fff; border-radius: 9px; }
.retake-btn { background: var(--danger); color: #fff; border-radius: 9px; }

/* ---- 상태색 (task status 텍스트) ---- */
.status-approved { color: var(--ok); font-weight: 700; }
.status-pending_review { color: var(--warn); font-weight: 700; }
.status-retake { color: var(--danger); font-weight: 700; }
.status-not_started { color: var(--ink-3); font-weight: 700; }

/* ---- 표 ---- */
table { border-color: var(--line); }
th, td { border-color: var(--line) !important; }
th { background: var(--surface-2); color: var(--ink-2); font-weight: 700; }

/* ---- 링크형 네비 ---- */
nav a { color: var(--accent-ink); text-decoration: none; }
nav a:hover { text-decoration: underline; }

/* ---- 상태 배지/칩 유틸(신규 사용처용) ---- */
.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600;
        padding: 3px 9px; border-radius: 20px; }
.pill.ok { color: var(--ok); background: var(--ok-soft); }
.pill.wait { color: var(--warn); background: var(--warn-soft); }
.pill.retake { color: var(--danger); background: var(--danger-soft); }

/* 브레드크럼(뒤로 대체) - 홈 > 프로젝트 > 컷 계층 이동 */
.crumbs { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.crumbs a { color: var(--accent); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs .crumb-sep { color: var(--ink-3); }
.crumbs .crumb-cur { color: var(--ink); font-weight: 700; }
.crumbs .crumb-extra { color: var(--ink-3); margin-left: 8px; }