/* ============================================================
   깨알도구 MAIN CSS
   ============================================================ */

:root {
  --bg: #f7f5ef;

  --surface: #ffffff;
  --surface-soft: #f2f0e9;

  --text: #22231f;
  --text-soft: #6f716a;

  --line: #e4e1d8;

  --brand: #353a2f;
  --brand-soft: #e8eadf;

  --accent: #d9a441;
  --accent-soft: #fff4d9;

  --danger-soft: #f7ece8;

  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 9px;

  --shadow: 0 6px 22px rgba(32, 35, 29, 0.055);

  --max-width: 1180px;
}

/* ============================================================
   RESET
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  min-width: 320px;

  overflow-x: hidden;

  background:
    radial-gradient(
      circle at top left,
      rgba(217, 164, 65, 0.07),
      transparent 28%
    ),
    var(--bg);

  color: var(--text);

  font-family:
    -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Pretendard',
    'Noto Sans KR', 'Malgun Gothic', sans-serif;

  font-size: 16px;

  line-height: 1.5;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;
}

button,
input {
  font: inherit;
}

button {
  color: inherit;
}

a {
  color: inherit;

  text-decoration: none;
}

/* ============================================================
   LAYOUT
   ============================================================ */

.page-wrap {
  min-height: 100vh;
}

.container {
  width: calc(100% - 40px);

  max-width: var(--max-width);

  margin: 0 auto;
}

/* ============================================================
   HEADER
   ============================================================ */

.site-header {
  position: sticky;

  top: 0;

  z-index: 100;

  background: rgba(247, 245, 239, 0.91);

  backdrop-filter: blur(14px);

  -webkit-backdrop-filter: blur(14px);

  border-bottom: 1px solid rgba(228, 225, 216, 0.8);
}

.header-inner {
  min-height: 60px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 18px;
}

.brand {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  font-size: 19px;

  font-weight: 800;

  letter-spacing: -0.7px;

  white-space: nowrap;
}

.brand-mark {
  width: 32px;
  height: 32px;

  flex: 0 0 32px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 10px;

  background: var(--brand);

  color: #ffffff;

  font-size: 17px;

  font-weight: 800;
}

.header-right {
  display: flex;

  align-items: center;

  gap: 4px;
}

.small-link {
  padding: 6px 9px;

  color: var(--text-soft);

  font-size: 12px;

  font-weight: 600;

  border-radius: 8px;

  transition:
    background 0.15s ease,
    color 0.15s ease;
}

/* ============================================================
   HERO
   ============================================================ */

.hero {
  padding: 44px 0 26px;
}

.hero-inner {
  width: 100%;

  max-width: 960px;

  min-width: 0;

  margin: 0 auto;

  text-align: center;
}

.hero-badge {
  display: inline-flex;

  align-items: center;

  gap: 5px;

  margin-bottom: 11px;

  padding: 5px 10px;

  background: var(--accent-soft);

  border: 1px solid rgba(217, 164, 65, 0.24);

  border-radius: 999px;

  color: #80601c;

  font-size: 11px;

  font-weight: 700;

  white-space: nowrap;
}

.hero h1 {
  margin: 0;

  font-size: clamp(32px, 4.4vw, 48px);

  line-height: 1.1;

  letter-spacing: -2.2px;

  white-space: nowrap;
}

.hero h1 .point {
  color: var(--accent);
}

.hero-desc {
  max-width: 590px;

  margin: 13px auto 0;

  color: var(--text-soft);

  font-size: 14px;

  line-height: 1.65;

  word-break: keep-all;
}

/* ============================================================
   SEARCH
   ============================================================ */

.search-wrap {
  position: relative;

  width: 100%;

  max-width: 620px;

  margin: 20px auto 0;
}

.search-icon {
  position: absolute;

  left: 17px;

  top: 50%;

  transform: translateY(-50%);

  color: var(--text-soft);

  font-size: 18px;

  line-height: 1;

  pointer-events: none;

  z-index: 2;
}

#toolSearch {
  width: 100%;

  height: 50px;

  padding: 0 47px;

  border: 1px solid var(--line);

  border-radius: 15px;

  background: var(--surface);

  color: var(--text);

  font-size: 14px;

  outline: none;

  box-shadow: var(--shadow);

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

#toolSearch::placeholder {
  color: #9a9b95;
}

#toolSearch:focus {
  border-color: var(--accent);

  box-shadow:
    0 0 0 4px rgba(217, 164, 65, 0.09),
    var(--shadow);
}

.search-clear {
  position: absolute;

  right: 11px;

  top: 50%;

  transform: translateY(-50%);

  width: 29px;
  height: 29px;

  display: none;

  align-items: center;
  justify-content: center;

  padding: 0;

  border: 0;

  border-radius: 8px;

  background: transparent;

  color: var(--text-soft);

  font-size: 11px;

  cursor: pointer;
}

/* ============================================================
   CATEGORY
   ============================================================ */

.category-section {
  margin-top: 18px;
}

.category-list {
  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  gap: 6px;
}

.category-button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 4px;

  padding: 6px 10px;

  border: 1px solid var(--line);

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.72);

  color: var(--text-soft);

  font-size: 12px;

  font-weight: 700;

  line-height: 1.2;

  white-space: nowrap;

  cursor: pointer;

  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    transform 0.15s ease;
}

.category-button.active {
  background: var(--brand);

  border-color: var(--brand);

  color: #ffffff;
}

.category-button-icon {
  font-size: 13px;

  line-height: 1;
}

/* ============================================================
   TOOLS SECTION
   ============================================================ */

.tools-section {
  padding: 18px 0 46px;
}

.section-head {
  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 12px;
}

.section-title-wrap {
  min-width: 0;
}

.section-eyebrow {
  margin-bottom: 2px;

  color: var(--accent);

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 0.4px;
}

.section-title {
  margin: 0;

  font-size: 22px;

  line-height: 1.25;

  letter-spacing: -0.8px;
}

.tool-count {
  flex: 0 0 auto;

  color: var(--text-soft);

  font-size: 11px;

  font-weight: 600;

  white-space: nowrap;
}

/* ============================================================
   TOOL GRID
   ============================================================ */

.tool-grid {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 11px;
}

/* ============================================================
   MORE
   ============================================================ */

.tool-more-wrap {
  display: flex;

  align-items: center;
  justify-content: flex-end;

  width: 100%;

  margin-top: 9px;
}

.tool-more-wrap[hidden] {
  display: none !important;
}

