/* ═══════════════════════════════════════════════════════════════════════════
   SOLUTION SHOWCASE — 데모 대시보드

   이 페이지에는 자기 색이 거의 없다. 일부러 그렇게 뒀다.
   화면에서 색을 가진 것은 **테마 카드**뿐이어야, 네 테마의 성격 차이가 보인다.
   대시보드가 화려하면 그 아래 카드들이 전부 비슷해 보인다.

   카드의 색은 CSS 가 아니라 solutions.js 의 palette 에서 온다. app.js 가 카드
   자체에 --bg/--surface/--accent … 를 심고, 아래 규칙은 그 변수만 읽는다.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --page: #08080b;
  --panel: #101016;
  --line: rgba(255, 255, 255, .09);
  --line-2: rgba(255, 255, 255, .16);
  --text: #e9e7e3;
  --dim: #9b978f;
  --faint: #676460;
  --gold: #e8c86a;

  --r: 14px;
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* ★ 'Pretendard Variable' 이 먼저다. 예전엔 'Pretendard' 만 적어 뒀는데 그 이름으로는
     아무 데서도 잡히지 않았고(설치된 PC 에만 있다), 조용히 맑은 고딕으로 떨어져 있었다.
     이제 assets/fonts 에 담긴 폰트가 그 이름으로 등록된다 — 어느 PC 에서 보든 같은 글꼴이다. */
  --font: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont,
    'Segoe UI', 'Malgun Gothic', 'Apple SD Gothic Neo', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.65;
  letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;

  /* 한글은 단어 안에서 끊지 않는다. 기본값(break-word 계열)으로 두면
     "고르 / 면", "검은 / 색" 처럼 어절 한복판이 갈라져 읽는 속도가 눈에 띄게 떨어진다. */
  word-break: keep-all;
  overflow-wrap: break-word;
}

a { color: inherit; text-decoration: none; }
h1, h2, h3, p, dl, dd, figure, ul { margin: 0; padding: 0; }
ul { list-style: none; }
button { font: inherit; color: inherit; }

.wrap { width: min(1200px, 100% - 48px); margin-inline: auto; }

/* 배경 — 단일 광원. 선형 그라디언트로 면을 칠하지 않는다. */
.ground {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60rem 40rem at 50% -10%, rgba(232, 200, 106, .07), transparent 60%),
    radial-gradient(40rem 30rem at 100% 8%, rgba(120, 140, 200, .05), transparent 60%),
    var(--page);
}

/* ═══ 히어로 ═════════════════════════════════════════════════════════════
   워드마크 하나뿐이다. 머리띠·설명문·숫자판을 걷어내고 나니 첫 화면에서 눈이
   바로 테마 카드로 간다 — 고르러 온 사람에게 그 앞의 줄들은 통과 의례였다.

   ★ 굵은 한글 제목을 쓰지 않는다.
     이 페이지에서 힘을 가져야 하는 것은 **테마 카드**다. 제목이 굵고 크면 그 아래
     네 장과 힘겨루기를 하고, 정작 고르라고 만든 카드가 뒤로 물러선다.
     가늘게 벌린 워드마크 + 금색 선 한 줄이면 자리는 지키면서 카드를 이기지 않는다.
     (AUREX 가 쓰는 문법과 같다 — 면이 아니라 선으로 만든다.) */

.hero { padding: 104px 0 60px; }

/* ★ 자간 규칙이 영문과 한글은 정반대다.
   영문 대문자는 벌려야(+.22em) 워드마크로 서고, 같은 값을 한글에 주면 글자가 흩어져
   낱자로 읽힌다. 한글은 오히려 조여야(-.03em) 한 덩어리로 읽힌다.
   제목을 한국어로 바꾸면서 이 값도 같이 뒤집었다. */
.wordmark {
  font-size: clamp(32px, 6vw, 64px);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -.035em;
  word-break: keep-all;
}

/* 한글에서 대비는 서체를 갈아 끼워서가 아니라 굵기로 만든다.
   가는 수식어(마음에 드는) 위에 굵은 명사(카지노) 하나 — 그 한 낱말이 제목이다. */
