/* 오늘물때 사용자 페이지 — 반응형 (전체화면 지도 + 오버레이 패널)
   모바일은 기존 레이아웃 유지, 태블릿/PC(>=768px)에서 지도 전체화면화 */

/* 공통: 안전영역(노치/홈바) 대응 */
:root{ --safe-top: env(safe-area-inset-top,0px); --safe-bottom: env(safe-area-inset-bottom,0px); }

/* ===== index(메인 지도) 전용 ===== */
body.page-map{ overflow:hidden; }
body.page-map .app{ max-width:none; box-shadow:none; min-height:100vh; }
/* 지도 래퍼: 자식 FAB/notice의 기준(absolute) */
body.page-map #mapWrap{ position:relative; }

/* 모바일 기본: 로고 + 검색창을 한 줄로, 상단 고정 */
@media (max-width:767px){
  /* 헤더 상단 고정 */
  body.page-map .appbar{
    position:sticky; top:0; z-index:50;
    padding:calc(10px + var(--safe-top)) 12px 10px;
    background:var(--c-primary-deep);
    flex-direction:row; align-items:center; gap:10px; flex-wrap:wrap;
  }
  /* 로고 줄: 원래 크기 유지(검색창보다 우선) */
  body.page-map .appbar .row.between{ flex:0 0 auto; width:auto; }
  body.page-map .appbar .logo{ font-size:19px; white-space:nowrap; gap:6px; }
  body.page-map .appbar .logo svg{ width:28px; height:28px; }
  /* 검색창: 남는 폭 차지(헤더에서 액션 버튼이 빠져 더 넓게) */
  body.page-map .appbar .search{ flex:1 1 0; min-width:0; margin:0; padding:9px 12px; }
  body.page-map .appbar .search input{ min-width:0; font-size:14px; }
  /* 즐겨찾기·설정: 헤더에서 빼서 지도 우상단에 세로 플로팅 */
  body.page-map .appbar-actions{
    position:fixed; right:12px; z-index:45;
    top:calc(60px + var(--safe-top) + 12px);
    flex-direction:column; gap:8px;
  }
  body.page-map .appbar-actions .iconbtn{
    width:44px; height:44px; background:#fff; color:var(--c-primary-deep);
    border-radius:14px; box-shadow:0 4px 14px rgba(11,40,58,.22);
  }
  body.page-map .appbar-actions .iconbtn:hover{ background:#F4F7F9; }
  /* 검색 결과: 헤더 아래 전폭 드롭다운 */
  body.page-map #searchResults{
    flex:1 1 100%; order:3; width:100%;
    max-height:60vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
  }
  /* 지도: 고정 헤더 아래부터 화면 끝까지(fixed, 공백 방지) */
  body.page-map #mapWrap{
    position:fixed; left:0; right:0; bottom:0;
    top:calc(60px + var(--safe-top)); height:auto;
  }
  body.page-map #map{ height:100%; }
  /* 바텀시트: 뷰포트 하단 고정(fixed) + 내용 길면 내부 스크롤.
     모바일 100vh 함정 회피 위해 dvh 사용, 홈바(safe-area)만큼 하단 여유 */
  body.page-map .sheet{
    position:fixed; left:0; right:0; bottom:0;
    max-height:80vh; max-height:80dvh;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    padding-bottom:calc(28px + var(--safe-bottom));
  }
}