.tool-more-button {
  display: flex;

  align-items: center;
  justify-content: center;

  width: 32px;
  height: 32px;

  flex: 0 0 32px;

  margin: 0;

  padding: 0;

  border: 1px solid var(--line);

  border-radius: 50%;

  background: var(--surface);

  color: var(--text-soft);

  box-shadow: 0 2px 8px rgba(30, 30, 25, 0.04);

  font-size: 20px;

  font-weight: 400;

  line-height: 1;

  cursor: pointer;

  appearance: none;

  -webkit-appearance: none;

  transition:
    transform 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

.tool-more-button > span {
  display: flex;

  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;

  margin: 0;

  padding: 0 0 2px;

  line-height: 1;
}

/* ============================================================
   TOOL CARD
   ============================================================ */

.tool-card {
  position: relative;

  min-width: 0;

  min-height: 168px;

  display: flex;

  flex-direction: column;

  padding: 15px;

  background: var(--surface);

  border: 1px solid var(--line);

  border-radius: var(--radius-md);

  box-shadow: 0 3px 12px rgba(30, 30, 25, 0.035);

  cursor: default;

  transition:
    transform 0.17s ease,
    box-shadow 0.17s ease,
    border-color 0.17s ease;
}

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

.tool-card[data-status='published'] {
  cursor: pointer;
}

.card-top {
  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 10px;
}
/* ============================================================
   TOOL CARD BADGES
   ============================================================ */

.card-badges {
  display: flex;

  align-items: center;
  justify-content: flex-end;

  gap: 5px;

  flex-wrap: wrap;
}

/* 플랫폼 */

.tool-platform-badge {
  flex: 0 0 auto;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 2px;

  padding: 3px 7px;

  border-radius: 999px;

  font-size: 9px;

  font-weight: 800;

  line-height: 1.4;

  white-space: nowrap;
}

/* 모바일 전용 */

.tool-platform-badge.mobile {
  background: #e7f1ff;

  color: #416c98;
}

/* PC 전용 */

.tool-platform-badge.desktop {
  background: #ecebe7;

  color: #656761;
}
.tool-icon {
  width: 38px;
  height: 38px;

  flex: 0 0 38px;

  display: flex;

  align-items: center;
  justify-content: center;

  background: var(--surface-soft);

  border-radius: 10px;

  font-size: 19px;

  line-height: 1;
}

.tool-tag {
  flex: 0 0 auto;

  padding: 3px 7px;

  border-radius: 999px;

  font-size: 9px;

  font-weight: 800;

  line-height: 1.4;

  white-space: nowrap;
}

.tool-tag.planned {
  background: #f0eee9;

  color: #898982;
}

.tool-tag.building {
  background: var(--accent-soft);

  color: #80601c;
}

.tool-tag.published {
  background: var(--brand-soft);

  color: #626754;
}

.tool-title {
  margin: 11px 0 4px;

  color: var(--text);

  font-size: 15px;

  font-weight: 800;

  line-height: 1.35;

  letter-spacing: -0.4px;

  word-break: keep-all;
}

.tool-description {
  margin: 0;

  color: var(--text-soft);

  font-size: 11px;

  line-height: 1.5;

  word-break: keep-all;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;
}

.card-bottom {
  margin-top: auto;

  padding-top: 9px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 8px;
}

.tool-category {
  min-width: 0;

  overflow: hidden;

  color: #888a83;

  font-size: 10px;

  font-weight: 700;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.tool-arrow {
  width: 24px;
  height: 24px;

  flex: 0 0 24px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 7px;

  background: var(--surface-soft);

  color: #70726b;

  font-size: 12px;

  line-height: 1;

  transition:
    transform 0.15s ease,
    background 0.15s ease;
}

/* ============================================================
   AI OPERATOR CARD
   ============================================================ */

.ai-operator-card {
  position: relative;

  grid-column: span 2;

  grid-row: span 2;

  min-width: 0;

  min-height: 347px;

  display: flex;

  flex-direction: column;

  padding: 18px;

  overflow: hidden;

  border: 1px solid rgba(53, 58, 47, 0.16);

  border-radius: var(--radius-lg);

  background:
    radial-gradient(
      circle at top right,
      rgba(217, 164, 65, 0.12),
      transparent 34%
    ),
    var(--brand);

  color: #ffffff;

  box-shadow: 0 7px 24px rgba(32, 35, 29, 0.09);

  scroll-margin-top: 82px;
}

.ai-operator-card[hidden] {
  display: none !important;
}

.ai-operator-card::after {
  content: '';

  position: absolute;

  right: -58px;
  bottom: -72px;

  width: 180px;
  height: 180px;

  border: 1px solid rgba(255, 255, 255, 0.06);

  border-radius: 50%;

  pointer-events: none;
}

.ai-card-head {
  position: relative;

  z-index: 1;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 12px;
}

.ai-card-brand {
  display: inline-flex;

  align-items: center;

  gap: 7px;

  color: rgba(255, 255, 255, 0.8);

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 0.7px;
}

.ai-status-dot {
  width: 7px;
  height: 7px;

  flex: 0 0 7px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.35);

  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.05);
}

.ai-operator-card.is-live .ai-status-dot {
  background: #e4b958;

  box-shadow: 0 0 0 4px rgba(228, 185, 88, 0.12);
}

.ai-status-badge {
  flex: 0 0 auto;

  padding: 4px 8px;

  border: 1px solid rgba(255, 255, 255, 0.12);

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.08);

  color: rgba(255, 255, 255, 0.72);

  font-size: 9px;

  font-weight: 800;

  line-height: 1.25;
}

.ai-operator-card.is-live .ai-status-badge {
  border-color: rgba(228, 185, 88, 0.24);

  background: rgba(228, 185, 88, 0.12);

  color: #f3d994;
}

.ai-card-main {
  position: relative;

  z-index: 1;

  margin-top: 15px;
}

.ai-card-title {
  margin: 0;

  max-width: 78%;

  color: rgba(255, 255, 255, 0.78);

  font-size: 13px;

  font-weight: 700;

  line-height: 1.4;

  letter-spacing: -0.25px;

  word-break: keep-all;
}

.ai-card-desc {
  max-width: 82%;

  margin: 4px 0 0;

  color: rgba(255, 255, 255, 0.46);

  font-size: 9px;

  line-height: 1.5;

  word-break: keep-all;
}

.ai-signal-ticker {
  position: relative;

  z-index: 2;

  min-width: 0;

  display: grid;

  grid-template-columns: auto minmax(0, 1fr) auto;

  align-items: center;

  gap: 8px;

  margin-top: 12px;

  padding: 10px 11px;

  border: 1px solid rgba(228, 185, 88, 0.3);

  border-radius: 10px;

  background: rgba(228, 185, 88, 0.1);
}

.ai-signal-ticker-label {
  color: #f2cf7c;

  font-size: 9px;

  font-weight: 900;

  letter-spacing: 0.65px;
}

.ai-signal-ticker-track {
  min-width: 0;

  overflow: hidden;
}

.ai-signal-ticker-item {
  display: block;

  min-width: 0;

  overflow: hidden;

  color: rgba(255, 255, 255, 0.97);

  font-size: 12px;

  font-weight: 800;

  line-height: 1.4;

  letter-spacing: -0.25px;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.ai-signal-ticker-item[hidden] {
  display: none !important;
}

.ai-signal-ticker-count {
  color: rgba(255, 255, 255, 0.42);

  font-size: 8px;

  font-weight: 800;

  font-variant-numeric: tabular-nums;
}

.ai-card-metrics {
  position: absolute;

  z-index: 4;

  top: 49px;
  right: 18px;

  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 8px;

  margin: 0;

  pointer-events: none;
}

.ai-card-metric {
  min-width: 0;

  display: inline-flex;

  align-items: baseline;

  gap: 3px;

  padding: 0;

  border: 0;

  border-radius: 0;

  background: transparent;
}

.ai-card-metric span,
.ai-card-metric strong {
  display: inline;
}

.ai-card-metric span {
  display: inline;

  color: rgba(255, 255, 255, 0.3);

  font-size: 7px;

  font-weight: 700;

  white-space: nowrap;
}

.ai-card-metric strong {
  display: inline;

  margin: 0;

  color: rgba(255, 255, 255, 0.5);

  font-size: 8px;

  font-weight: 800;

  line-height: 1.25;
}

.ai-card-feature {
  position: relative;

  z-index: 3;

  margin-top: 13px;
}

.ai-card-kicker {
  margin-bottom: 4px;

  color: #d9b35d;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 0.55px;
}

.ai-feature-link {
  min-width: 0;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 12px;

  padding: 9px 10px;

  border: 1px solid rgba(255, 255, 255, 0.1);

  border-radius: 10px;

  background: rgba(255, 255, 255, 0.07);

  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease;
}

.ai-feature-link.is-placeholder {
  cursor: default;
}

.ai-feature-copy {
  min-width: 0;
}

.ai-feature-copy strong,
.ai-feature-copy small {
  display: block;
}

.ai-feature-copy strong {
  overflow: hidden;

  color: #ffffff;

  font-size: 13px;

  font-weight: 800;

  line-height: 1.35;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.ai-feature-copy small {
  overflow: hidden;

  margin-top: 2px;

  color: rgba(255, 255, 255, 0.52);

  font-size: 9px;

  line-height: 1.4;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.ai-feature-arrow {
  width: 25px;
  height: 25px;

  flex: 0 0 25px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 8px;

  background: rgba(255, 255, 255, 0.09);

  color: rgba(255, 255, 255, 0.78);

  font-size: 12px;
}

/* ============================================================
   AI EXPERIMENT DETAIL
   카드 높이는 유지하고 상세 내용만 카드 안쪽에 띄운다.
   ============================================================ */

.ai-experiment-card {
  position: relative;
  min-width: 0;
}

.ai-experiment-trigger {
  width: 100%;
  margin: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ai-experiment-detail {
  position: absolute;

  z-index: 20;

  left: 0;
  right: 0;

  bottom: calc(100% + 7px);

  max-height: 138px;

  overflow-x: hidden;
  overflow-y: auto;

  padding: 10px 11px;

  border: 1px solid rgba(228, 185, 88, 0.26);

  border-radius: 10px;

  background: rgba(37, 40, 33, 0.985);

  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);

  box-sizing: border-box;
}

.ai-experiment-detail[hidden] {
  display: none !important;
}

.ai-experiment-card.is-open .ai-feature-link {
  border-color: rgba(228, 185, 88, 0.3);
  background: rgba(228, 185, 88, 0.1);
}

.ai-experiment-detail-body {
  margin: 0;

  color: rgba(255, 255, 255, 0.8);

  font-size: 9px;

  line-height: 1.55;

  word-break: keep-all;
}

.ai-experiment-detail-list {
  margin: 7px 0 0;
  padding: 0 0 0 16px;

  color: rgba(255, 255, 255, 0.72);

  font-size: 9px;

  line-height: 1.55;
}

.ai-experiment-detail-list li + li {
  margin-top: 3px;
}

.ai-experiment-detail-empty {
  margin: 0;

  color: rgba(255, 255, 255, 0.56);

  font-size: 9px;

  line-height: 1.5;
}

.ai-card-note {
  position: relative;

  z-index: 1;

  display: flex;

  align-items: flex-start;

  gap: 8px;

  margin-top: auto;

  padding-top: 10px;
}

.ai-card-note > span {
  flex: 0 0 auto;

  color: rgba(255, 255, 255, 0.42);

  font-size: 8px;

  font-weight: 800;

  letter-spacing: 0.5px;

  line-height: 1.5;
}

.ai-card-note p {
  display: -webkit-box;

  margin: 0;

  overflow: hidden;

  color: rgba(255, 255, 255, 0.6);

  font-size: 9px;

  line-height: 1.5;

  word-break: keep-all;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;
}

/* ============================================================
   EMPTY
   ============================================================ */

.empty-state {
  display: none;

  padding: 38px 20px;

  text-align: center;

  background: rgba(255, 255, 255, 0.55);

  border: 1px dashed var(--line);

  border-radius: var(--radius-lg);
}

.empty-state.show {
  display: block;
}

.empty-icon {
  font-size: 30px;
}

.empty-title {
  margin: 8px 0 3px;

  color: var(--text);

  font-size: 16px;

  font-weight: 800;
}

.empty-desc {
  margin: 0;

  color: var(--text-soft);

  font-size: 12px;
}

/* ============================================================
   ABOUT
   ============================================================ */

.lab-section {
  padding: 0 0 45px;
}

.lab-box {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 24px;

  padding: 23px 27px;

  background: var(--brand);

  color: #ffffff;

  border-radius: var(--radius-lg);

  overflow: hidden;
}

.lab-title {
  margin: 0;

  color: #ffffff;

  font-size: 20px;

  line-height: 1.35;

  letter-spacing: -0.8px;

  word-break: keep-all;
}

.lab-desc {
  max-width: 650px;

  margin: 6px 0 0;

  color: rgba(255, 255, 255, 0.7);

  font-size: 12px;

  line-height: 1.6;

  word-break: keep-all;
}

.random-tool-button {
  min-width: 140px;

  min-height: 40px;

  border: 0;

  padding: 10px 14px;

  border-radius: 10px;

  background: #ffffff;

  color: var(--brand);

  font-size: 12px;

  font-weight: 800;

  cursor: pointer;

  transition:
    transform 0.15s ease,
    background 0.15s ease;
}

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
  border-top: 1px solid var(--line);

  padding: 18px 0 24px;
}

.footer-inner {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  color: var(--text-soft);

  font-size: 11px;
}

.footer-links {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 15px;
}

.footer-links a {
  color: var(--text-soft);

  transition: color 0.15s ease;
}

/* ============================================================
   HOVER
   ============================================================ */

@media (hover: hover) and (pointer: fine) {
  .small-link:hover {
    background: rgba(0, 0, 0, 0.04);

    color: var(--text);
  }

  .search-clear:hover {
    background: var(--surface-soft);
  }

  .category-button:hover {
    transform: translateY(-1px);

    border-color: #d8d2c6;
  }

  .tool-card:hover {
    transform: translateY(-2px);

    border-color: #d8d3c7;

    box-shadow: 0 8px 22px rgba(30, 30, 25, 0.07);
  }

  .tool-card:hover .tool-arrow {
    transform: translateX(2px);

    background: #eceae4;
  }

  .tool-more-button:hover {
    transform: translateY(-1px);

    border-color: #cfc9bc;

    background: var(--brand);

    color: #ffffff;

    box-shadow: 0 4px 12px rgba(30, 30, 25, 0.08);
  }

  .ai-feature-link[href]:hover {
    transform: translateY(-1px);

    border-color: rgba(255, 255, 255, 0.17);

    background: rgba(255, 255, 255, 0.11);
  }

  .random-tool-button:hover {
    transform: translateY(-2px);

    background: #f7f7f4;
  }

  .footer-links a:hover {
    color: var(--text);
  }
}

/* ============================================================
   TABLET
   960px 이하
   ============================================================ */

@media (max-width: 960px) {
  .tool-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ai-operator-card {
    grid-column: 1 / -1;

    grid-row: auto;

    min-height: 0;

    padding: 17px;
  }

  .ai-card-title {
    max-width: 100%;

    font-size: 19px;
  }

  .ai-card-desc {
    max-width: 100%;
  }

  .ai-card-note {
    margin-top: 11px;
  }
}

/* ============================================================
   SMALL TABLET
   760px 이하
   ============================================================ */

@media (max-width: 760px) {
  .container {
    width: calc(100% - 30px);
  }

  .hero {
    padding: 36px 0 23px;
  }

  .hero h1 {
    font-size: clamp(30px, 6.3vw, 42px);

    letter-spacing: -1.8px;

    white-space: nowrap;
  }

  .hero-desc {
    font-size: 13px;
  }

  .tool-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ai-operator-card {
    grid-column: 1 / -1;

    padding: 16px;

    border-radius: 16px;
  }

  .ai-card-main {
    margin-top: 13px;
  }

  .ai-card-title {
    font-size: 18px;
  }

  .ai-card-metrics {
    margin-top: 12px;
  }

  .lab-box {
    grid-template-columns: 1fr;

    gap: 16px;
  }

  .random-tool-button {
    width: 100%;
  }
}

/* ============================================================
   MOBILE
   520px 이하
   ============================================================ */

@media (max-width: 520px) {
  .container {
    width: calc(100% - 24px);
  }

  .header-inner {
    min-height: 54px;
  }

  .brand {
    gap: 7px;

    font-size: 17px;
  }

  .brand-mark {
    width: 30px;
    height: 30px;

    flex-basis: 30px;

    border-radius: 9px;

    font-size: 16px;
  }

  .small-link {
    display: none;
  }

  .hero {
    padding: 27px 0 18px;
  }

  .hero-badge {
    margin-bottom: 9px;

    padding: 4px 9px;

    font-size: 10px;
  }

  .hero h1 {
    width: 100%;

    font-size: clamp(20px, 6.7vw, 27px);

    line-height: 1.2;

    letter-spacing: -1.15px;

    white-space: nowrap;
  }

  .hero-desc {
    max-width: 340px;

    margin-top: 9px;

    padding: 0 3px;

    font-size: 12px;

    line-height: 1.55;
  }

  .search-wrap {
    margin-top: 16px;
  }

  #toolSearch {
    height: 48px;

    font-size: 16px;

    padding: 0 43px;

    border-radius: 14px;
  }

  #toolSearch::placeholder {
    font-size: 13px;
  }

  .search-icon {
    left: 15px;

    font-size: 17px;
  }

  .search-clear {
    right: 9px;

    width: 30px;
    height: 30px;

    font-size: 11px;
  }

  .category-section {
    margin-top: 14px;
  }

  .category-list {
    width: 100%;

    justify-content: flex-start;

    flex-wrap: nowrap;

    overflow-x: auto;
    overflow-y: hidden;

    gap: 6px;

    padding: 1px 1px 5px;

    scroll-behavior: smooth;

    scrollbar-width: none;

    -webkit-overflow-scrolling: touch;

    overscroll-behavior-x: contain;
  }

  .category-list::-webkit-scrollbar {
    display: none;
  }

  .category-button {
    flex: 0 0 auto;

    min-height: 34px;

    padding: 6px 10px;

    font-size: 11px;
  }

  .category-button-icon {
    font-size: 12px;
  }

  .tools-section {
    padding: 14px 0 34px;
  }

  .section-head {
    align-items: center;

    gap: 10px;

    margin-bottom: 10px;
  }

  .section-eyebrow {
    font-size: 9px;
  }

  .section-title {
    font-size: 20px;

    letter-spacing: -0.7px;
  }

  .tool-count {
    font-size: 10px;
  }

  .tool-grid {
    grid-template-columns: 1fr;

    gap: 9px;
  }

  .tool-more-wrap {
    margin-top: 8px;
  }

  .tool-more-button {
    width: 32px;
    height: 32px;

    flex-basis: 32px;

    font-size: 20px;
  }

  .tool-card {
    min-height: 145px;

    padding: 14px;

    border-radius: 13px;
  }

  .card-top {
    gap: 8px;
  }

  .tool-icon {
    width: 36px;
    height: 36px;

    flex-basis: 36px;

    border-radius: 9px;

    font-size: 18px;
  }

  .tool-tag {
    padding: 3px 6px;

    font-size: 9px;
  }

  .tool-title {
    margin: 9px 0 3px;

    font-size: 14px;

    line-height: 1.35;
  }

  .tool-description {
    font-size: 11px;

    line-height: 1.45;
  }

  .card-bottom {
    padding-top: 8px;
  }

  .tool-category {
    font-size: 10px;
  }

  .tool-arrow {
    width: 23px;
    height: 23px;

    flex-basis: 23px;

    font-size: 11px;
  }

  /* AI */

  .ai-operator-card {
    grid-column: 1;

    grid-row: auto;

    min-height: 0;

    padding: 15px;

    border-radius: 15px;
  }

  .ai-card-brand {
    font-size: 9px;
  }

  .ai-status-badge {
    padding: 3px 7px;

    font-size: 8px;
  }

  .ai-card-main {
    margin-top: 12px;
  }

  .ai-card-title {
    font-size: 17px;

    line-height: 1.4;
  }

  .ai-card-desc {
    margin-top: 5px;

    font-size: 10px;
  }

  .ai-signal-ticker {
    gap: 6px;

    margin-top: 9px;

    padding: 6px 8px;
  }

  .ai-signal-ticker-item {
    font-size: 8px;
  }

  .ai-card-metrics {
    gap: 5px;

    margin-top: 11px;
  }

  .ai-card-metric {
    padding: 7px 8px;
  }

  .ai-card-metric span {
    font-size: 8px;
  }

  .ai-card-metric strong {
    font-size: 14px;
  }

  .ai-card-feature {
    margin-top: 11px;
  }

  .ai-feature-link {
    padding: 8px 9px;
  }

  .ai-feature-copy strong {
    font-size: 11px;
  }

  .ai-feature-copy small {
    font-size: 8px;
  }

  .ai-card-note {
    gap: 6px;

    margin-top: 10px;

    padding-top: 0;
  }

  .ai-card-note p {
    font-size: 8px;
  }

  .empty-state {
    padding: 28px 16px;
  }

  .empty-icon {
    font-size: 27px;
  }

  .empty-title {
    font-size: 15px;
  }

  .empty-desc {
    font-size: 11px;
  }

  .lab-section {
    padding-bottom: 32px;
  }

  .lab-box {
    grid-template-columns: 1fr;

    gap: 14px;

    padding: 19px 18px;

    border-radius: 18px;
  }

  .lab-title {
    font-size: 18px;

    line-height: 1.4;
  }

  .lab-desc {
    margin-top: 5px;

    font-size: 11px;

    line-height: 1.6;
  }

  .random-tool-button {
    width: 100%;

    min-width: 0;

    min-height: 42px;

    padding: 10px 12px;

    font-size: 12px;
  }

  .site-footer {
    padding: 16px 0 20px;
  }

  .footer-inner {
    flex-direction: column;

    align-items: flex-start;

    gap: 8px;
  }

  .footer-links {
    gap: 12px;
  }
}

