/* ============================================================
   BoA Time Machine — 26주년 테마 (2026-08-25 공개)
   site.css 위에 얹는 override 레이어.

   🚦 base.html 에서 {% if preview %} 로만 로드됨.
      production 빌드에는 포함되지 않으므로 기존 디자인 무변경.
      공개일에 base.html 의 게이트 한 줄만 제거하면 전체 적용.

   🎨 컬러: 보아 공식 팬톤 옐로우 #F1DE52 + White
   🎀 에셋: /static/boa26/*.webp (팔루 = BApal 공식 캐릭터,
           손그림 = AIN'T NO Hard Feelings 스티커 도안)

   롤백: base.html 의 이 파일 <link> 한 줄 주석 처리
   계획서: boa26_redesign_plan_v0.2.md
   ============================================================ */

/* === 1. 변수 재정의 ========================================= */
:root {
  --mustard: #F1DE52;
  --mustard-deep: #E3CB2C;
  --brown: #6B5A38;
  --brown-deep: #3B3220;
  --cream: #FFFDF2;
  --cream-deep: #FCF7D8;
  --text: #3B3220;
  --text-soft: #8A7A55;
  --gray: #A79876;
  --border: #EBDF9E;
  --black: #3B3220;
  --white: #FFFFFF;

  /* 26주년 전용 */
  --y: #F1DE52;
  --y-soft: #F8EFA9;
  --y-pale: #FCF7D8;
  --ink: #3B3220;
  --ink-soft: #8A7A55;
  --b26: /static/boa26;
}

body {
  background: var(--white);
  font-family: 'Gowun Dodum', 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
}

