* { box-sizing: border-box; }
body {
  margin: 0;
  padding: 56px 68px;
  background: #fefefe;
  color: #222;
  font-family: 'Pretendard', sans-serif;
}
a { color: inherit; text-decoration: none; }
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40px 42px 28px;
  border-bottom: 0.7px solid #ddd;
}
.logo {
  font-size: 17px;
  letter-spacing: 0px;
  color: #000000;
  font-weight: 500;
}
.nav { display: flex; gap: 28px; }
.nav a {
  font-size: 17px;
  font-weight: 200;
  color: #999;
  line-height: 1;
}
.nav a:hover, .nav a.active { color: #555; }
.grid-page {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
}
.work-card {
  min-height: 450px;
  padding: 26px 26px 24px;
  border-right: 0.7px solid #e2e2e2;
  border-bottom: 0.7px solid #e2e2e2;
}
.thumb-wrap {
  display: block;
  background: #ffffff;
  aspect-ratio: 1 / 0.65;
  overflow: hidden;
}
.thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}
:hover .thumb { transform: scale(1.03); }
.work-meta h2 {
  margin: 18px 0 4px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.45;
}
.work-meta p {
  margin: 3px 0;
  color: #8b8b8b;
  font-size: 14px;
}
.detail-page {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "images title"
    "images info";
  grid-template-rows: auto 1fr;
  min-height: calc(100vh - 126px);
}
.detail-images {
  grid-area: images;
  padding: 38px 28px 38px 54px;
  border-right: 0.7px solid #ddd;
}
.detail-images img {
  width: 100%;
  display: block;
  margin-bottom: 34px;
  background: #ffffff;
}
.detail-title {
  grid-area: title;
  padding: 42px 54px 28px 38px;
  position: sticky;
  top: 0;
  align-self: start;
}
.detail-info {
  grid-area: info;
  padding: 42px 54px 42px 36px;
  align-self: start;
}
.detail-title h1 {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.35;
}
.sub {
  margin: 0 0 50px;
  color: #999;
  font-size: 13px;
}
dl { margin: 0 0 28px; }
dl div { display: flex; gap: 7px; margin-bottom: 12px; color: #666; font-size: 14px; }
dt { font-weight: 400; }
dd { margin: 0; }
.description { max-width: 560px; color: #666; font-size: 14px; line-height: 1.8; }
.inform-page { padding: 34px 68px 80px; }
.inform-page > h1, .inform-page > h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 300;
}
.inform-page > h1 { padding-bottom: 10px; }
.inform-page > h2 { padding: 70px 0 10px; }
.inform-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  border-top: 0.7px solid #ddd;
  border-bottom: 0.7px solid #ddd;
}
.inform-grid > section {
  padding: 32px 36px;
  border-right: 0.7px solid #ddd;
}
.inform-grid > section:last-child { border-right: 0; }
.inform-grid h3 { margin: 0 0 14px; font-size: 15px; }
.inform-grid p { margin: 0 0 8px; color: #666; font-size: 14px; line-height: 1.7; font-weight: 300;}
.people section, .contact section { margin-bottom: 34px; }
.client-table {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 0.7px solid #ddd;
  border-left: 0.7px solid #ddd;
}
.client-table div {
  min-height: 70px;
  padding: 28px 20px;
  border-right: 0.7px solid #ddd;
  border-bottom: 0.7px solid #ddd;
  font-weight: 400;
}
.empty { padding: 60px; font-size: 20px; }
@media (max-width: 1100px) {
  .grid-page { grid-template-columns: repeat(2, 1fr); }
  .site-header { padding: 38px 24px 22px; }
  .logo, .nav a { font-size: 20px; }
  .detail-page {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "images"
      "info";
  }
  .detail-title {
    position: static;
    border-bottom: 0.7px solid #ddd;
  }
  .detail-images {
    border-right: 0;
    border-bottom: 0.7px solid #ddd;
  }
  .inform-grid { grid-template-columns: 1fr; }
  .inform-grid > section { border-right: 0; border-bottom: 0.7px solid #ddd; }
}
@media (max-width: 640px) {
  .site-header { display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28px 20px 22px;
  }
  .nav {
    margin-top: 0;
    gap: 18px;
  }

  .logo {
    font-size: 18px;
  }

  .nav a {
    font-size: 16px;
  }
  .grid-page { grid-template-columns: 1fr; }
  .work-card { min-height: auto; padding: 20px; }
  .detail-title,
  .detail-images,
  .detail-info,
  .inform-page {
    padding: 24px;
  }

  .detail-title h1 {
    font-size: 15px;
    line-height: 1.35;
  }

  .detail-title .sub {
    font-size: 14px;
    margin-bottom: 0;
  }

  .detail-info dl div {
    font-size: 13px;
    line-height: 1.5;
  }

  .detail-info .description {
    display: none;
  }
  .client-table { grid-template-columns: 1fr; }
}

/* Hover focus effect: 마우스를 올리면 흰 박스 + 그림자 강조 */
/* Hover focus effect: 마우스를 올리면 내부 그림자 강조 */
.work-card,
.inform-grid > section,
.client-table div,
.detail-images {
  position: relative;
  transition:
    background-color .5s ease,
    box-shadow .5s ease,
    transform .5s ease,
    z-index .25s ease;
}

.work-card:hover,
.inform-grid > section:hover,
.client-table div:hover,
.detail-images:hover {
  background: #ffffff;
  box-shadow:
    inset 0 0 18px rgba(0, 0, 0, 0.054),
    inset 0 0 40px rgba(0,0,0, 0.054);
  z-index: 10;
}

.inform-grid > section:hover {
  min-height: 100%;
}

.work-card:nth-child(3n) {
  border-right: 0;
}

@media (max-width: 1100px) {
  body {
    padding: 42px 38px;
  }

  .work-card:nth-child(3n) {
    border-right: 0.7px solid #e2e2e2;
  }

  .work-card:nth-child(2n) {
    border-right: 0;
  }
}

@media (max-width: 640px) {
  body {
    padding: 24px 18px;
  }

  .work-card {
    border-right: 0;
  }
}


.about-profile{
  display:flex;
  align-items:flex-start;
  gap:20px;
}

.about-profile img{
  width:90px;
  height:90px;
  object-fit:cover;
  border-radius:50%;
  flex-shrink:0;
}

.about-profile div{
  flex:1;
}