:root{
    --bg: linear-gradient(180deg, #fff9ed 0%, #f7f9fc 60%);
    --card:#ffffff;
    --text:#111827;
    --muted:#6b7280;
    --line:#e5e7eb;
    --shadow: 0 16px 40px rgba(0,0,0,.08);
    --radius: 18px;
  }
  
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans KR", sans-serif;
    color:var(--text);
    background: var(--bg);
    background-attachment: fixed;
  }
  
  a{color:inherit;text-decoration:none}
  .wrap{max-width:1180px;margin:0 auto;padding:18px 16px}
  
/* =========================
   ✅ Topbar (로고 크게/텍스트 숨김/정렬)
========================= */
.topbar{
    background: rgba(255,255,255,.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 50;
  }
  
  /* ✅ 로고 박스가 "키"를 결정한다 */
.logo-wrap{
    height:120px;                /* ✅ 여기 숫자 올리면 확 커짐 (예: 64px, 72px) */
    display:flex;
    align-items:center;
  }
  
  .topbar-inner{
    max-width: 1180px;
    margin: 0 auto;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 18px;
  }
  
  /* ✅ 로고 영역 */
.brand{
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: unset;             /* 기존 220px 같은거 있으면 제거 */
  }
  
  /* ✅ 로고 이미지 크게 (핵심) */
  .brand-logo{
    height:100%;                /* ✅ 로고는 박스 높이를 그대로 먹게 */
    width:auto;
    object-fit:contain;
    display:block;
  }
  
  /* ✅ 로고 옆 텍스트는 안 보이게 */
  .brand-text{
    display: none;
  }
  
  /* (텍스트 쓰면 여기 사용)
  .brand-text{line-height:1}
  .brand-title{font-weight:900}
  .brand-sub{font-size:12px;color:var(--muted);letter-spacing:.16em;margin-top:4px}
  */
  
  
/* ✅ 가운데 메뉴 */
.nav{
    display:flex;
    align-items:center;
    gap:16px;
    flex:1;
    justify-content:center;
  }
  
  .nav a{
    font-weight:800;
    font-size:14px;
    padding:8px 10px;
    border-radius:999px;
  }
  .nav a:hover{
    background:#f3f4f6;
  }
  /* ✅ 우측 버튼 */
.top-actions{
    display:flex;
    gap:10px;
  }
  
/* =========================
   ✅ Mobile header tune (ONLY)
   ========================= */
   @media (max-width: 768px){

    /* 헤더 좌우 여백/정렬 */
    .topbar-inner{
      padding: 8px 10px;
      gap: 10px;
    }
  
    /* ✅ 이미지 로고: 가로 고정 금지 + 왼쪽 정렬 + 화면폭 안에서 자동 줄이기 */
.brand-logo{
    height: 120px;                      /* ✅ 로고 크기(원하면 52~64 조절) */
    width: auto;                       /* ✅ 가로 고정 제거 */
    max-width: calc(100vw - 110px);    /* ✅ 화면폭 - (햄버거/패딩) 만큼만 허용 */
    object-fit: contain;
    object-position: left center;      /* ✅ 로고를 왼쪽으로 붙임 */
    display: block;
  }
  
  /* ✅ 로고 영역이 밀리지 않게 */
  .brand{
    flex: 1;
    min-width: 0;
  }
  
  /* ✅ 로고 래퍼 높이도 로고에 맞춤(기존 120px 영향 최소화) */
  .logo-wrap{
    height: 56px;
  }        
  
    /* 네비 중앙정렬이 모바일에서 어색하면 숨김(원래 모바일은 버튼/메뉴로 빼는 게 보통) */
    .nav{
      display: none;
    }
  
    /* 우측 버튼(관리자/후원하기) 정렬 */
    .top-actions{
      margin-left: auto;
      gap: 8px;
    }
  
    /* 버튼이 너무 커서 답답하면 살짝 줄이기 */
    .top-actions .btn{
      padding: 8px 12px;
      border-radius: 14px;
      font-size: 13px;
      font-weight: 800;
    }  
  
    /* 네비는 모바일에서 길면 어색하니 숨기거나(추천) */
    .nav{
      display: none;
    }
  }    
  
  /* =========================
   Mobile Hamburger + Drawer (FINAL)
   - 이 블록 1개만 유지
   ========================= */

/* ✅ 헤더 정렬(삼선이 화면 밖으로 밀리는 것 방지) */
.topbar-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }
  
  /* ✅ 햄버거 버튼(☰ 문자 버전) */
  .hamburger{
    width:42px;
    height:42px;
    border:1px solid rgba(0,0,0,.12);
    background:#fff;
    border-radius:12px;
  
    display:none; /* PC 기본 숨김 */
    align-items:center;
    justify-content:center;
  
    padding:0;
    cursor:pointer;
  
    font-size:26px;
    line-height:1;
    font-weight:900;
  
    position:relative;
    z-index:99999;
  }
  
  /* ✅ 모바일 메뉴 오버레이 */
  .mnav{
    position:fixed;
    inset:0;
    z-index:99990;
    display:none;
  }
  .mnav.on{ display:block; }
  
  .mnav-backdrop{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.35);
    z-index: 0;   
  }
  
  .mnav-panel{
    position:absolute;
    top:0; right:0;
    width:min(48vw, 180px); 
    height:100%;
    background:#fff;
    box-shadow:-10px 0 30px rgba(0,0,0,.15);
    transform:translateX(100%);
    transition:transform .22s ease;
    display:flex;
    flex-direction:column;
    z-index: 1;     
  }
  .mnav.on .mnav-panel{ transform:translateX(0); }
  
  .mnav-head{
    position: relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 14px;
    border-bottom:1px solid rgba(0,0,0,.06);
    z-index: 2; /* ✅ 헤더를 위로 */
  }
  
  .mnav-title{ font-weight:900; }
  .mnav-close{
    width:38px;
    height:38px;
    border:1px solid rgba(0,0,0,.18);
    background:#fff;
    border-radius:12px;
    cursor:pointer;
  
    display:inline-flex;          /* ✅ 보이게 */
    align-items:center;
    justify-content:center;
  
    font-size:18px;
    font-weight:900;
    line-height:1;
    color:#111;
  
    position:relative;            /* ✅ 다른 CSS에 밀려도 살아남게 */
    z-index:2;                    /* ✅ 위로 */
  }
  
  /* ✅ 평범한 메뉴 리스트 */
  .mnav-links{
    padding:8px 0;
    display:block;
    background:#fff;
  }
  .mnav-links a{
    display:block;
    padding:14px 16px;
    text-decoration:none;
    color:#111;
    font-weight:800;
    border-bottom:1px solid rgba(0,0,0,.06);
    background:transparent;
  }
  .mnav-links a:hover{ background:rgba(0,0,0,.04); }
  
  .mnav-actions{
    margin-top:auto;
    padding:12px 16px 16px;
    display:grid;
    gap:10px;
    background:#fff;
  }
  
  /* ✅ 모바일: PC nav/actions 숨기고 햄버거 표시 */
  @media (max-width: 768px){
    .hamburger{ display:flex; }
    #pcNav{ display:none !important; }
    #pcActions{ display:none !important; }
  }
  
  /* ✅ PC: 햄버거 숨김 */
  @media (min-width: 769px){
    .hamburger{ display:none !important; }
  }  
  
  /* ✅ PC: 햄버거 숨김(명시) */
  @media (min-width: 769px){
    .hamburger{ display:none !important; }
  }  
  
  /* =========================
     ✅ Buttons
  ========================= */
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 14px;
    border-radius:999px;
    font-weight:900;
    font-size:13px;
    border:1px solid transparent;
    cursor:pointer;
    user-select:none;
  }
  .btn-dark{
    background:#ffb703;
    color:#111;
  }
  .btn-dark:hover{
    background:#ffa500;
  }
  
  .btn-outline{
    background:#fff;
    border-color:var(--line);
  }
  .btn-outline:hover{background:#f9fafb}
  
/* =========================
   ✅ Hero (image-ready) - FIX
========================= */
.hero{
  position:relative;
  width:100%;
  height:260px;
  overflow:hidden;
  border-bottom:1px solid var(--line);
  background: #f7f9fc; /* ✅ 이미지가 있으니 강한 배경 그라데이션 제거 */
}

.hero-img{
  height: 280px;
  margin-bottom: 34px;
}

.hero-photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transform:none;      /* ✅ 뿌연 느낌 줄이기 */
  filter:none;         /* ✅ 원본 선명도 유지 */
  display:block;
}

.hero-overlay{
  position:absolute;
  inset:0;
  background: transparent;
  pointer-events:none;
}
  
  /* =========================
     ✅ Main Card (center)
  ========================= */
  .main-card{
    margin-top:-20px;
    background:var(--card);
    border:1px solid #fff3da;
    border-radius: 6px;
    box-shadow: 0 25px 60px rgba(255, 186, 59, 0.25);
    padding:32px;
    display:grid;
    grid-template-columns: 1.25fr 1fr;
    gap:24px;
    align-items:center;
  }  
  
  .main-title{
    margin:0;              /* ✅ 2px 제거(정렬/간격 안정) */
    font-size:30px;
    line-height:1.26;      /* ✅ 1.5 → 1.26 (줄간격 '조금' 여유) */
    font-weight:1000;
    letter-spacing:-0.03em; /* ✅ -0.05 → -0.03 (덜 뭉개짐) */
  }
  
  .main-title-sm{
    font-size:32px;   /* ← 원하는 크기로 조절 */
  }
  
  .main-desc{
    margin:14px 0 0 0;
    color:var(--muted);
    line-height:1.6;
    font-size:14px;
  }
  .main-actions{
    margin-top:16px;
    display:flex;
    gap:10px;
    flex-wrap:wrap;
  }
  
  .main-right{
    display:flex;
    justify-content:center;
    align-items:center;
  }
  .main-illust{
    width:min(440px, 100%);
    max-height:240px;
    object-fit:contain;
    display:block;
  }
  /* =========================
   ✅ Main hero card (right image area)
========================= */
.main-card{
    display:grid;
    grid-template-columns: 1.15fr .85fr; /* ✅ 오른쪽 이미지 칸 확보 */
    gap:24px;
    align-items:center;
  
    /* ✅ 아래 미니카드와 간격 너무 넓으면 여기 조정 */
    margin-bottom: 14px; /* 필요하면 8~24 사이로 조절 */
  }
  
  .main-left{min-width:0;}
  .main-title{
    margin:0;
    font-size:44px;
    line-height:1.06;
    font-weight:1000;
    letter-spacing:-0.03em;
  }
  .main-desc{
    margin:16px 0 0 0;
    color:var(--muted);
    line-height:1.7;
  }
  .main-actions{
    margin-top:18px;
    display:flex;
    gap:10px;
    flex-wrap:wrap;
  }
  
  /* ✅ 오른쪽 이미지 영역 (배경 제거 + 꽉 채우기 + 가장자리 페더) */
  .main-right{
    position:relative;
    height:100%;
    min-height:10px;
    border-radius:22px;
    overflow:hidden;
  
    /* ✅ 배경(바탕) 제거 */
    background: transparent;
  
    /* ✅ 이미지가 영역을 꽉 채우도록 */
    display:block;
  }
  
  /* ✅ 이미지: 영역 전체 cover */
  .main-illust{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;   /* ✅ 전체 보이게 */
    object-position:center;
    background: transparent;
    transform: scale(1.03);
    z-index:1;
  
    /* 이미지가 둥근 모서리 안에서 자연스럽게 */
    border-radius:12px;
  }
  
  /* ✅ 가장자리 뿌옇게(페더) 오버레이 */
  .main-right::after{
    content:"";
    position:absolute;
    inset:-2px;
    z-index:2;
    border-radius:22px;
    pointer-events:none;
  
    /* 중앙은 투명, 가장자리로 갈수록 하얗게/부드럽게 */
    background:
      radial-gradient(circle at 50% 50%,
        rgba(255,255,255,0) 58%,
        rgba(255,255,255,0.45) 78%,
        rgba(255,255,255,0.90) 100%);
  }
  
  /* ✅ 기존 blob은 더 이상 사용 안 함 */
  .main-blob{ display:none; }
  
  /* ✅ 반응형: 모바일에서는 이미지 아래로 */
  @media (max-width: 820px){
    .main-card{
      grid-template-columns: 1fr;
      margin-bottom: 2px; /* 모바일에서 간격 조금 더 줄임 */
    }
    .main-right{min-height:250px;}
    .main-title{font-size:34px;}
  }  
  
  /* =========================
     ✅ 3 mini cards
  ========================= */
  .grid3{
    margin-top:18px;
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:14px;
  }
  .mini-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius: 6px;
    padding:16px;
    box-shadow: 0 10px 22px rgba(0,0,0,.05);
    transition: transform .12s ease, box-shadow .12s ease;
  }
  .mini-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 16px 30px rgba(0,0,0,.08);
  }
  .mini-ico{font-size:22px}
  .mini-title{margin-top:10px;font-weight:1000}
  .mini-desc{margin-top:6px;color:var(--muted);font-size:13px;line-height:1.5}
  
 /* =========================
   ✅ Footer: 1-line grid
========================= */
.footer{
    background:#fff;
    border-top:1px solid #e9edf3;
    margin-top:26px;
  }
  
  .footer-inner{
    max-width:1100px;
    margin:0 auto;
    padding:22px 16px 16px;
  }
  
  .foot-grid3{
    display:grid;
    grid-template-columns: 1.25fr 0.9fr 1.25fr; /* ✅ 1라인 3칸 */
    gap:22px;
    align-items:start;
  }
  
  /* 텍스트/링크 기본 */
  .foot-title{
    font-weight:900;
    font-size:14px;
    margin:0 0 10px 0;
  }
  
  .foot-muted{
    color:#6b7280;
    font-size:13px;
    line-height:1.7;
  }
  
  .foot-links2{
    display:grid;
    grid-template-columns: 1fr 1fr; /* ✅ 2열로 깔끔 */
    gap:8px 14px;
  }
  
  .foot-links2 a{
    color:#111827;
    text-decoration:none;
    font-weight:800;
    font-size:13px;
  }
  
  .foot-links2 a:hover{
    text-decoration:underline;
  }
  
  .foot-actions{
    margin-top:12px;
    display:flex;
    gap:10px;
    flex-wrap:wrap;
  }
  
  .foot-bottom{
    margin-top:18px;
    padding-top:12px;
    border-top:1px dashed #e9edf3;
    color:#94a3b8;
    font-size:12px;
  }
  
  /* ✅ 반응형: 모바일에서는 2줄(2칸 -> 1칸) */
  @media (max-width: 820px){
    .foot-grid3{
      grid-template-columns: 1fr;
      gap:16px;
    }
    .foot-links2{
      grid-template-columns: 1fr 1fr;
    }
  }
  
  /* =========================
     ✅ Responsive
  ========================= */
  @media (max-width: 980px){
    .nav{display:none}
    .brand{min-width:auto}
    .main-card{
      grid-template-columns: 1fr;
      margin-top:-55px;
    }
    .main-title{font-size:28px}
    .grid3{grid-template-columns:1fr}
  }
  
  /* =========================
   ✅ Page helpers
========================= */
.site{min-height:100vh; display:flex; flex-direction:column;}
.page{flex:1;}

.page-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius: 18px;
  padding:20px;
  box-shadow: 0 10px 22px rgba(0,0,0,.05);
}
.page-h1{margin:0; font-size:26px; font-weight:1000;}
.page-muted{margin:8px 0 0 0; color:var(--muted); line-height:1.6;}
.page-section{margin-top:16px;}
.page-section h3{margin:0 0 8px 0;}
.page-list{margin:0; padding-left:18px; color:#374151;}
.page-grid{margin-top:16px;}

.news-list{margin-top:14px; display:grid; gap:10px;}
.news-item{
  display:block;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
}
.news-item:hover{background:#f9fafb}
.news-title{font-weight:1000}
.news-meta{margin-top:6px; font-size:12px; color:var(--muted)}

.form2{margin-top:14px; display:grid; gap:12px;}
.form-row{display:grid; gap:8px;}
textarea{
  padding:12px;
  border-radius:12px;
  border:1px solid var(--line);
  resize:vertical;
}

/* =========================
   ✅ Footer (pretty)
========================= */
.footer{
  background:#fff;
  border-top:1px solid var(--line);
  margin-top:26px;
}
.footer-inner{
  max-width:1180px;
  margin:0 auto;
  padding:22px 16px;
}
.foot-grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap:18px;
}
.foot-brand .foot-name{font-weight:1000}
.foot-brand .foot-sub{font-size:12px; color:var(--muted); letter-spacing:.12em; margin-top:4px}
.foot-title{font-weight:1000; margin-bottom:10px}
.foot-muted{color:var(--muted); font-size:13px; line-height:1.6}
.foot-links{display:grid; gap:8px}
.foot-links a{color:#111827; font-weight:800; font-size:13px}
.foot-links a:hover{text-decoration:underline}
.foot-actions{margin-top:12px; display:flex; gap:10px; flex-wrap:wrap}
.foot-bottom{
  margin-top:18px;
  padding-top:14px;
  border-top:1px dashed var(--line);
  color:var(--muted);
  font-size:12px;
}

@media (max-width: 980px){
  .foot-grid{grid-template-columns:1fr}
}
.donate-box{
  margin-top:16px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px;
}
.donate-title{font-weight:1000}
.donate-desc{margin-top:8px;color:var(--muted)}
.donate-actions{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap}
/* =========================
   PREMIUM TOPBAR (Animated)
========================= */
.topbar-premium{
  position: sticky; top:0; z-index:999;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(15, 23, 42, .08);
  box-shadow: 0 10px 30px rgba(2,6,23,.06);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.topbar-premium.is-compact{
  box-shadow: 0 6px 18px rgba(2,6,23,.06);
}

.topbar-inner{
  max-width: 1180px;
  margin: 0 auto;
  padding: 10px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}

/* brand */
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.logo-wrap{width:44px; height:44px; border-radius:14px; overflow:hidden; display:grid; place-items:center;
  background: radial-gradient(120% 120% at 20% 20%, rgba(255,210,80,.45), rgba(255,255,255,.2));
  border: 1px solid rgba(15, 23, 42, .08);
  box-shadow: 0 10px 24px rgba(2,6,23,.08);
}
.brand-logo{height:34px; width:auto}
.brand-text{display:flex; flex-direction:column; line-height:1.05}
.brand-title{font-weight:900; letter-spacing:-.4px; color:#111827; font-size:1.05rem}
.brand-sub{font-weight:700; color: rgba(17,24,39,.55); font-size:.78rem; letter-spacing:.12em}

/* nav */
.nav-premium{
  position: relative;
  display:flex; align-items:center; gap:10px;
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(2,6,23,.03);
  border: 1px solid rgba(2,6,23,.06);
  overflow:hidden;
}

.nav-link{
  position: relative;
  padding: 10px 12px;
  border-radius: 999px;
  text-decoration:none;
  color: rgba(17,24,39,.82);
  font-weight: 800;
  letter-spacing: -.2px;
  transition: color .2s ease, transform .2s ease;
  will-change: transform;
}
.nav-link:hover{color:#111827; transform: translateY(-1px)}
.nav-link:active{transform: translateY(0px) scale(.98)}

/* moving highlight */
.nav-ink{
  position:absolute;
  top:6px; left:6px;
  height: calc(100% - 12px);
  width: 80px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 200, 80, .55), rgba(255, 255, 255, .9));
  box-shadow: 0 10px 24px rgba(2,6,23,.10);
  transform: translateX(0);
  transition: transform .28s cubic-bezier(.2,.8,.2,1), width .28s cubic-bezier(.2,.8,.2,1), opacity .2s ease;
  opacity: 0;
  pointer-events:none;
}

/* actions */
.top-actions-premium{display:flex; align-items:center; gap:10px}

/* button animator */
.btn-anim{position:relative; overflow:hidden; transform: translateZ(0)}
.btn-anim .btn-shine{
  position:absolute; inset:-40%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0));
  transform: translateX(-60%) rotate(20deg);
  opacity:.0;
}
.btn-anim:hover .btn-shine{
  opacity:1;
  animation: btnShine .9s ease;
}
@keyframes btnShine{
  0%{transform: translateX(-60%) rotate(20deg); opacity:0}
  10%{opacity:1}
  100%{transform: translateX(60%) rotate(20deg); opacity:0}
}

/* hamburger premium */
.hamburger-premium{
  display:none;
  width:44px; height:44px;
  border-radius: 12px;
  border: 1px solid rgba(2,6,23,.10);
  background: rgba(255,255,255,.9);
  box-shadow: 0 10px 24px rgba(2,6,23,.08);
  cursor:pointer;
  position:relative;
}
.hamburger-premium span{
  position:absolute; left:12px; right:12px;
  height:2px; border-radius: 99px;
  background: rgba(17,24,39,.85);
  transition: transform .25s ease, top .25s ease, opacity .2s ease;
}
.hamburger-premium span:nth-child(1){top:15px}
.hamburger-premium span:nth-child(2){top:21px}
.hamburger-premium span:nth-child(3){top:27px}

/* when menu open (aria-expanded=true) */
.hamburger-premium[aria-expanded="true"] span:nth-child(1){top:21px; transform: rotate(45deg)}
.hamburger-premium[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger-premium[aria-expanded="true"] span:nth-child(3){top:21px; transform: rotate(-45deg)}

/* responsive */
@media (max-width: 900px){
  .nav-premium{display:none}
  #pcActions .btn{display:none}
  .hamburger-premium{display:inline-block}
}

/* =========================
   AUTH (LOGIN) - Premium
========================= */
.auth-wrap{
  min-height: calc(100vh - 220px);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding: 34px 16px 60px;
}

.auth-card{
  width: min(520px, 100%);
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(2,6,23,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 22px 22px 18px;
  animation: authPop .35s cubic-bezier(.2,.9,.2,1);
}
@keyframes authPop{
  from{transform: translateY(8px); opacity:.0}
  to{transform: translateY(0); opacity:1}
}

.auth-head{padding: 6px 4px 10px}
.auth-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: .18em;
  font-size: .72rem;
  color: rgba(17,24,39,.72);
  background: rgba(2,6,23,.04);
  border: 1px solid rgba(2,6,23,.08);
}
.auth-title{
  margin: 10px 0 6px;
  font-size: 1.6rem;
  letter-spacing: -.6px;
}
.auth-sub{margin:0; color: rgba(17,24,39,.65)}

.auth-alert{
  margin: 12px 0 8px;
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(239,68,68,.08);
  border: 1px solid rgba(239,68,68,.22);
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.auth-alert-dot{
  width:10px; height:10px; border-radius:99px;
  background: rgba(239,68,68,.9);
  margin-top: 5px;
}
.auth-alert-text{color: rgba(127,29,29,.95); font-weight: 800}

.auth-form{margin-top: 10px}

.auth-field{margin: 12px 0}
.auth-label{
  display:block;
  margin: 0 0 6px;
  font-weight: 900;
  color: rgba(17,24,39,.85);
  letter-spacing: -.2px;
}

.auth-input{
  border-radius: 14px;
  border: 1px solid rgba(2,6,23,.12);
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 20px rgba(2,6,23,.06);
  overflow:hidden;
}
.auth-input input{
  width:100%;
  border:0;
  outline:none;
  padding: 13px 14px;
  font-size: 1rem;
  background: transparent;
}

.auth-input:focus-within{
  border-color: rgba(245,158,11,.55);
  box-shadow: 0 12px 26px rgba(245,158,11,.12);
}

.auth-input-pw{position:relative}
.pw-toggle{
  position:absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid rgba(2,6,23,.10);
  background: rgba(2,6,23,.04);
  color: rgba(17,24,39,.75);
  border-radius: 10px;
  padding: 7px 10px;
  font-weight: 900;
  cursor:pointer;
}
.pw-toggle:hover{background: rgba(2,6,23,.07)}

.auth-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin: 10px 2px 14px;
}

.auth-check{display:flex; align-items:center; gap:8px; font-weight: 800; color: rgba(17,24,39,.7)}
.auth-check input{width:16px; height:16px}

.auth-link{
  text-decoration:none;
  font-weight: 900;
  color: rgba(37,99,235,.95);
}
.auth-link:hover{text-decoration:underline}

.auth-btn{
  width:100%;
  border:0;
  cursor:pointer;
  border-radius: 14px;
  padding: 13px 14px;
  font-size: 1.02rem;
  font-weight: 1000;
  letter-spacing: -.2px;
  background: #f0b410; /* 너 사이트 톤 유지 */
  color: #111;
  box-shadow: 0 16px 30px rgba(240,180,16,.22);
  position:relative;
  overflow:hidden;
  transform: translateZ(0);
}
.auth-btn:hover{filter: brightness(1.02)}
.auth-btn:active{transform: translateY(1px)}
.auth-btn-shine{
  position:absolute; inset:-40%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.60), rgba(255,255,255,0));
  transform: translateX(-60%) rotate(20deg);
  opacity:0;
}
.auth-btn:hover .auth-btn-shine{
  opacity:1;
  animation: authShine .9s ease;
}
@keyframes authShine{
  0%{transform: translateX(-60%) rotate(20deg); opacity:0}
  10%{opacity:1}
  100%{transform: translateX(60%) rotate(20deg); opacity:0}
}