h1, h2, h3, h4,
.hero-title, .section-header h1, .section-header h2 {
  font-family: 'Jua', 'Pretendard', sans-serif;
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* ⚠️ 한글 글리프 없는 폰트 일괄 교체.
   site.css 는 Bungee / Major Mono Display / Space Grotesk 를 쓰는데
   셋 다 한글 글자가 없어서, 한글 텍스트가 기기 기본 폰트로 떨어짐
   (특히 모바일에서 "폰트가 안 먹는" 것처럼 보이는 원인).
   → 아래 셀렉터 전부를 Jua / Gaegu 로 통일. */

/* Bungee 계열 (제목·연도) → Jua */
.era-label,
.slider-year,
.year-title {
  font-family: 'Jua', 'Pretendard', sans-serif;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

/* Major Mono Display 계열 (날짜·메타) → Gaegu */
.brand-sub,
.era-years,
.mark-label,
.slider-era,
.anniversary-badge,
.anniversary-note,
.today-year-badge,
.clip-date,
.event-date,
.year-nav,
.footer-tagline,
.footer-meta,
.hero-since {
  font-family: 'Gaegu', 'Pretendard', monospace;
  font-weight: 700;
}

/* Space Grotesk 계열 → Jua */
.lang-btn,
.hero-tagline,
.about-feedback-en,
.anniv-meta,
.mini-slider-era {
  font-family: 'Jua', 'Pretendard', sans-serif;
  font-weight: 400;
}

/* === 2. 헤더 =============================================== */
.site-header {
  background: var(--white);
  border-bottom: 2px solid var(--y);
}

/* 🐱 고양이 배치 (2026-08-04 재배치)
   · 손그림 고양이(minicat) → From Jumping 탭 아이콘 (아래 .nav-fromjumping)
   · 황토색 고양이(cat)     → Home 탭 앞 (아래 .nav-home-cat)
   로고 옆 상주는 해제 — 아이콘이 각 탭의 의미를 갖도록. */
.brand { color: var(--ink); position: relative; }

.brand-text { font-family: 'Jua', sans-serif; font-weight: 400; }
.brand-sub { color: var(--ink-soft); }

.site-nav a {
  font-family: 'Jua', sans-serif;
  color: var(--ink);
}

/* 💌 From BoA — 노란 알약은 "이미 선택된 탭"처럼 보여서 제거.
   대신 손그림 편지 아이콘만 앞에 붙이고, 다른 메뉴와 동일한 무게로. */
.site-nav a.nav-fromboa {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  padding: 0;
}

.site-nav a.nav-fromboa::before {
  content: '';
  width: 24px;
  height: 20px;
  background: url('/static/boa26/envelope.webp') no-repeat center / contain;
  transform: rotate(-4deg);
  transition: transform 0.15s;
}

.site-nav a.nav-fromboa:hover::before { transform: rotate(4deg) scale(1.08); }

/* 📰 소식 — 신문 이모지 대신 헤더에서 옮겨온 손그림 토끼 (2026-08-02). */
.site-nav a.nav-news {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  padding: 0;
}

.site-nav a.nav-news::before {
  content: '';
  width: 28px;              /* 2026-08-04: 메뉴 토끼도 살짝 크게 */
  height: 28px;
  background: url('/static/boa26/bunny.webp') no-repeat center bottom / contain;
  transform: rotate(-3deg);
  transition: transform 0.15s;
}

.site-nav a.nav-news:hover::before { transform: rotate(3deg) scale(1.08); }

/* 🐱 Home — 황토색 고양이. 로고 옆에서 옮겨왔다 (2026-08-04). */
.site-nav a.nav-home {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  padding: 0;
}

.site-nav a.nav-home::before {
  content: '';
  width: 26px;
  height: 22px;
  background: url('/static/boa26/cat.webp') no-repeat center / contain;
  transform: rotate(-3deg);
  transition: transform 0.15s;
}

.site-nav a.nav-home:hover::before { transform: rotate(3deg) scale(1.08); }

/* 소식 페이지 제목 옆 토끼 (From BoA 편지 아이콘과 같은 패턴) */
body .news-head-top h1 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

body .news-head-top h1::before {
  content: '';
  width: 56px;              /* 2026-08-04: 토끼 더 크게 */
  height: 56px;
  background: url('/static/boa26/bunny.webp') no-repeat center bottom / contain;
  transform: rotate(-4deg);
}

body .news-head-top p { color: var(--ink-soft); }

/* 🐱 From Jumping 페이지 제목 옆 손그림 고양이 (NEWS 토끼와 같은 패턴, 2026-08-04).
   ⚠️ 메뉴가 아니라 **페이지 제목** 자리다. 작게 인라인으로 넣으면 답답해 보여
      토끼와 같은 크기(56px)로 크게 두고 살짝 기울인다. */
body .gb-head h1 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

body .gb-head h1::before {
  content: '';
  width: 56px;
  height: 42px;
  background: url('/static/boa26/minicat.webp') no-repeat center / contain;
  transform: rotate(-4deg);
}

/* 🔔 푸시 알림 벨 — push.js 가 만든 이모지 버튼을 손그림 아이콘으로 교체.
   (push.js 로직은 건드리지 않고 CSS 로만 덮음 — data-on 속성으로 on/off 구분) */
.push-bell {
  font-size: 0 !important;          /* 이모지 텍스트 숨김 */
  border: 1.5px solid var(--y) !important;
  background: var(--white) !important;
  border-radius: 999px !important;
  padding: 5px 9px !important;
  line-height: 0 !important;
  box-shadow: none !important;
  transition: transform 0.15s, background 0.15s;
}

.push-bell::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 19px;
  background: url('/static/boa26/bell-off.svg') no-repeat center / contain;
}

.push-bell[data-on='1'] {
  background: var(--y) !important;
  border-color: var(--mustard-deep) !important;
}

.push-bell[data-on='1']::before {
  background-image: url('/static/boa26/bell.svg');
}

.push-bell:hover { transform: rotate(-8deg); }

/* 🌐 언어 스위처 — 알약 안에 알약이 겹쳐 답답해 보여서 정리(2026-08-02).
   바깥 테두리/배경 제거 → 글자만 두고, 선택된 언어만 노란 알약. */
.lang-switcher {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  gap: 2px;
}
.lang-btn {
  color: var(--ink-soft);
  background: none;
  border: none;
  border-radius: 999px;
  padding: 5px 9px;
  font-weight: 700;
  letter-spacing: .3px;
  transition: background .15s, color .15s;
}
.lang-btn:hover { background: var(--y-pale); color: var(--ink); }
.lang-btn.lang-active { background: var(--y); color: var(--ink); }

/* 벨은 언어 묶음과 살짝 떨어뜨려 구분 */
.lang-switcher .push-bell { margin-left: 10px; }

/* === 3. 히어로 ============================================= */
/* 장식은 전부 background-image — 템플릿 수정 없이 CSS만으로 배치 */
/* 카드 테두리 없이 — 경계가 사라지면 팔루가 바닥에 붙어도 잘린 느낌이 안 남.
   배경은 흰색에서 옅은 노랑으로 자연스럽게 번지는 워시. */
.hero {
  background: linear-gradient(170deg, #FFFFFF 0%, #FFFCEC 42%, #FDF6C8 100%);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0 0 8px;
  padding: 44px 40px 52px;
  overflow: visible;

  /* ⚠️ background-image 는 요소 박스에 클리핑되므로 bottom 값을 음수로 두면 잘림.
       팔루는 항상 bottom 0 에 붙이고, 대신 hero 의 padding-bottom 으로 여백 확보. */
  /* 앞에 오는 레이어가 위에 그려짐.
     팔루 · 손글씨 · 케이크 · 구름하트 · 해 · 빨간별 · 딸기 · 꽃 · 별 · 하트 */
  background-image:
    url('/static/boa26/palu_mic.webp'),
    url('/static/boa26/hello.webp'),
    url('/static/boa26/cake.webp'),
    url('/static/boa26/cloudheart.webp'),
    url('/static/boa26/sun.webp'),
    url('/static/boa26/star_red.webp'),
    url('/static/boa26/strawberry.webp'),
    url('/static/boa26/flower.webp'),
    url('/static/boa26/star.webp'),
    url('/static/boa26/heart.webp'),
    linear-gradient(170deg, #FFFFFF 0%, #FFFCEC 42%, #FDF6C8 100%);
  background-repeat: no-repeat;
  background-position:
    left 26px bottom 0,        /* 팔루 */
    left 152px bottom 20px,    /* 손글씨 — 팔루 오른쪽 옆 */
    right 24px bottom 8px,     /* 케이크 (26주년) */
    left 22px top 24px,        /* 구름하트 */
    right 30px top 20px,       /* 해 */
    right 126px top 34px,      /* 빨간별 */
    left 190px bottom 132px,   /* 딸기 */
    left 40px top 132px,       /* 꽃 */
    right 44px top 104px,      /* 별 */
    right 140px top 116px,     /* 하트 */
    center;
  background-size:
    clamp(108px, 13vw, 150px) auto,
    122px auto,
    clamp(96px, 11vw, 128px) auto,
    72px auto,
    46px auto,
    34px auto,
    38px auto,
    34px auto,
    40px auto,
    22px auto,
    cover;
}

/* 기존 radial 하이라이트는 장식과 겹쳐서 제거 */
.hero::before { display: none; }

/* 좌우 장식과 겹치지 않도록 본문 영역 확보 + 팔루가 글자 안 가리게 아래 여백 */
@media (min-width: 761px) {
  .hero { padding: 44px 40px 74px; }
  .hero-inner { padding: 0 120px; }
}

.hero-since {
  font-family: 'Gaegu', monospace;
  font-weight: 700;
  font-size: clamp(13px, 1.8vw, 16px);
  letter-spacing: 0.25em;
  color: var(--ink);
  opacity: 1;
}

.hero-title {
  font-family: 'Jua', sans-serif;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.hero-tagline { font-family: 'Jua', sans-serif; font-weight: 400; color: var(--ink); }
.hero-wish { color: var(--ink); opacity: 0.8; }

/* === 4. 섹션 헤더 ========================================== */
.section-header h1, .section-header h2 {
  color: var(--ink);
  position: relative;
  display: inline-block;
}

/* 제목 밑 노란 형광펜 밑줄.
   ⚠️ 두들 아이콘은 h2 의 background 로 오른쪽 padding 자리에 놓이므로,
      밑줄(::after)의 right 를 그 padding 만큼 띄워서 글자까지만 긋는다. */
.section-header h1::after,
.section-header h2::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 8px;
  background: var(--y);
  border-radius: 4px;
  transform: rotate(-0.6deg);
  z-index: -1;
}

.section-sub { color: var(--ink-soft); }

/* ⚠️ 두들은 h2 의 배경이라 h2 박스보다 크면 잘림.
     → 가로가 아니라 *세로* 기준(auto Npx)으로 크기를 잡고,
       h2 에 line-height 로 최소 높이를 확보한다. */
.today-section .section-header h2,
.timetravel-section .section-header h2,
.grid-section .section-header h2 {
  line-height: 1.5;
  background-repeat: no-repeat;
  background-position: right center;
}

/* 다이얼 섹션 제목 옆 로봇 두들 */
.timetravel-section .section-header h2 {
  padding-right: 56px;
  background-image: url('/static/boa26/robot.webp');
  background-size: auto 28px;
}
.timetravel-section .section-header h2::after { right: 56px; }

/* 클립 섹션(= .grid-section) 제목 옆 병아리 */
.grid-section .section-header h2 {
  padding-right: 36px;
  background-image: url('/static/boa26/chick.webp');
  background-size: auto 30px;
}
.grid-section .section-header h2::after { right: 36px; }

/* 오늘의 시간여행 옆 달력 (날짜 기반 섹션이라 의미가 맞음) */
.today-section .section-header h2 {
  padding-right: 44px;
  background-image: url('/static/boa26/calendar.webp');
  background-size: auto 32px;
}
.today-section .section-header h2::after { right: 44px; }

/* 🎂 발매 기념일 배지 — 이모지 대신 손그림 초 (템플릿에서 이모지 제거 + .anniv26) */
.anniversary-badge.anniv26 {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 14px 4px 10px;
}
.anniversary-badge.anniv26::before {
  content: '';
  width: 14px;
  height: 31px;
  background: url('/static/boa26/candle.webp') no-repeat center / contain;
  flex: none;
}

.anniversary-badge {
  background: var(--y);
  color: var(--ink);
  border-radius: 999px;
}

/* === 5. 카드 =============================================== */
/* GIF 카드는 테두리 없이 — 노란 테두리가 그리드 정렬을 틀고 답답해 보임.
   (테두리 3px 이 카드마다 더해져 그리드가 어긋나던 문제도 함께 해결) */
.today-card,
.clip-card {
  background: var(--white);
  border: 0;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(160, 140, 60, 0.16);
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s;
}

.today-card:hover,
.clip-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(160, 140, 60, 0.26);
}

.clip-title { font-family: 'Jua', sans-serif; font-weight: 400; }

.today-fallback {
  background: var(--y-pale);
  border: 2px dashed var(--mustard-deep);
  border-radius: 18px;
}

.fallback-cta {
  background: var(--y);
  color: var(--ink);
  border-radius: 999px;
  padding: 8px 18px;
  font-family: 'Jua', sans-serif;
}

/* === 6. 시간여행 다이얼 ==================================== */
.timetravel-section { position: relative; }

/* 달팽이 + "천천히 가도 괜찮아…" (다이얼 우상단) */
.dial-wrap {
  background: var(--white);
  border: 1.5px solid var(--y);
  border-radius: 22px;
  box-shadow: 0 6px 18px rgba(200, 170, 40, 0.15);
  padding: 34px 30px 30px;
}

/* 🐌 달팽이 + "천천히 가도 괜찮아…" — 글과 그림이 한 덩어리라 어디로든 옮길 수 있음.
   site26.js 가 클립 섹션 헤더로 이동시킴. */
.snail-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Gaegu', cursive;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink-soft);
  transform: rotate(-2deg);
  white-space: nowrap;
  pointer-events: none;
}

.snail-note::after {
  content: '';
  width: 58px;
  height: 46px;
  flex: none;
  background: url('/static/boa26/snail.webp') no-repeat center / contain;
  transform: scaleX(-1) rotate(-4deg);
}

/* 클립 섹션 헤더
   1줄: History of BoA 🐤        🐌 천천히 가도 괜찮아…
   2줄: 쉼없이 채워진 보아의 음악 여정을 느끼세요
   3줄: 총 N개 */
.grid-section .section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 12px;
}
.grid-section .section-header h2 { flex: none; order: 1; }
.grid-section .section-header .snail-note { order: 2; margin-left: auto; }
.grid-section .section-header .dial-line {
  order: 3;
  flex-basis: 100%;
  font-family: 'Gowun Dodum', sans-serif;
  font-size: 15px;
  color: var(--ink-soft);
  margin: 6px 0 0;
}
.grid-section .section-header .section-sub { order: 4; flex-basis: 100%; margin: 2px 0 0; }

