:root{
  --bg:#0b0b0c;
  --fg:#f2f2f2;
  --muted: rgba(255,255,255,.65);
  --border: rgba(255,255,255,.14);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

/* Impact 느낌(없으면 Anton) */
.site-title,
.menu a{
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", "Anton", "Arial Black", sans-serif;
  text-transform: uppercase;
}

.top{
  text-align:center;
  padding: 44px 16px 18px; /* 위/아래 여백 줄여서 전체를 위로 올림 */
}

.site-title{
  margin:0;
  font-size: clamp(56px, 8vw, 110px);
  letter-spacing: 2px;
  line-height: .92;
}

.menu{
  margin-top: 26px;    /* 타이틀-메뉴 간격 */
  margin-bottom: 36px; /* 메뉴-사진 간격 (핵심) */
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 22px;
  font-size: 22px;
  letter-spacing: 1px;
}

.menu a{
  color: var(--fg);
  text-decoration:none;
  opacity: .9;
}
.menu a:hover{ opacity: 1; }
.menu a.is-active{ opacity: 1; }
.sep{ opacity:.6; }

.center{
  min-height: auto;     /* 억지로 꽉 채우지 말기 */
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding: 0 16px 40px; /* 위는 0으로: 헤더가 이미 공간을 만듦 */
}

/* 가운데 이미지 프레임 */
.frame{
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.frame img{
  display:block;
  max-width: 86vw;
  max-height: 70vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border: none;
  background: transparent;

  filter: contrast(1.06) brightness(1.02);
}

/* 아래 작은 텍스트(선택) */
.meta{
  margin-top: 12px;
  display:flex;
  gap: 14px;
  font-size: 12px;
  color: var(--muted);
}

.foot{
  text-align:center;
  padding: 24px 12px 18px;
  font-size: 12px;
  color: rgba(255,255,255,.55);
}

@media (max-width: 520px){
  .menu{ font-size: 16px; gap: 12px; }
}
.meta{ display:none; }
/* 로고 링크가 보라색(visited) 되는 것 방지 */
.site-title,
.site-title:link,
.site-title:visited,
.site-title:hover,
.site-title:active{
  color: var(--fg);          /* 흰색 유지 */
  text-decoration: none;     /* 밑줄 제거 */
}/* 메뉴 클릭 안 되는 겹침 문제 해결 */
.top{ position: relative; z-index: 10; }
.menu{ position: relative; z-index: 20; }
.menu a{ position: relative; z-index: 30; pointer-events: auto; }
.site-title{ position: relative; z-index: 5; }  /* 타이틀이 메뉴를 덮지 않게 */
/* ===== Commercial grid page (thumbnails) ===== */
.gridpage{
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 16px 60px;
}

.tiles{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.tile{
  position: relative;
  display:block;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  overflow: hidden;
  text-decoration:none;
}

.tile img{
  width: 100%;
  height: 260px;          /* ✅ 여기 숫자 낮추면 더 작아짐 */
  object-fit: cover;
  display:block;
}

.tile-title{
  position:absolute;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", "Anton", "Arial Black", sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: clamp(24px, 3vw, 38px);
  color: rgba(255,255,255,.95);
  opacity: 0;
  background: rgba(0,0,0,.35);
  transition: opacity .18s ease;
}

.tile:hover .tile-title{ opacity: 1; }

@media (max-width: 920px){
  .tiles{ grid-template-columns: 1fr 1fr; }
  .tile img{ height: 240px; }
}
@media (max-width: 520px){
  .tiles{ grid-template-columns: 1fr; }
  .tile img{ height: 240px; }
}
.hero-tile img{
  width: 100%;
  height: auto;                 /* 고정 height 없애기 */
  max-height: 60vh;             /* 화면 기준으로만 제한 (원하면 55~70vh 조절) */
  object-fit: contain;          /* ✅ 절대 안 잘림 */
  display: block;
  background: transparent;      /* 남는 공간 색 (원하면 black으로) */
}
.hero-title{ display:none; }
.series{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px 70px;
}

.series-name{
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", "Anton", "Arial Black", sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 26px;
  margin: 8px 0 18px;
  text-align: center;
}

.series-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.series-grid img{
  width: 100%;
  height: auto;
  display: block;
}
/* Lookbook layout */
#seriesGrid .lb-big{
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 18px;
}

/* 04~18 grid */
/* 04~18 grid: gap 0 */
/* grid 자체는 딱 붙게 */
#seriesGrid .lb-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
}

#seriesGrid .lb-grid img{
  width: 100%;
  aspect-ratio: 3 / 4;   /* ✅ 타일 모양 고정 */
  object-fit: cover;     /* ✅ 칸 꽉 채움 = 여백 0 */
  display: block;
  margin: 0;
  border: 0;
}

