﻿/* ═══════════════════════════════════
   BASE
═══════════════════════════════════ */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;height:100dvh;overflow:hidden;}
body{
  font-family:'Jua',sans-serif;
  display:flex;flex-direction:column;
  max-width:430px;margin:0 auto;
  height:100%;height:100dvh;
  overflow:hidden;
  background: linear-gradient(160deg, #FFD6E7 0%, #FFCBA4 40%, #FFA07A 100%);
}

/* ═══════════════════════════════════
   HEADER
═══════════════════════════════════ */
.app-header{
  flex-shrink:0;
  padding:44px 20px 10px;
  text-align:center;
  position:relative;
  z-index:10;
}
.app-header h1{
  font-family:'Jua',sans-serif;
  font-size:30px;
  color:#333;
  text-shadow: 2px 2px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
  letter-spacing:2px;
  position:relative;
  display:inline-block;
}
.app-header h1::before{content:'♥';position:absolute;top:-4px;left:-18px;font-size:14px;color:#FF6B9D;}
.app-header h1::after{content:'♥';position:absolute;top:-4px;right:-18px;font-size:14px;color:#FF6B9D;}
.header-date{
  font-family:'Nanum Gothic',sans-serif;
  font-size:12px;color:rgba(80,40,20,0.6);margin-top:2px;
}

/* ═══════════════════════════════════
   PAGES
═══════════════════════════════════ */
.pages{
  flex:1;overflow:hidden;position:relative;min-height:0;
}
.page{
  position:absolute;top:0;left:0;right:0;bottom:0;
  overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  display:none;
}
.page.active{display:block;}
.page-inner{padding:10px 14px 20px;}

/* ═══════════════════════════════════
   BOTTOM NAV
═══════════════════════════════════ */
.bottom-nav{
  flex-shrink:0;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(12px);
  border-top:2.5px solid #333;
  display:grid;grid-template-columns:repeat(4,1fr);
  padding:6px 0 max(6px,env(safe-area-inset-bottom));
  z-index:50;
  box-shadow:0 -2px 0 rgba(0,0,0,0.06);
}
.nav-item{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  cursor:pointer;padding:4px 0 5px;
  border:none;background:none;
  transition:transform 0.15s;
}
.nav-item:active{transform:scale(0.88);}
.nav-icon-wrap{
  width:34px;height:34px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;
  border:2px solid transparent;
  transition:all 0.15s;
  background:transparent;
}
.nav-item.active .nav-icon-wrap{
  background:#fff;
  border-color:#333;
  box-shadow:2px 2px 0 #333;
  transform:scale(1.05);
}
.nav-label{font-size:10px;font-weight:400;color:#888;font-family:'Jua',sans-serif;margin-top:1px;}
.nav-item.active .nav-label{color:#333;font-weight:700;}

/* ═══════════════════════════════════
   HOME PAGE – CARD GRID
═══════════════════════════════════ */
.home-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:auto auto;
  gap:10px;
  padding:0;
}

/* big card (공지사항) */
.home-card{
  background:#C8A8E9;
  border:3px solid #333;
  border-radius:20px;
  padding:16px;
  position:relative;
  filter:drop-shadow(4px 4px 0 #333);
  cursor:pointer;
  transition:transform 0.12s, filter 0.12s;
  min-height:150px;
  display:flex;flex-direction:column;align-items:flex-start;
  overflow:hidden;
}
.home-card:active{transform:translate(2px,2px);filter:drop-shadow(2px 2px 0 #333);}
.home-card.notice{background:#C8A8E9;}
.home-card.photo{background:#A8D8A8;}
.home-card.calendar-mini{background:#FFD700;grid-column:1/3;}

.card-icon{font-size:36px;margin-bottom:6px;}
.card-title{
  font-family:'Jua',sans-serif;
  font-size:22px;color:#333;
  line-height:1.2;
}
.card-subtitle{
  font-family:'Nanum Gothic',sans-serif;
  font-size:11px;color:#555;margin-top:6px;line-height:1.4;
  width:100%;
}
.home-notice-item{
  font-family:'Nanum Gothic',sans-serif;
  font-size:11px;color:#222;line-height:1.5;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:100%;font-weight:700;
}
.home-photo-item{
  display:flex;align-items:center;gap:6px;
  overflow:hidden;
}
.home-photo-thumb{
  width:30px;height:30px;object-fit:cover;border-radius:6px;
  flex-shrink:0;border:1.5px solid rgba(0,0,0,0.08);
}
.home-photo-title{
  font-family:'Nanum Gothic',sans-serif;font-size:11px;
  color:#333;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  flex:1;min-width:0;
}
.card-deco{
  position:absolute;right:10px;bottom:10px;
  font-size:32px;opacity:0.5;
}

/* ═══════════════════════════════════
   SECTION PAGES (notice/photo/memo)
═══════════════════════════════════ */
.page-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:12px;
  padding:4px 0;
}
.page-title{
  font-family:'Jua',sans-serif;
  font-size:22px;color:#333;
}

/* Kawaii add button */
.kawaii-btn{
  background:#FFD6E7;
  border:2.5px solid #333;
  border-radius:50px;
  padding:6px 14px;
  font-family:'Jua',sans-serif;
  font-size:14px;
  cursor:pointer;
  box-shadow:2px 2px 0 #333;
  transition:transform 0.1s, box-shadow 0.1s;
  color:#333;
}
.kawaii-btn:active{transform:translate(1px,1px);box-shadow:1px 1px 0 #333;}

/* List items */
.k-item{
  background:#fff;
  border:2.5px solid #333;
  border-radius:16px;
  padding:12px 14px;
  margin-bottom:10px;
  display:flex;align-items:flex-start;gap:10px;
  box-shadow:3px 3px 0 #333;
  animation:popIn 0.2s cubic-bezier(0.34,1.3,0.64,1);
  cursor:grab;
}
.k-item:active{cursor:grabbing;}
.k-item.dragging{opacity:0.4;}
.k-item.drag-over{border-color:#FF6B9D;background:#FFF0F7;transform:translateY(-3px);}
@keyframes popIn{from{opacity:0;transform:scale(0.9);}to{opacity:1;transform:none;}}

.k-item-body{flex:1;min-width:0;}
.k-item-text{font-family:'Nanum Gothic',sans-serif;font-size:14px;line-height:1.5;color:#333;word-break:break-word;}
.k-item-pin{font-size:10px;color:#FF9500;font-weight:800;margin-bottom:2px;font-family:'Jua',sans-serif;}
.k-actions{display:flex;gap:4px;flex-shrink:0;}
.k-btn{
  background:none;border:2px solid #ddd;
  border-radius:10px;padding:3px 7px;
  font-size:13px;cursor:pointer;
  transition:all 0.12s;
}
.k-btn:hover{border-color:#333;background:#F5F5F5;}
.k-btn:active{transform:scale(0.9);}

/* Photo grid */
.photo-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.photo-cell{
  background:#fff;border:2.5px solid #333;border-radius:16px;
  overflow:hidden;box-shadow:3px 3px 0 #333;
  animation:popIn 0.2s cubic-bezier(0.34,1.3,0.64,1);
}
.photo-cell img{width:100%;height:110px;object-fit:cover;display:block;}
.photo-cell-no-img{height:80px;display:flex;align-items:center;justify-content:center;font-size:30px;background:#FFF9C4;}
.photo-cell-bottom{
  padding:8px 10px;display:flex;justify-content:space-between;align-items:center;
  background:#fff;
}
.photo-cell-label{
  font-family:'Nanum Gothic',sans-serif;font-size:12px;font-weight:700;
  flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#333;
}

/* Memo grid */
.memo-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.memo-cell{
  border:2.5px solid #333;border-radius:16px;
  padding:12px;min-height:90px;
  box-shadow:3px 3px 0 #333;
  animation:popIn 0.2s cubic-bezier(0.34,1.3,0.64,1);
  cursor:pointer;
  display:flex;flex-direction:column;
}
.memo-cell-sub{font-size:11px;color:#666;margin-top:3px;line-height:1.4;word-break:break-all;}
.memo-cell-text{
  font-family:'Nanum Gothic',sans-serif;font-size:13px;line-height:1.5;color:#333;flex:1;
}
.memo-cell-bottom{display:flex;justify-content:flex-end;gap:4px;margin-top:8px;}

/* Empty */
.empty-k{
  text-align:center;padding:50px 20px;
  font-family:'Jua',sans-serif;font-size:15px;color:#999;
}
.empty-k-icon{font-size:48px;margin-bottom:10px;animation:wobble 2s infinite;}
@keyframes wobble{0%,100%{transform:rotate(-5deg);}50%{transform:rotate(5deg);}}

/* ═══════════════════════════════════
   CALENDAR
═══════════════════════════════════ */
.cal-wrap{
  background:#fff;
  border:3px solid #333;
  border-radius:22px;
  overflow:hidden;
  filter:drop-shadow(4px 4px 0 #333);
}

/* Month nav */
.cal-month-bar{
  background:#FFD6E7;
  padding:10px 14px;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:2.5px solid #333;
}
.cal-arrow{
  background:#fff;border:2px solid #333;border-radius:50%;
  width:30px;height:30px;font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:2px 2px 0 #333;
  transition:transform 0.1s;font-family:'Jua',sans-serif;color:#333;
}
.cal-arrow:active{transform:scale(0.88);}
.cal-month-label{font-family:'Jua',sans-serif;font-size:18px;color:#333;}
.cal-today-chip{
  background:#fff;border:2px solid #333;border-radius:20px;
  padding:3px 10px;font-family:'Jua',sans-serif;font-size:12px;
  cursor:pointer;box-shadow:2px 2px 0 #333;color:#333;
  transition:transform 0.1s;
}
.cal-today-chip:active{transform:scale(0.92);}

/* Selection banner */
.sel-banner{display:none !important;}
.sel-cancel{background:none;border:none;color:#EF4444;font-family:'Jua',sans-serif;font-size:12px;cursor:pointer;}

/* Weekdays */
.cal-wds{
  display:grid;grid-template-columns:repeat(7,1fr);
  background:#FFF9C4;border-bottom:2px solid #eee;
  padding:0; margin:0;
  box-sizing:border-box;
  width:100%;
}
.cal-wd{
  text-align:center;font-family:'Jua',sans-serif;
  font-size:11px;padding:6px 0;color:#777;
  box-sizing:border-box;
}
.cal-wd.sun{color:#FF4444;}
.cal-wd.sat{color:#4488FF;}

/* Grid */
.cal-grid-wrap{
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  width:100%;
  box-sizing:border-box;
}
.cal-week-row{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  position:relative;
  flex:1;
  overflow:visible;
  min-height:90px;
  width:100%;
  box-sizing:border-box;
}

/* Day cell */
.cal-day{
  display:flex;flex-direction:column;
  padding:3px 2px 0 2px;cursor:pointer;
  user-select:none;position:relative;
  overflow:hidden; /* 텍스트가 셀 밖으로 못 나가게 */
  box-sizing:border-box;
  width:100%;
}
/* 상단 1행: 양력(좌) + 공휴일/음력(우) 같은 높이 */
.cal-day-top{
  display:flex;justify-content:space-between;align-items:center;
  width:100%;height:24px;overflow:hidden;
  min-width:0; /* flex 자식이 넘치지 않게 */
}
/* 2행 공간 고정 - 대칭 유지용 빈 줄 */
.cal-day-sub{
  height:12px;width:100%;
}
.day-bubble{
  width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'Jua',sans-serif;font-size:12px;color:#555;
  transition:all 0.15s;
  position:relative;z-index:1;
  border:2px solid transparent;
  flex-shrink:0;
}
.cal-day.is-today .day-bubble{
  background:linear-gradient(135deg,#FF6B9D,#FF9A8B);
  color:#fff;border-color:#333;
  box-shadow:2px 2px 0 #333;
}
.cal-day.is-sun .day-bubble{color:#FF4444;}
.cal-day.is-sat .day-bubble{color:#4488FF;}
.cal-day.is-holiday .day-bubble{color:#FF4444!important;}
.cal-day.sel-start .day-bubble{
  background:#A8D8A8;border-color:#333;box-shadow:2px 2px 0 #333;color:#333;
}
.cal-day.in-range{background:rgba(168,216,168,0.2);}

.holiday-chip{
  font-size:7px;color:#FF4444;font-weight:700;
  text-align:left;line-height:1;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  flex:1;min-width:0;max-width:100%;
  padding-left:2px;
  font-family:'Nanum Gothic',sans-serif;
}

/* Pastel day bg colors (cycle through) */
.cal-day:nth-child(7n+1):not(.empty-day){background:rgba(255,182,193,0.15);}
.cal-day:nth-child(7n+2):not(.empty-day){background:rgba(255,218,185,0.15);}
.cal-day:nth-child(7n+3):not(.empty-day){background:rgba(255,255,186,0.15);}
.cal-day:nth-child(7n+4):not(.empty-day){background:rgba(186,255,201,0.15);}
.cal-day:nth-child(7n+5):not(.empty-day){background:rgba(186,225,255,0.15);}
.cal-day:nth-child(7n+6):not(.empty-day){background:rgba(206,186,255,0.15);}
.cal-day:nth-child(7n+7):not(.empty-day){background:rgba(255,186,255,0.15);}

/* Event bars */
.event-bars-layer{
  position:absolute;top:28px;left:0;right:0;
  height:0; /* overflow downward, not taking up row space */
  pointer-events:none;overflow:visible;
  z-index:5;
}
.time-toggle{display:flex;align-items:center;gap:6px;font-size:14px;color:#555;margin-bottom:8px;cursor:pointer;user-select:none;}
.time-toggle input[type=checkbox]{width:18px;height:18px;accent-color:#FF9AC1;cursor:pointer;}
.time-fields{display:none;gap:8px;}
.time-fields.show{display:flex;}
.ev-bar-time{font-size:9px;font-weight:700;opacity:1;margin-left:3px;}
.ev-popup-time{font-size:14px;color:#555;margin-top:4px;font-weight:700;font-family:'Nanum Gothic',sans-serif;}
.ev-popup-lunar-row{display:flex;align-items:center;gap:6px;margin-top:3px;flex-wrap:wrap;}
.ev-popup-lunar{font-size:12px;color:#9B7FD4;font-weight:700;font-family:'Nanum Gothic',sans-serif;}
.ev-popup-repeat-inline{font-size:11px;color:#aaa;font-family:'Nanum Gothic',sans-serif;}
.ev-bar{
  position:absolute;height:17px;
  border-radius:8px;
  font-size:9px;font-weight:700;
  color:#fff;padding:0 6px;line-height:17px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  cursor:pointer;
  border:1.5px solid rgba(0,0,0,0.15);
  box-shadow:1px 1px 0 rgba(0,0,0,0.12);
  transition:filter 0.12s;
  font-family:'Nanum Gothic',sans-serif;
}
.ev-bar:active{filter:brightness(0.85);}
.ev-bar.cont-left{border-radius:0 8px 8px 0;}
.ev-bar.cont-right{border-radius:8px 0 0 8px;}
.ev-bar.cont-both{border-radius:0;}

/* ═══════════════════════════════════
   TOAST
═══════════════════════════════════ */
#toasts{
  position:fixed;bottom:80px;left:50%;transform:translateX(-50%);
  z-index:500;display:flex;flex-direction:column;gap:6px;pointer-events:none;
  width:calc(100% - 32px);max-width:360px;
}
.toast{
  background:#333;color:#fff;
  padding:10px 18px;border-radius:50px;
  font-family:'Jua',sans-serif;font-size:13px;text-align:center;
  animation:toastPop 0.3s cubic-bezier(0.34,1.3,0.64,1);
  box-shadow:3px 3px 0 rgba(0,0,0,0.15);
  border:2px solid #fff;
}
.toast.ok{background:#7BC67E;}
.toast.bye{animation:toastOut 0.25s ease forwards;}
@keyframes toastPop{from{opacity:0;transform:translateY(10px) scale(0.9);}to{opacity:1;transform:none;}}
@keyframes toastOut{to{opacity:0;transform:translateY(-6px) scale(0.92);}}

/* ═══════════════════════════════════
   CONFIRM
═══════════════════════════════════ */
.confirm-wrap{
  position:fixed;inset:0;background:rgba(0,0,0,0.35);
  z-index:9500;display:none;align-items:center;justify-content:center;
  backdrop-filter:blur(4px);
}
.confirm-wrap.open{display:flex;}
.confirm-box{
  background:#fff;border:3px solid #333;border-radius:24px;
  padding:28px 24px;width:280px;text-align:center;
  box-shadow:5px 5px 0 #333;
  animation:popIn 0.22s cubic-bezier(0.34,1.3,0.64,1);
}
@keyframes popIn{from{transform:scale(0.8);opacity:0;}to{transform:none;opacity:1;}}
.confirm-icon{font-size:40px;margin-bottom:10px;}
.confirm-msg{font-family:'Jua',sans-serif;font-size:16px;color:#333;margin-bottom:20px;line-height:1.4;}
.confirm-actions{display:flex;gap:8px;}
.btn-yes{
  flex:1;background:#FFB3C1;border:2.5px solid #333;border-radius:14px;
  padding:11px;font-family:'Jua',sans-serif;font-size:15px;cursor:pointer;
  box-shadow:3px 3px 0 #333;color:#333;
  transition:transform 0.1s,box-shadow 0.1s;
}
.btn-yes:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #333;}
.btn-no{
  flex:1;background:#B8E0FF;border:2.5px solid #333;border-radius:14px;
  padding:11px;font-family:'Jua',sans-serif;font-size:15px;cursor:pointer;
  box-shadow:3px 3px 0 #333;color:#333;
  transition:transform 0.1s,box-shadow 0.1s;
}
.btn-no:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #333;}
.btn-ok{
  flex:1;background:#FFD6E0;border:2.5px solid #333;border-radius:14px;
  padding:11px;font-family:'Jua',sans-serif;font-size:15px;cursor:pointer;
  box-shadow:3px 3px 0 #333;color:#333;
  transition:transform 0.1s,box-shadow 0.1s;
}
.btn-ok:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #333;}

/* ═══════════════════════════════════
   BOTTOM SHEETS
═══════════════════════════════════ */
.overlay{
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,0.35);
  z-index:9000;
  display:none;align-items:flex-end;justify-content:center;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.overlay.open{display:flex !important;}
.sheet{
  background:#FFF9F9;
  border:3px solid #333;border-radius:28px 28px 0 0;
  width:100%;max-width:430px;
  padding:20px 20px max(20px,env(safe-area-inset-bottom));
  animation:sheetUp 0.3s cubic-bezier(0.34,1.1,0.64,1);
  max-height:85vh;overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  position:relative;z-index:9001;
}
@keyframes sheetUp{from{transform:translateY(100%);}to{transform:translateY(0);}}
.sheet-handle{
  width:40px;height:5px;background:#ddd;border-radius:3px;
  margin:0 auto 16px;border:1px solid #ccc;
}
.sheet-title{font-family:'Jua',sans-serif;font-size:20px;color:#333;margin-bottom:18px;}
.ev-sheet-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.ev-sheet-header .sheet-title{margin-bottom:0;}
.ev-holiday-badge{font-size:11px;font-weight:700;border-radius:20px;padding:3px 10px;font-family:'Nanum Gothic',sans-serif;white-space:nowrap;display:none;}
.ev-holiday-badge.holiday{color:#FF4444;background:#FFF0F0;border:1.5px solid #FFAAAA;}
.ev-holiday-badge.lunar-special{color:#7B4FBF;background:#F5F0FF;border:1.5px solid #C9AAEE;}


/* Form elements */
.f-label{
  font-family:'Jua',sans-serif;font-size:13px;color:#555;
  margin-bottom:5px;display:block;
}
.f-field{margin-bottom:14px;}
.f-input{
  width:100%;padding:11px 13px;
  border:2.5px solid #ddd;border-radius:14px;
  font-family:'Nanum Gothic',sans-serif;font-size:14px;color:#333;
  outline:none;background:#fff;
  transition:border-color 0.15s,box-shadow 0.15s;
  box-shadow:inset 1px 1px 3px rgba(0,0,0,0.04);
}
.f-input:focus{border-color:#FF9AC1;box-shadow:0 0 0 3px rgba(255,154,193,0.2),inset 1px 1px 3px rgba(0,0,0,0.04);}
.f-input.err{border-color:#FF6B6B;}
textarea.f-input{resize:vertical;min-height:80px;line-height:1.5;}
.f-err{font-family:'Nanum Gothic',sans-serif;font-size:11px;color:#FF4444;margin-top:4px;display:none;}
.f-err.show{display:block;}

.date-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}

/* Color picks */
.color-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;}
.cpick{
  width:28px;height:28px;border-radius:50%;cursor:pointer;
  border:3px solid rgba(0,0,0,0.12);
  transition:transform 0.12s,border-color 0.12s,box-shadow 0.12s;
  flex-shrink:0;
}
.cpick:hover{transform:scale(1.18);}
.cpick.active{border-color:#333 !important;box-shadow:2px 2px 0 #333;transform:scale(1.15);}

/* Photo preview */
.photo-prev-wrap{display:none;margin-top:8px;}
.photo-prev-wrap img{width:100%;max-height:140px;object-fit:cover;border-radius:12px;border:2px solid #ddd;}

/* Sheet actions */
.sheet-actions{
  display:flex;gap:8px;margin-top:8px;
  position:sticky;bottom:0;
  background:#FFF9F9;
  padding-top:8px;padding-bottom:2px;
  z-index:1;
}
.btn-primary{
  flex:1;
  background:linear-gradient(135deg,#FF9AC1,#FFB347);
  border:2.5px solid #333;border-radius:14px;
  padding:12px;font-family:'Jua',sans-serif;font-size:16px;
  cursor:pointer;box-shadow:3px 3px 0 #333;color:#333;
  transition:transform 0.1s,box-shadow 0.1s;
}
.btn-primary:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #333;}
.btn-ghost{
  background:#F0F0F0;border:2.5px solid #ccc;border-radius:14px;
  padding:12px 14px;font-family:'Jua',sans-serif;font-size:16px;
  cursor:pointer;color:#666;transition:all 0.1s;
}
.btn-ghost:active{background:#E0E0E0;}
.btn-danger{
  background:#FFD6D6;border:2.5px solid #FF8888;border-radius:14px;
  padding:12px 14px;font-family:'Jua',sans-serif;font-size:16px;
  cursor:pointer;color:#CC4444;
}
.btn-danger:active{background:#FFBBBB;}

/* FAB */
.fab{
  position:fixed;
  bottom:max(82px, calc(env(safe-area-inset-bottom) + 74px));
  right:max(16px, calc(50% - 199px));
  width:52px;height:52px;border-radius:50%;
  background:linear-gradient(135deg,#FF9AC1,#FFB347);
  color:#fff;font-size:26px;line-height:50px;text-align:center;
  border:3px solid #333;
  box-shadow:3px 3px 0 #333;
  cursor:pointer;
  transition:transform 0.15s,box-shadow 0.15s;
  z-index:40;
  font-family:'Jua',sans-serif;
}
.fab:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #333;}

/* ── Photo picker (multi) ── */
.photo-pick-btn{
  display:flex;align-items:center;gap:10px;
  background:#FFF9F9;border:2.5px dashed #FFB0CC;border-radius:14px;
  padding:14px 16px;cursor:pointer;
  transition:background 0.15s,border-color 0.15s;
}
.photo-pick-btn:hover{background:#FFF0F5;border-color:#FF6B9D;}
.photo-pick-btn:active{transform:scale(0.98);}
.photo-pick-icon{font-size:26px;}
.photo-pick-text{font-family:'Jua',sans-serif;font-size:14px;color:#FF6B9D;}

/* selected thumbs in sheet */
.photo-thumb-grid{
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:6px;margin-top:10px;
}
.photo-thumb-wrap{position:relative;aspect-ratio:1;}
.photo-thumb-wrap img{
  width:100%;height:100%;object-fit:cover;
  border-radius:10px;border:2px solid #333;display:block;
}
.photo-thumb-del{
  position:absolute;top:-5px;right:-5px;
  background:#FF6B9D;color:#fff;border:2px solid #fff;
  border-radius:50%;width:20px;height:20px;font-size:11px;
  cursor:pointer;line-height:16px;text-align:center;
  font-family:'Jua',sans-serif;
}

/* ── Album card (list view) ── */
.album-card{
  background:#fff;border:2.5px solid #333;border-radius:18px;
  margin-bottom:14px;overflow:hidden;
  box-shadow:3px 3px 0 #333;
  animation:popIn 0.2s cubic-bezier(0.34,1.3,0.64,1);
}
.album-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px 8px;
}
.album-title{font-family:'Jua',sans-serif;font-size:15px;color:#333;overflow:hidden;word-break:break-all;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.album-meta{font-family:'Nanum Gothic',sans-serif;font-size:11px;color:#999;margin-top:1px;}
.album-actions{display:flex;gap:4px;}

/* photo strip: 1,2,3,4+ layouts */
.album-strip{
  display:grid;gap:2px;
  padding:0 2px 2px;
}
.album-strip.count-1{grid-template-columns:1fr;}
.album-strip.count-2{grid-template-columns:1fr 1fr;}
.album-strip.count-3{grid-template-columns:1fr 1fr 1fr;}
.album-strip.count-multi{
  grid-template-columns:1fr 1fr 1fr;
  grid-template-rows:auto auto;
}
.album-img{
  width:100%;aspect-ratio:1;object-fit:cover;display:block;
  border-radius:6px;cursor:pointer;
  transition:opacity 0.12s;
}
.album-img:active{opacity:0.85;}
.album-more{
  position:relative;
  aspect-ratio:1;
  border-radius:6px;overflow:hidden;cursor:pointer;
}
.album-more img{width:100%;height:100%;object-fit:cover;display:block;}
.album-more-overlay{
  position:absolute;inset:0;
  background:rgba(0,0,0,0.45);
  display:flex;align-items:center;justify-content:center;
  font-family:'Jua',sans-serif;font-size:20px;color:#fff;
  border-radius:6px;
}

/* ── Lightbox ── */
.lightbox{
  position:fixed;inset:0;background:rgba(0,0,0,0.88);
  z-index:9950;display:none;flex-direction:column;
  align-items:center;justify-content:center;
}
.lightbox.open{display:flex;}
.lightbox-img-wrap{
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  width:96vw;height:80dvh;
  cursor:grab;
  touch-action:none;
}
.lightbox-img-wrap:active{cursor:grabbing;}
.lightbox-img{
  max-width:96vw;max-height:80dvh;
  object-fit:contain;border-radius:12px;
  user-select:none;pointer-events:none;
  transform-origin:center center;
  transition:transform 0.2s ease,opacity 0.25s;
}
.lightbox-img.slide-left{
  animation:slideInLeft 0.25s cubic-bezier(0.25,0.46,0.45,0.94);
}
.lightbox-img.slide-right{
  animation:slideInRight 0.25s cubic-bezier(0.25,0.46,0.45,0.94);
}
@keyframes slideInLeft{
  from{transform:translateX(60px);opacity:0;}
  to{transform:translateX(0);opacity:1;}
}
@keyframes slideInRight{
  from{transform:translateX(-60px);opacity:0;}
  to{transform:translateX(0);opacity:1;}
}
.lightbox-close{
  position:absolute;top:16px;right:16px;
  background:rgba(255,255,255,0.2);color:#fff;
  border:none;border-radius:50%;width:36px;height:36px;
  font-size:20px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.lightbox-download{
  position:absolute;top:16px;right:60px;
  background:rgba(255,255,255,0.2);color:#fff;
  border:none;border-radius:50%;width:36px;height:36px;
  font-size:18px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  z-index:10;
}
.lightbox-nav{
  display:flex;gap:20px;margin-top:16px;
}
.lightbox-arr{
  background:rgba(255,255,255,0.2);color:#fff;
  border:none;border-radius:50%;width:40px;height:40px;
  font-size:20px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background 0.15s;
}
.lightbox-arr:hover{background:rgba(255,255,255,0.35);}
.lightbox-counter{
  color:rgba(255,255,255,0.7);font-family:'Jua',sans-serif;
  font-size:14px;align-self:center;
}





/* ── 캘린더 전체 높이 확장 ── */
.cal-fullpage {
  flex: 1;
  display: none;
  flex-direction: column;
  min-height: 0;
  padding: 10px 14px 14px;
  gap: 10px;
  overflow: hidden;
}
.cal-fullpage.active {
  display: flex;
}
.cal-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
/* cal-wrap-expand: .cal-wrap의 고정높이 해제하고 flex 자식으로 확장 */
.cal-wrap.cal-wrap-expand {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
  height: auto !important;
}
/* 일뷰 활성 시 day-view-wrap이 flex:1로 확장되도록 */
.cal-wrap.cal-wrap-expand .day-view-wrap.active {
  flex: 1 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
.cal-wrap.cal-wrap-expand .cal-month-bar { flex-shrink: 0; }
.cal-wrap.cal-wrap-expand .sel-banner    { flex-shrink: 0; }
.cal-wrap.cal-wrap-expand .cal-wds       { flex-shrink: 0; }
.cal-grid-wrap.cal-grid-expand {
  flex: 1 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ── 일정 팝업 ── */
.faded-day {
  opacity: 0.32;
  cursor: default;
  pointer-events: none;
}
.faded-day .day-bubble { color: #999 !important; }

.ev-popup-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.38);
  backdrop-filter: blur(3px);
  z-index: 9800;
  display: none;
  align-items: center;
  justify-content: center;
}
.ev-popup-overlay.open { display: flex; }
.ev-popup-box {
  background: #fff;
  border: 3px solid #333;
  border-radius: 24px;
  width: 290px;
  box-shadow: 5px 5px 0 #333;
  overflow: hidden;
  animation: popIn 0.2s cubic-bezier(0.34,1.4,0.64,1);
}
@keyframes popIn {
  from { transform: scale(0.8); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.ev-popup-color-bar { height: 8px; width: 100%; }
.ev-popup-body { padding: 16px 20px 14px; position: relative; }
.ev-popup-close {
  position: absolute; top: 12px; right: 14px;
  background: rgba(0,0,0,0.07); border: none;
  border-radius: 50%; width: 26px; height: 26px;
  font-size: 14px; cursor: pointer; color: #666;
  display: flex; align-items: center; justify-content: center;
}
.ev-popup-title {
  font-family: 'Jua', sans-serif;
  font-size: 18px; color: #333;
  margin-bottom: 6px; padding-right: 28px;
  word-break: break-word;
}
.ev-popup-date {
  font-family: 'Nanum Gothic', sans-serif;
  font-size: 13px; color: #888; margin-bottom: 4px; font-weight: 700;
}
.ev-popup-actions {
  display: flex; gap: 8px;
  padding: 0 16px 16px;
}
.ev-popup-edit {
  flex: 1; background: #FFD6E7;
  border: 2.5px solid #333; border-radius: 12px;
  padding: 10px; font-family: 'Jua', sans-serif;
  font-size: 14px; cursor: pointer; color: #333;
  box-shadow: 2px 2px 0 #333;
  transition: transform 0.1s, box-shadow 0.1s;
}
.ev-popup-edit:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 #333; }
.ev-popup-del {
  flex: 1; background: #FFE5E5;
  border: 2.5px solid #FF8888; border-radius: 12px;
  padding: 10px; font-family: 'Jua', sans-serif;
  font-size: 14px; cursor: pointer; color: #CC4444;
}
.ev-popup-del:active { transform: scale(0.97); }

/* ── 이모티콘 피커 ── */
.emoji-btn {
  background: #FFF9C4;
  border: 2px solid #333;
  border-radius: 10px;
  padding: 4px 10px;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 2px 2px 0 #333;
  transition: transform 0.1s;
  white-space: nowrap;
}
.emoji-btn:active { transform: scale(0.92); }
.emoji-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.emoji-picker {
  display: none;
  flex-wrap: wrap;
  gap: 4px;
  padding: 10px;
  background: #fff;
  border: 2.5px solid #333;
  border-radius: 16px;
  box-shadow: 3px 3px 0 #333;
  margin-bottom: 8px;
  max-height: 180px;
  overflow-y: auto;
}
.emoji-picker.open { display: flex; }
.emoji-tab-bar {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.emoji-tab {
  background: #f0f0f0;
  border: 1.5px solid #ccc;
  border-radius: 8px;
  padding: 3px 8px;
  font-size: 11px;
  cursor: pointer;
  font-family: 'Nanum Gothic', sans-serif;
  transition: background 0.1s;
}
.emoji-tab.active {
  background: #FFD6E7;
  border-color: #333;
  font-weight: 700;
}
.emoji-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
.emoji-item {
  font-size: 22px;
  cursor: pointer;
  padding: 3px 4px;
  border-radius: 8px;
  transition: background 0.1s;
  line-height: 1;
  user-select: none;
}
.emoji-item:hover { background: #FFD6E7; }
.emoji-item:active { transform: scale(0.85); }
.openmoji-item {
  display:flex;align-items:center;justify-content:center;
  padding:4px;transition:transform 0.15s;
}
.openmoji-img {
  width:32px;height:32px;
  display:block;pointer-events:none;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}

/* ── 시트 내 탭 ── */
.sheet-tabs{display:flex;gap:6px;margin-bottom:14px;border-bottom:2px solid #eee;padding-bottom:10px;}
.sheet-tab-btn{
  flex:1;padding:8px 4px;border:2px solid #ddd;border-radius:12px;
  background:#fff;font-family:'Jua',sans-serif;font-size:13px;color:#999;
  cursor:pointer;transition:all 0.15s;
}
.sheet-tab-btn.active{
  background:#FFB3C1;border-color:#333;color:#333;
  box-shadow:2px 2px 0 #333;
}
.sheet-tab-pane{display:none;}
.sheet-tab-pane.active{display:block;}
/* ── 반복 설정 ── */
.repeat-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:4px;}
.repeat-sub-row{display:none;gap:6px;flex-wrap:wrap;margin-top:6px;}
.repeat-sub-row.show{display:flex;}
.repeat-chip{
  padding:6px 12px;border:2px solid #ddd;border-radius:20px;
  background:#fff;font-family:'Jua',sans-serif;font-size:12px;color:#999;
  cursor:pointer;transition:all 0.15s;
}
.repeat-chip.active{background:#B8E0FF;border-color:#333;color:#333;box-shadow:2px 2px 0 #333;}
.lunar-badge{
  display:inline-block;padding:2px 7px;border-radius:10px;
  font-size:10px;font-family:'Jua',sans-serif;
  background:#FFF3CD;border:1px solid #FFB300;color:#7a6000;margin-left:4px;
}
.solar-badge{
  display:inline-block;padding:2px 7px;border-radius:10px;
  font-size:10px;font-family:'Jua',sans-serif;
  background:#E3F2FD;border:1px solid #64B5F6;color:#1565C0;margin-left:4px;
}
.ev-bar-repeat{font-size:9px;opacity:0.7;margin-left:2px;}
.notice-extra{font-size:12px;color:#666;margin-top:3px;font-family:'Nanum Gothic',sans-serif;padding-left:6px;border-left:2px solid #FFB3C1;line-height:1.4;}

/* ── 오늘 일정 알림 팝업 ── */

/* 공지 팝업 */
.notice-popup-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.45);
  z-index:9600;display:flex;align-items:center;justify-content:center;
  padding:20px;opacity:0;pointer-events:none;
  transition:opacity 0.25s;
}
.notice-popup-overlay.open{opacity:1;pointer-events:auto;}
.notice-popup-box{
  background:#fff;border-radius:24px;width:100%;max-width:360px;
  box-shadow:0 8px 32px rgba(0,0,0,0.18);
  overflow:hidden;animation:popIn 0.28s ease;
}
.notice-popup-header{
  background:linear-gradient(135deg,#FFB347,#FF9AC1);
  padding:18px 20px 14px;color:#fff;
  font-family:'Jua',sans-serif;
}
.notice-popup-header h3{margin:0;font-size:18px;letter-spacing:-0.3px;}
.notice-popup-header p{margin:4px 0 0;font-size:13px;opacity:0.9;}
.notice-popup-list{
  max-height:280px;overflow-y:auto;padding:12px 16px;
  display:flex;flex-direction:column;gap:8px;
}
.notice-popup-item{
  padding:12px 14px;border-radius:14px;
  background:#FFFAF0;border-left:4px solid #FFB347;
}
.notice-popup-item-text{
  font-family:'Nanum Gothic',sans-serif;font-size:14px;
  color:#333;line-height:1.5;
}
.notice-popup-item-pin{
  font-size:11px;color:#FFB300;font-family:'Nanum Gothic',sans-serif;
  margin-bottom:3px;
}
.notice-popup-footer{
  padding:12px 16px 16px;border-top:1px solid #f0f0f0;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.notice-popup-skip{
  display:flex;align-items:center;gap:6px;
  font-family:'Nanum Gothic',sans-serif;font-size:13px;color:#888;
  cursor:pointer;user-select:none;
}
.notice-popup-skip input{accent-color:#FFB347;width:16px;height:16px;cursor:pointer;}
.notice-popup-close-btn{
  background:linear-gradient(135deg,#FFB347,#FF9AC1);
  color:#fff;border:none;border-radius:20px;
  padding:8px 20px;font-family:'Jua',sans-serif;font-size:14px;
  cursor:pointer;box-shadow:0 2px 8px rgba(255,179,71,0.4);
}

/* ── 공지 상세 팝업 ── */
.notice-detail-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.45);
  z-index:9700;display:flex;align-items:center;justify-content:center;
  padding:20px;opacity:0;pointer-events:none;transition:opacity 0.25s;
}
.notice-detail-overlay.open{opacity:1;pointer-events:auto;}
.notice-detail-box{
  background:#fff;border-radius:24px;width:100%;max-width:400px;
  max-height:80vh;display:flex;flex-direction:column;
  box-shadow:0 8px 32px rgba(0,0,0,0.18);animation:popIn 0.28s ease;
}
.notice-detail-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px 10px;border-bottom:1.5px solid #f0f0f0;flex-shrink:0;
}
.notice-detail-close{
  background:none;border:none;font-size:22px;cursor:pointer;
  color:#555;padding:2px 6px;border-radius:8px;
}
.notice-detail-hdr-title{
  font-family:'Jua',sans-serif;font-size:16px;color:#333;
}
.notice-detail-body{
  overflow-y:auto;padding:18px 20px 30px;flex:1;
  display:flex;flex-direction:column;gap:10px;
}
.nd-title{
  font-family:'Jua',sans-serif;font-size:18px;color:#333;
  border-left:4px solid #FFB347;padding-left:10px;line-height:1.4;
}
.nd-text{
  font-family:'Nanum Gothic',sans-serif;font-size:14px;color:#444;
  line-height:1.7;white-space:pre-wrap;word-break:break-word;
}
.nd-imgs{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px;}
.nd-img{width:100px;height:100px;object-fit:cover;border-radius:12px;cursor:pointer;border:2px solid #eee;}

/* ── 사진첩 작성자 ── */
.album-author{color:#FF9AC1;font-weight:700;}

.today-popup-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.45);
  z-index:9500;display:flex;align-items:center;justify-content:center;
  padding:20px;opacity:0;pointer-events:none;
  transition:opacity 0.25s;
}
.today-popup-overlay.open{opacity:1;pointer-events:auto;}
.today-popup-box{
  background:#fff;border-radius:24px;width:100%;max-width:360px;
  box-shadow:0 8px 32px rgba(0,0,0,0.18);
  overflow:hidden;animation:popIn 0.28s ease;
}
.today-popup-header{
  background:linear-gradient(135deg,#FF9AC1,#FFB347);
  padding:18px 20px 14px;color:#fff;
  font-family:'Jua',sans-serif;
}
.today-popup-header h3{margin:0;font-size:18px;letter-spacing:-0.3px;}
.today-popup-header p{margin:4px 0 0;font-size:13px;opacity:0.9;}
.today-popup-list{
  max-height:260px;overflow-y:auto;padding:12px 16px;
  display:flex;flex-direction:column;gap:8px;
}
.today-popup-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:14px;
  background:#FFF5F8;border-left:4px solid #FF9AC1;
  cursor:pointer;transition:background 0.15s;
}
.today-popup-item:active{background:#FFE8F0;}
.today-popup-item-dot{
  width:10px;height:10px;border-radius:50%;flex-shrink:0;
}
.today-popup-item-text{
  font-family:'Nanum Gothic',sans-serif;font-size:14px;
  color:#333;flex:1;
}
.today-popup-item-time{
  font-size:11px;color:#999;white-space:nowrap;
}
.today-popup-footer{
  padding:12px 16px 16px;border-top:1px solid #f0f0f0;
  display:flex;align-items:center;justify-content:space-between;
  gap:8px;
}
.today-popup-skip{
  display:flex;align-items:center;gap:6px;
  font-family:'Nanum Gothic',sans-serif;font-size:13px;color:#888;
  cursor:pointer;user-select:none;
}
.today-popup-skip input{accent-color:#FF9AC1;width:16px;height:16px;cursor:pointer;}
.today-popup-close-btn{
  background:linear-gradient(135deg,#FF9AC1,#FFB347);
  color:#fff;border:none;border-radius:20px;
  padding:8px 20px;font-family:'Jua',sans-serif;font-size:14px;
  cursor:pointer;box-shadow:0 2px 8px rgba(255,154,193,0.4);
}

/* 음력 날짜 입력 */
.date-mode-row{display:flex;gap:6px;margin-bottom:8px;align-items:center;}
.date-mode-btn{
  padding:4px 12px;border-radius:20px;border:2px solid #ddd;
  background:#fff;font-family:'Nanum Gothic',sans-serif;font-size:12px;
  cursor:pointer;transition:all 0.15s;color:#888;
}
.date-mode-btn.active{background:#FFB3C1;border-color:#FF9AC1;color:#333;font-weight:700;}
.lunar-input-row{display:none;gap:8px;flex-direction:column;margin-top:4px;}
.lunar-input-row.show{display:flex;}
.lunar-date-group{display:flex;flex-direction:column;gap:4px;}
.lunar-date-label{font-family:'Nanum Gothic',sans-serif;font-size:12px;color:#888;font-weight:700;}
.lunar-date-selects{display:flex;gap:5px;}
.lunar-sel{
  flex:1;padding:8px 4px;border:2px solid #eee;border-radius:12px;
  font-family:'Nanum Gothic',sans-serif;font-size:13px;
  background:#fff;color:#333;cursor:pointer;
}
.lunar-sel:focus{outline:none;border-color:#FF9AC1;}
.lunar-convert-btn{
  padding:8px 12px;background:linear-gradient(135deg,#FF9AC1,#FFB347);
  color:#fff;border:none;border-radius:12px;font-family:'Jua',sans-serif;
  font-size:13px;cursor:pointer;white-space:nowrap;flex-shrink:0;
}
.lunar-result{
  font-family:'Nanum Gothic',sans-serif;font-size:12px;color:#888;
  margin-top:4px;min-height:16px;
}
.lunar-result.ok{color:#43A047;font-weight:700;}
.lunar-result.err{color:#E53935;}


/* 절기/잡절 표시 */
.jeolgi-day{
  font-size:7px;color:#2e7d32;font-weight:700;
  text-align:right;line-height:1;
  white-space:nowrap;overflow:hidden;max-width:62%;
}
.cal-day.is-today .jeolgi-day{color:rgba(180,255,180,0.95);}

/* 음력 날짜 표시 */
.lunar-day{
  font-size:7px;
  color:#888;
  font-weight:700;
  line-height:1;
  font-family:'Nanum Gothic',sans-serif;
  text-align:left;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  flex:1;min-width:0;max-width:100%;
  padding-left:2px;
}
.cal-day.is-today .lunar-day{ color:rgba(255,220,230,0.95); }

/* 공지/메모 서브 내용 아코디언 */
.k-item-subs{display:none;margin-top:6px;border-top:1px dashed #eee;padding-top:6px;}
.k-item.expanded .k-item-subs{display:block;}
.k-item-sub{font-size:12px;color:#666;line-height:1.5;padding:3px 0;word-break:break-word;border-left:2px solid #FFB3C1;padding-left:7px;margin-bottom:4px;}
.k-item-expand{font-size:10px;color:#FF9AC1;cursor:pointer;margin-top:3px;display:inline-block;font-family:'Jua',sans-serif;}
.k-item-expand:hover{color:#FF6B9D;}
.k-notice-title{font-weight:800;font-size:1.05em;color:#333;margin-bottom:4px;line-height:1.3;}
.k-notice-imgs{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.k-notice-img{width:80px;height:80px;object-fit:cover;border-radius:10px;cursor:pointer;border:2px solid #eee;transition:transform 0.15s;}
.k-notice-img:active{transform:scale(0.95);}
/* 메모 아코디언 */
.memo-cell-subs{display:none;margin-top:5px;border-top:1px dashed rgba(0,0,0,0.1);padding-top:5px;}
.memo-cell.expanded .memo-cell-subs{display:block;}
.memo-cell-sub{font-size:11px;color:#555;line-height:1.5;padding:2px 0;word-break:break-word;border-left:2px solid rgba(0,0,0,0.15);padding-left:6px;margin-bottom:3px;}
.memo-cell-expand{font-size:10px;color:#888;cursor:pointer;margin-top:3px;display:inline-block;font-family:'Jua',sans-serif;}
.memo-cell-expand:hover{color:#444;}

/* ── 앨범 댓글 ── */
.album-comments{padding:8px 14px 10px;border-top:1px solid #f0f0f0;}
.album-comment-list{margin-bottom:6px;}
.album-comment-item{
  display:flex;align-items:flex-start;gap:6px;
  padding:4px 0;border-bottom:1px solid #f8f8f8;
  font-family:'Nanum Gothic',sans-serif;font-size:12px;
}
.album-comment-item:last-child{border-bottom:none;}
.album-comment-name{font-weight:700;color:#FF6B9D;white-space:nowrap;flex-shrink:0;}
.album-comment-text{color:#444;flex:1;word-break:break-all;line-height:1.4;}
.album-comment-del{background:none;border:none;color:#ccc;font-size:11px;cursor:pointer;padding:0 2px;flex-shrink:0;}
.album-comment-del:hover{color:#FF4444;}
.album-comment-input-row{display:flex;gap:6px;align-items:center;}
.album-comment-input{
  flex:1;border:1.5px solid #eee;border-radius:20px;
  padding:6px 12px;font-family:'Nanum Gothic',sans-serif;font-size:12px;
  outline:none;background:#fafafa;
}
.album-comment-input:focus{border-color:#FF9AC1;background:#fff;}
.album-comment-btn{
  background:linear-gradient(135deg,#FF9AC1,#FFB347);
  color:#fff;border:none;border-radius:20px;
  padding:6px 12px;font-family:'Jua',sans-serif;font-size:12px;
  cursor:pointer;white-space:nowrap;flex-shrink:0;
}
.album-comment-btn:active{opacity:0.85;}
.album-comment-toggle{
  display:flex;align-items:center;gap:4px;
  font-family:'Nanum Gothic',sans-serif;font-size:11px;color:#aaa;
  cursor:pointer;padding:4px 0;background:none;border:none;
}
.album-comment-toggle:hover{color:#FF9AC1;}

/* ── Day 뷰 ── */
.cal-view-toggle{display:flex;gap:6px;align-items:center;}
.cal-view-btn{
  background:#fff;border:2px solid #ddd;border-radius:16px;
  padding:4px 12px;font-family:'Jua',sans-serif;font-size:12px;color:#aaa;
  cursor:pointer;transition:all 0.15s;
}
.cal-view-btn.active{background:#FF9AC1;border-color:#FF9AC1;color:#fff;box-shadow:2px 2px 0 #333;}
.cal-grid-wrap.hidden{display:none!important;}
.cal-wds.hidden{display:none!important;}
.cal-month-bar.hidden{display:none!important;}
/* 일뷰 팝업 */
.day-popup-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.45);
  z-index:800;display:none;align-items:flex-end;justify-content:center;
}
.day-popup-overlay.open{display:flex;}
.day-popup-box{
  background:#FFF9F0;border-radius:24px 24px 0 0;
  width:100%;max-width:480px;max-height:80vh;
  display:flex;flex-direction:column;
  padding-bottom:env(safe-area-inset-bottom,0px);
  position:relative;
  animation:slideUp 0.25s cubic-bezier(0.34,1.2,0.64,1);
}
@keyframes slideUp{from{transform:translateY(100%);}to{transform:translateY(0);}}
.day-popup-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 14px 8px;border-bottom:1.5px solid #eee;
  flex-shrink:0;
}
.day-popup-header-center{flex:1;text-align:center;}
.day-popup-close{
  background:#f0f0f0;border:none;border-radius:50%;
  width:28px;height:28px;font-size:13px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:#888;line-height:1;flex-shrink:0;
}
.day-popup-close:active{background:#ddd;}
.day-view-date-nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:6px 14px;background:#FFF9F0;border-bottom:1.5px solid #eee;
  flex-shrink:0;
}
.day-view-date-label{
  font-family:'Jua',sans-serif;font-size:15px;color:#333;text-align:center;flex:1;
}
.day-view-date-sub{
  font-family:'Nanum Gothic',sans-serif;font-size:11px;color:#aaa;text-align:center;
}
.day-view-list{flex:1;overflow-y:auto;padding:10px 14px;min-height:0;}
.day-ev-item{
  background:#fff;border:2px solid #eee;border-radius:14px;
  padding:10px 14px;margin-bottom:8px;
  display:flex;align-items:flex-start;gap:10px;
  box-shadow:2px 2px 0 rgba(0,0,0,0.05);
  cursor:pointer;transition:transform 0.1s;
  animation:popIn 0.18s cubic-bezier(0.34,1.3,0.64,1);
}
.day-ev-item:active{transform:scale(0.98);}
.day-ev-color{width:5px;border-radius:4px;flex-shrink:0;align-self:stretch;min-height:32px;}
.day-ev-body{flex:1;min-width:0;}
.day-ev-title{font-family:'Jua',sans-serif;font-size:14px;color:#333;}
.day-ev-time{font-family:'Nanum Gothic',sans-serif;font-size:11px;color:#333;font-weight:700;margin-top:3px;}
.day-ev-repeat{font-family:'Nanum Gothic',sans-serif;font-size:10px;color:#FF9AC1;margin-top:2px;}
.day-no-ev{
  text-align:center;padding:40px 20px;
  font-family:'Jua',sans-serif;font-size:14px;color:#ccc;
}
.day-today-badge{
  display:inline-block;background:#FF6B9D;color:#fff;
  font-size:9px;font-family:'Jua',sans-serif;
  border-radius:8px;padding:1px 6px;margin-left:6px;vertical-align:middle;
}
.day-holiday-badge{
  font-family:'Nanum Gothic',sans-serif;font-size:10px;
  color:#FF4444;font-weight:700;margin-top:2px;
}


/* ── 앨범 상세 팝업 ── */
.ad-header-actions{display:flex;gap:6px;align-items:center;}
.ad-act-btn{background:none;border:none;font-size:18px;cursor:pointer;padding:4px 6px;border-radius:8px;line-height:1;}
.ad-act-btn:hover{background:rgba(0,0,0,0.07);}
.ad-overlay{position:fixed;inset:0;background:#FFF9F9;z-index:350;display:none;flex-direction:column;}
.ad-overlay.open{display:flex;}
/* 키보드 올라올 때 입력창 가림 방지 */
.ad-overlay.keyboard-open{bottom:0;height:var(--vvp-height,100%);}
.ad-box{background:#FFF9F9;width:100%;height:100%;max-height:100%;display:flex;flex-direction:column;animation:none;overflow:hidden;}
.ad-handle{display:none;}
.ad-header{display:flex;align-items:flex-start;gap:8px;padding:max(14px,env(safe-area-inset-top)) 12px 10px;flex-shrink:0;border-bottom:1.5px solid #f0f0f0;background:#FFF9F9;max-height:30vh;overflow-y:auto;}
.ad-header-center{flex:1;text-align:center;}
.ad-title{font-family:'Jua',sans-serif;font-size:15px;color:#333;word-break:break-all;}
.ad-meta{font-family:'Nanum Gothic',sans-serif;font-size:11px;color:#aaa;margin-top:2px;}
.ad-close{background:none;border:none;font-size:24px;color:#555;cursor:pointer;line-height:1;padding:4px 8px 4px 0;font-family:'Jua',sans-serif;}
.ad-slider{position:relative;background:#000;flex-shrink:0;overflow:hidden;}
.ad-slides{display:flex;transition:transform 0.3s ease;will-change:transform;}
.ad-slide{flex-shrink:0;width:100%;display:flex;align-items:center;justify-content:center;max-height:60vh;}
.ad-slide img{width:100%;max-height:60vh;object-fit:contain;display:block;}
.ad-prev,.ad-next{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,0.45);border:none;border-radius:50%;width:34px;height:34px;color:#fff;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.ad-prev{left:8px;} .ad-next{right:8px;}
.ad-prev:disabled,.ad-next:disabled{opacity:0.15;pointer-events:none;}
.ad-counter{position:absolute;bottom:8px;right:10px;font-family:'Jua',sans-serif;font-size:11px;color:#fff;background:rgba(0,0,0,0.45);border-radius:10px;padding:2px 8px;}
.ad-dots{display:flex;justify-content:center;gap:5px;padding:7px 0 3px;flex-shrink:0;}
.ad-dot{width:7px;height:7px;border-radius:50%;background:#ddd;cursor:pointer;transition:background 0.2s;}
.ad-dot.on{background:#FF9AC1;}
.ad-comments{overflow-y:auto;padding:10px 14px 4px;border-top:1.5px solid #f0f0f0;flex:1;min-height:60px;}
.ad-cmt{display:flex;align-items:flex-start;gap:7px;padding:6px 0;border-bottom:1px solid #f5f5f5;font-family:'Nanum Gothic',sans-serif;font-size:13px;}
.ad-cmt:last-child{border-bottom:none;}
.ad-cmt-name{font-weight:700;color:#FF6B9D;white-space:nowrap;flex-shrink:0;}
.ad-cmt-text{color:#333;flex:1;word-break:break-all;line-height:1.5;}
.ad-cmt-del{background:none;border:none;color:#ccc;font-size:12px;cursor:pointer;flex-shrink:0;padding:0 2px;}
.ad-cmt-del:hover{color:#FF4444;}
.ad-no-cmt{text-align:center;padding:18px;font-family:'Jua',sans-serif;font-size:13px;color:#ccc;}
.ad-input-row{display:flex;gap:7px;padding:8px 14px max(12px,env(safe-area-inset-bottom));border-top:1.5px solid #f0f0f0;flex-shrink:0;background:#fff;align-items:flex-end;}
.ad-textarea{flex:1;min-width:0;border:1.5px solid #eee;border-radius:14px;padding:8px 10px;font-family:'Nanum Gothic',sans-serif;font-size:12px;outline:none;background:#fafafa;resize:none;overflow-y:hidden;min-height:36px;max-height:120px;line-height:1.5;}
.ad-textarea:focus{border-color:#FF9AC1;background:#fff;}
.chat-textarea{flex:1;min-width:0;border:1.5px solid #eee;border-radius:20px;padding:8px 12px;font-family:'Nanum Gothic',sans-serif;font-size:13px;outline:none;background:#fafafa;resize:none;overflow-y:hidden;height:auto;min-height:38px;max-height:120px;line-height:1.5;}
.chat-textarea:focus{border-color:#FF9AC1;background:#fff;}
.ad-submit{background:linear-gradient(135deg,#FF9AC1,#FFB347);color:#fff;border:2px solid #333;border-radius:20px;padding:8px 12px;font-family:'Jua',sans-serif;font-size:13px;cursor:pointer;white-space:nowrap;box-shadow:2px 2px 0 #333;flex-shrink:0;}


/* ════════════════════════════
   채팅
════════════════════════════ */
.home-card.chat-home{
  grid-column:1/3;background:#98D8C8;
  min-height:56px;padding:10px 14px;
  flex-direction:row;align-items:center;
}
#page-chat{display:none;flex-direction:column;}
#page-chat.active{display:flex;}
#page-chat .page-inner{
  flex:1;display:flex;flex-direction:column;overflow:hidden;padding-bottom:0;
}
.chat-msg-list{
  flex:1;overflow-y:auto;padding:10px 14px 6px;
  display:flex;flex-direction:column;gap:10px;
}
.chat-date-divider{
  text-align:center;font-family:'Nanum Gothic',sans-serif;
  font-size:11px;color:#333;font-weight:700;
  display:flex;align-items:center;gap:6px;margin:6px 0;
}
.chat-date-divider::before,.chat-date-divider::after{content:'';flex:1;height:1.5px;background:#999;}
.chat-msg-group{display:flex;gap:8px;align-items:flex-start;}
.chat-msg-group.mine{flex-direction:row-reverse;}
.chat-avatar{
  width:32px;height:32px;border-radius:50%;
  border:2px solid #333;background:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;flex-shrink:0;box-shadow:1px 1px 0 #333;
}
.chat-msg-col{display:flex;flex-direction:column;gap:4px;max-width:210px;}
.chat-msg-group.mine .chat-msg-col{align-items:flex-end;}
.chat-sender{
  font-weight:700;color:#FF6B9D;
  font-family:'Nanum Gothic',sans-serif;font-size:11px;
  padding-left:2px;
}
.chat-msg-group.mine .chat-sender{padding-right:2px;padding-left:0;}
.chat-bubble{
  background:#fff;border:2px solid #333;
  border-radius:16px 16px 16px 4px;
  padding:7px 11px;font-family:'Nanum Gothic',sans-serif;
  font-size:12px;color:#333;line-height:1.5;
  box-shadow:2px 2px 0 #333;word-break:break-word;
  cursor:pointer;
}
.chat-msg-group.mine .chat-bubble{
  background:#FFB3C1;border-radius:16px 16px 4px 16px;
}
.chat-ts{font-family:'Nanum Gothic',sans-serif;font-size:10px;color:#333;padding:0 3px;font-weight:600;margin-top:3px;}
.chat-del-btn{
  background:none;border:none;color:#ddd;font-size:11px;
  cursor:pointer;padding:2px 4px;align-self:center;
}
.chat-del-btn:hover{color:#FF6B9D;}
/* 스와이프 답장 */
.chat-msg-group{position:relative;transition:transform 0.15s ease;}
.chat-msg-group.swipe-hint{transform:translateX(48px);}
.chat-reply-indicator{
  position:absolute;left:-44px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;border-radius:50%;
  background:#FF9AC1;border:2px solid #333;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;opacity:0;transition:opacity 0.15s;
  pointer-events:none;
}
.chat-msg-group.swipe-hint .chat-reply-indicator{opacity:1;}
/* 답장 미리보기 박스 */
.chat-reply-preview{
  display:none;
  background:#FFF0F6;border:2px solid #FF9AC1;border-radius:12px;
  padding:8px 12px;margin:6px 12px 0;
  font-family:'Nanum Gothic',sans-serif;font-size:11px;color:#666;
  position:relative;
}
.chat-reply-preview.show{display:flex;align-items:center;gap:8px;}
.chat-reply-preview-bar{
  width:3px;border-radius:2px;background:#FF9AC1;
  flex-shrink:0;align-self:stretch;min-height:20px;
}
.chat-reply-preview-text{flex:1;min-width:0;}
.chat-reply-preview-name{font-weight:700;color:#FF6B9D;margin-bottom:2px;}
.chat-reply-preview-body{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px;}
.chat-reply-preview-close{
  background:none;border:none;color:#aaa;font-size:16px;
  cursor:pointer;padding:0 4px;flex-shrink:0;
}
/* 메시지 안 인용 블록 */
.chat-reply-quote{
  background:rgba(0,0,0,0.06);border-radius:8px;
  padding:5px 8px;margin-bottom:5px;
  border-left:3px solid #FF9AC1;
  font-size:11px;color:#666;
}
.chat-reply-quote-name{font-weight:700;color:#FF6B9D;margin-bottom:1px;}
.chat-reply-quote-body{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px;}
.chat-input-area{
  border-top:2px solid #333;
  background:rgba(255,255,255,0.95);
  flex-shrink:0;
}
.chat-input-row{
  display:flex;gap:7px;
  padding:8px 12px;
  padding-bottom:max(14px,env(safe-area-inset-bottom));
  align-items:center;
  border-top:1.5px solid #f0f0f0;
  flex-wrap:nowrap;
  overflow:visible;
}
.chat-name-badge{
  font-weight:700;color:#FF6B9D;
  font-family:'Nanum Gothic',sans-serif;font-size:13px;
  background:none;border:none;cursor:pointer;
  white-space:nowrap;flex-shrink:0;padding:0 2px;
}
.inline-emoji{
  width:20px;height:20px;vertical-align:middle;
  display:inline-block;margin:0 1px;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,0.1));
}
.emoji-tap{
  display:inline;
  font-size:1.2em;
  cursor:pointer;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}
.emoji-zoom-btn{
  -webkit-tap-highlight-color:rgba(0,0,0,0.1);
  touch-action:manipulation;
}
.inline-gif{
  width:32px;height:32px;
}
.noto-gif{
  width:36px;height:36px;
}
.chat-empty{
  text-align:center;padding:40px 20px;
  font-family:'Jua',sans-serif;font-size:14px;color:#ccc;
}

/* Bottom Nav override */
.bottom-nav{grid-template-columns:repeat(5,1fr);}
.nav-icon-wrap{width:32px;height:32px;font-size:16px;border-radius:9px;}
.nav-label{font-size:9px;margin-top:2px;}
