/* ============================================================
   기본 리셋 & 레이아웃 & 타이포그래피 & 버튼(외곽선) & 공통 요소
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;background:none;border:none;cursor:pointer;color:inherit;}
input,select,textarea{font-family:inherit;}
ul{list-style:none;}

.container{
  max-width:var(--container-w);
  margin:0 auto;
  padding:0 20px;
}

/* --- 헤더 / 내비게이션 --- */
.site-header{
  position:sticky;top:0;z-index:50;
  height:var(--header-h);
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;
}
.site-header .container{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;
}
.logo{
  display:flex;align-items:center;gap:8px;
  font-weight:700;font-size:18px;color:var(--text);
}
.logo .icon{color:var(--primary);}
.main-nav{display:flex;align-items:center;gap:24px;}
.main-nav a{
  font-size:14px;font-weight:500;color:var(--sub);
  transition:color .15s;
}
.main-nav a:hover,.main-nav a.active{color:var(--text);}
.header-actions{display:flex;align-items:center;gap:10px;}

/* --- 버튼: 외곽선 스타일 (내 재료 우선 적용) --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border-radius:var(--radius);
  padding:11px 19px;
  font-weight:700;
  font-size:14px;
  background:transparent;
  color:var(--primary);
  border:1.5px solid var(--primary);
  cursor:pointer;
  transition:.15s;
  white-space:nowrap;
}
.btn:hover{background:var(--primary);color:#fff;}
.btn:active{transform:translateY(1px);}
.btn:disabled{opacity:.45;cursor:not-allowed;}

.btn.btn-solid{
  background:var(--primary);color:#fff;border:1.5px solid var(--primary);
}
.btn.btn-solid:hover{background:#1b6bc0;border-color:#1b6bc0;}

.btn.btn-ghost{
  border-color:var(--border);color:var(--sub);
}
.btn.btn-ghost:hover{background:var(--surface);color:var(--text);}

.btn.btn-sm{padding:8px 14px;font-size:13px;}
.btn.btn-lg{padding:14px 24px;font-size:16px;width:100%;}
.btn.btn-icon{padding:9px;border-radius:var(--radius-pill);}

/* --- 태그 / 배지 --- */
.badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:var(--radius-pill);
  font-size:12px;font-weight:700;
  background:var(--surface);color:var(--sub);
  border:1px solid var(--border);
}
.badge .icon{width:14px;height:14px;stroke-width:2;}

/* --- 페이지 공통 --- */
main{min-height:calc(100vh - var(--header-h) - 240px);}
.section{padding:40px 0;}
.section-head{
  display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom:18px;flex-wrap:wrap;gap:8px;
}
.section-head h2{font-size:20px;}
.section-head .sub{color:var(--sub);font-size:13px;}

.eyebrow{
  font-size:12px;font-weight:700;letter-spacing:.04em;
  color:var(--primary);text-transform:uppercase;margin-bottom:6px;
}

.breadcrumb{
  display:flex;align-items:center;gap:6px;
  font-size:13px;color:var(--sub);margin-bottom:16px;
}
.breadcrumb a:hover{color:var(--primary);}
.breadcrumb .sep{color:var(--gray-300);}

/* --- 푸터 --- */
.site-footer{
  border-top:1px solid var(--border);
  background:var(--surface);
  padding:32px 0;
  margin-top:60px;
}
.site-footer .container{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
}
.site-footer p{font-size:13px;color:var(--sub);}
.footer-links{display:flex;gap:16px;}
.footer-links a{font-size:13px;color:var(--sub);}
.footer-links a:hover{color:var(--text);}

/* --- 모바일 하단 탭바 (스마트폰 분위기) --- */
.tab-bar{
  display:none;
  position:fixed;bottom:0;left:0;right:0;z-index:60;
  background:#fff;border-top:1px solid var(--border);
  padding:8px 12px calc(8px + env(safe-area-inset-bottom));
}
.tab-bar .container{display:flex;justify-content:space-around;padding:0;max-width:none;}
.tab-item{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  font-size:11px;color:var(--sub);flex:1;
}
.tab-item .icon{width:22px;height:22px;}
.tab-item.active{color:var(--primary);}

/* --- 반응형 --- */
@media (max-width:860px){
  .main-nav{display:none;}
  main{min-height:calc(100vh - var(--header-h) - 320px - 60px);}
  .tab-bar{display:block;}
  body{padding-bottom:64px;}
}
@media (max-width:520px){
  .container{padding:0 16px;}
  .section{padding:28px 0;}
}