/* 반응형 */
@media (max-width: 920px){
  #seriesGrid .lb-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
  #seriesGrid .lb-grid{ grid-template-columns: 1fr; }
  #seriesGrid .lb-grid img{ height: auto; object-fit: contain; }
}
#seriesGrid .lb-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
/* commercial 아래 썸네일 */
#commercialGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.commercial-thumb img {
  width: 100%;
  height: auto;
  display: block;
}
/* ✅ c1 - c2 사이 간격 (숫자만 바꾸면 됨) */
.hero-tile + .hero-tile {
  margin-top: 24px;
}

/* ✅ 사진 위에 제목 오버레이 */
.hero-tile {
  position: relative;
  display: block;
}

/* ✅ 제목 스타일 (폰트는 기존 그대로 따라감) */
.hero-title {
  position: absolute;
  left: 16px;
  bottom: 16px;

  color: red;           /* ✅ 빨간색 */
  font-size: 18px;      /* 필요하면 조절 */

  opacity: 0;           /* 기본은 숨김 */
  transform: translateY(6px);
  transition: opacity 0.15s ease, transform 0.15s ease;

  pointer-events: none; /* 글자 때문에 클릭 방해 안 받게 */
}

/* ✅ 마우스 올리면 제목 보이게 */
.hero-tile:hover .hero-title {
  opacity: 1;
  transform: translateY(0);
}
/* hover title overlay - force */
.hero-tile {
  position: relative;
  display: block;
}

.hero-title {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 10;          /* ✅ 이게 핵심: 이미지 위로 올림 */
  color: red;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease;
  pointer-events: none;
}

.hero-tile:hover .hero-title {
  opacity: 1;
  transform: translateY(0);
}
/* ===== FORCE hover title (commercial hero) ===== */
a.hero-tile {
  position: relative !important;
  display: block !important;
}

a.hero-tile > .hero-title {
  position: absolute !important;
  left: 16px !important;
  bottom: 16px !important;
  z-index: 999999 !important;
  color: red !important;

  opacity: 0 !important;
  transform: translateY(6px) !important;
  transition: opacity .15s ease, transform .15s ease !important;

  pointer-events: none !important;
}

a.hero-tile:hover > .hero-title,
a.hero-tile:focus > .hero-title {
  opacity: 1 !important;
  transform: translateY(0) !important;
}
/* ===== hero title overlay (final) ===== */
.hero-tile {
  position: relative;
  display: block;
}

/* 기본은 숨김 */
.hero-title {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 999999;

  color: red;
  font-size: 30px;      /* ✅ 글씨 더 크게 */
  letter-spacing: 0.02em;

  opacity: 0;           /* ✅ 기본은 안 보이게 */
  transition: opacity .15s ease;
  pointer-events: none;
}

/* hover 하면 보이게 + 투명도(진하게) */
.hero-tile:hover .hero-title,
.hero-tile:focus .hero-title {
  opacity: 0.95;        /* ✅ 투명도 높임(=더 진하게 보임) */
}
/* ===== hero title overlay (final force) ===== */
a.hero-tile {
  position: relative !important;
  display: block !important;
}

