:root{
  --bg:#ffffff;
  --ink:#ffffff;
  --ink-dim:#ffffff;
  --muted:#fc467c;
  --brand:#111827;
  --container:1400px;
  --radius-xl:36px;
  --radius-pill:250px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Pretendard",-apple-system,BlinkMacSystemFont,system-ui,Roboto,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  font-weight:400;
  line-height:1.45;
}

/* Font weight utilities */
.light{font-weight:300}
.medium{font-weight:500}
.semibold{font-weight:600}
.bold{font-weight:700}
.extrabold{font-weight:800}
.black{font-weight:900}

.container{
  width:min(100%,var(--container));
  padding-inline:20px;
  margin-inline:auto;
}

/* ===== Topbar ===== */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:15px 70px; width:100%;
  margin-top:24px;        /* 상단에서 아래로 내림 */
  margin-bottom:36px;     /* 메뉴바와 본문 사이 간격 */
}
.brand {
  flex-shrink:0;
  text-decoration:none;
  display:flex;
  align-items:flex-start;
}
.brand img {
  height: 30px; /* 원하는 크기 */
  width: auto;
}
.nav{
  display:flex;
  align-items:center;
  gap:24px;
}
.nav a { text-decoration:none; 
  color:#87909c; /* 기본 회색 */ 
  font-weight:600; 
  transition: color .2s ease; 
} 

.nav a:hover { color:#111111; /* 마우스 오버 시 검은색 */ } 

.nav a.active { color:#111111; /* 현재 페이지도 분홍색 */ }

/* Back */
.back-wrap{margin-top:8px}
.back{
  appearance:none;
  border:0;
  background:none;
  color:#374151;          /* 항상 이 색 유지 */
  font-weight:600;
  cursor:pointer;
  padding:6px 0;
  text-decoration:none;   /* 밑줄 제거 */
}

/* 링크 상태 고정 */
.back:link,
.back:visited,
.back:hover,
.back:active {
  color:#374151;          /* 같은 색상 유지 */
  text-decoration:none;   /* 밑줄 제거 */
}


/* Hero: 좌상/우하 라운딩 */
.hero{
  background:var(--muted);
  border-top-left-radius: var(--radius-pill);
  border-bottom-right-radius: var(--radius-pill);
  overflow:hidden;
}
.hero-inner{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  
 
}
.profile{
  display:flex;
  align-items:flex-start; /* 이름을 사진 윗쪽에 맞춤 */
  gap:40px;               /* 사진-텍스트 간격 줄여 더 붙게 */
}
.portrait{
  width:300px;
  height:320px;
  object-fit:cover;
  border-radius:0px;
  
}
.meta{min-width:240px}
.name{
  margin:30px 0 30px 0;
  display:flex;
  gap:10px;
  align-items:baseline;
}
.name .ko{font-size:28px}
.name .en{font-size:18px; color:var(--ink-dim)}

/* 라벨-값 한 줄 배치 */
.contacts{
  margin:0;
  display:grid;
  gap:10px;
}
.contacts div{
  display:flex;
  align-items:center;
  gap:20px;
}
.contacts dt{
  font-size:14px;
  color:var(--ink-dim);
  font-weight:300;
  margin:0;
}
.contacts dd{margin:0}
.contacts a{color:inherit; text-decoration:none}
.contacts a:hover {
  text-decoration: none; /* 밑줄 제거 */
}

.quote {
  align-self: center;
  justify-self: end;
  text-align: right; /* 전체 문구 오른쪽 정렬 */
  margin: 10px;
  line-height: 1.15;
transform: translateY(70px);
}

.quote span {
  font-size: 36px;
}

.quote em {
  font-style: normal;
  font-weight: 700;
  font-size: 56px;
}

/* Section Title */
.section-title {
  width: 90%;           /* 화면 전체 폭 */
  max-width: none;       /* 폭 제한 해제 */
  padding-block: 80px 120px;
  border-bottom: 1px solid #e5e7eb;
}

.section-title h2{
  margin:0;
  text-align:center;
  font-size:64px;
  letter-spacing:-0.5px;
}

/* Footer */
.footer{
  padding-block:12px 20px;
}
.footer-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  max-width: none;       /* 폭 제한 해제 */
  padding: 0 40px;       /* 헤더와 동일한 좌우 여백 */
}

.footer .addr {
  margin-left: 50px;
  color:var(--brand);        /* 기본 정렬 */
}

.footer .sns {
  margin-right: 30px;       /* 기본 정렬 */
transform: translateY(-25px); /* 원하는 만큼 위로 이동 */
}

.sns img {
  margin-left: 7px;     /* 기존 간격 유지 */
}
.addr p{margin:2px 0 6px 0}
.addr .copy{ margin-top: 30px; /* 위쪽 여백 추가 */
color:var(--brand); font-size:13px}

.sns img{
  width:auto;
  height:23px;
  display:inline-block;
  margin-left:10px;
  margin-right:20px;
  object-fit:contain;
}

/* Responsive */
@media (max-width: 980px){
  .hero-inner{grid-template-columns:1fr; padding-block:30px 44px}
  .quote{justify-self:start; text-align:left; margin-top:8px}
  .topbar{padding:16px 20px}
}
@media (max-width: 640px){
  .portrait{width:160px; height:208px}
  .name .ko{font-size:24px}
  .quote span{font-size:28px}
  .quote em{font-size:42px}
  .section-title h2{font-size:42px}
  .sns img{width:84px}
}

.nav-toggle{ display:none; }