:root{
    --bg:#f5f7fb; --text:#0f172a; --muted:#6b7280; --line:#e5e7eb;
    --accent:#0ea5e9; --banner1:#0b3b3b; --banner2:#0c2a66; --banner3:#1e293b;
  }
  *{box-sizing:border-box} html,body{height:100%}
  body{margin:0;padding-top:56px;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,"Noto Sans KR",sans-serif}

  /* 앱바 */
.appbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 56px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;   /* 가운데 정렬 */
    gap: 8px;                  /* 로고와 아이콘 사이 간격 */
    z-index: 20;
  }
  
  .app-title {
    font-weight: 800;
    font-size: 18px;
    color: #111827;
    text-decoration: none;     /* 링크 밑줄 제거 */
  }
  
  .app-title:hover {
    color: var(--accent);      /* hover 시 포인트 색 */
  }
  
  .logo-icon {
    font-size: 20px;
    line-height: 1;
  }
  
  
  /* 탭바 */
  .tabbar{
    position: sticky;
    top: 56px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 20px;
    padding: 6px 12px;
    z-index: 15;
  }
  .tab-item{ position:relative; }
  .tab{
    display:inline-block;
    padding:10px 8px;
    font-weight:700;
    font-size:14px;
    color:#374151;
    text-decoration:none;
    border-bottom:2px solid transparent;
    transition: color .2s ease, border-color .2s ease;
  }
  .tab:hover{ color:var(--accent); }
  .tab.active{ color:var(--accent); border-bottom-color:var(--accent); }
  
  /* 홈, 역량 밑줄 제거 */
  .tabbar .tab-item:first-child .tab,
  .tabbar .tab-item:nth-child(2) .tab{
    border-bottom:none !important;
  }
  .tabbar .tab-item:first-child .tab.active,
  .tabbar .tab-item:nth-child(2) .tab.active{
    border-bottom:none !important;
  }
  
  /* 드롭다운 메뉴 */
  .sub-tabs{
    display:none;
    position:absolute;
    top:100%; left:50%;
    transform:translateX(-50%);
    background:#fff;
    border:1px solid var(--line);
    border-radius:6px;
    box-shadow:0 4px 12px rgba(0,0,0,.1);
    min-width:120px;
    padding:6px 0;
    z-index:100;
  }
  .sub-tabs a{
    display:block;
    padding:8px 12px;
    color:#374151;
    text-decoration:none;
    font-size:14px;
    font-weight:500;
  }
  .sub-tabs a:hover{ background:#f3f4f6; color:#111; }
  .tab-item:hover .sub-tabs{ display:block; }
  
/* 배너 (박스형) */
.banner-box {
    display: flex;
    justify-content: center;
    padding: 20px 12px;
    margin-top: 48px;    /* 🔑 탭바와 간격 크게 */
  }
  
  .banner-card {
    background: linear-gradient(135deg, #3b82f6, #06b6d4);
    color: #fff;
    border-radius: 16px;
    padding: 40px 24px;    /* 높이는 유지 */
    max-width: 840px;      /* 🔑 폭을 살짝 넓힘 */
    width: 100%;
    text-align: center;
    box-shadow: 0 6px 18px rgba(0,0,0,.12);
  }
  
  .banner-card h2 {
    margin: 0 0 14px;
    font-size: 28px;     /* 🔑 제목 크기 키움 */
    font-weight: 800;
  }
  
  .banner-card p {
    margin: 0;
    font-size: 18px;     /* 🔑 서브 텍스트 크기 키움 */
    font-weight: 500;
  }
/* 프로모 게시판 */
.promo-board{
    max-width: 870px;
    margin: 16px auto 0;       /* 배너 아래 자연스러운 간격 */
    padding: 0 12px;
  }
  .promo-board .board-head{
    display:flex; align-items:center; justify-content:space-between;
    max-width: 900px; margin: 0 auto 6px;
  }
  .promo-board .board-head h3{
    margin:0; font-size:18px; font-weight:800; color:#111827;
  }
  .promo-board .board-head .more{
    font-size:13px; color:#2563eb; text-decoration:none;
  }
  .promo-board .board-head .more:hover{ text-decoration:underline; }
  
  .promo-board .board-list{
    list-style:none; margin:0 auto; padding:0;
    background:#fff; border:1px solid var(--line); border-radius:12px;
    max-width: 900px; overflow:hidden; box-shadow:0 4px 12px rgba(0,0,0,.05);
  }
  .promo-board .board-list li + li{ border-top:1px solid #eef0f4; }
  
  .promo-board .board-list a{
    display:grid; grid-template-columns:auto 1fr auto;
    align-items:center; gap:10px;
    padding:12px 14px; text-decoration:none; color:#111827;
  }
  .promo-board .board-list a:hover{ background:#f8fafc; }
  
  .promo-board .cat{
    display:inline-block; min-width:54px; text-align:center;
    padding:4px 8px; font-size:12px; font-weight:700;
    border-radius:999px; border:1px solid #e5e7eb; color:#374151; background:#f9fafb;
  }
  .promo-board .cat.notice{ color:#1f2937; border-color:#d1d5db; background:#f3f4f6; }
  .promo-board .cat.event{ color:#155e75; border-color:#99f6e4; background:#ecfeff; }
  .promo-board .cat.update{ color:#1e40af; border-color:#93c5fd; background:#eff6ff; }
  .promo-board .cat.tip{ color:#166534; border-color:#86efac; background:#f0fdf4; }
  
  .promo-board .tit{
    overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
    font-size:14px; font-weight:600;
  }
  .promo-board time{
    font-size:12px; color:#6b7280;
  }
  
  /* 모바일 간격 보정 */
  @media (max-width: 480px){
    .promo-board .board-list a{ grid-template-columns: auto 1fr; row-gap:4px; }
    .promo-board time{ grid-column: 1 / -1; justify-self:end; }
  }
    
  
  /* 하단 고정 안내 영역 */
.dock {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: auto;
    background: #fff;
    border-top: 1px solid var(--line);
    z-index: 20;
    padding: 12px;
    text-align: center;
  }
  
  .contact-dock p {
    margin: 0;
    font-size: 13px;
    color: #374151;
    line-height: 1.5;
  }
  
  .contact-dock a {
    color: var(--accent);
    text-decoration: none;
  }
  .contact-dock a:hover {
    text-decoration: underline;
  }
  
  /* 스페이서: 하단 영역만큼 컨텐츠 밀어주기 */
  .dock-spacer { height: 64px; }
  
 /* 화면 비율 기반 공통 최대폭 */
:root { --section-max: 1680px; }

/* ===== 배너(아이디 #banner 또는 .hero 어떤 것이든 적용) ===== */
#banner, .hero {
  /* 전체 섹션 높이를 화면비율로 스케일 */
  block-size: clamp(320px, 60svh, 880px); /* 60% of small viewport height */
  display: grid;
  place-items: center;           /* 내부 콘텐츠 중앙 정렬(위치 보정) */
  text-align: center;
  padding-inline: clamp(16px, 4vw, 72px);
  padding-block: clamp(16px, 4vh, 72px);
  margin-inline: auto;
  max-inline-size: var(--section-max);
  overflow: hidden;
}

/* 배너가 <img>일 때도 비율 유지하며 섹션 크기에 맞춰 보이게 */
#banner > img, .hero > img, .hero-img {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16 / 9;   /* 가로:세로 비율 고정 */
  object-fit: cover;      /* 잘라도 꽉 차게 */
  border-radius: clamp(8px, 1vw, 16px);
}

/* ===== 프로모(아이디 #promo 또는 .promo/.promo-grid) ===== */
#promo, .promo, .section.promo {
  /* 프로모 전체 영역 높이를 화면비율로 스케일 */
  min-block-size: clamp(420px, 55svh, 900px);
  padding-inline: clamp(16px, 4vw, 72px);
  padding-block: clamp(16px, 4vh, 96px);
  margin-inline: auto;
  max-inline-size: var(--section-max);
}

/* 카드 그리드: 폭에 따라 자동 컬럼 수 + 갭도 비율 스케일 */
#promo .promo-grid, .promo-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(clamp(220px, 28vw, 420px), 1fr)
  );
  gap: clamp(12px, 2vw, 28px);
  align-items: stretch;
}

/* 카드 높이도 화면/폭 비율에 따라 자연스레 커지게 */
#promo .promo-card, .promo-card {
  border: 1px solid rgba(0,0,0,.08);
  border-radius: clamp(8px, 1vw, 16px);
  padding: clamp(14px, 2vw, 24px);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  background: #fff;
  aspect-ratio: 4 / 3;  /* 카드 자체 높이 = 폭 기반 비율 */
}

.promo-card h3 { font-size: clamp(16px, 1.8vw, 22px); }
.promo-card p  { font-size: clamp(13px, 1.2vw, 16px); }

/* ===== Left Drawer(사이드 메뉴) ===== */
.sidemenu {
  position: fixed;
  inset: 0 auto 0 0;         /* top:0; right:auto; bottom:0; left:0 */
  width: 250px;
  background: #fff;
  border-right: 1px solid var(--line);
  box-shadow: 2px 0 24px rgba(0,0,0,.08);
  transform: translateX(-100%);
  transition: transform .28s ease;
  z-index: 1000;             /* 탭바/앱바 위 */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.menu-open .sidemenu { transform: translateX(0); }

.sidemenu-nav { padding: 12px; }
.sidemenu-section {
  margin: 10px 8px 6px;
  font-size: 12px; font-weight: 800; color: #6b7280; letter-spacing: .02em;
  text-transform: uppercase;
}
.sidemenu-item {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: #111827;
  font-weight: 600;
}
.sidemenu-item:hover { background: #f3f4f6; }
/* 햄버거 버튼 — 단일 정의 */
.menu-btn{
  position:absolute; left:12px;
  background:none; border:none; font-size:22px;
  cursor:pointer; color:#111827;
}
.menu-btn:hover{ color:var(--accent); }

/* 오버레이 — 단일 정의 */
.backdrop{
  position:fixed; inset:0;
  background:rgba(0,0,0,.28);
  opacity:0; pointer-events:none;
  transition:opacity .2s ease; z-index:900;
}
.menu-open .backdrop{ opacity:1; pointer-events:auto; }

/* 큰 화면에서 오버레이 숨김 — 단일 정의 */
@media (min-width:1024px){
  .backdrop{ display:none; }
}