a.hero-tile > .hero-title {
  position: absolute !important;
  left: 16px !important;
  bottom: 16px !important;
  z-index: 999999 !important;

  color: red !important;
  font-size: 30px !important;     /* ✅ 크게 */
  letter-spacing: 0.02em !important;

  opacity: 0 !important;          /* ✅ 기본 숨김 */
  visibility: visible !important;
  display: block !important;

  transition: opacity .15s ease !important;
  pointer-events: none !important;
}

a.hero-tile:hover > .hero-title,
a.hero-tile:focus > .hero-title {
  opacity: 0.95 !important;       /* ✅ 투명도 높임(진하게) */
}
/* ===== COMMERCIAL hero hover title (FINAL) ===== */
a.hero-tile {
  position: relative !important;
  display: block !important;
}

/* 중앙 정렬 + 로고 폰트(anton) + 덜 밝게 */
a.hero-tile > .hero-title {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;  /* ✅ 정중앙 */

  z-index: 999999 !important;

  font-family: "Anton", Impact, sans-serif !important; /* ✅ SOLOMON LEE 로고 폰트 */
  font-size: 44px !important;                           /* 원하면 36~60 조절 */
  letter-spacing: 0.03em !important;

  color: rgba(255, 0, 0, 0.65) !important;              /* ✅ 덜 밝게 (빨강 + 투명) */
  opacity: 0 !important;                                 /* 기본 숨김 */
  transition: opacity .15s ease !important;

  pointer-events: none !important;
  text-align: center !important;
  white-space: nowrap !important;
}

/* hover 때만 보이게 (너무 쨍하면 0.7→0.55로 낮춰) */
a.hero-tile:hover > .hero-title,
a.hero-tile:focus > .hero-title {
  opacity: 1 !important;
}
/* ===== FINAL (no flicker) ===== */
a.hero-tile { position: relative !important; display: block !important; }

/* 기본 상태: 완전 숨김 */
a.hero-tile > .hero-title {
  position: absolute !important;
  inset: 0 !important;                 /* ✅ 타일 전체를 덮음 */

  display: flex !important;
  align-items: center !important;       /* ✅ 세로 중앙 */
  justify-content: center !important;   /* ✅ 가로 중앙 */

  transform: none !important;           /* ✅ 기존 translate 제거 */
  z-index: 999999 !important;

  text-align: center !important;
  white-space: nowrap !important;

  font-family: "Anton", Impact, sans-serif !important;
  font-size: 44px !important;
  letter-spacing: 0.03em !important;
  color: rgba(255, 0, 0, 0.55) !important;

  opacity: 0 !important;
  visibility: hidden !important;   /* ✅ opacity만 쓰면 잔상처럼 보일 수 있어서 같이 숨김 */
  transition: opacity .12s linear !important;

  pointer-events: none !important;
  white-space: nowrap !important;
}

/* hover일 때만 보이게 */
a.hero-tile:hover > .hero-title {
  opacity: 1 !important;
  visibility: visible !important;
}

/* ✅ focus 상태에서는 절대 보이지 않게 (클릭/포커스 잔상 방지) */
a.hero-tile:focus > .hero-title,
a.hero-tile:focus-visible > .hero-title {
  opacity: 0 !important;
  visibility: hidden !important;
}
.lb-grid.lb-grid-2{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.lb-grid.lb-grid-2 img{
  width: 100%;
  height: auto;
  display: block;
}
/* ===== 03~08: 2열은 기존 느낌 유지 ===== */
.lb-grid.lb-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.lb-grid.lb-grid-2 img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover; /* ✅ 2열은 원래처럼 꽉 차게 (크롭 약간) */
}

/* ===== 09~36: 3열은 크롭 최소화/정돈 ===== */
.lb-grid.lb-grid-3{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.lb-grid.lb-grid-3 img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain; /* ✅ 3열은 안 짤리게 */
}
/* ===== FINAL grids (fix) ===== */

/* 03~08: 2열 */
.lb-grid.lb-grid-2{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch !important;
}
.lb-grid.lb-grid-2 img{
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: cover !important;
}

