/* LUEUR polish — 애플 네이티브 질감·모션 오버레이 (팔레트는 기존 크림·네이비·골드 유지)
   lueur.css 뒤에 로드. 색은 바꾸지 않고 재질(글래스)·깊이(다층 그림자)·모션(스프링)·타이포만 다듬는다. */

:root {
  /* 시스템 폰트 최우선 — iOS·Mac에서 SF Pro 네이티브 렌더 */
  --f-sys: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Pretendard, "Noto Sans KR", sans-serif;
  /* 애플식 스프링 곡선: 표준(살짝 오버슈트) · 소프트(오버슈트 없음) */
  --spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --spring-soft: cubic-bezier(0.23, 1, 0.32, 1);
  /* 아크릴 글래스 재질 */
  --glass-bg: rgba(255, 253, 248, 0.66);
  --glass-line: rgba(255, 255, 255, 0.34);
  /* 다층 그림자 — 접촉·주변·확산 3겹 */
  --elev-1: 0 1px 2px rgba(45, 35, 20, 0.05), 0 4px 10px rgba(45, 35, 20, 0.06), 0 12px 28px rgba(45, 35, 20, 0.07);
  --elev-2: 0 1px 2px rgba(45, 35, 20, 0.06), 0 8px 20px rgba(45, 35, 20, 0.09), 0 24px 60px rgba(45, 35, 20, 0.12);
  --elev-3: 0 2px 4px rgba(30, 22, 10, 0.08), 0 14px 34px rgba(30, 22, 10, 0.14), 0 40px 90px rgba(30, 22, 10, 0.2);
}

body { font-family: var(--f-sys); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* ── 타이포 미세조정: 큰 제목은 좁게, 작은 글씨는 살짝 넓게 (Apple Typography) ── */
h1, h2, .hero h1 { letter-spacing: -0.022em; }
h3, .sec h2 { letter-spacing: -0.014em; }
small, .muted, .note, .bk-fine, .mr-tk { letter-spacing: 0.01em; }
p, li { line-height: 1.65; }

/* ── 글래스 재질: 상·하단 내비, 시트, 필기 툴바 ── */
nav {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--glass-line) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 8px 30px rgba(45, 35, 20, 0.05);
}
/* 하단 메뉴만 **불투명**하다. iOS 홈 화면 앱은 그 아래 안전구역을 theme-color 로 칠하는데,
   메뉴가 반투명이면 뒤 내용이 비쳐 색이 시시각각 달라져 **그 띠와 절대 안 맞는다** —
   원장이 본 '색 불일치'다(2026-08-09). 다른 글래스 면(nav·시트)은 그대로 둔다. */
#appNav {
  background: #fbf8f2 !important;
  border-top: 1px solid var(--glass-line) !important;
  box-shadow: 0 -8px 30px rgba(45, 35, 20, 0.06);
}
.bk-sheet, .mr-shbox {
  background: rgba(255, 253, 248, 0.86) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--glass-line);
  box-shadow: var(--elev-3);
}
.bk-fbtool {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  border-bottom: 1px solid var(--glass-line);
}

/* ── 카드 깊이감: 단일 그림자 → 3겹 부양 ── */
.card { box-shadow: var(--elev-1); border-radius: 18px; transition: box-shadow 0.4s var(--spring-soft), transform 0.4s var(--spring-soft); }
.card:hover { box-shadow: var(--elev-2); }
.bk-gcov, .mr-cell, .mr-gitem, .lg-opt { box-shadow: 0 1px 2px rgba(45, 35, 20, 0.04), 0 5px 14px rgba(45, 35, 20, 0.06); }
.mr-roomwrap { box-shadow: var(--elev-2) !important; }
.mr-card, .bk-hintbox { box-shadow: var(--elev-3); }

/* ── 스퀘어클 근사: 연속 곡률 느낌의 큰 라운드 + 세리프 없는 매끈한 모서리 ──
   (진짜 스쿼클 clip-path는 요소별 고정 크기가 필요해 전역 적용이 깨지기 쉬워, 반경 상향 + 균일 곡률로 근사) */
.mr-b, .bk-pen, .bk-ai, .navcta { border-radius: 14px; }
.mr-shbox { border-radius: 24px 24px 0 0 !important; }
.bk-sheet { border-radius: 24px 24px 0 0; }
.mr-cell, .mr-gitem, .lg-opt { border-radius: 16px !important; }

/* ── 터치 타깃: 최소 44px (HIG) ── */
.mr-b, .bk-pen, .bk-ai, .bk-hretry, .lg-opt, .an-item, .mr-tt, .acad-tab { min-height: 44px; }
.mr-b, .bk-ai { padding-top: 11px; padding-bottom: 11px; }
.bk-tl { min-width: 40px; min-height: 40px; }

/* ── 스프링 모션: 버튼·카드·시트 (linear/ease 제거) ── */
button, .lg-opt, .mr-cell, .mr-gitem, .bk-gcov, .an-item {
  transition: transform 0.34s var(--spring), box-shadow 0.34s var(--spring-soft), background 0.2s, color 0.2s, border-color 0.2s;
}
button:active, .lg-opt:active, .mr-cell:active, .mr-gitem:active, .bk-gcov:active, .an-item:active { transform: scale(0.96); }
.mr-x:active, .bk-sh-x:active { transform: scale(0.88); }

/* 시트 등장: 아래에서 스프링 슬라이드 */
@keyframes slideUpSpring { 0% { transform: translateY(46px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
.bk-sheet, .mr-shbox { animation: slideUpSpring 0.46s var(--spring); }
@keyframes popSpring { 0% { transform: scale(0.82); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.bk-hintbox, .mr-card { animation: popSpring 0.42s var(--spring); }

/* ── 세이프에어리어 보강: 전체 화면 오버레이 상단 노치/하단 홈바 ── */
#farmOverlay, #storageOv, #visitOverlay { padding-top: env(safe-area-inset-top, 0px); }
#farmOverlay { padding-bottom: env(safe-area-inset-bottom, 0px); }
.lg-opt:last-of-type { margin-bottom: 2px; }

/* 모션 최소화 설정 존중 */
@media (prefers-reduced-motion: reduce) {
  .bk-sheet, .mr-shbox, .bk-hintbox, .mr-card { animation: none; }
  button, .lg-opt, .mr-cell, .mr-gitem, .bk-gcov, .an-item { transition: none; }
}