/* ===============================================
   FIX PUBLICPIXELS DEFAULT LAYOUT EFFECTS
=============================================== */

body[data-page="log"] .pp-main::before,
body[data-page="log"] .art-main::before {
  display: none !important;
}

/* ===============================================
   GLOBAL PAGE BODY
=============================================== */
body {
  margin: 0;
  font-family: "Inter","Pretendard",system-ui,-apple-system,
               "Segoe UI",Roboto,"Noto Sans KR",sans-serif;
  background: #fff;
  color: #111;
}

/* ===============================
   HEADER (전시 페이지 모드)
   =============================== */

body[data-page="log"] header {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  background: transparent !important;
  color: rgb(241, 238, 255) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding-top: 10px !important;
  z-index: 3000;
}

body[data-page="log"] header .logo-brand,
body[data-page="log"] header .logo-roman,
body[data-page="log"] header .logo-korean {
  color: rgba(234, 234, 236, 0.95) !important;
}

/* 검색, 카트 아이콘 숨기기 */
body[data-page="log"] header .search-icon,
body[data-page="log"] header .shop-toggle {
  display: none !important;
}

/* 스크롤에 따라 숨길 때 쓸 클래스 */
header,
.pp-header {
  transition: opacity 0.35s ease;
}

.header-hidden {
  opacity: 0;
  pointer-events: none;
}
/* 메뉴 텍스트 */
.main-nav a{
  color: rgba(234, 234, 236, 0.95);
}

/* | 구분선 */
.main-nav a::before{
  background: rgba(234, 234, 236, 0.95);
}
/* ===============================
   LIST TOGGLE (목록으로 돌아가기)
   =============================== */

.list-toggle {
  position: fixed;
  top: 12px;
  right: 24px;
  width: 28px;
  height: 28px;
  z-index: 3500;
  cursor: pointer;
  color:  rgba(234, 234, 236, 0.95);
  opacity: 0.9;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.list-toggle:hover {
  opacity: 1;
  transform: translateY(-1px);
}

.ic-list {
  width: 24px;
  height: 24px;
}

/* 헤더 숨길 때 같이 사라지도록 */
.list-toggle.header-hidden {
  opacity: 0;
  pointer-events: none;
}

/* ===============================
   HEADER SLIDE ANIMATION
   =============================== */

/* 기본 상태: 보임 + 제자리 */
body[data-page="log"] header {
  transform: translateY(0);
  transition: opacity 0.35s ease, transform 0.4s ease;
}

/* 숨김 상태: 살짝 위로 올려서 사라지는 느낌 */
header.header-hidden {
  opacity: 0;
  transform: translateY(-28px);
  pointer-events: none;
}

/* 리스트 버튼도 같이 위로 올라가게 */
.list-toggle.header-hidden {
  opacity: 0;
  transform: translateY(-28px);
}


/* bok.css */
:root{
  --bok-max: 1080px;
  --bok-gap: 22px;
  --bok-gap-sm: 14px;

  --ink: #0b0b0b;
  --muted: rgba(10,10,10,0.62);
  --border: rgba(0,0,0,0.12);

  --tile-radius: 0px; /* 샘플처럼 각진 느낌 */
}

*{ box-sizing: border-box; }

html, body{
  background: #fff;
  color: var(--ink);
}

.bok-main{
  width: min(var(--bok-max), calc(100% - 40px));
  margin: 0 auto;
  padding-top: 120px; /* fixed header 고려 */
  padding-bottom: 60px;
}

/* Top two images: 원본 전체 보이기 + 높이 동일 + 폭은 비율대로 */
.bok-top{
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--bok-gap);
  margin-top: 26px;
}

/* 두 이미지 공통 높이 */
.bok-hero{
  margin: 0;
  height: 560px;          /* 여기서 세로 길이 통일 */
  display: flex;
  align-items: flex-start;
}

/* 원본 전체 보이게 */
.bok-hero img{
  height: 100%;
  width: auto;            /* 폭은 비율대로 */
  display: block;
  object-fit: contain;    /* 전체 보이기 */
  border-radius: var(--tile-radius);
}

/* ===============================================
   TITLE + META
=============================================== */
.art-head {
  margin-top: 10px;
  margin-bottom: 0px;
  margin-left: 10px;
  margin-right: 10px;
}

.art-title {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 600;
}

.art-meta {
  font-size: 13px;
  color: #000000;
  line-height: 1.;
}

