/* 이 도구의 색·글자·표면을 한 곳에서 정한다.
 *
 * 왜 한 파일인가: 화면이 다섯 장(작업·실측·설정·채널규격·로그인)인데 색이
 * 저마다 따로 놀았다. 여기서만 고치면 다섯 장이 같이 바뀐다.
 *
 * 색은 **두 갈래**다 — 강조색(브랜드·지금 할 일)과 초록(끝난 것). 예전에는
 * 금색·주황·형광초록·청록이 전부 최대 채도로 같이 떠서, 어느 것이 중요한지
 * 화면이 말해 주지 못했다.
 *
 * 🔴 색 값은 **"R G B" 숫자 세 개**로 적는다 (#hex 아님). Tailwind 가
 * `rgb(var(--accent-500) / <alpha-value>)` 로 받아 쓰기 때문에, 이렇게 해야
 * `bg-accent-500/40` 같은 반투명 클래스가 살아 있다. hex 로 바꾸면 화면 곳곳의
 * `/40`·`/25` 가 조용히 깨진다.
 */

/* 글꼴: Pretendard 는 구글 폰트에 없다. 그동안 head 의 요청이 400 으로 떨어져
   전 화면이 시스템 기본 글꼴로 그려지고 있었다 — 여기서 제대로 받아온다. */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

/* ── 색 한 벌. 강조색(할 일)은 하늘색이다 (Raycast·Vercel 계열) ──────────
   🔴 값은 "R G B" 숫자 세 개다. CSS 에서 직접 쓸 땐 rgb(var(--bg)) 로 감싼다 —
   빼먹으면 아무것도 안 칠해진다(2026-09-10 에 로그인 화면이 그랬다). */
:root {
  --bg:      6  8 10;      /* 바닥   */
  --panel:  14 18 22;      /* 패널   */
  --raised: 21 27 33;      /* 떠 있는 것 */
  --line:   33 42 51;      /* 실선   */

  --text:   230 236 243;
  --text-2: 158 172 186;
  --text-3: 116 131 147;
  --text-4:  88 101 116;

  --a200: 198 230 255;  --a300: 146 208 255;  --a400:  90 182 255;
  --a500:  47 155 255;  --a600:  26 118 210;  --a700:  20  90 160;
  --a800:  16  58  99;  --a900:  11  36  64;

  --scroll: 42 53 64;  --scroll-hover: 58 72 86;
}

/* 뜻이 색에 붙어 있는 것들 — 초록은 끝난 것, 빨강은 막힌 것.
   빨강은 **일부러 진하다.** 낡은 빌드 경고·반려 사유는 눈에 안 띄면 없는 것과
   같아서, 색을 정리하는 규칙에서 이것만 빠진다. */
:root {
  --ok:      95 207 161;
  --ok-deep: 46 138 102;
  --danger:      140  29  24;   /* 띠 바탕 */
  --danger-line: 192  57  43;
  --danger-text: 255 157 149;
  --radius:  12px;
  --shadow:  0 1px 2px rgb(0 0 0 / .4), 0 8px 24px -12px rgb(0 0 0 / .7);
}

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
               'Apple SD Gothic Neo', system-ui, sans-serif;
  /* 한글은 자간을 아주 조금 좁혀야 덩어리로 읽힌다 */
  letter-spacing: -0.011em;
}

/* 숫자는 자리가 흔들리면 안 된다 — 진행률·개수·시간이 재렌더마다 들썩였다 */
.tabular-nums, .font-mono, input[type="number"] { font-variant-numeric: tabular-nums; }

/* 누를 수 있는 것은 커서로 먼저 말한다 */
button:not(:disabled), summary, [onclick], label[for] { cursor: pointer; }
button:disabled { cursor: not-allowed; }

/* 키보드로 다니는 사람에게만 보이는 초점 테두리 */
button:focus-visible, a:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible, [onclick]:focus-visible {
  outline: 2px solid rgb(var(--a500));
  outline-offset: 2px;
  border-radius: 6px;
}

::selection { background: rgb(var(--a500) / .3); }

/* 스크롤바: 예전엔 로그 창 하나만 손봐 두어 나머지가 기본 회색 막대였다 */
* { scrollbar-width: thin; scrollbar-color: rgb(var(--scroll)) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgb(var(--scroll)); border-radius: 999px;
  border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgb(var(--scroll-hover)); background-clip: content-box; }

/* 카드: 위쪽 1px 하이라이트가 있어야 평평한 사각형이 아니라 「떠 있는 판」이 된다 */
.wf-section {
  border: 1px solid rgb(var(--line));
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgb(255 255 255 / .022), transparent 90px), rgb(var(--panel));
  box-shadow: var(--shadow);
  transition: border-color .18s ease;
}
/* color-mix 를 모르는 브라우저에도 「밝아지는」 테두리가 가야 한다.
   앞줄이 폴백이다 — 예전엔 이 자리에 거의 투명한 값이 들어가 있어서,
   폴백을 타면 카드에 손을 올릴 때 테두리가 오히려 사라졌다. */
