@charset "UTF-8";

:root {
  --main-color: #000000;
  --accent-color: #aaaaaa;
  --dark-main-color: #000000;
  --text-bright-color: #fff;
  --icon-color: #fff;
  --icon-bk-color: #ddd;
  --gray-color: #ddd;
  --large-width: 1000px;
  --middle-width: 800px;

  /* 추가 다크 인덱스 / 섹션용 */
  --surface: #0f0f10;
  --surface-2: #1a1a1b;
  --border: rgba(255,255,255,.08);
  --text-strong: #e9e9e9;
  --text-soft: #b7b7b7;
  --bg-section: #ffffff;
  --text-muted: #999999;
}

/* 기본 설정: 폰트 크기 */
@media (max-width: 599px) {
  :root { font-size: 14px; }
}
@media (min-width: 600px) and (max-width: 799px) {
  :root { font-size: 16px; }
}
@media (min-width: 800px) {
  :root { font-size: 18px; }
}

body {
  margin: 0;
  font-size: 16px;
  font-family: '맑은 고딕','Apple SD Gothic Neo','sans-serif';
}

/* =========================
   HEADER
   ========================= */

/* 메탈 헤더 바 */
header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  background: linear-gradient(120deg, #181818, #050505 50%, #181818);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.20),
    inset 0 -1px 0 rgba(0,0,0,0.8),
    0 4px 16px rgba(0,0,0,0.6);
}

/* nohero 버전 */
.nohero header {
  position: static;
  background: linear-gradient(120deg, #181818, #050505 50%, #181818);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.20),
    0 3px 10px rgba(0,0,0,0.5);
  border-bottom: none;
}

/* headA: 상단 로고 – 배경 투명 */
.headA {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 85px;        /* 헤더바늘리기 높이 */
  padding: 0 40px;
  background: transparent;
  box-shadow: none;
  text-decoration: none;
}

/* 로고 이미지 – 심플 메탈 느낌 */
.headA img {
  height: 64px;
  width: auto;
  display: block;
  filter: none;
  opacity: 0.9;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* 호버할 때만 살짝 반응 */
.headA:hover img {
  transform: scale(1.03);
  opacity: 1;
}

/* headB: 네비게이션 메뉴 – 메탈 느낌 */
.headB ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.headB a {
  display: block;
  padding: 18px 22px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #d8d8d8;  /* 은색 글자 */
  text-decoration: none;
  background: transparent;
  transition: color .2s, text-shadow .2s;
}
.headB a:hover {
  background: transparent;
  color: #ffffff;
  text-shadow: 0 0 8px rgba(255,255,255,0.45);
}

@media (min-width: 768px) {
  header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--large-width);
    margin-left: auto;
    margin-right: auto;
  }
  .headB ul { display: flex; }
}

/* headC: 모바일 토글 버튼 – 메탈 느낌 */
@media (max-width: 767px) {

  header .container-small {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .headC {
    margin-right: 12px;
    padding: 0;
    border: none;
    outline: none;
    background: none;
    font-size: 28px;
    cursor: pointer;

    /* 메탈 그라데이션 글자 */
    color: transparent;
    background-image: linear-gradient(
      135deg,
      #ffffff 0%,
      #d8d8d8 35%,
      #8f8f8f 70%,
      #f5f5f5 100%
    );
    -webkit-background-clip: text;
    background-clip: text;

    /* 살짝만 빛나는 정도 */
    text-shadow:
      0 0 4px rgba(0,0,0,0.5),
      0 1px 1px rgba(255,255,255,0.6);

    opacity: 0.85;
    transition: opacity .2s, text-shadow .2s, transform .2s;
  }

  .headC:hover {
    opacity: 1;
    text-shadow:
      0 0 6px rgba(255,255,255,0.5),
      0 1px 2px rgba(0,0,0,0.8);
    transform: translateY(-1px);
  }

  /* 모바일에서는 텍스트 메뉴 숨김 */
  .headB { display: none; }
}

/* 데스크탑용 – 이 부분은 그대로 두면 됨 */
@media (min-width: 768px) {
  .headC { display: none; }
  .headB { display: block !important; }
}

/* =========================
   MOBILE (max-width: 768px)
========================= */
@media (max-width: 768px) {

  /* 모바일은 두 줄 허용 */
  .conA .container {
    white-space: normal !important; 
    transform: translate3d(0, 10px, 0) !important; /* 너무 내려가면 안 예쁘니까 10px */
    text-align: center;
  }

  /* 모바일용 타이틀 스타일 */
  .conA .hero-title {
    font-size: 11vw;            /* 모바일 적정 크기 */
    letter-spacing: 0.12em;     /* 좁은 화면용 시원한 자간 */
    margin-left: 0;             /* 두 줄일 때 margin-left 필요 없음 */
    line-height: 1.15;          /* 두 줄일 때 더 예쁘게 보이게 */
    display: inline-block;      /* 중앙 정렬 유지 */
  }

  /* &WALSH 조금 작게 */
  .conA p {
    font-size: 15px;
    margin-top: 6px;
  }
}

/* =========================
   HERO SECTION
========================= */

.conA {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  min-height: 450px;
  background-image: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.1)), url(img/main_img.jpg);
  background-position: center;
  background-size: cover;
  text-align: center;
  color: var(--text-bright-color);
  position: relative;
  overflow: hidden;

  /* 마우스 패럴랙스 값 저장용 CSS 변수 */
  --mx: 0;
  --my: 0;
}

/* 텍스트 컨테이너 */
.conA .container {
  white-space: nowrap;       /* 절대 줄바꿈 안됨 */
  max-width: none !important;
  position: relative;
  opacity: 0;
  transform: translate3d(0, 30px, 0);  /* 약간 위에서 내려옴 */
  transition:
    opacity 0.9s ease,
    transform 1.1s cubic-bezier(0.19, 1, 0.22, 1);
}

/* 로딩되면 등장 */
.conA.loaded .container {
  opacity: 1;
}

/* ================
   MAIN TITLE
================ */
.conA .hero-title {
  position: relative;
  margin-top: 0;
  margin-bottom: 10px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  
  /* ⭐ 조정된 자간 (적당히 시원한 정도) */
  letter-spacing: 0.22em;
  margin-left: 0.22em;

  font-size: 10vw;
  color: #ffffff;
  text-transform: uppercase;
}

/* 파란 레이어 2개 (흩어지는 효과) */
.conA .hero-title::before,
.conA .hero-title::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  padding-top: 35px;
}