.wordmark b { font-weight: 800; }

/* 금색은 면이 아니라 선으로. 이 페이지에서 유일한 금색이다. */
.wordmark-rule {
  width: 74px;
  height: 1px;
  background: var(--gold);
  margin: 22px 0 14px;
}

.wordmark-kr {
  font-size: clamp(13px, 1.5vw, 17px);
  font-weight: 400;
  letter-spacing: .26em;
  color: var(--dim);
  margin-right: -.26em;
}

/* ═══ 섹션 ═══════════════════════════════════════════════════════════════ */

.section { padding: 64px 0; }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 22px;
  margin-bottom: 34px;
  border-bottom: 1px solid var(--line);
}

.section-title { font-size: 22px; font-weight: 700; letter-spacing: -.025em; }
.section-title span { color: var(--faint); font-weight: 400; font-size: 15px; margin-left: 6px; }
.section-sub { color: var(--dim); font-size: 14px; }

.filters { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
  padding: 7px 15px;
  font-size: 13px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: transparent;
  color: var(--dim);
  cursor: pointer;
  transition: all .18s var(--ease);
}

.chip:hover { color: var(--text); border-color: rgba(255, 255, 255, .3); }

.chip.is-on {
  background: var(--gold);
  border-color: var(--gold);
  color: #14100a;
  font-weight: 650;
}

.empty { color: var(--faint); text-align: center; padding: 60px 0; }

/* ═══ 카드 격자 ══════════════════════════════════════════════════════════ */

/* 2열 고정.
   auto-fill 로 두면 넓은 화면에서 3열이 되고 네 번째 카드가 혼자 남아 어색했다.
   테마는 상품이라 카드가 클수록 좋고, 2열이면 미리보기가 훨씬 잘 읽힌다. */
.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  overflow: hidden;
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}

/* 테마 색은 테두리와 글로우로만 새어 나온다 — 면을 칠하면 카드끼리 싸운다. */
.card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: 0 24px 60px -20px color-mix(in srgb, var(--accent) 35%, transparent),
              0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
}

.card.is-hidden { display: none; }

/* ── 카드: 미리보기 ── */

.card-preview {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.card-preview .mock {
  position: absolute;
  inset: 0;
  transform: scale(1);
  transition: transform .5s var(--ease);
}

.card:hover .card-preview .mock { transform: scale(1.035); }

/* ── 진짜 화면 사진 ──────────────────────────────────────────────────────
   목업 위에 덮인다. 사진이 뜨기 전(또는 아예 없을 때)에는 밑의 목업이 보이고,
   뜨면 그 위로 살짝 밝아지며 올라온다 — 빈 네모가 번쩍이는 일이 없다. */
.card-shot {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;

  opacity: 0;
  transition: opacity .35s var(--ease), transform .5s var(--ease);
}

.card-shot.is-on { opacity: 1; }
.card:hover .card-shot { transform: scale(1.035); }

.card-badge {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px 5px 9px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  border-radius: 999px;
  background: rgba(8, 8, 11, .78);
  border: 1px solid var(--line-2);
  color: var(--dim);
  backdrop-filter: blur(6px);
}

.card-badge i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--faint);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .06);
}

