/*
 * 손님용 도구 사이트의 공통 틀 — 위아래 광고 띠 + 가운데 도구.
 * 사이트의 `src/components/GuestToolShell.tsx` 와 **같은 모양**이다(그쪽은 Tailwind, 여기는 그대로 옮긴 CSS).
 * 색: 첫 허브의 검정 #08090a · 청록(teal-400 #2dd4bf / teal-300 #5eead4 / teal-200 #99f6e4).
 */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

/* ---------- 광고 띠 ---------- */
.gb { position: relative; flex-shrink: 0; overflow: hidden; background: #08090a; color: #fff; }
.gb-top { z-index: 30; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.gb-top::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(38% 140% at 0% 50%, rgba(45, 212, 191, 0.14), transparent 70%);
}
.gb-bottom { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.gb-in {
  position: relative; margin: 0 auto; display: flex; align-items: center; gap: 12px;
  width: 100%; max-width: 100rem; height: 44px; padding: 0 12px;
}
.gb-logo { flex-shrink: 0; font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.24em; transition: color 0.15s; }
.gb-logo:hover { color: #99f6e4; }
.gb-bar { display: none; flex-shrink: 0; width: 1px; height: 14px; background: rgba(255, 255, 255, 0.15); }
.gb-pitch {
  display: none; min-width: 0; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: 0.8125rem; color: rgba(255, 255, 255, 0.65); transition: color 0.15s;
}
.gb-pitch:hover { color: #fff; }
.gb-right { margin-left: auto; display: flex; flex-shrink: 0; align-items: center; gap: 6px; }
.gb-link { border-radius: 6px; padding: 4px 10px; font-size: 0.75rem; font-weight: 600; color: rgba(255, 255, 255, 0.75); transition: color 0.15s; }
.gb-link:hover { color: #fff; }
.gb-cta { border-radius: 6px; padding: 4px 12px; font-size: 0.75rem; font-weight: 700; background: #2dd4bf; color: #04211d; transition: background 0.15s; }
.gb-cta:hover { background: #5eead4; }
.gb-row:hover .gb-text { color: #fff; }
.gb-tag { flex-shrink: 0; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.22em; color: rgba(94, 234, 212, 0.9); }
.gb-text { min-width: 0; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.75); transition: color 0.15s; }
.gb-go { display: flex; flex-shrink: 0; align-items: center; gap: 4px; font-size: 0.75rem; font-weight: 700; color: #5eead4; transition: color 0.15s; }
.gb-go i { font-style: normal; transition: transform 0.3s; }
.gb-row:hover .gb-go { color: #99f6e4; }
.gb-row:hover .gb-go i { transform: translateX(2px); }
@media (min-width: 640px) {
  .gb-in { padding: 0 16px; }
  .gb-bar, .gb-pitch { display: block; }
}

/* ---------- 도구가 창을 꽉 채우는 화면(글 콘티 · 배경 편집기) ---------- */
.page-tool { display: flex; flex-direction: column; height: 100dvh; min-height: 36rem; background: #08090a; }
.page-tool main { flex: 1; min-height: 0; padding: 8px; }
.tool-frame {
  position: relative; height: 100%; overflow: hidden; border-radius: 16px; background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); outline: 1px solid #e5e5e5;
}
.tool-frame iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; }
@media (min-width: 640px) { .page-tool main { padding: 12px; } }

/* ---------- 문서처럼 내려가는 화면(캐릭터 기획) ---------- */
.page-doc { display: flex; min-height: 100vh; flex-direction: column; background: #fafafa; }
.page-doc .gb-sticky { position: sticky; top: 0; z-index: 30; }
.page-doc main { margin: 0 auto; width: 100%; max-width: 100rem; flex: 1; padding: 12px; }
@media (min-width: 640px) { .page-doc main { padding: 16px; } }

/* 캐릭터 기획의 알림 한 줄 — 사이트에서는 Tailwind 로 그린 토스트다(CharacterMap 의 저장 알림) */
.pointer-events-none.fixed.rounded-full {
  pointer-events: none; position: fixed; bottom: 24px; left: 50%; z-index: 50; transform: translateX(-50%);
  border-radius: 9999px; background: #171717; padding: 8px 16px; font-size: 0.8125rem; font-weight: 600; color: #fff;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

/* ---------- 첫 화면(도구 셋) — 사이트 첫 허브와 같은 결 ---------- */
.page-home { display: flex; min-height: 100vh; flex-direction: column; background: #08090a; color: #fff; }
.page-home main { position: relative; flex: 1; }
.home-glow {
  pointer-events: none; position: absolute; inset: 0 0 auto 0; height: 420px;
  background: radial-gradient(70% 100% at 50% 0%, rgba(45, 212, 191, 0.12), transparent 70%);
}
.home-in { position: relative; margin: 0 auto; width: 100%; max-width: 72rem; padding: 32px 24px 56px; }
.home-head { text-align: center; }
.home-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.24em; color: #5eead4; }
.home-title { margin: 12px 0 0; font-size: 28px; font-weight: 800; letter-spacing: -0.03em; }
.home-grid { margin-top: 32px; display: grid; gap: 16px; }
.card {
  position: relative; display: flex; align-items: center; gap: 16px; overflow: hidden; border-radius: 16px;
  background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition: transform 0.3s, box-shadow 0.3s;
}
.card:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(45, 212, 191, 0.4), 0 18px 40px -18px rgba(45, 212, 191, 0.45); }
.card-thumb { width: 112px; flex-shrink: 0; aspect-ratio: 1 / 1; overflow: hidden; background: #fff; }
.card-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.card:hover .card-thumb img { transform: scale(1.06); }
.card-meta { min-width: 0; padding: 16px 20px 16px 0; }
.card-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.22em; color: rgba(45, 212, 191, 0.9); }
.card-name { margin-top: 8px; font-size: 20px; font-weight: 800; letter-spacing: -0.03em; }
.card-go { margin-top: 12px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #5eead4; }
.card-go i { font-style: normal; transition: transform 0.3s; }
.card:hover .card-go i { transform: translateX(4px); }
@media (min-width: 640px) {
  .home-in { padding: 40px 24px 72px; }
  .home-eyebrow { font-size: 15px; }
  .home-title { font-size: 40px; }
  .home-grid { margin-top: 40px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .card { display: block; }
  .card-thumb { width: 100%; aspect-ratio: 4 / 3; }
  .card-meta { padding: 20px 24px 24px; }
  .card-name { font-size: 27px; }
}