:root{ --bg:#ffffff; 
  --ink:#111827; 
  --ink-dim:#9aa3ae; 
  --brand:#111827; 
  
  /* 더 크게 + 간격 넓게 */ 
  --container:1700px; 
  --maxw:1700px; --cols:5; 
  --gap:50px; --padX:30px; 
  --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; } 

/* 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; /* 마우스 오버 시 검은색 */ } 



/* ===== Grid clip: 첫 화면 2줄만 보이게 ===== */
.grid-clip{
  width:min(100%, var(--container));
  margin:60px auto;       /* 그리드 블록 위아래 여백 넓힘 (기존 28px auto 40px) */
  overflow:hidden;
  max-height: calc(
    2 * ( (min(100vw, var(--maxw)) - (2 * var(--padX)) - ((var(--cols)-1) * var(--gap))) / var(--cols) )
    + var(--gap)
  );
}

/* ===== Grid ===== */
.designer-grid {
  width:min(100%, var(--container));
  margin-inline:auto;
  padding-inline:var(--padX);
  display:grid;
  grid-template-columns:repeat(5, 1fr); /* 6 → 5개로 변경 */
  column-gap: 50px; /* 가로 간격 그대로 */
  row-gap: 70px;
  gap:var(--gap);
}


/* ===== 구분선 ===== */
.section-divider{
  width:min(100%, var(--container));
  height:1px; background:#e5e7eb;
  margin:40px auto 56px;  /* 그리드 하단과 푸터 사이 간격 확대 (기존 6px auto 16px) */
  opacity:.9;
}

/* ===== Card (정사각 + 둥근 모서리) ===== */
.card{
  position:relative; display:block; width:100%; aspect-ratio:1/1;
  border-radius:26px; overflow:hidden; background:#ffffff;
  box-shadow:0 0 0 px rgba(255, 255, 255, 0.04) inset; isolation:isolate;
  /* 3D 플립을 위한 원근 */
  perspective: 1000px;
}

/* 플립 컨테이너 (앞/뒤) */
.flip{
  position:absolute; inset:0;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
  border-radius:inherit;
}

/* 접근성: 키보드 포커스/호버/터치(토글 클래스) 모두 플립 */
.card:hover .flip,
.card:focus-within .flip,
.card.flipped .flip{ transform: rotateY(180deg); }

/* 카드 면 공통 */
.face{
  position:absolute; inset:0; border-radius:inherit;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}

/* 앞면 = 이미지 */
.face.front{
  background-image: var(--img);
  background-size: cover; background-position: center;
}

/* 뒷면 = 랜덤 컬러 + 이름 텍스트 */
.face.back{
  transform: rotateY(180deg);
  background: var(--hover-color, rgba(252,70,124,.9)); /* JS가 분홍/보라 중 지정 */
  display:flex; align-items:center; justify-content:center;
}
.names{ display:flex; flex-direction:column; align-items:center; gap:6px; color:#fff; text-align:center; }
.names .ko{ font-weight:700; font-size:28px; letter-spacing:-.02em; line-height:1.05; }
.names .en{ font-weight:500; font-size:18px; opacity:.95; }

/* ===== Shape variations ===== */
.shape-circle { border-radius:0 0 150px 150px; }
.shape-round  { border-radius:150px 150px 0 0; }    /* 네 모서리 둥글 */
.shape-square { border-radius:150px 0 0 150px; }    /* 살짝만 둥글 */
.shape-soft   { border-radius:18px; }    /* 중간 둥글기 */

/* 한쪽 모서리만 둥글 (rt/rb/lt/lb) */
.shape-rt { border-radius: 0 100px 0 0; }
.shape-rb { border-radius: 0 150px 150px 0; }
.shape-lt { border-radius: 100px 0 0 0; }
.shape-lb { border-radius: 0 0 0 100px; }

/* ===== 구분선 ===== */
.section-divider{
  width:min(100%, var(--container));
  height:1px; background:#e5e7eb; margin:6px auto 16px; opacity:.9;
}

/* ===== 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; width:auto; height:23px; display:inline-block; margin-right:20px; object-fit:contain; }
.addr p{ margin:2px 0 6px 0; }
.addr .copy{ margin-top:30px; color:var(--brand); font-size:13px; }

/* ===== Responsive ===== */
@media (max-width:1280px){
  :root{ --cols:4; --gap:64px; --padX:48px; --maxw:1520px; --container:1520px; }
}
@media (max-width:1024px){
  :root{ --cols:3; --gap:44px; --padX:40px; --maxw:1280px; --container:1280px; }
}
@media (max-width:760px){
  :root{ --cols:2; --gap:20px; --padX:20px; --maxw:680px; --container:680px; }
  .names .ko{ font-size:20px; } .names .en{ font-size:12px; }
}
@media (max-width:980px){ .topbar{ padding:16px 20px; } }

.nav-toggle{ display:none; }

/* ===== Fullscreen Hero (수정) ===== */
.hero-full {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;

  height: 70vh;   /* 👈 100vh → 70vh로 세로 높이 줄임 */
  overflow: hidden;
}

.hero-full img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}



/* 구분선과 붙어 보이면 여백 조정 (선택) */
.section-divider{
  margin-top: 0;           /* 히어로 바로 아래 붙이려면 0 */
  /* margin: 20px auto 56px;  // 여백이 더 필요하면 이렇게 */
}