/* ============================================================
   SMALL MOBILE
   360px 이하
   ============================================================ */

@media (max-width: 360px) {
  .container {
    width: calc(100% - 20px);
  }

  .hero {
    padding-top: 25px;
  }

  .hero h1 {
    font-size: 20px;

    letter-spacing: -1px;
  }

  .hero-desc {
    font-size: 11px;
  }

  #toolSearch {
    height: 46px;
  }

  .category-button {
    min-height: 32px;

    padding: 5px 9px;

    font-size: 10px;
  }

  .section-title {
    font-size: 19px;
  }

  .tool-card {
    min-height: 142px;

    padding: 13px;
  }

  .tool-more-button {
    width: 30px;
    height: 30px;

    flex-basis: 30px;

    font-size: 19px;
  }

  .ai-operator-card {
    padding: 14px;
  }

  .ai-card-title {
    font-size: 16px;
  }

  .lab-box {
    padding: 18px 16px;
  }

  .lab-title {
    font-size: 17px;
  }
}

/* ============================================================
   PHASE 7 UI HIERARCHY OVERRIDES
   외부 시그널 > 오늘의 깨알 > 운영 상태/통계
   ============================================================ */

@media (max-width: 960px) {
  .ai-card-title {
    max-width: 72%;
    font-size: 12px;
  }

  .ai-card-desc {
    max-width: 78%;
    font-size: 9px;
  }

  .ai-card-metrics {
    top: 47px;
    right: 17px;
    gap: 6px;
  }

  .ai-signal-ticker-item {
    font-size: 11px;
  }
}

