/* =========================================================================
   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: #A84626;    /* 크림·연한 바탕 위 글자/링크 */
  --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;     /* 감독컨펌(핫핑크) */
  /* 갈래를 나누는 색 — 상태가 아니라 «몇 번째·어떤 종류» 를 가른다(지급 차수·문서 종류). */
  --purple: #6B4FA0; --purple-soft: #EBE4F5;
  /* 연한 바탕(-soft) 위에 «글자»로 얹는 색. 밝은 판은 원색이 너무 옅어 안 읽힌다
     (실측: accent 2.48 · warn 2.71 · ok 3.69, 기준 4.5). 어두운 판은 원색 그대로
     5 이상이라 -ink 를 원색에 이어 둔다 — 한 이름으로 두 판을 다 덮는다. */
  --ok-ink: #526F47; --warn-ink: #84622B; --danger-ink: #7E321F;
  --info-ink: #386A9F; --teal-ink: #2B736F; --pink-ink: #C11B76; --purple-ink: #6B4FA0;
  --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; --purple: #A98CD8; --purple-soft: #2E2739;
    --ok-ink: var(--ok); --warn-ink: var(--warn); --danger-ink: var(--danger);
    --info-ink: var(--info); --teal-ink: var(--teal); --pink-ink: var(--pink); --purple-ink: var(--purple);
    --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; --purple: #A98CD8; --purple-soft: #2E2739;
    --ok-ink: var(--ok); --warn-ink: var(--warn); --danger-ink: var(--danger);
    --info-ink: var(--info); --teal-ink: var(--teal); --pink-ink: var(--pink); --purple-ink: var(--purple);
  --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; }

/* ── 구간 태그 색 ────────────────────────────────────────────────
   갈래(장르·기법·브랜드)마다 다른 채움색. **이 표는 여기 한 곳뿐이다** —
   상세창(구간 줄)과 목록 카드가 각자 적으면 한쪽만 고쳐 조용히 어긋난다
   (2026-08-25 사용자: "태그 컬러를 다르게 표시해준다고 했던거 같은데").
   ⚠ 값이 아니라 **식**을 담는다 — var() 는 쓰는 자리에서 풀리므로
   밝은 판·어두운 판이 저절로 따라온다. */
:root {
  --mk-bg:       color-mix(in srgb, var(--ink-2) 12%, transparent);
  --mk-fg:       var(--ink);
  --mk-brand-bg: color-mix(in srgb, var(--accent) 20%, transparent);
  --mk-brand-fg: var(--accent-ink);
  --mk-craft-bg: color-mix(in srgb, var(--ok) 16%, transparent);
  --mk-craft-fg: color-mix(in srgb, var(--ok) 80%, var(--ink));
}

/* ── 카드에 마우스를 얹으면 ────────────────────────────────────────
   **카드는 한 픽셀도 안 움직이고 그림만 커진다.**

   ⚠ 카드를 진짜로 키우거나(`height`) 늘이면(`transform: scale`) 안 된다.
     레퍼런스 카드에서 **네 번** 부딪혀 나온 결론이다(2026-08-26):
       transform: scale  ① 커지는 내내 글자를 다시 그려 「덜컥거린다」
                         ② 층에 올려 두면 처음 해상도로 늘여 써서 「무르다」
                         ③ 배율이 정수가 아니라 1px 테두리가 두 픽셀에 나뉘어
                            **두 겹으로 겹쳐 보인다**(엣지에서 특히)
       옆으로 키우기      ④ 글이 상자 너비에 맞춰 다시 접혀 아래가 밀린다
     레퍼런스는 «격자 칸 + 안쪽 상자» 두 겹이라 안쪽만 자라게 할 수 있었지만,
     사내 카드는 **한 겹**이라(격자 칸 = 카드) 키우면 옆 카드가 통째로 밀린다.

   ⚠ 그림에는 글자도 테두리도 없어 배율이 정수가 아니어도 흐려질 게 없다 —
     키울 수 있는 것은 그것뿐이다. 카드가 `overflow:hidden` 이라 안에서 잘린다.

   ⚠ **여기 한 곳에만 적는다.** 카드마다 제 화면에 적으면 다음에 하나만
     고쳐져 카드끼리 결이 달라진다. 새 카드를 만들면 이 목록에 더한다.
   ⚠ `.card`(설정 상자)·`.slide-card`·`.mode-card` 는 뺐다 — 그림도 없고
     누르는 것도 아니라, 들썩이면 「눌리는 줄 알았는데」가 된다. */
.pcard, .cut-card, .pick-card {
  transition: box-shadow .16s ease, border-color .16s ease;
}
.pcard img, .cut-card img, .pick-card img, .pcard .pthumb img {
  transition: transform .2s ease;
}
/* ⚠ **`@media (hover: hover)` 로 감싸지 않는다.** 그 조건이 거짓인 브라우저가
   있다 — 얹어도 «주황 테두리만» 나오고 커지지가 않는다(2026-08-26 사용자).
   실측: 250 서버의 X11 크롬은 `(hover: hover)` `(pointer: fine)` `(pointer: coarse)`
   가 전부 거짓이고 `(hover: none)` 이 참이다. 가상 화면·원격 데스크톱·터치가
   달린 PC 에서 이런 답이 나온다.
   원래 감싼 까닭은 «손가락 기기에서 한 번 뜨면 안 사라진다» 였는데, 그건
   눌러서 넘어가면 사라지는 정도의 흠이다. **꾸밈을 «틀릴 수 있는 조건» 뒤에
   숨기면 되는 사람에게도 안 보인다** — 그쪽이 훨씬 나쁘다. */
.pcard:hover, .cut-card:hover, .pick-card:hover {
  box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
}
.pcard:hover img, .cut-card:hover img, .pick-card:hover img {
  transform: scale(1.07);
}/* 움직임을 줄여 달라고 한 사람에게는 커지지 않는다. */
@media (prefers-reduced-motion: reduce) {
  .pcard img, .cut-card img, .pick-card img { transition: none; }
  .pcard:hover img, .cut-card:hover img, .pick-card:hover img { transform: none; }
}