/* ⏱️ 시간여행 다이얼 섹션 접기 — 시간 이동은 하단 바 슬라이더로 일원화.
   클립이 바로 이어져 나오고, 달팽이 + "천천히 가도 괜찮아…" 는 클립 섹션으로 이동.

   ⚠️ display:none 금지!
      site.js 는 이 섹션이 "화면 위로 지나갔는지(rect.top < 0)" 로 하단바 표시를 결정한다.
      숨기면 좌표가 0 이 되어 조건이 영원히 거짓 → 하단바가 안 나타남.
      그래서 높이만 0 으로 접고 스크롤 앵커로 남겨둔다. */
.timetravel-section {
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.timetravel-section .section-header,
.timetravel-section .dial-wrap { display: none; }

.era-line { display: none !important; }

.era { border: 2px solid transparent; border-radius: 16px; }
.era:hover { background: var(--y-pale); }

.era.era-active {
  background: var(--y);
  border-color: var(--y);
  box-shadow: 0 4px 12px rgba(200, 170, 40, 0.25);
}

.era-label { font-family: 'Jua', sans-serif; color: var(--ink); text-transform: none; }
.era-years { font-family: 'Gaegu', monospace; font-weight: 700; color: var(--ink-soft); }

/* 슬라이더 */
#year-slider {
  background: var(--y-soft);
  border: 1.5px solid var(--y);
  height: 8px;
}

