/* ===================================================
   공통 & 구조 초기화
   =================================================== */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body {
  font-family: 'Pretendard', sans-serif;
  /* background 속성 하나로 통합하고 !important로 강제 적용 */
  background: url('img2/dashboard.png') center/cover fixed no-repeat !important;
  color: #222;
  min-height: 100vh;
}

a {
  text-decoration: none;
  color: inherit;
}

/* ===================================================
   [NEW] 대문 (소개 화면 / 랜딩 페이지) 스타일
   =================================================== */
.container { width: 1400px; max-width: calc(100% - 40px); margin: 0 auto; }
.bg-circle { position: absolute; border-radius: 999px; filter: blur(90px); z-index: -1; }
.bg1 { width: 300px; height: 300px; background: rgba(120, 92, 255, 0.15); top: 100px; left: -100px; }
.bg2 { width: 400px; height: 400px; background: rgba(150, 110, 255, 0.12); bottom: 0; right: -150px; }

#introSection header { padding-top: 24px; }
.nav { height: 78px; background: rgba(255,255,255,0.8); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.5); border-radius: 24px; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; box-shadow: 0 10px 30px rgba(0,0,0,0.03); }
#introSection .logo { font-size: 42px; font-weight: 800; }
#introSection .logo span { color: #735cff; }
.nav-menu { display: flex; gap: 42px; font-weight: 600; color: #444; }
.nav-right { display: flex; gap: 12px; }

.btn { height: 46px; padding: 0 24px; border-radius: 14px; border: none; font-weight: 700; font-size: 15px; cursor: pointer; transition: 0.2s; }
.btn:hover { transform: translateY(-2px); }
.btn-outline { background: white; border: 1px solid #ddd; }
.btn-primary { background: linear-gradient(135deg, #7a5cff, #5d7cff); color: white; box-shadow: 0 10px 25px rgba(114, 92, 255, 0.3); }

.hero { padding: 90px 0 120px; position: relative; }
.hero-wrap { display: flex; align-items: center; justify-content: space-between; gap: 70px; }
.hero-left { width: 46%; }
.hero-right { width: 54%; }
.hero-title { font-size: 72px; line-height: 1.15; font-weight: 800; letter-spacing: -2px; margin-bottom: 28px; }
.hero-title span { color: #735cff; }
.hero-desc { font-size: 22px; line-height: 1.7; color: #666; margin-bottom: 42px; }
.hero-buttons { display: flex; gap: 18px; }
.hero-card { background: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.5); backdrop-filter: blur(12px); border-radius: 32px; padding: 24px; box-shadow: 0 30px 60px rgba(0,0,0,0.05), inset 0 1px 1px rgba(255,255,255,0.6); transform: perspective(1200px) rotateY(-6deg) rotateX(3deg); }
.hero-card img { width: 100%; border-radius: 20px; display: block; }

.features { padding-bottom: 120px; }
.section-title { text-align: center; font-size: 52px; font-weight: 800; margin-bottom: 18px; letter-spacing: -1px; }
.section-title span { color: #735cff; }
.section-desc { text-align: center; color: #777; font-size: 18px; margin-bottom: 60px; }
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.feature-card { background: rgba(255,255,255,0.75); border-radius: 28px; padding: 34px; border: 1px solid rgba(255,255,255,0.6); box-shadow: 0 15px 35px rgba(0,0,0,0.04); transition: 0.25s; }
.feature-card:hover { transform: translateY(-8px); }
.feature-icon { width: 64px; height: 64px; border-radius: 18px; background: linear-gradient(135deg, #7b61ff, #5b7cff); display: flex; align-items: center; justify-content: center; font-size: 28px; color: white; margin-bottom: 24px; }
.feature-title { font-size: 24px; font-weight: 700; margin-bottom: 14px; }
.feature-text { color: #666; line-height: 1.7; font-size: 16px; }

.cta { padding-bottom: 120px; }
.cta-box { background: linear-gradient(135deg, #6b5cff, #6a7dff); border-radius: 36px; padding: 60px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 25px 50px rgba(109, 92, 255, 0.25); }
.cta-title { color: white; font-size: 42px; font-weight: 800; margin-bottom: 14px; }
.cta-text { color: rgba(255,255,255,0.85); font-size: 18px; }
.cta .btn { background: white; color: #5e60ff; font-size: 17px; height: 58px; padding: 0 34px; }

/* ===================================================
   [EXISTING] 메인 앱 대시보드 디자인 구조
   =================================================== */
.app-container-wrapper { padding: 0; width: 100%; min-height: 100vh; overflow-x: hidden; }
.app { width: 100%; max-width: none; margin: 0; background: #f8f9fa; border-radius: 0; padding: 0; display: flex; gap: 0; box-shadow: none; min-height: 100vh; }

.sidebar{ width:230px; display:flex; flex-direction:column; gap:20px; }
.sidebar .logo{ padding:4px 4px 0px; }
.sidebar .logo h1{ font-size:42px; font-weight:900; letter-spacing:-2px; }
.sidebar .logo span{ color:#7a69ff; }

.menu{ display:flex; flex-direction:column; gap:10px; }
.menu button{ border:none; background:transparent; padding:16px; border-radius:18px; font-size:17px; font-weight:800; text-align:left; color:#666; cursor:pointer; transition:.2s; display:flex; align-items:center; gap:12px; }
.menu button:hover{ background:#efecff; color:#7a69ff; }
.stats-menu-wrapper { width: 100%; display: flex; flex-direction: column; }
#statsSubMenu button, #bossSubMenu button, #adminSubMenu button { width: 100%; text-align: left; border: none; border-radius: 14px; cursor: pointer; transition: all 0.15s ease; background: transparent !important; }
#statsSubMenu button:hover, #bossSubMenu button:hover, #adminSubMenu button:hover { background: #efecff !important; color: #7a69ff !important; }
#statsSubMenu button.active, #bossSubMenu button.active, #adminSubMenu button.active { background: #ece8ff !important; color: #7a69ff !important; font-weight: 800; }
.menu .active{ background:#ece8ff; color:#7a69ff; }

.main{ flex:1; display:flex; flex-direction:column; gap:24px; }
.top{ background:white; border-radius:28px; padding:26px 30px; box-shadow:0 4px 20px rgba(0,0,0,0.04); display:flex; align-items:center; }
.top-progress{ flex:1; display:flex; align-items:center; justify-content:space-between; gap:15px; }
.progress-card{ display:flex; align-items:center; gap:20px; }
.circle-wrap{ position:relative; width:102px; height:102px; }
.progress-ring{ transform:rotate(-90deg); width:102px; height:102px; }
.progress-ring circle{ fill:none; stroke-width:9; }
.progress-ring .bg{ stroke:#ececff; }
.progress-ring .progress{ stroke-linecap:round; stroke-dasharray:276; transition:.35s; }
.daily-progress{ stroke:#6e7cff; }
.weekly-progress{ stroke:#9b70ff; }
.monthly-progress{ stroke:#ffb730; }
.farm-progress{ stroke:#4fc98b; }
.boss-progress{ stroke:#ff6f91; }
.circle-text{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:900; }
.progress-info h3{ font-size:24px; font-weight:900; margin-bottom:4px; }
.progress-info p{ font-size:16px; font-weight:700; color:#777; }

.calendar-date{ width:100%; border-radius:24px; overflow:hidden; box-shadow:0 8px 20px rgba(0,0,0,0.08); background:white; }
.calendar-top{ background:#7a69ff; color:white; text-align:center; padding:14px 10px; font-size:16px; font-weight:800; letter-spacing:-0.5px; }
.calendar-body{ padding:20px 10px; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.calendar-day{ font-size:32px; font-weight:900; line-height:1; color:#111; letter-spacing:0.5px; }
.calendar-day .ampm-text { font-size: 18px; font-weight: 800; color: #666; margin-right: 4px; }

.grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px; }
.card{ background:white; border-radius:26px; padding:22px; box-shadow:0 4px 20px rgba(0,0,0,0.04); }
.card-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.card-title{ display:flex; align-items:center; gap:12px; }
.card-icon{ width:42px; height:42px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:18px; color:white; }
.daily-icon{ background:#6e7cff; }
.weekly-icon{ background:#9b70ff; }
.monthly-icon{ background:#ffb730; }
.card-header h2{ font-size:28px; font-weight:900; }
.add-btn{ border:none; background:#7a69ff; color:white; width:40px; height:40px; border-radius:12px; font-size:15px; cursor:pointer; transition:.2s; }
.add-btn:hover{ transform:scale(1.08); }

.todo-list{ display:flex; flex-direction:column; gap:10px; }
.todo{ background:#f7f7fc; border-radius:18px; padding:15px; display:flex; align-items:center; justify-content:space-between; transition:.2s; cursor:pointer; border:2px solid transparent; }
.todo:hover{ transform:translateY(-2px); }
.todo-left{ display:flex; align-items:center; gap:12px; }
.todo-left input{ width:18px; height:18px; pointer-events:none; }
.todo-left span{ font-size:16px; font-weight:700; }
.todo-buttons{ display:flex; gap:8px; }
.icon-btn{ border:none; width:32px; height:32px; border-radius:10px; cursor:pointer; transition:.2s; font-size:13px; }
.edit{ background:#ece8ff; color:#7a69ff; }
.delete{ background:#ffeaea; color:#ff5c5c; }
.icon-btn:hover{ transform:scale(1.08); }
.todo.checked{ background:#e7f8ec; }
.todo.checked span{ text-decoration:line-through; color:#6e9b79; opacity:0.8; }
.todo.event{ background:#fff8dc; border-color:#ffe28a; }
.todo.event.checked{ background:#ffd54d; border-color:#ffbf00; }
.todo.event.checked span{ color:#6d5200; }

.farm-container { display: none; flex-direction: column; gap: 24px; }
.farm-dashboard { display: flex; gap: 20px; width: 100%; }
.farm-chart-box { flex: 7; background: white; border-radius: 28px; padding: 24px; box-shadow: 0 4px 20px rgba(0,0,0,0.04); }
.farm-chart-box h3 { font-size: 20px; font-weight: 800; margin-bottom: 12px; color: #333; }
.farm-chart-box canvas { width: 100%; height: 220px; background: #fdfdfd; border-radius: 16px; }
.farm-summary-box { flex: 3; background: white; border-radius: 28px; padding: 24px; box-shadow: 0 4px 20px rgba(0,0,0,0.04); display: flex; flex-direction: column; justify-content: space-between; gap: 12px; }
.summary-card { background: #f8f9fe; border-radius: 16px; padding: 16px; display: flex; flex-direction: column; justify-content: center; }
.summary-card .label { font-size: 14px; font-weight: 700; color: #777; margin-bottom: 4px; }
.summary-card .value { font-size: 20px; font-weight: 900; color: #222; }
.summary-card .value span { color: #7a69ff; }

.farm-stats-banner { display: flex; gap: 20px; width: 100%; }
.farm-stat-card { flex: 1; background: white; border-radius: 24px; padding: 22px 18px; box-shadow: 0 4px 20px rgba(0,0,0,0.04); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; transition: .2s; }
.farm-stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.06); }
.farm-stat-title { font-size: 14px; font-weight: 800; color: #888; margin-bottom: 10px; }
.farm-stat-value { font-size: 17px; font-weight: 900; color: #333; line-height: 1.4; }
.farm-stat-value span.highlight { color: #7a69ff; }

.farm-list-box { background: white; border-radius: 28px; padding: 26px; box-shadow: 0 4px 20px rgba(0,0,0,0.04); }
.farm-list-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.farm-list-header h2 { font-size: 26px; font-weight: 900; }
.account-control-panel { display: flex; align-items: center; gap: 10px; }
.account-tabs-wrapper { display: flex; gap: 6px; background: #f1f2f8; padding: 5px; border-radius: 14px; }
.account-tab-btn { border: none; background: transparent; padding: 8px 18px; font-size: 14px; font-weight: 800; color: #555; border-radius: 10px; cursor: pointer; transition: .15s; }
.account-tab-btn:hover { background: rgba(255,255,255,0.5); }
.account-tab-btn.active { background: white; color: #7a69ff; box-shadow: 0 3px 10px rgba(0,0,0,0.06); }
.account-action-btn { border: none; padding: 9px 15px; font-size: 14px; font-weight: 800; color: white; border-radius: 12px; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: .2s; }
.account-action-btn:hover { transform: scale(1.04); }
.account-action-btn.btn-add { background: #4fc98b; }
.account-action-btn.btn-delete { background: #ff5c5c; }

.select-box-styled { padding: 10px 36px 10px 16px; font-size: 15px; font-family: 'Pretendard'; font-weight: 700; border: 1px solid #dcdfe6; border-radius: 12px; outline: none; background: #f8f9fe url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 12px center; background-size: 14px; color: #333; cursor: pointer; transition: .15s; appearance: none; }
.select-box-styled:focus { border-color: #7a69ff; box-shadow: 0 0 0 3px rgba(122,105,255,0.15); background-color: #fff; }

.farm-table-wrapper { max-height: none; overflow: visible; }
.farm-row { display: grid; grid-template-columns: 80px 100px 140px 130px 140px 220px 1fr; align-items: center; background: #f7f7fc; border-radius: 12px; margin-bottom: 8px; transition: .2s; border: 1px solid #eef0f9; }
.farm-row:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,0.03); }
.farm-row.checked { background: #e7f8ec !important; border-color: #c3ebd0; }
.farm-cell { font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 10px 4px; height: 100%; border-right: 1px solid #eef0f9; }
.farm-cell:last-child { border-right: none; }
.farm-cell.date { color: #444; }
.farm-cell input[type="checkbox"] { width: 19px; height: 19px; cursor: pointer; accent-color: #4fc98b; }
.farm-cell input.farm-input { width: 70px; border: 1px solid #dcdfe6; background: white; padding: 6px 8px; border-radius: 8px; font-family: 'Pretendard'; font-size: 14px; font-weight: 700; text-align: center; outline: none; transition: .15s; }
.farm-cell.meso-input-cell input.farm-input { width: 120px; }
.farm-cell input.farm-input:focus { border-color: #7a69ff; background: #fff; }
.farm-cell .unit { font-size: 12px; color: #777; margin-left: 5px; font-weight: 600; }
.total-meso-text { font-weight: 800; color: #333; }

.boss-container { display: none; flex-direction: column; gap: 24px; }
.boss-top-chart-box { width: 100%; background: white; border-radius: 28px; padding: 24px; box-shadow: 0 4px 20px rgba(0,0,0,0.04); }
.boss-top-chart-box h3 { font-size: 20px; font-weight: 800; margin-bottom: 12px; color: #333; }
.boss-top-chart-box canvas { width: 100%; height: 200px; background: #fdfdfd; border-radius: 16px; }
.boss-dashboard { display: flex; gap: 24px; width: 100%; }
.boss-chart-box { flex: 6; background: white; border-radius: 28px; padding: 30px; box-shadow: 0 4px 24px rgba(0,0,0,0.03); display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }
.boss-chart-wrapper { position: relative; width: 180px; height: 180px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.boss-chart-svg { transform: rotate(-90deg); width: 180px; height: 180px; }
.boss-chart-svg circle { fill: none; stroke-width: 22; }
.boss-chart-svg .bg { stroke: #f0f1f7; }
.boss-chart-svg .progress { stroke: #7a69ff; stroke-dasharray: 496; stroke-dashoffset: 496; transition: stroke-dashoffset 0.4s ease; stroke-linecap: round; }
.boss-chart-center-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.boss-chart-center-text .percent { font-size: 44px; font-weight: 900; color: #111; line-height: 1; }
.boss-chart-center-text .label { font-size: 14px; font-weight: 800; color: #444; margin-top: 6px; }
.boss-chart-legend { display: flex; gap: 20px; font-size: 13px; font-weight: 700; }
.legend-item { display: flex; align-items: center; gap: 6px; }
.legend-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.legend-dot.done { background: #7a69ff; }
.legend-dot.todo { background: #e2e4f0; }

.boss-summary-box { flex: 4; display: flex; flex-direction: column; gap: 14px; }
.boss-summary-card { background: white; border-radius: 20px; padding: 24px 30px; box-shadow: 0 4px 24px rgba(0,0,0,0.03); display: flex; align-items: center; justify-content: space-between; }
.boss-card-left { display: flex; align-items: center; gap: 16px; }
.boss-card-icon-wrap { width: 48px; height: 48px; border-radius: 14px; background: #f8f9fe; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.boss-card-info .title { font-size: 16px; font-weight: 800; color: #222; }
.boss-card-info .sub-title { font-size: 12px; font-weight: 700; color: #888; margin-top: 2px; }
.boss-card-right { display: flex; align-items: center; gap: 10px; }
.boss-card-value { font-size: 18px; font-weight: 900; color: #111; letter-spacing: -0.5px; text-align: right; }
.boss-gold-icon { width: 28px; height: 28px; background: #ffb730; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 14px; font-weight: 900; box-shadow: 0 2px 6px rgba(255,183,48,0.4); }
.boss-blue-icon { width: 24px; height: 28px; background: #3a86ff; clip-path: polygon(50% 0%, 100% 35%, 50% 100%, 0% 35%); box-shadow: 0 2px 6px rgba(58,134,255,0.4); }

.boss-content-box { background: white; border-radius: 28px; padding: 30px; box-shadow: 0 4px 24px rgba(0,0,0,0.03); }
.boss-content-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 20px; border-bottom: 1px solid #eaecf5; margin-bottom: 80px; }
.boss-content-header h2 { font-size: 22px; font-weight: 900; }
.boss-btn-group { display: flex; gap: 8px; }

.character-boss-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.char-boss-card { background: #f8f9fe; border: 1px solid #eef0f6; border-radius: 24px; padding: 18px; position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 340px; box-shadow: 0 4px 14px rgba(0,0,0,0.01); }
.char-boss-card.horizontal { flex-direction: row; min-height: 240px; height: auto; align-items: center; padding: 20px 40px; gap: 30px; }
.char-boss-card.horizontal .char-main-info { width: 160px !important; min-width: 160px !important; max-width: 160px !important; margin: 0 !important; border-right: 2px solid #eaecf5; padding-right: 12px !important; padding-left: 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; box-sizing: border-box !important; }
.char-boss-card.horizontal .char-avatar-box { width: 130px !important; height: 130px !important; margin-bottom: 10px !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: visible !important; }
.char-boss-card.horizontal .char-avatar-box img { max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; transform: scale(2.2) translateY(-2px) !important; filter: drop-shadow(0 6px 12px rgba(0,0,0,0.08)) !important; }
.char-name { font-size: 18px; font-weight: 900; color: #111; }
.char-boss-card.horizontal .char-name { font-size: 15px !important; white-space: nowrap !important; width: 100% !important; }
.char-level { font-size: 13px; font-weight: 700; color: #666; margin-top: 3px; background: #eef0f8; padding: 3px 10px; border-radius: 20px; }
.char-boss-card.horizontal .char-level { font-size: 11px !important; padding: 2px 6px !important; white-space: nowrap !important; margin-top: 2px !important; }
.char-mini-boss-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; max-height: calc((100% / 3 * 4) + 32px); gap: 8px; margin-top: 10px; margin-bottom: 16px; }
.char-boss-card.horizontal .char-mini-boss-grid { flex: 1 !important; display: grid !important; grid-template-columns: repeat(6, minmax(72px, 1fr)) !important; grid-template-rows: repeat(2, 1fr) !important; gap: 10px !important; margin: 0 30px !important; max-width: none !important; width: 100% !important; }

.mini-boss-slot { aspect-ratio: 1; border-radius: 12px; background: #fff; border: 1px solid #e2e5f0; cursor: pointer; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; transition: 0.2s ease; filter: grayscale(100%) opacity(0.4); }
.char-boss-card.horizontal .mini-boss-slot { aspect-ratio: 1; width: 100% !important; height: auto !important; min-width: 65px !important; min-height: 65px !important; }
.mini-boss-slot.checked { filter: none !important; background: white; border-color: #7a69ff; box-shadow: 0 4px 12px rgba(122,105,255,0.12); }
.mini-boss-slot img.boss-thumb { width: 100%; height: 100%; object-fit: contain; transform: scale(1.15); position: absolute; inset: 0; }
.mini-boss-slot .diff-label { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; font-size: 9px; font-weight: 900; color: white; padding: 2px 0; letter-spacing: -0.5px; text-transform: uppercase; z-index: 2; }

.diff-easy { background: rgba(85, 187, 85, 0.9); }
.diff-normal { background: rgba(58, 134, 255, 0.9); }
.diff-hard { background: rgba(255, 92, 92, 0.9); }
.diff-chaos { background: rgba(155, 112, 255, 0.9); }
.diff-extreme { background: rgba(224, 49, 119, 0.9); }

.mini-boss-slot .check-overlay { position: absolute; top: 3px; right: 3px; width: 14px; height: 14px; background: #7a69ff; color: white; border-radius: 50%; font-size: 8px; display: none; align-items: center; justify-content: center; z-index: 3; }
.mini-boss-slot.checked .check-overlay { display: flex; }

.char-value-box { border-top: 1px dashed #e2e4f0; padding-top: 14px; text-align: center; }
.char-boss-card.horizontal .char-value-box { width: 300px !important; border-top: none !important; border-left: 2px solid #eaecf5 !important; padding: 10px 0 10px 30px !important; text-align: right !important; display: flex !important; flex-direction: column !important; justify-content: center !important; margin-left: auto !important; }
.char-boss-card.horizontal .char-value-amount { justify-content: flex-end !important; }
.char-value-box .lbl { font-size: 12px; font-weight: 700; color: #888; }
.char-boss-card.horizontal .char-value-box .lbl { font-size: 14px; color: #444; font-weight: 800; margin-bottom: 8px; }
.char-value-amount { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 5px; font-size: 15px; font-weight: 900; color: #222; }
.char-boss-card.horizontal .char-value-amount { font-size: 22px; font-weight: 900; color: #111; display: flex; align-items: center; justify-content: flex-start; gap: 6px; background: transparent !important; padding: 0 !important; border: none !important; box-shadow: none !important; white-space: nowrap; }
.char-boss-card.horizontal .char-value-amount span { color: #111111 !important; }
.char-value-amount .gold-icon-small { color: #ffb730; font-size: 14px; }
.char-boss-card.horizontal .gold-icon-small { font-size: 18px; color: #ffb730; }

.view-mode-toggle { display: flex; background: #f1f2f8; padding: 4px; border-radius: 12px; margin-right: 10px; }
.view-btn { border: none; background: transparent; padding: 6px 12px; font-size: 13px; font-weight: 800; border-radius: 8px; cursor: pointer; color: #888; }
.view-btn.active { background: white; color: #7a69ff; box-shadow: 0 2px 6px rgba(0,0,0,0.1); }

.char-top-actions { position: absolute; top: 16px; left: 16px; right: 16px; display: flex; justify-content: space-between; align-items: center; z-index: 5; }
.char-edit-trigger { border: none; background: white; color: #7a69ff; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 10px rgba(0,0,0,0.08); cursor: pointer; transition: .2s; }
.char-edit-trigger:hover { transform: scale(1.1); background: #ece8ff; }
.char-main-info { display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: 10px; margin-bottom: 14px; }
.char-avatar-box { width: 180px; height: 150px; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; overflow: visible; }
.char-avatar-box img { max-width: 100%; max-height: 100%; object-fit: contain; transform: scale(2.5) translateY(-8px); filter: drop-shadow(0 6px 12px rgba(0,0,0,0.08)); transition: transform 0.2s ease; }
.char-boss-card.horizontal .char-avatar-box img { transform: scale(2.3) translateY(-4px) !important; }
.char-avatar-box i { font-size: 52px; color: #ccc; }

.stats-container { display: none; flex-direction: column; gap: 24px; }
.stats-box { background: white; border-radius: 28px; padding: 26px; box-shadow: 0 4px 20px rgba(0,0,0,0.04); }
.stats-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.stats-header h2 { font-size: 26px; font-weight: 900; }
.filter-group { display: flex; gap: 10px; }
.stats-split-row { display: grid; grid-template-columns: 80px 100px 1fr; align-items: center; background: #f7f7fc; border-radius: 12px; margin-bottom: 8px; border: 1px solid #eef0f9; text-align: center; }
.stats-split-cell { font-size: 14px; font-weight: 700; padding: 12px 6px; border-right: 1px solid #eef0f9; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.stats-split-cell:last-child { border-right: none; }
.stats-accounts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; padding: 4px; }
.stats-account-card { background: white; border: 1px solid #eef0f9; border-radius: 10px; padding: 10px; text-align: left; }
.stats-account-card.checked { background: #f0fff4; border-color: #c3ebd0; }
.acc-badge { font-size: 11px; padding: 3px 6px; border-radius: 6px; font-weight: 800; display: inline-block; margin-bottom: 4px; background: #ece8ff; color: #7a69ff; }

.settings-container { display: none; flex-direction: column; gap: 24px; }
.settings-box { background: white; border-radius: 28px; padding: 30px; box-shadow: 0 4px 20px rgba(0,0,0,0.04); }
.settings-section { padding: 20px 0; border-bottom: 1px dashed #eef0f6; }
.settings-section:last-child { border-bottom: none; }
.settings-section h2 { font-size: 22px; font-weight: 900; color: #111; margin-bottom: 6px; }
.settings-section p { font-size: 14px; font-weight: 700; color: #666; margin-bottom: 16px; line-height: 1.4; }
.settings-btn { border: none; background: #7a69ff; color: white; padding: 14px 24px; font-size: 15px; font-weight: 800; border-radius: 14px; cursor: pointer; transition: 0.2s; display: inline-flex; align-items: center; gap: 8px; }
.settings-btn:hover { background: #6452f5; transform: translateY(-1px); }
.settings-btn.btn-secondary { background: #f1ecff; color: #7a69ff; }
.settings-btn.btn-secondary:hover { background: #ece5ff; }
.api-warning-text { color: #ff5c5c; font-size: 12px; font-weight: 800; margin-bottom: 14px; display: flex; align-items: center; gap: 4px; }

.modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.35); backdrop-filter:blur(4px); display:none; align-items:center; justify-content:center; z-index:999; }
.boss-difficulty-btn-group { display: flex; gap: 4px; }
.boss-diff-select-btn { border: 1px solid #dcdfe6; background: #fff; color: #666; padding: 6px 12px; font-size: 12px; font-family: 'Pretendard'; font-weight: 800; border-radius: 8px; cursor: pointer; transition: all 0.15s ease; }
.boss-diff-select-btn:hover { background: #f4f5fb; }
.boss-diff-select-btn.active { background: #e7f8ec !important; color: #21a243 !important; border-color: #21a243 !important; font-weight: 900 !important; box-shadow: 0 2px 8px rgba(33, 162, 67, 0.15) !important; }

.modal{ width:460px; background:white; border-radius:28px; padding:28px; box-shadow:0 20px 60px rgba(0,0,0,0.18); animation:modalShow .2s ease; }
@keyframes modalShow{ from{ opacity:0; transform:translateY(12px) scale(.96); } to{ opacity:1; transform:none; } }
.modal h2{ font-size:26px; font-weight:900; margin-bottom:18px; }
.modal label{ display:block; font-size:15px; font-weight:800; margin-bottom:8px; color:#555; }
.modal input, .modal select{ width:100%; border:none; background:#f4f5fb; border-radius:16px; padding:16px; font-size:16px; font-family:'Pretendard'; outline:none; margin-bottom:18px; }
.modal-buttons{ display:flex; justify-content:flex-end; gap:12px; margin-top:10px; }
.modal-btn{ border:none; padding:14px 22px; border-radius:16px; font-size:15px; font-weight:800; cursor:pointer; }
.cancel-btn{ background:#e9eefc; color:#4d5d85; }
.create-btn{ background:#7a69ff; color:white; }

.boss-checkbox-container { display: grid; grid-template-columns: 1fr; gap: 8px; max-height: 260px; overflow-y: auto; background: #f4f5fb; padding: 14px; border-radius: 14px; margin-bottom: 18px; }
.boss-select-row-item { display: flex; align-items: center; justify-content: space-between; background: white; padding: 8px 12px; border-radius: 10px; border: 1px solid #eef0f6; }
.boss-select-row-item span { font-size: 14px; font-weight: 700; }
.boss-select-row-item select { width: auto; padding: 4px 8px; font-size: 12px; font-weight: 700; margin-bottom: 0; border-radius: 6px; background: #f0f1f8; cursor: pointer; }

/* ===================================================
   [NEW] 홈 탭 스타일
   =================================================== */
.home-container { display: none; flex-direction: column; gap: 24px; }
.home-top-grid, .home-middle-grid { display: grid; gap: 24px; }
.home-top-grid { grid-template-columns: repeat(3, 1fr); }
.home-middle-grid { grid-template-columns: repeat(2, 1fr); }

.home-card { background: white; border-radius: 24px; padding: 24px; box-shadow: 0 4px 20px rgba(0,0,0,0.03); border: 1px solid #f0f1f7; display: flex; flex-direction: column; }
.home-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.home-card-body { flex: none; display: flex; flex-direction: column; gap: 12px; overflow: hidden; height: 216px; min-height: 216px; max-height: 216px; padding-right: 4px; }
.home-middle-grid .home-card-body { height: 250px; min-height: 250px; max-height: 250px; }

.home-card-footer { text-align: center; padding-top: 16px; border-top: 1px dashed #eef0f9; margin-top: 16px; }
.home-card-footer a { font-size: 14px; color: #7a69ff; font-weight: 800; }

.badge { padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.badge.red { background: #ffeaea; color: #ff5c5c; }
.badge.green { background: #e7f8ec; color: #21a243; }
.badge.blue { background: #eaf1ff; color: #3a86ff; }
.badge.purple { background: #ece8ff; color: #7a69ff; }
.badge.gray { background: #f1f2f8; color: #888; }

.home-char-row { display: flex; align-items: center; justify-content: space-between; background: #fdfdfd; padding: 10px; border-radius: 16px; border: 1px solid #f0f1f7; }
.home-char-avatar { width: 42px; height: 42px; border-radius: 12px; background: #f4f5fb; display: flex; align-items: center; justify-content: center; overflow: hidden; margin-right: 12px; }
.home-char-avatar img { width: 140%; height: 140%; object-fit: contain; transform: translateY(-4px); }
.home-char-info { flex: 1; }
.home-char-info .name { font-size: 14px; font-weight: 900; color: #222; }
.home-char-info .spec { font-size: 11px; color: #888; font-weight: 600; margin-top: 2px; }
.home-char-status { text-align: right; }
.home-char-task { flex: 1; text-align: right; font-size: 13px; font-weight: 800; color: #444; }

.home-list-item { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 16px; background: #fdfdfd; border: 1px solid #f0f1f7; transition: 0.2s; cursor: pointer; text-decoration: none; }
.home-list-item:hover { background: #f8f9fe; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.03); }
.home-list-item .info { flex: 1; overflow: hidden; }
.home-list-item .title { font-size: 14px; font-weight: 800; color: #222; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-list-item .desc { font-size: 12px; color: #777; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-list-item .date { font-size: 12px; color: #aaa; font-weight: 700; min-width: 65px; text-align: right; }

.home-event-item { display: flex; gap: 14px; padding: 12px; border-radius: 16px; background: #fdfdfd; border: 1px solid #f0f1f7; transition: 0.2s; cursor: pointer; text-decoration: none; align-items: center;}
.home-event-item:hover { background: #f8f9fe; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.03); }
.home-event-thumb { width: 100px; height: 60px; border-radius: 8px; overflow: hidden; flex-shrink: 0; background: #eee; }
.home-event-thumb img { width: 100%; height: 100%; object-fit: cover; }
.home-event-item .info { flex: 1; overflow: hidden; }
.home-event-item .title { font-size: 14px; font-weight: 800; color: #222; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; line-height: 1.3;}
.home-event-item .date { font-size: 11px; color: #aaa; font-weight: 700; margin-top: 4px;}

.home-bottom-slider { background: white; border-radius: 24px; padding: 30px; box-shadow: 0 4px 20px rgba(0,0,0,0.03); border: 1px solid #f0f1f7; }
.home-bottom-slider h3 { font-size: 18px; font-weight: 900; display: flex; align-items: center; gap: 8px; margin-bottom: 20px; }
.slider-wrapper { position: relative; width: 100%; display: flex; align-items: center; padding: 0 44px; box-sizing: border-box; }
.slider-viewport { overflow: hidden; width: 100%; border-radius: 12px; }
.slider-container { display: flex; gap: 16px; transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); width: 100%; }
.slide-item { flex: 0 0 calc(33.3333% - 10.666px); display: flex; flex-direction: column; text-decoration: none; }
.cash-img-wrap { position: relative; width: 100%; height: 130px; border-radius: 12px; overflow: hidden; background: #eee; margin-bottom: 12px; }
.cash-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: 0.3s; }
.slide-item:hover .cash-img-wrap img { transform: scale(1.05); }
.cash-badges { position: absolute; top: 0; left: 0; display: flex; font-size: 12px; font-weight: 900; color: white; z-index: 2; }
.cash-badge-rank { background: #00a8ff; padding: 4px 8px; border-radius: 0 0 8px 0; }
.cash-badge-dday { background: #ff7f00; padding: 4px 8px; border-radius: 0 0 8px 0; }
.cash-title { font-size: 15px; font-weight: 800; color: #222; text-align: center; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cash-date { font-size: 13px; font-weight: 600; color: #888; text-align: center; }
.slider-btn { position: absolute; z-index: 10; top: 50%; transform: translateY(-70%); width: 36px; height: 36px; border-radius: 50%; background: white; border: 1px solid #e2e4f0; box-shadow: 0 4px 12px rgba(0,0,0,0.08); cursor: pointer; font-size: 14px; color: #666; transition: 0.2s; display: flex; align-items: center; justify-content: center; }
.slider-btn:hover { background: #f8f9fe; color: #7a69ff; transform: translateY(-70%) scale(1.1); }
.slider-btn.left { left: 0; }
.slider-btn.right { right: 0; }
.slider-dots { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }
.slider-dots .dot { width: 8px; height: 8px; border-radius: 50%; background: #dcdfe6; cursor: pointer; transition: 0.2s; }
.slider-dots .dot.active { background: #444; width: 24px; border-radius: 4px; }

/* ===================================================
   반응형 레이아웃 브레이크포인트
   =================================================== */
@media(max-width:1400px){
  .home-top-grid { grid-template-columns: 1fr; }
  .home-middle-grid { grid-template-columns: 1fr; }
  .grid{ grid-template-columns:1fr; }
  .farm-dashboard { flex-direction: column; }
  .farm-row { grid-template-columns: 1fr; height: auto; gap: 4px; padding: 12px; }
  .farm-cell { border-right: none; border-bottom: 1px solid #eef0f9; justify-content: flex-start; }
  .farm-cell:last-child { border-bottom: none; }
  .boss-dashboard { flex-direction: column; }
}

@media(max-width:1200px) {
  .hero-wrap { flex-direction: column; }
  .hero-left, .hero-right { width: 100%; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
}

@media(max-width:1000px){
  .app{ flex-direction:column; }
  .sidebar{ width:100%; }
}

@media (max-width:768px) {
  .nav-menu { display: none; }
  .hero-title { font-size: 48px; }
  .hero-desc { font-size: 18px; }
  .feature-grid { grid-template-columns: 1fr; }
  .cta-box { flex-direction: column; gap: 30px; text-align: center; }
  .section-title { font-size: 38px; }
}

/* ===================================================
   [NEW] 메모 탭 스타일
   =================================================== */
.memo-container { display: none; flex-direction: column; gap: 24px; }
.memo-header h2 { font-size: 26px; font-weight: 900; display: flex; align-items: center; gap: 10px; color: #7a69ff; }
.memo-header p { font-size: 14px; color: #666; font-weight: 600; margin-top: 6px; }
.memo-top-row { display: flex; gap: 24px; }
.memo-quick-box { flex: 6; background: white; border-radius: 28px; padding: 24px; box-shadow: 0 4px 20px rgba(0,0,0,0.04); display: flex; flex-direction: column; gap: 12px; }
.memo-quick-box h3 { font-size: 18px; font-weight: 900; }
.memo-quick-box input { border: 1px solid #eef0f9; background: #fdfdfd; padding: 12px 16px; border-radius: 12px; font-size: 15px; font-family: 'Pretendard'; outline: none; }
.memo-quick-box textarea { border: 1px solid #eef0f9; background: #fdfdfd; padding: 16px; border-radius: 12px; font-size: 14px; font-family: 'Pretendard'; outline: none; resize: none; height: 100px; }
.memo-quick-box input:focus, .memo-quick-box textarea:focus { border-color: #7a69ff; }
.memo-save-btn { align-self: flex-end; background: #7a69ff; color: white; border: none; padding: 10px 24px; border-radius: 12px; font-weight: 800; cursor: pointer; transition: 0.2s; }
.memo-save-btn:hover { background: #6452f5; }

.memo-pinned-box { flex: 4; background: white; border-radius: 28px; padding: 24px; box-shadow: 0 4px 20px rgba(0,0,0,0.04); display: flex; flex-direction: column; }
.pinned-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.pinned-header h3 { font-size: 18px; font-weight: 900; }
.pinned-nav button { border: none; background: #f4f5fb; width: 28px; height: 28px; border-radius: 8px; cursor: pointer; color: #666; margin-left: 4px; }
.pinned-nav button:hover { background: #ece8ff; color: #7a69ff; }
.pinned-content-area { flex: 1; background: #fdfdfd; border: 1px solid #eef0f9; border-radius: 16px; padding: 16px; overflow-y: auto; position: relative; }
.pinned-empty { text-align: center; color: #aaa; font-weight: 700; margin-top: 30px; font-size: 14px; }
.pinned-item-title { font-size: 16px; font-weight: 800; margin-bottom: 8px; color: #222; }
.pinned-item-desc { font-size: 14px; color: #555; line-height: 1.5; white-space: pre-wrap; }
.pinned-item-date { position: absolute; bottom: 16px; right: 16px; font-size: 12px; color: #999; font-weight: 600; }

.memo-toolbar { display: flex; justify-content: space-between; align-items: center; }
.memo-tabs { display: flex; gap: 8px; }
.memo-tab-btn { border: none; background: #f4f5fb; padding: 8px 18px; border-radius: 20px; font-weight: 800; color: #666; cursor: pointer; transition: 0.2s; }
.memo-tab-btn.active { background: #7a69ff; color: white; }
.memo-actions { display: flex; gap: 12px; }
.memo-search { position: relative; }
.memo-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #aaa; }
.memo-search input { padding: 10px 14px 10px 36px; border-radius: 12px; border: 1px solid #eef0f9; outline: none; font-family: 'Pretendard'; width: 200px; }
.memo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.memo-card { background: white; border-radius: 20px; padding: 20px; box-shadow: 0 4px 16px rgba(0,0,0,0.03); display: flex; flex-direction: column; position: relative; border: 1px solid transparent; transition: 0.2s; }
.memo-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.06); }
.memo-card.important { border-color: #ffd54d; background: #fffdf5; }
.memo-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.memo-card-title { font-size: 16px; font-weight: 900; color: #222; max-width: 80%; }
.memo-card-pin { cursor: pointer; color: #ccc; font-size: 16px; transition: 0.2s; }
.memo-card-pin.active { color: #7a69ff; }
.memo-card-body { font-size: 14px; color: #555; line-height: 1.5; white-space: pre-wrap; flex: 1; margin-bottom: 20px; }
.memo-card-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px dashed #eef0f9; padding-top: 12px; }
.memo-card-date { font-size: 12px; font-weight: 700; color: #999; }
.memo-card-star { cursor: pointer; color: #ccc; font-size: 18px; transition: 0.2s; }
.memo-card-star.active { color: #ffb730; }
.memo-card-delete { cursor: pointer; color: #ff5c5c; font-size: 14px; background: none; border: none; opacity: 0.5; transition: 0.2s;}
.memo-card-delete:hover { opacity: 1; }

/* [NEW] 숙제 탭 전용 캐릭터 카드 스타일 (세로형 고정크기 버전) */
.todo-char-card { display: flex; flex-direction: column; align-items: center; text-align: center; background: white; border-radius: 20px; padding: 20px 16px; box-shadow: 0 4px 14px rgba(0,0,0,0.03); position: relative; border: 1px solid #eef0f6; width: 240px; min-width: 240px; max-width: 240px; transition: 0.2s ease; cursor: pointer; flex-shrink: 0; }
#todoCharacterGridContainer { display: flex; overflow-x: auto; padding: 10px 16px 16px 16px; gap: 16px; scroll-behavior: smooth; -ms-overflow-style: none; scrollbar-width: none; }
.todo-char-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.05); }
.todo-char-card.active { border-color: #7a69ff; background-color: #fcfbff; }

.todo-char-img-wrap { width: 90px; height: 90px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; overflow: visible; position: relative; z-index: 1; pointer-events: none; }
.todo-char-img-wrap img { max-width: 130%; max-height: 130%; object-fit: contain; transform: scale(2.4) translateY(-5px); filter: drop-shadow(0 6px 10px rgba(0,0,0,0.08)); }
.todo-char-img-wrap i { font-size: 48px; color: #ccc; }

.todo-char-info-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; }
.todo-char-info-name { font-size: 16px; font-weight: 900; color: #111; margin-bottom: 6px; white-space: nowrap; }
.todo-char-info-spec { font-size: 11px; font-weight: 700; color: #666; background: #f1f2f8; padding: 4px 10px; border-radius: 20px; white-space: nowrap; }

.todo-char-actions { position: absolute; top: 10px; left: 10px; z-index: 100; }
.todo-char-action-btn { background: none; border: none; cursor: pointer; padding: 2px; font-size: 16px; transition: 0.2s; opacity: 0.5; }
.todo-char-action-btn:hover { opacity: 1; }
.todo-char-pin-btn { color: #ffb730; }
.todo-char-pin-btn.active { color: #ffb730; opacity: 1; }

#todoCharacterGridContainer::-webkit-scrollbar { display: none !important; }
.todo-list { min-height: 180px; }

#todoCharacterGridContainer {
  padding: 14px 16px 18px !important;
}

#todoCharacterGridContainer .todo-char-card:hover {
  transform: translateY(-3px) !important;
}

#todoCharacterGridContainer .todo-char-card.active {
  box-shadow: 0 12px 28px rgba(122,105,255,0.14), 0 0 0 1px #7a69ff inset !important;
}

.side-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 50; width: 36px; height: 36px; border-radius: 50%; background: white; border: 1px solid #eef0f6; box-shadow: 0 4px 12px rgba(0,0,0,0.15); cursor: pointer; color: #666; display: flex; align-items: center; justify-content: center; font-size: 14px; transition: 0.2s; }
.side-nav-btn:hover { background: #7a69ff; color: white; border-color: #7a69ff; }
.side-nav-btn.left { left: -15px; }
.side-nav-btn.right { right: -15px; }

#todoGridSection { flex: 1; grid-template-rows: auto 1fr; }
#todoGridSection .card { display: flex; flex-direction: column; }
#todoGridSection .todo-list { flex: 1; }

/* ===================================================
   [NEW] 보스 파티 & 달력 스타일
   =================================================== */
.party-member-row { display: flex; align-items: center; justify-content: space-between; background: #fdfdfd; padding: 10px; border-radius: 12px; border: 1px solid #eaeaea; }
.party-member-info { display: flex; align-items: center; gap: 12px; }
.party-member-info img { width: 36px; height: 36px; object-fit: contain; }
.party-member-del { color: #ff5c5c; cursor: pointer; border: none; background: none; font-size: 16px; padding: 4px; opacity: 0.5; transition: 0.2s; }
.party-member-del:hover { opacity: 1; transform: scale(1.1); }

.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; width: 100%; }
.calendar-header { text-align: center; font-weight: 800; font-size: 13px; padding: 8px 0; background: #f0f1f7; border-radius: 8px; color: #555; }
.calendar-cell { border: 1px solid #eaeaea; border-radius: 8px; min-height: 80px; padding: 6px; display: flex; flex-direction: column; background: #fff; position: relative; cursor: pointer; transition: 0.2s; }
.calendar-cell:hover { border-color: #7a69ff; box-shadow: 0 4px 10px rgba(122,105,255,0.1); transform: translateY(-1px); }
.calendar-cell.today { background: #fcfbff; border-color: #7a69ff; box-shadow: 0 0 0 1.5px #7a69ff inset; }
.calendar-date-num { font-size: 12px; font-weight: 800; color: #888; margin-bottom: 6px; }
/* 높이를 명확하게 고정해서 스크롤 시 반쯤 잘려 보이는 현상을 차단합니다 */
.calendar-log-item { font-size: 11px; font-weight: 800; background: #e7f8ec; color: #21a243; padding: 0 6px; border-radius: 6px; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 1px 2px rgba(0,0,0,0.05); height: 20px; line-height: 20px; flex-shrink: 0; }
.calendar-log-item.fs { display: flex; align-items: center; gap: 6px; font-size: 13px; padding: 0 8px; border-radius: 8px; height: 32px; line-height: 32px; flex-shrink: 0; margin-bottom: 4px; }
.calendar-log-item.fs img { width: 24px; height: 24px; object-fit: contain; background: #fff; border-radius: 4px; display: block; }

/* ===================================================
   [NEW] 보스 물욕 탭 그리드 및 아이템 애니메이션
   =================================================== */
.drop-category { background: #fdfdfd; border: 1px solid #eaeaea; border-radius: 16px; padding: 24px; box-shadow: 0 4px 12px rgba(0,0,0,0.01); }
.drop-category-title { font-size: 18px; font-weight: 800; color: #333; margin-bottom: 20px; border-bottom: 2px solid #f0f1f7; padding-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.drop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 14px; }

/* 작은 박스 기본 상태 & 마우스 오버(호버) 시 튀어오르는 효과 */
.drop-item-card { cursor: pointer; display: block; border-radius: 14px; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); background: #fff; border: 1px solid #eaeaea; padding: 16px 8px; text-align: center; position: relative; }
.drop-item-card:hover { transform: translateY(-8px); border-color: #7a69ff; box-shadow: 0 8px 16px rgba(122,105,255,0.12); }

.drop-item-content { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.drop-item-img-wrap { position: relative; width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; }
.drop-item-img { max-width: 100%; max-height: 100%; object-fit: contain; transition: filter 0.3s, opacity 0.3s; }
.drop-item-name { font-size: 12px; font-weight: 800; color: #444; word-break: keep-all; line-height: 1.3; }

/* 도장 이미지 초기엔 숨김 (포인터 이벤트 차단) */
.drop-stamp { position: absolute; width: 100%; height: 100%; object-fit: contain; top: 0; left: 0; display: none; z-index: 2; pointer-events: none; }

/* ✅ 체크 시 효과: 아이템 흑백 & 도장 애니메이션 */
.boss-drop-checkbox:checked ~ .drop-item-content .drop-item-img { filter: grayscale(100%); opacity: 0.25; }
.boss-drop-checkbox:checked ~ .drop-item-content .drop-stamp { display: block; animation: stampEffect 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }

/* 이미 도장이 찍혔을 땐 마우스를 올려도 튀어오르지 않고 얌전하게 유지 */
.drop-item-card:has(.boss-drop-checkbox:checked) { border-color: #e2e4f0; background: #fafbfc; box-shadow: none; transform: translateY(0); } 

@keyframes stampEffect {
    0% { transform: scale(2.5) rotate(-30deg); opacity: 0; }
    100% { transform: scale(1.1) rotate(-15deg); opacity: 0.9; }
}

/* ==========================================
   👑 관리자 공지 에디터 전용 (Rich Text Editor)
   ========================================== */

/* 에디터 전체 컨테이너 */
.notice-editor-container {
    border: 1px solid #eaeaea;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 30px;
    background: #fff;
    transition: 0.3s;
}

/* 에디터에 포커스 갔을 때 테두리 색 변경 */
.notice-editor-container:focus-within {
    border-color: #7a69ff;
    box-shadow: 0 0 0 3px rgba(122,105,255,0.1);
}

/* 툴바 영역 */
.editor-toolbar {
    background: #f9fafb;
    padding: 10px 16px;
    border-bottom: 1px solid #eaeaea;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* 툴바 버튼 공통 */
.editor-toolbar button {
    background: #fff;
    border: 1px solid #dcdfe6;
    color: #606266;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

/* 툴바 버튼 호버 효과 */
.editor-toolbar button:hover {
    background: #f0eaff;
    border-color: #7a69ff;
    color: #7a69ff;
    transform: translateY(-1px);
}

/* 정렬 관련 버튼 그룹 구분을 위한 마진 */
.editor-toolbar .align-group {
    margin-left: 10px;
    padding-left: 10px;
    border-left: 1px solid #eaeaea;
    display: flex;
    gap: 6px;
}

/* 이미지 첨부 버튼 전용 색상 */
.editor-toolbar button.btn-image {
    background: #e7f8ec;
    border-color: #b3e9c6;
    color: #2ecc71;
    margin-left: auto; /* 우측 끝 배치 */
}
.editor-toolbar button.btn-image:hover {
    background: #2ecc71;
    color: #fff;
    border-color: #2ecc71;
}

/* 실제 편집 영역 (div) */
.editable-content {
    width: 100%;
    min-height: 400px; /* textarea보다 높게 설정 */
    max-height: 600px;
    overflow-y: auto;
    padding: 24px;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.7;
    color: #333;
    outline: none; /* 포커스 테두리 제거 */
    box-sizing: border-box;
}

/* 편집 영역 내 기본 이미지 스타일 (반응형) */
.editable-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 10px 0;
    display: block; /* 줄바꿈 처리 */
}

/* 편집 영역 placeholder 스타일 */
.editable-content[contenteditable]:empty:before {
    content: attr(placeholder);
    color: #aaa;
    display: block;
}

/* ==========================================
   ✨ 모던 대시보드 UI 전면 개편 패치 (구조 레이아웃 & 글래스모피즘 적용)
   ========================================== */

/* 1. 앱 레이아웃을 화면 전체에 붙여 좌측 메뉴 영역을 원래 폭으로 사용 */
.app { 
    background: #f8f9fa !important;
    padding: 0 !important;
    gap: 0 !important;
}

/* 2. 좌측 사이드바는 독립 카드가 아니라 전체 높이 메뉴 패널로 고정 */
.sidebar {
    width: 260px !important;
    height: 100vh !important;
    flex-shrink: 0 !important;
    background: #ffffff !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    padding: 32px 24px !important;
    border-right: 1px solid #eaeaea !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    z-index: 1 !important;
    gap: 0 !important;
}

.sidebar .logo {
    margin-bottom: 38px !important;
}

.sidebar .logo img {
    height: 64px !important;
}

.sidebar .menu {
    gap: 7px !important;
}

#sidebarAuthArea {
    padding-top: 16px !important;
}

#sidebarAuthArea > div {
    padding: 10px 12px !important;
    margin-bottom: 10px !important;
    border-radius: 12px !important;
}

#sidebarAuthArea button {
    padding: 12px !important;
    border-radius: 14px !important;
    font-size: 15px !important;
    margin-bottom: 8px !important;
}

/* 3. 메인 영역의 모든 큼직한 박스들을 고급스러운 반투명 패널 카드로 통일 */
.top, .card, .farm-chart-box, .farm-summary-box, .farm-list-box, 
.boss-top-chart-box, .boss-chart-box, .boss-summary-card, .boss-content-box, 
.memo-quick-box, .memo-pinned-box, .home-card, .home-bottom-slider,
#adminNoticeTabContainer > div, #adminUsersTabContainer > div, 
#adminStatsTabContainer > div, #adminSystemTabContainer > div {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    border-radius: 28px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04) !important;
}

/* 4. 안쪽의 작은 카드 요소들 (숙제, 보스, 메모 카드 등) 입체감 부여 */
.todo-char-card, .char-boss-card, .home-char-row, .memo-card, .stats-split-row {
    background: #ffffff !important;
    border-radius: 20px !important;
    border: 1px solid rgba(220, 223, 230, 0.6) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}
.todo-char-card:hover, .char-boss-card:hover, .home-char-row:hover, .memo-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 16px 32px rgba(122, 105, 255, 0.12) !important;
    border-color: #7a69ff !important;
}

/* 5. 메뉴 버튼 스타일 업그레이드 */
.menu button, #statsSubMenu button, #bossSubMenu button, #adminSubMenu button {
    border-radius: 16px !important;
    margin-bottom: 0 !important;
    padding: 11px 20px !important;
    transition: all 0.2s ease !important;
}
.menu button:hover {
    background: rgba(122, 105, 255, 0.1) !important;
    color: #7a69ff !important;
    transform: translateX(4px);
}
.menu button.active, #statsSubMenu button.active, #bossSubMenu button.active, #adminSubMenu button.active {
    background: rgba(122, 105, 255, 0.16) !important;
    color: #7a69ff !important;
    box-shadow: none !important;
    font-weight: 900 !important;
}

.menu button.active i, #statsSubMenu button.active i, #bossSubMenu button.active i, #adminSubMenu button.active i {
    color: #7a69ff !important;
}

/* 6. 달력 및 모달(팝업창) 디자인 */
.calendar-date, .modal {
    background: rgba(255, 255, 255, 0.95) !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(10px) !important;
}

.modal-overlay {
    background: rgba(18, 20, 31, 0.48) !important;
    backdrop-filter: blur(8px) !important;
}

.modal {
    background: #ffffff !important;
    border: 1px solid #e3e6f2 !important;
}

.modal h2 {
    color: #171724 !important;
    letter-spacing: 0 !important;
}

.modal label {
    color: #2f3446 !important;
}

.modal input, .modal select {
    background: #ffffff !important;
    border: 1px solid #d9deeb !important;
    color: #171724 !important;
    box-shadow: 0 1px 0 rgba(20, 24, 38, 0.02) !important;
}

.modal input::placeholder {
    color: #8f97aa !important;
}

.modal input:focus, .modal select:focus {
    border-color: #7a69ff !important;
    box-shadow: 0 0 0 4px rgba(122, 105, 255, 0.14) !important;
}

.modal-btn {
    min-width: 72px;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.modal-btn:hover {
    transform: translateY(-1px);
}

.cancel-btn {
    background: #eef1f8 !important;
    color: #384158 !important;
    border: 1px solid #dfe4f0 !important;
}

.cancel-btn:hover {
    background: #e4e8f3 !important;
}

.create-btn {
    background: #7a69ff !important;
    color: #ffffff !important;
    box-shadow: 0 10px 22px rgba(122, 105, 255, 0.24) !important;
}

.create-btn:hover {
    background: #6755f2 !important;
}

/* 7. 스크롤바 디자인 */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: #dcdfe6; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #7a69ff; }