/* 가까운 파란 레이어 */
.conA .hero-title::before {
  color: rgba(80, 150, 255, 0.8);
  filter: blur(6px);
  mix-blend-mode: screen;
  transform: translate3d(
    calc(var(--mx) * -0.25px),
    calc(var(--my) * -0.25px),
    0
  );
}

/* 멀리 퍼지는 레이어 */
.conA .hero-title::after {
  color: rgba(40, 120, 255, 0.6);
  filter: blur(14px);
  mix-blend-mode: screen;
  transform: translate3d(
    calc(var(--mx) * 0.45px),
    calc(var(--my) * 0.45px),
    0
  );
}

/* SUB TEXT */
.conA p {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 18px;
}

@media (min-width: 768px) {
  .conA .hero-title {
    font-size: 90px;

    /* 데스크탑에서 조금 더 넓은 자간 */
    letter-spacing: 0.28em;
    margin-left: 0.28em;
    padding-top: 50px;
  }

  .conA p {
    font-size: 24px;
  }
}


/* =========================
   CONB / CONC / COND
   ========================= */

.conB .container {
  padding-top: 80px;
  padding-bottom: 20px;
}
.conB .text {
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 60px;
  text-align: center;
}
.conB h2 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 20px;
}
.conB p {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 1.8;
  opacity: 0.8;
}
.conB a {
  color: var(--main-color);
  text-decoration: none;
}
.conB a:hover { text-decoration: underline; }
.conB i {
  font-size: 50px;
  color: #172073;
  margin-bottom: 10px;
  transform: scale(0.98);
  transition: 0.3s;
}
.conB i:hover { transform: scale(1.2); }

@media (min-width: 768px) {
  .conB .container {
    display: flex;
    max-width: var(--large-width);
    margin-left: auto;
    margin-right: auto;
  }
  .conB .text { flex: 1; }
}

/* 콘텐츠C: 개요(이미지+글자)*/
.conC {
  background-color: var(--main-color);
  color: var(--text-bright-color);
}
.conC .text { padding: 20px; }
.conC h2 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 20px;
}
.conC p {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 1.8;
  opacity: 0.8;
}
.conC a {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 30px;
  border: solid 3px currentColor;
  border-radius: 6px;
  background-color: var(--accent-color);
  color: var(--text-bright-color);
  font-size: 14px;
  text-decoration: none;
}
.conC a:hover {
  background-image: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,255,0.2));
}
.conC .Photo {
  min-height: 300px;
  background-image: url(img/art.jpg);
  background-position: center;
  background-size: cover;
}
@media (min-width: 768px) {
  .conC .container {
    display: flex;
    max-width: var(--large-width);
    margin-left: auto;
    margin-right: auto;
  }
  .conC .Photo { flex: 3; }
  .conC .text {
    flex: 2;
    padding: 50px;
  }
}

/* 콘텐츠D */
.conD .container { padding-top: 2px; }
.conD .text { padding: 20px; }
.conD h2 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 20px;
}
.conD p {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 1.8;
  opacity: 0.8;
}
.conD a {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 30px;
  box-shadow: 0 0 0 1px #888;
  border: solid 3px currentColor;
  border-radius: 6px;
  background-color: var(--accent-color);
  color: var(--text-bright-color);
  font-size: 14px;
  text-decoration: none;
}
.conD a:hover {
  background-image: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,255,0.2));
}
.conD .Photo {
  min-height: 300px;
  background-image: url(img/h.jpg);
  background-position: center;
  background-size: cover;
}
@media (min-width: 768px) {
  .conD .container {
    display: flex;
    flex-direction: row-reverse;
    max-width: var(--large-width);
    margin-left: auto;
    margin-right: auto;
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .conD .Photo { flex: 0 0 400px; }
  .conD .text {
    flex: 1;
    padding: 50px;
  }
}

/* =========================
      FOOTER
========================= */

.footer-minimal {
  /*background: #000;*/
  background: linear-gradient(120deg, #181818, #050505 50%, #181818);
  color: #fff;
  padding: 22px 0 18px;  /* 위아래 더 줄임 */
  font-family: 'Montserrat', sans-serif;
}

.footer-inner {
  max-width: 1150px;     /* ← 양옆을 더 안으로 끌어당김 */
  margin: 0 auto;
  padding: 0 28px;       /* ← 여기도 줄여서 전체 폭 좁게 */
  
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 좌측 이름 */
.footer-left {
  font-size: 18px;
  letter-spacing: 0.20em;
}

/* 우측 SNS 아이콘 */
.footer-right a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 32px;          /* 살짝 더 소형 */
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.75);
  color: #fff;
  margin-left: 10px;
  text-decoration: none;
  font-size: 13px;
  transition: .2s;
}

.footer-right a:hover {
  background: rgba(255,255,255,0.2);
}

/* COPYRIGHT */
.footer-copy {
  text-align: center;
  margin-top: 16px;       /* ← 이름과 간격을 조금 더 줌 */
  font-size: 11px;
  letter-spacing: 0.12em;
  color: #ccc;
}

/* 모바일 대응 */
@media (max-width: 768px) {
  .footer-inner {
    flex-direction: column;
    gap: 12px;
  }
  
  .footer-left {
    font-size: 16px;
  }
}

/* =========================
   ABOUT / HISTORY
   ========================= */

.post .container {
  max-width: var(--middle-width);
  margin-left: auto;
  margin-right: auto;
  padding: 30px 10px;
}
.post h2 {
  padding-left: 0.5rem;
  border-left: solid 0.75rem var(--accent-color);
  font-size: 2rem;
}
.post p {
  font-size: 1rem;
  line-height: 2;
}

.history {
  background-color: var(--main-color);
  color: var(--text-bright-color);
}
.history .text { padding: 20px; }
.history h2 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 1.5rem;
}
.history .photo {
  min-height: 300px;
  background-image: url(img/plant.jpg);
  background-position: center;
  background-size: cover;
}
.history table {
  border-collapse: collapse;
  border-top: solid 1px var(--gray-color);
  font-size: 0.875rem;
  width: 100%;
}
.history th, .history td {
  padding-top: 1.8rem;
  padding-bottom: 1.8rem;
  border-bottom: solid 1px var(--gray-color);
}
.history th {
  padding-right: 1rem;
  text-align: left;
  word-break: keep-all;
}
@media (min-width: 768px) {
  .history .container {
    display: flex;
    max-width: var(--large-width);
    margin-left: auto;
    margin-right: auto;
  }
  .history .photo { flex: 3; }
  .history .text {
    flex: 2;
    padding: 50px;
  }
}

/* =========================
   ALL WORK (가로 스크롤 카드)
   ========================= */
.all-work {
  padding: 50px 0 0 0;
}
.section-heading {
  font-family: 'Montserrat', sans-serif;
  font-size: 30px;
  text-align: center;
  margin: 0 0 36px;
}
.work-track {
  position: relative;
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 6px 120px 18px;
}

/* work 카드 섹션 양 옆 페이드 그라데이션 */
.work-track::before,
.work-track::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 90px;
  pointer-events: none;
  z-index: 10;
}
.work-track::before {
  left: 0;
  background: linear-gradient(to right, #ffffff 0%, rgba(255,255,255,0) 100%);
}
.work-track::after {
  right: 0;
  background: linear-gradient(to left, #ffffff 0%, rgba(255,255,255,0) 100%);
}

/* 카드 박스 */
.work-card {
  flex: 0 0 220px;
  background: #151515;
  border-radius: 26px;
  padding: 18px 16px 22px;
  scroll-snap-align: center;
  box-shadow: 0 12px 28px rgba(0,0,0,0.6);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.work-card:hover {
  transform: scale(1.03);
  box-shadow: 0 14px 32px rgba(0,0,0,0.8);
}

/* 썸네일 – 은색 메탈 프레임 */
.work-thumb {
  width: 100%;
  height: 150px;
  border-radius: 20px;
  margin-bottom: 14px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #000;
  border: 1px solid rgba(220,220,230,0.9);
  box-shadow:
    0 10px 24px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 -1px 0 rgba(0,0,0,0.7);
}

/* LOGO* 가로 스크롤바 – 흰 바탕 + 선명한 실버 썸 */
.work-track {
  scrollbar-width: thin;
  scrollbar-color: #b5b5b5 #ffffff; /* thumb, track */
}

.work-track::-webkit-scrollbar {
  height: 8px;
}

/* 트랙(바탕) – 순백 */
.work-track::-webkit-scrollbar-track {
  background: #ffffff;
  border-radius: 999px;
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,0.06),
    inset 0 -1px 2px rgba(255,255,255,1);
}

/* 썸(움직이는 부분) – 조금 더 어두운 실버 + 강한 그림자 */
.work-track::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg,
    #f4f4f4 0%,
    #d0d0d0 40%,
    #a8a8a8 60%,
    #f5f5f5 100%
  );
  border-radius: 999px;
  box-shadow:
    0 0 6px rgba(0,0,0,0.4),          /* 바깥 그림자: 배경에서 또렷하게 */
    inset 0 0 3px rgba(255,255,255,0.9); /* 안쪽 하이라이트 */
}

/* 로고 썸네일 이미지 경로 */
.work-thumb-1 { background-image: url("img/logo-1.jpg"); }
.work-thumb-2 { background-image: url("img/logo-2.jpg"); }
.work-thumb-3 { background-image: url("img/logo-3.jpg"); }
.work-thumb-4 { background-image: url("img/logo-4.jpg"); }
.work-thumb-5 { background-image: url("img/logo-5.jpg"); }
.work-thumb-6 { background-image: url("img/logo-6.jpg"); }
.work-thumb-7 { background-image: url("img/logo-7.jpg"); }

.work-card h3 {
  margin: 0 0 4px;
  font-size: 15px;
  color: #f5f5f5;
}
.work-card p {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
}

/* =========================
   DARK INDEX CARDS
   ========================= */

.index-section {
  max-width:1200px;
  margin:120px auto;
  padding:0 24px;
  display:grid;
  gap:48px;
}
.index-card{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  align-items:stretch;
  border-radius:32px;
  overflow:hidden;
  background:
    radial-gradient(1200px 500px at 20% 0%, rgba(255,255,255,.06), transparent 40%),
    linear-gradient(180deg, var(--surface-2), var(--surface) 70%);
  border:1px solid var(--border);
  box-shadow:
    0 20px 60px rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(255,255,255,.03);
}
.index-card.reverse{ grid-template-columns:1fr 1.15fr; }
.index-content{
  padding:60px 56px;
  color:var(--text-strong);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.index-eyebrow{
  margin:0 0 10px;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text-soft);
}
.index-content h3{
  margin:0 0 14px;
  font-size:32px;
  font-family:'Montserrat',sans-serif;
}
.index-content p{
  margin:0 0 22px;
  line-height:1.7;
  opacity:.88;
  font-size:14px;
}
.index-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:46px;
  padding:0 22px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  color:#e7e7e7;
  text-decoration:none;
  font-size:14px;
  transition:.25s;
}
.index-cta:hover{
  border-color:rgba(255,255,255,.5);
  background:rgba(255,255,255,.04);
  box-shadow:0 4px 16px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.06);
}
.index-media{
  position:relative;
  background-size:cover;
  background-position:center;
}
.index-media::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(380px 220px at 70% 15%, rgba(255,255,255,.12), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 35%);
  mix-blend-mode:screen;
  opacity:.5;
  pointer-events:none;
}
.index-card.reverse .index-media::after{
  background:
    radial-gradient(380px 220px at 30% 15%, rgba(255,255,255,.12), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 35%);
}
.index-card:hover{
  transform:translateY(-2px);
  transition:.25s;
  box-shadow:0 28px 70px rgba(0,0,0,.65), inset 0 0 0 1px rgba(255,255,255,.04);
}
@media (max-width:980px){
  .index-card, .index-card.reverse{ grid-template-columns:1fr; }
  .index-media{ height:280px; order:-1; }
  .index-card.reverse .index-media{ order:-1; }
  .index-content{ padding:28px; }
}

/* =========================
   HERO 아래 워드마크 섹션
   ========================= */

.hero-logo-bg {
  position: relative;
  height: 450px;
  padding-top: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  overflow: hidden;
  margin-bottom: 60px;
}

.hero-logo-bg .bg-logo {
  font-size: 14vw;
  font-weight: 800;
  font-family: 'Montserrat', sans-serif;
  color: rgba(0,0,0,0.05);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  user-select: none;
  pointer-events: none;
  z-index: 0;
}

/* =========================
   AUTO SHOWCASE (슬라이드)
   ========================= */