/* 09~36: 3열 */
/* 09~36: 3열 - 붙이는 느낌(여백 제거하려면 cover 필요) */
.lb-grid.lb-grid-3 { gap: 0 !important; }

.lb-grid.lb-grid-3 img{
  width: 100% !important;
  height: 100% !important;        /* ✅ 칸 높이에 맞춤 */
  aspect-ratio: 2 / 3 !important; /* ✅ 세로룩북 느낌 비율(원하면 3/4, 4/5로) */
  object-fit: cover !important;   /* ✅ 여백 잘라서 꽉 채움 */
  display: block !important;
}
.lb-grid.lb-grid-3 img{
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: contain !important;
}
/* project dropdown menu (black box) */
.projects-menu {
  position: fixed;
  top: 120px;           /* 위치: 필요하면 숫자 조절 */
  left: 50%;
  transform: translateX(-50%);
  background: #000;
  padding: 20px 24px;
  display: none;
  z-index: 999999;
}

.projects-menu.is-open {
  display: block;
}

.projects-item {
  display: block;
  color: #fff;
  text-decoration: none;
  font-family: "Anton", Impact, sans-serif; /* 로고 폰트랑 맞춤 */
  font-size: 32px;      /* 스샷 느낌 */
  line-height: 1.15;
  letter-spacing: 0.02em;
  margin: 10px 0;
}

.projects-item:hover {
  opacity: 0.75;
}
.projects-menu {
  position: fixed;
  top: 120px;
  left: 50%;
  transform: translateX(-50%);
  background: #000;
  padding: 20px 24px;
  display: none;
  z-index: 999999;
}

/* project dropdown - small box near nav */
.projects-menu{
  position: absolute;              /* ✅ fixed 말고 header 기준으로 */
  top: 78px;                       /* ✅ 위치 조절 (필요하면 65~90) */
  left: 50%;
  transform: translateX(-50%);     /* 가운데 근처에 놓되, 너무 크지 않게 */
  background: #000;
  padding: 18px 22px;
  display: none;
  z-index: 9999;
  width: fit-content;
}

.projects-menu.is-open{
  display: block;
}

.projects-item{
  display: block;
  color: #fff;
  text-decoration: none;
  font-family: "Anton", Impact, sans-serif;
  font-size: 22px;                /* ✅ 작게 */
  line-height: 1.1;
  letter-spacing: 0.02em;
  margin: 10px 0;
  text-align: left;               /* ✅ 레퍼런스처럼 왼쪽 정렬 */
}

.projects-item:hover{
  opacity: 0.75;
}
/* ===== VIVID GREY filmstrip (Wix style) ===== */
.strip {
  display: flex !important;
  gap: 14px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 24px !important;
  max-width: 1000px;
  margin: 0 auto;

  scroll-snap-type: x mandatory;
}

/* 세로 직사각형 썸네일 카드 */
.strip-item {
  flex: 0 0 auto !important;
  width: 180px !important;     /* ✅ 썸네일 폭 */
  height: 520px !important;    /* ✅ 썸네일 높이 */
  background: #111 !important;
  scroll-snap-align: start;
  cursor: pointer;
}

.strip-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;   /* ✅ 썸네일은 꽉 채우는게 레퍼런스 느낌 */
  display: block !important;
}

/* 스크롤바 조금 얇게(옵션) */
.strip::-webkit-scrollbar { height: 10px; }
.strip::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); }
/* ===== Lightbox FORCE FIX ===== */
#lightbox.lightbox{
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.92) !important;
  display: none !important;
  z-index: 9999999 !important;
  align-items: center !important;
  justify-content: center !important;
}

#lightbox.lightbox.is-open{
  display: flex !important;
}

#lightbox.lightbox img{
  max-width: 92vw !important;
  max-height: 92vh !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
}
/* ===== Lightbox buttons (Wix-like) ===== */
.lb-close, .lb-prev, .lb-next{
  position: fixed;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,0.9);
  cursor: pointer;
  z-index: 10000000;
  line-height: 1;
  user-select: none;
}

