/* ========================================================================= 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; /* 코럴 배경(칩 등) */ /* ★ **강조색 위에 얹는 글자.** 여태 화면마다 `#fff` 를 손으로 적었는데, 어두운 판 V:deck 은 네온 라임 위라 흰 글자가 **안 읽힌다**(2026-09-04 실측). 이름 하나로 두면 판마다 알아서 갈린다 — 사내는 지금 그대로 흰색이다. */ --accent-on: #fff; --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); } /* ========================================================================= V:deck 판 — **밖(베타)에서만** 쓰는 색·글꼴. (2026-09-04 디자인 전달물) ★ 갈림은 `` **하나뿐**이다(`_head` 가 `is_beta` 로 찍는다). 사내는 이 블록에 걸리지 않으므로 **한 글자도 안 바뀐다** — 사장님이 A안으로 정하셨다(사내 색은 디자이너와 논의 후 따로 전달). ★ **밝은 판·어두운 판보다 뒤에** 둔다. 앞에 두면 `@media (prefers-color-scheme)` 가 이겨서 낮에는 크림색으로 돌아간다(§order-decides). ⚠ **강조색은 `#ccff00` 하나다.** 밝기 변형(#d7ff3d 등)을 만들지 않는다 — 호버는 색을 바꾸는 대신 **채움/비움**으로 말한다(전달물 규칙). ⚠ 지금 화면들이 쓰는 이름(`--ink-2` 등)을 **그대로 쓴다.** 새 이름을 만들면 화면마다 어느 것을 쓸지 갈린다. ========================================================================= */ :root[data-app="vdeck"] { color-scheme: dark; --bg: #121211; /* 페이지 */ --surface: #1a1a18; /* 카드·팝업 */ --surface-2: #2b2b28; /* inset */ --ink: #f2f1ef; /* 본문 */ --ink-2: #c2c1ba; /* 강한 보조 */ --ink-3: #97968f; /* 보조 */ --line: #3d3d39; /* 테두리(기본) */ --line-soft: #2b2b28; /* 테두리(약) */ --accent: #ccff00; /* 네온 라임 — 하나뿐 */ --accent-ink: #ccff00; /* 어두운 바탕이라 원색 그대로 읽힌다 */ --accent-on: #0d0d0c; /* 강조 위에 얹는 글자 */ --accent-soft: #1d2400; /* 강조 배경(어두운 틴트) */ --accent-line: #4a5c00; /* 강조 테두리(어두운 틴트) */ --danger: #ff4438; --danger-ink: #ff7a70; --danger-soft: #2a1215; --ok: #ccff00; --ok-ink: #ccff00; --ok-soft: #1d2400; --warn: #f0e94a; --warn-ink: #f0e94a; --warn-soft: #2b2800; --radius: 10px; --radius-lg: 14px; --shadow: 0 10px 34px rgba(0,0,0,.5); --shadow-drop: 0 6px 22px rgba(0,0,0,.35); /* 태그 갈래 식별색 — 전달물 지정값 */ /* ── 묶음 식별색 ──────────────────────────────────────────────────────── ⚠⚠ **원안 README 의 표와 원안 화면의 값이 서로 달랐다**(2026-09-04). 표에는 브랜드 #00ffc2 · 장르 #f0e94a · 출처 #b6f03a 로 적혀 있는데, 실제 화면은 브랜드 #ccff00 · 장르 #00ffc2 · 출처 #7dd3fc 였다. ★ **화면 쪽을 따른다** — 사장님이 보고 정하신 것이 그 화면이고, 카드 안 브랜드 태그도 화면과 같은 라임이라 이래야 온 화면이 맞는다 (2026-09-04 사장님: 「출처 컬러 안맞음」). */ --hue-brand: #ccff00; /* 브랜드 — 강조색과 같다(원안 화면) */ --hue-genre: #00ffc2; /* 장르 */ --hue-origin: #7dd3fc; /* 출처 */ --hue-untagged: #ff9de0; /* 태그 미적용 */ --hue-craft: #8ef26a; /* 기법·그 밖 */ --hue-deck: #ccff00; /* 프로젝트 덱 */ --hue-mine: #7dd3fc; /* 나의 덱 */ /* ── 태그 라벨 ────────────────────────────────────────────────────────── ★ 사장님이 주신 태그 시안(`vdeck_homepage/태그/태그.png`, 2026-09-04)에서 **픽셀을 찍어** 뽑은 값이다. 태그는 **왼쪽이 뾰족한 라벨** 꼴이고, 다섯 가지가 있다: ① 라임 테두리 + 어두운 속 + 라임 글자 (브랜드처럼 힘 준 것) ② 라임으로 꽉 참 + 검은 글자 (골라 둔 것) ③ 올리브로 참 + 라임 글자 (마우스를 얹었을 때) ④ 회색 테두리 + 어두운 속 + 회색 글자 (보통) ⑤ 회색 테두리 + 어두운 속 + 라임 글자 ⚠ 이 색들은 위 중립 램프와 **미묘하게 다르다**(속 #191919 · 선 #636363). 시안에서 잰 값이므로 램프로 바꿔치지 않는다. */ --tag-fill: #191919; /* 태그 속 */ --tag-line: #636363; /* 태그 테두리(보통) */ --tag-ink: #bababa; /* 태그 글자(보통) */ --tag-hot: #4b4f3a; /* 마우스를 얹었을 때 속 */ --tag-notch: 10px; /* 왼쪽 뾰족한 턱 — 시안에서 키의 0.38 */ /* ★ **태그 도형은 여기 한 벌뿐이다.** 여섯 자리(카드·왼쪽 갈래·상세 둘 …)가 같은 값을 저마다 적고 있으면 한쪽만 고쳐져 조용히 어긋난다. ⚠⚠ 우리는 오래 **각진 5점 삼각**으로 깎고 있었다 — 원안은 **모서리가 둥근 13점**이다. 「태그 디자인이 다르다」는 말을 여러 번 들은 자리가 여기다 (2026-09-05 에 원안 파일에서 값을 그대로 떠 왔다). 겉/속이 1px 차이라 도형도 두 벌이다(겉 9 · 속 8). */ /* ⚠⚠ **오른쪽 모서리가 계단져 보이던 까닭**(2026-09-05 사장님). 원안 도형은 9px 모서리를 **점 두 개로 깎아** 흉내 낸다 (`100%-9px 0` → `100%-2.6px 2.6px` → `100% 9px`). 9px 이나 되는 모서리를 두 마디로 그리면 **둥근 게 아니라 모서리를 자른 모양**이라 각져 보인다. 사선이 얇아서 생기던 것과는 **다른 문제**다. → 모서리는 잘라내지 말고 `border-radius` 에 맡긴다. 브라우저가 진짜 원호로 그리고 가장자리도 부드럽게 처리한다. 잘라내기는 **왼쪽 턱만** 맡는다. (실제로 보이는 모양은 «둥근 모서리 ∩ 잘라낸 도형» 이라 둘이 겹쳐 산다.) */ --tag-clip-out: polygon(0 50%, 9px 3px, 10.5px 1px, 13px 0, 100% 0, 100% 100%, 13px 100%, 10.5px calc(100% - 1px), 9px calc(100% - 3px)); --tag-clip-in: polygon(0 50%, 8.5px 3px, 10px 1px, 12.5px 0, 100% 0, 100% 100%, 12.5px 100%, 10px calc(100% - 1px), 8.5px calc(100% - 3px)); /* ⚠⚠ **사선에서 링이 계단져 보이던 까닭**(2026-09-05 사장님: 「사선 라운드가 계단져 보임. 얇아서 그런가?」 — 맞다). 속을 사방 1px 들이면 곧은 변에서는 링이 1px 이지만, **45° 사선에서는 0.69px** 밖에 안 된다(가로로 1px 민 것을 수직으로 재면 그만큼이다). 1px 이 안 되는 선은 브라우저가 회색 점으로 흩어 그려 계단으로 보인다. → 왼쪽만 1.45px 들이면 사선에서도 꼭 1px 이 된다(1.45 × 0.69 ≈ 1). */ --tag-inset: 1px 1px 1px 1.45px; --tag-r-out: 9px; /* 겉(링) 모서리 — 원안 */ --tag-r-in: 8px; /* 속 모서리 — 원안 */ /* ⚠ 글꼴은 **우리 서버에 둔다**(CDN 이 멈추면 글자가 무너진다). 파일을 놓기 전에는 맨 뒤 대체 글꼴로 뜬다 — 이름을 먼저 적어 두면 파일만 넣으면 바로 바뀐다. */ --font: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; } /* ---- 전역 기본 ---- */ 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); /* ⚠⚠ **강조색 위 글자는 흰색이 아니다.** 여기 `#fff` 를 못 박아 두어, 어두운 판 V:deck 에서 **네온 라임 위에 흰 글자**가 되어 안 읽혔다 — 설정창만 봐도 로그아웃·참여 링크·끝내기·확장 프로그램 받기·크롬 다섯 곳이었다 (2026-09-05 실측). 이 이름은 그러라고 만들어 둔 것이다: 사내는 여전히 흰색(#fff), 밖은 검정(#0d0d0c). */ color: var(--accent-on); 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: var(--accent-on); 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); } /* ⚠⚠ **`!important` 하나가 모든 표의 선 색을 못 박고 있었다**(2026-09-05). 태그 표의 값 줄만 한 단 연한 선(#2b2b28)으로 두려는데 아무리 해도 #3d3d39 로 나왔다 — 같은 규칙의 다른 값(여백·바탕 그림)은 멀쩡히 걸리는데 선 색만 안 걸려 한참 헤맸다. 여기 `!important` 때문이었다. ⚠ 왜 있었나: 옛 표들이 저마다 색을 적어 제각각이라 한 번에 눌렀던 것이다. 지금은 색을 이름으로 두므로 누를 까닭이 없다 — **`!important` 만 뗀다** (값은 그대로라 사내 화면은 한 픽셀도 안 바뀐다). */ th, td { border-color: var(--line); } 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; } } /* ── 등장 움직임 ───────────────────────────────────────────────────────── 디자인 원안(2026-09-04)이 정한 두 가지다. 이름과 값을 **여기 한 곳**에 둔다 — 팝업마다 제 움직임을 지어 내면 화면마다 다르게 뜬다. toastUp 팝업이 뜰 때 — 아래 14px 에서 올라오며 서서히 진해진다 (200ms) barIn 화면 아래 띠가 뜰 때 — 아래 10px 에서 (200ms) ⚠ **움직임을 줄여 달라고 해 둔 사람에게는 안 움직인다.** 어지럼증·멀미가 있는 분들이 기계에 켜 두는 설정이고, 원안도 그렇게 하라고 적어 두었다. */ @keyframes toastUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes barIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* ⚠ 가운데에 세워 둔 것은 이미 `translateX(-50%)` 를 쓰고 있다. 위 `barIn` 을 그대로 걸면 **그 값이 덮여 왼쪽으로 밀린다** — 가운데 몫을 담은 판을 따로 둔다. */ @keyframes barInCx { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { /* 이름을 지우는 것이 아니라 **시간을 0 으로** 만든다 — 끝 모습은 그대로 남는다. */ * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }