/* ========================================
   웹폰트 등록
   ─ CSS 파일 기준 상대경로: src/css → public/font
======================================== */

/* BMJUA: 타이틀 전용 (h1·h2·h3·로고·대형 표시 텍스트) */
@font-face {
    font-family: 'BMJUA';
    src: url('/heartopia/public/font/BMJUA.woff2') format('woff2'),
    url('/heartopia/public/font/BMJUA.woff') format('woff');
    font-weight: 100 900; /* 단일 파일이 전체 굵기 범위를 담당 → 브라우저 합성 굵기 방지 */
    font-style: normal;
    font-display: swap;
}

/* 런드리 고딕 Regular: 본문 전용 */
@font-face {
    font-family: 'LaundryGothic';
    src: url('/heartopia/public/font/LaundryGothic_Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* 런드리 고딕 Bold: 본문 강조 */
@font-face {
    font-family: 'LaundryGothic';
    src: url('/heartopia/public/font/LaundryGothic_Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/* ========================================
   CSS 커스텀 프로퍼티 (디자인 토큰)
   ─ 색상 하나만 바꾸면 전체에 반영됨
======================================== */
:root {
    /* ── 주요색 (핑크 계열) ──────────────────────────── */
    --color-primary: #ff6b9d; /* 메인 핑크: 로고, 제목, 버튼 등 */
    --color-primary-dark: #ff5588; /* 진한 핑크: 호버 상태 */
    --color-primary-light: #ff9a9e; /* 연한 핑크: 서브 강조 */
    --color-primary-surface: #fff0f5; /* 가장 연한 핑크: 드롭다운 호버 배경 */

    /* rgba 투명도 변형 (그림자·활성 배경 등에 사용) */
    --color-primary-a10: rgba(255, 107, 157, 0.1);
    --color-primary-a20: rgba(255, 107, 157, 0.2);
    --color-primary-a30: rgba(255, 107, 157, 0.3);

    /* ── 텍스트 계열 ──────────────────────────────────── */
    --color-text-strong: #333; /* 제목, 테이블 헤더 */
    --color-text: #555; /* 본문, 일반 텍스트 */
    --color-text-soft: #666; /* 보조 텍스트 */
    --color-text-muted: #888; /* 설명, 힌트 */
    --color-text-faint: #bbb; /* 비활성, 없음 표시 */

    /* ── 배경 / 서피스 계열 ──────────────────────────── */
    --color-surface: white; /* 카드, 헤더, 푸터 배경 */
    --color-surface-light: #f8f9fa; /* 테이블 헤더, nav 버튼, tr 호버 */
    --color-surface-dim: #f0f0f0; /* 테이블 구분선, 뱃지 배경 */
    --color-border: #e9ecef; /* 입력창 테두리, 구분선 */
    --color-border-soft: #ddd; /* 뱃지 등 소프트 테두리 */

    /* ── 바디 배경 그라데이션 ────────────────────────── */
    --color-bg-from: #a8edea;
    --color-bg-to: #fed6e3;
}


/* ========================================
   기본 설정
======================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'LaundryGothic', 'Malgun Gothic', sans-serif; /* 본문 기본 폰트 */
    background: linear-gradient(135deg, var(--color-bg-from) 0%, var(--color-bg-to) 100%);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* BMJUA 적용 대상: 타이틀·로고·대형 표시 텍스트
   ─ h1·h2·h3 태그 전체 + 로고 + 날짜/시간 대형 표시 */
h1, h2, h3,
.logo,
.current-date,
.current-time {
    font-family: 'BMJUA', 'Malgun Gothic', sans-serif;
}


/* main 영역: 헤더/푸터 사이 콘텐츠 영역 */
main {
    flex: 1;
    max-width: 1440px;
    margin: 20px auto; /* 기존 40px → 20px: 상하 여백 절반으로 */
    padding: 0 20px;
    width: 100%;
}


/* ========================================
   헤더 영역
======================================== */
header {
    background: var(--color-surface);
    padding: 14px 0; /* 기존 20px → 14px */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.6em; /* 기존 2em → 1.6em */
    font-weight: 400; /* 기존 bold → 400 */
    color: var(--color-primary);
    cursor: pointer;
}

/* 네비게이션 */
nav ul {
    list-style: none;
    display: flex;
    gap: 16px; /* 기존 20px → 16px */
}

nav a {
    text-decoration: none;
    color: var(--color-text);
    font-weight: 400; /* 기존 600 → 400 */
    padding: 8px 14px; /* 기존 10px 20px → 8px 14px */
    border-radius: 8px;
    /* hover 시 실제로 변하는 속성만 명시 → 불필요한 속성 감시 제거 */
    transition: background 0.3s, color 0.3s, transform 0.3s;
    background: var(--color-surface-light);
}

nav a:hover {
    background: var(--color-primary);
    color: var(--color-surface);
    transform: translateY(-2px);
}

/* ── 드롭다운 메뉴 ── */

/* 드롭다운을 가진 li: 기준점(position: relative)으로 설정 */
.nav-dropdown {
    position: relative;
}

/* 드롭다운 목록: 기본적으로 숨김 */
.dropdown-menu {
    display: none; /* 기본 숨김 */
    position: absolute;
    top: calc(100% + 6px); /* 부모 버튼 바로 아래에 띄움 */
    left: 0;
    background: var(--color-surface);
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    min-width: 150px;
    z-index: 200;
    padding: 4px 0; /* 기존 6px → 4px */
    list-style: none;

    /* 부드러운 등장을 위한 애니메이션 준비 */
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* 호버 시 드롭다운 표시 */
.nav-dropdown:hover .dropdown-menu {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* 드롭다운 내부 항목 스타일 */
.dropdown-menu li a {
    display: block;
    padding: 8px 14px; /* 기존 10px 18px → 8px 14px */
    color: var(--color-text);
    font-weight: 400; /* 기존 600 → 400 */
    font-size: 0.95em;
    background: transparent; /* 부모 nav a 스타일 초기화 */
    border-radius: 0;
    transform: none;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
}

.dropdown-menu li a:hover {
    background: var(--color-primary-surface);
    color: var(--color-primary);
    transform: none; /* 부모 호버 translateY 효과 제거 */
}


/* ========================================
   푸터 영역
======================================== */
footer {
    background: var(--color-surface);
    padding: 20px 0; /* 기존 30px → 20px */
    margin-top: 32px; /* 기존 60px → 32px */
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}

.footer-container p {
    color: var(--color-text-soft);
    font-size: 1em;
    margin-bottom: 8px; /* 기존 10px → 8px */
}

.footer-links {
    margin-top: 10px; /* 기존 15px → 10px */
}

.footer-links a {
    color: var(--color-primary);
    text-decoration: none;
    margin: 0 12px; /* 기존 15px → 12px */
    font-weight: 400; /* 기존 600 → 400 */
    transition: color 0.3s;
}

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


/* ========================================
   페이지 헤더
======================================== */
.page-header {
    background: var(--color-surface);
    padding: 28px; /* 기존 40px → 28px */
    border-radius: 20px;
    text-align: center;
    margin-bottom: 24px; /* 기존 40px → 24px */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    position: relative;
}

/* 우측 상단 페이지 전환 nav */
.page-header nav {
    position: absolute;
    top: 40px; /* 기존 50px → 40px */
    right: 30px; /* 기존 50px → 30px */
}

.page-header h1 {
    font-size: 2.2em; /* 기존 3em → 2.2em */
    color: var(--color-primary);
    margin-bottom: 8px; /* 기존 15px → 8px */
}

.page-header p {
    font-size: 1em; /* 기존 1.2em → 1em */
    color: var(--color-text-muted);
}


/* ========================================
   날짜/시간 섹션
======================================== */
.datetime-section {
    background: var(--color-surface);
    padding: 28px; /* 기존 40px → 28px */
    border-radius: 20px;
    margin-bottom: 20px; /* 기존 30px → 20px */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    position: relative;
}

/* nav를 우측 상단으로 절대 배치 */
.datetime-section nav {
    position: absolute;
    top: 40px; /* 기존 50px → 40px */
    right: 30px; /* 기존 50px → 30px */
}

.datetime-section h1 {
    font-size: 2.2em; /* 기존 3em → 2.2em */
    color: var(--color-primary);
    margin-bottom: 6px; /* 기존 10px → 6px */
    text-align: center;
}

.datetime-section > p {
    font-size: 1em; /* 기존 1.2em → 1em */
    color: var(--color-text-muted);
    text-align: center;
    margin-bottom: 16px; /* 기존 30px → 16px */
}

/* 날짜/시간 표시 */
.datetime-display {
    text-align: center;
    margin-bottom: 16px; /* 기존 25px → 16px */
}

.date-info {
    display: flex;
    flex-direction: column;
    gap: 6px; /* 기존 10px → 6px */
}

.current-date {
    font-size: 1.4em; /* 기존 1.8em → 1.4em */
    font-weight: 400; /* 기존 700 → 400 */
    color: var(--color-primary);
}

.current-time {
    font-size: 2em; /* 기존 2.5em → 2em */
    font-weight: 400; /* 기존 800 → 400 */
    color: var(--color-text-strong);
    font-family: 'Courier New', monospace;
}

/* 시간대 바 */
.time-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px; /* 기존 10px → 8px */
    position: relative;
    margin-top: 12px; /* 기존 20px → 12px */
}

.time-segment {
    padding: 14px 10px; /* 기존 20px 15px → 14px 10px */
    border-radius: 12px;
    text-align: center;
    /* active 시 변하는 속성: border-color, background, transform, box-shadow */
    transition: border-color 0.3s, background 0.3s, transform 0.3s, box-shadow 0.3s;
    border: 2px solid transparent;
}

.time-segment.active {
    border-color: var(--color-primary);
    background: linear-gradient(135deg, var(--color-primary-a10), var(--color-primary-a20));
    transform: scale(1.05);
    box-shadow: 0 4px 15px var(--color-primary-a30);
}

.time-segment.morning {
    background: linear-gradient(135deg, #fff5e6, #ffe4cc);
}

.time-segment.afternoon {
    background: linear-gradient(135deg, #e8f4fd, #d4ebf7);
}

.time-segment.evening {
    background: linear-gradient(135deg, #ffe4ed, #ffd4e0);
}

.time-segment.night {
    background: linear-gradient(135deg, #e8e4f3, #d9d4f0);
}

.segment-label {
    font-size: 1.1em; /* 기존 1.3em → 1.1em */
    font-weight: 400; /* 기존 700 → 400 */
    margin-bottom: 4px; /* 기존 8px → 4px */
    color: #2d3436;
}

.segment-time {
    font-size: 0.9em; /* 기존 0.95em → 0.9em */
    color: #636e72;
    font-weight: 400; /* 기존 600 → 400 */
}

.time-indicator {
    position: absolute;
    bottom: -15px;
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 15px solid var(--color-primary);
    transition: left 0.5s ease;
}


/* ========================================
   통계 카드
======================================== */
.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px; /* 기존 20px → 14px */
    margin-bottom: 20px; /* 기존 40px → 20px */
}

.stat-card {
    background: var(--color-surface);
    padding: 16px; /* 기존 25px → 16px */
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.stat-card .number {
    font-size: 2em; /* 기존 2.5em → 2em */
    font-weight: 400; /* 기존 bold → 400 */
    color: var(--color-primary);
    margin-bottom: 6px; /* 기존 10px → 6px */
}

.stat-card .label {
    color: var(--color-text-muted);
    font-size: 1em; /* 기존 1.1em → 1em */
}


/* ========================================
   별 가격표 (성별 판매가)
======================================== */
.star-selector {
    display: inline-block;
    margin: 5px;
    padding: 5px;
    color: var(--color-text);
}

.star-selector select {
    padding: 5px;
    border: 2px solid var(--color-border);
    border-radius: 5px;
    font-size: 0.9em;
    background: var(--color-surface);
    cursor: pointer;
    /* focus 시 변하는 속성: border-color, box-shadow */
    transition: border-color 0.3s, box-shadow 0.3s;
}

.star-selector select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary-a10);
}

.price-cell {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}


/* ========================================
   필터 섹션
======================================== */
.filter-section {
    background: var(--color-surface);
    padding: 14px 18px; /* 더 컴팩트하게 축소 */
    border-radius: 16px;
    margin-bottom: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.filter-section h2 {
    font-size: 1.1em;
    color: var(--color-primary);
    margin-bottom: 10px;
}

/* 검색창 */
.search-box {
    margin-bottom: 10px;
}

.search-box label {
    display: block;
    font-size: 0.85em;
    color: var(--color-text-soft);
    margin-bottom: 4px;
    font-weight: 500;
}

.search-box input[type="text"] {
    width: 100%;
    max-width: 320px; /* 검색창 최대 너비 제한 - 전체 너비 차지 방지 */
    padding: 7px 10px;
    border: 1.5px solid var(--color-border);
    border-radius: 8px;
    font-size: 0.9em;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.search-box input[type="text"]:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-a10);
}

/* 필터 그룹 컨테이너 — 기본: 1열, 반응형으로 확장 */
.filter-groups {
    display: flex;          /* grid → flex 로 변경: 내용 크기에 맞게 자연스럽게 배치 */
    flex-wrap: wrap;
    gap: 12px 20px;
    align-items: flex-start;
}

/* 개별 필터 그룹 */
.filter-group {
    min-width: 0;           /* flex 아이템 overflow 방지 */
}

.filter-group h3 {
    font-size: 0.82em;
    font-weight: 600;
    color: var(--color-text-soft);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 6px;
}

/* 체크박스 목록 — 수평 래핑 배치 (기존 수직 → 수평) */
.checkbox-group {
    display: flex;
    flex-direction: row;    /* 수직 나열 → 수평 나열 */
    flex-wrap: wrap;
    gap: 4px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    padding: 4px 8px;       /* 기존 6px 10px → 더 작게 */
    border-radius: 6px;
    border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s;
    font-size: 0.88em;
    white-space: nowrap;
}

.checkbox-label:hover {
    background: var(--color-surface-light);
    border-color: var(--color-border);
}

/* 체크된 라벨을 시각적으로 강조 */
.checkbox-label:has(input:checked) {
    background: var(--color-primary-surface, #eef2ff);
    border-color: var(--color-primary-light);
}

.checkbox-label input[type="checkbox"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: var(--color-primary);
    flex-shrink: 0;
}

/* 필터 액션 버튼 영역 — 수평 래핑 배치 */
.filter-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    /* width / border-top 은 생략 — crops처럼 side-by-side 레이아웃과 충돌 방지 */
}

/* filter-groups 안에서 직접 자식으로 쓰일 때만 구분선 표시 (fish/insect/bird 등) */
.filter-groups > .filter-actions {
    width: 100%;
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--color-border);
}

.filter-btn,
.filter-btn-reset {
    padding: 5px 12px;      /* 더 콤팩트하게 */
    border: none;
    border-radius: 6px;
    font-size: 0.85em;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    white-space: nowrap;
}

.filter-btn {
    background: var(--color-primary);
    color: var(--color-surface);
}

.filter-btn:hover {
    background: var(--color-primary-dark);
    transform: translateY(-1px);
}

.filter-btn-reset {
    background: var(--color-surface-light);
    color: var(--color-text-soft);
    border: 1px solid var(--color-border);
}

.filter-btn-reset:hover {
    background: var(--color-border);
}


/* ========================================
   시즌 버튼
======================================== */
.season-ice-btn {
    background-color: #e3f2fd !important;
    color: #1565c0 !important;
}

/* 꿈의 명암 시즌 버튼 — 새 시즌이 추가되면 아래에 같은 패턴으로 추가하면 됩니다 */
.season-dreamlight-btn {
    background-color: #ede7f6 !important;
    color: #4527a0 !important;
}


/* ========================================
   서식지 그룹
======================================== */
.habitat-section {
    margin-bottom: 24px; /* 기존 40px → 24px */
}

.habitat-group {
    background: var(--color-surface);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    margin-bottom: 16px; /* 기존 30px → 16px */
}

.habitat-header {
    background: var(--color-surface-light);
    color: var(--color-text-strong);
    padding: 14px 20px; /* 기존 20px 30px → 14px 20px */
    font-size: 1.3em; /* 기존 1.5em → 1.3em */
    font-weight: 400; /* 기존 600 → 400 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--color-border);
}

.habitat-icon {
    font-size: 1.2em; /* 기존 1.3em → 1.2em */
}

.count-badge {
    background: var(--color-primary);
    color: var(--color-surface);
    padding: 5px 14px; /* 기존 8px 20px → 5px 14px */
    border-radius: 20px;
    font-size: 0.8em;
    font-weight: 400; /* 기존 600 → 400 */
}


/* ========================================
   테이블
======================================== */
.table-container {
    overflow-x: auto;
}

/* 브라우저가 내용 기반으로 열 너비를 자동 계산 */
table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
    font-size: 0.92em;
}

/* 테이블 헤더 */
th {
    background: var(--color-surface-light);
    padding: 12px 8px;
    text-align: left;
    font-weight: 400; /* 기존 600 → 400 */
    color: var(--color-text-strong);
    border-bottom: 2px solid var(--color-border);
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    white-space: nowrap; /* 헤더 텍스트 줄바꿈 방지 */
}

th:hover {
    background: var(--color-border);
}

/* 정렬 아이콘 */
th.sortable::after {
    content: ' ⇅';
    opacity: 0.3;
}

th.sort-asc::after {
    content: ' ↑';
    opacity: 1;
}

th.sort-desc::after {
    content: ' ↓';
    opacity: 1;
}

/* table-layout: auto 이므로 min-width만 힌트로 제공, 브라우저가 자동 조정 */
.col-habitat-fish {
    min-width: 100px;
    white-space: nowrap;
}

.col-habitat-bird {
    min-width: 110px;
    white-space: nowrap;
}

.col-level {
    min-width: 60px;
    white-space: nowrap;
}

.col-time {
    min-width: 110px;
}

.col-weather {
    min-width: 70px;
}

.col-size {
    min-width: 60px;
    white-space: nowrap;
}

/* ========================================
   도감 수집 체크 관련 스타일
======================================== */

/* 수집 체크박스 컬럼 */
.col-collect {
    min-width: 44px;
    text-align: center;
    white-space: nowrap;
}

/* 수집 체크박스 크기 */
.col-collect input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--color-primary, #4caf50);
}

/* 수집 완료 행: 흐리게 처리 */
tr.collected-row {
    opacity: 0.4;
}

/* 수집 완료 행의 이름 셀: 취소선 */
tr.collected-row .item-name {
    text-decoration: line-through;
}

/* 테이블 바디 */
td {
    padding: 10px 8px;
    border-bottom: 1px solid var(--color-surface-dim);
    color: var(--color-text);
}

/* 이름 컬럼 최소 너비 확보 */
td.item-name {
    min-width: 150px;
    word-break: keep-all;
}

tr:hover {
    background: var(--color-surface-light);
}

/* 테이블 셀 스타일 */
.item-name {
    font-weight: 400; /* 기존 600 → 400 */
    color: var(--color-primary);
    font-size: 1.1em;
}

.level-badge {
    display: inline-block;
    background: #e3f2fd;
    color: #1976d2;
    padding: 4px 10px; /* 기존 5px 12px → 4px 10px */
    border-radius: 15px;
    font-weight: 400; /* 기존 600 → 400 */
    font-size: 0.9em;
}

.time-badge,
.weather-badge {
    display: inline-block;
    background: var(--color-surface-light);
    color: var(--color-text-soft);
    padding: 3px 7px;
    border-radius: 12px;
    font-size: 0.82em;
    margin: 1px;
    white-space: nowrap;
}

.price {
    font-weight: 400; /* 기존 600 → 400 */
    color: #4caf50;
}


/* ========================================
   입력 섹션
======================================== */
.input-section {
    background: var(--color-surface);
    padding: 24px; /* 기존 40px → 24px */
    border-radius: 20px;
    margin-bottom: 24px; /* 기존 40px → 24px */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.input-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px; /* 기존 25px → 16px */
    margin-bottom: 20px; /* 기존 30px → 20px */
}

.input-item {
    display: flex;
    flex-direction: column;
}

/* 입력 폼 요소 */
label {
    font-weight: 400; /* 기존 600 → 400 */
    margin-bottom: 6px; /* 기존 10px → 6px */
    color: var(--color-primary);
    font-size: 1em; /* 기존 1.1em → 1em */
}

input,
select {
    padding: 10px 12px; /* 기존 15px → 10px 12px */
    border: 2px solid var(--color-border);
    border-radius: 8px;
    font-size: 16px;
    /* focus 시 변하는 속성: border-color, box-shadow */
    transition: border-color 0.3s, box-shadow 0.3s;
    background: var(--color-surface);
}

input:focus,
select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-a10);
}

button {
    background: var(--color-primary);
    color: var(--color-surface);
    border: none;
    padding: 12px 28px; /* 기존 18px 40px → 12px 28px */
    border-radius: 8px;
    font-size: 1.1em; /* 기존 1.3em → 1.1em */
    font-weight: 400; /* 기존 600 → 400 */
    cursor: pointer;
    /* hover 시 변하는 속성: background, transform, box-shadow */
    transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
}

button:hover {
    background: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--color-primary-a30);
}

button:active {
    transform: translateY(0);
}


/* ========================================
   결과 섹션
======================================== */
.results {
    margin-top: 20px; /* 기존 40px → 20px */
}

.no-results,
.loading,
.error {
    background: var(--color-surface);
    text-align: center;
    padding: 36px 24px; /* 기존 60px 40px → 36px 24px */
    border-radius: 20px;
    color: var(--color-primary);
    font-size: 1.1em; /* 기존 1.3em → 1.1em */
    font-weight: 400; /* 기존 600 → 400 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}


/* ========================================
   물고기 이미지 썸네일
======================================== */

/* 이미지 전용 컬럼 너비 */
.col-fish-img {
    width: 64px;
    min-width: 64px;
    max-width: 64px;
    text-align: center;
    padding: 8px 4px !important;
}

/* 물고기 썸네일 이미지 */
.fish-thumb {
    width: 48px;
    height: 48px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    image-rendering: pixelated; /* 픽셀아트 계열 이미지 선명하게 */
}

/* 이미지 없을 때 자리 표시자 */
.fish-thumb-placeholder {
    width: 48px;
    height: 48px;
    background: var(--color-surface-dim);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    font-size: 1.4em;
    color: var(--color-text-faint);
}


/* ========================================
   조류 도감
======================================== */

/* 깃털 다듬기 / 날개 펼치기 뱃지 공통 스타일 */
.motion-badge {
    display: inline-block;
    margin: 2px;
    padding: 2px 7px;
    border-radius: 10px;
    font-size: 0.78em;
    background: var(--color-surface-dim);
    color: var(--color-text);
    white-space: normal;
    border: 1px solid var(--color-border-soft);
    transition: background 0.15s, color 0.15s;
}

/* 현재 시간+날씨 조건과 일치할 때 하이라이트 */
.motion-badge.motion-match {
    background: #d4f5d4;
    color: #1a7a1a;
    border-color: #74c474;
    font-weight: 400; /* 기존 bold → 400 */
}

/* 조건 없음(-) 표시 */
.motion-none {
    color: var(--color-text-faint);
    font-size: 0.85em;
}

/* 모션 컬럼 (th/td 공통) 너비 */
.motion-cell {
    min-width: 120px;
    word-break: keep-all;
}

/* 모션 컬럼 헤더는 한 줄로 */
th.motion-cell {
    white-space: nowrap;
}


/* ========================================
   스크롤 탑 버튼
   ─ common.js에서 동적으로 생성됨
======================================== */
#scroll-top-btn {
    /* 위치: 우측 하단 고정 */
    position: fixed;
    bottom: 32px;
    right: 28px;
    z-index: 999;

    /* 크기 & 모양 */
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;

    /* 텍스트 중앙 정렬 */
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;

    /* 색상: 사이트 메인 핑크 */
    background: var(--color-primary);
    color: white;
    font-size: 1rem;
    font-weight: 400; /* 기존 700 → 400 */
    cursor: pointer;

    /* 그림자 */
    box-shadow: 0 4px 14px var(--color-primary-a30);

    /* 기본은 숨김 상태 (JS로 .visible 클래스 토글) */
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s;
}

/* 300px 이상 스크롤 시 JS가 이 클래스를 붙임 */
#scroll-top-btn.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

#scroll-top-btn:hover {
    background: var(--color-primary-dark);
    transform: translateY(-3px);
}

/* 모바일에서는 조금 더 작게, 엄지가 닿기 좋은 위치로 */
@media (max-width: 768px) {
    #scroll-top-btn {
        bottom: 20px;
        right: 16px;
        width: 40px;
        height: 40px;
        font-size: 0.9rem;
    }
}


/* ========================================
   반응형 디자인 - 모바일 (768px 이하)
======================================== */
@media (max-width: 768px) {
    /* 페이지 전체 상하 여백 축소 */
    main {
        margin: 10px auto;
        padding: 0 12px;
    }

    /* 헤더 */
    header {
        padding: 10px 0;
    }

    .header-container {
        flex-direction: column;
        gap: 10px;
    }

    .logo {
        font-size: 1.4em;
    }

    nav ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    nav a {
        padding: 6px 10px;
        margin-bottom: 0;
    }

    /* 페이지 헤더 */
    .page-header {
        padding: 16px;
        margin-bottom: 16px;
    }

    /* 절대 배치 nav를 모바일에서 일반 흐름으로 전환 (겹침 방지) */
    .page-header nav,
    .datetime-section nav {
        position: static;
        margin-bottom: 8px;
        text-align: center;
    }

    .page-header h1 {
        font-size: 1.6em;
        margin-bottom: 4px;
    }

    /* 날짜/시간 섹션 */
    .datetime-section {
        padding: 16px;
    }

    .datetime-section h1 {
        font-size: 1.6em;
    }

    .datetime-section > p {
        font-size: 0.95em;
        margin-bottom: 10px;
    }

    .current-date {
        font-size: 1.1em;
    }

    .current-time {
        font-size: 1.6em;
    }

    .time-bar {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }

    .segment-label {
        font-size: 1em;
    }

    .segment-time {
        font-size: 0.8em;
    }

    /* 통계 카드 */
    .stat-card {
        padding: 12px 8px;
    }

    .stat-card .number {
        font-size: 1.6em;
    }

    /* 필터 */
    .filter-section {
        padding: 14px;
        margin-bottom: 14px;
    }

    .filter-groups {
        /* flex 레이아웃이 기본이므로 모바일에서도 별도 override 불필요 */
        gap: 8px 14px;
    }

    .filter-btn,
    .filter-btn-reset {
        /* 모바일에서도 flex 나열하되 최소 너비만 보장 */
        min-width: 80px;
    }

    /* 서식지 */
    .habitat-header {
        padding: 10px 14px;
        font-size: 1.1em;
    }

    /* 입력 */
    .input-section {
        padding: 16px;
        margin-bottom: 16px;
    }

    .input-group {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    button {
        padding: 10px 20px;
    }

    /* 테이블 */
    th, td {
        padding: 8px 6px;
        font-size: 0.85em;
    }

    /* 결과 */
    .results {
        margin-top: 14px;
    }

    .no-results,
    .loading,
    .error {
        padding: 24px 16px;
    }

    /* 푸터 */
    footer {
        margin-top: 20px;
        padding: 14px 0;
    }
}


/* ========================================
   반응형 디자인 - 태블릿 (600px 이상)
======================================== */
/* filter-groups 는 flex wrap 레이아웃 사용 — grid 미디어 쿼리 불필요 */


/* ========================================
   반응형 디자인 - PC (1024px 이상)
======================================== */