/* 손잡이 = 투명 (그림은 .thumb-art 오버레이가 담당 — 중복 표시 방지).
   크기는 유지해야 터치 영역이 확보됨. */
#year-slider::-webkit-slider-thumb {
  width: 42px;
  height: 42px;
  background: none;
  border: none;
  box-shadow: none;
  filter: none;
}
#year-slider::-moz-range-thumb {
  width: 42px;
  height: 42px;
  background: none;
  border: none;
  box-shadow: none;
  filter: none;
}

.slider-mark { background: var(--ink-soft); }
.mark-label { font-family: 'Gaegu', monospace; font-weight: 700; color: var(--ink-soft); }

.slider-year { font-family: 'Jua', sans-serif; color: var(--ink); letter-spacing: 0; }
.slider-era {
  font-family: 'Gaegu', monospace;
  font-weight: 700;
  background: var(--y);
  color: var(--ink);
  border: 1.5px solid var(--y);
  border-radius: 8px;
  text-transform: none;
}

/* 드래그 힌트 — "나를 움직여봐 뀨앙~" (site26.js 가 위치 갱신) */
.drag-hint {
  position: absolute;
  top: -4px;
  left: 21px;
  background: var(--white);
  border: 2px solid var(--y);
  border-radius: 14px;
  padding: 5px 12px;
  font-family: 'Gaegu', cursive;
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  white-space: nowrap;
  transform: translateX(-50%) rotate(-3deg);
  transition: left 0.12s ease, opacity 0.3s;
  pointer-events: none;
  box-shadow: 0 3px 8px rgba(180, 150, 30, 0.2);
  z-index: 3;
  animation: boa26-wiggle 1.6s ease-in-out infinite;
}

