/* 색상 코드 입력 판 — gl-palette.js 가 그리는 것의 모양.
 *
 * 🔴 색을 직접 적지 않는다. 역할 토큰만 쓴다 — 이 판은 카탈로그(마르다 톤)와
 *    에디터(브랜드 톤) 양쪽에 얹히므로, 한쪽 색을 박아 두면 다른 쪽에서 뜬다.
 *    tokens.css · style.css 가 정한 것을 그대로 따라간다.
 */

.gl-pal { display: block; }

/* ── 밝게 · 어둡게 갈피 ─────────────────────────────────────────────── */
.gl-pal-tabs {
  display: flex; gap: 2px; margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.gl-pal-tab {
  flex: 1 1 0; padding: 9px 10px 10px; cursor: pointer;
  font: inherit; font-size: 12.5px; color: var(--muted);
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.gl-pal-tab:hover { color: var(--fg); }
.gl-pal-tab.on { color: var(--fg-strong); font-weight: 700; border-bottom-color: var(--accent); }
.gl-pal-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ── 다섯 줄 ────────────────────────────────────────────────────────── */
.gl-pal-rows { display: flex; flex-direction: column; gap: 9px; }

.gl-pal-row {
  display: flex; align-items: center; gap: 10px;
  cursor: text;
}
/* 견본은 «지금 적은 값» 을 그대로 보여 준다. 코드만 보고는 무슨 색인지 모른다.
   비었을 때는 투명이라 격자 바탕이 비쳐 «아직 안 적었다» 가 읽힌다. */
.gl-pal-sw {
  /* 레드팀 M2(2026-09-25) — 색 견본은 브랜드 둥글기를 따라가지 않는다(고정값, 원래대로) */
  width: 22px; height: 22px; flex: 0 0 auto; border-radius: 7px;
  box-shadow: inset 0 0 0 1px var(--line);
  /* AI-티-예외(장식 아님) — 투명을 «비침» 으로 보여 주는 체크무늬. 색 자체가 정보다 */
  background-image:
    linear-gradient(45deg, var(--surface-2) 25%, transparent 25%, transparent 75%, var(--surface-2) 75%),
    linear-gradient(45deg, var(--surface-2) 25%, transparent 25%, transparent 75%, var(--surface-2) 75%);
  background-size: 8px 8px;
  background-position: 0 0, 4px 4px;
}
/* 🔴 이름이 줄바꿈되면 「배/경/색」 처럼 한 글자씩 쪼개진다. 폭을 양보하지 않는다. */
.gl-pal .gl-pal-name {
  flex: 1 1 auto; min-width: 0; white-space: nowrap;
  font-size: 12.5px; color: var(--fg);
}

/* 🔴 규칙을 «.gl-pal 안의» 것으로 적는다.
      마르다 양식 스타일에 input[type="text"] { width: 100% } 가 있는데,
      그 선택자가 .gl-pal-in 과 특이도가 같아 실제로 이겨 버렸다 —
      칸이 판 폭을 다 먹고 이름이 한 글자씩 세로로 쪼개졌다.

   🔴 폭은 flex-basis 로 잡는다. 플렉스 칸에서는 flex-basis 가 width 를
      이기므로, 밖에서 width 를 어떻게 적어 두어도 이 폭이 지켜진다. */
.gl-pal .gl-pal-in {
  flex: 0 1 132px; width: auto; min-width: 0; padding: 7px 9px;
  font: inherit; font-size: 12.5px; font-variant-numeric: tabular-nums;
  text-transform: uppercase; text-align: left;
  color: var(--fg); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-sm, 8px);
}
.gl-pal .gl-pal-in:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* 잘못 적은 칸은 그 자리에서 표가 나야 한다. 저장할 때 알려 주면 늦다. */
.gl-pal .gl-pal-in.bad {
  border-color: var(--danger, var(--accent));
  color: var(--danger, var(--accent));
}

/* ── 대비 안내 ──────────────────────────────────────────────────────── */
.gl-pal-msg {
  margin: 11px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--muted);
}
.gl-pal-msg.bad { color: var(--danger, var(--accent)); font-weight: 700; }

/* ── 전체 색상값 복사하기 ───────────────────────────────────────────── */
.gl-pal-copy {
  display: block; width: 100%; margin-top: 13px; padding: 11px 12px;
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  color: var(--ondark-fg); background: var(--chip);
  border: 0; border-radius: var(--radius-sm, 10px);
}
/* 레드팀 4차(2026-09-25) — 이 판은 브랜드 화면(--on-accent 계산이 돎)과 에디터 도구
   (martha-dev tokens.css — --black 이 없고 대신 --accent-fg 를 이미 갖고 있다) 양쪽에
   얹힌다. --black 하나로 대체하면 에디터 쪽에서 무효였다 — 도구 쪽 토큰을 그다음
   대체값으로 넣는다. */
.gl-pal-copy:hover { background: var(--accent); color: var(--on-accent, var(--accent-fg, var(--black))); } /* 대표 결정(2026-09-25) */
.gl-pal-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 복사가 막힌 자리에서만 나온다 — 사람이 직접 누르도록 골라 둔다 */
.gl-pal .gl-pal-fallback {
  width: 100%; margin-top: 8px; min-height: 84px; padding: 8px;
  font: inherit; font-size: 11.5px; color: var(--fg);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm, 8px);
}

.gl-pal-note { margin: 9px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--muted); }

@media (max-width: 520px) {
  .gl-pal-row { flex-wrap: wrap; }
  .gl-pal .gl-pal-in { flex: 1 1 100%; }
}

/* ── 더 자세히 — 압축 판(세 칸)에서 자동으로 뽑힌 열다섯 칸을 읽기만 보여 준다.
   2026-09-17 소유자 「사이트 전체 색: 팔레트 카드 + 3칸만 보이고 … 더 자세히에 접는다」 */
.gl-pal-full { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.gl-pal-full > summary {
  cursor: pointer; font-size: 12px; color: var(--muted); list-style: none;
}
.gl-pal-full > summary::-webkit-details-marker { display: none; }
.gl-pal-full > summary::before { content: '▸ '; }
.gl-pal-full[open] > summary::before { content: '▾ '; }
.gl-pal-full-body {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin-top: 8px;
}
.gl-pal-full-row { display: flex; align-items: center; gap: 7px; min-width: 0; }
.gl-pal-full-sw {
  width: 16px; height: 16px; flex: 0 0 auto; border-radius: 5px; /* 레드팀 M2 — 견본 고정값 */
  box-shadow: inset 0 0 0 1px var(--line);
}
.gl-pal-full-name {
  flex: 1 1 auto; min-width: 0; font-size: 11px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  /* 자르는 선이 한글 첫 획을 깎지 않도록 2px 을 주고 같은 만큼 당긴다
     (engine/tools/check-editor.mjs 「말줄임 칸이 첫 글자 획을 깎지 않는가」). */
  padding-left: 2px; margin-left: -2px;
}
.gl-pal-full-hex {
  flex: 0 0 auto; font-size: 10.5px; color: var(--fg); font-variant-numeric: tabular-nums;
}
@media (max-width: 420px) {
  .gl-pal-full-body { grid-template-columns: 1fr; }
}