/* ✅ 초기화 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  overflow-y: scroll;
}

body {
  font-family: 'SUITE', sans-serif;
  font-size: 14px;
  line-height: 1.8;
  background-image:
    url('../images/pattern_1.png'),
    url('../images/pattern_2.png');
  background-repeat: repeat, repeat;
  background-size: 300px 300px, 300px 300px;
  background-position: 0 0, 100px 100px;
  background-color: #fdfdfd;
}

/* ✅ 숨김 클래스 */
.hidden { display: none; }

/* =========================
   Header
   ========================= */
header {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: nowrap;
  width: 640px; /* 헤더 컨테이너 폭 */
}

.logo img {
  height: 100px;
  cursor: pointer;
  transition: opacity 0.5s;
}
.logo img:hover { opacity: 0.8; }

/* ✅ 메뉴 */
nav {
  display: flex;
  gap: 0.2rem;
  align-items: center;
}
.menu-image {
  width: 100px;
  height: auto;
  cursor: pointer;
  transition: opacity 0.3s;
}
.menu-image:hover { opacity: 0.7; }

/* =========================
   Main (공통)
   ========================= */
main { width: 100%; }

main section {
  min-height: 80vh;
  padding: 2rem 1rem;
}

.section-inner {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

/* =========================
   Home
   ========================= */
#home {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 0.3rem;
}
.home-image {
  width: 100%;
  max-width: 700px;
  height: auto;
  object-fit: contain;
  margin-top: -1rem;
}

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

/* about 전용 변수 (헤더 중앙축과 정확히 맞추려면 --site-max를 헤더 폭과 동일하게) */
#about{
  --site-max: 640px;     /* 헤더 .header-inner가 640px이므로 동일하게 맞춤 */
  --about-left: 250px;   /* 왼쪽 프로필 이미지 칼럼 */
  --about-right: 340px;  /* 오른쪽 텍스트 칼럼 (640 - 250 - 3rem ≈ 340) */
  --about-gap: 3rem;     /* 칼럼 간격 */

  /* 전역 section 패딩 상쇄(about만) */
  padding-left: 0;
  padding-right: 0;
}

/* 가운데 컨테이너: 헤더와 같은 폭/중앙축 */
#about .section-inner{
  width: 100%;
  max-width: var(--site-max);
  margin: 1rem auto;
  padding-inline: 0;         /* 헤더와 동일하게 좌우 패딩 0 */
  box-sizing: border-box;
  text-align: initial;       /* 중앙정렬 상속 방지 */
}

/* 상단 2컬럼*/
#about .about-hero{
  display: grid;
  grid-template-columns: var(--about-left) minmax(0, var(--about-right));
  gap: var(--about-gap);
  justify-content: center; 
  align-items: center;
}

/* 왼쪽 프로필 이미지 */
#about .about-image{
  width: 100%;
  max-width: var(--about-left);
  height: auto;
  display: block;
  border-radius: 0;
}

/* 오른쪽 소개 텍스트*/
#about .about-hero-text{
  max-width: var(--about-right);
  text-align: left;
  line-height: 1.6;          /*행간*/
}
#about .about-hero-text p{
  margin: 0 0 0.33rem;       /*간격*/
}
#about .about-hero-text .contact{
  margin-top: 0.8rem;
}

/* SNS 아이콘 (오른쪽 칼럼 내부) */
#about .sns-icons{
  margin-top: .8rem;
  display: flex;
  justify-content: flex-start;
  gap: .8rem;
}
#about .sns-icons img{
  width: 28px; height: 28px;
  transition: opacity .3s;
  cursor: pointer;
}
#about .sns-icons img:hover{ opacity: .6; }

/* 하단 이력: 컨테이너는 가운데, 내부는 왼쪽 정렬(현 상태 유지) */
#about .about-history{
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}
#about .history-block{
  width: 100%;
  max-width: 650px;
  text-align: left;
}
#about .about-history-image{
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 0 1rem 0;
}
#about .history-block h3{
  font-size: 0.8rem;
  margin: 1rem 0 0.5rem;
  color: #444;
}
#about .history-block ul{ list-style: none; padding-left: 0; }
#about .history-block li{
  margin-bottom: 0.35rem;
  font-size: 0.8rem;
  color: #555;
  line-height: 1.8;
}

/* 반응형 (about만) */
@media (max-width: 720px){
  #about .about-hero{
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  #about .about-image{
    max-width: 420px;
    margin: 0 auto;     /* 작은 화면에서는 이미지도 가운데 */
  }
}


/* =========================
   Illustration (cleaned, fixed)
   ========================= */

/* 한 눈금(간격) 통일: 숫자만 바꾸면 됨 */
#illustration { --illust-gap: 24px; }

/* 1) Grid Masonry: DOM 순서 그대로 + 내부/외부 여백 동일 */
#illustration .gallery{
  /* column 레이아웃 완전 무력화 */
  column-count: initial !important;
  column-gap: 0 !important;

  /* Grid 강제 적용 */
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--illust-gap, 24px) !important;  /* 타일 간격(기본값 포함) */
  grid-auto-rows: 8px;                       /* JS가 span 계산할 단위 */
  padding: var(--illust-gap, 24px);          /* 바깥 여백(상·하·좌·우 동일) */
  margin-top: 0 !important;
}
@media (max-width:1100px){
  #illustration .gallery{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width:640px){
  #illustration .gallery{ grid-template-columns: 1fr; }
}