.drag-hint::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  margin-left: -5px;
  border: 5px solid transparent;
  border-top-color: var(--y);
}

.drag-hint.hide { opacity: 0; animation: none; }

@keyframes boa26-wiggle {
  0%, 100% { transform: translateX(-50%) rotate(-3deg); }
  50%      { transform: translateX(-50%) rotate(3deg) translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .drag-hint { animation: none; }
}

/* === 7. 검색 / 필터 ======================================== */
/* 고양이는 헤더(로고 옆)로 이동 — 검색창 주변은 비워서 깔끔하게. */
.search-section { position: relative; }

.search-bar input {
  background: var(--white);
  border: 1.5px solid var(--y);
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(200, 170, 40, 0.12);
  font-family: 'Gowun Dodum', sans-serif;
  color: var(--ink);
}

.search-bar input:focus {
  border-color: var(--mustard-deep);
  box-shadow: 0 0 0 3px var(--y-soft);
}

.sort-toggle {
  background: var(--y);
  border: 1.5px solid var(--y);
  border-radius: 999px;
  color: var(--ink);
  font-family: 'Jua', sans-serif;
}
.sort-toggle:hover { background: var(--mustard-deep); }

/* 국가/타입 필터 칩 */
.filter-chip, .chip, .country-chip {
  background: #FFFCE8;
  border: 1.5px solid var(--y);
  border-radius: 999px;
  color: var(--ink);
  font-family: 'Jua', sans-serif;
}
.filter-chip.active, .chip.on, .country-chip.active,
.filter-chip[aria-pressed="true"] {
  background: var(--y);
  color: var(--ink);
}

/* === 8. 푸터 (이미지 없음) ================================= */
.site-footer {
  background: linear-gradient(180deg, var(--white), var(--y-pale));
  border-top: 1.5px solid var(--y);
  color: var(--ink);
}

.footer-brand { font-family: 'Jua', sans-serif; color: var(--ink); }
.footer-tagline { font-family: 'Gaegu', cursive; font-weight: 700; color: var(--ink); }
.footer-legal, .footer-meta { color: var(--ink-soft); }

/* === 9. 모바일 미니 슬라이더 =============================== */
.mini-slider {
  background: rgba(255, 255, 255, 0.97);
  border-top: 2px solid var(--y);
  box-shadow: 0 -4px 16px rgba(200, 170, 40, 0.18);
}

/* 표시 타이밍은 site.js 기본 동작 그대로 —
   메인 시간여행 다이얼이 화면 밖으로 나가는 순간 올라옴 (강제 표시 override 없음). */

.mini-slider-meta { align-items: center; }

/* ============================================================
   🏷️ 활성 필터 칩 줄 (2026-08-18, filter_chips_plan_v0.2)
   26 디자인에서 검색·필터 pill 은 하단 시트 안으로 이동했고, site26.js 가 pill 클릭
   0.12초 뒤 시트를 자동으로 닫는다 → 닫히면 pill-active 를 볼 방법이 물리적으로 없었다.
   그래서 "지금 걸린 조건" 만 하단 바에 항상 남긴다. 내용은 site.js renderMiniChips().
   ============================================================ */
.mini-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  margin: 0 -16px 6px;
  padding: 0 16px;
}
/* ⚠️ display:flex 가 hidden 속성을 이긴다 — 이 한 줄이 없으면 빈 줄이 항상 자리를 먹는다 */
.mini-chips[hidden] { display: none; }
.mini-chips::-webkit-scrollbar { display: none; }

/* 🩹 uxpatch3 (2026-08-23): 시트가 열려 있어도 칩 줄을 숨기지 않는다 (Nuri 결정).
   원래 #10 은 시트 안 pill 과의 중복 때문에 숨겼지만, 이제 🎵 곡 칩이 이 줄에 실시간으로
   뜨므로 — 시트에서 타이핑하는 동안 결과가 보여야 한다. (구규칙: display:none 제거) */

.mini-chips-tag { flex: none; font-size: 12px; opacity: 0.75; line-height: 1; }

.mini-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 46vw;
  padding: 5px 8px 5px 10px;
  font-family: 'Jua', sans-serif;
  font-size: 12px;
  line-height: 1;
  color: var(--ink);
  background: var(--y-pale);
  border: 1.5px solid var(--y);
  border-radius: 999px;
  cursor: pointer;
}
.mini-chip-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-chip-x { flex: none; font-size: 11px; opacity: 0.7; }
.mini-chip:active { transform: scale(0.96); }