@media (max-width: 760px) {
  .ai-card-main {
    margin-top: 13px;
  }

  .ai-card-title {
    max-width: 68%;
    font-size: 12px;
  }

  .ai-card-desc {
    max-width: 74%;
    font-size: 9px;
  }

  .ai-card-metrics {
    top: 45px;
    right: 16px;
    gap: 5px;
  }

  .ai-card-metric span {
    font-size: 7px;
  }

  .ai-card-metric strong {
    font-size: 8px;
  }
}

@media (max-width: 520px) {
  .ai-card-main {
    margin-top: 28px;
  }

  .ai-card-title {
    max-width: 100%;
    font-size: 11px;
    line-height: 1.4;
  }

  .ai-card-desc {
    max-width: 100%;
    margin-top: 3px;
    font-size: 8px;
  }

  .ai-card-metrics {
    top: 46px;
    right: 15px;
    gap: 6px;
  }

  .ai-card-metric span {
    font-size: 6px;
  }

  .ai-card-metric strong {
    font-size: 7px;
  }

  .ai-signal-ticker {
    gap: 6px;
    margin-top: 9px;
    padding: 9px 9px;
  }

  .ai-signal-ticker-label {
    font-size: 8px;
  }

  .ai-signal-ticker-item {
    font-size: 10px;
  }

  .ai-card-feature {
    margin-top: 10px;
  }

  .ai-feature-copy strong {
    font-size: 11px;
  }

  .ai-experiment-detail {
    max-height: 128px;
    padding: 9px 10px;
  }
}

/* ============================================================
   PHASE 7 UI - FINAL CARD HIERARCHY
   ------------------------------------------------------------
   1. HEADER  : 🤖 KKAEAL AI + tiny metrics + status
   2. AI PICK : main content (game / research / fortune / poll...)
   3. NOW     : external signal ticker at the bottom
   ============================================================ */

.ai-operator-card {
  height: 347px;
  min-height: 347px;

  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;

  overflow: hidden;
}

/* ------------------------------------------------------------
   HEADER
   ------------------------------------------------------------ */

.ai-card-head {
  position: relative;
  z-index: 5;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  min-width: 0;
}

.ai-card-brand {
  min-width: 0;

  display: inline-flex;
  align-items: center;
  gap: 7px;

  color: rgba(255, 255, 255, 0.88);

  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.7px;
  white-space: nowrap;
}

.ai-bot-icon {
  width: 22px;
  height: 22px;

  flex: 0 0 22px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(228, 185, 88, 0.22);
  border-radius: 7px;

  background: rgba(228, 185, 88, 0.1);

  font-size: 13px;
  line-height: 1;
}

.ai-card-head-right {
  min-width: 0;

  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.ai-card-metrics {
  position: static;
  inset: auto;
  z-index: auto;

  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;

  margin: 0;

  pointer-events: none;
}

.ai-card-metric {
  min-width: 0;

  display: inline-flex;
  align-items: baseline;
  gap: 3px;

  padding: 0;
  border: 0;
  background: transparent;
}

.ai-card-metric span {
  color: rgba(255, 255, 255, 0.38);

  font-size: 7px;
  font-weight: 700;

  white-space: nowrap;
}

.ai-card-metric strong {
  margin: 0;

  color: rgba(255, 255, 255, 0.8);

  font-size: 9px;
  font-weight: 900;
  line-height: 1;
}

.ai-status-badge {
  flex: 0 0 auto;

  padding: 4px 8px;

  border: 1px solid rgba(228, 185, 88, 0.26);
  border-radius: 999px;

  background: rgba(228, 185, 88, 0.11);

  color: #f1d38b;

  font-size: 8px;
  font-weight: 850;
  line-height: 1.2;

  white-space: nowrap;
}

/* 이전 운영문구 영역은 더 이상 사용하지 않음 */
.ai-card-main,
.ai-card-note {
  display: none !important;
}

/* ------------------------------------------------------------
   AI PICK - CARD MAIN
   ------------------------------------------------------------ */

.ai-card-feature {
  position: relative;
  z-index: 3;

  min-width: 0;
  min-height: 0;

  margin: 0;
  padding: 14px;

  display: flex;
  flex-direction: column;

  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 13px;

  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.085),
    rgba(255, 255, 255, 0.035)
  );

  overflow: hidden;
}

.ai-card-kicker {
  flex: 0 0 auto;

  display: flex;
  align-items: center;
  gap: 7px;

  margin: 0 0 8px;

  color: #e3ba5b;

  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.8px;
}

.ai-pick-test-badge {
  padding: 2px 6px;

  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;

  background: rgba(255, 255, 255, 0.055);

  color: rgba(255, 255, 255, 0.48);

  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.35px;
}

.ai-experiment-card {
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;

  display: flex;
  flex-direction: column;

  position: relative;
}

.ai-feature-link {
  width: 100%;
  min-width: 0;
  flex: 0 0 auto;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  padding: 13px 13px;

  border: 1px solid rgba(228, 185, 88, 0.19);
  border-radius: 11px;

  background: rgba(228, 185, 88, 0.075);

  box-sizing: border-box;

  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}

.ai-experiment-trigger {
  margin: 0;

  color: inherit;
  font: inherit;
  text-align: left;

  cursor: pointer;
}

.ai-feature-link.is-placeholder {
  cursor: default;
}

.ai-feature-copy {
  min-width: 0;
}

.ai-feature-copy strong,
.ai-feature-copy small {
  display: block;
}