/* 태블릿/PC: 상단 고정 헤더(로고+검색창 한 줄) + 지도 전체화면 */
@media (min-width:768px){
  /* 상단 전체폭 고정 바 */
  body.page-map .appbar{
    position:fixed; top:0; left:0; right:0; width:100%; box-sizing:border-box; z-index:50;
    flex-direction:row; align-items:center; gap:16px;
    padding:12px 20px; background:var(--c-primary-deep);
    box-shadow:0 4px 18px rgba(11,40,58,.18);
  }
  body.page-map .appbar .row.between{ flex:0 0 auto; width:auto; } /* 로고 줄 표시 */
  body.page-map .appbar .logo{ font-size:20px; white-space:nowrap; }
  /* 검색창: 오른쪽 영역(로고는 왼쪽), 액션 버튼은 그 오른쪽 */
  body.page-map .appbar .search{
    flex:0 1 420px; width:420px; margin-left:auto; background:#fff;
    box-shadow:0 2px 10px rgba(11,40,58,.12);
  }
  body.page-map .appbar .appbar-actions{ flex:0 0 auto; }
  /* 검색 결과: 검색창 아래 드롭다운(액션 버튼 폭만큼 우측 여백) */
  body.page-map #searchResults{
    position:absolute; top:calc(100% - 6px); right:108px; left:auto;
    width:420px; max-width:calc(100% - 40px); max-height:70vh; overflow:auto;
    background:#fff; border-radius:0 0 16px 16px;
    box-shadow:0 12px 40px rgba(11,40,58,.18);
  }
  /* 지도: 고정 헤더 아래부터 화면 가득 */
  body.page-map #mapWrap{ position:fixed; left:0; right:0; top:68px; bottom:0; height:auto; }
  body.page-map #map{ height:100%; }

  /* 별도 플로팅 로고는 숨김(헤더에 로고 있음) */
  body.page-map .pc-logo{ display:none!important; }

  /* 선택 지점: 바텀시트 → 좌측 플로팅 카드 */
  body.page-map .sheet{
    left:16px; right:auto; bottom:16px; top:auto;
    width:380px; max-height:calc(100vh - 32px); overflow:auto;
    border-radius:18px; box-shadow:0 12px 48px rgba(11,40,58,.25);
    padding:18px;
  }
  body.page-map .sheet .handle{ display:none; }

  /* 내 위치 버튼 위치 보정 */
  body.page-map .map-fab{ right:20px; bottom:20px; }
}

/* 큰 화면: 선택 지점 카드만 약간 더 넓게(헤더는 전체폭 유지) */
@media (min-width:1200px){
  body.page-map .sheet{ width:420px; }
}

/* ===== detail/calendar — 하단 홈바 영역 여유 ===== */
body.page-detail .p16{ padding-bottom:calc(28px + var(--safe-bottom)); }
body.page-calendar .cal-page{ padding-bottom:calc(36px + var(--safe-bottom)); }

