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

.nav a.active { 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; }

/* ── 태블릿 · 모바일 레이아웃 조정 ───────────────────────── */

/* (선택) 태블릿에서 3열 */
@media (max-width: 1024px) {
  .designer-grid{
    display: grid;                      /* grid가 아니라면 강제로 grid로 */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;                          /* 필요에 따라 간격 조정 */
  }
}

/* 모바일에서 2열 */
@media (max-width: 768px) {
  .designer-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* ✅ 2개씩 */
    gap: 12px;
  }

  /* 카드가 가로폭을 꽉 채우도록 보장 (다른 스타일과 충돌 방지용) */
  .designer-grid .card{
    width: 100%;
  }

  /* (권장) 모바일에선 위에 ‘2줄만 보이게’ 클립 비활성화 */
  .grid-clip{
    max-height: none;
    overflow: visible;
    -webkit-mask: none;
            mask: none;
  }
}

/* ───────── 모바일(≤768px)에서는 전부 동그라미로 ───────── */
@media (max-width: 768px) {
  /* 카드 형태 강제 통일 */
  .designer-grid .card {
    border-radius: 50% !important;     /* 완전한 원형 */
    aspect-ratio: 1 / 1;               /* 정사각 비율로 유지 (원 모양 안정화) */
    overflow: hidden;
  }

  /* 내부 이미지 영역도 원형 유지 */
  .designer-grid .card .face.front,
  .designer-grid .card .face.back {
    border-radius: 50% !important;
  }

  /* 혹시 shape-* 클래스가 둥근 정도를 지정한다면 전부 리셋 */
  .designer-grid .shape-round,
  .designer-grid .shape-square,
  .designer-grid .shape-rt,
  .designer-grid .shape-lt,
  .designer-grid .shape-lb,
  .designer-grid .shape-rb {
    border-radius: 50% !important;
  }

  /* 배경 이미지가 잘 보이도록 cover 유지 */
  .designer-grid .card {
    background-size: cover;
    background-position: center;
  }
}

.nav-toggle{ display:none; }