.mini-chips-clear {
  flex: none;
  padding: 2px 2px 1px;
  font-family: 'Gaegu', monospace;
  font-weight: 700;
  font-size: 12px;
  color: var(--ink-soft);
  background: none;
  border: 0;
  border-bottom: 1.5px dashed var(--ink-soft);
  cursor: pointer;
}

/* 결과 0건 — "어떤 필터를 빼면 몇 개" 완화 제안 (site.js renderEmptyHint) */
.empty-relaxes {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}
.empty-hint {
  width: 100%;
  text-align: center;
  font-family: 'Gaegu', monospace;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink-soft);
}
.empty-relax {
  padding: 7px 14px;
  font-family: 'Jua', sans-serif;
  font-size: 13px;
  color: var(--ink);
  background: var(--y-pale);
  border: 1.5px solid var(--y);
  border-radius: 999px;
  cursor: pointer;
}
.empty-relax:active { transform: scale(0.97); }
.empty-relax-all { background: none; border-style: dashed; color: var(--ink-soft); }

/* 🔍 검색·필터 열기 버튼 */
.mini-search-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--y);
  border: 0;
  border-radius: 999px;
  padding: 6px 14px;
  font-family: 'Jua', sans-serif;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  line-height: 1;
}
.mini-search-toggle:active { transform: scale(0.97); }

.mini-search-ic {
  width: 13px; height: 13px; flex: none;
  border: 2px solid var(--ink);
  border-radius: 50%;
  position: relative;
}
.mini-search-ic::after {
  content: '';
  position: absolute;
  right: -4px; bottom: -3px;
  width: 6px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transform: rotate(45deg);
}

/* 시트 — 기본 닫힘. 열려도 화면 1/4 을 넘지 않음(딤 없음, 본문 스크롤 유지) */
.mini-sheet {
  max-height: min(240px, 30vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-bottom: 1.5px dashed var(--y);
  margin: 0 -16px 8px;
  padding: 8px 16px 10px;
}
.mini-sheet[hidden] { display: none; }

.mini-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'Jua', sans-serif;
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.mini-sheet-close {
  border: 0; background: none; cursor: pointer;
  font-size: 15px; color: var(--ink-soft); line-height: 1; padding: 2px 4px;
}

/* 시트 안으로 옮겨온 검색창·필터칩 */
.mini-sheet-body .search-bar { display: flex; gap: 8px; margin: 0 0 8px; }
.mini-sheet-body .search-bar input { flex: 1; min-width: 0; padding: 9px 16px; font-size: 14px; }
.mini-sheet-body .sort-toggle { padding: 0 14px; font-size: 12px; white-space: nowrap; }

/* 필터칩은 2줄로 쌓지 않고 가로 스크롤 한 줄 → 높이 절약 */
.mini-sheet-body .country-pills {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding-bottom: 2px;
  margin: 0;
}
.mini-sheet-body .country-pills::-webkit-scrollbar { display: none; }
.mini-sheet-body .pill { flex: none; font-size: 12px; padding: 5px 12px; }

/* 검색·필터를 하단 바로 옮겼으므로 본문의 원래 자리는 완전히 접음
   (빈 공간이 남아 클립 섹션이 아래로 밀리는 것 방지) */
.search-section.moved {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0;
  height: 0;
  overflow: hidden;
}

/* 🎀 하단 슬라이더 안내 — 테두리 없이 손글씨체로, 제자리에서 살짝 흔들림.
   ⚠️ .mini-slider 는 site.css 에서 position:fixed — 절대 override 하지 말 것.
      (relative 로 덮으면 하단 고정이 풀려 슬라이더가 사라짐. fixed 도 이미 containing block.) */
.mini-hint {
  display: block;
  margin: 4px 0 -2px;
  text-align: center;
  font-family: 'Gaegu', cursive;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  color: var(--ink);
  white-space: nowrap;
  pointer-events: none;
}

/* 🐶 손잡이 캐릭터 흔들기.
   ⚠️ ::-webkit-slider-thumb 에는 CSS 애니메이션이 적용되지 않음(브라우저 제약).
      → 진짜 손잡이의 그림은 숨기고, 같은 위치에 겹쳐 놓은 장식 요소를 흔든다.
        위치는 site26.js 가 값에 맞춰 갱신. pointer-events:none 이라 조작을 방해하지 않음. */
@keyframes boa26-nudge {
  0%, 100% { transform: rotate(-8deg) translateY(0); }
  50%      { transform: rotate(8deg) translateY(-2px); }
}

.thumb-art {
  position: absolute;
  pointer-events: none;
  z-index: 4;
  transform: translate(-50%, -50%);
}
.thumb-art i {
  display: block;
  background: url('/static/boa26/mouse.webp') no-repeat center / contain;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.15));
  animation: boa26-nudge 1.8s ease-in-out infinite;
}
#mini-thumb-art i { width: 34px; height: 34px; }
#dial-thumb-art i { width: 42px; height: 42px; }

