/* ======================================================================
   ToolBox Design Tokens
   ----------------------------------------------------------------------
   이 파일의 :root 값만 수정해도 주요 디자인이 한 번에 바뀝니다.
   Astro 전환 후에도 이 파일을 src/styles/design-tokens.css 로 그대로 옮길 수 있습니다.
   ====================================================================== */

:root {
  /* 1) 브랜드 / 기본 색상 */
  --tb-brand: #356ff6;
  --tb-brand-hover: #2859dc;
  --tb-brand-violet: #7c3aed;
  --tb-text: #171b22;
  --tb-text-muted: #536071;
  --tb-text-subtle: #667085;
  --tb-border: #e8ebef;
  --tb-border-strong: #d6dbe2;
  --tb-surface: #ffffff;

  /* 2) 전체 폭 */
  --tb-content-width: 1320px;
  --tb-workspace-width: 1160px;

  /* 3) 카드 */
  --tb-card-radius: 16px;
  --tb-card-gap-mobile: 12px;
  --tb-card-gap-desktop: 16px;
  --tb-card-shadow: 0 2px 12px rgba(16,24,40,.05);
  --tb-card-hover-shadow: 0 18px 45px rgba(16,24,40,.10);
  --tb-card-hover-lift: -3px;

  /* 4) 인기 카드 */
  --tb-popular-card-radius: 22px;
  --tb-popular-card-gap: 16px;
  --tb-popular-card-min-height: 146px;

  /* 5) 첫 화면 Hero */
  --tb-hero-radius-mobile: 26px;
  --tb-hero-radius-desktop: 34px;
  --tb-hero-padding-y-top: 22px;
  --tb-hero-padding-x: 24px;
  --tb-hero-padding-y-bottom: 24px;
  --tb-hero-title-size: clamp(1.72rem, 3.4vw, 2.55rem);
  --tb-hero-title-mobile-size: 1.62rem;
  --tb-hero-copy-size: .88rem;
  --tb-hero-search-width: 600px;
  --tb-hero-search-height: 46px;
  --tb-hero-search-radius: 18px;
  --tb-hero-search-button-radius: 12px;

  /* 6) 카테고리 / 작업 화면 */
  --tb-category-radius: 13px;
  --tb-workspace-radius-mobile: 26px;
  --tb-workspace-radius-desktop: 32px;

  /* 7) 공통 그림자 */
  --tb-search-shadow: 0 18px 46px rgba(16,24,40,.10);
  --tb-brand-shadow: 0 10px 28px rgba(53,111,246,.22);

  /* 8) 멀티툴 작업공간 */
  --tb-multitool-max-width: 1600px;
  --tb-multitool-radius: 24px;
  --tb-multitool-panel-radius: 18px;
  --tb-multitool-gap: 10px;
}


/* 다크모드에서는 아래 값이 자동으로 사용됩니다. */
.dark {
  --tb-text: #f4f6f8;
  --tb-text-muted: #b7c0cc;
  --tb-text-subtle: #b7c0cc;
  --tb-border: rgba(255,255,255,.08);
  --tb-border-strong: rgba(255,255,255,.10);
  --tb-surface: rgba(255,255,255,.035);
  --tb-card-shadow: none;
  --tb-card-hover-shadow: 0 18px 45px rgba(0,0,0,.24);
  --tb-search-shadow: 0 22px 52px rgba(0,0,0,.30);
}

/* ======================================================================
   아래는 토큰을 실제 UI에 연결하는 부분입니다.
   보통 직접 디자인 수정 시에는 위 :root 값만 바꾸면 됩니다.
   ====================================================================== */

.tb-container { max-width: var(--tb-content-width) !important; }
.tb-workspace-container { max-width: var(--tb-workspace-width) !important; }

/* 공통 표면 / 카드 */
.surface {
  background: var(--tb-surface);
  border-color: var(--tb-border);
  box-shadow: var(--tb-card-shadow);
}
.tool-card {
  border-radius: var(--tb-card-radius) !important;
}
.tool-card > a {
  border-radius: var(--tb-card-radius) !important;
}
.tool-card:hover,
.featured-card:hover {
  transform: translateY(var(--tb-card-hover-lift));
  box-shadow: var(--tb-card-hover-shadow);
  border-color: color-mix(in srgb, var(--tb-brand) 30%, transparent);
}

/* 전체 도구 Grid */
.directory-tool-grid,
.directory-tool-list {
  gap: var(--tb-card-gap-mobile);
}
@media (min-width: 640px) {
  .directory-tool-grid { gap: var(--tb-card-gap-desktop); }
}