.card-badge[data-state="up"] { color: #7ee0a6; }
.card-badge[data-state="up"] i { background: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, .18); }
.card-badge[data-state="down"] { color: #9b978f; }
.card-badge[data-state="down"] i { background: #6b6560; }

/* ── 카드: 본문 ── */

.card-body { display: flex; flex-direction: column; flex: 1; padding: 22px; }

.card-head { display: flex; align-items: flex-start; gap: 13px; }

.card-mark {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  border-radius: 10px;
  object-fit: contain;
  background: var(--bg);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  padding: 5px;
}

.card-name { font-size: 19px; font-weight: 750; letter-spacing: -.02em; line-height: 1.25; }
.card-name small { display: block; font-size: 12px; font-weight: 400; color: var(--faint); letter-spacing: .01em; margin-top: 1px; }

.card-concept {
  margin-left: auto;
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  border-radius: 5px;
  padding: 3px 7px;
  white-space: nowrap;
}

.card-tagline { margin-top: 14px; font-size: 14.5px; color: var(--text); font-weight: 550; }
.card-desc { margin-top: 8px; font-size: 13.5px; color: var(--dim); }

.card-foot {
  margin-top: auto;
  padding-top: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.go {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  cursor: pointer;
  border: none;
  transition: filter .18s var(--ease), transform .18s var(--ease);
}

.go:hover { filter: brightness(1.1); }
.go:active { transform: scale(.985); }
.go svg { transition: transform .22s var(--ease); }
.go:hover svg { transform: translateX(3px); }

.go--ghost {
  flex: 0 0 auto;
  width: 44px;
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--dim);
}

.go--ghost:hover { color: var(--text); border-color: var(--line-2); filter: none; background: rgba(255, 255, 255, .04); }

/* ═══════════════════════════════════════════════════════════════════════════
   미리보기 목업 — 이미지가 아니라 CSS 로 그린 축소판이다.

   스크린샷을 쓰지 않은 이유: 화면을 고칠 때마다 다시 찍어야 하고, 안 찍으면
   조용히 옛 화면을 보여 준다(그게 데모에서 제일 나쁘다). 여기 그려 둔 것은
   각 테마의 **문법**(색·면·선의 쓰임)이라 화면이 바뀌어도 거짓말이 되지 않는다.
   ═══════════════════════════════════════════════════════════════════════════ */

.mock { padding: 12px; display: flex; flex-direction: column; gap: 8px; font-family: var(--font); }

.mock-bar { display: flex; align-items: center; gap: 7px; height: 20px; flex: 0 0 auto; }
.mock-word { font-size: 9px; font-weight: 800; letter-spacing: .18em; }
.mock-menu { display: flex; gap: 6px; margin-left: 4px; }
.mock-menu i { display: block; width: 18px; height: 3px; border-radius: 2px; opacity: .45; }
.mock-pill { margin-left: auto; height: 13px; width: 34px; border-radius: 999px; }

.mock-hero { flex: 0 0 32%; border-radius: 6px; position: relative; overflow: hidden; }
.mock-hero span { position: absolute; left: 10px; top: 11px; height: 5px; width: 46%; border-radius: 3px; }
.mock-hero span + span { top: 22px; width: 30%; height: 4px; opacity: .55; }
.mock-hero b { position: absolute; left: 10px; bottom: 10px; height: 12px; width: 42px; border-radius: 4px; }

.mock-row { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.mock-row u { display: block; height: 4px; width: 32px; border-radius: 2px; text-decoration: none; }
.mock-row em { margin-left: auto; height: 4px; width: 16px; border-radius: 2px; opacity: .4; }

.mock-tiles { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.mock-tiles b { border-radius: 5px; display: block; position: relative; overflow: hidden; }

/* 게임 타일 아래의 제목 띠. 이거 하나가 붙고 나서야 빈 사각형이 '게임 카드'로 읽힌다.
   (crown 은 타일이 게임이 아니라 배당 버튼이라 빼 둔다 — 아래에서 ::after 로 배당을 그린다) */
.mock:not(.mock--crown) .mock-tiles b::before {
  content: '';
  position: absolute;
  left: 6px; right: 40%; bottom: 6px;
  height: 3px;
  border-radius: 2px;
  background: currentColor;
  opacity: .3;
}

.mock:not(.mock--crown) .mock-tiles b:nth-child(even)::before { right: 28%; }

/* ── AUREX: 검정 지면, 금색은 선으로만. 면으로 칠한 금은 한 곳(주 행동)뿐. ── */

.mock--aurex {
  background:
    radial-gradient(24rem 14rem at 24% -14%, rgba(217, 122, 30, .3), transparent 68%),
    #070505;
  color: #ece8df;
}
.mock--aurex .mock-word { color: #f5c53c; }
.mock--aurex .mock-menu i { background: #ece8df; }
.mock--aurex .mock-pill { background: #f5c53c; }
.mock--aurex .mock-hero { background: #15110e; border: 1px solid rgba(245, 197, 60, .3); }
.mock--aurex .mock-hero span { background: #ece8df; }
.mock--aurex .mock-hero b { background: #f5c53c; }
.mock--aurex .mock-row u { background: rgba(236, 232, 223, .8); }
.mock--aurex .mock-row em { background: #f5c53c; }
.mock--aurex .mock-tiles b { background: #1c1713; border: 1px solid rgba(245, 197, 60, .18); }
.mock--aurex .mock-tiles b:nth-child(2) { background: #241d18; }
.mock--aurex .mock-tiles b:nth-child(4) { background: #241d18; }

/* ── SNOW WHITE: 지면이 눈. 어두운 것은 게임 진열장뿐. 붉은 면은 하나. ── */

.mock--snowwhite { background: #dbe7f6; color: #121824; }
.mock--snowwhite .mock-word { color: #0f1b30; }
.mock--snowwhite .mock-menu i { background: #4c586b; }
.mock--snowwhite .mock-pill { background: #e0364d; }
.mock--snowwhite .mock-hero {
  background: #f7fbff;
  box-shadow: inset 0 1px 0 #fff, 0 6px 16px -6px rgba(28, 52, 92, .35);
}
.mock--snowwhite .mock-hero span { background: #121824; }
.mock--snowwhite .mock-hero b { background: #e0364d; }
.mock--snowwhite .mock-row u { background: #4c586b; }
.mock--snowwhite .mock-row em { background: #e0364d; }
/* 이 테마만 타일이 지면보다 어둡다 — 제목 띠는 currentColor(진한 잉크)로는 안 보인다. */
.mock--snowwhite .mock-tiles b { background: #0f1b30; }
.mock--snowwhite .mock-tiles b::before { background: #dbe7f6; opacity: .5; }
.mock--snowwhite .mock-tiles b:nth-child(2) { background: #1b2a45; }
.mock--snowwhite .mock-tiles b:nth-child(3) { background: #1b2a45; }

/* ── PANDA: 먹빛 + 금테 + 주칠 한 점. 흑백 마스코트가 색을 이긴다. ── */

.mock--panda {
  background:
    radial-gradient(18rem 12rem at 78% 0%, rgba(226, 60, 71, .22), transparent 65%),
    #0a0c11;
  color: #f3f6fb;
}
.mock--panda .mock-word { color: #f5c451; }
.mock--panda .mock-menu i { background: #f3f6fb; }
.mock--panda .mock-pill { background: #e23c47; }
.mock--panda .mock-hero { background: #141922; border: 1px solid rgba(245, 196, 81, .4); }
.mock--panda .mock-hero span { background: #ffe6a3; }
.mock--panda .mock-hero b { background: #7bd45a; }
.mock--panda .mock-row u { background: rgba(243, 246, 251, .75); }
.mock--panda .mock-row em { background: #7bd45a; }
.mock--panda .mock-tiles b { background: #141922; border: 1px solid rgba(245, 196, 81, .2); }
.mock--panda .mock-tiles b:nth-child(3) { border-color: rgba(226, 60, 71, .45); }

/* 판다 얼굴 — 히어로 오른쪽에 앉는 흑백 원 하나. */
.mock--panda .mock-hero::after {
  content: '';
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 42%, #0b0e13 0 4.2px, transparent 4.6px),
    radial-gradient(circle at 66% 42%, #0b0e13 0 4.2px, transparent 4.6px),
    radial-gradient(circle at 22% 12%, #0b0e13 0 6px, transparent 6.4px),
    radial-gradient(circle at 78% 12%, #0b0e13 0 6px, transparent 6.4px),
    #fff;
  box-shadow: 0 0 0 1.5px #f5c451;
}

/* ── CROWN: 스포츠북. 배당표 행이 이 테마의 얼굴이다. ── */

.mock--crown { background: #0a0f16; color: #eaf0f7; }
.mock--crown .mock-word { color: #f4da8e; }
.mock--crown .mock-menu i { background: #eaf0f7; }
.mock--crown .mock-pill { background: #22c55e; }
.mock--crown .mock-hero {
  background: linear-gradient(180deg, #17212e 0%, #121a25 100%);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.mock--crown .mock-hero span { background: #f4da8e; }
.mock--crown .mock-hero b { background: #22c55e; }
.mock--crown .mock-row u { background: rgba(234, 240, 247, .7); }
.mock--crown .mock-row em { background: #22c55e; }

/* 배당 3칸 — 네 테마 중 여기에만 있다. 한눈에 "스포츠북이 들었다" 를 말한다. */
.mock--crown .mock-tiles { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; }
.mock--crown .mock-tiles b {
  background: linear-gradient(180deg, #1e2a39 0%, #172230 100%);
  border: 1px solid rgba(255, 255, 255, .09);
  position: relative;
}
.mock--crown .mock-tiles b::after {
  content: '';
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 4px;
  border-radius: 2px;
  background: #22c55e;
  opacity: .85;
}
.mock--crown .mock-tiles b:nth-child(n+4)::after { background: #f4da8e; opacity: .6; }

/* ── JACKBOT: 따뜻한 흑갈 캐비닛 + 원색. 전구가 줄지어 흐른다. ── */

.mock--jackbot {
  background:
    radial-gradient(18rem 12rem at 50% -10%, rgba(245, 179, 1, .26), transparent 66%),
    radial-gradient(14rem 10rem at 92% 46%, rgba(232, 51, 31, .18), transparent 70%),
    #140c0b;
  color: #f7ecd9;
}
.mock--jackbot .mock-word { color: #ffe07a; letter-spacing: .1em; }
.mock--jackbot .mock-menu i { background: #c3ac92; }
.mock--jackbot .mock-pill {
  background: #e8331f;
  border-radius: 999px;
  box-shadow: 0 2px 0 #4d0c06;
}
.mock--jackbot .mock-hero {
  background: #251816;
  border: 2px solid #66473d;
  border-radius: 10px;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .5);
}
.mock--jackbot .mock-hero span { background: #ffe07a; }
.mock--jackbot .mock-hero b {
  background: #e8331f;
  border-radius: 999px;
  box-shadow: 0 2px 0 #4d0c06;
}
.mock--jackbot .mock-row u { background: rgba(247, 236, 217, .75); }
.mock--jackbot .mock-row em { background: #f5b301; }
.mock--jackbot .mock-tiles b {
  background: #251816;
  border: 1px solid #66473d;
  border-radius: 7px;
  box-shadow: 0 2px 0 #140c0b;
}
.mock--jackbot .mock-tiles b:nth-child(2) { border-color: #e8331f; }

/* 마퀴 전구 — 히어로 위아래로 줄지어 흐른다. 이 테마의 서명이라 목업에도 넣는다.
   실제 화면과 같은 값(18px 간격, 켜진 전구는 54px 마다)이라 인상이 어긋나지 않는다. */
.mock--jackbot .mock-hero::before,
.mock--jackbot .mock-hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 7px;
  background-image:
    radial-gradient(circle at 3.5px 3.5px, #fff2c2 0 1.4px, transparent 1.8px),
    radial-gradient(circle at 3.5px 3.5px, #6b4903 0 1.4px, transparent 1.8px);
  background-size: 21px 7px, 7px 7px;
  animation: mock-bulbs 1.35s linear infinite;
}
.mock--jackbot .mock-hero::before { top: 0; }
.mock--jackbot .mock-hero::after { bottom: 0; }

@keyframes mock-bulbs {
  to { background-position: 21px 0, 0 0; }
}

/* 양철 로봇 얼굴 — 히어로 오른쪽에 앉는 빨간 머리 하나. */
.mock--jackbot .mock-hero i {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 22px;
  border-radius: 8px;
  background: #e8331f;
  border: 2px solid #140c0b;
  box-shadow:
    -5px -3px 0 -2px #ffe07a,
    5px -3px 0 -2px #ffe07a;
}

/* ═══ 운영 화면 (관리자 · 파트너) ═══════════════════════════════════════════
   테마 카드와 **닮지 않게** 만든다. 세로로 큰 카드 · 테마색 글로우 · 특징 목록은
   전부 테마의 문법이다. 여기서 그걸 되풀이하면 일곱 개를 다 같은 무게로 늘어놓은
   꼴이 되고, "고를 것은 다섯" 이라는 사실이 흐려진다.

   그래서 가로로 눕히고, 색을 빼고, 한 줄로만 말한다. */

/* 크기와 리듬은 테마 카드와 같게 맞춘다(2열 · 세로 · 16:10 사진).
   가로로 눕혀 두었더니 사진이 손톱만 해서 무슨 화면인지 알아볼 수가 없었다.

   ★ 대신 **색을 준다**. 테마 카드는 저마다 강조색으로 테두리가 빛나고 버튼이
     칠해져 있다. 여기는 그 색이 하나도 없다 — 크기는 같아도 "고르는 것"이 아니라는
     신호는 색으로 남는다. */

.tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.tool {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  overflow: hidden;
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}

.tool:hover { transform: translateY(-4px); border-color: var(--line-2); }

.tool-shot {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: #0d0d13;
}

.tool-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;

  /* 로그인 화면이라 볼 것이 적다. 살짝 죽여 뒀다가 얹으면 살아난다. */
  opacity: .82;
  transition: opacity .3s var(--ease), transform .5s var(--ease);
}

.tool:hover .tool-shot img { opacity: 1; transform: scale(1.035); }

.tool-body { flex: 1; padding: 22px; display: flex; flex-direction: column; }

.tool-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--faint);
}

.tool-name { font-size: 19px; font-weight: 750; letter-spacing: -.02em; margin-top: 3px; }
.tool-desc { margin-top: 10px; font-size: 13.5px; color: var(--dim); }

/* 테마 카드의 버튼과 같은 크기지만 면을 칠하지 않는다 — 여기서 색을 쓰는 순간
   여섯 번째·일곱 번째 테마처럼 보인다. */
.tool-go {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 650;
  color: var(--text);
  transition: background .18s var(--ease), border-color .18s var(--ease);
}

.tool-go:hover { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .3); }
.tool-go.is-off { color: var(--faint); font-weight: 400; cursor: not-allowed; }

.tool-note { margin-top: 10px; font-size: 11.5px; color: var(--faint); text-align: center; }

@media (max-width: 860px) {
  .tools { grid-template-columns: 1fr; }
}

/* ═══ 푸터 ═══════════════════════════════════════════════════════════════ */

.foot { border-top: 1px solid var(--line); padding: 40px 0 64px; margin-top: 40px; }
.foot-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; font-size: 13px; color: var(--dim); }

/* ═══ 전환 화면 ══════════════════════════════════════════════════════════ */

.leaving {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: var(--bg, #08080b);
  color: var(--text-c, #fff);
  animation: fade .22s var(--ease);
}

.leaving[hidden] { display: none; }

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.leaving-inner { text-align: center; width: min(340px, 78vw); }

.leaving-word {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: .16em;
  color: var(--accent-c, #e8c86a);
}

.leaving-msg { margin-top: 10px; font-size: 13px; opacity: .6; }

.leaving-bar {
  margin-top: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: .16;
  overflow: hidden;
}

.leaving-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent-c, #e8c86a);
  opacity: 1;
  animation: fill .7s var(--ease) forwards;
}

@keyframes fill { to { width: 100%; } }

.leaving-esc { display: inline-block; margin-top: 20px; font-size: 12px; opacity: .45; text-decoration: underline; }
.leaving-esc:hover { opacity: .9; }

/* ═══ 반응형 ═════════════════════════════════════════════════════════════ */

@media (max-width: 860px) {
  .grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .wrap { width: min(1200px, 100% - 32px); }
  .hero { padding: 64px 0 40px; }
  .section { padding: 44px 0; }
  .card-concept { display: none; }
}

/* 접근성 — 움직임을 줄여 달라고 한 사람에게는 줄인다. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }