:root {
    /* [라이트 모드 기본값] */
    --bg-body: #f4f7f6;
    --bg-card: #ffffff;
    --bg-closed: #fcfcfc;      /* 종료된 딜 배경 */
    --text-primary: #2c3e50;
    --text-secondary: #6c757d;
    --text-muted: #868e96;
    --border-color: #e9ecef;
    --border-strong: #ddd;
    --shadow-color: rgba(0, 0, 0, 0.05);
    --input-bg: #f1f3f5;
    --highlight-bg: #fff0f0;
    --scroll-btn-bg: rgba(0, 0, 0, 0.5);
    --scroll-btn-text: #ffffff;

    /* 필터 버튼 */
    --filter-btn-bg: #f1f3f5;
    --filter-btn-text: #495057;

    /* 검색창 포커스 시 테두리 색상 */
    --focus-ring-color: rgba(0, 123, 255, 0.1);
}

/* [다크 모드 값] */
[data-theme="dark"] {
    --bg-body: #121212;
    --bg-card: #1e1e1e;
    --bg-closed: #161616;      /* 종료된 딜 배경 (카드보다 어둡게) */
    --text-primary: #e0e0e0;
    --text-secondary: #b0b3b8;
    --text-muted: #888888;
    --border-color: #333333;
    --border-strong: #444444;
    --shadow-color: rgba(0, 0, 0, 0.3);
    --input-bg: #2c2c2c;
    --highlight-bg: #3a1a1a;
    --scroll-btn-bg: rgba(255, 255, 255, 0.2);
    --scroll-btn-text: #ffffff;

    /* 필터 버튼 */
    --filter-btn-bg: #2c2c2c;
    --filter-btn-text: #d0d0d0;

    /* 검색창 포커스 시 테두리 색상 */
    --focus-ring-color: rgba(13, 110, 253, 0.25);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: var(--bg-body);
    color: var(--text-primary);
    margin: 0;

    /* [핵심 수정] 좌우는 10px 유지하되, 위아래는 안전 영역(노치/홈바)을 더해서 계산 */
    padding-top: calc(20px + env(safe-area-inset-top));
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
    padding-left: 10px;
    padding-right: 10px;

    transition: background-color 0.3s ease;
}

.container {
    color: var(--text-primary);
    max-width: 640px;
    margin: auto;
}

/* =========================================
   [UX Upgrade] 고급스러운 헤더 디자인 (최종)
   ========================================= */

.header-section {
    background: var(--bg-card);
    /* 그림자는 더 은은하게, 테두리는 아주 연하게 */
    box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0,0,0,0.02);

    border-radius: 24px;
    /* [수정] 상하 패딩을 20px -> 16px로 줄여 컴팩트함 강조 */
    padding: 18px 20px;
    margin-bottom: 20px;

    display: flex;
    flex-direction: column;
    /* [수정] 요소 간격을 16px -> 12px로 줄여 밀도감 상승 */
    gap: 12px;
}

/* 1. 상단 영역 (타이틀 + 아이콘) */
.header-top-row {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    column-gap: 10px;
    align-items: center;
    min-height: 40px;
}

.header-back-link {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    text-decoration: none;
    flex: 0 0 auto;
    transition: background-color 0.2s ease, color 0.2s ease;
    z-index: 1;
}

.header-back-link:hover {
    background-color: var(--input-bg);
}

.header-back-link svg {
    width: 20px;
    height: 20px;
}

.header-title-wrap {
    width: 100%;
    max-width: 100%;
    pointer-events: none;
    text-align: center;
    justify-self: center;
}

.main-title {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 1.12em;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.04em;
    margin-bottom: 0;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.main-title-icon {
    flex: 0 0 auto;
    font-size: 0.96em;
    line-height: 1;
}

.main-title-text {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* 2. 아이콘 영역 (우측 상단) */
.header-right-icons {
    display: flex;
    align-items: center;
    gap: 0;
    margin-right: -3px;
    z-index: 1;
}

.header-right-icons .icon-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
}


.icon-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: all 0.2s ease;

    /* [수정] 배지 위치 기준점 설정 및 잘림 방지 */
    position: relative;
    overflow: visible;
}

.icon-btn svg {
    width: 20px; /* 아이콘 크기 살짝 축소로 세련됨 강조 */
    height: 20px;
    stroke-width: 1.8;
}

.icon-btn:hover {
    background-color: var(--input-bg);
    color: var(--text-primary);
}

/* 3. 공지사항 (Notice Row) - 텍스트 전용 모드 */
.header-notice-row {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 2px; /* 좌우 여백 최소화 */
    min-height: 20px;
}

/* 실제 공지 텍스트 */
.header-desc {
    font-size: 0.85em; /* 적당한 크기 */
    color: var(--text-secondary); /* 너무 튀지 않는 회색조 */
    font-weight: 500;

    /* 텍스트가 길어지면 ... 처리 */
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    /* 애니메이션용 */
    transition: opacity 0.5s ease;
    opacity: 1;
}

.header-desc.fade-out {
    opacity: 0;
}


/* 4. 검색창 (Modern Input) */
.integrated-search-bar {
    width: 100%;
    box-sizing: border-box;
    background-color: var(--input-bg);

    padding: 11px 16px; /* 높이 미세 조정 */
    border-radius: 14px;

    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid transparent;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.integrated-search-bar:focus-within {
    background-color: var(--bg-card);
    border-color: #007bff;
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.12);
    transform: translateY(-1px);
}

.search-input {
    width: 100%;
    border: none;
    background: transparent;
    font-size: 0.95rem; /* 폰트 사이즈 적정화 */
    color: var(--text-primary);
    font-weight: 500;
}
.search-input:focus { outline: none; }
.search-input::placeholder { color: #adb5bd; font-weight: 400; }
.search-icon { color: #adb5bd; width: 17px; height: 17px; }

/* 자동완성(Autofill) 대응 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px var(--input-bg) inset !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* 텍스트 선택(드래그) 스타일 */
.search-input::selection { background-color: rgba(0, 123, 255, 0.4); color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; }

.clear-btn-icon { background: none; border: none; padding: 0; color: var(--text-secondary); cursor: pointer; display: none; align-items: center; justify-content: center; }
.bar-divider { width: 1px; height: 16px; background-color: var(--border-strong); margin: 0 4px; }

/* 필터 아이콘 버튼 & 배지 */
.filter-icon-btn {
    background: none; border: none; padding: 4px; color: var(--text-secondary); cursor: pointer;
    display: flex; align-items: center; justify-content: center; position: relative;
    border-radius: 6px;
}
.filter-icon-btn.has-filter { color: #007bff; }

.filter-badge {
    position: absolute;
    /* [수정] 버튼 모서리에 걸치도록 위치 조정 */
    top: -2px;
    right: -2px;

    background-color: #ff6b6b; /* 빨간색 배경 */
    color: white;

    /* [수정] 폰트 크기와 배지 크기 최적화 */
    font-size: 10px;
    font-weight: 800;
    min-width: 16px; /* 원형 유지를 위해 최소 너비 확보 */
    height: 16px;
    padding: 0 3px;  /* 숫자가 두 자리일 때를 대비한 여백 */
    box-sizing: border-box;

    border-radius: 10px; /* 둥근 캡슐 형태 */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15); /* 그림자 추가로 가시성 확보 */
    z-index: 10;

    /* 애니메이션 (선택 사항: 숫자가 뜰 때 톡 튀어나오는 효과) */
    animation: popIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 팝인 애니메이션 정의 (CSS 파일 맨 아래 등에 추가) */
@keyframes popIn {
    from { transform: scale(0); }
    to { transform: scale(1); }
}

/* 검색 결과 없음 효과 */
.empty-result { animation: pulse-gray 2s infinite; border: 1px solid var(--border-strong); }
@keyframes pulse-gray {
    0% { box-shadow: 0 0 0 0 rgba(108, 117, 125, 0.2); }
    70% { box-shadow: 0 0 0 6px rgba(108, 117, 125, 0); }
    100% { box-shadow: 0 0 0 0 rgba(108, 117, 125, 0); }
}

/* ============================================================
   [UI 개선] 분수 형태의 필터 카운트 디자인 (140 / 200건)
   ============================================================ */
.list-info-row {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 12px; padding: 0 4px;
}
.list-summary { display: flex; align-items: center; gap: 6px; }

.total-count {
    font-size: 0.85em; font-weight: 700; color: var(--text-primary);
    padding: 4px 10px; border-radius: 12px; transition: all 0.3s;
}

/* 필터 적용 시 텍스트 스타일 재정의 */
.list-summary.is-filtered .total-count { color: var(--text-primary); }

/* [핵심] 검색된 숫자(140)만 파란색으로 강조 */
.list-summary.is-filtered .total-count b {
    color: #007bff;
    font-size: 1.1em; /* 살짝 더 크게 */
}
[data-theme="dark"] .list-summary.is-filtered .total-count b { color: #5c9eff; }

/* [핵심] 전체 개수(/ 200건)는 작고 연하게 (시선 분산 방지) */
.total-slash {
    font-size: 0.85em;
    color: var(--text-muted);
    font-weight: 500;
    margin-left: 2px;
}

/* ============================================================
   [UI 개선] iOS 스타일 애니메이션 + 기존의 예쁜 디자인 복구
   ============================================================ */
/* 1. 컨트롤 배경 (기존의 트랙 디자인 복구) */
.segmented-control {
    position: relative; display: flex; align-items: center;
    background-color: var(--border-color); /* 기존의 깔끔한 회색 트랙 */
    padding: 2px;                          /* 기존 패딩 복구 */
    border-radius: 18px;                   /* 기존 모서리 둥글기 복구 */
}

/* 2. 텍스트 버튼 (기존의 폰트, 자간, 크기 완벽 복구) */
.segment-item {
    position: relative; z-index: 2;
    background: transparent; border: none;
    padding: 5px 10px;                     /* 기존 여백 */
    font-size: 0.8em;                      /* 기존 폰트 크기 */
    font-weight: 500;                      /* 기존 폰트 두께 */
    color: var(--text-muted);              /* 기존 글자색 */
    letter-spacing: -0.5px;                /* [핵심] 기존의 세련된 자간 복구 */
    cursor: pointer; transition: color 0.2s ease;
    flex: 1; text-align: center;
}

/* 활성화된 텍스트 */
.segment-item.active { font-weight: 700; color: var(--text-primary); }

/* [기존 디자인 복구] '인기순(핫딜순)' 선택 시 빨간색 포인트 */
.segment-item.active[data-sort="rank_score"] { color: #e53935; }
[data-theme="dark"] .segment-item.active[data-sort="rank_score"] { color: #ff6b6b; }

/* 3. 움직이는 하얀 배경 (기존 .active 의 하얀 배경 + 그림자) */
.segment-bg {
    position: absolute; z-index: 1;
    top: 2px; bottom: 2px; left: 2px;      /* 부모 패딩(2px)에 맞춤 */
    background-color: var(--bg-card);      /* 기존 활성화 배경색 */
    border-radius: 15px;                   /* 기존 버튼 둥글기 */
    box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* 기존 그림자 */
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-theme="dark"] .segment-bg { background-color: #3d3d3d; }

/* ============================================================
   [필터 드로어 & 오버레이]
   ============================================================ */
.filter-drawer {
    position: fixed;
    top: 0;
    left: -100%;
    width: 85%;
    max-width: 380px;
    height: 100%;
    background: var(--bg-card);
    color: var(--text-primary);
    z-index: 2000;
    box-shadow: 5px 0 25px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    visibility: hidden;
    transition: left 0.45s cubic-bezier(0.16, 1, 0.3, 1);

    /* ▼▼▼ [핵심 추가] 아래 두 줄을 꼭 추가해주세요 ▼▼▼ */

    /* 1. 노치(카메라) 높이만큼 내부 콘텐츠를 아래로 밀어줍니다. */
    padding-top: env(safe-area-inset-top);

    /* 2. 패딩을 추가해도 전체 높이가 100%를 넘지 않게 계산합니다. (스크롤 꼬임 방지) */
    box-sizing: border-box;
}
.filter-drawer.open { left: 0; visibility: visible; }
.filter-drawer.no-transition { transition: none !important; }

.filter-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); z-index: 1999; opacity: 0; visibility: hidden;
    backdrop-filter: blur(2px); transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.filter-overlay.open { opacity: 1; visibility: visible; }

.drawer-header { padding: 8px 16px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; min-height: 46px; }
.drawer-title { font-size: 1em; font-weight: 700; color: var(--text-primary); }
.close-drawer-btn { background: none; border: none; cursor: pointer; color: var(--text-secondary); padding: 4px; display: flex; align-items: center; }

/* 필터 창(Drawer) 내부의 '필터 초기화' 버튼 */
.drawer-reset-btn {
    display: inline-flex; align-items: center;
    background: transparent; border: none; padding: 2px 6px;
    font-size: 0.75em; font-weight: 600; color: var(--text-muted);
    cursor: pointer; transition: color 0.2s;
}
.drawer-reset-btn:active { color: #007bff; }

.drawer-content {
    flex: 1;
    padding: 20px 20px 30px 20px;
    overflow-y: auto;

    /* [추가] 스크롤이 끝에 닿아도 부모(body)로 전파되지 않음 (최신 브라우저용) */
    overscroll-behavior: contain;

    /* [추가] iOS에서 관성 스크롤 부드럽게 */
    -webkit-overflow-scrolling: touch;
}

/* ============================================================
   [필터 버튼 스타일]
   ============================================================ */
.filter-group-title { font-size: 0.8em; color: var(--text-muted); font-weight: 700; margin-bottom: 10px; display: block; }
.filter-section { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; align-items: baseline; }

.filter-btn {
    display: flex; align-items: center; gap: 6px; padding: 5px 12px;
    border: 1px solid var(--border-strong); border-radius: 16px;
    background-color: var(--filter-btn-bg); color: var(--filter-btn-text);
    font-size: 0.85em; font-weight: 500; cursor: pointer; user-select: none; transition: all 0.2s ease;
}
.filter-btn[data-source] { font-size: 0.75em; padding: 4px 8px; gap: 3px; }
.filter-btn.active { background-color: #007bff; color: white; border-color: #007bff; }

#filter-all.active, #filter-cat-all.active, #filter-mall-all.active { background-color: var(--text-primary); border-color: var(--text-primary); color: var(--bg-card); }
.count-badge { font-size: 0.9em; font-weight: 700; color: #007bff; background-color: rgba(0, 123, 255, 0.1); padding: 2px 6px; border-radius: 8px; }
.filter-btn.active .count-badge { color: white; background-color: rgba(255, 255, 255, 0.2); }

.cat-btn { font-size: 0.75em !important; padding: 4px 8px !important; gap: 3px; }
.cat-btn.active { background-color: #007bff; border-color: #007bff; color: white; }
.cat-btn.zero-count { opacity: 0.4; background-color: var(--input-bg); color: var(--text-muted); border-color: var(--border-color); pointer-events: none; }
.cat-btn.zero-count.active { opacity: 0.7; background-color: #6c757d; border-color: #6c757d; color: white; pointer-events: auto; cursor: pointer; }

/* 소스 컬러 매핑 */
.filter-btn.active[data-source="뽐뿌"] { background-color: #808080; border-color: #808080; }
.filter-btn.active[data-source="퀘이사존"] { background-color: #FF7700; border-color: #FF7700; }
.filter-btn.active[data-source="에펨코리아"] { background-color: #5865f2; border-color: #5865f2; }
.filter-btn.active[data-source="어미새"] { background-color: #F04C57; border-color: #F04C57; }
.filter-btn.active[data-source="아카라이브"] { background-color: #00A495; border-color: #00A495; }
.filter-btn.active[data-platform="네이버카페"] { background-color: #03C75A; border-color: #03C75A; }
.filter-btn.active[data-source="루리웹"] { background-color: #0070DE; border-color: #0070DE; }

#filter-all, #filter-cat-all { padding: 4px 10px !important; font-weight: 600; color: var(--text-secondary); }


/* [NEW] 판매처 필터 버튼 스타일 (mall-btn) */
.mall-btn {
    font-size: 0.75em !important;
    padding: 4px 8px !important;
    gap: 3px;
}

/* 활성화 시 주황색 테마 적용 (목록의 mall-badge 색상과 연계) */
.mall-btn.active {
    background-color: #e67e22; /* mall-badge 텍스트 색상 활용 */
    border-color: #e67e22;
    color: white;
}

/* 다크모드 대응 */
[data-theme="dark"] .mall-btn.active {
    background-color: #d84315; /* 조금 더 짙은 오렌지 */
    border-color: #d84315;
}

/* 데이터가 0건일 때 스타일 (기존 .cat-btn.zero-count 와 동일한 로직 공유 가능) */
.mall-btn.zero-count {
    opacity: 0.4;
    background-color: var(--input-bg);
    color: var(--text-muted);
    border-color: var(--border-color);
    pointer-events: none;
}
.mall-btn.zero-count.active {
    opacity: 0.7;
    background-color: #8d6e63; /* 갈색 계열 회색 */
    border-color: #8d6e63;
    color: white;
    pointer-events: auto;
    cursor: pointer;
}


/* ============================================================
   [게시글 아이템 리스트]
   ============================================================ */
.list-group { display: flex; flex-direction: column; gap: 10px; }
.post-item, .ad-item {
    background: var(--bg-card); color: var(--text-primary);
    padding: 12px; border-radius: 14px; text-decoration: none;
    box-shadow: 0 5px 15px var(--shadow-color); border: 1px solid var(--border-color);
    display: flex; flex-direction: column; gap: 8px; transition: background-color 0.3s ease;

    /* [수정] 높이를 자동으로 늘어나게 변경 */
    height: auto;
    min-height: 110px;
}
.ad-item { display: flex; justify-content: center; align-items: center; min-height: 100px; padding: 10px 0; }

.post-top-info { display: flex; align-items: center; justify-content: flex-start; gap: 4px; font-size: 0.75em; color: var(--text-secondary); overflow: hidden; white-space: nowrap; margin-bottom: 8px; }

/* 소스 텍스트 색상 */
.source-name { font-weight: 600; flex-shrink: 0; }
.source-뽐뿌 { color: #808080; }
.source-퀘이사존 { color: #FF7700; }
.source-에펨코리아 { color: #5865f2; }
.source-어미새 { color: #F04C57; }
.source-아카라이브 { color: #00A495; }
.source-네이버카페 { color: #03C75A; }
.source-루리웹 { color: #0070DE; }

/* 클릭 가능한 소스 뱃지 (아웃링크) */
.source-name.clickable-badge {
    cursor: pointer; transition: all 0.2s ease; display: inline-flex; align-items: center; padding: 2px 6px 2px 0; position: relative; z-index: 5; border-radius: 4px;
}
.source-name.clickable-badge span { position: relative; top: 1px; }
.source-name.clickable-badge:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.source-name.clickable-badge:hover .external-icon { transform: translate(1px, -1px); opacity: 1; }

.external-icon { margin-left: 3px; opacity: 0.6; transition: transform 0.2s; width: 11px !important; height: 11px !important; min-width: 11px; max-width: 11px; display: block; }

.mall-badge { display: inline-block; font-size: 0.72em; font-weight: 600; color: #e67e22; background-color: #fff3e0; padding: 0px 5px; border-radius: 6px; border: 1px solid #ffe0b2; vertical-align: middle; line-height: 1.4; flex-shrink: 0; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-theme="dark"] .mall-badge { background-color: #3e2723; border-color: #5d4037; color: #ffab91; }

.cat-badge { display: inline-block; font-size: 0.72em; font-weight: 500; color: #666; background-color: #f5f5f5; padding: 0px 5px; border-radius: 6px; border: 1px solid #eee; vertical-align: middle; line-height: 1.4; flex-shrink: 0; }
[data-theme="dark"] .cat-badge { background-color: #2c2c2c; border-color: #444; color: #ccc; }

.top-stats { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 0.85em; color: #ccc; flex-shrink: 0; }
.stat-item { display: inline-flex; align-items: center; gap: 3px; }
.like-item .highlight-num { color: inherit; font-weight: 800; }

.post-main-content { display: flex; align-items: flex-start; gap: 12px; }
.thumb-box {
    width: 74px; height: 74px; flex-shrink: 0; background-color: var(--input-bg);
    border-radius: 10px; overflow: hidden; border: 1px solid var(--border-color);
    display: flex; align-items: center; justify-content: center; position: relative;
}
.thumb-box img { width: 100%; height: 100%; object-fit: cover; }

.info-box { flex-grow: 1; display: flex; flex-direction: column; min-height: 74px; overflow: visible; }
.post-title {
    font-weight: 700; font-size: 1.0em; color: var(--text-primary); line-height: 1.35;

    /* [수정] 위쪽 여백을 auto로 주어 제목이 수직 중앙으로 오게 함 */
    margin-top: auto;
    /* [수정] 가격 정보와 너무 멀어지지 않도록 하단 여백 축소 (8px -> 2px) */
    margin-bottom: 2px;

    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.highlight-keyword { color: #e53935; background-color: var(--highlight-bg); font-weight: 800; border-radius: 4px; }

.price-time-row { display: flex; align-items: center; width: 100%; flex-shrink: 0; margin-top: auto; }
.price { font-size: 1.1em; font-weight: 900; color: #e53935; letter-spacing: -0.5px; flex-shrink: 0; }
[data-theme="dark"] .price { color: #ff6b6b; }

.shipping {
    font-size: 0.8em;
    color: var(--text-muted);
    margin-left: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.time { margin-left: auto; flex-shrink: 0; font-size: 0.85em; color: #bbb; }


/* ============================================================
   [상태별 스타일 (종료, 새 항목, 플로팅 버튼, 로더)]
   ============================================================ */

/* [종료된 핫딜] */
.post-item.closed { background-color: var(--bg-closed); border-color: var(--border-color); opacity: 0.85; transition: all 0.3s ease; }
.post-item.closed .thumb-box { position: relative; }
.post-item.closed .thumb-box img { filter: grayscale(100%); opacity: 0.6; }

.closed-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.05); display: flex; align-items: center; justify-content: center; border-radius: 12px; }
.closed-badge-text { background-color: rgba(50, 50, 50, 0.85); color: white; font-size: 0.75em; font-weight: 700; padding: 4px 10px; border-radius: 20px; backdrop-filter: blur(2px); box-shadow: 0 2px 4px rgba(0,0,0,0.1); }

.post-item.closed .post-title { color: var(--text-muted); }
.post-item.closed .price { text-decoration: line-through; color: var(--text-muted); font-weight: 500; }
.post-item.closed .shipping, .post-item.closed .time { color: #ccc; }
[data-theme="dark"] .post-item.closed .shipping, [data-theme="dark"] .post-item.closed .time { color: #555; }
.post-item.closed:hover { opacity: 1; background-color: var(--bg-card); border-color: var(--border-strong); transform: translateY(-2px); box-shadow: 0 4px 12px var(--shadow-color); }

/* [플로팅 버튼] */
#scrollTopBtn {
    position: fixed; bottom: 20px; right: 20px; width: 50px; height: 50px;
    background-color: var(--scroll-btn-bg); color: var(--scroll-btn-text);
    border: none; border-radius: 50%; font-size: 24px; cursor: pointer; display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transition: 0.3s; z-index: 1000;
}
#scrollTopBtn.show { opacity: 1; visibility: visible; }

#floatingFilterBtn {
    position: fixed; bottom: 80px; right: 20px; width: 50px; height: 50px;
    background-color: var(--bg-card); color: #007bff; border: 1px solid var(--border-color);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transition: all 0.3s; z-index: 1000;
}
#floatingFilterBtn.show { opacity: 1; visibility: visible; }

/* [로더] */
#loader { height: 50px; display: none; text-align: center; padding: 20px; }
.spinner { border: 4px solid #f3f3f3; border-top: 4px solid #3498db; border-radius: 50%; width: 30px; height: 30px; animation: spin 1s linear infinite; margin: auto; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* [신규 아이템 강조 애니메이션] */
.new-item-anim { animation: slideDownHighlight 2.5s ease-out forwards; will-change: transform, background-color, max-height; }
@keyframes slideDownHighlight {
    0% { opacity: 0; transform: translateY(-20px); max-height: 0; margin-bottom: 0; overflow: hidden; background-color: #fff9db; border-color: #ffec99; }
    30% { opacity: 1; transform: translateY(0); max-height: 200px; margin-bottom: 12px; }
    80% { background-color: #fff9db; border-color: #ffec99; }
    100% { background-color: var(--bg-card); border-color: var(--border-color); }
}
[data-theme="dark"] @keyframes slideDownHighlight {
    0% { opacity: 0; transform: translateY(-20px); max-height: 0; margin-bottom: 0; overflow: hidden; background-color: #3e2723; border-color: #5d4037; }
    30% { opacity: 1; transform: translateY(0); max-height: 200px; margin-bottom: 12px; }
    80% { background-color: #3e2723; border-color: #5d4037; }
    100% { background-color: var(--bg-card); border-color: var(--border-color); }
}

/* ============================================================
   [시스템 설정 리스트 디자인 (iOS 스타일)]
   ============================================================ */
.drawer-divider { border: 0; border-top: 1px solid var(--border-color); margin: 20px 0; }

.settings-list {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden; /* 모서리 둥글게 깎기 */
}

.settings-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 16px; border-bottom: 1px solid var(--border-color);
    font-size: 0.9em; font-weight: 600; color: var(--text-primary); text-decoration: none;
}
.settings-item:last-child { border-bottom: none; }

.settings-label { display: flex; align-items: center; gap: 10px; }
.settings-icon { font-size: 1.1em; }

/* 링크(고객센터) 클릭 시 효과 */
.settings-item.link-item:active { background-color: var(--input-bg); }
.chevron-right { color: var(--text-muted); }

/* [수정] 기존 .theme-switch -> .ios-toggle 로 공용화 */
.ios-toggle {
    width: 48px; height: 26px;
    background-color: #cbd5e1;
    border-radius: 26px; border: none;
    position: relative; cursor: pointer;
    transition: background-color 0.3s;
    padding: 0; box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}
.ios-toggle.active { background-color: #007bff; }

.ios-toggle::after {
    content: '';
    position: absolute; top: 3px; left: 3px;
    width: 20px; height: 20px;
    background-color: white;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}
.ios-toggle.active::after { transform: translateX(22px); }

/* 토글 버튼 초기화 시 스르륵 밀리는 현상(애니메이션) 강제 차단 */
.ios-toggle.notransition,
.ios-toggle.notransition::after {
    transition: none !important;
}


/* 새로고침 회전 애니메이션 */
.settings-item.is-refreshing .settings-icon {
    animation: spin-slow 2s linear infinite;
    color: #28a745;
}
@keyframes spin-slow { 100% { transform: rotate(360deg); } }


/* 카운트 숫자 옆의 보조 텍스트 스타일 */
.count-sub-info {
    font-size: 0.8em;
    color: #999;
    font-weight: 400;
    margin-left: 4px;
    letter-spacing: -0.5px;
}

/* 필터 결과 텍스트 (모바일 대응) */
.filter-label-text {
    margin-right: 2px;
}

/* [모바일 최적화] 화면이 좁을 때 (400px 이하) */
@media (max-width: 400px) {
    /* "필터 결과" 글자 숨기고 숫자만 강조 */
    .filter-label-text {
        display: none;
    }

    /* 폰트 크기 살짝 조절 */
    .total-count {
        font-size: 0.8em;
    }
    .total-count b {
        font-size: 1.1em;
    }

    /* 전체 개수(/ 200건) 부분도 더 작게 */
    .total-slash {
        font-size: 0.85em;
    }
}


/* ============================================================
   [그룹핑 배지 및 모달 스타일]
   ============================================================ */

/* 카드 내 그룹 배지 버튼 */
/* [디자인 수정] 세련된 뱃지 스타일의 그룹 버튼 */
.group-badge-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px; /* 상단 여백 약간 조절 */
    padding: 6px 12px;

    /* 우측 정렬의 핵심 */
    margin-left: auto;

    /* 배경색과 테두리 (파란색 테마 유지) */
    background-color: rgba(0, 123, 255, 0.08);
    color: #007bff;

    font-size: 0.85em;
    font-weight: 700;
    border-radius: 20px;
    border: 1px solid rgba(0, 123, 255, 0.2);

    cursor: pointer;
    transition: all 0.2s ease;
    width: fit-content;
}

.group-badge-btn:hover {
    background-color: rgba(0, 123, 255, 0.15);
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0, 123, 255, 0.15);
}

/* 아이콘 폰트 크기 미세 조정 */
.group-badge-icon {
    font-size: 1.1em;
    line-height: 1;
    margin-right: 2px;
}

/* 다크모드 대응 */
[data-theme="dark"] .group-badge-btn {
    background-color: rgba(90, 150, 255, 0.15);
    color: #6cb2ff;
    border-color: rgba(90, 150, 255, 0.3);
}

/* 모달 타이틀 수정 */
.group-modal-title {
    font-size: 1.15em;
    font-weight: 800;
    color: var(--text-primary);
}

/* 그룹 모달 (Bottom Sheet 스타일) */
.group-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); z-index: 3000;
    opacity: 0; visibility: hidden; transition: opacity 0.3s;
    display: flex; align-items: flex-end; justify-content: center;
    backdrop-filter: blur(2px);
}
.group-modal-overlay.open { opacity: 1; visibility: visible; }

.group-modal {
    background: var(--bg-card); width: 100%; max-width: 600px;
    border-top-left-radius: 20px; border-top-right-radius: 20px;
    padding: 20px; box-shadow: 0 -5px 25px rgba(0,0,0,0.2);
    transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    max-height: 80vh; display: flex; flex-direction: column;
}
.group-modal-overlay.open .group-modal { transform: translateY(0); }

.group-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid var(--border-color); }
.group-modal-title { font-size: 1.1em; font-weight: 700; color: var(--text-primary); }
.group-modal-close { background: none; border: none; font-size: 1.5em; cursor: pointer; color: var(--text-secondary); padding: 0 8px; }

.group-list { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; padding-bottom: 20px; }


/* [수정됨] 그룹 아이템 카드 (박스 형태 & 3단 구조) */
.group-item {
    display: flex; flex-direction: column; gap: 6px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    text-decoration: none; color: var(--text-primary);
    background-color: var(--bg-card);
    transition: background-color 0.2s, transform 0.1s;
}
.group-item:active { background-color: var(--input-bg); transform: scale(0.98); }
.group-item.closed { opacity: 0.7; background-color: var(--bg-closed); }

/* 1. 사이트명 (목록과 동일한 고유 컬러 적용됨) */
.group-item-header { display: flex; align-items: center; gap: 6px; font-size: 0.8em; }

/* 2. 제목 (잘 보이고 두 줄까지만) */
.group-item-title {
    font-size: 0.95em; font-weight: 600; line-height: 1.35;
    color: var(--text-primary);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.group-item.closed .group-item-title { color: var(--text-muted); text-decoration: line-through; }

/* 3. 가격 및 배송비 */
.group-item-info { display: flex; align-items: center; font-size: 0.9em; margin-top: 2px; }
.g-price { color: #e53935; font-weight: 800; margin-right: 6px; }
.g-shipping { color: var(--text-muted); font-size: 0.85em; }

/* 모달 종료 뱃지 */
.g-closed-badge {
    font-size: 0.75em; color: #fff; background: #adb5bd;
    padding: 2px 6px; border-radius: 4px; font-weight: 600;
}

/* 다크모드 대응 */
[data-theme="dark"] .group-badge-btn { background-color: #2c2c2c; border-color: #444; color: #ccc; }
[data-theme="dark"] .group-item:active { background-color: #333; }
[data-theme="dark"] .g-price { color: #ff6b6b; }



/* 그룹 아이템 헤더: 사이트명(왼쪽) - 스탯(오른쪽) 배치 */
.group-item-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8em;
    /* 핵심: 종료 뱃지나 스탯을 오른쪽 끝으로 밀어줌 */
    justify-content: space-between;
}

/* [신규] 통계 정보 (조회수, 추천수) 컨테이너 */
.g-stats {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto; /* 왼쪽 요소들과 거리 벌리기 (우측 정렬) */
    margin-right: 4px; /* 종료 뱃지와의 간격 */
    color: var(--text-muted);
}

/* 개별 통계 아이템 */
.g-stat-item {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 0.9em;
    font-weight: 500;
}

/* 추천수는 빨간색 강조 */
.g-stat-item.like {
    color: #e74c3c;
}
[data-theme="dark"] .g-stat-item.like {
    color: #ff6b6b;
}

/* 종료 뱃지 위치 미세 조정 */
.g-closed-badge {
    margin-left: 0; /* flex 레이아웃이므로 margin-left: auto 제거 */
}


/* 피드백 배너 스타일 */
.feedback-banner {
    background-color: rgba(0, 123, 255, 0.08); /* 연한 파란색 배경 */
    border: 1px solid rgba(0, 123, 255, 0.2);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 20px; /* 리스트와 간격 */
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    animation: fadeIn 0.5s ease-out;
}

.fb-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fb-icon {
    font-size: 1.4em;
}

.fb-text {
    font-size: 0.9em;
    display: flex;
    flex-direction: column;
    gap: 3px; /* 간격 살짝 넓힘 */

    /* [핵심] 단어 중간에서 끊기지 않도록 설정 */
    word-break: keep-all;
    line-height: 1.4;
}

/* [신규] 배너 내 안내 문구 스타일 */
.fb-tip {
    font-size: 0.85em;
    color: var(--text-secondary);
    font-weight: 400;
    margin-top: 2px;
}

.fb-text strong {
    color: var(--text-primary);
    font-weight: 700;
}

/* [모바일 최적화] 화면이 좁을 때 폰트 크기 미세 조정 */
@media (max-width: 480px) {
    .feedback-banner {
        padding: 10px 12px; /* 패딩 조금 줄임 */
    }
    .fb-icon {
        font-size: 1.2em; /* 아이콘 크기 축소 */
    }
    .fb-text {
        font-size: 0.85em; /* 본문 폰트 축소 */
    }
    .fb-text strong {
        font-size: 1.05em; /* 제목은 상대적으로 큼 */
    }
}

.fb-link {
    color: #007bff;
    font-weight: 600;
    text-decoration: none;
    font-size: 0.95em;
}

.fb-link:hover {
    text-decoration: underline;
}

.fb-close {
    background: none;
    border: none;
    font-size: 1.4em;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

/* 다크모드 대응 */
[data-theme="dark"] .feedback-banner {
    background-color: rgba(90, 150, 255, 0.1);
    border-color: rgba(90, 150, 255, 0.2);
}
[data-theme="dark"] .fb-link {
    color: #6cb2ff;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}


/* AI 뱃지 기본 레이아웃 수정 */
.ai-badge {
    position: relative;         /* 가상 요소를 배치하기 위함 */
    display: inline-block;      /* [핵심 수정] inline-flex -> inline-block (줄바꿈 오류 해결) */
    font-size: 0.7em;
    font-weight: 600;           /* 적당한 두께 */
    padding: 1px 6px;           /* 테두리 공간 */
    border-radius: 6px;
    color: #6d28d9;
    background: var(--bg-card); /* 내부 배경 */
    overflow: hidden;           /* 넘치는 빛 제거 */
    vertical-align: middle;     /* 텍스트와 높이 맞춤 */
    margin-top: -2px;           /* 위치 미세 조정 */
    margin-right: 3px;          /* 제목과 간격 */
    z-index: 1;
    line-height: 1.2;           /* [추가] 뱃지 내부 높이 안정화 */
}

/* 빙글빙글 돌아가는 빛의 원천 (그대로 유지) */
.ai-badge::before {
    content: '';
    position: absolute;
    z-index: -2;
    left: -50%;
    top: -50%;
    width: 200%;
    height: 200%;
    background-color: #f5f3ff;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%;
    background-image: conic-gradient(#6d28d9, #ddd6fe, #6d28d9);
    animation: rotate-ai-border 3s linear infinite;
}

/* 내부를 채워서 테두리처럼 보이게 함 (최적화) */
.ai-badge::after {
    content: '';                /* [수정] 텍스트 제거 (HTML 본문 텍스트만 보이게 하여 충돌 방지) */
    position: absolute;
    z-index: -1;
    left: 1px;                  /* 테두리 두께 */
    top: 1px;
    right: 1px;
    bottom: 1px;
    background: #f5f3ff;        /* 연한 보라색 내부 */
    border-radius: 5px;
}

/* 텍스트 투명도 처리 및 색상 */
.ai-badge {
    color: #6d28d9;
    border: none;               /* 기존 실선 테두리 제거 */
}

/* 회전 애니메이션 */
@keyframes rotate-ai-border {
    100% {
        transform: rotate(1turn);
    }
}

/* 다크모드 대응 */
[data-theme="dark"] .ai-badge::after {
    background: #2e1065;
}
[data-theme="dark"] .ai-badge {
    color: #e9d5ff;
}

/* 알림 아이콘 기본 상태 */
.sound-icon-wrapper {
    display: flex;
    align-items: center;
    transition: color 0.3s ease, transform 0.3s ease;
    color: var(--text-secondary); /* 기본 회색 */
}

/* 알림이 켜졌을 때 (active 클래스 추가 시) */
.sound-icon-wrapper.active {
    color: #f1c40f; /* 밝은 노란색 (골드) */
    /* 아이콘 내부 채우기 (SVG fill 속성 제어는 CSS로 까다로울 수 있으므로 색상만 변경) */
    filter: drop-shadow(0 0 5px rgba(241, 196, 15, 0.4)); /* 은은한 빛 효과 */
}

/* 켜졌을 때 종 흔들림 애니메이션 (선택사항) */
.sound-icon-wrapper.active svg {
    animation: swing 2s ease-in-out infinite;
    fill: #f1c40f; /* 내부 채우기 */
    stroke: #d4ac0d; /* 테두리는 조금 더 진하게 */
}


/* ============================================================
   [에티켓 시간 선택 드롭다운]
   ============================================================ */
.time-select {
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-strong);
    background-color: var(--input-bg);
    color: var(--text-primary);
    font-size: 0.95em;
    font-weight: 700;
    outline: none;
    cursor: pointer;
    appearance: none; /* 기본 화살표 숨김 */

    /* 커스텀 화살표 SVG 삽입 */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 14px;
    padding-right: 28px;
}
[data-theme="dark"] .time-select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bbb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
}



@keyframes swing {
    0% { transform: rotate(0deg); }
    10% { transform: rotate(15deg); }
    20% { transform: rotate(-10deg); }
    30% { transform: rotate(5deg); }
    40% { transform: rotate(-5deg); }
    50% { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
}

/* 다크모드 대응 */
[data-theme="dark"] .sound-icon-wrapper.active {
    color: #f39c12; /* 다크모드에서는 조금 더 진한 오렌지 골드 */
    filter: drop-shadow(0 0 5px rgba(243, 156, 18, 0.4));
}
[data-theme="dark"] .sound-icon-wrapper.active svg {
    fill: #f39c12;
    stroke: #e67e22;
}


/* 신규 핫딜 알림 토스트 (인앱 배너) */
.new-deal-toast {
    position: fixed;
    /* 노치 영역까지 고려해서 더 위로 확실히 숨김 (-80px -> -120px) */
    top: -120px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 400px;
    background-color: rgba(33, 37, 41, 0.95);
    color: #fff;
    padding: 12px 16px;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    z-index: 2000;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: top 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    backdrop-filter: blur(4px);
}

/* 알림이 나타날 때의 위치 설정 */
.new-deal-toast.show {
    /* [핵심 수정]
       기존 16px은 너무 좁을 수 있으므로 20px~25px 정도로 넉넉하게 잡고,
       여기에 노치 높이(env)를 더해줍니다.
    */
    top: calc(25px + env(safe-area-inset-top));
}

/* 토스트 내부 이미지 */
.toast-thumb {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
    border: 1px solid #555;
    flex-shrink: 0;
}

/* 토스트 텍스트 영역 */
.toast-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.toast-title {
    font-size: 0.9em;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.toast-desc {
    font-size: 0.75em;
    color: #ffd700; /* 노란색 강조 */
    font-weight: 500;
}

/* 닫기 버튼 */
.toast-close {
    background: none;
    border: none;
    color: #aaa;
    font-size: 1.2em;
    padding: 4px;
    cursor: pointer;
}


/* ============================================================
   [즐겨찾기 (북마크) 관련 스타일]
   ============================================================ */
/* 1. 카드 우측 상단 끝 (조회/추천 옆) 별표 아이콘 */
.bookmark-btn {
    background: transparent;
    border: none;
    padding: 0 0 0 6px; /* 우측 끝 간격 확보 */
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.bookmark-btn svg {
    width: 15px; height: 15px;
    fill: transparent;
    stroke: #ccc; /* 기본 테두리 색상 (조회수 아이콘 색상과 통일) */
    stroke-width: 2.5; /* 선 굵기를 약간 도톰하게 */
    transition: fill 0.2s, stroke 0.2s, transform 0.2s;
}
/* 활성화(찜) 상태 - 노란색 별표 & 크기 팝업 애니메이션 */
.bookmark-btn.active svg {
    fill: #f1c40f; stroke: #f1c40f;
    transform: scale(1.2); /* 눌렀을 때 살짝 커지는 효과 */
}
.bookmark-btn:active { transform: scale(0.85); }

/* 다크모드 대응 (기본 회색 선을 다크모드에 맞게 조정) */
[data-theme="dark"] .bookmark-btn svg { stroke: #666; }
[data-theme="dark"] .bookmark-btn.active svg { stroke: #f1c40f; }

/* 2. 헤더의 찜 목록 가기 버튼 */
.header-bookmark-btn {
    display: flex; align-items: center; justify-content: center;
    background: none; border: none; padding: 4px; margin-left: 2px;
    color: var(--text-secondary); cursor: pointer; text-decoration: none;
    transition: color 0.2s;
}
.header-bookmark-btn:hover { color: #f1c40f; }

/* 3. 찜 목록 페이지 - 빈 상태(Empty State) 안내창 */
.empty-bookmark-state {
    text-align: center; padding: 60px 20px;
    background: var(--bg-card); border-radius: 16px;
    border: 1px solid var(--border-color); margin-top: 20px;
}
.empty-icon { font-size: 3em; margin-bottom: 15px; animation: swing 2s infinite ease-in-out; display: inline-block; }
.empty-bookmark-state h3 { font-size: 1.2em; color: var(--text-primary); margin: 0 0 15px 0; }
.empty-desc {
    list-style: none; padding: 0; margin: 0 auto 25px auto;
    text-align: left; max-width: 320px; color: var(--text-muted); font-size: 0.85em; line-height: 1.6;
}
.empty-desc li { position: relative; padding-left: 14px; margin-bottom: 8px; word-break: keep-all;}
.empty-desc li::before { content: '•'; position: absolute; left: 0; color: #007bff; font-weight: bold; }
.go-list-btn {
    display: inline-block; padding: 10px 24px;
    background: #007bff; color: white; font-weight: 700; font-size: 0.9em;
    border-radius: 20px; text-decoration: none; box-shadow: 0 4px 10px rgba(0,123,255,0.3);
}

/* 찜한 개수가 1개 이상일 때 (.active 클래스가 붙으면) */
#headerBookmarkBtn.active svg {
    fill: #f1c40f;   /* 속 채우기 (노란색) */
    stroke: #f1c40f; /* 테두리 (노란색) */

    /* 선택사항: 약간의 빛나는 효과 */
    filter: drop-shadow(0 0 2px rgba(241, 196, 15, 0.4));
    transition: all 0.3s ease;
}

/* 다크모드에서도 잘 보이도록 동일하게 유지하거나 미세 조정 */
[data-theme="dark"] #headerBookmarkBtn.active svg {
    fill: #f1c40f;
    stroke: #f1c40f;
}

/* ============================================================
   [컴팩트 추천수 필터 (한 줄 디자인)]
   ============================================================ */
.like-filter-compact {
    display: flex;
    align-items: center;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 4px;
    height: 48px; /* 높이 고정 (공간 절약) */
    gap: 8px;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden; /* 삐져나감 방지 */
}

/* 1. 왼쪽: 스테퍼 (미세조정) */
.compact-stepper {
    display: flex;
    align-items: center;
    background-color: var(--input-bg);
    border-radius: 8px;
    padding: 2px;
    flex-shrink: 0; /* 공간이 좁아도 절대 줄어들지 않음 */
}

.c-step-btn {
    width: 32px; height: 32px;
    border: none; background: var(--bg-card);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 1.2em; line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    display: flex; align-items: center; justify-content: center;
}
.c-step-btn:active { background-color: #ddd; transform: scale(0.95); }

.c-step-display {
    width: 36px; text-align: center;
}
.c-step-display input {
    width: 100%; border: none; background: transparent;
    text-align: center; font-weight: 800; color: #e53935;
    font-size: 1.0em; padding: 0; margin: 0;
    pointer-events: none; /* 입력 방지 (버튼으로만 조작) */
}

/* 2. 구분선 */
.c-divider {
    width: 1px; height: 20px;
    background-color: var(--border-color);
    flex-shrink: 0;
}

/* 3. 오른쪽: 프리셋 (가로 스크롤) */
.compact-presets {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1; /* 남은 공간을 모두 차지 */

    /* [핵심] 공간이 부족하면 가로 스크롤 발생 (줄바꿈 방지) */
    overflow-x: auto;
    white-space: nowrap;

    /* 스크롤바 숨기기 */
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-right: 2px;
}
.compact-presets::-webkit-scrollbar { display: none; }

.c-preset-btn {
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.85em; font-weight: 600;
    padding: 6px 10px;
    border-radius: 14px;
    cursor: pointer;
    flex-shrink: 0; /* 버튼이 찌그러지지 않음 */
    transition: all 0.2s;
}

/* 활성화 상태 */
.c-preset-btn.active {
    background-color: var(--text-primary); /* 다크모드 대응 자동 */
    color: var(--bg-card);
    font-weight: 700;
}

/* 다크모드 미세조정 */
[data-theme="dark"] .c-step-btn { background-color: #383838; color: #fff; }
[data-theme="dark"] .c-step-display input { color: #ff6b6b; }


/* ============================================================
   [알림 설정 모달 (Bottom Sheet) 스타일]
   ============================================================ */

/* 배경 오버레이 */
.bottom-sheet-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); z-index: 3000;
    opacity: 0; visibility: hidden; transition: opacity 0.3s;
    display: flex; align-items: flex-end; justify-content: center;
    backdrop-filter: blur(2px);
}
/* JS에서 open 클래스가 붙으면 보임 */
.bottom-sheet-overlay.open { opacity: 1; visibility: visible; }

/* 모달 본문 (아래에서 올라오는 시트) */
.bottom-sheet {
    background: var(--bg-card); width: 100%; max-width: 600px;
    border-top-left-radius: 20px; border-top-right-radius: 20px;
    padding: 20px; box-shadow: 0 -5px 25px rgba(0,0,0,0.2);
    transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    max-height: 85vh; display: flex; flex-direction: column;
}
/* 오버레이가 열리면 시트도 올라옴 */
.bottom-sheet-overlay.open .bottom-sheet { transform: translateY(0); }

/* 모달 헤더 */
.sheet-handle-bar {
    width: 40px; height: 4px; background-color: var(--border-strong);
    border-radius: 2px; margin: 0 auto 15px auto; flex-shrink: 0;
}
.sheet-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid var(--border-color);
}
.sheet-title { font-size: 1.1em; font-weight: 700; color: var(--text-primary); }
.sheet-close { background: none; border: none; font-size: 1.8em; color: var(--text-secondary); cursor: pointer; padding: 0 5px; line-height: 1; }

/* 모달 내용 영역 */
.sheet-content { overflow-y: auto; padding-bottom: 20px; }

.settings-item-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 0; font-weight: 600; color: var(--text-primary);
}
.sheet-divider { border: 0; border-top: 1px solid var(--border-color); margin: 15px 0; }

/* 키워드 입력 관련 */
.keyword-input-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 10px; color: var(--text-primary);
}
.keyword-input-header h4 { margin: 0; font-size: 1em; }

.keyword-input-box { display: flex; gap: 8px; margin-bottom: 15px; }
.keyword-input-box input {
    flex: 1; padding: 10px; border-radius: 8px; border: 1px solid var(--border-strong);
    background-color: var(--input-bg); color: var(--text-primary);
}
.btn-add {
    padding: 0 16px; background-color: #007bff; color: white; border: none;
    border-radius: 8px; font-weight: 600; cursor: pointer;
}
.keyword-tags-area {
    display: flex; flex-wrap: wrap; gap: 8px; min-height: 40px;
}

/* 권한 요청 버튼 */
.btn-primary-full {
    width: 100%; padding: 12px; background-color: #007bff; color: white;
    border: none; border-radius: 12px; font-weight: 700; font-size: 1em; cursor: pointer;
    margin-bottom: 8px;
}
.guide-text { font-size: 0.85em; color: var(--text-muted); text-align: center; margin: 0; }


/* ============================================================
   [프리미엄 알림 설정 모달 UI]
   ============================================================ */
.premium-sheet {
    background-color: var(--bg-body); /* 모달 배경을 약간 어둡게(회색빛) 설정 */
    padding: 15px 20px 30px 20px;
    margin: 0 -20px; /* 기존 패딩 상쇄 */
}

/* 카드 UI */
.setting-card {
    background-color: var(--bg-card);
    border-radius: 16px;
    padding: 6px 16px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03); /* 아주 은은한 그림자 */
    border: 1px solid var(--border-color);
}

/* 카드 내부 행 */
.setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
}
.setting-divider {
    height: 1px;
    background-color: var(--border-color);
    margin: 0 -16px; /* 카드 끝까지 선 닿게 */
}

/* 텍스트 위계 설정 */
.setting-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0; /* 말줄임표(...)가 작동하기 위한 필수 속성 */
    flex: 1; /* 버튼을 제외한 남은 공간을 꽉 채움 */
    padding-right: 10px; /* 우측 토글 버튼과의 여백 */
}
.setting-title-with-icon {
    display: flex;
    align-items: center;
    gap: 8px;
}
.setting-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}
.setting-desc {
    font-size: 0.75rem; /* 기존 0.8rem에서 살짝 축소하여 한 줄 확보 */
    color: var(--text-muted);
    font-weight: 400;

    /* [핵심] 텍스트 절대 두 줄로 안 넘어가게 강제 한 줄 & 말줄임표 처리 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

/* 시간 선택기 (우측 삐져나감 해결) */
.time-row { align-items: flex-start; flex-direction: column; gap: 12px; }
/* 1. 시간 선택기 컨테이너 정렬 변경 */
.time-selectors {
    display: flex;
    align-items: center;
    justify-content: center; /* [핵심] 내부 요소들을 꽉 채우지 않고 중앙으로 모음 */
    gap: 30px; /* 양쪽 시간과 물결(~) 사이의 넉넉한 간격 */
    width: 100%;
    background: var(--input-bg);
    padding: 8px 12px;
    border-radius: 12px;
    box-sizing: border-box;
}

/* 2. select 박스 자체의 크기를 줄이고 중앙 정렬 유도 */
.time-select-modern {
    width: 85px;

    /* [핵심 추가] 아이폰(iOS)의 기본 스타일을 강제로 벗겨냅니다. */
    appearance: none;
    -webkit-appearance: none; /* 아이폰 화살표 표시를 위한 필수 마법의 코드 */
    -moz-appearance: none;

    border: none;
    background: transparent;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    outline: none;

    /* 아이폰 버그 회피용 정렬 유지 (왼쪽부터 여백으로 밀어서 중앙 맞춤) */
    text-align: left;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 18px;
    padding-right: 24px;

    /* 커스텀 화살표 디자인 */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 14px;
    cursor: pointer;
}

/* 3. 다크모드일 때 화살표 색상 반전 처리 */
[data-theme="dark"] .time-select-modern {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bbb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
}
.time-tilde { color: var(--text-muted); font-weight: 600; }

/* 키워드 영역 (입력창도 혹시 삐져나가지 않도록 보완) */
.keyword-card { padding-top: 16px; padding-bottom: 16px; }
.keyword-header { padding-top: 0; align-items: flex-start; }

.integrated-keyword-input {
    display: flex;
    align-items: center;
    background-color: var(--input-bg);
    border-radius: 12px;
    padding: 6px 6px 6px 14px;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    margin-bottom: 12px;

    /* [핵심] 입력창 우측 삐져나감 예방 */
    width: 100%;
    box-sizing: border-box;
}
.integrated-keyword-input:focus-within {
    border-color: #007bff;
    background-color: var(--bg-card);
}
.integrated-keyword-input input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 0.95rem;
    color: var(--text-primary);
    outline: none;
}
.btn-add-text {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: transform 0.1s;
}
.btn-add-text:active { transform: scale(0.95); }

/* 다크모드 대응 */
[data-theme="dark"] .setting-card { background-color: #1e1e1e; border-color: #333; }
[data-theme="dark"] .premium-sheet { background-color: #121212; }


/* ============================================================
   [NEW] iOS 홈화면앱(PWA) Pull-to-Refresh UI
   ============================================================ */

.ptr-indicator {
    position: fixed;
    left: 0;
    right: 0;

    /* 노치 안전영역 고려 */
    top: env(safe-area-inset-top);

    z-index: 2500;
    display: flex;
    justify-content: center;

    /* 손가락 추적: 기본은 숨김(위로 올려둠) */
    --ptr-offset: 0px;
    transform: translateY(calc(-70px + var(--ptr-offset)));
    transition: transform 0.2s ease;
    pointer-events: none;
}

.ptr-indicator.no-transition {
    transition: none !important;
}

.ptr-pill {
    margin-top: 8px;
    padding: 10px 14px;
    border-radius: 999px;

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

    background: rgba(33, 37, 41, 0.95);
    color: #fff;
    font-size: 0.85em;
    font-weight: 600;

    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.ptr-spinner {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.35);
    border-top-color: #fff;

    /* 평소엔 숨기고, refreshing일 때만 회전 */
    opacity: 0;
}

.ptr-indicator.refreshing .ptr-spinner {
    opacity: 1;
    animation: ptr-spin 0.8s linear infinite;
}

@keyframes ptr-spin {
    to { transform: rotate(360deg); }