/* ===== 헤더 액션(즐겨찾기/설정) ===== */
.appbar-actions{ display:flex; align-items:center; gap:6px; flex:0 0 auto; }
.iconbtn--light{ color:#fff; background:rgba(255,255,255,.16); border-radius:11px; }
.iconbtn--light:hover{ background:rgba(255,255,255,.30); }

/* ===== 설정 모달 ===== */
.modal-backdrop{ position:fixed; inset:0; z-index:200; background:rgba(11,40,58,.45);
  display:flex; align-items:center; justify-content:center; padding:20px; }
.modal{ width:100%; max-width:420px; background:#fff; border-radius:18px; padding:18px 20px 20px;
  box-shadow:0 20px 60px rgba(11,40,58,.3); }
.modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.setting-row{ display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:12px 0; cursor:pointer; }
/* 토글 스위치 */
.switch{ appearance:none; -webkit-appearance:none; flex:0 0 auto; width:48px; height:28px; border-radius:999px;
  background:#CBD5E1; position:relative; cursor:pointer; transition:.2s; }
.switch:checked{ background:var(--c-primary); }
.switch::after{ content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%;
  background:#fff; transition:.2s; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.switch:checked::after{ transform:translateX(20px); }

/* ===== 즐겨찾기 페이지 ===== */
body.page-favorites .app{ max-width:none; }
.fav-appbar{ position:sticky; top:0; z-index:50; }
.fav-page{ max-width:1180px; margin:0 auto; padding:16px 16px calc(32px + var(--safe-bottom)); }
.fav-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:14px; }
.fav-empty{ text-align:center; padding:60px 20px; }

.favc-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; }
.favc{ display:flex; flex-direction:column; gap:10px; text-decoration:none; color:var(--c-text);
  border:1px solid var(--c-border); border-radius:18px; padding:16px; background:#fff;
  box-shadow:0 2px 10px rgba(11,40,58,.05); transition:.15s; }
.favc:hover{ border-color:var(--c-primary); box-shadow:0 8px 24px rgba(11,40,58,.12); transform:translateY(-2px); }
.favc.is-spring{ background:linear-gradient(180deg,#FFF4F2 0%,#FFFCFB 60%); border-color:#FBD9D9; }
.favc--loading, .favc--err{ justify-content:center; min-height:120px; }
.favc-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.favc-name{ min-width:0; }
.favc-del{ flex:0 0 auto; width:34px; height:34px; border-radius:10px; border:1px solid #FBE6B0;
  background:#FFFBEB; display:grid; place-items:center; cursor:pointer; }
.favc-del:hover{ background:#FFF3CC; }
.favc-badges{ display:flex; flex-wrap:wrap; gap:5px; align-items:center; }
.favc-bd{ font-size:11px; font-weight:800; color:#fff; border-radius:7px; padding:2px 7px; }
.favc-bd--haru{ background:#0EA5C4; } .favc-bd--flow{ background:#0B7A93; }
.favc-next{ display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:9px 12px; border-radius:11px; background:linear-gradient(135deg,#E8F6FA,#F2FAFC); border:1px solid #D6EEF6; }
.favc-next-k{ font-size:12px; font-weight:700; color:#0B7A93; }
.favc-next-v{ font-size:14px; font-weight:800; color:#0B5566; }
.favc-chart{ border-radius:10px; overflow:hidden; background:#F7FBFC; }
.favc-tides{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.favc-tide{ border-radius:11px; padding:9px 11px; border:1px solid var(--c-border); }
.favc-tide--hi{ background:#EEF4FF; border-color:#DCE7FB; }
.favc-tide--lo{ background:#FFF6EC; border-color:#FBE6CC; }
.favc-tide-h{ display:flex; align-items:center; gap:5px; font-size:12px; font-weight:800; color:var(--c-text-sub); margin-bottom:4px; }
.favc-line{ display:flex; align-items:baseline; justify-content:space-between; gap:6px; font-size:14px; font-weight:700; }
.favc-line .muted{ font-size:11px; font-weight:600; }
.favc-line .is-low-time{ color:#EF4444; }
.favc-gauge{ display:flex; align-items:center; gap:8px; }
.favc-gauge-bar{ flex:1 1 auto; height:10px; border-radius:6px; background:#EEF3F5; overflow:hidden; }
.favc-gauge-bar>i{ display:block; height:100%; background:linear-gradient(90deg,#7DD3E8,#0EA5C4); border-radius:6px; }
.favc-gauge-v{ font-size:11px; font-weight:700; color:#0B5566; white-space:nowrap; }
.favc-sun{ font-size:12px; color:var(--c-text-sub); }

/* ===== 메인 바텀시트 (디자인 고도화) ===== */
/* 상단 툴바: 좌(즐겨찾기) / 우(닫기) */
.sheet-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
.sheet-fav{ display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 12px;
  border-radius:11px; border:1px solid var(--c-border); background:#fff; cursor:pointer;
  font-size:13px; font-weight:800; color:var(--c-text-sub); transition:.15s; }
.sheet-fav:hover{ background:#FFFBEB; border-color:#FFE08A; }
.sheet-fav.on{ background:#FFFBEB; border-color:#FFE08A; color:#B7791F; }
.sheet-close{ flex:0 0 auto; width:38px; height:38px; border-radius:11px; border:1px solid var(--c-border);
  background:#fff; color:var(--c-text-sub); display:grid; place-items:center; cursor:pointer; transition:.15s; }
.sheet-close:hover{ background:#F4F7F9; color:var(--c-text); }
.sheet-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.sheet-title{ min-width:0; }

.sheet-next{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:14px; padding:11px 14px; border-radius:13px;
  background:linear-gradient(135deg,#E8F6FA 0%,#F2FAFC 100%); border:1px solid #D6EEF6; }
.sheet-next-k{ font-size:13px; font-weight:700; color:#0B7A93; }
.sheet-next-v{ font-size:16px; font-weight:800; color:#0B5566; }

.sheet-tides{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.sheet-tide{ border-radius:13px; padding:12px 14px; border:1px solid var(--c-border); background:#fff; }
.sheet-tide--hi{ background:linear-gradient(180deg,#EEF4FF 0%,#F8FBFF 100%); border-color:#DCE7FB; }
.sheet-tide--lo{ background:linear-gradient(180deg,#FFF6EC 0%,#FFFBF6 100%); border-color:#FBE6CC; }
.sheet-tide-h{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:800; color:var(--c-text-sub); margin-bottom:6px; }
.sheet-ev{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-top:4px; }
.sheet-ev-t{ font-size:16px; font-weight:800; }
.sheet-tide--lo .sheet-ev-t{ color:#EF4444; }   /* 간조 시각 붉은색 */
.sheet-ev-l{ font-size:13px; color:var(--c-text-sub); font-weight:700; }
.sheet-cm{ font-size:10px; color:#9aa7b0; margin-left:1px; }

.sheet-sun{ display:flex; gap:18px; justify-content:center; margin-top:12px;
  font-size:13px; color:var(--c-text-sub); }
.sheet-sun b{ color:var(--c-text); }
.sheet-actions{ display:flex; gap:8px; margin-top:16px; }

/* ===== detail(상세) — 달력처럼 전체화면 와이드 레이아웃 ===== */
body.page-detail .app{ max-width:none; box-shadow:none; }
body.page-detail .p16{ max-width:1200px; margin:0 auto; }

/* 헤더 날짜 좌우 네비게이션(이전일/다음일) */
.day-nav{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.day-nav-btn{ display:inline-flex; align-items:center; gap:4px; color:#fff; text-decoration:none;
  background:rgba(255,255,255,.16); border-radius:11px; padding:8px 12px; font-size:13px; font-weight:700;
  white-space:nowrap; transition:.15s; }
.day-nav-btn:hover{ background:rgba(255,255,255,.30); }
@media (max-width:480px){
  .day-nav-lbl{ display:none; }   /* 좁은 화면은 화살표만 */
  .day-nav-btn{ padding:8px 10px; }
}

/* 상단 2-컬럼: 좌(날짜박스·조위그래프) / 우(일출몰·만간조) — 예보는 아래 전폭 */
.detail-grid{ display:block; margin-bottom:14px; }

/* 모바일(단일 컬럼): 컨테이너/그룹 사이 여백 보강 */
@media (max-width:899px){
  /* 좌측 컬럼(그래프)과 우측 컬럼(일출몰) 사이 */
  .detail-main{ margin-bottom:14px; }
  /* 일출·일몰·월령(sun-row)과 만조·간조 카드 사이 */
  .detail-side .sun-row{ margin-bottom:14px; }
}

/* 헤더 배지 — 해루질/낚시(헤더 배경 위에서 또렷하게 흰색 반투명) */
.chip--haru{ background:rgba(255,255,255,.92); color:#0B7A93; font-weight:800; }
.chip--flow{ background:rgba(255,255,255,.92); color:#0B5566; font-weight:800; }
.fc-tag.fc-flow{ background:#D6EEF6; color:#0B5566; }

/* 상세 헤더 박스: 기본 바다색, 대조기엔 강조색(코랄→오렌지)으로 한눈에 구분 */
.detail-hero{ background:var(--grad-sea); }
.detail-hero.is-spring-day{ background:linear-gradient(135deg,#F87171 0%,#EA580C 100%); }
/* 대조기 헤더 안의 '대조기' 칩은 배경 위에서 흰색 반투명으로 또렷하게 */
.detail-hero.is-spring-day .chip--spring{ background:rgba(255,255,255,.92); color:#C0392B; }

/* 간조 시각 붉은색 — 상세 만간조 박스 + 7일/30일 예보 카드 공통 */
.event .is-low-time, .fc-ev .is-low-time{ color:#EF4444; }
/* 추천 배지(행 안): 시각 왼쪽, margin-left:auto로 우측 그룹을 끝으로 밀어 시각 위치 고정 */
.haru-rec{ margin-left:auto; font-size:12px; font-weight:700; color:#0B7A93;
  background:#E0F4F9; border-radius:8px; padding:3px 9px; white-space:nowrap; }
.haru-rec.is-empty{ background:transparent; padding:3px 0; }  /* 만조 행: 자리만 차지(보이지 않음) */
.event .ev-time{ font-size:18px; min-width:62px; text-align:right; margin-left:10px; }
.event .ev-lvl{ min-width:64px; text-align:right; margin-left:14px; }
/* 간조 행 아래 별도 줄(모바일 전용) — 기본은 숨김. 오른쪽 끝 정렬 */
.haru-line{ display:none; padding:2px 0 12px 0; text-align:right; border-bottom:1px solid var(--c-border); }
.haru-line .haru-rec{ margin-left:0; }

/* 모바일: 해루질 배지를 간조 시각 바로 아래(같은 묶음)로 */
@media (max-width:767px){
  .event .haru-rec{ display:none; }            /* 행 안 배지/빈자리 제거 → 라벨 줄바꿈 방지 */
  .event .ev-time{ margin-left:auto; }          /* 시각을 오른쪽으로 정렬 */
  /* 간조 행: 아래 해루질 줄과 한 묶음 → 간조 행의 구분선 제거 */
  .event.has-haru{ border-bottom:none; padding-bottom:4px; }
  .haru-line{ display:block; }                  /* 간조 시각 바로 아래 표시 */
}
@media (max-width:380px){
  .event .ev-time{ min-width:54px; }
  .event .ev-lvl{ min-width:54px; }
}

/* 일출·일몰·월령: 3박스 크기·정렬 통일 */
.detail-side .sun-row{ display:flex; gap:14px; align-items:stretch; }
.detail-side .sun-row .card{ flex:1 1 0; display:flex; flex-direction:column; justify-content:center;
  text-align:center; min-width:0; }
/* 가로 배치라 .card+.card 세로마진이 들어가면 안 됨(높이 어긋남 방지) */
.sun-row .card+.card{ margin-top:0; }

@media (min-width:900px){
  /* 양 컬럼을 같은 높이로 늘려 좌측 그래프 하단 = 우측 만간조 하단 정렬 */
  .detail-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; align-items:stretch; }
  .detail-main, .detail-side{ display:flex; flex-direction:column; gap:14px; min-width:0; }
  /* flex gap 사용 시 .card+.card 마진과 중첩 방지 */
  .detail-main>.card+.card, .detail-side>.card+.card{ margin-top:0; }
  /* 좌측: 조위그래프 카드가 남는 높이를 채움 / 우측: 만간조 카드가 채움 → 하단 정렬 일치 */
  .detail-main>.card:last-child{ flex:1 1 auto; }
  .detail-side>.card:last-child{ flex:1 1 auto; display:flex; flex-direction:column; justify-content:center; }
}
@media (min-width:1024px){
  body.page-detail .p16{ padding:20px 28px calc(36px + var(--safe-bottom)); }
}

/* ===== 예보 탭 + 풍성 카드 ===== */
.fc-wrap{ display:flex; flex-direction:column; }
.fc-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.fc-tabs{ display:inline-flex; background:#EEF5F7; border-radius:12px; padding:3px; gap:2px; }
.fc-tab{ border:none; background:transparent; font-weight:800; font-size:13px; color:var(--c-text-sub);
  padding:7px 16px; border-radius:9px; cursor:pointer; transition:.15s; }
.fc-tab.on{ background:#fff; color:var(--c-primary-deep); box-shadow:0 1px 4px rgba(11,40,58,.12); }

/* 전폭 예보 — 7일은 한 줄(7열), 30일은 촘촘하게. 좁으면 자동 줄바꿈 */
.fc-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
@media (min-width:1080px){ .fc-grid{ grid-template-columns:repeat(7,1fr); } }
/* 30일: 더 많은 열로 촘촘하게 */
.fc-grid--30{ gap:8px; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
@media (min-width:1080px){ .fc-grid--30{ grid-template-columns:repeat(6,1fr); } }
@media (min-width:1320px){ .fc-grid--30{ grid-template-columns:repeat(7,1fr); } }

.fc-card{ display:flex; flex-direction:column; gap:7px; text-decoration:none; color:var(--c-text);
  border:1px solid var(--c-border); border-radius:14px; padding:11px 12px; background:#fff;
  transition:.15s; }
.fc-card:hover{ border-color:var(--c-primary); box-shadow:0 4px 16px rgba(11,40,58,.10); transform:translateY(-1px); }
.fc-card.is-spring{ background:#FEF6F6; border-color:#FBD9D9; }
.fc-card.is-today{ outline:2px solid var(--c-primary); outline-offset:-1px; }
.fc-head{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.fc-date{ display:flex; align-items:baseline; gap:4px; }
.fc-md{ font-weight:800; font-size:15px; }
.fc-dow{ font-size:12px; font-weight:700; }
.fc-mul{ font-size:12px; font-weight:800; color:var(--c-primary-deep); background:#E8F5F9;
  border-radius:7px; padding:2px 8px; }
.fc-tags{ display:flex; align-items:center; gap:5px; flex-wrap:wrap; min-height:20px; }
.fc-tag{ font-size:10px; font-weight:800; border-radius:6px; padding:2px 6px; line-height:1.4; }
.fc-spring{ background:#FDE2E2; color:#C2410C; }
.fc-neap{ background:#E0EAFE; color:#1D4ED8; }
.fc-haru{ background:#0EA5C4; color:#fff; }
.fc-moon{ font-size:11px; color:var(--c-text-sub); margin-left:auto; }
.fc-evs{ display:flex; flex-direction:column; gap:3px; }
.fc-ev{ display:flex; align-items:center; gap:8px; font-size:13px; }
.fc-ev-k{ font-size:10px; font-weight:800; color:#fff; border-radius:5px; padding:1px 5px; min-width:30px; text-align:center; }
.fc-ev-k.k-high{ background:var(--c-tide-high,#2563EB); }
.fc-ev-k.k-low{ background:var(--c-tide-low,#F59E0B); }
.fc-ev-t{ font-weight:700; }
.fc-ev-l{ margin-left:auto; color:var(--c-text-sub); font-size:12px; }
.fc-cm{ font-size:10px; color:#9aa7b0; margin-left:1px; }
.fc-bar{ position:relative; height:16px; background:#EEF3F5; border-radius:8px; overflow:hidden; }
.fc-bar>i{ display:block; height:100%; background:linear-gradient(90deg,#7DD3E8,#0EA5C4); border-radius:8px; }
.fc-bar-v{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:700; color:#0B5566; }
.fc-sun{ font-size:11px; color:var(--c-text-sub); }

/* ===== 월간 달력 ===== */
.cal-grid-hd{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:6px}
.cal-grid-hd span{text-align:center;font-size:12px;font-weight:700;color:var(--c-text-sub)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-cell{min-height:64px;border:1px solid var(--c-border);border-radius:8px;padding:4px 5px;
  display:flex;flex-direction:column;gap:2px;background:#fff;overflow:hidden}
.cal-cell.empty{border:none;background:transparent}
.cal-cell.spring{background:#FEF2F2;border-color:#FBD5D5}
.cal-cell.today{outline:2px solid var(--c-primary);outline-offset:-1px}
.cal-day{font-size:12px;font-weight:700}
.cal-moon{font-size:12px;line-height:1}
.cal-mul{font-size:11px;font-weight:800;color:var(--c-primary-deep);margin-top:auto}
.cal-empty{font-size:11px;color:#cbd5e1;margin-top:auto}
.cal-haru{font-size:10px;font-weight:700;color:#fff;background:#0EA5C4;border-radius:5px;
  padding:1px 4px;text-align:center;line-height:1.4}
.cal-haru.ok{background:#E0F4F9;color:#0B7A93}
@media (max-width:480px){
  .cal-cell{min-height:56px;padding:3px 4px}
  .cal-mul{font-size:10px}
  .cal-haru{font-size:9px;padding:1px 2px}
}

/* ===== 전체화면 월간 달력 페이지 (고도화) ===== */
body.page-calendar .app{ max-width:none; }
.cal-page{ padding:14px 14px 32px; max-width:1180px; margin:0 auto; }

/* 헤더: 그라데이션 카드 느낌 */
.calf-head{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 18px; margin-bottom:14px; border-radius:16px;
  background:var(--grad-sea); color:#fff; box-shadow:0 6px 20px rgba(11,40,58,.16); }
.calf-head .btn{ background:rgba(255,255,255,.18); color:#fff; border:none; font-weight:800; }
.calf-head .btn:hover{ background:rgba(255,255,255,.32); }
.calf-title{ text-align:center; }
.calf-title .b{ color:#fff; }
.calf-sub{ color:#fff; font-size:15px; font-weight:700; margin-top:3px; }

.calf-grid-hd{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; margin-bottom:8px; }
.calf-grid-hd span{ text-align:center; font-size:15px; font-weight:800; color:var(--c-text-sub); padding:5px 0; }
.calf-grid{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; }

.calf-cell{ min-height:128px; min-width:0; border:1px solid var(--c-border); border-radius:14px;
  padding:9px 9px; display:flex; flex-direction:column; gap:5px; background:#fff; cursor:pointer;
  overflow:hidden; transition:.14s; }
.calf-mul{ max-width:100%; }
.calf-bd{ max-width:100%; overflow:hidden; }
.calf-cell:hover{ border-color:var(--c-primary); box-shadow:0 6px 18px rgba(11,40,58,.12); transform:translateY(-2px); }
.calf-cell.empty{ border:none; background:transparent; cursor:default; }
.calf-cell.spring{ background:linear-gradient(180deg,#FFF1F1 0%,#FFF9F9 100%); border-color:#FBD5D5; }
.calf-cell.today{ outline:2.5px solid var(--c-primary); outline-offset:-1px; box-shadow:0 6px 18px rgba(14,165,196,.22); }

.calf-top{ display:flex; align-items:center; justify-content:space-between; gap:4px; }
.calf-day{ font-size:18px; font-weight:800; line-height:1; }
.calf-moon{ display:inline-flex; align-items:center; gap:3px; }
.calf-mi{ font-size:20px; line-height:1; }                 /* 달 아이콘 크게 */
.calf-lunar{ font-size:12px; color:var(--c-text-sub); font-weight:600; }
.calf-mul{ font-size:14px; font-weight:800; color:var(--c-primary-deep);
  background:#E8F5F9; border-radius:8px; padding:2px 8px; align-self:flex-start; }

/* 만간조: 시각순 칩(아이콘+시각), 좁으면 줄바꿈(… 금지) */
.calf-times{ display:flex; flex-wrap:wrap; gap:4px 6px; margin-top:1px; }
.calf-t{ display:inline-flex; align-items:center; gap:3px; font-size:13px; font-weight:700;
  font-variant-numeric:tabular-nums; white-space:nowrap; }
.calf-ti{ font-style:normal; font-size:11px; line-height:1; }
.calf-t--hi{ color:#2563EB; } .calf-t--hi .calf-ti{ color:#2563EB; }
.calf-t--lo{ color:#EF4444; } .calf-t--lo .calf-ti{ color:#EF4444; }
.calf-empty{ font-size:13px; color:#cbd5e1; }

.calf-badges{ display:flex; flex-wrap:wrap; gap:4px; margin-top:auto; }
.calf-bd{ font-size:11px; font-weight:800; color:#fff; border-radius:7px; padding:2px 7px; line-height:1.5; }
.calf-bd--haru{ background:#0EA5C4; }
.calf-bd--flow{ background:#0B7A93; }

.calf-legend{ display:flex; gap:18px; flex-wrap:wrap; justify-content:center; align-items:center;
  margin-top:20px; font-size:14px; }
.calf-legend i.lg-spring{ display:inline-block; width:15px; height:15px; border-radius:5px;
  background:#FFF1F1; border:1px solid #FBD5D5; vertical-align:-2px; margin-right:3px; }
.calf-legend .lg-ico{ color:#2563EB; font-weight:800; }
.calf-legend .lg-ico--lo{ color:#EF4444; }

/* 태블릿 이하: 셀·글자 적절히 */
@media (max-width:760px){
  .calf-cell{ min-height:118px; }
  .calf-t{ font-size:12px; }
}
/* 모바일: 셀 작게, 달 아이콘은 아래로, 배지는 아이콘만 (가로 스크롤 방지) */
@media (max-width:600px){
  .cal-page{ padding:10px 5px 24px; }
  .calf-grid, .calf-grid-hd{ gap:3px; }
  .calf-cell{ min-height:104px; padding:5px 4px; border-radius:10px; gap:3px; }
  /* 날짜 위 / 달 아이콘 아래로 내려 한 줄에 욱여넣지 않음 */
  .calf-top{ flex-direction:column; align-items:center; gap:1px; }
  .calf-day{ font-size:15px; }
  .calf-moon{ flex-direction:column; gap:0; }
  .calf-mi{ font-size:18px; } .calf-lunar{ display:none; }
  .calf-mul{ font-size:11px; padding:1px 5px; align-self:center; }
  .calf-times{ gap:1px 4px; justify-content:center; }
  .calf-t{ font-size:11px; gap:1px; }
  .calf-ti{ font-size:9px; }
  /* 배지: 글자 숨기고 아이콘만 — 한 줄에 둘(해루질+낚시) 들어가게 작게 */
  .calf-badges{ gap:2px; justify-content:center; flex-wrap:nowrap; }
  .calf-bd{ font-size:12px; padding:1px 3px; border-radius:6px; }
  .calf-bd-t{ display:none; }
  .calf-grid-hd span{ font-size:13px; padding:3px 0; }
}
/* 아주 좁은 폰(380px 이하) */
@media (max-width:380px){
  .calf-cell{ min-height:96px; padding:4px 3px; }
  .calf-t{ font-size:10px; }
  .calf-mul{ font-size:10px; }
  .calf-mi{ font-size:16px; }
  .calf-badges{ gap:2px; }
  .calf-bd{ font-size:11px; padding:1px 2px; }
}

/* PWA 설치 버튼 */
.install-btn{
  position:fixed; right:16px; bottom:calc(16px + var(--safe-bottom)); z-index:60;
  display:none; align-items:center; gap:8px; height:46px; padding:0 18px;
  border-radius:24px; background:var(--c-primary-deep); color:#fff; font-weight:700;
  box-shadow:0 8px 24px rgba(11,122,147,.4); cursor:pointer; border:none;
}
.install-btn.show{ display:inline-flex; }
@media (min-width:768px){ .install-btn{ right:20px; bottom:80px; } }