.wf-section:hover { border-color: rgb(var(--text-4));
  border-color: color-mix(in srgb, rgb(var(--line)) 70%, white 12%); }
.wf-section.wf-highlight { border-color: rgb(var(--a600));
  box-shadow: 0 0 0 1px rgb(var(--a600)), var(--shadow); outline: none; }

.wf-head { cursor: pointer; user-select: none; }

details.sub-block > summary { color: rgb(var(--text-3)); font-size: .8rem; padding: 6px 0; transition: color .15s; }
details.sub-block > summary:hover { color: rgb(var(--text-2)); }

/* 문서: 오래 보는 자리다. 한 줄이 화면 끝까지 늘어나면 회색 벽이 된다 */
.markdown-body { line-height: 1.85; font-size: 15px; color: rgb(var(--text) / .85); max-width: 68ch; }
.markdown-body h1 { font-size: 1.55rem; font-weight: 700; margin: 1.6rem 0 .7rem;
                    color: rgb(var(--a400)); letter-spacing: -.02em; line-height: 1.35; }
.markdown-body h1:first-child { margin-top: 0; }
.markdown-body h2 { font-size: 1.15rem; font-weight: 600; margin: 1.9rem 0 .6rem; color: rgb(var(--ok));
                    padding-top: .9rem; border-top: 1px solid rgb(var(--line)); letter-spacing: -.015em; }
.markdown-body h3 { font-size: 1rem; font-weight: 600; margin: 1.2rem 0 .35rem; color: rgb(var(--a500)); }
.markdown-body p { margin: .7rem 0; }
.markdown-body ul, .markdown-body ol { list-style: disc; padding-left: 1.4rem; margin: .7rem 0; }
.markdown-body ol { list-style: decimal; }
.markdown-body li { margin: .35rem 0; }
.markdown-body strong { color: rgb(var(--ok) / .85); font-weight: 600; }
.markdown-body code { background: rgb(var(--raised)); padding: 2px 6px; border-radius: 5px;
                      font-size: .88em; color: rgb(var(--a400)); }
.markdown-body blockquote { border-left: 3px solid rgb(var(--line)); padding: .1rem 0 .1rem 1rem;
                            margin: .9rem 0; color: rgb(var(--text-3)); }
.markdown-body hr { border-color: rgb(var(--line)); margin: 1.6rem 0; }

input[type="text"], input[type="password"], input[type="number"], select, textarea {
  transition: border-color .15s, background-color .15s;
}

/* 오래 걸리는 단계가 조용히 멈춘 것처럼 보이지 않게, 빛 한 줄이 오간다 */
.indet-bar { position: relative; height: 4px; border-radius: 999px;
  background: rgb(var(--a500) / .14); overflow: hidden; }
.indet-bar::before { content: ''; position: absolute; top: 0; height: 100%;
  width: 40%; border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgb(var(--a400)), transparent);
  animation: indet 1.15s ease-in-out infinite; }
@keyframes indet { 0% { left: -40%; } 100% { left: 100%; } }

.editor-area { min-height: 400px; resize: vertical; }
.editor-area:focus { outline: 2px solid rgb(var(--a600)); }
.btn-sm { min-height: 36px; min-width: 60px; }
.log-area { overflow-y: auto; }

/* 그림이 뜨기 전 자리를 미리 잡아 둔다 (레이아웃이 튀지 않게) */
#image-grid img, #clip-grid video { background: rgb(var(--raised)); }

/* 그림풍 고르는 카드 */
.preset-card { cursor: pointer; border: 2px solid rgb(var(--line)); border-radius: 10px; overflow: hidden;
  background: rgb(var(--bg)); transition: border-color .15s; }
.preset-card:hover { border-color: rgb(var(--text-4)); }
.preset-card.selected { border-color: rgb(var(--a500)); }
.preset-card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
/* 칸이 좁으면 「구 / 아슈」처럼 낱말 가운데서 끊겼다 — 한글은 낱말 단위로만 넘기고 두 줄 길이를 맞춘다 */
.preset-card .pc-label { font-size: .7rem; padding: 5px 6px; text-align: center; color: rgb(var(--text-2));
  word-break: keep-all; text-wrap: balance; }
.preset-card.selected .pc-label { color: rgb(var(--a400)); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .indet-bar::before, .animate-spin, .animate-pulse { animation: none !important; }
  html { scroll-behavior: auto !important; }
  * { transition-duration: .01ms !important; }
}