.auth-foot{margin-top: 12px; text-align:center}
.auth-foot-muted{color: rgba(17,24,39,.55); font-weight: 800}

/* =========================
   ADMIN DASHBOARD - Premium
========================= */
.admin-wrap{
  max-width: 1180px;
  margin: 0 auto;
  padding: 22px 16px 70px;
}

.admin-hero{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
  padding: 18px 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(2,6,23,.08);
  box-shadow: 0 16px 40px rgba(2,6,23,.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.admin-kicker{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(2,6,23,.10);
  background: rgba(2,6,23,.04);
  font-weight: 1000;
  letter-spacing: .18em;
  font-size: .72rem;
  color: rgba(17,24,39,.72);
}

.admin-title{
  margin: 10px 0 6px;
  font-size: 1.8rem;
  letter-spacing: -.8px;
}

.admin-sub{
  margin: 0;
  color: rgba(17,24,39,.65);
  font-weight: 700;
}

.admin-meta{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin-top: 12px;
}

.admin-pill{
  display:inline-flex;
  gap: 6px;
  align-items:center;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(2,6,23,.10);
  background: rgba(255,255,255,.7);
  color: rgba(17,24,39,.78);
  font-weight: 800;
}
.admin-pill-soft{background: rgba(245,158,11,.10); border-color: rgba(245,158,11,.28)}

.admin-hero-right{display:flex; gap:10px; align-items:center}

.a-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 42px;
  padding: 0 14px;
  border-radius: 12px;
  font-weight: 1000;
  text-decoration:none;
  letter-spacing: -.2px;
  border: 1px solid rgba(2,6,23,.10);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.a-btn:hover{transform: translateY(-1px)}
.a-btn:active{transform: translateY(0px)}
.a-btn-dark{
  background:#111827;
  color:#fff;
  box-shadow: 0 14px 26px rgba(17,24,39,.18);
}
.a-btn-outline{
  background: rgba(255,255,255,.85);
  color: rgba(17,24,39,.88);
}

/* quick cards */
.admin-quick{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.quick-card{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 14px 14px;
  border-radius: 16px;
  text-decoration:none;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(2,6,23,.08);
  box-shadow: 0 14px 30px rgba(2,6,23,.06);
  transition: transform .18s ease, box-shadow .18s ease;
}
.quick-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(2,6,23,.10);
}

.quick-ic{
  width: 44px; height: 44px;
  border-radius: 14px;
  display:grid; place-items:center;
  background: radial-gradient(120% 120% at 20% 20%, rgba(255,210,80,.40), rgba(255,255,255,.25));
  border: 1px solid rgba(2,6,23,.08);
  font-size: 20px;
}

.quick-title{font-weight:1000; color:#111827; letter-spacing:-.2px}
.quick-desc{font-weight:800; color: rgba(17,24,39,.60); font-size:.92rem; margin-top:2px}
.quick-go{
  margin-left:auto;
  font-weight:1000;
  color: rgba(37,99,235,.95);
}

/* main grid */
.admin-grid{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.admin-card{
  border-radius: 18px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(2,6,23,.08);
  box-shadow: 0 18px 46px rgba(2,6,23,.08);
  padding: 16px 16px 14px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.admin-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 60px rgba(2,6,23,.12);
}

.admin-card-head{
  display:flex;
  align-items:flex-start;
  gap: 12px;
}

.admin-card-ic{
  width: 44px; height:44px;
  border-radius: 14px;
  display:grid; place-items:center;
  background: rgba(2,6,23,.04);
  border: 1px solid rgba(2,6,23,.08);
  font-size: 20px;
}

.admin-card-title{margin:0; font-size:1.1rem; letter-spacing:-.3px}
.admin-card-sub{margin:4px 0 0; color: rgba(17,24,39,.62); font-weight:800}

.admin-chip{
  margin-left:auto;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(245,158,11,.16);
  border: 1px solid rgba(245,158,11,.30);
  font-weight:1000;
  color: rgba(120,53,15,.95);
  font-size: .78rem;
}
.admin-chip-soft{
  background: rgba(2,6,23,.04);
  border-color: rgba(2,6,23,.08);
  color: rgba(17,24,39,.70);
}

.admin-list{
  margin: 12px 0 12px;
  padding-left: 18px;
  color: rgba(17,24,39,.72);
  font-weight: 800;
}
.admin-list li{margin: 6px 0}

.admin-card-actions{
  display:flex;
  gap: 10px;
  margin-top: 8px;
}

/* responsive */
@media (max-width: 980px){
  .admin-quick, .admin-grid{grid-template-columns: 1fr}
  .admin-hero{flex-direction:column; align-items:stretch}
  .admin-hero-right{justify-content:flex-start}
}
.a-btn-disabled{
  background: rgba(2,6,23,.06);
  color: rgba(17,24,39,.55);
  border-color: rgba(2,6,23,.10);
  cursor: not-allowed;
  box-shadow: none !important;
  transform: none !important;
}

/* footer background purple */
.footer{
  background: #63389d !important;
  color: #ffffff;
  border-top: none;
}

/* 푸터 안 링크 흰색 */
.footer a{
  color: #ffffff;
  opacity: 0.9;
}

.footer a:hover{
  opacity: 1;
}

/* 푸터 안 작은 텍스트도 흰색 */
.footer p,
.footer div,
.footer span{
  color: #ffffff;
}
/* footer logo image only */
.footer-logo{
  height: 60px;
  width: auto;
  display: block;
}
/* =========================
   FOOT ACTIONS (under logo) - FINAL
========================= */
.footer .foot-actions{
  margin-top: 12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

/* 공통 버튼 */
.footer .foot-actions .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 16px;
  border-radius:999px;
  font-weight:900;
  text-decoration:none;

  /* ✅ 푸터 링크 흰색 강제 덮어쓰기 */
  color:#111827 !important;
  -webkit-text-fill-color:#111827 !important;
  border:1px solid rgba(255,255,255,.18);
}

/* 후원하기 (노랑) */
.footer .foot-actions .btn-dark{
  background:#f6c343 !important;
  border-color:#f6c343 !important;
}

/* 문의하기 (흰색) */
.footer .foot-actions .btn-outline{
  background:#ffffff !important;
  border-color:#ffffff !important;
}

.footer .foot-actions .btn:hover{
  opacity:.92;
}

/* header logo image only */
.brand{
  display:flex;
  align-items:center;
  gap:0;
}

.brand-text{ display:none !important; }

.brand-logo{
  height: 120px;   /* PC */
  width: auto;
  display:block;
}

@media (max-width: 768px){
  .brand-logo{ height: 38px; } /* 모바일 */
}

/* =========================
   TOPBAR: glass + living 느낌
========================= */

/* 상단 전체: 살짝 빛나는 그라데이션 배경 + blur */
.topbar{
  position: sticky; top: 0; z-index: 999;
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.55));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(15, 23, 42, .08);
}

/* 상단 안쪽 컨테이너: 살짝 떠있는 느낌 */
.topbar-inner{
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(2, 6, 23, .06);
}

/* 로고에 subtle “살아있는” 호버 */
.brand-logo{
  transition: transform .22s ease, filter .22s ease;
  filter: drop-shadow(0 8px 18px rgba(99,56,157,.18));
}
.brand:hover .brand-logo{
  transform: translateY(-1px) scale(1.03);
  filter: drop-shadow(0 12px 22px rgba(99,56,157,.28));
}

/* 메뉴: 밑줄 애니메이션 + 호버 반응 */
.nav a{
  position: relative;
  transition: transform .18s ease, opacity .18s ease;
}
.nav a:hover{
  transform: translateY(-1px);
  opacity: .95;
}
.nav a::after{
  content:"";
  position:absolute; left: 10px; right: 10px; bottom: -8px;
  height: 3px; border-radius: 999px;
  background: linear-gradient(90deg, #f6c343, #63389d);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .18s ease;
  opacity: .9;
}
.nav a:hover::after{
  transform: scaleX(1);
}

/* 현재 페이지(active) 느낌 */
.nav a.active{
  background: rgba(99,56,157,.10);
  border: 1px solid rgba(99,56,157,.16);
  border-radius: 999px;
  padding: 8px 14px;
}

/* 우측 버튼들도 살짝 살아있게 */
.top-actions .btn, .topbar .btn{
  transition: transform .18s ease, box-shadow .18s ease;
}
.top-actions .btn:hover, .topbar .btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(2,6,23,.08);
}

/* 스크롤 시 상단이 더 단단해지는 느낌(선택) */
body.scrolled .topbar{
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.70));
  border-bottom-color: rgba(15, 23, 42, .12);
}