.lb-close{
  top: 20px;
  right: 24px;
  font-size: 44px;
}

.lb-prev, .lb-next{
  top: 50%;
  transform: translateY(-50%);
  font-size: 70px;
  padding: 10px 16px;
  opacity: 0.6;
}

.lb-prev{ left: 18px; }
.lb-next{ right: 18px; }

.lb-prev:hover, .lb-next:hover, .lb-close:hover{
  opacity: 1;
}
.series-desc{
  max-width: 1000px;
  margin: 14px auto 0;
  padding: 0 24px;
  color: rgba(255,255,255,0.78);
  font-size: 18px;
  line-height: 1.7;
  letter-spacing: 0.01em;
}

.series-desc p{
  margin: 0 0 12px;
}
@media (max-width: 700px){
  .strip{
    padding: 16px !important;
    gap: 10px !important;
  }
  .strip-item{
    width: 130px !important;
    height: 380px !important;
  }

  .series-desc{
    font-size: 15px;
    line-height: 1.75;
    padding: 0 18px 24px;
  }

  /* 라이트박스 화살표/닫기 버튼도 조금 작게 */
  .lb-prev, .lb-next{ font-size: 52px; }
  .lb-close{ font-size: 36px; top: 14px; right: 16px; }
}
.page { margin: 0; background:#000; color:#fff; font-family: Arial, Helvetica, sans-serif; }

.page-header { padding: 48px 64px 16px; }
.page-title { margin:0; font-size:64px; font-weight:800; }
.page-subtitle { margin:16px 0 0; font-size:22px; font-weight:700; }

.series { padding: 24px 64px 64px; }
.footer { text-align:center; padding:24px 0 40px; font-weight:700; }

.face-grid { display:flex; flex-direction:column; gap:72px; }

.face-row { display:grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap:24px; }

.tile { display:block; overflow:hidden; text-decoration:none; }
.tile img { width:100%; height:100%; display:block; object-fit:cover; }

.face-row .portrait, .face-row .wave { height:560px; }

@media (max-width: 700px) {
  .page-header { padding:28px 18px 8px; }
  .series { padding:14px 18px 40px; }
  .page-title { font-size:36px; }
  .page-subtitle { font-size:16px; }
  .face-row { grid-template-columns: 1fr 1fr; gap:12px; }
  .face-row .portrait, .face-row .wave { height:240px; }
}
.unhoused-stack{
  max-width: 980px;
  margin: 0 auto;
  padding: 24px 0 80px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.unhoused-item{ margin: 0; }

.unhoused-item img{
  width: 100%;
  height: auto;
  display: block;
}
.about-wrap{
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 24px 80px;
  line-height: 1.7;
}
.about-wrap p{
  margin: 0 0 18px;
}
/* ABOUT text styling */
.about-text{
  font-size: 18px;      /* 전체 글자 크게 */
  line-height: 1.75;
  max-width: 980px;
  margin: 0 auto;
}

.about-lead{
  font-weight: 800;     /* SOLOMON LEE만 bold */
  font-size: 20px;      /* 다른 글자보다 살짝 크게 */
  letter-spacing: 0.2px;
}
/* ===== Bigger typography (global) ===== */
body{
  font-size: 18px;   /* 전체 기본 글씨 */
}

/* Top big SOLOMON LEE */
.site-title{
  font-size: 92px;   /* 기존보다 크게 */
  line-height: 1;
}

/* Menu: PROJECT | COMMERCIAL | ABOUT */
.menu a{
  font-size: 22px;
}
.menu .sep{
  font-size: 22px;
}

/* Projects dropdown items */
.projects-item{
  font-size: 20px;
}

/* Page title inside pages (THE VIVID GREY / UNHOUSED 등) */
.series-name{
  font-size: 28px;
}

/* About page text */
.about-text{
  font-size: 20px;
  line-height: 1.8;
}
.about-lead{
  font-size: 24px;   /* SOLOMON LEE 더 크게 */
  font-weight: 800;
}