:root {
  --bg: #0b1020;         /* deep space */
  --panel: #121a33;      /* card bg */
  --text: #e6ecff;       /* primary text */
  --muted: #b8c2e6;      /* secondary text */
  --accent: #4fd1c5;     /* teal */
  --accent-2: #8b5cf6;   /* violet */
  --warn: #f59e0b;       /* amber for notices */
  --ok: #10b981;         /* green for success */
  --border: #233057;     /* borders */
  --maxw: 1100px;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;line-height:1.55;color:var(--text);background:radial-gradient(1200px 600px at 20% 10%, #1a2447 0%, transparent 60%),radial-gradient(1200px 600px at 90% -10%, #211a47 0%, transparent 60%),var(--bg)}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.2;margin:0 0 .6rem}
h2{font-size:clamp(1.4rem,1.2rem + 1vw,2rem)}
p{margin:.4rem 0 .9rem;color:var(--muted)}

/* Layout */
.wrap{max-width:var(--maxw);margin:0 auto;padding:clamp(0.1rem,1.5vw,0.6rem)}
.section{padding:3rem 0}
.card{background:color-mix(in srgb, var(--panel) 85%, transparent);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.1rem}
.grid{display:grid;gap:1rem}
.grid_logi{display:grid;gap:1rem}
.grid_logi strong {
      color: rgba(255, 255, 255, 0.9);
}
.grid-2{grid-template-columns:1.2fr .8fr}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:1fr 1fr}
.grid-4 h2 {
  color: orange;
}
@media (max-width:860px){.grid-2,.grid-3{grid-template-columns:1fr}}

.tag{display:inline-flex;align-items:center;gap:.4rem;padding:.25rem .6rem;border:1px solid var(--border);border-radius:999px;color:var(--muted);font-size:.9rem}
.tag strong{color:var(--text);font-weight:700}

/* Nav */
.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(10px);background:color-mix(in srgb, var(--bg) 85%, transparent);border-bottom:1px solid var(--border)}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:.7rem 1rem;display:flex;align-items:center;gap:1rem}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:800;letter-spacing:.2px;color:var(--text)}
.brand .dot{width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 0 12px var(--accent)}
.grow{flex:1}
.menu{display:flex;gap:.4rem;align-items:center}
.menu a{padding:.45rem .75rem;border-radius:999px;color:var(--text);border:1px solid transparent}
.menu a:hover{background:color-mix(in srgb, var(--panel) 60%, transparent)}
.menu a.active{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 50%, transparent)}
.burger{display:none;background:none;border:1px solid var(--border);color:var(--text);padding:.45rem .6rem;border-radius:10px}
@media (max-width:860px){
  .menu{display:none}
  .burger{display:inline-flex}
  .menu.open{display:grid;grid-template-columns:1fr;gap:.4rem;position:absolute;top:64px;left:0;right:0;background:color-mix(in srgb, var(--panel) 75%, transparent);padding:.6rem;border-bottom:1px solid var(--border)}
}

/* Hero */
.hero{padding:0.2rem 0 3.2rem}
.hero .title{font-size:clamp(2rem,1.6rem + 3vw,3.4rem);font-weight:800;background:linear-gradient(135deg,var(--text),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .subtitle{margin-top:0;font-size:clamp(1rem,.8rem + 1vw,1.25rem);color:white}
.hero-cta{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.8rem}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem .9rem;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#091023;font-weight:700;border-radius:999px;border:none;cursor:pointer;box-shadow:var(--shadow)}
.btn.secondary{background:linear-gradient(135deg,var(--accent-2),var(--accent))}
.notice{background:linear-gradient(90deg,color-mix(in srgb, var(--warn) 20%, transparent),transparent);border-left:3px solid var(--warn);padding:.75rem 1rem;border-radius:8px;margin:.8rem 0}

/* Tables & forms */
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:.7rem .9rem;border-bottom:1px solid var(--border);vertical-align:top}
.table th{text-align:left;color:var(--text)}
label{display:block;margin:.6rem 0 .2rem}
input,textarea,select{width:100%;padding:.65rem .75rem;border-radius:10px;border:1px solid var(--border);background:#0b1227;color:var(--text)}

/* Footer */
footer{border-top:1px solid var(--border);padding:2rem 0;color:var(--muted)}

.auto-number {
  counter-reset: row-num;
}

.auto-number tr td:first-child::before {
  counter-increment: row-num;
  content: counter(row-num);
}


@media (max-width: 480px){

  /* 전체 여백 확장 */
  .wrap{
    padding: 0.9rem;
  }

  .section{
    padding: 2.2rem 0;
  }

  .card{
    padding: 1.25rem;
  }

  /* Hero 영역 과밀 방지 */
  .hero{
    padding: 1.2rem 0 2.4rem;
  }

  .hero .title{
    font-size: 1.9rem;
  }

  .hero .subtitle{
    font-size: 1rem;
    line-height: 1.45;
  }

  /* 버튼 터치 영역 확대 */
  .hero-cta{
    gap: .75rem;
  }

  .btn{
    width: 100%;
    justify-content: center;
    padding: .7rem 1rem;
  }

  /* 2~4열 그리드는 모바일에서 모두 1열로 */
  .grid-2,
  .grid-3,
  .grid-4{
    grid-template-columns: 1fr;
  }

  /* 네비 높이 확보 & 메뉴 터치 개선 */
  .nav-inner{
    padding: .85rem .9rem;
  }

  .menu.open{
    padding: .9rem;
    gap: .6rem;
  }

  .menu a{
    padding: .7rem 1rem;
  }

  /* 테이블 가로 스크롤 허용 */
  .table{
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  /* 입력 폼 손가락 영역 확대 */
  input, textarea, select{
    padding: .8rem .85rem;
    font-size: 1rem;
  }

  /* 태그 줄바꿈 안정화 */
  .tag{
    font-size: .85rem;
  }

}