.aisfor-external-open{
  display:none;
  position:absolute;
  right:64px;
  top:50%;
  z-index:3;
  transform:translateY(-50%);
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border:1px solid rgba(15,23,42,.14);
  border-radius:12px;
  background:#fff;
  color:#111827;
  font-size:22px;
  font-weight:900;
  text-decoration:none;
}

.aisfor-app-webview .aisfor-external-open{
  display:inline-flex;
}

/* Crop the empty canvas around the wordmark without changing the source image. */
.topbar .topbar-inner{
  padding-top: 5px;
  padding-bottom: 5px;
}

.topbar .brand{
  position: relative;
  flex: 0 1 290px;
  width: 290px;
  height: 84px;
  overflow: hidden;
}

.topbar .brand-logo{
  position: absolute;
  top: 50%;
  left: 0;
  width: 290px;
  height: auto;
  max-width: none;
  max-height: none;
  transform: translateY(-50%);
  object-fit: initial;
  filter: none;
}

.topbar .brand:hover .brand-logo{
  transform: translateY(-50%);
}

@media (max-width: 768px){
  .topbar .topbar-inner{
    min-height: 0;
    padding: 4px 10px;
  }

  .topbar .brand{
    flex-basis: min(220px, calc(100vw - 76px));
    width: min(220px, calc(100vw - 76px));
    height: 72px;
  }

  .topbar .brand-logo{
    width: 220px;
  }
}