/* 잡고 있는 동안엔 흔들림 정지 */
.thumb-art.grabbing i { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .thumb-art i { animation: none; }
}

.mini-slider-year { font-family: 'Jua', sans-serif; color: var(--ink); }
.mini-slider-era {
  font-family: 'Gaegu', monospace;
  font-weight: 700;
  background: var(--y);
  color: var(--ink);
  border-radius: 6px;
}

.mini-slider-input::-webkit-slider-runnable-track,
.mini-slider-input::-moz-range-track {
  background: var(--y-soft);
  border: 1px solid var(--y);
}

/* 손잡이는 투명 — 그림은 .thumb-art 오버레이가 그림 (중복 방지) */
.mini-slider-input::-webkit-slider-thumb {
  background: none;
  border: none;
  width: 34px;
  height: 34px;
  box-shadow: none;
  filter: none;
}
.mini-slider-input::-moz-range-thumb {
  background: none;
  border: none;
  width: 34px;
  height: 34px;
  box-shadow: none;
  filter: none;
}

/* === 10. 💌 From BoA ======================================= */
/* ⚠️ fromboa.html 의 inline <style> 이 base.html 의 extra_head 블록에 있어
     이 파일보다 나중에 로드됨. 같은 특이도면 지므로 `body` 를 붙여 이김.
     (공개 후 정리 시 fromboa.html 의 inline style 을 지우면 body 접두사도 제거 가능) */

body .fromboa-head {
  position: relative;
  text-align: center;
  margin: 28px 0 12px;
  /* 아래 여백 = 팔루 + 손글씨 장식이 절대배치로 앉는 자리.
     부제를 뺀 만큼(약 20px) 늘려 제목과 장식이 붙어 보이지 않게 한다 (2026-08-06).
     ⚠️ 이 값은 ::before 높이 + 제목과의 간격(28px) 이다. 팔루 크기를 바꾸면 여기도 같이.
        116(=88+28) → 130(=101+28), 팔루 15% 확대 (2026-08-06). */
  padding-bottom: 130px;
}

body .fromboa-head h1 {
  font-family: 'Jua', sans-serif;
  font-weight: 400;
  color: var(--ink);
  font-size: 30px;
}

/* 제목 앞 손그림 편지 아이콘 (이모지 대체) */
body .fromboa-head h1.fb-h1 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

body .fromboa-head h1.fb-h1::before {
  content: '';
  width: 40px;
  height: 33px;
  background: url('/static/boa26/envelope.webp') no-repeat center / contain;
  transform: rotate(-5deg);
}

body .fromboa-head p { color: var(--ink-soft); }

/* 페이지 우상단 구름+하트 (보아가 팬에게 남긴 마음) */
body .fromboa-wrap {
  position: relative;
  background: url('/static/boa26/cloudheart.webp') no-repeat right 4px top 6px / 74px auto;
}

/* 팔루 + 손글씨 "친하게 지내자"
   📐 세 값이 한 세트로 묶여 있다. 하나만 바꾸면 깨진다 (2026-08-06 팔루 15% 확대):
     · ::before margin-left = -(width + 12)  → 팔루 오른쪽 끝을 중앙-12px 에 고정.
       이걸 안 맞추면 팔루가 오른쪽으로 밀려 손글씨를 침범한다.
     · .fromboa-head padding-bottom = ::before height + 28  → 제목과의 간격 유지.
     · ::after bottom = (::before height / 2) - 23  → 손글씨 중심을 팔루 중심에 맞춤. */
.fromboa-head::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  margin-left: -118px;   /* = -(106 + 12) */
  width: 106px;          /* 92 → 106 (+15%) */
  height: 101px;         /* 88 → 101 (+15%) */
  background: url('/static/boa26/palu_mic.webp') no-repeat center bottom / contain;
}

.fromboa-head::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 28px;          /* = 101/2 - 23. 팔루가 커진 만큼 손글씨도 올림 */
  margin-left: 2px;
  width: 118px;
  height: 46px;
  background: url('/static/boa26/hello.webp') no-repeat left center / contain;
  transform: rotate(-4deg);
}

body .fb-year { margin: 40px 0 18px; }

body .fb-year span {
  font-family: 'Jua', sans-serif;
  font-weight: 400;
  background: var(--y);
  color: var(--ink);
  border-radius: 999px;
}

body .fb-year::after { background: var(--y-soft); height: 2px; }

body .fb-card {
  background: var(--white);
  border: 1.5px solid var(--y);
  border-radius: 18px;
  box-shadow: 0 6px 18px rgba(200, 170, 40, 0.15);
  transition: transform 0.15s, box-shadow 0.15s;
}

body .fb-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(200, 170, 40, 0.25);
}

body .fb-card img { background: var(--white); }

body .fb-date { color: var(--mustard-deep); font-family: 'Gaegu', monospace; font-weight: 700; font-size: 13px; }
body .fb-title { font-family: 'Jua', sans-serif; font-weight: 400; color: var(--ink); }
body .fb-src { color: var(--ink-soft); }
body .fb-note { color: var(--text-soft); }