.showcase{
  padding: 80px 0 40px;
  background: var(--bg-section);
}
.showcase-head{
  max-width: 1200px;
  margin: 0 auto 24px;
  padding: 0 24px;
}
.showcase-head h2{
  margin: 0 0 10px;
  font-size: clamp(28px, 6vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #000000;      /* 큰 타이틀 검정으로 */
}
.showcase-link{
  display:inline-flex;
  gap:10px;
  align-items:center;
  color: rgba(0,0,0,0.35);
  text-decoration: none;
  font-size: 14px;
}
.showcase-link:hover{
  color: rgba(0,0,0,0.7);
}

.auto-row{
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.auto-track{
  display: flex;
  gap: 18px;
  width: max-content;
  animation: slide-left 28s linear infinite;
}
.auto-row--reverse .auto-track{
  animation-name: slide-right;
}
.auto-row.auto-row--slow .auto-track{
  animation-duration: 40s;
}

/* 메탈 프레임 썸네일 */
.metal-thumb{
  flex: 0 0 auto;
  width: clamp(240px, 26vw, 380px);
  aspect-ratio: 16/10;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg,#17181a,#0f0f10 70%),
    radial-gradient(600px 260px at 50% -10%, rgba(110,86,240,.10), transparent 60%);
  border: 1px solid rgba(220,220,230,0.9);
  box-shadow:
    0 10px 28px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.65);
}
.metal-thumb::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%);
  transform: skewX(-18deg) translateX(-120%);
  animation: chromeSweep 7.5s ease-in-out infinite;
  opacity:.35;
  mix-blend-mode: screen;
  pointer-events:none;
}
.metal-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  filter: contrast(1.02) saturate(1.02);
  transition: transform .35s ease;
}
.metal-thumb:hover img{ transform: scale(1.04); }

@keyframes slide-left{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }
}
@keyframes slide-right{
  from{ transform: translateX(-50%); }
  to  { transform: translateX(0); }
}

/* 모션 줄이기 설정 */
@media (prefers-reduced-motion: reduce){
  .auto-track{ animation: none; }
  .metal-thumb::after{ animation: none; }
}

/* ===============================
   PACKAGE SECTION (Dark Metal + 이미지)
================================ */

.package-section {
  max-width: 1200px;
  margin: 140px auto;
  padding: 0 24px;
}
.package-header { margin-bottom: 32px; }
.package-header h2 {
  font-size: clamp(28px, 5vw, 54px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.package-compare {
  color: rgba(0,0,0,0.45);
  font-size: 15px;
  text-decoration: none;
}
.package-compare:hover { color: rgba(0,0,0,0.75); }
.package-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 60px;
}
.package-card { text-align: center; }

/* 메탈 + 이미지 박스 (최종 버전 하나만 사용) */
.package-box {
  width: 100%;
  aspect-ratio: 16 / 10;        /* 가로로 긴 비율 통일 */
  border-radius: 18px;
  margin-bottom: 22px;
  position: relative;
  overflow: hidden;

  background-color: #101010;    /* 이미지 없을 때 바탕색 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  box-shadow:
    0 18px 40px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(0,0,0,0.9);
}

/* 실제 이미지 넣기 */
.package-box-1 { background-image: url('img/box1.png'); }
.package-box-2 { background-image: url('img/box2.png'); }
.package-box-3 { background-image: url('img/box3.png'); }

/* 메탈 빛 번짐 (고정) */
.package-box::before {
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(120% 160% at 10% 0%, rgba(255,255,255,0.18), transparent 55%),
    radial-gradient(120% 160% at 90% 100%, rgba(0,0,0,0.6), transparent 60%);
  mix-blend-mode: soft-light;
  pointer-events:none;
}

/* 크롬 스윕 애니메이션 (metal-thumb과 공유) */
.package-box::after {
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    110deg,
    transparent 28%,
    rgba(255,255,255,.22) 50%,
    transparent 72%
  );
  transform: skewX(-20deg) translateX(-160%);
  animation: chromeSweep 6s ease-in-out infinite;
  pointer-events:none;
  opacity:.35;
}

@keyframes chromeSweep {
  0%   { transform: skewX(-20deg) translateX(-160%); }
  50%  { transform: skewX(-20deg) translateX(20%);   }
  100% { transform: skewX(-20deg) translateX(160%);  }
}

/* 제목, 설명, 버튼 */
.package-card h3 {
  font-size: 20px;
  margin-bottom: 6px;
  font-weight: 600;
}
.package-card p {
  font-size: 14px;
  opacity: 0.65;
  margin-bottom: 18px;
}
.pkg-btn {
  display: inline-block;
  padding: 10px 28px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.55);
  background: white;
  text-decoration: none;
  font-size: 13px;
  color: #111;
  transition: 0.3s;
}
.pkg-btn:hover {
  background: #000;
  color: #fff;
  border-color: #fff;
}

/* =========================
   ABOUT PAGE HERO
   ========================= */

.about-hero{
  padding: 140px 0 110px;
  background:#ffffff;
}

.about-inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: minmax(0,1.3fr) minmax(0,1fr);
  gap: 56px;
  align-items: center;
}

.about-copy{
  color:#111;
}

.about-eyebrow{
  margin:0 0 10px;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.45);
}

.about-copy h1{
  margin:0 0 20px;
  font-family: 'Montserrat',sans-serif;
  font-size: clamp(30px, 4vw, 40px);
  letter-spacing: .03em;
}

.about-lead{
  margin:0 0 14px;
  font-size: 15px;
  line-height: 1.8;
  font-weight: 600;
}

.about-body{
  margin:0 0 22px;
  font-size: 14px;
  line-height: 1.9;
  color: rgba(0,0,0,0.75);
}

/* 태그 배지들 */
.about-tags{
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.about-tags li{
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.12);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: #f5f5f5;
}

/* 오른쪽 포트레이트 카드 */
.about-portrait{
  display:flex;
  justify-content:center;
}

.about-portrait-frame{
  width: 100%;
  max-width: 380px;
  aspect-ratio: 4 / 5;
  border-radius: 28px;
  overflow:hidden;
  position: relative;
  background:
    radial-gradient(700px 380px at 10% 0%, rgba(255,255,255,.24), transparent 50%),
    linear-gradient(140deg, #111111, #2a2a2a 60%, #050505);
  box-shadow:
    0 28px 70px rgba(0,0,0,.75),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.9);
}

/* 안쪽 이미지 */
.about-portrait-frame img{
  position:absolute;
  inset: 10% 8% 6% 8%;
  width: auto;
  height: auto;
  max-width: 84%;
  max-height: 84%;
  object-fit: cover;
  margin:auto;
  filter: contrast(1.05) saturate(1.02);
}

/* 살짝 반사선 */
.about-portrait-frame::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(110deg,
    rgba(255,255,255,.18) 0%,
    transparent 40%,
    transparent 60%,
    rgba(255,255,255,.1) 100%);
  mix-blend-mode: soft-light;
  opacity:.55;
  pointer-events:none;
}

@media (max-width: 900px){
  .about-inner{
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .about-portrait{
    order:-1;           /* 모바일에서 사진이 위로 */
  }
}

/* =========================
   ABOUT – LOCATION SECTION
   ========================= */

.about-location{
  background:#ffffff;
  padding:90px 0 110px;
}

.about-location-inner{
  max-width:var(--large-width);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1.25fr);
  min-height:360px;
  border-radius:32px;
  overflow:hidden;
  box-shadow:0 26px 70px rgba(0,0,0,.35);
}

/* 왼쪽 텍스트 패널 */
.about-location-text{
  background:#ffffff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:70px 40px;
  border-right:1px solid #f0f0f0;
}

.about-location-text h3{
  margin:0 0 10px;
  font-family:'Montserrat',sans-serif;
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#222;
}

.about-location-text p{
  margin:2px 0;
  font-size:12px;
  color:#666;
}

.about-location-text .loc-label{
  margin-top:6px;
  margin-bottom:8px;
  font-size:13px;
  font-weight:600;
  color:#333;
}

.about-location-text .loc-note{
  margin-top:18px;
  font-size:11px;
  color:#aaaaaa;
}

/* 오른쪽 사진 패널 */
.about-location-photo{
  background-image:url("img/studio.jpg");  /* 회사 사진 */
  background-size:cover;
  background-position:center;
}

/* 반응형 */
@media (max-width:900px){
  .about-location-inner{
    grid-template-columns:1fr;
    border-radius:24px;
  }
  .about-location-text{
    border-right:none;
    border-bottom:1px solid #f0f0f0;
    padding:50px 28px;
  }
  .about-location-photo{
    min-height:260px;
  }
}

/* =========================
   STUDIO HISTORY – VECTOR + DARK
   ========================= */

.studio-history{
  background:#050505;          /* 검정 배경 */
  padding:100px 0 120px;
  color:#f5f5f5;
}

.studio-history-inner{
  max-width:1100px;
  margin:0 auto;
  padding:0 40px;
}

/* 헤더 */
.sh-head{
  margin-bottom:40px;
}
.sh-eyebrow{
  margin:0 0 8px;
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.45);
}
.sh-head h2{
  margin:0 0 10px;
  font-family:'Montserrat',sans-serif;
  font-size:clamp(26px,3.4vw,34px);
  letter-spacing:.04em;
}
.sh-lead{
  margin:0;
  font-size:14px;
  line-height:1.9;
  color:rgba(255,255,255,0.75);
}

/* 바디 – 가운데 라인 + 점 + 카드 */
.sh-body{
  position:relative;
  margin-top:16px;
}

/* 가운데 세로 라인 */
.sh-body::before{
  content:"";
  position:absolute;
  left:140px;   /* 연도(120px) + 가운데 컬럼(40px)의 중앙 */
  top:0;
  bottom:0;
  width:1.5px;
  background:rgba(255,255,255,0.22);
}

/* 각 아이템 : 연도 / 점 / 카드 3열 */
.sh-item{
  display:grid;
  grid-template-columns:120px 40px minmax(0,1fr);
  align-items:flex-start;      /* 텍스트 위쪽 정렬 */
  padding:14px 0;
}

/* 연도 */
.sh-year{
  font-family:'Montserrat',sans-serif;
  font-size:13px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.7);
}

/* 점 (원형) */
.sh-dot{
  width:14px;
  height:14px;
  border-radius:50%;
  border:2px solid #ffffff;
  background:#050505;
  margin:0 auto;              /* ← 중앙 정렬 */
  position:relative;
  z-index:1;
}

/* 카드 – 벡터 느낌: 플랫, 얇은 라인 */
.sh-card{
  margin-left:24px;
  padding:14px 18px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.10);
  background:#111111;  /* 살짝만 밝은 회색 */
}

.sh-card h3{
  margin:0 0 4px;
  font-size:13px;
  font-weight:500;                         /* 너무 두껍지 않게 */
  color:rgba(255,255,255,0.92);
}

.sh-card p{
  margin:0;
  font-size:12px;
  line-height:1.8;
  color:rgba(255,255,255,0.70);           /* 순백 아니게 */
}

/* STUDIO HISTORY - 모바일 레이아웃 */
@media (max-width: 768px) {

  .studio-history-inner{
    padding: 0 20px;      /* 좌우 여백만 살짝 */
  }

  /* 가운데 세로 라인 위치를 더 왼쪽으로 */
  .sh-body::before{
    left: 22px;
  }

  /* 한 줄짜리 그리드 → 연도 + 카드 세로 정렬 */
  .sh-item{
    position: relative;
    display: block;       /* grid 말고 블록으로 */
    padding: 14px 0 18px 40px;  /* 왼쪽은 라인/점 여백 */
  }

  /* 연도 - 카드 위에 작게 */
  .sh-year{
    font-size: 11px;
    letter-spacing: .18em;
    margin-bottom: 6px;
    color: rgba(255,255,255,0.65);
  }

  /* 점 - 절대 위치로 고정 */
  .sh-dot{
    position: absolute;
    left: 14px;
    top: 22px;            /* 연도 텍스트 중앙쯤 */
    margin: 0;
    width: 12px;
    height: 12px;
  }

  /* 카드 - 전체 너비 사용 */
  .sh-card{
    margin-left: 0;
    padding: 14px 16px 16px;
    border-radius: 12px;
  }

  .sh-card h3{
    font-size: 13px;
  }

  .sh-card p{
    font-size: 12px;
    line-height: 1.8;
  }
}

/* =========================
   ART 소개 페이지
   ========================= */
/* art 소개 */
.listA h1 {
	font-size: 2rem;
	text-align: center;
}

.listA .container {
	display: flex;
	flex-wrap: wrap;
	max-width: 1000px;
	max-width: var(--large-width);
	margin: 30px auto;
}

.listA article {
	flex: 1 1 300px;
	display: flex;
}

.listA a {
	flex: 1;
	margin: 10px;
	display: block;
	border: solid 1px #ddd	;
	border: solid 1px var(--gray-color);
	color: inherit;
	text-decoration: none;
}

.listA a:hover {
	/*opacity: 0.8;*/
	background-color: black;
	color: #ddd;
}

.listA .photo {
	min-height: 200px;
	background-position: center;
	background-size: cover;
}

.listA .text {
	margin: 10px;
}

.listA h2 {
	font-size: 18px;
}

.listA p {
	font-size: 14px;
	opacity: 0.8;
}