/* Hero */
.home-hero-centered {
  padding: var(--tb-hero-padding-y-top) var(--tb-hero-padding-x) var(--tb-hero-padding-y-bottom);
  border-radius: var(--tb-hero-radius-mobile) !important;
}
.home-hero-title { font-size: var(--tb-hero-title-size); }
.home-hero-title strong {
  background: linear-gradient(135deg, var(--tb-brand), var(--tb-brand-violet));
  box-shadow: var(--tb-brand-shadow);
}
.home-hero-copy {
  color: var(--tb-text-muted);
  font-size: var(--tb-hero-copy-size);
}
.hero-search-box { width: min(var(--tb-hero-search-width), 100%); }
.hero-search-row {
  border-color: var(--tb-border-strong);
  border-radius: var(--tb-hero-search-radius);
  box-shadow: var(--tb-search-shadow);
}
#heroSearchInput,
.hero-search-submit { height: var(--tb-hero-search-height); }
.hero-search-submit {
  border-radius: var(--tb-hero-search-button-radius);
  background: var(--tb-brand);
}
.hero-search-submit:hover { background: var(--tb-brand-hover); }

/* 인기 도구 */
.popular-tools-grid { gap: var(--tb-popular-card-gap); }
.popular-tool-card {
  min-height: var(--tb-popular-card-min-height) !important;
  border-radius: var(--tb-popular-card-radius);
}
.popular-tool-link { min-height: var(--tb-popular-card-min-height) !important; }

/* 카테고리 */
.category-control { border-radius: var(--tb-category-radius); }

/* 개별 도구 화면 */
#workspaceMount > article {
  border-radius: var(--tb-workspace-radius-mobile) !important;
}

/* 브랜드 색상을 많이 쓰는 대표 utility도 토큰과 연결 */
.text-brand-500 { color: var(--tb-brand) !important; }
.bg-brand-500 { background-color: var(--tb-brand) !important; }

:focus-visible { outline-color: color-mix(in srgb, var(--tb-brand) 42%, transparent); }

@media (min-width: 640px) {
  .home-hero-centered { border-radius: var(--tb-hero-radius-desktop) !important; }
  #workspaceMount > article { border-radius: var(--tb-workspace-radius-desktop) !important; }
}

@media (max-width: 639px) {
  .home-hero-centered {
    padding: 24px 16px 26px;
  }
  .home-hero-title { font-size: var(--tb-hero-title-mobile-size); }
  .hero-search-row { border-radius: 17px; }
  #heroSearchInput,
  .hero-search-submit { height: 46px; }
  .hero-search-submit { border-radius: 12px; }
  .popular-tools-grid { gap: var(--tb-card-gap-mobile); }
}

/* ======================================================================
   멀티툴 작업공간 (layout-safe v2)
   ----------------------------------------------------------------------
   멀티툴은 기존 HTML에 나중에 추가된 기능이라, Tailwind가 미리 생성하지 않은
   arbitrary utility(z-[80], grid-cols-[...], h-full 등)에 의존하지 않습니다.
   아래 규칙이 데스크톱/모바일 레이아웃과 스크롤을 직접 보장합니다.
   ====================================================================== */
#multiToolOverlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 120 !important;
  box-sizing: border-box;
  overflow: hidden;
  padding: 16px;
}
#multiToolOverlay.hidden { display: none !important; }

.tb-multitool-shell {
  width: 100%;
  max-width: var(--tb-multitool-max-width);
  height: calc(100dvh - 32px);
  min-height: 0;
  margin: 0 auto;
  border-radius: var(--tb-multitool-radius);
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
.tb-multitool-header,
.tb-multitool-controls,
.tb-multitool-footer {
  flex: 0 0 auto;
}
.tb-multitool-controls {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr) !important;
  align-items: end;
  gap: 12px;
}
#multiToolSwap { align-self: end; }