/* 2) 카드/이미지: 라운드 제거, margin은 grid가 처리 */
#illustration .gallery a{
  display: block;
  margin: 0 !important;
  position: relative;
  overflow: hidden;
  border-radius: 0 !important;           /* 둥근 모서리 제거 */
  grid-row: span var(--span, 1);         /* JS: layoutIllustrationGrid() */
}
#illustration .gallery img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0 !important;           /* 둥근 모서리 제거 */
  transition: opacity .35s ease;
}

/* 3) 오버레이(제목) */
#illustration .gallery a .overlay{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .35s ease; pointer-events: none;
}
#illustration .gallery a .overlay .title{
  color:#000000;
  padding: .5rem .8rem; border-radius: 6px;
  font-weight: 600; font-size: 20px; letter-spacing: .2px;
}
#illustration .gallery a:hover img{ opacity: .35; }
#illustration .gallery a:hover .overlay{ opacity: 1; }

/* 4) 인라인 디테일도 동일 여백/라운드 제거 */
#illustration .inline-detail{
  padding: var(--illust-gap, 24px);
  margin-bottom: var(--illust-gap, 24px);
}
#illustration .inline-detail.hidden{ display: none; }
#illustration .inline-detail .illust-detail-wrap{
  display: grid;
  grid-template-columns: minmax(0,1fr) 360px;
  gap: var(--illust-gap, 24px);
  align-items: start;
}
@media (max-width: 980px){
  #illustration .inline-detail .illust-detail-wrap{ grid-template-columns: 1fr; }
}
#illustration .inline-detail .illust-detail-left img{
  max-height: 520px; width: 100%; height: auto; display: block; border-radius: 0 !important; object-fit: contain;
}
#illustration .inline-detail .illust-detail-right h2{
  text-align: left; font-size: 28px; line-height: 1.2; margin-bottom: 8px;
}
#illustration .inline-detail .detail-meta{ color:#777; font-size:13px; margin-bottom:16px; }
#illustration .inline-detail .detail-desc{ font-size:15px; line-height:1; white-space:pre-line; margin-bottom:18px; text-align: left; }
#illustration .inline-detail .detail-nav{
  display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px;
}
#illustration .inline-detail .detail-nav a{
  text-decoration:none; border-bottom:1px solid transparent; transition:border-color .2s;
}
#illustration .inline-detail .detail-nav a:hover{ border-color: currentColor; }



/* =========================
   Notebook
   ========================= */

/* 모눈 파라미터 */
:root{
  --grid-cell: 20px;              /* 칸 간격 (정수 px 권장) */
  --grid-line: 1px;               /* 선 두께 */
  --grid-bg:   #FFF8E6;           /* 연한 아이보리 배경 */
  --grid-color: rgba(0,0,0,.06);  /* 얇은 선 색(아주 연하게) */
}

#notebook-main .section-inner { padding-top: 3rem; }

/* ✅ 모눈 카드 래퍼 (컨텐츠 폭 안에서만) */
#notebook-main .notebook-grid{
  max-width: 640px;
  margin: 0 auto 48px;
  padding: 28px 24px;
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(0,0,0,0);
  position: relative;
  overflow: hidden;

  background-color: var(--grid-bg);
  background-image:
    repeating-linear-gradient(0deg,
      var(--grid-color) 0 var(--grid-line),
      transparent var(--grid-line) var(--grid-cell)
    ),
    repeating-linear-gradient(90deg,
      var(--grid-color) 0 var(--grid-line),
      transparent var(--grid-line) var(--grid-cell)
    );
}

/* 메뉴 레이아웃: 카드 폭을 꽉 채우도록 */
.notebook-menu {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: stretch;            /* center → stretch */
}