.art-meta.medium {
  padding-bottom: 8px;   /* ⭐ 이 값이 선 위치를 결정 */
  margin-bottom: -10px;
  border-bottom: 1px solid rgba(0,0,0,0.1)
}


/* SECTIONS */
.art-section {
  margin-top: 0px;
  margin-left: 10px;
  margin-right: 10px;
}

.art-section h2 {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 0px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #555;
}

.art-section p {
  line-height: 1.7;
  margin: 0px 0px 10px;
  font-size: 14px;

}


.art-section p.text.kor {
  line-height: 1.85;    /* ⭐ 한글 가독성 */
  font-size: 13px;      /* 살짝 작게 */
  letter-spacing: -0.01em;
}

/* =======================================================
   ABOVE SLIDER LINK
   ======================================================= */
/* 공통 박스 스타일 */
.above-slider-link {
  text-align: center;
  margin: 90px auto 80px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}


/* 공통 링크 스타일 — 최중요! */
.above-slider-link a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  color: #000000;
  font-size: 10px;
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.25s ease, color 0.25s ease;
}

/* hover 효과 */
.above-slider-link a:hover {
  color: #f260c9;
  opacity: 1;
}

/* 아이콘 */
.ic-arrow,
.ic-insta {
  width: 11px;
  height: 11px;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* ===============================
   SWIPE STRIP (top이랑 같은 방식)
=============================== */

.bok-strip{
  margin-top: 54px;
}

.strip-head{ display:none; }

/* viewport */
.strip-viewport{
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  outline: none;
}

.strip-viewport::-webkit-scrollbar{ height: 8px; }
.strip-viewport::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,0.18);
  border-radius: 999px;
}

/* ✅ grid 말고 flex로: 겹침 원천 차단 */
.strip-track{
  display: flex;
  align-items: flex-start;
  gap: 24px;            /* 간격 */
  padding: 6px 0 2px;
  width: max-content;   /* ✅ 내용만큼 track이 길어지게 */
}

/* ✅ top이랑 동일: 높이만 통일 + width는 비율대로 */
.strip-item{
  margin: 0;
  height: 560px;
  display: flex;
  align-items: flex-start;
  flex: 0 0 auto;       /* ✅ 줄어들지 않게 */
}

.strip-item img{
  height: 100%;
  width: auto;
  display: block;
  object-fit: contain;
  border-radius: var(--tile-radius);
}

/* Pattern grid */
.bok-pattern{
  margin-top: 60px;
}

/* ===============================
   PATTERN GRID + CAPTIONS (line-aligned)
=============================== */

/* grid와 캡션을 같은 컨테이너 폭으로 맞추는게 핵심 */
.pattern-grid{
  width: 100%;
  max-width: 1200px;
  margin: 80px auto 0;          /* 아래 여백은 captions에서 */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.pattern-cell{ margin: 0; }

.pattern-cell img{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: var(--tile-radius);
}

/* ✅ 캡션을 그리드 바로 아래, 같은 폭으로 */
.pattern-captions{
  width: 100%;
  max-width: 1200px;            /* ✅ grid랑 동일 */
  margin: 10px auto 0;          /* ✅ 바로 밑으로 붙이기 */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;                    /* ✅ grid gap이랑 동일 */
}

/* ✅ 왼쪽 정렬 버전 */
.cap-text{
  margin: 0;
  margin-left: 3px;
  font-size: 11px;
  line-height: 1.55;
  color: var(--muted);
  text-align: left;             /* left or center */
}

/* ✅ 만약 중앙정렬 원하면 위 text-align만 center로 바꾸면 됨 */
/* .cap-text{ text-align:center; } */

.bok-footer{ height: 40px; }


/* Responsive */
@media (max-width: 860px){
  .bok-main{
    width: min(var(--bok-max), calc(100% - 28px));
    padding-top: 60px; /* fixed header 고려 */
  }
 
  .bok-top{
    flex-direction: column;
    align-items: center;
  }
  .bok-hero{
    height: auto;
    width: 100%;
  }
  .bok-hero img{
    width: 100%;
    height: auto;
  }

  .strip-track{
    grid-auto-columns: minmax(200px, 1fr); /* 기존 260px → 200px */
    gap: 12px;
  }

  .strip-item{
    height: 420px; /* 기존 560px → 420px */
  }
  .pattern-grid{
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 60px auto 0;          /* 아래 여백은 captions에서 */

  }

}