/* art_b 소개 */
.listB h1 {
	font-size: 2rem;
	text-align: center;
}

.listB .container {
	display: flex;
	flex-wrap: wrap;
	max-width: 1000px;
	max-width: var(--large-width);
	margin: 30px auto;
}

.listB article {
	flex: 1 1 384px;
	display: flex;
}

.listB a {
	flex: 1;
	margin: 10px;
	display: flex;
	border: solid 1px #ddd	;
	border: solid 1px var(--gray-color);
	color: inherit;
	text-decoration: none;
}

.listB a:hover {
	/*opacity: 0.8;*/
	background-color: black;
	color: #ddd;
}

.listB .photo {
	flex: 2;
	min-height: 0;
	background-position: center;
	background-size: cover;
}

.listB .text {
	flex: 3;
	margin: 10px;
}

.listB h2 {
	font-size: 18px;
}

.listB p {
	font-size: 14px;
	opacity: 0.8;
}

/* 너비가 600px이하의 미디어에서 */
@media (max-width: 384px) {
	.listB .photo {
		flex: 1;
	}

	.listB p {
		display: none;
	}
}

/* =========================
   CONTACT PAGE – METALLIC STYLE
   ========================= */

body.contact-page {
  background:#ffffff;
}

/* 상단 인트로 */
.contact-hero{
  padding:140px 0 80px;
  background:#ffffff;
}
.contact-hero-inner{
  max-width:780px;
  margin:0 auto;
  padding:0 24px;
  text-align:center;
}
.ch-eyebrow{
  margin:0 0 10px;
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(0,0,0,0.45);
}
.contact-hero h1{
  margin:0 0 16px;
  font-family:'Montserrat',sans-serif;
  font-size:clamp(30px,4vw,40px);
  letter-spacing:.18em;
}
.ch-lead{
  margin:0;
  font-size:14px;
  line-height:1.9;
  color:rgba(0,0,0,0.75);
}

/* 메탈릭 카드 섹션 */
.contact-metal{
  background:#050505;
  padding:100px 0 130px;  /* 검은 영역*/
  color:#f5f5f5;
}
.contact-metal-inner{
  max-width:1100px;
  margin:0 auto;
  padding:0 40px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:32px;
}
.cm-card{
  border-radius:28px;
  padding:28px 26px 30px;  
  background:
    linear-gradient(145deg,#111111,#2b2b2b 55%,#050505);
  border:1px solid rgba(255,255,255,0.16);
  box-shadow:
    0 26px 60px rgba(0,0,0,0.9),
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -1px 0 rgba(0,0,0,1);
  display:flex;
  flex-direction:column;
  justify-content:space-between; /* 위 정보+아래 노트 간 간격 */
  min-height:190px;              
}
.cm-card-top{
  margin-bottom:12px;
}
.cm-icon{
  width:46px;
  height:46px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:16px;
  background:
    radial-gradient(circle at 30% 30%, #ffffff, #d4d4d4 40%, #7a7a7a 70%, #101010);
  box-shadow:
    0 0 0 3px rgba(0,0,0,0.8),
    0 0 10px rgba(255,255,255,0.5);
}
.cm-icon .fa{
  color:#111;
  font-size:18px;
}
.cm-card h2{
  margin:0 0 6px;
  font-size:13px;
  letter-spacing:.20em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.82);
}
.cm-label{
  margin:0 0 10px;
  font-size:11px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.55);
}
.cm-main{
  display:block;
  margin-bottom:4px;
  font-size:15px;
  font-weight:600;
  color:#ffffff;
  text-decoration:none;
}
.cm-main:hover{
  text-decoration:underline;
}
.cm-note{
  margin:0;
  font-size:11px;
  line-height:1.7;         
  color:rgba(255,255,255,0.55);
}

/* LOCATION + MAP (텍스트 제거, 맵만 크게) */
.contact-location{
  background:#ffffff;
  padding:70px 0 120px;
}
.contact-location-inner{
  max-width:1100px;
  margin:0 auto;
  padding:0 40px;
}
.contact-location-map{
  display:flex;
  align-items:stretch;
}
.map-frame{
  flex:1;
  border-radius:24px;
  overflow:hidden;
  background:#000;
  min-height:360px;                
  box-shadow:
    0 16px 36px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 -1px 0 rgba(0,0,0,0.8);
  position:relative;
}
.map-frame::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(120deg,
      rgba(255,255,255,.14) 0%,
      transparent 45%,
      rgba(255,255,255,.06) 100%);
  mix-blend-mode:soft-light;
  pointer-events:none;
  opacity:.4;
}
.map-frame iframe{
  width:100%;
  height:100%;
  border:0;
}

@media (max-width:900px){
  .contact-metal-inner{
    padding:0 24px;
  }
  .contact-location-inner{
    padding:0 24px;
  }
  .map-frame{
    min-height:260px;
  }
}


/* =========================
   ARTWORK PAGE – HEADER TABS
   ========================= */

.art-top {
  padding: 20px 0 26px;
  background: #ffffff;
}

.art-top .container {
  max-width: var(--large-width);
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}

.art-top-title {
  margin: 0 0 24px;
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: 0.18em;
}

.art-top-tabs {
  display: inline-flex;
  gap: 40px;
  align-items: center;
  justify-content: center;
}

.art-top-tabs .tab {
  position: relative;
  border: none;
  background: none;
  padding: 6px 0;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  color: #8c8c8c;
  font-family: 'Montserrat', sans-serif;
}

.art-top-tabs .tab::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 0;
  height: 2px;
  /* 파란 포인트 라인 */
  background: linear-gradient(90deg, #1b3cff, #4a73ff);
  transform: translateX(-50%);
  transition: width .25s;
}

.art-top-tabs .tab:hover {
  color: #111111;
}

.art-top-tabs .tab:hover::after {
  width: 70%;
}

.art-top-tabs .tab.active {
  color: #111111;
}

.art-top-tabs .tab.active::after {
  width: 90%;
}

/* =========================
   ARTWORK GRID – JESSICA WALSH STYLE
   ========================= */

.art-section {
  padding: 40px 0 120px;
  background: #ffffff;
}

.art-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;               /* 카드 간 간격 넉넉하게 */
}

/* 카드 전체 */
.art-card {
  position: relative;
  border-radius: 18px;      /* 너무 둥글지 않게 */
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,0.22);
  cursor: pointer;
  background: #000;
  transform: translateZ(0);
  transition: transform .28s ease, box-shadow .28s ease;
}

.art-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 60px rgba(0,0,0,0.35);
}