.ai-feature-copy strong {
  overflow: hidden;

  color: #ffffff;

  font-size: 17px;
  font-weight: 900;
  line-height: 1.32;
  letter-spacing: -0.45px;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-feature-copy small {
  display: -webkit-box;

  margin-top: 5px;

  overflow: hidden;

  color: rgba(255, 255, 255, 0.62);

  font-size: 10px;
  line-height: 1.48;

  white-space: normal;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.ai-feature-arrow {
  width: 30px;
  height: 30px;

  flex: 0 0 30px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 9px;

  background: rgba(255, 255, 255, 0.09);

  color: rgba(255, 255, 255, 0.85);

  font-size: 15px;
  font-weight: 700;
}

.ai-experiment-card.is-open .ai-feature-link {
  border-color: rgba(228, 185, 88, 0.34);
  background: rgba(228, 185, 88, 0.11);
}

/*
 * + 상세:
 * 팝업 금지.
 * AI PICK 안에서 아래로 펼쳐지고,
 * 남는 공간만 사용하며 내용이 길면 내부 스크롤.
 */
.ai-experiment-detail {
  position: static;
  inset: auto;
  z-index: auto;

  min-height: 0;
  flex: 1 1 auto;

  margin-top: 7px;
  padding: 9px 11px;

  overflow-x: hidden;
  overflow-y: auto;

  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 9px;

  background: rgba(0, 0, 0, 0.1);

  box-shadow: none;

  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.ai-experiment-detail[hidden] {
  display: none !important;
}

.ai-experiment-detail-body {
  margin: 0;

  color: rgba(255, 255, 255, 0.78);

  font-size: 9px;
  line-height: 1.55;

  word-break: keep-all;
}

.ai-experiment-detail-list {
  margin: 7px 0 0;
  padding-left: 16px;

  color: rgba(255, 255, 255, 0.7);

  font-size: 9px;
  line-height: 1.52;
}

.ai-experiment-detail-list li + li {
  margin-top: 2px;
}

.ai-experiment-detail-empty {
  margin: 0;

  color: rgba(255, 255, 255, 0.52);

  font-size: 9px;
  line-height: 1.5;
}

.ai-pick-note {
  min-width: 0;

  margin-top: auto;
  padding-top: 9px;

  overflow: hidden;

  color: rgba(255, 255, 255, 0.36);

  font-size: 8px;
  line-height: 1.4;

  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 상세가 열리면 note는 숨겨서 공간 확보 */
.ai-card-feature:has(.ai-experiment-card.is-open) .ai-pick-note {
  display: none;
}

/* ------------------------------------------------------------
   NOW - BOTTOM SIGNAL
   뉴스/외부 시그널은 보조정보
   ------------------------------------------------------------ */

.ai-signal-ticker {
  position: relative;
  z-index: 2;

  min-width: 0;

  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;

  margin: 0;
  padding: 8px 3px 0;

  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;

  background: transparent;
}

.ai-signal-ticker-label {
  color: rgba(228, 185, 88, 0.78);

  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.7px;
}

.ai-signal-ticker-track {
  min-width: 0;
  overflow: hidden;
}

.ai-signal-ticker-item {
  display: block;

  min-width: 0;
  overflow: hidden;

  color: rgba(255, 255, 255, 0.58);

  font-size: 9px;
  font-weight: 700;
  line-height: 1.35;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-signal-ticker-item[hidden] {
  display: none !important;
}

.ai-signal-ticker-count {
  color: rgba(255, 255, 255, 0.26);

  font-size: 7px;
  font-weight: 800;

  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------
   TABLET
   ------------------------------------------------------------ */

@media (max-width: 960px) {
  .ai-operator-card {
    height: 350px;
    min-height: 350px;

    grid-column: 1 / -1;
    grid-row: auto;
  }

  .ai-card-head-right {
    gap: 8px;
  }

  .ai-card-metrics {
    gap: 7px;
  }

  .ai-feature-copy strong {
    font-size: 16px;
  }
}

/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 520px) {
  .ai-operator-card {
    height: 365px;
    min-height: 365px;

    grid-column: 1;
    grid-row: auto;

    gap: 10px;
    padding: 14px;
  }

  .ai-card-head {
    align-items: flex-start;
  }

  .ai-card-head-right {
    flex-wrap: wrap;
    gap: 5px 8px;
  }

  .ai-card-metrics {
    order: 2;

    width: 100%;

    justify-content: flex-end;
    gap: 6px;
  }

  .ai-status-badge {
    order: 1;
    margin-left: auto;
  }

  .ai-card-metric span {
    font-size: 6px;
  }

  .ai-card-metric strong {
    font-size: 8px;
  }

  .ai-card-feature {
    padding: 11px;
  }

  .ai-feature-link {
    padding: 11px;
  }

  .ai-feature-copy strong {
    font-size: 14px;
  }

  .ai-feature-copy small {
    font-size: 9px;
  }

  .ai-feature-arrow {
    width: 28px;
    height: 28px;

    flex-basis: 28px;
  }

  .ai-pick-note {
    font-size: 7px;
  }

  .ai-signal-ticker-item {
    font-size: 8px;
  }
}

/* ============================================================
   AI CARD VISIBILITY TUNING
   깨봇 확대 · 카드 명도 상승 · 롤링 뉴스 강조
   ============================================================ */

.ai-operator-card {
  gap: 9px;
  padding-top: 14px;
  border-color: rgba(151, 185, 255, 0.22);
  background:
    radial-gradient(
      circle at 92% 4%,
      rgba(121, 145, 255, 0.3),
      transparent 37%
    ),
    radial-gradient(
      circle at 8% 100%,
      rgba(80, 208, 255, 0.14),
      transparent 40%
    ),
    linear-gradient(145deg, #303d68 0%, #263457 55%, #202b49 100%);
  box-shadow: 0 12px 30px rgba(27, 39, 73, 0.2);
}

.ai-card-head {
  min-height: 31px;
  line-height: 1;
}

.ai-card-head-right {
  line-height: 1;
}

.ai-card-brand {
  gap: 9px;
  color: rgba(255, 255, 255, 0.96);
  font-size: 11px;
}

.ai-bot-icon {
  width: 31px;
  height: 31px;
  flex-basis: 31px;
  border-color: rgba(151, 194, 255, 0.46);
  border-radius: 9px;
  background: rgba(125, 174, 255, 0.2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  font-size: 19px;
}

.ai-card-metric span {
  color: rgba(255, 255, 255, 0.58);
}

.ai-card-metric strong {
  color: #ffffff;
}

.ai-status-badge {
  border-color: rgba(135, 193, 255, 0.34);
  background: rgba(111, 163, 255, 0.16);
  color: #b9ddff;
}

.ai-card-feature {
  border-color: rgba(167, 197, 255, 0.22);
  background: linear-gradient(
    135deg,
    rgba(136, 170, 255, 0.16),
    rgba(255, 255, 255, 0.07)
  );
}

.ai-card-kicker {
  color: #8ed8ff;
}

.ai-pick-test-badge {
  border-color: rgba(156, 198, 255, 0.2);
  background: rgba(121, 170, 255, 0.12);
  color: rgba(220, 235, 255, 0.72);
}

.ai-feature-link {
  border-color: rgba(135, 193, 255, 0.32);
  background: rgba(111, 163, 255, 0.14);
}

.ai-feature-copy small {
  color: rgba(255, 255, 255, 0.76);
}

.ai-feature-arrow {
  background: rgba(119, 177, 255, 0.18);
  color: #d8ecff;
}

.ai-signal-ticker {
  gap: 10px;
  padding: 10px 11px;
  border: 1px solid rgba(126, 191, 255, 0.3);
  border-radius: 10px;
  background: rgba(113, 168, 255, 0.11);
}

.ai-signal-ticker-label {
  color: #9fdcff;
  font-size: 9px;
}

.ai-signal-ticker-item {
  color: rgba(255, 255, 255, 0.94);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.ai-signal-ticker-count {
  color: rgba(255, 255, 255, 0.54);
  font-size: 8px;
}

@media (max-width: 520px) {
  .ai-bot-icon {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
    font-size: 17px;
  }

  .ai-card-brand {
    font-size: 10px;
  }

  .ai-signal-ticker {
    padding: 9px;
  }

  .ai-signal-ticker-item {
    font-size: 10px;
  }
}

/* ============================================================
   DESKTOP GRID HEIGHT SYNC
   일반 카드 168px × 2 + 행 간격 11px = AI 카드 347px
   행 높이 자체를 고정하여 실제 렌더링 높이까지 정확히 일치
   ============================================================ */

@media (min-width: 961px) {
  .tool-grid {
    --tool-row-height: 168px;
    --tool-row-gap: 11px;

    gap: var(--tool-row-gap);
    grid-auto-rows: var(--tool-row-height);
  }

  .tool-card {
    height: var(--tool-row-height);
    min-height: var(--tool-row-height);
  }

  .ai-operator-card {
    height: calc((var(--tool-row-height) * 2) + var(--tool-row-gap));
    min-height: calc((var(--tool-row-height) * 2) + var(--tool-row-gap));
    align-self: stretch;
  }
}

/* ============================================================
   PHASE 9
   KKAeAL AI EDITORIAL STORY + FLOATING SERVICE SHOWCASE
   ------------------------------------------------------------
   깨봇을 기계적인 2분할이 아니라
   사회 흐름 → 깨봇 해석 → AI 제작 서비스가
   한 화면 안에서 자연스럽게 이어지는 편집형 카드로 구성한다.
   ============================================================ */

/* ============================================================
   BUILDER FEATURE SURFACE
   ============================================================ */

.ai-operator-card.is-builder-preview .ai-card-feature {
  position: relative;

  min-width: 0;
  min-height: 0;

  padding: 12px 13px 13px;

  overflow: hidden;

  border-color: rgba(160, 203, 255, 0.24);

  background:
    radial-gradient(
      circle at 88% 10%,
      rgba(143, 197, 255, 0.18),
      transparent 30%
    ),
    radial-gradient(
      circle at 18% 110%,
      rgba(105, 228, 220, 0.1),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      rgba(121, 164, 255, 0.13),
      rgba(255, 255, 255, 0.045) 48%,
      rgba(255, 255, 255, 0.025)
    );
}

.ai-operator-card.is-builder-preview .ai-card-feature::before {
  content: '';

  position: absolute;
  inset: 0;

  pointer-events: none;

  opacity: 0.48;

  background-image: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.13) 1px,
    transparent 1.2px
  );

  background-size: 18px 18px;

  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.28) 55%,
    rgba(0, 0, 0, 0.82) 100%
  );

  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.28) 55%,
    rgba(0, 0, 0, 0.82) 100%
  );
}

.ai-operator-card.is-builder-preview .ai-card-kicker {
  position: relative;
  z-index: 5;

  margin-bottom: 6px;
}

.ai-operator-card.is-builder-preview .ai-pick-test-badge {
  border-color: rgba(151, 202, 255, 0.22);
  background: rgba(119, 171, 255, 0.11);
  color: rgba(214, 235, 255, 0.72);
}

/* ============================================================
   EDITORIAL STAGE
   ============================================================ */

.ai-builder-stage {
  position: relative;
  z-index: 2;

  min-width: 0;
  min-height: 0;

  flex: 1 1 auto;

  overflow: hidden;
}

.ai-builder-story {
  position: relative;
  z-index: 2;

  width: 64%;
  min-width: 0;

  padding: 5px 8px 4px 2px;
}

.ai-builder-story-eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;

  min-width: 0;

  color: rgba(164, 222, 255, 0.8);

  font-size: 8px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.48px;
}

.ai-builder-live-dot {
  width: 6px;
  height: 6px;

  flex: 0 0 6px;

  border-radius: 50%;

  background: #71dcff;

  box-shadow:
    0 0 0 4px rgba(113, 220, 255, 0.08),
    0 0 12px rgba(113, 220, 255, 0.52);
}

.ai-builder-story-title {
  display: -webkit-box;

  max-width: 96%;

  margin: 8px 0 0;

  overflow: hidden;

  color: #ffffff;

  font-size: 16px;
  font-weight: 900;
  line-height: 1.34;
  letter-spacing: -0.48px;

  word-break: keep-all;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* ============================================================
   BOT THOUGHT
   ============================================================ */

.ai-builder-thought {
  max-width: 94%;

  margin-top: 11px;
  padding: 9px 10px;

  display: flex;
  align-items: flex-start;
  gap: 8px;

  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 11px;

  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.075),
    rgba(255, 255, 255, 0.025)
  );

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.ai-builder-thought-mark {
  width: 22px;
  height: 22px;

  flex: 0 0 22px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 7px;

  background: rgba(124, 191, 255, 0.14);

  color: #a9deff;

  font-size: 11px;
  line-height: 1;
}

.ai-builder-thought-copy {
  min-width: 0;
}

.ai-builder-thought-copy > span {
  display: block;

  margin-bottom: 2px;

  color: rgba(177, 219, 255, 0.63);

  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.38px;
}

.ai-builder-thought-copy p {
  display: -webkit-box;

  margin: 0;

  overflow: hidden;

  color: rgba(255, 255, 255, 0.78);

  font-size: 11px;

  line-height: 1.6;

  word-break: keep-all;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 3;
}

/* ============================================================
   FLOATING SERVICE SHOWCASE
   ------------------------------------------------------------
   정확한 좌우 분할선 없이 오른쪽 아래에 하나의 카드가
   떠 있는 것처럼 보여준다.
   ============================================================ */

.ai-builder-showcase {
  position: absolute;

  z-index: 4;

  right: 0;
  bottom: 0;

  width: 38%;
  max-width: 205px;
  min-width: 168px;

  display: block;

  margin: 0;
  padding: 0;

  overflow: hidden;

  border: 1px solid rgba(188, 219, 255, 0.24);
  border-radius: 15px;

  background: linear-gradient(
    160deg,
    rgba(244, 250, 255, 0.98),
    rgba(226, 239, 255, 0.95)
  );

  color: #263451;

  text-align: left;

  box-shadow:
    0 15px 30px rgba(7, 16, 38, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);

  cursor: pointer;

  transform: translate3d(0, 1px, 0) rotate(-0.45deg);

  transform-origin: 80% 100%;

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.ai-builder-showcase:hover {
  border-color: rgba(194, 226, 255, 0.48);

  box-shadow:
    0 18px 35px rgba(7, 16, 38, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);

  transform: translate3d(0, -3px, 0) rotate(0deg);
}

.ai-builder-showcase:focus-visible {
  outline: 3px solid rgba(132, 206, 255, 0.42);
  outline-offset: 2px;
}

/* 썸네일처럼 보이는 비주얼 영역 */
.ai-builder-showcase-art {
  position: relative;

  height: 72px;

  display: block;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 78% 20%,
      rgba(255, 255, 255, 0.86),
      transparent 18%
    ),
    linear-gradient(135deg, #80c8ff 0%, #799eea 46%, #6b79cc 100%);
}

.ai-builder-showcase-art::after {
  content: '';

  position: absolute;

  left: -22px;
  bottom: -40px;

  width: 118px;
  height: 90px;

  border: 1px solid rgba(255, 255, 255, 0.23);
  border-radius: 50%;

  transform: rotate(-12deg);
}

.ai-builder-showcase-orbit {
  position: absolute;

  display: block;

  border: 1px solid rgba(255, 255, 255, 0.23);
  border-radius: 50%;
}

.ai-builder-showcase-orbit.orbit-a {
  width: 70px;
  height: 70px;

  right: -16px;
  top: -29px;
}

.ai-builder-showcase-orbit.orbit-b {
  width: 44px;
  height: 44px;

  right: 19px;
  top: 18px;
}

.ai-builder-showcase-icon {
  position: absolute;

  left: 13px;
  bottom: 8px;

  min-width: 40px;
  min-height: 40px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #ffffff;

  font-size: 29px;
  font-weight: 900;
  line-height: 1;

  text-shadow: 0 5px 14px rgba(29, 49, 95, 0.24);
}

.ai-builder-showcase-run {
  position: absolute;

  top: 9px;
  right: 9px;

  padding: 3px 5px;

  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;

  background: rgba(29, 46, 91, 0.15);

  color: rgba(255, 255, 255, 0.9);

  font-size: 6px;
  font-weight: 900;
  letter-spacing: 0.34px;
}

.ai-builder-showcase-body {
  display: block;

  padding: 9px 10px 10px;
}

.ai-builder-showcase-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;

  color: #6a7896;

  font-size: 6px;
  font-weight: 900;
  letter-spacing: 0.42px;
}

.ai-builder-showcase-ai {
  color: #7b8ba9;
  white-space: nowrap;
}

.ai-builder-showcase-title {
  display: -webkit-box;

  min-height: 29px;

  margin-top: 5px;

  overflow: hidden;

  color: #263451;

  font-size: 11px;
  font-weight: 900;
  line-height: 1.32;
  letter-spacing: -0.26px;

  word-break: keep-all;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.ai-builder-showcase-open {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;

  margin-top: 7px;

  color: #5376ab;

  font-size: 7px;
  font-weight: 900;
}

.ai-builder-showcase-open > span {
  width: 17px;
  height: 17px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 6px;

  background: rgba(92, 127, 184, 0.1);

  font-size: 9px;
}

/* ============================================================
   TABLET / NARROW DESKTOP
   ============================================================ */

@media (max-width: 960px) {
  .ai-builder-story {
    width: 62%;
  }

  .ai-builder-showcase {
    width: 36%;
    max-width: 220px;
  }
}

/* ============================================================
   MOBILE
   ------------------------------------------------------------
   모바일에서는 겹침을 풀고 자연스러운 세로 흐름으로 바꾼다.
   ============================================================ */

@media (max-width: 520px) {
  .ai-operator-card.is-builder-preview {
    height: 390px;
    min-height: 390px;
  }

  .ai-operator-card.is-builder-preview .ai-card-feature {
    padding: 10px 11px;
  }

  .ai-builder-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 8px;

    overflow: visible;
  }

  .ai-builder-story {
    width: 100%;

    padding: 2px 1px 0;
  }

  .ai-builder-story-title {
    max-width: 100%;

    margin-top: 6px;

    font-size: 13px;

    -webkit-line-clamp: 2;
  }

  .ai-builder-thought {
    max-width: 100%;

    margin-top: 7px;
    padding: 7px 8px;
  }

  .ai-builder-thought-copy p {
    font-size: 8px;

    -webkit-line-clamp: 2;
  }

  .ai-builder-showcase {
    position: relative;

    right: auto;
    bottom: auto;

    width: 100%;
    max-width: none;
    min-width: 0;

    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);

    transform: none;
  }

  .ai-builder-showcase:hover {
    transform: translateY(-1px);
  }

  .ai-builder-showcase-art {
    height: auto;
    min-height: 82px;
  }

  .ai-builder-showcase-icon {
    left: 50%;
    bottom: 17px;

    transform: translateX(-50%);

    font-size: 27px;
  }

  .ai-builder-showcase-run {
    top: 7px;
    right: 7px;
  }

  .ai-builder-showcase-body {
    display: flex;
    flex-direction: column;
    justify-content: center;

    min-width: 0;

    padding: 8px 10px;
  }

  .ai-builder-showcase-title {
    min-height: 0;

    font-size: 10px;

    -webkit-line-clamp: 2;
  }

  .ai-builder-showcase-open {
    margin-top: 5px;
  }
}
/* ============================================================
   PHASE 9 FINAL VISIBILITY FIX
   ------------------------------------------------------------
   1. 오른쪽 AI 서비스 카드 항상 선명하게
   2. 왼쪽 사회 흐름 / 깨봇 생각 말줄임 제거
   ============================================================ */