/* 아이템 폭도 카드 기준으로 */
.notebook-item {
  display: flex;
  justify-content: space-between;
  align-items: center;

  width: 100%;                     /* 500px → 100% */
  max-width: none;                 /* 90vw 제한 제거 */

  font-size: 1.1rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px dashed #ccc;
  cursor: pointer;
  transition: background-color 0.2s;
}
.notebook-title { flex: 1; text-align: left; color: #333; }
.notebook-arrow { margin-left: 1rem; color: #aaa; }

/* 아이보리 카드 위에서 자연스럽게 보이는 hover */
.notebook-item:hover { background-color: rgba(255,255,255,.5); border-radius: 4px; }

/* notebook 카테고리 (기존 유지) */
.notebook-category .section-inner { text-align: left; }
.notebook-category-title {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}
.notebook-category-title span {
  display: block;
  text-align: left;
  width: 200px;
}
.notebook-post-list {
  width: 640px;
  max-width: 90vw;
  margin: 0 auto;
}
.notebook-divider {
  border: none;
  border-top: 1px dashed #ccc;
  margin: 1rem 0;
  width: 100%;
}
.post-title { text-align: left; }
.back-button {
  display: block;
  margin: 2rem auto 0 auto;
  background: none;
  border: none;
  font-size: 0.8rem;
  color: #666;
  cursor: pointer;
}
.back-button:hover { text-decoration: underline; }
.post { margin-top: 2rem; }
.post-title {
  font-weight: bold;
  cursor: pointer;
  padding: 1rem 0;
}
.post-content {
  padding: 1rem;
  border-left: 3px solid #aaa;
  background-color: #fafafa;
  margin-top: 0.5rem;
}


/* =========================
   Moreworks slider
   ========================= */

/* 1) 제목과 슬라이더의 좌우 기준선 맞추기 */
.more-title-wrap {               /* 제목 래퍼만 패딩 유지 */
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 12px;
}
.horizontal-gallery-wrapper {    /* 슬라이더 래퍼는 패딩 0 (스냅 오차 방지) */
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
  padding: 0;
}

/* 2) 제목 이미지 크기 */
.more-title {
  display: block;
  width: 250px;
  height: auto;
  margin: 0;
}

/* 3) 간격 시스템 (제목→슬라이더, 슬라이더→다음 제목) */
.more-title-wrap + .horizontal-gallery-wrapper { margin-top: 12px; }
.horizontal-gallery-wrapper + .more-title-wrap { margin-top: 48px; }

/* 4) 스크롤 컨테이너: 스냅 + 가장자리 안 잘리게(패딩) */
.horizontal-gallery{
  display: flex;
  gap: 16px;                     /* 카드 간격(하나로 통일) */
  overflow-x: auto;
  scroll-behavior: smooth;

  /* 🔽 스냅 핵심 */
  scroll-snap-type: x mandatory;
  padding: 0 12px;               /* 가장자리 보호 여백 */
  scroll-padding-left: 12px;     /* 첫 카드 기준선 */
  scroll-padding-right: 12px;    /* 마지막 카드 기준선 */

  scrollbar-width: none;
  -ms-overflow-style: none;
}
.horizontal-gallery::-webkit-scrollbar{ display:none; }

/* 5) 카드(스냅 포인트) */
.work-item{
  flex: 0 0 auto;
  border-radius: 12px;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: block;                /* <a>로 바꾼 경우에도 안전 */
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

/* 첫/두 번째 슬라이더 카드 폭 */
.first-gallery .work-item  { width: 400px; }
.second-gallery .work-item { width: 240px; }

/* 6) 이미지 표시 방식 */
.work-item img{
  width: 100%;
  height: 100%;
  object-fit: cover;             /* 전체 보이게 하려면 contain + background:#fff 로 변경 */
  display: block;
}

/* 7) 슬라이드 버튼 */
.slide-button{
  position: absolute; top: 50%; transform: translateY(-50%);
  background: #fff; border: none; font-size: 2rem; cursor: pointer;
  z-index: 4; opacity: .7; padding: 0 .5rem;
}
.slide-button.left  { left:  0; }
.slide-button.right { right: 0; }

/* 8) 페이드 힌트(오른쪽: 항상, 왼쪽: at-start일 때 숨김) */
.horizontal-gallery-wrapper::after,
.horizontal-gallery-wrapper::before{
  content:""; position:absolute; top:0; bottom:0; width:48px; pointer-events:none; z-index:3;
}
.horizontal-gallery-wrapper::after{
  right:0; background:linear-gradient(to left, #fff, rgba(255,255,255,0));
}
.horizontal-gallery-wrapper::before{
  left:0;  background:linear-gradient(to right, #fff, rgba(255,255,255,0));
  opacity:0; transition:opacity .2s;
}
.horizontal-gallery-wrapper:not(.at-start)::before{ opacity:0.8; }


/* =========================
   Palette modal
   ========================= */
#palette-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;               /* 기본 숨김 (JS에서 'flex'로 토글) */
  justify-content: center;
  align-items: center;
}
#palette-modal .modal-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 1; cursor: pointer;
}
#palette-modal .modal-content {
  position: relative; z-index: 2;
  max-width: 92vw; max-height: 90vh;
}
#palette-modal .modal-content img {
  display: block;
  max-width: 92vw; max-height: 90vh;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: 0;             /* 라운드 제거 */
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  cursor: pointer;              /* 클릭 → 다음 이미지(JS) */
}
#palette-modal .modal-close {
  position: fixed; top: 16px; right: 18px; z-index: 3;
  background: rgba(0,0,0,0.6);
  color: #fff; border: none; border-radius: 999px;
  width: 40px; height: 40px; font-size: 28px; line-height: 40px;
  cursor: pointer;
}

/* =========================
   Palette grid
   ========================= */
#palette .section-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;             /* 좌우 여백 확보 */
}
.palette-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 0.8rem;
  margin-top: 2rem;
}
.palette-grid a { display: block; width: 100%; }
.palette-grid img {
  width: 100%; height: auto;
  border-radius: 0;             /* 라운드 제거 */
  transition: opacity 0.3s ease;
  cursor: zoom-in;
}
.palette-grid img:hover { opacity: 0.7; }