@import url('https://cdn.jsdelivr.net/npm/font-kopubworld@1.0.3/css/dotum.css');
/* ============================================================
   STUDIO MERIDIAN — studiounravel.com 기법 학습 클론
   전체 폰트: KoPubWorld 돋움 (한국출판인회의 무료 폰트)
   ============================================================ */

:root {
  --bg: #ffffff;
  --fg: #000000;
  --matte: #1a1a1a;        /* 매트블랙 (서브페이지 배경) */
  --box-w: 290px;          /* 로고(자동폭) 기준 — 메뉴/푸터 박스 공통 가로폭 */
  --gap: 22px;              /* 코너 UI 여백 */
  --reserve: calc(var(--gap) + var(--box-w));  /* 세로 경계선 오른쪽 예약 폭 */
  --frame: 22px;           /* 이미지 흰 프레임 두께 */
  --ease: cubic-bezier(.86, 0, .07, 1);   /* 패널 전환 이징 (관찰값) */
  --dur: 0.7s;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { height: 100%; }
body {
  min-height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: "KoPubWorld Dotum", "Work Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* 홈: 네이티브 스크롤 차단 (스냅 엔진이 제어) */
body.home { height: 100vh; overflow: hidden; }
/* 서브페이지: 매트블랙 + 화이트 텍스트 + 네이티브 스크롤 */
body.page { background: var(--matte); color: #fff; }

a { color: inherit; text-decoration: none; }

/* ---------- 고정 코너 UI (우측 상단 스택: 로고 박스 → 메뉴) ---------- */
.chrome {
  position: fixed; inset: 0; z-index: 30; pointer-events: none;
  display: flex; flex-direction: column; align-items: flex-end;
  justify-content: space-between; padding: var(--gap);
  font-family: "Work Sans", sans-serif;   /* 코너 UI는 이전 폰트 */
}
.chrome a { pointer-events: auto; }
/* 상단 그룹: 로고 박스 + 메뉴 (우상단) */
.chrome-top { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }

/* 로고 박스: 이름만 (메뉴 위, 우상단 최상단) — 기존 대비 30% 축소 */
.brand { text-align: left; }  /* 오른쪽 여백(메뉴와 동일) 유지 */
.logo {
  display: inline-block; width: var(--box-w); background: var(--matte); color: #fff;
  border: 1px solid rgba(255,255,255,.14);
  padding: 15px 16px 14px; line-height: 1.2; text-align: right;   /* 메뉴와 동일 폭, 우측 정렬 */
}
.logo-name {
  display: block; font-size: 22.75px; font-weight: 700;   /* 32.5px * 0.7 */
  letter-spacing: -0.7px; text-transform: uppercase; color: #fff;
  white-space: nowrap;   /* 한 줄 유지 */
}

/* 푸터 텍스트 박스: 연락처 (우하단, 별도 박스) */
.footer {
  width: var(--box-w); background: var(--matte); border: 1px solid rgba(255,255,255,.14);
  padding: 20px 26px 18px; text-align: right;
  color: rgba(255,255,255,.85); font-size: 12px; font-weight: 400; line-height: 1.7;
}
.footer .admin {
  display: inline-block; margin-top: 4px; color: #fff;
  text-decoration: underline; text-underline-offset: 2px;
}

/* 내비: 로고 박스 아래, 메뉴 1개당 매트블랙 박스 + 화이트 텍스트 (30% 축소) */
.nav {
  display: flex; flex-direction: column; align-items: flex-end; gap: 5px;
}
.nav a {
  color: #fff; background: var(--matte); padding: 6px 16px;
  width: var(--box-w); text-align: right;   /* 로고 박스와 동일 폭, 텍스트는 우측 유지 */
  border: 1px solid rgba(255,255,255,.14);
  font-size: 18.2px; font-weight: 700; letter-spacing: -0.56px;
  line-height: 1.1; text-transform: uppercase;
}
.nav a:hover { background: #2a2a2a; }
/* 현재 페이지 메뉴 활성 표시 (반전) */
.nav a.active,
.nav a.active:hover { background: #fff; color: #000; border-color: #fff; }

/* 서브페이지: 박스 테두리 제거 → 매트블랙 배경에 투명하게 녹아듦 (홈은 테두리 유지) */
body.page .logo,
body.page .nav a,
body.page .footer { border-color: transparent; }

/* 모든 서브페이지: 로고 첫 글자 왼쪽 기준 세로 경계선 (전체 높이) */
body.page .logo { position: relative; }
body.page .logo::before {
  content: ""; position: absolute; left: 0; top: calc(-1 * var(--gap));
  width: 1px; height: 100vh; background: rgba(255,255,255,.3); pointer-events: none;
}
/* 경계선 오른쪽은 콘텐츠가 침범하지 못하도록 우측 영역 예약 (경계선까지만 사용) */
body.page .page-main,
body.page .work-main { max-width: none; padding-right: var(--reserve); }

/* ---------- 서브페이지 콘텐츠 (매트블랙) ---------- */
.page-main { padding: 130px var(--gap) 280px; max-width: 900px; }
.page-h1 {
  font-size: clamp(44px, 10vw, 120px); font-weight: 700;
  letter-spacing: -2.5px; text-transform: uppercase; line-height: .92;
}
.page-lead {
  margin-top: 34px; max-width: 640px;
  font-size: clamp(18px, 2vw, 24px); font-weight: 500; line-height: 1.5;
}
.page-body {
  margin-top: 26px; max-width: 600px;
  font-size: 15px; font-weight: 400; line-height: 1.85; opacity: .8;
}
.page-body p + p { margin-top: 16px; }

/* 링크 리스트 (social/contact) */
.link-list { margin-top: 44px; display: flex; flex-direction: column; gap: 2px; max-width: 640px; }
.link-list a {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 20px 4px; border-top: 1px solid rgba(255,255,255,.18);
  font-size: clamp(22px, 3.4vw, 40px); font-weight: 700;
  letter-spacing: -1px; text-transform: uppercase; transition: padding-left .35s var(--ease);
}
.link-list a:last-child { border-bottom: 1px solid rgba(255,255,255,.18); }
.link-list a:hover { padding-left: 18px; }
.link-list a span { font-size: 13px; font-weight: 400; opacity: .6; letter-spacing: 0; text-transform: none; }

/* 진행 인디케이터 (우측 점) */
.progress {
  position: fixed; right: 12px; top: 50%; transform: translateY(-50%);
  z-index: 30; display: flex; flex-direction: column; gap: 7px;
}
.progress button {
  width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--fg);
  background: transparent; cursor: pointer; padding: 0; transition: background .3s;
}
.progress button.on { background: var(--fg); }

/* ---------- fullPage 스타일 스냅 ---------- */
.fp {
  height: 100vh;
  transition: transform var(--dur) var(--ease);
  will-change: transform;
}
.panel {
  height: 100vh; width: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 0;                 /* 여백 없이 풀사이즈 배경 */
}
.panel .media {
  position: relative; width: 100%; height: 100%;
  overflow: hidden; background: #ececec;
}
.panel .media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* 진입 리빌 초기 상태 */
  transform: scale(1.08); opacity: 0;
  transition: transform 1.1s var(--ease), opacity .9s ease;
}
.panel.active .media img { transform: scale(1); opacity: 1; }

/* 이미지 위 프로젝트 캡션 (좌하단 살짝) */
.panel .caption {
  position: absolute; left: 18px; bottom: 16px; z-index: 2;
  color: #fff; mix-blend-mode: difference;
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: -0.2px;
  transform: translateY(12px); opacity: 0;
  transition: transform .8s var(--ease) .15s, opacity .8s ease .15s;
}
.panel.active .caption { transform: translateY(0); opacity: 1; }
.panel .caption .idx { opacity: .7; margin-right: 8px; }

/* 첫 패널 힌트 */
.scroll-hint {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  z-index: 30; font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
  opacity: .55; animation: bob 1.8s var(--ease) infinite;
}
@keyframes bob { 0%,100%{ transform: translate(-50%,0);} 50%{ transform: translate(-50%,5px);} }

/* 반응형: 모바일은 코너 UI 축소 */
@media (max-width: 640px) {
  :root { --gap: 14px; --frame: 12px; --box-w: 220px; }
  .nav { gap: 5px; }
  .nav a { font-size: 17px; padding: 7px 11px; }
  .logo { padding: 14px 16px 12px; }
  .logo-name { font-size: 18px; white-space: normal; }   /* 좁은 화면은 줄바꿈 허용 */
  .footer { font-size: 10px; }
  /* 모바일: 세로 경계선/우측 예약 해제 (콘텐츠 폭 확보) */
  body.page .logo::before { display: none; }
  body.page .page-main,
  body.page .work-main { padding-right: var(--gap); }
}

/* 데스크톱: 햄버거/오버레이/플로팅 숨김 */
.nav-toggle, .nav-overlay, .scroll-top { display: none; }

/* 언어 토글 (MAGAZINE 메뉴 아래, 우측 정렬) */
.lang-toggle {
  margin-top: 14px; pointer-events: auto; transform: translateX(-17px);   /* 메뉴 텍스트 우측 끝과 정렬 (박스 안쪽 16+보더1) */
  display: flex; align-items: center; gap: 6px;
  font-size: 18.2px; font-weight: 700; letter-spacing: -0.56px;   /* 메뉴와 동일 크기 */
}
.lang-toggle .lang-btn { background: none; border: none; color: #fff; opacity: .4; cursor: pointer; font: inherit; padding: 2px; }
.lang-toggle .lang-btn.on { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.lang-toggle span { color: #fff; opacity: .3; }

/* 메인홈: 토글도 메뉴와 동일한 검정 박스 (같은 폭·위치) */
body.home .lang-toggle {
  width: var(--box-w); box-sizing: border-box; transform: none;
  background: var(--matte); border: 1px solid rgba(255, 255, 255, .14);
  padding: 6px 16px; gap: 4px; justify-content: flex-end;
}

/* ===== 모바일: 상단 헤더바(로고 좌측) + 우측 드로어 ===== */
@media (max-width: 760px) {
  /* 모바일: 본문 양옆 0.5cm 여백으로 꽉 채움 */
  body.page .page-main, body.page .work-main, body.page .mag-main,
  body.page .about-main, body.page .cform-page, body.page .detail-main,
  body.page .mag-article {
    padding-left: 0.5cm !important; padding-right: 0.5cm !important;
  }
  /* 상단 헤더바 배경 */
  .chrome::before {
    content: ""; position: fixed; top: 0; left: 0; right: 0; height: 58px;
    background: var(--matte); border-bottom: 1px solid rgba(255, 255, 255, .12); z-index: 2;
  }
  /* 로고: 헤더바 좌측 (박스 제거, 텍스트만) */
  .chrome-top { display: contents; }
  .brand {
    position: fixed; top: 0; left: 0; height: 58px; display: flex; align-items: center;
    padding-left: 16px; transform: none; text-align: left; z-index: 4;
  }
  .logo { background: none !important; border: none !important; padding: 0 !important; width: auto !important; }
  .logo-name { font-size: 15px !important; white-space: nowrap !important; letter-spacing: -0.4px; }
  /* 푸터: 드로어 하단에 함께 슬라이드 */
  .footer {
    display: block; position: fixed; right: 26px; bottom: 28px;
    width: auto; max-width: 248px; background: none; border: none; padding: 0;
    font-size: 11px; line-height: 1.7;
    transform: translateX(160%); transition: transform .35s var(--ease); z-index: 4;
  }
  body.nav-open .footer { transform: translateX(0); }

  /* 햄버거 (우측 상단) */
  .nav-toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    position: fixed; top: 0; right: 0; width: 58px; height: 58px;
    background: none; border: none; cursor: pointer; pointer-events: auto; z-index: 5;
  }
  /* 언어 토글: 헤더바, 햄버거 왼쪽 — 작게 */
  .lang-toggle { position: fixed; top: 0; right: 52px; height: 58px; margin: 0; z-index: 5; transform: none; font-size: 12px; gap: 4px; }
  .lang-toggle .lang-btn { padding: 1px; }
  /* 모바일: 토글 검은 박스 제거 (홈 포함) */
  body.home .lang-toggle { background: none; border: none; width: auto; padding: 0; }
  .nav-toggle span { display: block; width: 24px; height: 2px; background: #fff; margin: 0 auto; transition: transform .3s, opacity .3s; }
  body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* 우측 드로어 */
  .nav {
    position: fixed; top: 0; right: 0; height: 100vh; width: 72%; max-width: 300px;
    background: var(--matte); border-left: 1px solid rgba(255, 255, 255, .12);
    transform: translateX(100%); transition: transform .35s var(--ease);
    display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
    padding: 84px 26px 26px; z-index: 4;
  }
  body.nav-open .nav { transform: translateX(0); }
  .nav a {
    background: none !important; border: none !important; width: auto !important;
    padding: 12px 0 !important; font-size: 20px !important; text-align: right;
  }
  .nav a.active { background: none !important; color: #fff !important; text-decoration: underline; text-underline-offset: 4px; }

  /* 오버레이 */
  .nav-overlay {
    display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .5);
    opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 3;
  }
  body.nav-open .nav-overlay { opacity: 1; pointer-events: auto; }

  /* 우측하단 '맨 위로' 플로팅 */
  .scroll-top {
    display: flex; align-items: center; justify-content: center;
    position: fixed; right: 16px; bottom: 16px; z-index: 20;
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(20, 20, 20, .8); color: #fff; border: 1px solid rgba(255, 255, 255, .3);
    font-size: 20px; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .3s;
  }
  .scroll-top.show { opacity: 1; pointer-events: auto; }
}