.tb-multitool-grid {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: var(--tb-multitool-gap);
  overflow: hidden;
}
.tb-multitool-panel {
  min-width: 0;
  min-height: 0 !important;
  border-radius: var(--tb-multitool-panel-radius);
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
.tb-multitool-frame {
  display: block;
  flex: 1 1 auto !important;
  min-width: 0;
  min-height: 0 !important;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}
.dark .tb-multitool-frame { background: #14171c; }
body.tb-multitool-open { overflow: hidden; }

/* iframe 전용 최소 UI 모드 */
body.tb-embed-mode > header,
body.tb-embed-mode > footer,
body.tb-embed-mode #toolboxAnchorAdMount,
body.tb-embed-mode #multiToolOverlay,
body.tb-embed-mode #homeView,
body.tb-embed-mode .workspace-topbar,
body.tb-embed-mode #toolQuickLinks,
body.tb-embed-mode #toolSeoGuide,
body.tb-embed-mode #toolSecondaryAd,
body.tb-embed-mode #workspaceRelatedSection,
body.tb-embed-mode #workspaceRecentSection,
body.tb-embed-mode .ad-slot {
  display: none !important;
}
body.tb-embed-mode {
  overflow: auto;
  background: #fff;
}
.dark body.tb-embed-mode { background: #14171c; }
body.tb-embed-mode #workspaceView {
  display: block !important;
  max-width: none !important;
  padding: 0 !important;
}
body.tb-embed-mode #workspaceMount > article {
  margin: 0;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
}
body.tb-embed-mode #workspaceMount > article > header {
  padding: 16px 18px !important;
}
body.tb-embed-mode #workspaceMount .workspace-body {
  padding: 18px !important;
}

/* 태블릿/모바일: 두 패널을 위아래로 두고 멀티툴 자체를 한 페이지처럼 스크롤 */
@media (max-width: 1023px) {
  #multiToolOverlay {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px;
  }
  .tb-multitool-shell {
    height: auto;
    min-height: calc(100dvh - 16px);
    overflow: visible !important;
  }
  .tb-multitool-grid {
    flex: 0 0 auto !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: none !important;
    overflow: visible;
  }
  .tb-multitool-panel {
    min-height: 560px !important;
  }
  .tb-multitool-frame {
    flex: 1 1 auto !important;
    height: 520px;
    min-height: 520px !important;
  }
}

@media (max-width: 639px) {
  .tb-multitool-shell { border-radius: 16px; }
  .tb-multitool-grid { gap: 7px; }
  .tb-multitool-panel {
    border-radius: 13px;
    min-height: 520px !important;
  }
  .tb-multitool-frame {
    height: 480px;
    min-height: 480px !important;
  }
  .tb-multitool-controls {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px;
  }
  #multiToolSwap {
    justify-self: center;
    transform: rotate(90deg);
  }
  #workspaceMultiTool { font-size: 12px; padding-left: 10px; padding-right: 10px; }
}

/* 높이가 낮은 데스크톱에서도 제목/선택영역이 잘리지 않게 바깥 스크롤 허용 */
@media (min-width: 1024px) and (max-height: 720px) {
  #multiToolOverlay {
    overflow-y: auto;
    padding: 8px;
  }
  .tb-multitool-shell {
    height: 704px;
    min-height: 704px;
  }
}


/* ======================================================================
   Hero compact v2 — 인기 도구 8개를 첫 화면에서 더 빨리 노출
   카드/인기 도구 디자인은 변경하지 않고 Hero 영역만 압축합니다.
   ====================================================================== */
.home-hero-title { margin-top: 9px !important; }
.home-hero-copy { margin-top: 8px !important; line-height: 1.56 !important; }
.hero-search-box { margin-top: 14px !important; }
.hero-search-row { gap: 8px !important; padding: 5px !important; }
.hero-search-input-wrap + .hero-search-submit { min-width: 82px; }
.hero-search-box + p { margin-top: 8px !important; }

@media (min-width: 640px) {
  #homeView > section:first-child { padding-top: 24px !important; }
  #popularSection { padding-top: 30px !important; }
}

@media (max-width: 639px) {
  .home-hero-centered { padding: 20px 14px 21px !important; }
  .home-hero-title { margin-top: 8px !important; }
  .home-hero-copy { margin-top: 7px !important; }
  .hero-search-box { margin-top: 12px !important; }
  .hero-search-row { padding: 4px !important; gap: 5px !important; }
  #heroSearchInput,
  .hero-search-submit { height: 43px !important; }
  #popularSection { padding-top: 24px !important; }
}


/* ======================================================================
   Hero search dropdown fix
   - Allow suggestions to extend outside the hero card
   - Keep the dropdown floating over following sections
   - Remove the browser-native search cancel icon so only ToolBox's X remains
   ====================================================================== */
.hero-surface {
  overflow: visible !important;
  z-index: 20;
}

.hero-search-box {
  position: relative;
  z-index: 40;
}

#heroSearchSuggestions {
  left: 0 !important;
  right: 0 !important;
  width: 100%;
  max-height: min(360px, 48vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 60 !important;
}

#heroSearchInput::-webkit-search-cancel-button,
#heroSearchInput::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

#heroSearchInput::-ms-clear,
#heroSearchInput::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}

#popularSection {
  position: relative;
  z-index: 1;
}