/* 화면 위 색 갈아입히기 — gl-tint.js 가 그리는 것의 모양.
 *
 * 🔴 확인용 주소에만 실린다. 운영 빌드(--release)는 이 파일을 넣지 않는다.
 * 🔴 왼쪽 아래에 둔다. 오른쪽 아래는 gl-float.js 의 「문의하기」·「맨 위로」
 *    자리다 — 겹치면 둘 다 못 누른다.
 */

.gl-tint { position: fixed; left: 18px; bottom: 18px; z-index: 80; }

.gl-tint-open {
  width: 46px; height: 46px; padding: 0; cursor: pointer;
  display: grid; place-items: center;
  color: var(--ondark-fg, #fff); background: var(--accent);
  border: 0; border-radius: 50%;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.26);
}
.gl-tint-open svg { width: 23px; height: 23px; }
.gl-tint-open:hover { filter: brightness(1.08); }
.gl-tint-open:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.gl-tint-card {
  position: absolute; left: 0; bottom: 58px; width: min(338px, calc(100vw - 36px));
  padding: 15px 16px 13px;
  background: var(--surface); color: var(--fg);
  border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.3);
  max-height: min(78vh, 640px); overflow-y: auto;
}

.gl-tint-head { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
.gl-tint-head b { flex: 1 1 auto; font-size: 14px; color: var(--fg-strong); }
.gl-tint-x {
  width: 26px; height: 26px; padding: 0; cursor: pointer; flex: 0 0 auto;
  font: inherit; font-size: 13px; line-height: 1;
  color: var(--muted); background: transparent; border: 0; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.gl-tint-x svg{ width: 13px; height: 13px; display: block; }
.gl-tint-x:hover { color: var(--fg); background: var(--surface-2); }
.gl-tint-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.gl-tint-foot {
  display: flex; flex-direction: column; gap: 7px;
  margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--line);
}
.gl-tint-reset {
  align-self: flex-start; padding: 6px 11px; cursor: pointer;
  font: inherit; font-size: 12px;
  color: var(--muted); background: transparent;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.gl-tint-reset:hover { color: var(--fg); border-color: var(--fg); }
.gl-tint-reset:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* «이건 우리끼리 보는 것» 이라고 판 안에 적어 둔다. 적어 두지 않으면
   고객에게 보여 드리다가 그대로 넘어간다. */
.gl-tint-foot span { font-size: 11px; line-height: 1.5; color: var(--muted); }

/* 휴대폰에서는 판이 화면을 거의 다 먹는다. 바닥에 붙여 세운다. */
@media (max-width: 480px) {
  .gl-tint { left: 14px; bottom: 14px; }
  .gl-tint-card {
    position: fixed; left: 12px; right: 12px; bottom: 70px; width: auto;
    max-height: 68vh;
  }
}

/* 움직임을 원하지 않는 분에게는 그림자 전환도 걸지 않는다 */
@media (prefers-reduced-motion: reduce) {
  .gl-tint-open, .gl-tint-x, .gl-tint-reset { transition: none; }
}

/* 미리 맞춰 둔 팔레트 — 빈 칸에서 시작하지 않게 위에 깔아 둔다.
   가로로 민다. 줄바꿈되면 판이 화면을 다 먹는다. */
.gl-pal-tones {
  display: flex; gap: 6px; overflow-x: auto;
  margin-bottom: 12px; padding-bottom: 5px;
  scrollbar-width: thin;
}
.gl-pal-tone {
  flex: 0 0 auto; display: flex; align-items: center; gap: 6px;
  padding: 5px 9px 5px 6px; cursor: pointer; white-space: nowrap;
  font: inherit; font-size: 11.5px; color: var(--fg);
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
}
.gl-pal-tone:hover { border-color: var(--fg); }
.gl-pal-tone:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.gl-pal-tone-sw {
  /* 레드팀 M2(2026-09-25) — 16×16 작은 견본에 브랜드 둥글기(radius-sm)를 그대로 물리면
     "rounded" 톤에서 10px 이 거의 원, "sharp" 톤에서 4px 로 브랜드마다 모양이 흔들린다.
     견본은 색을 보여 주는 게 목적이라 고정 값으로 둔다(원래값 그대로). */
  width: 16px; height: 16px; flex: 0 0 auto; border-radius: 5px;
  /* AI-티-예외(장식 아님) — 두 색(var(--a)·var(--b))을 반씩 보여 주는 색 견본 */
  background: linear-gradient(135deg, var(--b) 0 50%, var(--a) 50% 100%);
  box-shadow: inset 0 0 0 1px var(--line);
}