@charset "UTF-8";

/* 홈 — 판다랭크 첫 화면처럼: 가운데 제목 · 검색창 · 인기 키워드, 아래 서비스 아이콘 한 줄. 그 외는 두지 않는다. */
.home { display: flex; flex-direction: column; justify-content: center; min-height: calc(100dvh - var(--topbar-h) - 120px); }
.home-hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 24px 0 8px; }
.home-hero__art { width: 76px; margin-bottom: 14px; animation: km-bob 3.2s ease-in-out infinite; }
.home-hero__title { font-size: 30px; font-weight: 700; letter-spacing: -.03em; }
.home-hero__sub { margin-top: 6px; font-size: 16px; color: var(--fg-muted); }
.home-hero__form { width: 100%; max-width: 640px; margin-top: 28px; }

.home-hot { display: flex; align-items: center; gap: 10px; max-width: 640px; width: 100%; margin-top: 14px; }
.home-hot + .home-hot { margin-top: 8px; }
.home-hot__label { flex: none; width: 78px; font-size: 13px; font-weight: 600; color: var(--fg-muted); text-align: left; cursor: help; }
.home-hot__empty { font-size: 12.5px; color: var(--fg-faint); }
.home-hot__list { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.home-hot__list::-webkit-scrollbar { display: none; }
.hot { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px; background: #fff; font-size: 13px; font-weight: 500; color: var(--fg-sub); transition: background .15s; }
.hot:hover { background: var(--neutral-hover); }
.hot .num { font-size: 12px; color: var(--fg-faint); }

.home-tools { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; max-width: 760px; width: 100%; margin: 44px auto 0; padding: 18px 12px; border-radius: 16px; background: #fff; }
.tool { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 4px; border-radius: 12px; font-size: 12.5px; font-weight: 500; color: var(--fg-sub); transition: background .15s; }
.tool:hover { background: var(--neutral); }
/* 아이콘: 플랫 글리프(GPT 생성, 투명) + CSS 파스텔 타일. 그림자 · 그라데이션 없음. */
.tool__tile { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; transition: transform .2s var(--ease); }
.tool__tile img { width: 30px; height: 30px; object-fit: contain; }
.tool:hover .tool__tile { transform: translateY(-2px); }
.tool__tile.is-mint { background: #E3F6EE; }
.tool__tile.is-blue { background: #E6EEFF; }
.tool__tile.is-violet { background: #EFEAFF; }
.tool__tile.is-yellow { background: #FFF5DC; }
.tool__tile.is-orange { background: #FFEEE2; }
.tool__tile.is-sky { background: #E7F1FE; }
.tool__tile.is-pink { background: #FFEAF0; }
.tool__tile.is-teal { background: #E2F4F6; }

@media (max-width: 760px) {
    .home-tools { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .home-hero__title { font-size: 24px; }
}