/* 썸네일 */
.art-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform .35s ease;
}

/* 확대 효과 */
.art-card:hover .art-thumb {
  transform: scale(1.06);
}

/* 오버레이 */
.art-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px 22px 22px;
  background:
    linear-gradient(
      to top,
      rgba(0,0,0,0.85) 0%,
      rgba(0,0,0,0.4) 45%,
      rgba(0,0,0,0.0) 80%
    );
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .28s ease, transform .28s ease;
}

/* 호버 시 오버레이 등장 */
.art-card:hover .art-overlay {
  opacity: 1;
  transform: translateY(0);
}

/* 텍스트 스타일 */
.art-tag {
  margin: 0 0 4px;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
}

.art-title {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  color: #ffffff;
}

/* VIEW PROJECT 파란 포인트 */
.art-view {
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #1b3cff;              /* 진한 파랑 텍스트 */
}

.art-view::after {
  content:"";
  display:inline-block;
  width: 26px;
  height: 2px;
  margin-left: 6px;
  /* 파란 그라데이션 라인 */
  background: linear-gradient(90deg, #1b3cff, #4a73ff);
  vertical-align: middle;
}

/* =========================
   ART PAGE – HERO BANNER
   ========================= */

.art-hero{
  padding: 120px 0 80px;          /* 헤더 밑 여백 포함 */
  background:#ffffff;
}

.art-hero-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr);
  gap: 56px;
  align-items: center;
}

/* 왼쪽 카피 */
.art-hero-copy{
  color:#111;
}

.art-hero-eyebrow{
  margin:0 0 12px;
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(0,0,0,0.55);
}

.art-hero-title{
  margin:0 0 14px;
  font-family:'Montserrat',sans-serif;
  font-size: clamp(32px, 5vw, 44px);
  letter-spacing:.16em;
}

.art-hero-desc{
  margin:0;
  font-size:14px;
  line-height:1.8;
  color:rgba(0,0,0,0.70);
}

/* 오른쪽 – 옆으로 흐르는 배너 */
.art-hero-marquee{
  position:relative;
  overflow:hidden;
  border-radius:26px;
  box-shadow:
    0 24px 60px rgba(0,0,0,0.32),
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 -1px 0 rgba(0,0,0,0.9);
  background:#000;
}

/* 좌우 페이드 마스크 느낌 */
.art-hero-marquee::before,
.art-hero-marquee::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:80px;
  z-index:5;
  pointer-events:none;
}
.art-hero-marquee::before{
  left:0;
  background:linear-gradient(to right,#ffffff 0%, rgba(255,255,255,0) 100%);
}
.art-hero-marquee::after{
  right:0;
  background:linear-gradient(to left,#ffffff 0%, rgba(255,255,255,0) 100%);
}

/* 트랙이 계속 왼쪽으로 움직임 */
.art-hero-track{
  display:flex;
  gap: 12px;
  width:max-content;
  animation: art-marquee 32s linear infinite;
}

.art-hero-item{
  flex:0 0 260px;              /* 한 타일 너비 */
  aspect-ratio: 16 / 9;
  border-radius:18px;
  overflow:hidden;
  position:relative;
  background:#000;
}

/* 비디오/이미지 공통 */
.art-hero-item video,
.art-hero-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* 파란 하이라이트 오버레이 (제시카 월시 느낌 조금) */
.art-hero-item::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 0%, rgba(76,132,255,0.35), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(0,30,80,0.7), transparent 60%);
  mix-blend-mode:soft-light;
  pointer-events:none;
  opacity:.7;
}

/* 마우스 올렸을 때 살짝 확대 */
.art-hero-item:hover video,
.art-hero-item:hover img{
  transform:scale(1.05);
  transition:transform .35s ease;
}

/* 무한 슬라이드 애니메이션 */
@keyframes art-marquee{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }
}

/* 반응형 – 좁을 때 위/아래 쌓이기 */
@media (max-width: 900px){
  .art-hero{
    padding: 110px 0 60px;
  }
  .art-hero-inner{
    grid-template-columns:1fr;
    gap:32px;
    padding:0 24px;
  }
}

/* =========================
   ART HERO VIDEO
   ========================= */
/* 헤더바랑 ARTWORKS 사이에 들어가는 영상 */
.art-hero-video-wrap {
  width: 100%;
  margin: 0;
  padding: 7px 0 0;   /* 헤더와 ARTWORKS 사이 여백 */
  background: #fff;
  display: flex;
  justify-content: center;
}

/* 영상은 원본 비율 그대로, 안 잘리게 */
.art-hero-video {
  max-width: 800px;      /* 로고가 너무 작으면 이 값 키우고,
                            너무 크면 줄이면 됨 */
  width: 100%;
  height: auto;          /* ★ 세로 고정하지 말기 (핵심) */
  display: block;
  object-fit: contain;   /* ★ frame 안에서 잘리지 않게 */
}

/* ── 모바일에서만: 영상 전체가 보이게(안 잘리게) 설정 ── */
@media (max-width: 767px) {
  .art-hero-video-wrap {
      height: 180px;        /* 조금 더 높여서 여유 주기 */
      padding-top: 40px;    /* ARTWORKS랑 간격 유지 */
      margin: 0 0 8px;
  }

  .art-hero-video {
      object-fit: contain;       /* 잘리지 않게 전체 축소 */
      object-position: center center;
      background: #fff;
  }
}


/* =========================
   ARTWORK PAGINATION
   ========================= */

.art-pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  margin:32px 0 10px;
  font-family:'Montserrat',sans-serif;
}

.page-btn{
  border:none;
  background:none;
  cursor:pointer;
  padding:0;
  font-size:14px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#777;
}

.page-number{
  width:34px;
  height:34px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  letter-spacing:.10em;
  background:transparent;
  border:1px solid transparent;
  transition:.2s;
}

.page-number.is-active{
  background:#111;
  color:#fff;
  border-color:#111;
  box-shadow:0 10px 24px rgba(0,0,0,0.35);
}

.page-number:hover:not(.is-active){
  border-color:rgba(0,0,0,0.35);
  color:#111;
}

.page-arrow{
  font-size:18px;
  opacity:.4;
  transition:.2s;
}

.page-arrow:hover{
  opacity:.9;
  transform:translateY(-1px);
}

.page-btn.is-disabled{
  opacity:.18;
  cursor:default;
  pointer-events:none;
}

/* =========================
   ARTWORK – MOBILE 2-COLUMN GRID
   ========================= */