/* ============================================================
   RIGHT SERVICE CARD
   항상 선명하게
   ============================================================ */

.ai-builder-showcase {
  opacity: 1 !important;

  filter: none !important;
  -webkit-filter: none !important;

  /*
   * 소수점 회전 때문에 글자/그래픽이 흐려지는 현상 제거
   */
  transform: none !important;

  /*
   * 불필요한 GPU rasterization 방지
   */
  backface-visibility: visible;
  -webkit-backface-visibility: visible;

  image-rendering: auto;
}

/*
 * hover 시에도 회전하지 않고
 * 위로 살짝 움직이는 정도만 적용
 */
.ai-builder-showcase:hover {
  opacity: 1 !important;

  filter: none !important;
  -webkit-filter: none !important;

  transform: translateY(-2px) !important;
}

/* 오른쪽 썸네일 비주얼도 항상 선명 */
.ai-builder-showcase-art {
  opacity: 1 !important;

  filter: none !important;
  -webkit-filter: none !important;
}

.ai-builder-showcase-icon {
  opacity: 1 !important;

  filter: none !important;
  -webkit-filter: none !important;
}

/* ============================================================
   LEFT STORY
   텍스트 말줄임 / 잘림 완전 제거
   ============================================================ */

.ai-builder-stage {
  /*
   * 내부 텍스트 자체가 잘리는 것 방지
   */
  overflow: visible;
}