/* === 11. 모바일 ============================================ */
@media (max-width: 760px) {
  /* 모바일: 히어로가 첫 화면을 다 먹지 않도록 압축.
     "Always with BoA" 는 숨기고(제목에 이미 BoA 있음), 여백·장식 축소. */
  .hero-tagline { display: none; }
  .hero-since { font-size: 12px; letter-spacing: 0.18em; }
  .hero-title { font-size: clamp(30px, 8.5vw, 42px); }
  .hero-wish { font-size: 14px; }

  .hero {
    padding: 22px 14px 104px;
    /* 손글씨는 팔루 바로 옆에, 나머지 자잘한 아이콘으로 아래쪽 빈 공간을 채움 */
    background-position:
      left 2px bottom 0,        /* 팔루 */
      left 72px bottom 4px,     /* 손글씨 — 팔루 바로 오른쪽 */
      right 2px bottom 2px,     /* 케이크 */
      left 2px top 2px,         /* 구름하트 */
      right 4px top 4px,        /* 해 */
      right 48px top 10px,      /* 빨간별 */
      left 172px bottom 54px,   /* 딸기 */
      left 208px bottom 16px,   /* 꽃 */
      left 248px bottom 50px,   /* 별 */
      left 246px bottom 14px,   /* 하트 */
      center;
    background-size:
      70px auto,
      86px auto,
      64px auto,
      36px auto,
      26px auto,
      18px auto,
      22px auto,
      20px auto,
      26px auto,
      15px auto,
      cover;
  }

  .hero-inner { padding: 0; }

  /* 좁은 화면에선 장식 두들 축소/재배치 */
  /* 📱 헤더 2줄 고정 (2026-08-02 v2): 1줄=로고+언어/벨, 2줄=메뉴 전체 폭.
     v1(2줄째에 메뉴+언어 나란히)은 EN/JP 로 바뀌면 메뉴가 길어져 잘렸음.
     메뉴에 한 줄 전체를 주면 3개국어 모두 안정적. */
  .header-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand lang"
      "nav   nav";
    align-items: center;
    row-gap: 8px;
    column-gap: 8px;
  }
  .header-inner .brand { grid-area: brand; min-width: 0; }
  .header-inner .site-nav { grid-area: nav; min-width: 0; }
  .header-inner .lang-switcher { grid-area: lang; justify-self: end; flex: none; }

  /* 메뉴가 많아지면 2줄째 안에서 가로 스크롤 (줄바꿈 대신) */
  .site-nav {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 12px;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { white-space: nowrap; }

  /* 🐱 고양이는 로고 옆 자리를 언어버튼과 나눠 써야 하므로 축소.
     아주 좁은 화면(≤430px)에서는 로고 글씨를 살리기 위해 숨김. */
  /* 달팽이 문구는 클립 섹션 헤더로 이동했으므로 크기만 축소 */
  .snail-note { font-size: 12px; }
  .snail-note::after { width: 46px; height: 36px; }
  .today-section .section-header h2 { padding-right: 38px; background-size: auto 26px; }
  .grid-section .section-header h2 { padding-right: 32px; background-size: auto 26px; }

  .drag-hint { font-size: 13px; padding: 4px 10px; }
  body .fromboa-wrap { background-size: 52px auto; background-position: right 2px top 2px; }
}

/* 📱 좁은 화면: 로고 옆은 언어버튼에 양보하고, 고양이는 메뉴 줄 오른쪽 끝으로 이동.
   (430px 이하에서 숨겼더니 요즘 폰은 대부분 여기 해당 = 사실상 항상 사라짐 → 되살림) */
@media (max-width: 430px) {
  .brand { padding-right: 0; }
  .brand-text { font-size: 17px; }
  .brand-sub { font-size: 11px; }

}

/* ============================================================
   🩹 ux_patch_v0.1 (2026-08-23) — 공개 직후 UX 패치
   ============================================================ */

/* P3 — 클립 상세 다운로드 버튼: 이모지(📥) → 손그림 별 아이콘
   (v0.3: 길게 눌렀을 때 액션시트의 저장 버튼과 같은 star.webp 로 통일 — Nuri 결정) */
.btn-download { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn-download::before {
  content: '';
  width: 22px; height: 22px; flex: none;
  background: url('/static/boa26/star.webp') no-repeat center / contain;
  transform: rotate(-4deg);
}

/* P2 v0.2 — 곡 페이지 칩: 필터 칩 줄(#mini-chips) 안의 🎵 링크 칩 (v0.1 dock 은 폐기) */
.mini-chip-song {
  text-decoration: none;
  background: #FFFDF2;
  border-color: var(--mustard-deep, #E3CB2C);
}
.mini-chip-song .mini-chip-label { font-weight: 700; }
.mini-chip-song:active { transform: scale(0.96); }