/* Layout/UI matching `hub/page.tsx` look & feel (no Tailwind build required) */

/* Sidebar brand */
.lv-sidebar-head{
  padding:20px 16px 10px;
}
.lv-brand{display:flex; align-items:center; justify-content:center;}
.lv-brand-img{
  display:block;
  width:100%;
  max-width: 200px;
  height:auto;
  filter: drop-shadow(0 10px 18px rgba(17,24,39,.10));
}
.lv-brand-slogan{
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .10em;
  color: rgba(17,24,39,.45);
  text-align: center;
}
.lv-brand-logo{
  display:inline-block;
  font-weight:1000;
  font-size:37px;
  letter-spacing:-.06em;
  line-height:1;
  transform: skewX(-6deg);
  color: var(--primary);
}
@supports ((-webkit-background-clip:text) or (background-clip:text)) {
  .lv-brand-logo{
    background: linear-gradient(
      90deg,
      var(--primary) 0%,
      #fb7185 30%,
      rgba(255,255,255,.92) 48%,
      #fb7185 66%,
      var(--primary) 100%
    );
    background-size: 220% 100%;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: lvLogoShine 3.2s ease-in-out infinite;
  }
  @keyframes lvLogoShine{
    0%{background-position:0% 50%}
    55%{background-position:100% 50%}
    100%{background-position:100% 50%}
  }
}
.lv-brand-icon{
  width:56px; height:56px;
  border-radius:0;
  background: linear-gradient(135deg, var(--primary), #f43f5e);
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
  box-shadow: 0 14px 28px rgba(var(--primary-rgb), .22);
}
.lv-brand-icon-text{color:#fff; font-weight:900; font-size:20px; letter-spacing:-.02em;}
.lv-brand-shine{
  position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  transform: translateX(-120%);
  animation: lvShine 3s ease-in-out infinite;
}
@keyframes lvShine{0%{transform:translateX(-120%)}50%{transform:translateX(120%)}100%{transform:translateX(120%)}}
.lv-brand-heart{color:var(--primary); font-size:16px; line-height:1; transform: translateY(1px); animation: lvPulse 1.6s ease-in-out infinite;}
@keyframes lvPulse{0%,100%{opacity:.7}50%{opacity:1}}
.lv-brand-word{position:relative; display:inline-block;}
.lv-brand-word-text{
  font-weight:1000;
  font-size:24px;
  letter-spacing:-.08em;
  line-height:1;
  transform: skewX(-12deg);
  text-transform: uppercase;
  color: var(--primary);
}
.lv-brand-underline{
  position:absolute; left:0; right:0; bottom:-4px;
  height:4px; border-radius:999px;
  background: linear-gradient(90deg, var(--primary), rgba(var(--primary-rgb), .15));
}

/* Subtle text shine (left -> right) */
@supports ((-webkit-background-clip:text) or (background-clip:text)) {
  .lv-brand-word-text{
    background: linear-gradient(90deg, var(--primary) 0%, var(--primary) 36%, rgba(255,255,255,.92) 50%, var(--primary) 64%, var(--primary) 100%);
    background-size: 220% 100%;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: lvTextShine 3.6s ease-in-out infinite;
  }
  @keyframes lvTextShine{
    0%{background-position:100% 50%}
    55%{background-position:0% 50%}
    100%{background-position:0% 50%}
  }
}

/* Sidebar profile (stub: later login/signup) */
.lv-profile{
  padding:14px 16px 0;
}
.lv-profile-card{
  border:1px solid var(--border);
  border-radius:0;
  background:
    radial-gradient(220px 120px at 12% 20%, rgba(var(--primary-rgb), .14), transparent 60%),
    linear-gradient(180deg, #ffffff, #fbfbff);
  box-shadow: 0 14px 26px rgba(17,24,39,.08);
  padding:18px 16px 16px;
}
.lv-profile-brand{
  position:relative;
  display:inline-block;
  font-weight:1000;
  font-size:34px;
  letter-spacing:-.08em;
  color: var(--primary);
  line-height:1;
  transform: skewX(-10deg);
  text-transform: uppercase;
  margin-bottom:10px;
}
.lv-profile-brand:after{
  content:"";
  position:absolute;
  left:0;
  right:-8px;
  bottom:-6px;
  height:4px;
  border-radius:999px;
  background: linear-gradient(90deg, var(--primary), rgba(var(--primary-rgb), .15));
}
.lv-profile-user{display:flex; align-items:flex-end; justify-content:space-between; gap:10px;}
.lv-profile-name{
  font-weight:1000;
  letter-spacing:-.03em;
  color: var(--primary);
  font-size:17px;
  line-height:1.05;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.lv-profile-points{
  display:flex;
  align-items:baseline;
  gap:2px;
  color:#111827;
  font-weight:1000;
}
.lv-profile-points-num{font-size:22px;}
.lv-profile-points-unit{font-size:14px; opacity:.85;}
.lv-profile-hint{
  margin-top:8px;
  font-size:11px;
  font-weight:800;
  color: rgba(17,24,39,.45);
  padding:0 2px;
}

/* Sidebar nav */
.lv-nav{flex:1; overflow:auto; padding:14px 10px;}
.lv-nav-section{display:flex; flex-direction:column; gap:4px;}
.lv-acc{border-radius:0;}
.lv-acc-btn{
  width:100%;
  border:0; background:transparent;
  display:flex; align-items:center; gap:10px;
  padding:11px 12px;
  border-radius:0;
  cursor:pointer;
  outline:none;
  box-shadow:none;
  /* border:1px solid transparent; */
  transition: background .12s ease, border-color .12s ease;
}
.lv-acc-btn:hover{
  background: #fff;
  border-color: rgba(17,24,39,.12);
}
.lv-acc.is-open .lv-acc-btn{
  /* background: #f3f4f6; */
  border-color: rgba(17,24,39,.22);
  /* box-shadow: inset 3px 0 0 rgba(17,24,39,.38); */
}
.lv-acc.is-open .lv-acc-btn:hover{
  background: #f3f4f6;
  border-color: rgba(17,24,39,.28);
}
.lv-acc-icon{
  width:16px; height:16px;
  border-radius:0;
  background: rgba(17,24,39,.12);
  flex:0 0 auto;
}
.lv-acc-title{flex:1; text-align:left; font-weight:800; font-size:13px; letter-spacing:-.01em; color:#1a1a1a;}
.lv-acc-caret{
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius:0;
  /* background: rgba(17,24,39,.06); */
  transition: transform .18s ease, background .18s ease;
}
.lv-acc-caret:before{
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid rgba(17,24,39,.5);
  border-bottom: 1.5px solid rgba(17,24,39,.5);
  transform: rotate(45deg);
  margin-top: -2px;
  transition: transform .18s ease;
}
.lv-acc-btn:hover .lv-acc-caret{
  background: rgba(17,24,39,.1);
}
.lv-acc.is-open .lv-acc-caret{
  transform: rotate(180deg);
}
.lv-acc-panel{display:none; margin:4px 0 0 8px; padding-left:10px; border-left:1px solid rgba(17,24,39,.08);}
.lv-acc.is-open .lv-acc-panel{display:block;}

/* Nested Accordion (3-level menu) */
.lv-acc-nested{margin:2px 0;}
.lv-acc-nested .lv-acc-panel{margin:2px 0 0 6px; padding-left:8px; border-left-width:1px;}
.lv-acc-btn-sub{padding:7px 10px; border-radius:0;}
.lv-acc-btn-sub .lv-acc-title{font-size:12px; font-weight:700; color:rgba(17,24,39,.62); text-transform:uppercase; letter-spacing:.05em;}
.lv-acc-btn-sub .lv-acc-caret{width:16px; height:16px;}
.lv-acc-nested.is-open .lv-acc-btn-sub .lv-acc-title{color:#111827;}
/* Admin sidebar enhancements (only for .is-admin) */
.lv-sidebar.is-admin .lv-acc-panel .lv-sub{
  padding:10px 12px;
  font-size:13px;
  color:rgba(17,24,39,.72);
}
.lv-sidebar.is-admin .lv-acc-panel .lv-sub:hover{
  color:#111827;
  background:rgba(17,24,39,.04);
}
.lv-sidebar.is-admin .lv-acc-panel .lv-sub.is-active{
  font-weight:800;
  color:#111827;
  background:rgba(17,24,39,.08);
}
/* Top-level accordion header for admin */
.lv-sidebar.is-admin .lv-acc > .lv-acc-btn > .lv-acc-title{
  font-size:13px;
  font-weight:900;
  color:rgba(17,24,39,.8);
}
.lv-sidebar.is-admin .lv-acc.is-open > .lv-acc-btn > .lv-acc-title{
  color:#111827;
}
/* Better nested spacing for admin */
.lv-sidebar.is-admin .lv-acc-nested .lv-acc-panel .lv-sub{
  margin:2px 0;
  padding:9px 14px;
  font-size:12.5px;
  border-radius:0;
}
.lv-sidebar.is-admin .lv-acc-nested .lv-acc-panel .lv-sub:before{
  left:-14px;
}
/* Category label styling for admin */
.lv-sidebar.is-admin .lv-acc-btn-sub .lv-acc-title:before{
  content:none;
  display:none;
  width:0;
  height:0;
  margin-right:0;
  border-radius:0;
  background:transparent;
  opacity:.5;
}

.lv-sub{
  position:relative;
  display:flex;
  align-items:center;
  padding:9px 10px;
  border-radius:0;
  border:1px solid transparent;
  font-weight:500;
  font-size:12.5px;
  line-height:1.15;
  min-height:34px;
  transition: background .12s ease, color .12s ease;
}
.lv-sub:hover{background:rgba(17,24,39,.04); color:#111827;}
.lv-sub.is-active{background:rgba(17,24,39,.06); color:#111827;}
.lv-sub.is-active:before{
  content:"";
  position:absolute;
  left:-13px;
  top:9px;
  bottom:9px;
  width:3px;
  border-radius:999px;
  background: rgba(17,24,39,.55);
}
.lv-sub.is-active .lv-sub-text{font-weight:900;}
.lv-sub-meta{margin-left:auto; display:inline-flex; align-items:center;}
.lv-sub-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:3px 8px;
  border-radius:999px;
  font-weight:1000;
  font-size:11px;
  color:#fff;
  background:#ef4444;
}
.lv-sub-noti{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:26px;
  height:20px;
  padding:0 8px;
  margin-left:auto;
  border-radius:999px;
  font-weight:700;
  font-size:11px;
  color:#fff;
  background:#dc2626;
}

/* Admin Feed */
.lv-admin-feed{
  padding:12px 16px 16px;
  border-top:1px solid var(--border);
}
.lv-admin-feed-title{
  font-size:10px;
  font-weight:700;
  color:#aaa;
  letter-spacing:.06em;
  margin-bottom:10px;
}
.lv-admin-feed-list{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.lv-admin-feed-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 10px;
  border-radius:0;
  transition:background .15s;
}
.lv-admin-feed-item:hover{
  background:#f5f5f5;
}
.lv-admin-feed-label{
  font-size:13px;
  font-weight:500;
  color:#555;
}
.lv-admin-feed-count{
  font-size:12px;
  font-weight:600;
  color:#bbb;
}
.lv-admin-feed-count.has-count{
  color:#ef4444;
  font-weight:700;
}

.lv-nav-divider{height:1px; background: var(--border); margin:16px 0;}

.lv-rainbow-wrap{display:flex; flex-direction:column; gap:10px; padding:0 4px;}
.lv-rainbow{
  position:relative;
  display:block;
  border-radius:0;
  overflow:hidden;
  padding:1px;
  background: linear-gradient(90deg, #ef4444, #f59e0b, #22c55e, #3b82f6, #a855f7);
  background-size:200% 200%;
  animation: lvRainbow 3s ease-in-out infinite;
}
@keyframes lvRainbow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.lv-rainbow span{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  background: rgba(255,255,255,.92);
  border-radius:0;
  font-weight:900;
  font-size:12.5px;
}

.lv-bottom{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:0;
  font-weight:900;
  font-size:14px;
}
.lv-bottom:hover{background: var(--primary-50);}

.lv-sidebar-foot{
  padding:16px;
  border-top:1px solid var(--border);
}
.lv-cta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background: linear-gradient(90deg, #111827, #0f172a);
  color:#fff;
  border-radius:0;
  padding:14px 16px;
  font-weight:900;
  letter-spacing:-.02em;
  box-shadow: 0 10px 18px rgba(17,24,39,.12);
}
.lv-cta:hover{filter:brightness(.96);}

/* Sidebar: recent intake/activity */
.lv-side-activity{padding: 0 5px 10px;}
.lv-activity-card{
  margin-top: 15px;
  /* border:1px solid var(--border); */
  border-radius:0;
  /* background:
    radial-gradient(220px 140px at 12% 20%, rgba(17,24,39,.06), transparent 60%),
    linear-gradient(180deg, #ffffff, #f8fafc); */
  box-shadow: 0 14px 26px rgba(17,24,39,.08);
  padding:14px 14px 12px;
}
.lv-activity-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.lv-activity-brand{
  position:relative;
  display:inline-block;
  font-weight:1000;
  font-size:22px;
  letter-spacing:-.08em;
  color:#111827;
  line-height:1;
  transform: skewX(-10deg);
}
.lv-activity-brand:after{
  content:"";
  position:absolute;
  left:0;
  right:-6px;
  bottom:-6px;
  height:4px;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(17,24,39,.85), rgba(17,24,39,.12));
}
.lv-activity-more{
  font-weight:1000;
  font-size:10px;
  color: rgba(17,24,39,.86);
  padding:6px 10px;
  border-radius:999px;
  /* border:1px solid rgba(17,24,39,.18);
  background: rgba(17,24,39,.04); */
}
.lv-activity-more:hover{background: #f3f4f6;}
.lv-activity-list{display:flex; flex-direction:column; gap:8px;}
.lv-activity-item{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:10px 10px;
  border-radius:0;
  border:1px solid transparent;
  background:#fff;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.lv-activity-item:hover{
  border-color: rgba(17,24,39,.20);
  background: #f3f4f6;
  transform: translateY(-1px);
}
.lv-activity-empty{
  padding:20px 14px;
  text-align:center;
  font-size:12px;
  font-weight:600;
  color:rgba(17,24,39,.4);
}
.lv-activity-text{
  font-size:11.5px;
  font-weight:900;
  letter-spacing:-.02em;
  color:#111827;
  line-height:1.35;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.lv-activity-date{
  font-size:11px;
  font-weight:900;
  color: rgba(17,24,39,.55);
}

/* Topbar */
.lv-top-left{display:flex; align-items:center; gap:24px;}
.lv-crumb{display:flex; align-items:center; gap:10px; font-weight:900;}
.lv-crumb-home{display:inline-flex; align-items:center; justify-content:center;}
.lv-crumb-ic{width:18px; height:18px; fill:#111827;}
.lv-top-home{opacity:.92;}

.lv-top-right{display:flex; align-items:center; gap:12px;}
.lv-icon-btn{
  position:relative;
  border:0;
  background:transparent;
  padding:10px 12px;
  border-radius:0;
  cursor:pointer;
  transition: background .12s ease;
  font-size:18px;
}
.lv-icon-btn:hover{background:#f9fafb;}
.lv-hamburger{display:none;}
.lv-bell-ic{width:26px; height:26px; fill:#111827;}
.lv-bell{position:relative;}
.lv-bell-badge{
  position:absolute;
  top:4px;
  right:4px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#ef4444;
  color:#fff;
  font-size:10px;
  font-weight:800;
  line-height:1;
  border:2px solid #fff;
  pointer-events:none;
}

/* Notification Dropdown */
.lv-noti{position:relative;}
.lv-noti-panel{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  width:320px;
  background:#fff;
  border:1px solid rgba(17,24,39,.1);
  border-radius:0;
  box-shadow: 0 20px 40px rgba(17,24,39,.15);
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
  z-index:1000;
}
.lv-noti.is-open .lv-noti-panel{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.lv-noti-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 18px;
  border-bottom:1px solid rgba(17,24,39,.06);
}
.lv-noti-title{
  font-size:15px;
  font-weight:800;
  color:#111827;
}
.lv-noti-count-text{
  font-size:12px;
  font-weight:700;
  color:#ef4444;
}
.lv-noti-list{
  max-height:280px;
  overflow-y:auto;
}
.lv-noti-item{
  display:block;
  padding:14px 18px;
  border-bottom:1px solid rgba(17,24,39,.04);
  transition: background .12s ease;
}
.lv-noti-item:hover{
  background:#f9fafb;
}
.lv-noti-item:last-child{
  border-bottom:none;
}
.lv-noti-text{
  font-size:13px;
  font-weight:600;
  color:#111827;
  margin-bottom:4px;
  line-height:1.4;
}
.lv-noti-date{
  font-size:11px;
  font-weight:600;
  color:rgba(17,24,39,.4);
}
.lv-noti-empty{
  padding:40px 18px;
  text-align:center;
  font-size:13px;
  font-weight:600;
  color:rgba(17,24,39,.4);
}
.lv-noti-more{
  display:block;
  padding:14px 18px;
  text-align:center;
  font-size:13px;
  font-weight:700;
  color:#111827;
  border-top:1px solid rgba(17,24,39,.06);
  transition: background .12s ease;
}
.lv-noti-more:hover{
  background:#f3f4f6;
}
.lv-noti-count{
  position:absolute;
  top:6px;
  right:7px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#ef4444;
  color:#fff;
  font-size:11px;
  font-weight:1000;
  line-height:1;
  border:2px solid #fff;
  box-shadow: 0 12px 18px rgba(239,68,68,.22);
}

/* Topbar user (points + dropdown) */
.lv-user{position:relative; display:flex; align-items:center;}
.lv-user-btn{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--border);
  background:#fff;
  padding:8px 14px;
  border-radius:0;
  cursor:pointer;
  box-shadow: none;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.lv-user-btn:hover{background: var(--primary-50); border-color: rgba(var(--primary-rgb), .22);}
.lv-user-btn:active{transform: translateY(1px);}

.lv-user-points{
  display:inline-flex;
  align-items:baseline;
  gap:2px;
  padding:6px 10px;
  border-radius:999px;
  color:#fff;
  font-weight:1000;
  letter-spacing:-.02em;
  background: linear-gradient(90deg, var(--primary), #f43f5e);
  box-shadow: 0 14px 20px rgba(var(--primary-rgb), .22);
}
.lv-user-points-num{font-size:13px; line-height:1;}
.lv-user-points-unit{font-size:11px; opacity:.9; line-height:1;}
.lv-user-name{
  font-weight:1000;
  font-size:13px;
  letter-spacing:-.02em;
  color:#111827;
  max-width:140px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.lv-user-caret{color:rgba(17,24,39,.55); font-weight:900; transform: translateY(-1px);}

.lv-user-menu{
  position:absolute;
  right:0;
  top: calc(100% + 10px);
  min-width: 220px;
  padding:8px;
  border-radius:0;
  border:1px solid var(--border);
  background:#fff;
  box-shadow: var(--shadow);
  display:none;
  transform-origin: 92% 0%;
}
.lv-user.is-open .lv-user-menu{display:block; animation: lvPop .12s ease-out;}
.lv-user.is-open .lv-user-caret{transform: translateY(-1px) rotate(180deg);}
@keyframes lvPop{
  from{opacity:0; transform: translateY(-4px) scale(.98);}
  to{opacity:1; transform: translateY(0) scale(1);}
}
.lv-user-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border-radius:0;
  font-weight:900;
  font-size:13px;
  color:#111827;
}
.lv-user-item:hover{background: var(--primary-50);}
.lv-user-item.is-danger{color:#ef4444;}
.lv-user-item.is-danger:hover{background: rgba(239,68,68,.08);}
.lv-user-sep{height:1px; background: var(--border); margin:6px 6px;}

/* User menu points display */
.lv-user-menu-points{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 12px;
  background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
  border-radius:0;
  margin-bottom:4px;
}
.lv-user-menu-points-label{
  font-size:12px;
  font-weight:700;
  color:rgba(255,255,255,.6);
}
.lv-user-menu-points-value{
  font-size:18px;
  font-weight:900;
  color:#fff;
  letter-spacing:-.02em;
}

/* Topbar auth (guest) */
.lv-auth{display:flex; align-items:center; gap:10px;}
.lv-auth-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:0;
  border:1px solid var(--border);
  background:#fff;
  font-weight:1000;
  font-size:13px;
  letter-spacing:-.02em;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
  box-shadow: 0 10px 22px rgba(17,24,39,.08);
}
.lv-auth-btn:hover{background:#f9fafb;}
.lv-auth-btn:active{transform: translateY(1px);}
.lv-auth-btn.is-primary{
  border-color: rgba(17,24,39,.22);
  background: linear-gradient(90deg, #111827, #1f2937);
  color:#fff;
  box-shadow: 0 14px 22px rgba(17,24,39,.18);
}
.lv-auth-btn.is-primary:hover{filter:brightness(.98);}
.lv-auth-btn.is-ghost{background:#fff;}
.lv-auth-btn.is-ghost:hover{background: var(--primary-50); border-color: rgba(var(--primary-rgb), .22);}

@media (max-width: 520px){
  .lv-user-name{display:none;}
}

.lv-dot{
  position:absolute;
  top:7px; right:8px;
  width:8px; height:8px;
  border-radius:999px;
  background:#ef4444;
}
/* Mobile overlay */
.lv-overlay{display:none;}
@media (max-width: 980px){
  .lv-hamburger{display:inline-flex; align-items:center; justify-content:center;}
  .lv-overlay{
    display:block;
    position:fixed;
    inset:0;
    background: rgba(0,0,0,.36);
    opacity:0;
    pointer-events:none;
    transition: opacity .16s ease;
    z-index:45;
  }
  .lv-sidebar.is-open ~ .lv-overlay{opacity:1; pointer-events:auto;}
}

/* Content helpers */
.lv-row{display:flex; gap:24px; align-items:flex-start;}
.lv-col{min-width:0;}
.lv-col.main{flex:1;}
.lv-col.aside{width:360px; border-left:1px solid var(--border); background:#f9fafb; padding:24px;}

@media (max-width: 1100px){
  .lv-row{flex-direction:column;}
  .lv-col.aside{width:auto; border-left:0; padding:0; background:transparent;}
}

/* Cards */
.lv-card{
  background:#fff;
  /* border:1px solid var(--border); */
  border-radius:0;
  overflow:hidden;
}
.lv-card.pad{padding:20px;}

/* Legacy compatibility (older hub pages) */
.section{margin:0 0 24px;}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:0 0 14px;}
.section-head .title{font-size:19px; font-weight:700;}
.section-head .right{display:flex; align-items:center; gap:10px;}
.grid{display:grid; gap:12px;}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid.cols-hero{grid-template-columns:minmax(0,1fr) 380px;}
@media (max-width: 1100px){.grid.cols-hero{grid-template-columns:1fr;}}
.card{background:#fff; border:1px solid var(--border); border-radius:0; overflow:hidden;}
.card.pad{padding:22px;}
.card-title{font-weight:700; font-size:17px;}
.card-sub{margin-top:8px; color:rgba(17,24,39,.65); font-weight:500; font-size:14px;}
.card-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px;}
.crumb{display:flex; align-items:center; gap:8px; color:rgba(17,24,39,.60); font-weight:600; font-size:13px;}
.crumb svg{width:14px; height:14px; fill:rgba(17,24,39,.60);}
.actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.actions.start{justify-content:flex-start;}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:11px 14px;
  border-radius:0;
  border:1px solid var(--border);
  background:#fff;
  font-weight:600;
  font-size:14px;
  cursor:pointer;
}
.btn:hover{background:#f9fafb;}
.btn-primary{border-color: rgba(var(--primary-rgb), .24); background: var(--primary); color:#fff;}
.btn-primary:hover{filter:brightness(.97);}
.btn-ghost{background:#fff;}
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  font-weight:600;
  font-size:13px;
}
.badge.primary{background: var(--primary-50); border-color: rgba(var(--primary-rgb), .25); color: var(--primary);}
.mt-12{margin-top:12px;}
.mt-14{margin-top:14px;}
.no-mt{margin-top:0;}

/* Tables / forms */
.table{width:100%; border-collapse:separate; border-spacing:0; font-size:14px;}
.table th,.table td{padding:14px 14px; border-bottom:1px solid #f3f4f6; text-align:left; vertical-align:top;}
.table th{font-size:13px; color:rgba(17,24,39,.70); font-weight:600; background:#fafafa;}
.table tr:hover td{background:#fcfcfd;}
.field{display:flex; flex-direction:column; gap:10px;}
.label{font-weight:600; font-size:14px;}
.input,.select,.textarea{
  width:100%;
  border:1px solid var(--border);
  background:#fff;
  border-radius:0;
  padding:12px 14px;
  font-size:14px;
  outline:none;
}
.textarea{min-height:110px; resize:vertical;}
.input:focus,.select:focus,.textarea:focus{border-color: rgba(var(--primary-rgb), .35); box-shadow: 0 0 0 4px rgba(var(--primary-rgb), .12);}
.form-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px;}
.form-grid.full{grid-template-columns:1fr;}
@media (max-width: 680px){.form-grid{grid-template-columns:1fr;}}
.help{font-size:13px; color:rgba(17,24,39,.60); font-weight:500; line-height:1.6;}

/* Small icon buttons (menu manage) */
.icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  background:#fff;
  cursor:pointer;
  border-radius:0;
  padding:0;
  font-weight:1000;
  color:#111827;
}
.icon-btn:hover{background:#f9fafb;}

/* Banner slider */
.lv-slider{position:relative; border-radius:0; overflow:hidden;}
.lv-slides{display:flex; transition: transform .7s ease;}
.lv-slide{min-width:100%;}
.lv-hero{
  position:relative;
  height:485px;
  background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
  overflow:hidden;
}
.lv-hero-bg{
  position:absolute; inset:0;
  background: radial-gradient(900px 420px at 25% 25%, rgba(0,0,0,.05), transparent 55%);
  /* opacity:.6; */
}
.lv-hero-bg-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.lv-hero-overlay{
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.62), rgba(0,0,0,.18));
}
.lv-hero-inner{
  position:relative; z-index:1;
  height:100%;
  padding:44px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.lv-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  background:#fff;
  color:#111827;
  font-weight:900;
  font-size:12px;
}
.lv-dots{display:flex; gap:8px;}
.lv-dot-btn{
  width:8px; height:8px;
  border-radius:999px;
  border:0;
  background: rgba(255,255,255,.45);
  cursor:pointer;
}
.lv-dot-btn.is-active{width:28px; background:#fff;}
.lv-hero-title{color:#fff; font-weight:900; font-size:40px; line-height:1.15; margin:0 0 12px;}
.lv-hero-desc{color:rgba(255,255,255,.9); font-size:16px; line-height:1.7; margin:0;}
.lv-platforms{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px;}
.lv-platform{
  background: rgba(255,255,255,.94);
  border-radius:0;
  padding:14px;
  transition: transform .14s ease, background .14s ease;
}
.lv-platform:hover{transform: translateY(-2px); background:#fff;}
.lv-platform h4{margin:10px 0 4px; font-size:13px; font-weight:900;}
.lv-platform p{margin:0; font-size:12px; color:var(--muted); font-weight:600;}
.lv-arrow-btn{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  z-index: 5;
  background: rgba(255,255,255,.92);
  border:0;
  width:40px; height:40px;
  border-radius:999px;
  cursor:pointer;
}
.lv-arrow-btn:hover{background:#fff;}
.lv-arrow-btn.prev{left:14px;}
.lv-arrow-btn.next{right:14px;}

/* Services grid */
.lv-section-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:0 0 14px;
}
.lv-section-title h3{margin:0; font-size:22px; font-weight:900;}
.lv-ghost-link{font-weight:700; font-size:13px; color:rgba(17,24,39,.75); padding:10px 12px; border-radius:0;}
.lv-ghost-link:hover{background:#f9fafb;}
.lv-services{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px;}
@media (max-width: 1100px){.lv-services{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width: 680px){.lv-services{grid-template-columns:1fr;}.lv-platforms{grid-template-columns:repeat(2,minmax(0,1fr));}.lv-hero{height:520px;}}
.lv-svc{cursor:pointer;}
.lv-svc:hover{box-shadow: var(--shadow-sm);}
.lv-svc-head{padding:18px; border-bottom:1px solid #f3f4f6; display:flex; gap:12px; align-items:center;}
.lv-svc-ic{width:44px; height:44px; border-radius:0; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:900;}
.lv-svc-name{font-weight:900;}
.lv-svc-body{padding:14px 16px;}
.lv-svc-item{display:flex; align-items:center; gap:10px; font-size:12px; color:rgba(17,24,39,.65); padding:6px 0; font-weight:600;}
.lv-svc-item:hover{color:#111827;}

/* Right announcements */
.lv-aside-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.lv-aside-head h3{margin:0; font-size:18px; font-weight:900;}
.lv-count{background:#111827; color:#fff; border-radius:999px; padding:6px 10px; font-size:12px; font-weight:900;}
.lv-announce{display:flex; flex-direction:column; gap:10px;}
.lv-ann{
  background:#fff;
  border:1px solid var(--border);
  border-radius:0;
  padding:14px;
  cursor:pointer;
  transition: border-color .12s ease;
}
.lv-ann:hover{border-color:#111827;}
.lv-ann-row{display:flex; gap:12px; align-items:flex-start;}
.lv-ann-ic{width:34px; height:34px; border-radius:0; background:#f3f4f6; display:flex; align-items:center; justify-content:center;}
.lv-ann:hover .lv-ann-ic{background:#111827; color:#fff;}
.lv-ann-title{margin:0 0 6px; font-weight:900; font-size:13px; line-height:1.35;}
.lv-ann-date{margin:0; font-size:12px; color:var(--muted); font-weight:600;}

/* Notice (B&W list: PIN/NEW + hover focus) */
.lv-notice{
  background:#fff;
  border:1px solid var(--border);
  border-radius:0;
  padding:16px;
  box-shadow: 0 16px 30px rgba(17,24,39,.06);
}
.lv-notice-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin:0 0 12px;
}
.lv-notice-title{display:flex; flex-direction:column; gap:4px;}
.lv-notice-kicker{
  font-size:11px;
  font-weight:1000;
  letter-spacing:.18em;
  color: rgba(17,24,39,.45);
}
.lv-notice h3{
  margin:0;
  font-size:18px;
  font-weight:1000;
  letter-spacing:-.03em;
}
.lv-notice-more{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  /* border:1px solid var(--border); */
  background:#fff;
  color: rgba(17, 24, 39, .5);
  font-weight:600;
  font-size:12px;
  transition: background .12s ease, border-color .12s ease;
}
.lv-notice-more:hover{background:#f9fafb; border-color:#d1d5db;}

.lv-notice-list{display:flex; flex-direction:column; gap:2px;}
.lv-notice-divider{
  height:1px;
  background: linear-gradient(90deg, transparent, #e5e7eb 20%, #e5e7eb 80%, transparent);
  margin:10px 0;
}
.lv-notice-item{
  position:relative;
  display:grid;
  grid-template-columns: 52px 1fr auto;
  gap:10px;
  align-items:center;
  padding:10px 10px;
  border-radius:0;
  color:#111827;
  transition: background .12s ease;
}
.lv-notice-item:before{
  content:"";
  position:absolute;
  left:8px;
  top:10px;
  bottom:10px;
  width:2px;
  border-radius:999px;
  background: transparent;
  opacity:.0;
  transition: opacity .12s ease, background .12s ease;
}
.lv-notice-item:hover{background:#f9fafb;}
.lv-notice-item:hover:before{background:#111827; opacity:.85;}

.lv-notice-tag{
  justify-self:start;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:42px;
  padding:3px 8px;
  border:1px solid #e5e7eb;
  background:#fff;
  font-size:11px;
  font-weight:700;
  letter-spacing:.05em;
  color:#555;
}
.lv-notice-item.is-new .lv-notice-tag{
  background:#111827;
  border-color:#111827;
  color:#fff;
}
.lv-notice-tag.is-pin,
.lv-notice-item.is-pin .lv-notice-tag{
  background:#1a1a1a;
  border-color:#1a1a1a;
  color:#fff;
}
.lv-notice-tag.is-new{
  background:#1a1a1a;
  border-color:#1a1a1a;
  color:#fff;
}
.lv-notice-item.is-dot .lv-notice-tag{
  min-width:auto;
  padding:0;
  border-color:transparent;
  background:transparent;
  color: rgba(17,24,39,.35);
  letter-spacing:0;
}
.lv-notice-text{
  font-size:14px;
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1.3;
  color:#1a1a1a;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.lv-notice-date{
  font-size:12px;
  font-weight:700;
  color: rgba(17,24,39,.48);
  white-space:nowrap;
}

.lv-contact{margin-top:18px; padding-top:18px; border-top:1px solid var(--border);}
.lv-contact h4{margin:0 0 10px; font-size:13px; font-weight:900;}
.lv-contact-card{background:#fff; border:1px solid var(--border); border-radius:0; padding:14px;}
.lv-contact-card p{margin:0 0 12px; font-size:12px; color:rgba(17,24,39,.7); line-height:1.55; font-weight:600;}
.lv-kakao{display:flex; align-items:center; justify-content:center; gap:10px; background:#facc15; color:#111827; border-radius:0; padding:10px 12px; font-weight:900;}
.lv-kakao:hover{filter:brightness(.97);}

/* Toast */
.lv-toast{
  position:fixed;
  right:18px;
  bottom:18px;
  min-width:220px;
  max-width:360px;
  padding:12px 14px;
  border-radius:0;
  border:1px solid var(--border);
  background:#fff;
  box-shadow: var(--shadow);
  font-weight:900;
  font-size:13px;
  opacity:0;
  transform: translateY(10px);
  pointer-events:none;
  transition: opacity .14s ease, transform .14s ease;
}
.lv-toast.is-show{opacity:1; transform: translateY(0);}

/* Floating support (bottom-right) */
.lv-float{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:80;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
}
/* keep toast above float when both exist */
#toast{z-index:90;}

.lv-float-panel{
  display:flex;
  flex-direction:column;
  gap:10px;
  width:min(340px, calc(100vw - 36px));
}

.lv-float-item{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px 14px;
  border-radius:0;
  border:1px solid rgba(var(--primary-rgb), .22);
  background: rgba(255,255,255,.92);
  box-shadow: 0 16px 24px rgba(17,24,39,.12);
  font-weight:1000;
  font-size:12.5px;
  letter-spacing:-.01em;
  color:#111827;
  backdrop-filter: blur(10px);
}
.lv-float-item:hover{
  background:#fff;
  border-color: rgba(var(--primary-rgb), .36);
  transform: translateY(-1px);
}

/* Floating support widget (B&W + Kakao accent) */
.lv-support-float{width:min(360px, calc(100vw - 36px));}
.lv-support-card{
  width:100%;
  border-radius:0;
  border:1px solid rgba(17,24,39,.12);
  background: rgba(255,255,255,.92);
  box-shadow: 0 20px 34px rgba(17,24,39,.14);
  overflow:hidden;
  backdrop-filter: blur(14px);
}
.lv-support-head{
  padding:14px 14px 12px;
  border-bottom:1px solid rgba(17,24,39,.08);
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}
.lv-support-title{
  font-weight:1000;
  letter-spacing:-.03em;
  color:#111827;
  font-size:13px;
}
.lv-support-sub{
  font-weight:900;
  font-size:11px;
  color: rgba(17,24,39,.45);
  letter-spacing:.08em;
  text-transform: uppercase;
}
.lv-support-actions{display:flex; flex-direction:column; gap:10px; padding:12px 14px 14px;}
.lv-support-desc{
  margin:0;
  font-size:12px;
  font-weight:800;
  color: rgba(17,24,39,.62);
  line-height:1.5;
}
.lv-support-kakao{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:#facc15;
  color:#111827;
  border-radius:0;
  padding:12px 14px;
  font-weight:1000;
  box-shadow: 0 14px 20px rgba(250,204,21,.22);
}
.lv-support-kakao:hover{filter: brightness(.98);}
.lv-support-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  border-radius:0;
  border:1px solid rgba(17,24,39,.12);
  background:#fff;
  transition: border-color .12s ease, background .12s ease, transform .12s ease;
}
.lv-support-item:hover{
  border-color:#111827;
  background:#fbfbfb;
  transform: translateY(-1px);
}
.lv-support-item-text{
  font-weight:1000;
  font-size:12.5px;
  letter-spacing:-.01em;
  color:#111827;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

@media (max-width: 980px){
  .lv-float{right:14px; bottom:14px;}
  .lv-float-item{width:min(320px, calc(100vw - 28px));}
  .lv-support-float{width:min(340px, calc(100vw - 28px));}
}

.lv-badge.is-dark,
.lv-bn-badge.is-dark,
.lv-bn-preview-badge.is-dark,
.lv-sub-badge.is-dark{background:#0f172a !important; color:#fff !important; border-color:#0f172a !important;}
.lv-badge.is-red,
.lv-bn-badge.is-red,
.lv-bn-preview-badge.is-red,
.lv-sub-badge.is-red{background:#ef4444 !important; color:#fff !important; border-color:#ef4444 !important;}
.lv-badge.is-amber,
.lv-bn-badge.is-amber,
.lv-bn-preview-badge.is-amber,
.lv-sub-badge.is-amber{background:#facc15 !important; color:#0f172a !important; border-color:#facc15 !important;}
.lv-badge.is-green,
.lv-bn-badge.is-green,
.lv-bn-preview-badge.is-green,
.lv-sub-badge.is-green{background:#22c55e !important; color:#052e16 !important; border-color:#22c55e !important;}
.lv-badge.is-blue,
.lv-bn-badge.is-blue,
.lv-bn-preview-badge.is-blue,
.lv-sub-badge.is-blue{background:#3b82f6 !important; color:#fff !important; border-color:#3b82f6 !important;}
.lv-badge.is-slate,
.lv-bn-badge.is-slate,
.lv-bn-preview-badge.is-slate,
.lv-sub-badge.is-slate{background:#64748b !important; color:#fff !important; border-color:#64748b !important;}

.lv-badge.is-hot,
.lv-bn-badge.is-hot,
.lv-bn-preview-badge.is-hot,
.lv-sub-badge.is-hot{background:#facc15 !important; color:#0f172a !important; border-color:#facc15 !important;}
.lv-badge.is-new,
.lv-bn-badge.is-new,
.lv-bn-preview-badge.is-new,
.lv-sub-badge.is-new{background:#ef4444 !important; color:#fff !important; border-color:#ef4444 !important;}

/* Popups */
.lv-popup-root{position:static;}
.lv-popup{
    position:fixed;
    z-index:2000;
    background:#fff;
    border:1px solid #1a1a1a;
    box-shadow:0 20px 60px rgba(0,0,0,.2);
    width:360px;
    max-width:calc(100vw - 40px);
}
.lv-popup.is-center{top:50%; left:50%; transform:translate(-50%, -50%);}
.lv-popup.is-top{top:80px; left:50%; transform:translateX(-50%);}
.lv-popup.is-bottom{bottom:20px; left:50%; transform:translateX(-50%);}
.lv-popup.is-top-right{top:80px; right:20px;}
.lv-popup.is-bottom-right{bottom:20px; right:20px;}
.lv-popup-inner{display:flex; flex-direction:column;}
.lv-popup-head{display:flex; align-items:center; justify-content:space-between; padding:14px 18px; background:#1a1a1a; color:#fff;}
.lv-popup-title{font-size:14px; font-weight:700;}
.lv-popup-close{background:none; border:none; color:#fff; font-size:22px; cursor:pointer; padding:0; width:24px; height:24px; line-height:1;}
.lv-popup-img{display:block; background:#f5f5f5;}
.lv-popup-img img{width:100%; display:block;}
.lv-popup-body{padding:18px; font-size:14px; line-height:1.6; color:#1a1a1a;}
.lv-popup-link{display:block; padding:12px 18px; background:#1a1a1a; color:#fff; text-align:center; font-size:13px; font-weight:700; text-decoration:none;}
.lv-popup-link:hover{background:#333;}
.lv-popup-foot{padding:12px 18px; border-top:1px solid #f0f0f0; display:flex; align-items:center; justify-content:flex-start;}
.lv-popup-dismiss{display:flex; align-items:center; gap:8px; font-size:13px; color:#555; cursor:pointer;}
.lv-popup.is-closed{display:none;}

.lv-credit-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 24px;border-top:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5;background:#fff;font-size:14px;color:#1a1a1a;}
.lv-credit-banner.is-warn{color:#1a1a1a;}
.lv-credit-banner.is-danger{color:#dc2626;}
.lv-credit-banner.is-danger strong{color:#dc2626;}
.lv-credit-banner-text strong{font-variant-numeric:tabular-nums;font-weight:700;}
.lv-credit-banner-cta{font-size:14px;color:inherit;text-decoration:none;font-weight:600;}
.lv-credit-banner-cta:hover{text-decoration:underline;}

.lv-overdue-modal{position:fixed;inset:0;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;z-index:10000;padding:20px;}
.lv-overdue-inner{background:#fff;max-width:380px;width:100%;padding:48px 36px;border:1px solid #1a1a1a;}
.lv-overdue-title{text-align:center;font-size:18px;font-weight:700;margin-bottom:28px;color:#1a1a1a;}
.lv-overdue-stats{margin-bottom:32px;}
.lv-overdue-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #f0f0f0;font-size:14px;font-variant-numeric:tabular-nums;}
.lv-overdue-row span:first-child{color:#666;}
.lv-overdue-row span:last-child{color:#dc2626;font-weight:700;}
.lv-overdue-actions{display:flex;flex-direction:column;align-items:center;gap:16px;}
.lv-overdue-cta{display:block;width:100%;padding:14px;background:#1a1a1a;color:#fff;text-align:center;text-decoration:none;font-size:14px;font-weight:600;}
.lv-overdue-cta:hover{background:#000;}
.lv-overdue-dismiss{background:none;border:none;font-size:13px;color:#999;cursor:pointer;padding:0;font-family:inherit;}
.lv-overdue-dismiss:hover{color:#666;text-decoration:underline;}

.lv-noti-credit{display:flex;gap:12px;align-items:flex-start;}
.lv-noti-dot{display:inline-block;color:#666;font-size:10px;margin-top:2px;}
.lv-noti-dot.is-warn{color:#1a1a1a;}
.lv-noti-dot.is-danger{color:#dc2626;}
.lv-noti-body{flex:1;}
.lv-noti-read-all{background:none;border:none;width:100%;padding:10px;font-size:12px;color:#666;cursor:pointer;border-top:1px solid #f0f0f0;font-family:inherit;}
.lv-noti-read-all:hover{color:#1a1a1a;}