/* 작업본 CSS */

html { font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif; }

.popular-cat button { transition: all .2s ease; }
.popular-cat button.active { background: #1F2937; color: #FFF; }
.popular-cat button:not(.active):hover { background: #F3F4F6; color: #1F2937; }

.responsive-tabs button { transition: all .2s ease; }
.responsive-tabs button.active { background: #1F2937; color: #FFF; }
.responsive-tabs button:not(.active):hover { background: #F3F4F6; color: #1F2937; }

header nav > ul > li > a { position: relative; }
header nav > ul > li > a::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    bottom: -1px;
    height: 2px;
    background: #2DBC83;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .2s ease;
}
header nav > ul > li:hover > a::after { transform: scaleX(1); }

.main-hero-slide .swiper-pagination-bullet { background: rgba(255,255,255,.5); opacity: 1; }
.main-hero-slide .swiper-pagination-bullet-active { background: #FFF; width: 24px; border-radius: 4px; }
.main-hero-slide .swiper-button-prev,
.main-hero-slide .swiper-button-next {
    background: rgba(0,0,0,.25);
    border-radius: 999px;
    backdrop-filter: blur(4px);
}
.main-hero-slide .swiper-button-prev:hover,
.main-hero-slide .swiper-button-next:hover { background: rgba(0,0,0,.45); }

#topBtn.show { opacity: 1; visibility: visible; }

#mobileDrawer.open { display: block; }
#mobileDrawer aside { transform: translateX(-100%); transition: transform .25s ease; }
#mobileDrawer.open aside { transform: translateX(0); }

.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.top-event-slide .swiper-wrapper { transition-timing-function: linear; }
.top-event-slide .swiper-slide { display: flex !important; align-items: center; }

input[type="search"]::placeholder { color: #9CA3AF; }

/* 메인 비주얼 그리드 — Tailwind 4 browser CDN의 1fr 파싱 이슈 우회 (minmax(0, 1fr) 강제) */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: stretch; }
@media (min-width: 1024px) {
    .hero-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 1.5rem; }
    .hero-grid > div:first-child { height: 100%; }
    .hero-grid .main-hero-slide { height: 100%; }
    .hero-grid .main-hero-slide .swiper-wrapper,
    .hero-grid .main-hero-slide .swiper-slide { height: 100% !important; }
}
.hero-grid > div { min-width: 0; }
.hero-grid .main-hero-slide { width: 100%; max-width: 100%; overflow: hidden; }

/* 인기 업종별 — 좌측 200px + 우측 카드 */
.popular-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
@media (min-width: 1024px) {
    .popular-grid { grid-template-columns: 200px minmax(0, 1fr); }
}

/* 이벤트(2/3) + 공지/FAQ(1/3) — 2컬럼, 우측은 좌측과 같은 높이로 stretch */
.event-notice-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: stretch; }
@media (min-width: 1024px) {
    .event-notice-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 2rem; }
    .event-notice-grid > div:nth-child(2) { height: 100%; }
    .event-notice-grid > div:nth-child(2) > div { flex: 1 1 0%; display: flex; flex-direction: column; }
    .event-notice-grid > div:nth-child(2) > div > ul { flex: 1; display: flex; flex-direction: column; justify-content: space-around; }
}