.ai-builder-story {
  /*
   * 서비스 카드와 겹치지 않을 정도의 영역 확보
   */
  width: 61%;

  min-width: 0;

  padding-right: 10px;
}

/* 사회 흐름 제목 */
.ai-builder-story-title {
  display: block;

  max-width: 100%;

  overflow: visible;

  text-overflow: clip;

  white-space: normal;

  word-break: keep-all;
  overflow-wrap: break-word;

  -webkit-box-orient: unset;
  -webkit-line-clamp: unset;

  line-clamp: unset;
}

/* ============================================================
   깨봇 생각
   ============================================================ */

.ai-builder-thought {
  max-width: 100%;
}

.ai-builder-thought-copy {
  min-width: 0;
}

/* 깨봇 생각 본문 */
.ai-builder-thought-copy p {
  display: block;

  overflow: visible;

  text-overflow: clip;

  white-space: normal;

  word-break: keep-all;
  overflow-wrap: break-word;

  -webkit-box-orient: unset;
  -webkit-line-clamp: unset;

  line-clamp: unset;
}

/* ============================================================
   MOBILE
   모바일에서도 말줄임 금지
   ============================================================ */

@media (max-width: 520px) {
  .ai-builder-stage {
    overflow: visible;
  }

  .ai-builder-story {
    width: 100%;

    padding-right: 0;
  }

  .ai-builder-story-title {
    display: block;

    max-width: 100%;

    overflow: visible;

    white-space: normal;

    text-overflow: clip;

    -webkit-line-clamp: unset;

    line-clamp: unset;
  }

  .ai-builder-thought-copy p {
    display: block;

    overflow: visible;

    white-space: normal;

    text-overflow: clip;

    -webkit-line-clamp: unset;

    line-clamp: unset;
  }

  .ai-builder-showcase {
    transform: none !important;
  }

  .ai-builder-showcase:hover {
    transform: translateY(-1px) !important;
  }
}