@media (max-width: 768px) {

  /* 섹션 여백 살짝 줄이기 */
  .art-section {
    padding: 32px 0 80px;
  }

  /* 2열 / 좌우 여백 작게 */
  .art-grid {
    max-width: 100%;
    padding: 0 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));  /* ★ 2칸 배치 */
    gap: 18px;                                         /* 카드 간 간격 */
  }

  /* 카드 그림자·모서리 모바일용으로 살짝 정리 */
  .art-card {
    border-radius: 16px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
  }

  /* 세로 비율 조금 세워서 포스터 느낌 */
  .art-thumb {
    aspect-ratio: 4 / 5;
  }

  /* 모바일은 항상 텍스트가 보이게 (hover 없어서) */
  .art-overlay {
    opacity: 1;
    transform: translateY(0);
    padding: 10px 12px 12px;
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.85) 0%,
      rgba(0, 0, 0, 0.30) 40%,
      rgba(0, 0, 0, 0.0) 90%
    );
  }

  /* 텍스트 사이즈/간격 모바일 최적화 */
  .art-tag {
    font-size: 9px;
    letter-spacing: .14em;
  }

  .art-title {
    font-size: 13px;
    line-height: 1.3;
  }

  .art-view {
    font-size: 10px;
    letter-spacing: .16em;
  }
}









/* =========================
   DETAIL PAGE EXCLUSIVE LAYOUT
========================= */
.project-detail .container {
    max-width: 1040px;
    margin: 0 auto;
    padding: 40px 40px 110px;  /* 상단을 40px로 추가 */
}

@media (min-width: 1400px) {
    .project-detail .container {
        padding: 0 60px 130px;
    }
}

@media (max-width: 1024px) {
    .project-detail .container {
        padding: 0 32px 100px;
    }
}

@media (max-width: 768px) {
    .project-detail .container {
        padding: 0 22px 80px;
    }
}

/* =========================
   BACK TO ARTWORKS (LEFT + NEW STYLE)
========================= */
.project-detail .detail-back {
    max-width: 1040px;
    margin-top: 90px;   /* 70px → 120px 정도로 크게 */
    margin-left: 40px;
    margin-bottom: 12px;

    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: #b0b0b0;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
}

.project-detail  .fa-angle-left {
    font-size: 13px;
    transform: translateY(1px);
}

.project-detail .detail-back:hover {
    color: #888888;
    transform: translateX(-2px);
}

/* 모바일 위치 조정 */
@media (max-width: 768px) {
    .project-detail .detail-back {
        margin-top: 80px;
        margin-left: 22px;
        font-size: 12px;
        letter-spacing: 0.18em;
    }
}

.project-detail h1 {
    margin-top: 40px;   /* 원하는 만큼 조절 */
}

/* =========================
      HERO TITLE
========================= */
.project-detail .project-hero {
    padding-top: 32px;
    padding-bottom: 0;
    text-align: center;
}

.project-detail .project-title-block {
    margin: 70px auto 4px;
    text-align: center;
}

.project-detail .project-label {
    font-size: 11px;
    letter-spacing: 0.20em;
    color: #777;
    margin-bottom: 4px;
}

.project-detail .project-title {
    font-size: clamp(34px, 4.2vw, 42px);
    font-weight: 600;
    letter-spacing: 0.16em;
    margin-bottom: 4px;
}

.project-detail .project-subtitle {
    font-size: 13px;
    color: #999;
    letter-spacing: 0.06em;
    margin-bottom: 0;
}

/* =========================
      MAIN IMAGE + TEXT
========================= */
.project-detail .project-main {
    margin-top: -45px;   /* -6px → -40px 정도로 */
    margin-bottom: 110px;
}

.project-detail .project-main-inner {
    display: flex;
    align-items: flex-start;
    gap: 70px;
}

@media (max-width: 1100px) {
    .project-detail .project-main-inner {
        flex-direction: column;
        gap: 40px;
    }
}

.project-detail .project-image img {
    width: 100%;
    max-width: 520px;
    border-radius: 14px;
    display: block;
}

/* =========================
        TEXT BLOCK
========================= */
.project-detail .project-info {
    flex: 1;
    max-width: 520px;
}

.project-detail .detail-section-title {
    font-size: 14px;
    letter-spacing: 0.14em;
    color: #555;
    margin: 0 0 14px;
    font-weight: 600;
    text-transform: uppercase;
}

.project-detail .detail-body {
    font-size: 14px;
    line-height: 1.9;
    letter-spacing: 0.01em;
    color: #333;
    margin-bottom: 18px;
}

/* =========================
        META GRID
========================= */
.project-detail .project-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 40px;
    margin: 32px 0 26px;
    padding-bottom: 26px;
    border-bottom: 1px solid #eee;
}

.project-detail .meta-label {
    font-size: 11px;
    color: #999;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.project-detail .meta-value {
    font-size: 13px;
    color: #333;
    margin-top: 4px;
    line-height: 1.7;
}

/* =========================
        MORE PROJECTS
========================= */

.project-detail .related-projects {
    padding-top: 60px;
    padding-bottom: 0px;
    border-top: 1px solid #eee;
}

.project-detail .related-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.project-detail .related-header h3 {
    font-size: 16px;
    letter-spacing: 0.10em;
}

.project-detail .related-arrows button {
    border: none;
    background: #fff;
    font-size: 20px;
    cursor: pointer;
    padding: 4px 8px;
}

.project-detail .related-track-wrapper {
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 10px;
}

.project-detail .related-track {
    display: inline-flex;
    gap: 26px;
}

.project-detail .related-card {
    display: inline-block;
    width: 240px;
    text-decoration: none;
    color: inherit;
}

.project-detail .related-thumb {
    width: 240px;
    height: 160px;
    background-size: cover;
    background-position: center;
    border-radius: 12px;
    margin-bottom: 10px;
}

.project-detail .related-title {
    font-size: 14px;
    font-weight: 600;
}

.project-detail .related-cat {
    font-size: 12px;
    color: #777;
}

/* =========================
   반응형 DETAIL PAGE ONLY
========================= */
@media (max-width: 768px) {
    .project-detail .project-hero {
        padding-top: 28px;
        padding-bottom: 0;
    }

    .project-detail .project-title {
        font-size: 28px;
        letter-spacing: 0.14em;
    }

    .project-detail .project-title-block {
        margin: 20px auto 6px;
    }

    .project-detail .project-main {
        margin-top: -4px;
        margin-bottom: 80px;
    }

    .project-detail .project-meta-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .project-detail .related-card {
        width: 210px;
    }

    .project-detail .related-thumb {
        width: 210px;
        height: 140px;
    }
}