:root{
  --bg: #f7fafc;          /* 밝은 배경 */
  --bg-alt: #ffffff;      /* 섹션 대비용 */
  --text: #1f2937;
  --muted: #6b7280;
  --primary: #3b82f6;     /* 파란 계열 포인트 */
  --card: #ffffff;
  --ring: #bfdbfe;
  --radius: 16px;
  --shadow: 0 10px 20px rgba(2, 6, 23, 0.08);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui, -apple-system, "Noto Sans KR", "Apple SD Gothic Neo", Roboto, Arial, sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,var(--bg),#fff 60%, var(--bg) 100%);
  line-height:1.6;
}

/* Layout */
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.section{padding:80px 0;background:transparent}
.section.alt{background:var(--bg-alt)}
.grid-2{display:grid;grid-template-columns:1.2fr .8fr;gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:960px){
  .grid-2,.grid-3{grid-template-columns:1fr}
}

/* Header / Nav */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.85);backdrop-filter: blur(10px);
  border-bottom:1px solid #eef2f7;
}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{font-weight:800;text-decoration:none;color: #3B82F6;font-size:1.15rem}
.nav{display:flex;gap:16px}
.nav a{
  color:var(--muted);text-decoration:none;padding:8px 10px;border-radius:10px;
}
.nav a.active,.nav a:hover{color:var(--primary);background:#eef6ff}
.nav-toggle{display:none;font-size:1.25rem;background:transparent;border:0}
@media (max-width:820px){
  .nav-toggle{display:block}
  .nav{position:absolute;top:64px;left:0;right:0;background:#fff;padding:10px 20px;display:none;flex-direction:column;border-bottom:1px solid #eef2f7}
  .nav.open{display:flex}
}

/* Hero */
.hero{padding:120px 0 100px}
.hero-inner{text-align:center}
.hero h1{font-size:clamp(1.6rem, 1.1rem + 2.5vw, 2.6rem);margin:0 0 10px}
.hero p{color:var(--muted);margin:0 0 20px}
.accent{color:var(--primary)}
.btn {
  display: inline-block;
  background: var(--primary);
  color: #fff;
  text-decoration: none;
  padding: 12px 18px;
  border-radius: 9999px;   /* 좌우 완전 동그란 pill 모양 */
  box-shadow: var(--shadow);
  border: 2px solid transparent;
  text-align: center;
}
.btn:hover{filter:brightness(1.02)}
.btn:focus{outline:none;border-color:var(--ring)}
/* 버튼 색상별 */
.btn-blue {
  background: #3b82f6;   /* 파란색 */
}
.btn-green {
  background: #10b981;   /* 초록색 */
}
.btn-pink {
  background: #ec4899;   /* 분홍색 */
}

/* hover 시 약간 밝게 */
.btn-blue:hover { filter: brightness(1.1); }
.btn-green:hover { filter: brightness(1.1); }
.btn-pink:hover { filter: brightness(1.1); }


/* Hero 버튼 수직 정렬 & 중앙 배치 */
.hero-btns {
  display: flex;
  flex-direction: column;   /* 세로 배치 */
  align-items: center;      /* 가로 중앙 */
  gap: 12px;                /* 버튼 간격 */
  margin-top: 20px;
}

.hero-btns .btn {
  width: 200px;             /* 버튼 너비 일정하게 (선택 사항) */
  text-align: center;
}



/* About: 좌측 이미지 / 우측 설명 (반응형 개선) */
.about-wrap {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr; /* 이미지 비율을 줄여서 텍스트 공간 넓힘 */
  gap: 40px; /* 두 영역 사이 간격 늘림 */
  align-items: start;
}

.about-photo {
  width: 100%;
  max-width: 300px; /* 이미지 최대 너비 제한 */
}

.about-photo img {
  width: 100%;
  height: auto;
  border-radius: 20px;
  border: 1px solid #eef2f7;
  box-shadow: var(--shadow);
  object-fit: cover;
  aspect-ratio: 3 / 4; /* 세로형 비율 */
}

/* 텍스트 여백 */
.about-content {
  padding-right: 10px;
}

/* 화면이 좁아지면 1열 (사진 → 설명) */
@media (max-width: 900px) {
  .about-wrap {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .about-photo {
    order: -1;
    max-width: 240px; /* 모바일에선 조금 더 작게 */
    margin: 0 auto;
  }
  .about-content {
    padding-right: 0;
  }
}


/* Cards */
.card{
  background:var(--card);border:1px solid #eef2f7;border-radius:var(--radius);
  padding:18px;box-shadow:var(--shadow);
}
.card.soft{background:#f9fbff}

/* Profile list */
.profile-list{list-style:none;padding:0;margin:10px 0 0}
.profile-list li{padding:8px 0;border-bottom:1px dashed #e5e7eb}
.profile-list li:last-child{border:none}

/* Timeline */
.timeline{border-left:3px solid #e5efff;padding-left:16px;margin-top:10px}
.t-item{position:relative;margin:14px 0;padding-left:10px}
.t-time{font-weight:700;margin-right:8px}
.t-dot{
  position:absolute;left:-9px;top:6px;width:12px;height:12px;border-radius:50%;
  background:var(--primary);box-shadow:0 0 0 4px #e5efff;
}

/* Gallery */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:10px}
.gallery img{width:100%;height:100%;object-fit:cover;border-radius:14px;border:1px solid #eef2f7;display:block}
@media (max-width:900px){.gallery{grid-template-columns:repeat(2,1fr)}}

/* Contact */
.contact-form{max-width:720px}
.form-row{display:flex;flex-direction:column;margin-bottom:14px}
label{font-weight:600;margin-bottom:6px}
input,textarea{
  border:1px solid #dbe3f1;border-radius:12px;padding:12px 14px;font:inherit;background:#fff;
}
input:focus,textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px #e7f1ff}
.form-msg{min-height:24px;color:var(--muted);margin-top:6px}

/* Footer */
.site-footer{padding:30px 0;border-top:1px solid #eef2f7;background:#fff}
.footer-inner{display:flex;align-items:center;justify-content:space-between}
.to-top{display:inline-block;text-decoration:none;border:1px solid #e5e7eb;padding:6px 10px;border-radius:10px;color:var(--text)}
.to-top:hover{background:#f3f6ff}

/* 필(pill) 버튼 모양 */
.btn.btn-pill {
  border-radius: 9999px;     /* 좌우가 둥글게 */
  padding: 10px 18px;        /* 살짝 컴팩트한 패딩 */
}

/* 카드 안 버튼 간격 */
.card .btn { 
  margin-top: 10px; 
  display: inline-block;
}

#album .gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

#album .gallery figure { margin: 0; }

#album .gallery img {
  width: 100%;
  height: auto;   /* 비율 유지 */
  display: block; /* 이미지 하단 여백 제거 */
}