/* =========================================================
   이제주민 · 한경 웹진 — style.css (모든 페이지 공용)
   ========================================================= */

:root {
  --ink: #12233A;
  --text: #1F2A37;
  --muted: #5B5246;
  --paper: #FFFDF9;
  --cream: #FFF8EE;
  --line: #E7DFD2;
  --sky: #A9D4F5;
  --orange: #F97316;
  --orange-ink: #C2410C;
  --peach: #FFD9BC;
  --cabin: #F3EDE3;
  --hdr-bg: #F97316;   /* 헤더: 인터뷰 화면의 주황 선과 같은 주황 (사용자 요청) */
  --hdr-ink: #FFFFFF;  /* 헤더 글자·로고: 흰색 (사용자 요청). 주황 위 흰 글자는 대비 2.8:1로 공통 기준 4.5:1에 못 미친다 → 올리기 전 확인 목록에 적어 둠 */
  --font: Pretendard, "Pretendard Variable", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
}

/* 큰 제목 전용: 웹진 본문과 같은 고딕 계열(Noto Sans KR Bold)에서 쓰는 글자만 뽑아 넣음 (SIL OFL 1.1)
   "이제,주민" · 인물 슬라이드 제목 · 번호 · 문구에 같이 쓴다 */
@font-face {
  font-family: "Ijeju Display";
  src: url(data:font/woff;base64,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) format("woff");
  font-weight: 700; font-display: block;
}

/* 엽서 글자 전용: 나눔스퀘어라운드 Bold(나눔글꼴, SIL OFL 1.1)에서 엽서 한마디에 쓰는 글자만 뽑아 넣음.
   작은 엽서에서도 잘 읽히는 둥근 고딕. 엽서 글이 바뀌면 글자를 다시 뽑아야 한다 */
@font-face {
  font-family: "Ijeju Card";
  src: url(data:font/woff;base64,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) format("woff");
  font-weight: 700; font-display: block;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--hdr-h, 0px); }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--paper);
  word-break: keep-all;
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; }

:focus-visible { outline: 3px solid var(--orange-ink); outline-offset: 3px; }

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; }
/* 공통 틀(상단 바·헤더·푸터)과 첫 화면 윗줄은 본문(1200px)보다 넓게, 화면 양쪽으로 길게 편다 (사용자 요청 "좌우 양측으로 길게", 2026-10-23)
   양쪽 여백은 화면 폭의 4%(16~80px), 아주 넓은 화면에서는 1920px까지만. 1280px 화면에서는 전과 거의 같다 */
:root { --frame-max: 1920px; --frame-pad: clamp(16px, 4vw, 80px); }
.topbar .container, .wz-header .container, .wz-outro .container, .site-footer .container, .ivnav .container {
  max-width: var(--frame-max); padding-left: var(--frame-pad); padding-right: var(--frame-pad);
}
/* 인터뷰 기사 위 목록 줄(.ivnav)도 같은 칸에 맞춰, 맨 앞 '이주민 인터뷰'가 헤더 로고와 같은 세로줄에서 시작한다 (사용자 요청 2026-10-23) */

/* ---------- 공통 틀: 상단 바 ---------- */
.topbar { background: var(--ink); }
.topbar a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: #FFFFFF; font-size: 16px; text-decoration: none;
}
.topbar a:hover { text-decoration: underline; }

/* ---------- 공통 틀: 헤더 ---------- */
.wz-header {
  background: var(--hdr-bg);
  position: sticky; top: 0; z-index: 50;   /* 스크롤해도 카테고리가 맨 위에 보인다 (사진과 겹치지 않음) */
}
.wz-header .container {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0 14px; padding-top: 4px; padding-bottom: 4px;
}
.wz-name {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 0;   /* 글자 '이제주민'은 화면 낭독용으로 남기고, 보이는 것은 로고 */
  color: var(--hdr-ink); text-decoration: none;
}
.wz-name::before {
  /* 흰 로고 그림을 모양틀로 써서 헤더 글자색으로 칠한다 */
  content: ""; width: 50px; height: 58px;
  background: var(--hdr-ink);
  -webkit-mask: url(../images/logo-ijejumin-white.webp) center / contain no-repeat;
  mask: url(../images/logo-ijejumin-white.webp) center / contain no-repeat;
}
@media (max-width: 899px) {
  .wz-name::before { width: 40px; height: 46px; }
}
.wz-tagline { font-size: 16px; color: var(--hdr-ink); }
.wz-nav { display: flex; flex-wrap: wrap; gap: 0 2px; width: 100%; margin-left: -10px; }
.wz-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px;
  font-size: 16px; font-weight: 600; color: var(--hdr-ink); text-decoration: none;
  border-radius: 999px;
}
.wz-nav a:hover { background: rgba(255, 255, 255, .18); color: var(--hdr-ink); }
.wz-header :focus-visible { outline-color: var(--hdr-ink); }

@media (min-width: 900px) {
  .wz-nav { width: auto; margin-left: auto; }
}
/* 서브메인: 첫 화면(비행기 창 → 제주)에서는 헤더를 위로 숨겼다가, 인터뷰 화면이 올라오면 내려온다.
   헤더는 자리를 차지하지 않게 화면 맨 위에 띄운다. 키보드로 헤더 메뉴에 오면 바로 내려온다
   (site.js가 html에 has-intro를, 헤더에 숨길 높이 --hdr-hide를 스크롤에 맞춰 넣는다.
    --hdr-hide를 html에 넣으면 헤더가 내려오는 장면마다 페이지 전체 스타일을 다시 계산해 버벅였다, 2026-10-28) */
.has-intro .wz-header {
  position: fixed; left: 0; right: 0; top: 0;
  transform: translateY(calc(var(--hdr-hide, 0px) * -1));
}
.has-intro .wz-header:focus-within { transform: none; }
/* 상단 바 "한경 웹진 메인으로"는 모든 페이지에서 뺀다 (사용자 요청, 2026-10-23. 전에는 서브메인에서만 뺐다)
   공통 기준 코드라 마크업은 그대로 두고 이 한 줄로만 숨긴다. 이 줄을 지우면 모든 페이지에 돌아온다 */
.topbar { display: none; }
/* 휴대폰: 메뉴 네 개를 한 줄에, 오른쪽 끝에 모아 둔다. 넘치면(좁은 화면, 휴대폰 글자 크기 설정) site.js가 --nav-fit으로 글자를 줄인다
   글자는 13px까지만 줄이고, 그래도 넘치면(312px 카톡 화면 등) 줄을 옆으로 밀어 넘긴다. 이때 오른쪽 끝을 흐리게 해 더 있다는 것을 보여 준다
   ('인터뷰 스토리'를 넣어 메뉴가 네 개가 되며, 사용자 요청 2026-10-23) */
@media (max-width: 899px) {
  .wz-nav {
    flex-wrap: nowrap; gap: 4px; width: calc(100% + 20px); margin-right: -10px;
    font-size: calc(15px * var(--nav-fit, 1)); white-space: nowrap;
    overflow-x: auto; scrollbar-width: none;
  }
  .wz-nav::-webkit-scrollbar { display: none; }
  .wz-nav > :first-child { margin-left: auto; }   /* 오른쪽 끝에 모으되, 넘칠 때는 왼쪽부터 보이게 (justify-content: flex-end는 넘친 앞쪽을 못 넘긴다) */
  .wz-nav a { flex: none; padding: 0 6px; font-size: inherit; }
  .wz-nav.is-more {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
  }
}

/* 헤더 '인터뷰 스토리' 펼침 메뉴 (사용자 요청 2026-10-23)
   PC(마우스가 있는 900px 이상 화면)에서 마우스를 올리거나 키보드로 오면 아래로 기사 4편이 펼쳐진다.
   휴대폰·태블릿처럼 손가락으로 누르는 화면에서는 펼치지 않고, 누르면 바로 01 기사로 간다 (기사 위 목록 줄에서 02~04로 넘어간다) */
.wz-drop { position: relative; display: flex; flex: none; }
.wz-drop__menu { display: none; }
@media (min-width: 900px) and (hover: hover) {
  .wz-drop > a::after {   /* 펼쳐진다는 표시: 작은 아래 꺾쇠 */
    content: ""; width: 6px; height: 6px; margin: -3px 0 0 7px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg); transition: transform .18s;
  }
  .wz-drop:hover > a::after, .wz-drop:focus-within > a::after { transform: translateY(3px) rotate(225deg); }
  .wz-drop__menu {
    display: block; position: absolute; top: calc(100% + 11px); right: 0; z-index: 60;   /* 헤더 아래 끝에 붙는다 */
    min-width: 220px; padding: 8px; border-radius: 16px;
    background: #FFFFFF; box-shadow: 0 14px 34px rgba(18, 35, 58, .2);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .18s, transform .18s, visibility 0s .18s;
  }
  .wz-drop__menu::before {   /* 글자와 메뉴 사이 빈틈: 마우스가 지나가도 닫히지 않게 */
    content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px;
  }
  .wz-drop:hover .wz-drop__menu, .wz-drop:focus-within .wz-drop__menu {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity .18s, transform .18s;
  }
  .wz-nav .wz-drop__menu a {
    display: flex; gap: 10px; min-height: 44px; padding: 0 14px; border-radius: 10px;
    font-size: 16px; font-weight: 600; color: var(--ink); white-space: nowrap;
  }
  .wz-nav .wz-drop__menu a:hover { background: #FFF1E6; color: var(--ink); }
  .wz-nav .wz-drop__menu a[aria-current="page"] { background: var(--ink); color: #FFFFFF; }   /* 지금 보고 있는 기사 */
  .wz-header .wz-drop__menu :focus-visible { outline-color: var(--ink); }
  .wz-drop__num { font: 700 13px ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; color: var(--orange-ink); }
  .wz-drop__menu a[aria-current="page"] .wz-drop__num { color: var(--peach); }
}
@media (min-width: 900px) and (hover: hover) and (prefers-reduced-motion: reduce) {
  .wz-drop__menu, .wz-drop:hover .wz-drop__menu, .wz-drop:focus-within .wz-drop__menu { transform: none; transition: none; }
}

/* 언어 바꾸기 KO · EN · JA (사용자 요청 2026-10-25). 영어판은 en/, 일본어판은 ja/ 폴더
   PC: 메뉴 맨 오른쪽, 가는 흰 세로선 뒤. 휴대폰: 첫 줄(로고·문구) 오른쪽 끝. 지금 언어는 흰 동그라미 */
.wz-lang { display: flex; align-items: center; gap: 2px; flex: none; }
.wz-lang a {
  display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 44px; padding: 0 8px;
  border-radius: 999px; font-size: 15px; font-weight: 700; letter-spacing: .04em; color: var(--hdr-ink); text-decoration: none;
}
.wz-lang a:hover { background: rgba(255, 255, 255, .18); }
.wz-lang a[aria-current="true"] { background: #FFFFFF; color: var(--orange-ink); }
.wz-lang a[aria-current="true"]:hover { background: #FFFFFF; }
@media (min-width: 900px) {
  /* 좁은 PC(900~1100px, 영어처럼 글이 긴 언어)에서 한 줄에 다 안 들어가면 메뉴는 그대로 두고 문구만 두 줄로 접는다 */
  .wz-header .container { flex-wrap: nowrap; }
  .wz-tagline { flex: 0 1 auto; min-width: 0; line-height: 1.35; }
  .wz-nav { flex: none; flex-wrap: nowrap; }
  .wz-lang { margin-left: 10px; padding-left: 12px; position: relative; }
  .wz-lang::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 1px; background: rgba(255, 255, 255, .55); }
}
@media (max-width: 899px) {
  /* 언어 버튼 자리를 내주고 문구는 두 줄로 접는다. 영어처럼 긴 문구도 두 줄 안에 들어가게 14px·줄 간격 1.3 (전에는 16px 한 줄) */
  .wz-tagline { flex: 1 1 0; min-width: 0; font-size: 14px; line-height: 1.3; }
  .wz-lang { order: 1; gap: 0; margin-right: -6px; }
  .wz-lang a { min-width: 32px; padding: 0 5px; font-size: 13px; }
  .wz-nav { order: 2; }
}

/* 서브메인 첫 화면(비행기 창·제주 화면)에서도 언어 바꾸기 (사용자 요청 2026-10-26). 이때는 헤더가 위로 숨어 있다
   모양은 그 화면 가운데 버튼과 같게 (사용자 요청 "중앙의 버튼과 동일한 스타일", 2026-10-26. 처음엔 둘 다 어두운 반투명 캡슐)
   - .intro-lang: 비행기 창 화면. 가운데 안내 문구(.intro__hint)처럼 크림색 캡슐·옅은 그림자·갈색 글자, 지금 언어는 주황 글자에 살구색 동그라미
     PC·휴대폰 모두 오른쪽 위. 날아가기 시작하면(is-moving) 사라진다
     휴대폰은 처음에 위 안내 문구와 겹치지 않게 오른쪽 아래였는데, 사용자 요청 "모바일에서도 상단으로"로 올렸다 (2026-10-26).
     폭 540px 이하는 안내 문구와 한 줄에 안 들어가 안내 문구·창을 버튼 아래로 내린다 (아래 .intro__stage·.intro__hint)
   - .landing-lang: 제주 화면. 흰 테두리·흰 글자, 지금 언어는 흰 동그라미 (처음엔 '이야기 보러 가기'처럼 어두운 반투명 바탕이었는데 사용자 요청으로 뺐다)
     윗줄 맨 오른쪽. 휴대폰에서는 '제주 이주민 인터뷰 웹진' 줄(또는 그 아래) 오른쪽 */
.intro-lang, .landing-lang { margin: 0; padding: 2px; border-radius: 999px; }
.intro-lang::before, .landing-lang::before { content: none; }
.intro-lang { background: rgba(255, 252, 246, .9); box-shadow: 0 2px 12px rgba(60, 45, 30, .18); }
.wz-lang.intro-lang a { font-weight: 600; color: var(--muted); }
.wz-lang.intro-lang a:hover { background: rgba(60, 45, 30, .08); }
.wz-lang.intro-lang a[aria-current="true"], .wz-lang.intro-lang a[aria-current="true"]:hover { background: #FDEBDD; color: var(--orange-ink); }   /* 살구색 위 주황 글자 대비 약 4.8:1 */
.landing-lang { padding: 0; border: 1.5px solid #FFFFFF; background: none; box-shadow: 0 1px 6px rgba(6, 22, 44, .3); }   /* 어두운 바탕 없이 흰 테두리만 (사용자 요청 2026-10-26).
   안쪽 여백 0: 지금 언어의 흰 동그라미가 테두리에 딱 붙는다 (휴대폰만 1px 남아 그 사이로 사진이 비쳤다, 사용자 요청 "빈틈 없도록" 2026-10-27) */
.wz-lang.landing-lang a { font-weight: 600; text-shadow: 0 1px 3px rgba(0, 0, 0, .55), 0 0 12px rgba(6, 22, 44, .55); }   /* 옆 흰 글자들과 같은 그림자로 사진 위에서도 읽히게 */
.wz-lang.landing-lang a[aria-current="true"] { text-shadow: none; }
.intro-lang {
  position: absolute; z-index: 6; top: clamp(12px, 2.4vh, 24px); right: var(--frame-pad);
  transition: opacity .3s ease, visibility 0s;
}
.js .intro__stage.is-moving .intro-lang { opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s .3s; }
.landing-lang { pointer-events: auto; }
@media (min-width: 601px) {
  /* 언어 버튼은 오른쪽 글('제주 이주민 인터뷰 웹진')처럼 가는 선 위에 놓는다 (사용자 요청 2026-10-26).
     선은 로고 아래 끝 근처(로고 높이의 90%)에 있어, 버튼(44px + 테두리)을 줄 맨 위에 붙이면 선보다 4px쯤 위에서 끝난다. 선은 다시 오른쪽 끝까지 */
  .landing-lang { align-self: flex-start; }
}
@media (min-width: 601px) and (max-width: 1023px) {
  /* 태블릿·좁은 PC: 윗줄에 셋(로고 문구·오른쪽 글·버튼)이 다 안 들어가 버튼이 선 아래로 밀리므로,
     오른쪽 글을 다음 줄 오른쪽으로 내리고(휴대폰과 같은 자리) 버튼은 선 위에 남긴다 */
  .landing-lang { order: 0; }
  .landing__kind { order: 1; flex-basis: 100%; text-align: right; }
}
@media (max-width: 899px) {
  .intro-lang, .landing-lang { margin-right: 0; }
  .landing-lang { margin-left: auto; }   /* 윗줄에 다 안 들어가 다음 줄로 내려가도 오른쪽에 붙는다 */
}
@media (max-width: 600px) {
  /* 휴대폰: 윗줄은 로고·문구로 차므로 오른쪽 글과 언어 버튼을 그 아래 각각 한 줄씩, 둘 다 오른쪽에 */
  .landing__kind { flex-basis: 100%; text-align: right; }
  .intro-lang { top: 12px; right: 10px; }
}

/* 일본어판: 일본어 글꼴을 먼저 쓰고, 한국어처럼 낱말 단위로만 줄을 바꾸지 않는다 (일본어는 띄어쓰기가 없어 글자 사이에서 바꾼다) */
:root:lang(ja) {
  --font: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, "Noto Sans JP", system-ui, sans-serif;
  --iv-font: var(--font);   /* 인터뷰 기사 본문 글꼴도 같게 */
}
:lang(ja) body, :lang(ja) body.page-interview { word-break: normal; line-break: strict; }
/* 일본어 제목·짧은 글은 낱말(어절) 경계에서 줄을 바꾼다 (지원하는 브라우저에서. 아니면 위 규칙대로) */
:lang(ja) :is(h1, h2, h3, .story-dek, .iv-person-role, .keywords li, .quote-box p, .pick__final-title, .cat__text, .find__main-desc, .person__desc, .pick-pop__label) { word-break: auto-phrase; }   /* .pick-pop__label: 카톡 글자 확대에서 'ひとこ/と'처럼 한 글자만 떨어졌다 (2026-10-28) */

/* ---------- 공통 틀: 푸터 ----------
   사용자가 준 시안(다른 웹진 푸터)의 짜임대로 정리 (2026-10-23)
   바탕은 헤더와 같은 주황, 글자는 흰색 (사용자 요청 "이전의 주황색으로". 잠깐 검정이었다가 사용자 요청으로 다시 주황, 2026-10-23)
   위(.wz-outro): 왼쪽 흰 로고 + 글씨 '육지에서 나고, / 섬에서 자라는 중' (사용자가 다시 보낸 시안, 예전 주황 푸터의 왼쪽 모양)
       | '만든 사람들' | '인터뷰 스토리'(네 곳 링크) | '출처' (사용자 요청으로 만든 사람들을 앞으로). 칸 이름 옆 선은 없다 (점선 → 실선 → 사용자 요청으로 지움)
       팀 이름 〈살러 왔다, 살아남기〉는 사용자 요청으로 지웠다. 인스타그램은 잠깐 왼쪽에 있다가 다시 '만든 사람들' 아래로 (2026-10-23)
   아래: 공통 기준 푸터(.site-footer, 코드 그대로): 실선 아래 왼쪽 '개인정보처리방침'(굵게·밑줄), 오른쪽 '이제주민 · 한경 웹진'
   높이: 줄였다가(사용자 요청 "높이를 줄여줘", PC 350→257px) "살짝 더 높이고"와 왼쪽 큰 글씨로 약 333px. 공통 기준에 푸터 크기 기준은 없다
   주황 위 흰 글자는 대비 2.8:1로 공통 기준(4.5:1)에 못 미친다 (헤더와 같음, 올리기 전 확인 목록에 적어 둠)
   (그 전: 옅은 살구색 띠에 주황 글자, 오른쪽 메뉴·인터뷰 두 칸 → 둥근 카드 → 헤더와 같은 주황 바탕·흰 글자 → 파랑 #2C64A0 바탕) */
.wz-outro, .site-footer { background: var(--hdr-bg); color: var(--hdr-ink); }
.wz-outro__inner {
  /* 시안처럼 로고·글씨는 왼쪽, '만든 사람들'·'인터뷰 스토리'·'출처'는 오른쪽에 모아 둔다 (사용자 요청) */
  display: grid; grid-template-columns: 1fr auto auto auto; align-items: start; gap: 32px clamp(40px, 5vw, 72px);
  padding-top: clamp(30px, 3.4vw, 42px); padding-bottom: clamp(20px, 2.2vw, 26px);
}
.wz-outro__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.wz-outro__logo {
  display: block; width: 64px; height: 74px;
  background: var(--hdr-ink);
  -webkit-mask: url(../images/logo-ijejumin-white.webp) center / contain no-repeat;
  mask: url(../images/logo-ijejumin-white.webp) center / contain no-repeat;
}
.wz-outro__tagline { margin: 0; font-size: clamp(20px, 1.8vw, 24px); font-weight: 700; line-height: 1.35; letter-spacing: -0.02em; }   /* 푸터 높이를 줄이려고 작게 (사용자 요청, 전 22~30px) */
.wz-outro__name { margin: -4px 0 0; font-size: 16px; font-weight: 500; }   /* 글씨 바로 아래 '이제주민 · 한경 웹진' (사용자 요청 2026-10-23) */
.wz-outro__col { min-width: 0; max-width: 360px; }   /* 긴 글은 이 폭에서 줄을 바꾼다. 출처는 <br>로 줄을 나눠 칸이 글 폭만큼만 차지하고 오른쪽 끝에 붙는다 (사용자 요청 "좀 더 오른쪽으로") */
.wz-outro__head { margin: 0 0 8px; font-size: 16px; font-weight: 700; letter-spacing: .16em; }
.wz-outro__line { margin: 0 0 4px; font-size: 16px; line-height: 1.5; }   /* 줄 간격 살짝 좁게 (사용자 요청, 1.6 → 1.5) */
.wz-outro__line:last-child { margin-bottom: 0; }
.wz-outro__line a {
  display: inline-flex; align-items: center; min-height: 44px; vertical-align: middle;
  color: inherit; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.wz-outro :focus-visible, .site-footer :focus-visible { outline-color: var(--hdr-ink); }
.site-footer .container {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0 24px; padding-top: 6px; padding-bottom: 10px; font-size: 16px;
}
/* 위 안내와 아래 줄 사이 실선 (칸 안쪽 여백만큼 들여서) */
.site-footer .container::before { content: ""; position: absolute; left: var(--frame-pad); right: var(--frame-pad); top: 0; border-top: 1px solid rgba(255, 255, 255, .6); }
/* 시안처럼 '개인정보처리방침'은 왼쪽, '이제주민 · 한경 웹진'은 오른쪽 (마크업은 공통 기준 그대로, 순서만 CSS로) */
.site-footer a {
  order: -1; display: inline-flex; align-items: center; min-height: 44px;
  color: inherit; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
}
/* '인터뷰 스토리' 링크: 한 줄에 하나. 누르는 칸은 공통 기준대로 44px이지만, 아래 칸과 10px 겹쳐
   글 줄이 34px마다 오게 한다 (사용자 요청 "줄 간격이 너무 넓다", 전에는 44px마다 한 줄) */
.wz-outro__link { display: flex; align-items: center; min-height: 44px; margin: 0 0 -10px; font-size: 16px; font-weight: 500; line-height: 1.3; color: inherit; text-decoration: none; }
.wz-outro__head + .wz-outro__link { margin-top: -10px; }   /* 칸 이름과 첫 링크 사이도 다른 칸(글 첫 줄)과 비슷하게 */
.wz-outro__link:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.site-footer a:hover, .wz-outro__line a:hover { text-decoration-thickness: 2px; }
@media (max-width: 1000px) {
  /* 태블릿: 로고·글씨를 위에 두고, 그 아래 인터뷰 스토리·만든 사람들·출처 세 칸 */
  .wz-outro__inner { grid-template-columns: auto auto auto; justify-content: start; }
  .wz-outro__brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  /* 휴대폰: 한 줄에 한 칸씩 */
  .wz-outro__inner { grid-template-columns: 1fr; gap: 24px; padding-top: 30px; padding-bottom: 20px; }
  .wz-outro__brand { gap: 10px; }
  .wz-outro__logo { width: 52px; height: 60px; }
  .wz-outro__tagline { font-size: 20px; }
  .site-footer .container { padding-bottom: 8px; }
}

/* ---------- 공통 틀: 맨 위로 버튼 (.to-top) ----------
   사용자가 준 레퍼런스대로: 오른쪽 아래 흰 동그라미에 위쪽 꺾쇠. 화면에 붙어(fixed) 스크롤을 따라다닌다 (2026-10-23)
   site.js가 페이지 아래쪽(끝까지 화면 1.6개 이하)부터 is-shown을 붙여 보이게 한다.
   주황 푸터 위로도 그대로 따라 내려가고(사용자 요청 "푸터 위로도 올라올 수 있게", 2026-10-23),
   맨 아래 '개인정보처리방침' 줄이 올라오면 --lift만큼 올려 그 줄 위에서 멈춘다 (그 줄 글자를 가리지 않게) */
.to-top {
  position: fixed; z-index: 60; right: clamp(16px, 3vw, 40px); bottom: clamp(16px, 3vh, 32px);
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: #FFFFFF; color: var(--ink);
  border: 1px solid rgba(18, 35, 58, .08); box-shadow: 0 6px 20px rgba(18, 35, 58, .18);
  translate: 0 calc(var(--lift, 0px) * -1);
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.9);
  transition: opacity .3s ease, visibility .3s ease, transform .3s ease, box-shadow .2s ease;
}
.to-top.is-shown, html:not(.js) .to-top { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { box-shadow: 0 10px 26px rgba(18, 35, 58, .26); }
.to-top svg { width: 26px; height: 26px; }
@media (max-width: 640px) {
  .to-top { width: 48px; height: 48px; }
  .to-top svg { width: 22px; height: 22px; }
}
@media (prefers-reduced-motion: reduce) { .to-top { transition: opacity .2s ease, visibility .2s ease; transform: none; } }

/* =========================================================
   서브메인 첫 화면 — 비행기 창 → 제주
   ========================================================= */

/* 서브메인은 site.js가 시작하기(html에 .js가 붙기) 전에는 그리지 않는다 (2026-10-27).
   상세페이지 헤더 메뉴(../index.html#cat-2 등)로 돌아올 때 스크립트가 그 섹션으로 옮기기 전에 브라우저가 한 번 먼저 그리면
   비행기 창이 0.2초쯤 보였다. 같은 사이트 안 이동이면 그동안 앞 페이지가 그대로 보인다.
   스크립트를 끈 사람(scripting: none)·이 조건을 모르는 오래된 브라우저에는 적용되지 않고, 스크립트가 늦어도 1.5초 뒤에는 보인다.
   visibility: hidden은 안쪽에서 되돌릴 수 있어(스크립트 전 '맨 위로' 버튼은 visible) 그것만 그려지며 빈 화면이 끼었다. 그래서 투명도로 숨긴다 */
@media (scripting: enabled) {
  html:not(.js) body.page-main { opacity: 0; animation: page-show 0s 1.5s forwards; }
}
@keyframes page-show { to { opacity: 1; } }

.intro { position: relative; height: 100vh; height: 100svh; }
.js .intro { height: calc(200vh + 720px); height: calc(200svh + 720px); }   /* 조금만 내려도 한 번에(약 2.4초) 제주까지 빨려 들어간다(site.js). 그다음 약 700px은 제주 화면에 머물고, 마지막 한 화면은 인터뷰 화면이 아래에서 올라와 퍼지는 동안 제주를 붙잡아 두는 구간 */

.intro__stage {
  /* 창문 사진(1086×1448) 크기와, 그 안의 유리 자리 */
  --fw: min(120vw, 75vh, 760px);
  --fw: min(120vw, 75svh, 760px);
  --fh: calc(var(--fw) * 1.33333);
  --pw: calc(var(--fw) * .47145);   /* 유리 폭 */
  --ph: calc(var(--fw) * .68876);   /* 유리 높이 */
  --cy: 50%;                        /* 유리 중심 높이 */
  /* 스크롤에 따라 site.js가 바꾸는 값 */
  --zoom: 1; --scene: 1; --cloud: 0; --land: 0; --shade: 0;  /* 가리개는 처음에 닫힘 */
  --sc: #4A3F36;   /* 안내 그림(스크롤 표시 · 손잡이 위 화살표) 색: 기내 벽(베이지) 위에서 읽히는 짙은 갈색 */

  position: sticky; top: var(--hdr-h, 0px);
  height: calc(100vh - var(--hdr-h, 0px)); height: calc(100svh - var(--hdr-h, 0px));
  overflow: hidden;
  background: #BFAE9B;   /* 창 사진의 평균 벽 색 */
}
.has-intro .intro__stage { top: 0; height: 100vh; height: 100svh; }   /* 헤더가 숨은 동안은 화면 가득 */
@media (max-width: 600px) {
  /* 휴대폰: 창틀(사진 높이의 11~84%)이 위 안내 문구(화면 위 12px + 문구 약 42px)와
     아래 스크롤 표시(약 85px) 사이에 들어가도록 창 크기를 화면 높이에 맞추고, 그 사이 가운데에 둔다.
     창틀 높이 = 창 폭 × 0.973 이므로 창 폭 ≤ (화면 높이 − 160px) × 1.027 */
  .intro__stage {
    --fw: min(120vw, calc((100vh - 160px) * 1.027), 760px);
    --fw: min(120vw, calc((100svh - 160px) * 1.027), 760px);
    --cy: calc(50% - 16px);
  }
}
@media (max-width: 540px) {
  /* 언어 버튼(위 12px, 높이 48px)을 오른쪽 위로 올리면서(사용자 요청 2026-10-26) 안내 문구와 한 줄에 안 들어가,
     안내 문구는 화면 위 68px 아래에서 멈추게 하고(--hint-top), 창틀은 그 문구와 스크롤 표시 사이에 둔다.
     위에 쓰는 자리가 54px → 110px로 56px 늘어 창 폭 ≤ (화면 높이 − 216px) × 1.027, 창 가운데는 28px 아래.
     창 크기는 낮은 화면(카톡 막대가 보이는 312×520 등)에서만 줄고, 보통 휴대폰은 그대로 */
  .intro__stage {
    --fw: min(120vw, calc((100vh - 216px) * 1.027), 760px);
    --fw: min(120vw, calc((100svh - 216px) * 1.027), 760px);
    --cy: calc(50% + 12px);
    --hint-top: 68px;
  }
}
/* 사진 바깥까지 기내 벽이 이어지도록, 사진의 벽을 흐리게 넓힌 이미지를 창 사진과 같은 중심에 깐다 */
.intro__stage::before {
  content: ""; position: absolute; pointer-events: none;
  left: calc(50% - var(--fw) * 2.5);
  top: calc(var(--cy) + var(--fh) * .01796 - var(--fh));
  width: calc(var(--fw) * 5); height: calc(var(--fh) * 2);
  background: url(../images/cabin-wall.jpg) center / 100% 100% no-repeat;
}

/* 창밖 풍경: 창 모양으로 잘라 보여 준다 */
.scene {
  position: absolute; inset: 0;
  --zw: calc(var(--pw) * var(--zoom));
  --zh: calc(var(--ph) * var(--zoom));
  clip-path: inset(
    calc(var(--cy) - var(--zh) / 2)
    calc(50% - var(--zw) / 2)
    calc(100% - var(--cy) - var(--zh) / 2)
    calc(50% - var(--zw) / 2)
    round
    calc(var(--zw) * .211) calc(var(--zw) * .211) calc(var(--zw) * .293) calc(var(--zw) * .293) /
    calc(var(--zh) * .283) calc(var(--zh) * .283) calc(var(--zh) * .241) calc(var(--zh) * .241)
  );
}
/* 구름 위 하늘 (창밖 사진과 같은 빛). 섬이 드러나면 사라진다 */
.scene__sky {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #5A92D2 0%, #8FB6E0 34%, #E9DCCB 52%, #F3E6D6 60%, #DCD6DA 78%, #C9CBD6 100%);
  opacity: calc(1 - var(--reveal, 0));
}
/* 사진 속 창밖 구름. 창 속으로 들어가면 걷힌다 */
.scene__photo {
  position: absolute; left: 50%; top: var(--cy);
  width: calc(var(--pw) * 1.04); height: calc(var(--ph) * 1.04); max-width: none;
  margin: calc(var(--ph) * -.52) 0 0 calc(var(--pw) * -.52);
  object-fit: cover;
  transform: scale(var(--photo-scale, 1));
  opacity: calc(1 - var(--photo-out, 0));
}
/* 구름 속을 지나는 순간의 하얀 안개 */
.scene__mist {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 80% 70% at 50% var(--cy), #FFFFFF 0%, #F6F7FA 55%, #E4E9F1 100%);
  opacity: var(--mist, 0);
}
.scene__inner {
  position: absolute; inset: 0;
  opacity: var(--reveal, 0);
  transform: scale(var(--scene));
  transform-origin: 50% 55%;
}
/* 사진 맨 위: 짙은 하늘 파랑에서 사진 하늘로 경계 없이 이어지게 (헤더 색과는 따로) */
.scene__inner::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 4;
  height: clamp(64px, 16%, 150px); pointer-events: none;
  background: linear-gradient(180deg, #2C64A0 0%, rgba(44, 100, 160, .72) 30%, rgba(44, 100, 160, .3) 65%, rgba(44, 100, 160, 0) 100%);
}

/* 실사 제주: 사진 → 글자 → 분화구(앞) 순서로 겹쳐 글자가 분화구 뒤에 있는 것처럼 */
/* 사진을 자르지 않고 통째로 보여 준다. 남는 위아래는 같은 사진을 흐리게 깔아 채운다 */
.jeju-bg {
  position: absolute; inset: -40px;
  background: #0B2F5A url(../images/jeju-seongsan-4.jpg) center / cover no-repeat;
  filter: blur(28px) brightness(.72) saturate(1.1);
}
.jeju {
  --jw: 200vw;   /* 세로 화면: 분화구가 화면 폭 안에 들어오도록 양옆을 자른다 */
  position: absolute; left: 50%; top: 50%;
  width: var(--jw); height: calc(var(--jw) * .5);   /* 사진 1490×745 (파노라마에서 2:1로 자름) */
  transform: translate(-50%, -50%);
  /* 사진·글자·분화구를 한 번에: 네 변을 부드럽게 흐려 뒤의 흐린 배경과 섞는다 (경계선 없음) */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-composite: intersect;
}
.jeju::after {
  /* 위쪽을 살짝 어둡게 해 흰 글자가 구름 위에서도 읽히게 */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 22, 44, .22) 0%, rgba(6, 22, 44, .06) 30%, rgba(6, 22, 44, 0) 55%, rgba(6, 22, 44, .45) 100%);
  z-index: 1;
}
.jeju__photo {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
}
@media (max-aspect-ratio: 1/1) {
  /* 세로 화면(휴대폰): 사진 위쪽 흐린 띠가 넓지 않게 사진을 조금 키우고(분화구는 화면 폭 안), 위쪽 경계도 짧게 흐린다.
     사진 위치는 화면 높이가 아니라 화면 위에서부터 고정한다 (사진 위 끝 = 72px, 사진 높이 = 폭의 110%).
     카카오톡처럼 스크롤할 때 막대가 숨었다 나타나 화면 높이가 바뀌어도 위쪽 여백이 그대로이고, 늘어난 높이는 아래로 간다.
     72px는 카카오톡 막대가 보일 때(화면 높이 약 514px) 원래 사진이 있던 자리 */
  .jeju {
    --jw: 220vw; top: calc(72px + 55vw);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 5%, #000 91%, transparent 100%), linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 5%, #000 91%, transparent 100%), linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  }
}
@media (min-aspect-ratio: 1/1) {
  /* PC: 사진이 화면을 가장자리까지 꽉 채운다 (흐린 테두리 없음). 분화구가 화면 가운데 아래쪽에 크게 오도록 조금 확대한다 */
  .jeju {
    --stage-h: calc(100vh - var(--hdr-h, 0px));
    --stage-h: calc(100svh - var(--hdr-h, 0px));
    --jw: max(125vw, calc(var(--stage-h) * 2));
    -webkit-mask-image: none; mask-image: none;
  }
}
.jeju__word {
  --fs: min(calc(var(--jw) * .14), 21vw);
  position: absolute; left: 50%; z-index: 2;
  top: calc(48.59% - var(--fs) * .74);   /* 글자 아래쪽이 분화구 테두리(48.59%) 뒤로 살짝 들어가게 */
  /* --word-fit: 휴대폰 글자 크기 설정 때문에 화면보다 넓어지면 site.js가 1보다 작게 준다. 위쪽 가운데를 기준으로 줄여 분화구와 겹치는 자리는 그대로 */
  margin: 0; transform: translateX(-50%) scale(var(--word-fit, 1)); transform-origin: 50% 0;
  font-family: "Ijeju Display", var(--font);
  font-size: var(--fs); font-weight: 700; line-height: .8; letter-spacing: -0.045em;
  color: #FFFFFF; white-space: nowrap;
  opacity: calc(var(--land) * var(--land));

  translate: 0 calc((1 - var(--land)) * -.12em);
}
@media (min-aspect-ratio: 1/1) {
  .jeju__word { --fs: min(calc(var(--jw) * .112), 19vw); }   /* 사진을 확대한 만큼 글자는 그대로 */
}
.jeju__comma { position: relative; top: -.16em; margin: 0 .02em; color: #FFFFFF; }
.jeju__front {
  position: absolute; z-index: 3; max-width: none;
  left: 27.852%; top: 48.054%; width: 41.879%; height: 37.584%;
}

/* 구름 속으로: 앞에서 다가와 지나가는 구름 층 (site.js가 위치·크기를 정한다) */
.fly { position: absolute; inset: 0; pointer-events: none; }
.fly__layer {
  position: absolute; left: 50%; top: var(--cy);
  width: 130vmax; height: 81.25vmax; max-width: none;
  opacity: 0; visibility: hidden;
  will-change: transform, opacity;
}

/* 구름을 빠져나온 뒤 섬 아래에 깔리는 안개 */
.groundfog {
  position: absolute; left: 0; right: 0; bottom: 0; height: 38%;
  pointer-events: none; overflow: hidden;
  opacity: var(--ground, 0);
}
.groundfog img {
  position: absolute; bottom: 0; width: 140%; height: 100%; max-width: none;
  animation: fog-drift 20s ease-in-out infinite alternate;
}
.groundfog__a { left: -30%; opacity: .9; }
.groundfog__b { left: -10%; height: 70%; opacity: .7; transform: scaleX(-1); animation-name: fog-drift-r; animation-duration: 26s; }
@keyframes fog-drift { from { translate: -6% 0; } to { translate: 6% 0; } }
@keyframes fog-drift-r { from { translate: 6% 0; } to { translate: -6% 0; } }

/* 비행기 창: 유리 자리를 비운 실사 사진 */
.porthole {
  position: absolute;
  left: calc(50% - var(--fw) * .49816);
  top: calc(var(--cy) - var(--fh) * .48204);
  width: var(--fw); height: var(--fh);
  transform: scale(var(--zoom));
  transform-origin: 49.816% 48.204%;
}
.porthole__frame {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  pointer-events: none; user-select: none;
  /* 사진 가장자리를 벽 색으로 자연스럽게 흐리기 (둥글게 흐려서 네모 경계가 생기지 않게) */
  -webkit-mask-image: radial-gradient(ellipse 49.5% 47.8% at 49.8% 48.2%, #000 74%, transparent 100%);
  mask-image: radial-gradient(ellipse 49.5% 47.8% at 49.8% 48.2%, #000 74%, transparent 100%);
}
.porthole__pane {
  /* 사진 속 유리 자리 (확대 배율 계산용, 보이지 않음) */
  position: absolute; pointer-events: none;
  left: 26.243%; top: 22.376%; width: 47.145%; height: 51.657%;
}

/* 창 가리개: 닫힌 창 사진의 가리개 판이 통째로 위로 올라간다 */
.shade-clip, .shade {
  position: absolute;
  left: 23.297%; top: 17.541%; width: 53.131%; height: 58.840%;
}
/* 위로 올라간 가리개 판이 창틀 바깥으로 비치지 않도록 창 안쪽만 보여 준다.
   네모 칸만 자르면, 창틀 사진 가장자리를 둥글게 흐린 곳(위쪽 두 모서리)으로 올라간 판이 희미하게 비쳐 네모 모서리가 보였다 (사용자 요청 "미세하게 겹쳐 보여", 2026-10-23).
   그래서 닫힌 창 사진의 구멍 모양(2px 넓힘)대로 잘라 낸 모양틀(shade-clip-mask.png)로 구멍 안만 보여 준다. 닫힌 모습은 그대로다 */
.shade-clip {
  overflow: hidden; pointer-events: none;
  -webkit-mask: url(../images/shade-clip-mask.png) 0 0 / 100% 100% no-repeat;
  mask: url(../images/shade-clip-mask.png) 0 0 / 100% 100% no-repeat;
}
.shade-panel {
  position: absolute; inset: 0;
  pointer-events: none;
  /* 열림(1): 판 아래 끝(손잡이)만 창 위쪽에 남는다 */
  transform: translateY(calc(var(--shade) * -90.61%));
  transition: transform .8s cubic-bezier(.2, .8, .2, 1);
}
.shade-panel img { width: 100%; height: 100%; max-width: none; user-select: none; }
/* 손잡이 위 겹화살표(위쪽): 가리개를 위로 올리면 된다는 표시. 아래 화살표부터 차례로 짙어지며 살짝 위로 오른다 */
.shade-arrow {
  position: absolute; left: 50.3%; top: 86%;
  display: flex; flex-direction: column; align-items: center;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0; transition: opacity .4s ease;
}
.shade-arrow i {
  width: calc(var(--fw, 600px) * .026); height: calc(var(--fw, 600px) * .026);
  border-top: max(1.5px, calc(var(--fw, 600px) * .0034)) solid var(--sc);   /* 아래 스크롤 표시와 같은 색 */
  border-left: max(1.5px, calc(var(--fw, 600px) * .0034)) solid var(--sc);
  transform: scale(1.2, .72) rotate(45deg);   /* 납작하고 넓은 꺾쇠 (시안처럼) */
}
.shade-arrow i + i { margin-top: calc(var(--fw, 600px) * -.012); }
.js .intro__stage:not(.is-open):not(.is-dragging) .shade-arrow { opacity: 1; animation: arrow-rise 1.8s ease-in-out infinite; }
.js .intro__stage:not(.is-open):not(.is-dragging) .shade-arrow i { animation: arrow-blink 1.8s ease-in-out infinite; }
.js .intro__stage:not(.is-open):not(.is-dragging) .shade-arrow i:first-child { animation-delay: .25s; }   /* 위 화살표가 조금 늦게 */
@keyframes arrow-rise {
  0%, 100% { transform: translate(-50%, -40%); }
  50% { transform: translate(-50%, -62%); }
}
@keyframes arrow-blink {
  0%, 100% { opacity: .35; }
  40% { opacity: 1; }
}
.shade {
  margin: 0; padding: 0; border: 0; border-radius: 26% / 20%;
  background: transparent; font: inherit; color: inherit; cursor: grab;
  touch-action: none; -webkit-tap-highlight-color: transparent;
}
.shade:active { cursor: grabbing; }
.shade:focus-visible { outline-offset: -8px; }
.is-dragging .shade-panel { transition: none; }

/* 안내 문구 */
.intro__hint {
  position: absolute; left: 50%; margin: 0;
  /* 창 위에 띄운다. 단, 휴대폰처럼 화면이 낮아 창 위 자리가 모자라면 화면 위 12px(--hint-top) 아래에서 멈춘다 (문구 높이 = 1.6em + 위아래 여백 16px).
     폭 540px 이하는 위에 언어 버튼이 있어 68px */
  bottom: min(calc(100% - var(--cy) + var(--ph) / 2 + var(--fh) * .14), calc(100% - var(--hint-top, 12px) - var(--hint-h, calc(1.6em + 16px))));   /* --hint-h: site.js가 잰 실제 높이 */
  max-width: calc(100% - 32px);
  padding: 8px 18px; border-radius: 999px;
  font-size: calc(16px * var(--hint-fit, 1)); font-weight: 600; line-height: 1.6; color: var(--muted); text-align: center;
  white-space: nowrap;   /* 한 줄로 둔다. 글자를 키운 휴대폰에서 화면보다 길어지면 site.js가 --hint-fit으로 글자를 줄인다 */
  background: rgba(255, 252, 246, .9);
  box-shadow: 0 2px 12px rgba(60, 45, 30, .18);
  opacity: 0; pointer-events: none;
  transform: translate(-50%, 6px);
  transition: opacity .4s ease, transform .4s ease;
}
.js .intro__stage:not(.is-open) .intro__hint--shade,
.js .intro__stage.is-open:not(.is-moving) .intro__hint--scroll {
  opacity: 1; transform: translate(-50%, 0);
}
.intro__arrow { display: inline-block; color: var(--orange-ink); animation: nudge 1.4s ease-in-out infinite; }
/* 화면 아래 스크롤 표시: 가는 선 그림 + 글자 SCROLL. 처음부터 보이고, 스크롤을 시작하면 사라진다 */
.intro__scroll {
  position: absolute; left: 50%; bottom: clamp(12px, 2.5vh, 32px); z-index: 2;
  display: none; flex-direction: column; align-items: center; gap: 8px;
  margin: 0; transform: translateX(-50%);
  font-size: 13px; font-weight: 600; line-height: 1; letter-spacing: .34em; text-indent: .34em; color: var(--sc);
  pointer-events: none;
  opacity: 0; transition: opacity .4s ease;
}
.js .intro__scroll { display: flex; }
.js .intro__stage:not(.is-moving) .intro__scroll { opacity: 1; }
/* 마우스: 둥근 몸통 안에서 휠(점)이 아래로 굴러 내려간다 */
.intro__mouse {
  position: relative; width: 20px; height: 32px;
  border: 1.5px solid var(--sc); border-radius: 11px;
}
.intro__mouse::before {
  content: ""; position: absolute; left: 50%; top: 7px;
  width: 4px; height: 4px; margin-left: -2px; border-radius: 50%;
  background: var(--sc);
  animation: wheel 1.8s ease-in-out infinite;
}
@keyframes wheel {
  0% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(9px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}
.intro__chev {
  width: 9px; height: 9px; margin-top: -2px;
  border-right: 1.5px solid var(--sc); border-bottom: 1.5px solid var(--sc);
  transform: rotate(45deg);
  animation: chev 1.8s ease-in-out infinite;
}
@keyframes chev {
  0%, 100% { transform: translateY(-2px) rotate(45deg); }
  50% { transform: translateY(2px) rotate(45deg); }
}
@keyframes nudge {
  0%, 100% { transform: translateY(-2px); }
  50% { transform: translateY(3px); }
}

/* 창을 통과한 뒤의 첫 화면 */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.landing {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: clamp(10px, 1.8vh, 20px) var(--frame-pad) clamp(20px, 6vh, 56px);   /* 위쪽 줄(로고·문구) 위 여백: 화면 위에 가깝게, 너무 붙지는 않게 (사용자 요청). 양옆은 헤더와 같은 여백 */
  text-align: center;
  opacity: var(--ui, 0);
  transform: translateY(calc((1 - var(--ui, 0)) * 16px));
  pointer-events: none;
}
.is-landed .landing { pointer-events: auto; }
/* 위쪽 줄 (사용자가 준 시안): 왼쪽에 헤더와 같은 흰 로고와 '육지에서 나고, 섬에서 자라는 중',
   오른쪽에 '제주 이주민 인터뷰 웹진'. 헤더 로고와 같은 칸(화면 양쪽으로 넓게, --frame-*)에 맞춘다 */
.landing__top {
  --logo-w: 50px; --logo-h: 58px;
  position: relative; align-self: center; width: 100%; max-width: calc(var(--frame-max) - 2 * var(--frame-pad));
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px;
  text-align: left;
}
/* 가는 흰 선: 로고 아래 끝 높이에서, 로고 바로 옆부터 오른쪽 끝까지 (사용자 요청) */
.landing__top::after {
  content: ""; position: absolute; left: calc(var(--logo-w) + 10px); right: 0;
  top: var(--line-top, calc(var(--logo-h) * .9 - 1px));   /* 로고 아래 끝보다 살짝 위. 옆 문구가 두 줄이면 site.js가 문구 바로 아래로 내린다(--line-top) */
  height: 1px; background: rgba(255, 255, 255, .78); pointer-events: none;
}
.landing__brand { display: flex; align-items: center; gap: 16px; margin: 0; }
.landing__logo {
  /* 로고는 기존 흰 로고 그대로 (사용자 요청) */
  flex: none; width: var(--logo-w); height: var(--logo-h);
  background: url(../images/logo-ijejumin-white.webp) center / contain no-repeat;
  filter: drop-shadow(0 1px 3px rgba(6, 22, 44, .45));
}
.landing__tagline {
  /* 헤더 문구와 같은 크기 */
  font-size: 16px; line-height: 1.4; color: #FFFFFF;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55), 0 0 12px rgba(6, 22, 44, .55);
}
.landing__kind {
  margin: 0 0 0 auto;
  font-size: 16px; font-weight: 400; line-height: 1.4; color: #FFFFFF;   /* 왼쪽 문구처럼 얇게 (사용자 요청) */
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55), 0 0 12px rgba(6, 22, 44, .55);
}
/* 유리 캡슐 ('나의 제주찾기' 상세페이지 첫 화면에서 쓴다. 서브메인 첫 화면에서는 사용자 요청으로 뺐다)
   투명한 유리: 뒤 사진을 어둡게 하지 않고 흐리게만 한다. 위쪽이 살짝 반사되고 테두리가 또렷하다 */
.landing__eyebrow {
  margin: 0; padding: 7px 22px; border-radius: 999px;
  font-size: 16px; font-weight: 700; line-height: 1.5; color: #FFFFFF; letter-spacing: .04em;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, .06) 45%, rgba(255, 255, 255, .02) 100%);
  border: 1.5px solid rgba(255, 255, 255, .8);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .6),
    0 4px 14px rgba(8, 28, 60, .14);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  backdrop-filter: blur(10px) saturate(1.3);
  text-shadow: 0 1px 2px rgba(6, 22, 44, .75), 0 0 8px rgba(6, 22, 44, .45);
}
@media (max-width: 600px) {
  .landing__eyebrow { padding: 3px 12px; font-size: 13px; letter-spacing: .02em; border-width: 1px; }
  .landing__top { --logo-w: 40px; --logo-h: 46px; }
}
.landing__foot {
  /* 상자 없이 사진 위에 바로 놓는다. 글자 뒤만 경계 없이 살짝 어둡게 해 읽기 쉽게 */
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  max-width: 100%; padding: 16px clamp(8px, 4vw, 40px);
  background: radial-gradient(closest-side, rgba(6, 22, 44, .6), rgba(6, 22, 44, .35) 60%, rgba(6, 22, 44, 0));
}
@media (max-aspect-ratio: 1/1) {
  /* 세로 화면(휴대폰): 아래 글을 화면 맨 아래가 아니라 사진 바로 아래로 올린다 (사용자 요청 "여백 줄여줘", 2026-10-27).
     사진 위치는 화면 위에서 고정이라(위 .jeju) 화면이 길수록 사진과 글 사이가 비었다. 올릴 만큼(--foot-lift)은 site.js가 잰다.
     화면이 낮아 이미 사진에 붙어 있으면 0 (그대로) */
  .landing__foot { translate: 0 calc(var(--foot-lift, 0px) * -1); }
}
.landing__lead {
  margin: 0; color: #FFFFFF;
  font-size: clamp(16px, 1.6vw, 20px); font-weight: 600; line-height: 1.6;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55), 0 0 18px rgba(6, 22, 44, .7);
}
/* 말 덩어리: 줄이 모자라면 덩어리 사이에서 먼저 바꾼다 ('생존기'처럼 한 낱말만 혼자 남지 않게).
   덩어리가 한 줄보다 길 때만 그 안에서 바뀐다 */
.phrase { display: inline-block; }
.landing__next {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 22px; border-radius: 999px;
  font-size: 16px; font-weight: 600; color: #FFFFFF; text-decoration: none;
  border: 1.5px solid #FFFFFF;
  background: rgba(8, 24, 44, .4);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.landing__next:hover { background: #FFFFFF; color: var(--ink); }

.is-through .scene { clip-path: none; }
.is-through .porthole { visibility: hidden; }

/* 움직임 줄이기 설정을 켠 사람: 확대 대신 바로 넘어간다 */

@media (prefers-reduced-motion: reduce) {
  .groundfog img, .intro__arrow, .intro__mouse::before, .intro__chev { animation: none; }
  .js .intro__stage:not(.is-open):not(.is-dragging) .shade-arrow,
  .js .intro__stage:not(.is-open):not(.is-dragging) .shade-arrow i { animation: none; }
  .shade { transition-duration: .01s; }
  html { scroll-behavior: auto; }
}

/* =========================================================
   01 이주민 인터뷰 — 인물 쇼케이스
   스크롤하는 동안 무대가 화면에 붙어 있고, 네 사람이 차례로 바뀐다.
   ========================================================= */
.people {
  --display: "Ijeju Display", var(--font);
  --pad-x: max(16px, 2.5vw);
  --pad-y: clamp(16px, 3vh, 28px);
  --chips-h: 104px;
  position: relative; color: var(--ink);
}
.people__stage {
  --bg: #CFE6F8; --bg2: #A9D4F5;
  position: relative; overflow: hidden;
  background-color: var(--bg);
  transition: background-color .9s ease;
}
.js .people { height: calc(100vh + 2016px); height: calc(100svh + 2016px); }   /* 무대가 붙어 있는 동안 스크롤(약 470px)마다 다음 사람으로 넘어간다. 마지막 150px은 마지막 사람에 머무는 구간, 그다음은 평범하게 스크롤된다 */
.js .people__stage {
  /* will-change: 무대를 따로 그려 두어, 제주 화면 위로 올라오는 동안(둥근 모서리가 펴지는 동안) 사진을 장면마다 다시 그리지 않는다 (2026-10-28) */
  will-change: transform;
  position: sticky; top: var(--hdr-h, 0px);
  height: calc(100vh - var(--hdr-h, 0px)); height: calc(100svh - var(--hdr-h, 0px)); min-height: 560px;
  touch-action: pan-y;               /* 세로 스크롤은 그대로, 가로로 밀면 넘김 */
  user-select: none; -webkit-user-select: none;
}
.js .people__stage.is-dragging { cursor: grabbing; }
.people__stage[data-tone="peach"] { --bg: #FFE4D0; --bg2: #FFCFAE; }
.people__stage[data-tone="orange"] { --bg: #FDC48C; --bg2: #FBA35E; }
.people__stage[data-tone="cream"] { --bg: #FFF4E2; --bg2: #F3DFBF; }
.people__glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 38% 46% at 50% 46%, rgba(255, 255, 255, .78), rgba(255, 255, 255, 0) 70%),
    radial-gradient(ellipse 90% 70% at 50% 110%, var(--bg2), rgba(255, 255, 255, 0) 70%);
  transition: background .9s ease, opacity .9s ease;
}
.people__glow::after {
  /* 첫 화면의 구름이 옅게 남아 흐른다 */
  content: ""; position: absolute; inset: -10%;
  background: url(../images/cloud-sheet.webp) 50% 30% / 90% auto no-repeat;
  opacity: .35;
  animation: people-cloud 26s ease-in-out infinite alternate;
}
@keyframes people-cloud { from { translate: -4% 0; } to { translate: 4% -2%; } }

/* 한 사람 */
.person { position: relative; min-height: 100vh; min-height: 100svh; }
.js .person { position: absolute; inset: 0; min-height: 0; visibility: hidden; transition: visibility 0s linear .9s; }
.js .person.is-active { visibility: visible; transition-delay: 0s; }

.person__top {
  position: absolute; z-index: 4; top: var(--pad-y); left: var(--pad-x); right: var(--pad-x);
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
}
.person__kicker { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: .02em; }
.person__hook { margin: 2px 0 0; max-width: 16em; font-size: 18px; font-weight: 800; line-height: 1.35; }
.is-todo { font-style: italic; font-weight: 500 !important; color: rgba(18, 35, 58, .62); }
/* 오른쪽 위 '인터뷰 0N / 04'와 큰 '(N)'은 서로 가운데를 맞춰 한 덩어리로 보이게 한다. 덩어리는 오른쪽 끝에 붙는다
   (사용자 요청 2026-10-23. 전에는 둘 다 오른쪽 끝에 맞춰, 넓은 괄호가 왼쪽으로 삐져나와 보였다) */
.person__no { margin: 0; display: grid; justify-items: center; text-align: center; }
.person__no-label { font-size: 14px; font-weight: 700; white-space: nowrap; }
.person__no-big {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(48px, 7vw, 96px); line-height: .95; letter-spacing: -0.02em;
  translate: .03em 0;   /* ')' 오른쪽 빈자리 때문에 글자가 왼쪽으로 치우쳐 보여, 그만큼 밀어 위 글자와 눈으로 보이는 가운데를 맞춘다 */
}

/* 가운데: 이름 뒷줄 → 인물 → 이름 앞줄 순서로 겹친다 */
.person__center { position: absolute; inset: 0; pointer-events: none; }
.person__name {
  position: absolute; inset: 0; margin: 0;
  font-family: var(--display); font-weight: 700; letter-spacing: -0.045em; line-height: 1.02;
  font-size: clamp(56px, 9vw, 160px);
}
.person__back, .person__front { position: absolute; left: 50%; white-space: nowrap; }
.person__back { z-index: 1; top: 19%; display: grid; translate: -82% 0; }
.person__back > span { grid-area: 1 / 1; }
.person__front { z-index: 3; top: calc(19% + 1.06em); translate: -44% 0; }
.m-br { display: none; }
.person--single .person__back { top: calc(21% + .46em); translate: -50% 0; }
.person--single .person__front { top: calc(21% + .46em); translate: -50% 0; }
.person__line--back { color: var(--ink); }
.person__line--front { color: var(--ink); }

.person__figure {
  position: absolute; z-index: 2; left: 50%; bottom: 15%;
  height: 70%; aspect-ratio: 4 / 5; max-width: 92vw; translate: -50% 0;
  background:
    radial-gradient(ellipse 30% 4.5% at 50% 97%, rgba(18, 35, 58, .22), rgba(18, 35, 58, 0) 100%),
    radial-gradient(circle at 50% 21%, rgba(18, 35, 58, .14) 0 11.5%, transparent 12%),
    radial-gradient(ellipse 27% 44% at 50% 75%, rgba(18, 35, 58, .14) 0 99%, transparent 100%);
}
.person__img { position: absolute; z-index: 2; left: 50%; bottom: 15%; height: 70%; width: auto; max-width: none; translate: -50% 0; }
.person__ph {
  position: absolute; left: 50%; top: 52%; translate: -50% 0;
  padding: 6px 14px; border-radius: 999px; white-space: nowrap;
  font-size: 14px; font-weight: 700; color: var(--ink);
  background: rgba(255, 255, 255, .7); border: 1.5px dashed rgba(18, 35, 58, .35);
}

/* 아래: 설명 · 버튼 · 고르기 */
.person__bottom { position: absolute; z-index: 4; inset: 0; pointer-events: none; }
.person__desc {
  position: absolute; margin: 0; pointer-events: auto;
  right: var(--pad-x); bottom: calc(var(--pad-y) + 60px); width: min(380px, calc(100% - 2 * var(--pad-x)));
  font-size: 16px; line-height: 1.6;
}
.person__cta {
  position: absolute; left: 50%; bottom: var(--pad-y); translate: -50% 0; pointer-events: auto;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 24px; border-radius: 999px;
  font-size: 16px; font-weight: 800; color: #FFFFFF; text-decoration: none;
  background: var(--ink); box-shadow: 0 10px 24px rgba(18, 35, 58, .22);
  transition: background-color .3s ease, gap .3s ease;
}
.person__cta:hover { background: var(--orange-ink); gap: 16px; }

.people__rule {
  position: absolute; z-index: 1; left: var(--pad-x); right: var(--pad-x); top: 76%;
  height: 1px; background: rgba(18, 35, 58, .28);
}
.people__slogan {
  position: absolute; z-index: 4; left: var(--pad-x); bottom: var(--pad-y); margin: 0;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(24px, 2.8vw, 44px); line-height: 1.12; letter-spacing: -0.03em;
}
.people__chips {
  position: absolute; z-index: 5; right: var(--pad-x); bottom: var(--pad-y);
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px;   /* 인물 이름 대신 가게·학교 이름(2026-10-23)이라 한 줄이 약 470px */
}
.people__chip {
  min-height: 44px; padding: 0 16px; border-radius: 999px; border: 0; cursor: pointer;
  font: inherit; font-size: 16px; font-weight: 700; color: var(--ink);
  background: rgba(255, 255, 255, .62);
  transition: background-color .3s ease, color .3s ease;
}
.people__chip:hover { background: #FFFFFF; }
.people__chip[aria-pressed="true"] { background: var(--ink); color: #FFFFFF; }

/* 휴대폰 · 좁은 화면 */
@media (max-width: 899px) {
  .person__figure, .person__img { bottom: calc(var(--pad-y) + var(--chips-h) + 226px); height: calc((100% - 330px - var(--chips-h)) * .82); min-height: 200px; }
  .person__name { font-size: clamp(34px, 10vw, 76px); line-height: 1.12; }
  .person__back { top: 20%; translate: -68% 0; }
  .person__front { top: calc(20% + 1.1em); translate: -46% 0; text-align: center; }
  .m-br { display: inline; }
  .person--single .person__back, .person--single .person__front { top: calc(15% + .7em); }
  .people__rule, .people__slogan { display: none; }
  .people__chips { left: var(--pad-x); right: var(--pad-x); justify-content: flex-start; max-width: none; }
  .person__desc { left: var(--pad-x); right: var(--pad-x); width: auto; bottom: calc(var(--pad-y) + var(--chips-h) + 72px); }
  .person__cta { left: var(--pad-x); translate: none; bottom: calc(var(--pad-y) + var(--chips-h) + 8px); }
  .person__hook { font-size: 16px; }
}
@media (min-width: 900px) { .people { --chips-h: 44px; } }
/* PC 중 좁은 폭(900~1199px): 오른쪽 아래 고르기 버튼 줄(약 470px)이 가운데 '인터뷰 읽기'와 겹치므로,
   '인터뷰 읽기'를 설명 글 높이로 올리고 설명 글은 조금 좁힌다 */
@media (min-width: 900px) and (max-width: 1199px) {
  .person__cta { bottom: calc(var(--pad-y) + 60px); }
  .person__desc { width: min(330px, calc(100% - 2 * var(--pad-x))); }
}
/* 영어·일본어판 PC: 이름이 길어 고르기 버튼 줄이 약 600px로 넓어지고 '인터뷰 읽기' 버튼도 넓다 (2026-10-25).
   그래서 넓은 PC에서도 버튼을 설명 글 높이로 올린다. 가로는 한국어판처럼 가운데 (사용자 요청 "왼쪽으로 치우쳐 있어", 2026-10-28. 전에는 42%)
   900~1199px은 가운데에 두면 오른쪽 설명 글(330px)에 닿아(900px에서 24px 겹침), 설명 글에서 24px 떨어질 만큼만 왼쪽으로 (1010px쯤부터 가운데) */
@media (min-width: 900px) {
  :is(:lang(en), :lang(ja)) .person__cta { bottom: calc(var(--pad-y) + 60px); }
}
@media (min-width: 900px) and (max-width: 1199px) {
  :is(:lang(en), :lang(ja)) .person__cta { left: min(50%, calc(100% - var(--pad-x) - 330px - 24px - 110px)); }
}
/* 왼쪽 아래 문구는 한 줄 (사용자 요청 2026-10-26). 영어·일본어는 길어서 1400px 넘는 화면에서 글자가 커지면 위 버튼에 닿으므로,
   그때만 버튼 왼쪽 끝(가운데 − 버튼 폭의 반 약 110px)에서 24px 앞까지 쓰고 말 덩어리(.phrase) 사이에서 두 줄로 나눈다 */
@media (min-width: 1400px) {
  :is(:lang(en), :lang(ja)) .people__slogan { max-width: calc(50% - var(--pad-x) - 134px); }
}
/* 영어판 좁은 휴대폰(360px 미만): 이름이 두 줄이 되어 낮은 화면(312×520)에서 설명과 제목이 겹친다. 한 줄로 두고 옆으로 밀어 넘기게 한다 (더 있으면 오른쪽 끝 흐림) */
@media (max-width: 359px) {
  :lang(en) .people__chips {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
  :lang(en) .people__chips::-webkit-scrollbar { display: none; }
  :lang(en) .people__chip { flex: none; }
  /* 'Read the interview' 버튼이 오른쪽 화살표(이전)와 12px 겹쳐서, 버튼을 조금 작게 (2026-10-26) */
  :lang(en) .people .person__cta { padding: 0 14px; gap: 6px; font-size: 14px; }
}

/* 옆으로 넘기는 움직임 (site.js가 is-active / is-left / is-right를 붙인다) */
.js .person__top > *, .js .person__desc, .js .person__cta,
.js .person__back, .js .person__front, .js .person__figure, .js .person__img {
  transition: opacity .6s ease, transform .9s cubic-bezier(.2, .8, .2, 1), filter .6s ease;
}
.js .person.no-anim *, .js .person.no-anim { transition: none !important; }
.js .person:not(.is-active) .person__top > *,
.js .person:not(.is-active) .person__desc,
.js .person:not(.is-active) .person__cta { opacity: 0; }
.js .person:not(.is-active) .person__back,
.js .person:not(.is-active) .person__front { opacity: 0; }
.js .person:not(.is-active) .person__figure,
.js .person:not(.is-active) .person__img { opacity: 0; filter: blur(4px); }
/* 오른쪽에서 들어오고 왼쪽으로 나간다 (이전으로 가면 반대) */
.js .person.is-right .person__top > *, .js .person.is-right .person__desc, .js .person.is-right .person__cta { transform: translateX(40px); }
.js .person.is-left .person__top > *, .js .person.is-left .person__desc, .js .person.is-left .person__cta { transform: translateX(-40px); }
.js .person.is-right .person__back { transform: translateX(1.1em); }
.js .person.is-right .person__front { transform: translateX(1.6em); }
.js .person.is-left .person__back { transform: translateX(-1.1em); }
.js .person.is-left .person__front { transform: translateX(-1.6em); }
.js .person.is-right .person__figure, .js .person.is-right .person__img { transform: translateX(45%) scale(.92); }
.js .person.is-left .person__figure, .js .person.is-left .person__img { transform: translateX(-45%) scale(.92); }
.js .person.is-active .person__front { transition-delay: .06s; }
.js .person.is-active .person__figure, .js .person.is-active .person__img { transition-delay: .03s; }
/* 손가락이나 마우스로 끄는 동안 살짝 따라온다 */
.js .person.is-active .person__center { transform: translateX(calc(var(--pull, 0) * 60px)); }
.js .people__stage.is-dragging .person__center { transition: none; }
.js .person__center { transition: transform .5s cubic-bezier(.2, .8, .2, 1); }


/* ---------- 실사 사진 배경 슬라이드 (.person--photo) ----------
   사진이 무대를 가득 채우고, 글자는 흰색. 사진 위아래를 어둡게 해 흰 글자가 읽히게 한다 */
.people__stage[data-tone="photo"] { --bg: #1E2A36; --bg2: #1E2A36; color: #FFFFFF; }
.person__photo {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 58% 45%;
}
.person--photo::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8, 18, 32, .62) 0%, rgba(8, 18, 32, .28) 26%, rgba(8, 18, 32, .1) 48%, rgba(8, 18, 32, .3) 68%, rgba(8, 18, 32, .8) 100%),
    linear-gradient(90deg, rgba(8, 18, 32, .55) 0%, rgba(8, 18, 32, .15) 55%, rgba(8, 18, 32, 0) 100%);
}
.js .person--photo .person__photo, .js .person--photo::before { transition: opacity .7s ease; }
.js .person--photo:not(.is-active) .person__photo, .js .person--photo:not(.is-active)::before { opacity: 0; }
.person--photo .person__top, .person--photo .person__name, .person--photo .person__line--back, .person--photo .person__line--front { color: #FFFFFF; }
.person--photo .person__top, .person--photo .person__name { text-shadow: 0 2px 14px rgba(0, 0, 0, .45); }
/* 아래 설명 두 줄 (인물마다 사용자가 준 문구, 2026-10-25. 전에는 기울어진 임시 안내 글 .is-todo) */
.person--photo .person__desc { color: rgba(255, 255, 255, .94); font-weight: 500; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
/* 제목: 얼굴을 가리지 않게 왼쪽에 두 줄로 */
.person--photo .person__center { z-index: 2; }
.person--photo .person__back, .person--photo .person__front { left: calc(var(--pad-x) + 76px); translate: none; text-align: left; font-size: clamp(44px, 5.3vw, 92px); }   /* 네 슬라이드 모두 같은 크기 */
.person--photo .person__back { top: 40%; }
.person--photo .person__front { top: calc(40% + 1.08em); }
/* 무대에 붙은 글자·선·버튼도 흰색으로 */
.people__stage[data-tone="photo"] .people__slogan { color: #FFFFFF; text-shadow: 0 2px 14px rgba(0, 0, 0, .45); }
.people__stage[data-tone="photo"] .people__rule { background: rgba(255, 255, 255, .45); }
.people__stage[data-tone="photo"] .people__arrow { border-color: #FFFFFF; color: #FFFFFF; background: rgba(8, 18, 32, .3); }
.people__stage[data-tone="photo"] .people__arrow:hover { background: #FFFFFF; color: var(--ink); }
.people__stage[data-tone="photo"] .people__arrow:disabled { background: rgba(8, 18, 32, .2); color: #FFFFFF; }
.people__stage[data-tone="photo"] .people__glow { opacity: 0; }
/* 사진 아래쪽을 다음 칸(제주생존한마디)의 시작 색으로 서서히 덮어, 경계선 없이 이어지게 */
.people__stage::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 34%;
  pointer-events: none; opacity: 0; transition: opacity .7s ease;
  background: linear-gradient(180deg, rgba(10, 14, 20, 0) 0%, rgba(10, 14, 20, .55) 55%, #0A0E14 100%);
}
.people__stage[data-tone="photo"]::after { opacity: 1; }
/* 이름 고르기 줄: 둥근 버튼이 흰 '인터뷰 읽기' 버튼과 비슷해 보여, 가는 선 아래 글자만 '·'로 잇는다
   (휴대폰은 사용자가 준 시안대로 2026-10-26, PC도 같게 사용자 요청 2026-10-26. 전에는 반투명 둥근 버튼, 지금 사람은 흰 버튼).
   지금 사람은 흰 글자에 주황 밑줄, 나머지는 조금 옅게 (굵기를 바꾸면 넘길 때 줄바꿈이 달라져 굵기는 그대로).
   누르는 칸은 글자 양옆 12px까지(높이 44px). 그만큼 줄을 바깥으로 넓혀 끝 글자가 화면 여백(--pad-x)·위 설명 글과 같은 세로줄에 온다.
   '·'는 칸 사이에 따로 띄워 두고, 줄이 바뀌면 그 줄 맨 앞 '·'는 숨긴다 (site.js가 is-row-start를 붙임) */
.people__stage[data-tone="photo"] .people__chips {
  gap: 0; margin-right: -12px; padding-top: 6px;
  background: linear-gradient(rgba(255, 255, 255, .32), rgba(255, 255, 255, .32)) 12px 0 / calc(100% - 24px) 1px no-repeat;   /* 가는 선 (옆으로 넘기는 줄에서도 제자리) */
}
.people__stage[data-tone="photo"] .people__chip {
  position: relative; padding: 0 12px; border-radius: 0; background: none; box-shadow: none;
  font-weight: 500; color: rgba(255, 255, 255, .72);
}
.people__stage[data-tone="photo"] .people__chip:hover { background: none; color: #FFFFFF; }
.people__stage[data-tone="photo"] .people__chip[aria-pressed="true"] {
  background: none; color: #FFFFFF; text-decoration: underline 2px var(--orange); text-underline-offset: 7px;
}
.people__stage[data-tone="photo"] .people__chip + .people__chip::before {
  content: "·"; content: "·" / "";
  position: absolute; left: 0; top: 50%; translate: -50% -50%;
  color: rgba(255, 255, 255, .6); text-decoration: none; pointer-events: none;
}
.people__stage[data-tone="photo"] .people__chip.is-row-start::before { display: none; }
.people__stage[data-tone="photo"] .person__cta { background: #FFFFFF; color: var(--ink); }
.people__stage[data-tone="photo"] .person__cta:hover { background: var(--orange); color: var(--ink); }
/* 얼굴이 화면 가운데 위쪽에 있는 사진: 제목을 아래쪽(몸 위)에 두고, 밝은 사진이라 더 어둡게 */
.person--photo-low .person__photo { object-position: 50% 40%; }
.person--photo-low::before {
  background:
    linear-gradient(180deg, rgba(8, 18, 32, .6) 0%, rgba(8, 18, 32, .25) 22%, rgba(8, 18, 32, .2) 40%, rgba(8, 18, 32, .62) 58%, rgba(8, 18, 32, .85) 100%);
}
.person--photo-low .person__back { top: 52%; }
.person--photo-low .person__front { top: calc(52% + 1.08em); }
/* 얼굴이 화면 한가운데 있는 사진: 제목을 얼굴 위쪽에 */
.person--photo-side .person__back { top: 15%; }
.person--photo-side .person__front { top: calc(15% + 1.08em); }
@media (min-width: 900px) {
  /* 엠아이티도그(전 '에밀리') 사진은 가슴께에서 끝나 아래 여유가 없다. 배경·누끼를 함께 아래쪽 기준으로 18% 키워 인물을 위로 올린다
     (1280px 화면에서도 원본 1600px 안) */
  .person--photo-side .person__photo { scale: 1.18; transform-origin: 58% 100%; }
}
@media (max-width: 899px) {
  .person__photo { object-position: 50% 45%; }
  .person--photo .person__back, .person--photo .person__front { left: var(--pad-x); font-size: clamp(28px, 7.8vw, 60px); }   /* 가장 긴 제목도 한 줄에 들어가는 크기 */
  .person--photo .person__back, .person--photo-low .person__back { top: 45%; }
  .person--photo .person__front, .person--photo-low .person__front { top: calc(45% + 1.12em); }
  .person--photo .m-br { display: none; }   /* 사진 슬라이드 제목은 휴대폰에서도 두 줄 */
  /* 휴대폰에서는 얼굴 위쪽에 */
  .person--photo-side .person__back { top: 22%; }
  .person--photo-side .person__front { top: calc(22% + 1.12em); }
}


/* ---------- 사진 슬라이드 제목 구성 (시안) ----------
   첫 줄: 왼쪽 위, 속이 빈 흰 글자 + 오른쪽으로 뻗는 주황 선
   둘째 줄: 오른쪽 가운데, 꽉 찬 흰 글자 + 주황 마침표 + 아래 주황 선 */
.people .person--photo .person__back, .people .person--photo .person__front {
  font-size: clamp(50px, 6.6vw, 116px); line-height: 1.06; text-align: left; translate: none;
}
/* 뒤 글자(외곽선)는 크게, 앞 글자는 조금 작게.
   뒤 글자가 너무 커 보인다는 사용자 말에 앞 글자 크기에 맞춰 살짝 줄였다: 앞 글자의 약 1.4배 → 1.2배 (2026-10-26. 전 clamp(56px, 7.8vw, 136px)) */
.people .person--photo .person__back { font-size: clamp(50px, 6.6vw, 116px); }
.people .person--photo .person__front { font-size: clamp(42px, 5.6vw, 98px); }
.people .person--photo .person__back { left: calc(var(--pad-x) + 4px); top: 13%; }
.people .person--photo .person__front { left: 48%; top: 44%; }
/* 얼굴이 한가운데 있는 사진(엠아이티도그): 둘째 줄을 얼굴 오른쪽 아래로 */
.people .person--photo-side .person__front { left: 59%; top: 44%; }
.person--photo .person__line--back {
  color: transparent; -webkit-text-stroke: 1.2px #FFFFFF; text-shadow: none;
  letter-spacing: .07em;   /* 글자 사이를 넉넉하게 (시안) */
}
.person--photo .person__line--front { letter-spacing: 0; }
.person--photo .person__back::after {
  content: ""; position: absolute; left: calc(100% + .25em); bottom: .3em;
  width: 46vw; height: 3px; background: var(--orange);
}
/* 이 선은 늘 인물 뒤에 있어야 한다. 그래서 인물 누끼를 다 불러오고(is-cut-ready, site.js) 사람이 다 나타난 뒤(0.8초)에만 보인다.
   전에는 다른 컴퓨터에서 가끔 선이 인물 앞에 보였다: 누끼가 늦게 뜨거나, 넘기는 동안 누끼가 반투명할 때 (사용자 요청 2026-10-26).
   자리는 그대로(뒤 제목 끝에 붙음). 넘길 때 사라지는 건 바로 */
.js .person--photo .person__back::after { opacity: 0; transition: opacity .3s ease; }
.js .person--photo.is-active.is-cut-ready .person__back::after { opacity: 1; transition-delay: .8s; }
.person--photo .person__line--front::after { content: "."; color: var(--orange); }
.person--photo .person__front::after {
  content: ""; position: absolute; left: -.1em; right: -.5em; top: calc(100% + .12em);
  height: 3px; background: var(--orange);
}
/* 아래 공통 문구: 작게, 위에 짧은 흰 선 */
.people__stage[data-tone="photo"] .people__rule { display: none; }
.people__stage[data-tone="photo"] .people__slogan {
  font-family: var(--font); font-size: clamp(18px, 1.6vw, 24px); font-weight: 600; line-height: 1.5; letter-spacing: -0.01em;
  padding-top: 16px;
}
.people__stage[data-tone="photo"] .people__slogan::before {
  content: ""; position: absolute; left: 0; top: 0; width: 44px; height: 2px; background: rgba(255, 255, 255, .8);
}
/* PC: 넓은 화면에서 네 귀퉁이 글자(이주민 인터뷰·이름 / 인터뷰 번호 / 아래 문구)를 키우고,
   양쪽 여백을 헤더(로고·메뉴)와 같은 --frame-pad로 맞춰 세로줄을 정리한다 (사용자 요청 2026-10-23).
   1280px 화면에서는 전과 거의 같고, 1920px에서 가장 커진다. 휴대폰은 그대로 */
@media (min-width: 900px) {
  .people { --pad-x: var(--frame-pad); --pad-y: clamp(16px, 3vh, 40px); }
  .person__kicker { font-size: clamp(16px, 1vw, 20px); }
  .person__hook { margin-top: 4px; font-size: clamp(18px, 1.4vw, 28px); }
  .person__no-label { font-size: clamp(16px, 1vw, 20px); }
  .person__no-big { font-size: clamp(56px, 7vw, 124px); }
  /* 왼쪽 아래 문구 '육지에서 나고, 섬에서 자라는 중.': PC에서 너무 작아 보인다는 사용자 말에 약 1.4배로 (2026-10-26. 전 18px~1.6vw~30px).
     1280px 약 28px, 1920px 42px. 900px 쪽은 영어 문구가 가운데 '인터뷰 읽기'에 닿지 않게 18px부터 */
  .people__stage[data-tone="photo"] .people__slogan { font-size: clamp(18px, 2.2vw, 42px); line-height: 1.4; padding-top: clamp(16px, 1.3vw, 26px); }
  .people__stage[data-tone="photo"] .people__slogan::before { width: clamp(44px, 3.4vw, 72px); }
}
@media (max-width: 899px) {
  .people .person--photo .person__back, .people .person--photo .person__front { font-size: clamp(31px, 9.2vw, 60px); }
  .people .person--photo .person__back { font-size: clamp(36px, 10.6vw, 70px); }
  .people .person--photo .person__front { font-size: clamp(27px, 8vw, 52px); }
  .people .person--photo .person__back { top: 14%; left: var(--pad-x); }
  .people .person--photo .person__front, .people .person--photo-side .person__front { top: 45.5%; left: auto; right: calc(var(--pad-x) + 8px); }
  .person--photo .person__back::after { width: 30vw; }
  .person--photo .person__line--back { -webkit-text-stroke-width: 1px; }
}
/* 휴대폰: 자리를 화면 높이 비율로 박지 않고 위에서 아래로 차례로 쌓는다
   (위 정보 → 뒷 제목 → 사진 → 앞 제목 → 설명 → 버튼). 화면이 낮거나 휴대폰 글자 크기를 키워도
   사진 자리만 줄어들고 글자끼리는 겹치지 않는다. 아래 이름 버튼 높이(--chips-h)는 site.js가 잰다 */
@media (max-width: 899px) {
  /* 무대 높이는 지금 화면 높이를 따른다(앱 안 브라우저가 위아래 막대를 숨기면 같이 길어진다).
     site.js가 잴 때만 지금까지 본 가장 낮은 높이(--people-vh)를 잠깐 넣는다 */
  .js .people__stage {
    min-height: 0;
    height: calc(var(--people-vh, 100vh) - var(--hdr-h, 0px));
    height: calc(var(--people-vh, 100dvh) - var(--hdr-h, 0px));
  }
  .js .people { background: #0A0E14; }
  /* 가장 낮은 높이에서 제목과 설명이 겹치면(site.js가 붙임): 위 '이주민 인터뷰' 줄을 숨기고 번호·제목을 줄인다.
     그래도 겹치면 제목·간격을 더 줄인다. 아래 이름 버튼은 숨기지 않는다 */
  .people__stage.is-tight .person__kicker { display: none; }
  .people__stage.is-tight .person__no-big { font-size: 34px; }
  .people__stage.is-tight .person--photo .person__back { font-size: clamp(28px, 8.4vw, 56px); }
  .people__stage.is-tight .person--photo .person__front { font-size: clamp(22px, 6.6vw, 42px); }
  .people__stage.is-tighter .person--photo .person__back { font-size: clamp(24px, 7.4vw, 48px); }
  .people__stage.is-tighter .person--photo .person__front { font-size: clamp(20px, 5.8vw, 36px); }
  .people__stage.is-tighter .person__name { gap: 6px; }
  .people__stage.is-tighter .person__desc { line-height: 1.4; }
  .people__stage.is-tighter .person__bottom { gap: 8px; margin-top: 12px; }
  .people__stage.is-tighter .person__no-big { font-size: 28px; }
  .js .people__stage.is-tighter .person { padding-top: 8px; padding-bottom: calc(var(--pad-y) + var(--chips-h) + 6px); }
  .js .people__stage.is-tighter .person--photo .person__back { margin-top: 4px; }
  .people__stage.is-tighter .people__arrow { bottom: calc(var(--pad-y) + var(--chips-h) + 6px); }
  /* 그래도 겹치면(아래 설명이 네 줄이 되며 생김, 2026-10-25): 제목·번호·간격을 조금 더 줄인다. 설명 글자는 16px 그대로 */
  .people__stage.is-tightest .person--photo .person__back { font-size: clamp(22px, 7vw, 44px); }
  .people__stage.is-tightest .person--photo .person__front { font-size: clamp(18px, 5.4vw, 32px); }
  .people__stage.is-tightest .person__name { gap: 2px; }
  .people__stage.is-tightest .person__no-big { font-size: 24px; }
  .people__stage.is-tightest .person__bottom { gap: 6px; margin-top: 4px; }
  .js .people .person {
    display: flex; flex-direction: column;
    padding: var(--pad-y) var(--pad-x) calc(var(--pad-y) + var(--chips-h) + 12px);
  }
  .people .person__top { position: relative; inset: auto; }
  .people .person__center { position: static; flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .people .person--photo .person__center { z-index: 4; }   /* 앞 제목이 아래로 내려와도 무대 아래쪽 어둡게 덮는 층(::after)보다 위에 */
  /* 엠아이티도그: 세로 화면에서는 사진 높이가 무대에 꼭 맞는다. 사진(손까지 나오는 넓은 사진, 2026-10-22 교체)은 줄이지 않아
     양옆이 꽉 차고, 배경·누끼를 함께 위로 12% 당겨 얼굴을 무대 높이 약 35%에 둔다 (사용자 요청 "인물 더 올려줘").
     머리끝이 뒤 제목 끝에 살짝 걸리고, 얼굴은 앞 제목('제주 살이의')보다 위에 온다.
     사진 아래 끝(무대 약 88%)은 서서히 흐려 무대 아래쪽 어두운 색으로 이어진다 */
  .person--photo-side .person__photo { translate: 0 -12%; }
  .person--photo-side .person__photo:not(.person__cut) {
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 80%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0, #000 80%, transparent 100%);
  }
  /* 아인학교(둘째 슬라이드): 두 사람이 사진 가로 약 47%에 서 있어 왼쪽으로 치우쳐 보인다. 화면 가운데로 (배경·누끼 함께) */
  .people .person--photo[data-index="2"] .person__photo { object-position: 46% 40%; }
  .people .person__name { position: static; flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; }
  .js .people .person--photo .person__back { position: relative; top: auto; left: auto; right: auto; margin-top: 10px; align-self: flex-start; }
  .js .people .person--photo .person__front { position: relative; top: auto; left: auto; right: auto; margin-right: 8px; align-self: flex-end; text-align: left; }
  .people .person__bottom { position: relative; inset: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 18px; }
  .people .person__desc, .people .person__cta { position: static; width: auto; translate: none; }
  /* 아래쪽을 조금 작게: 설명은 본문 기준(16px)을 지키고 줄 간격만 좁히고, 버튼 글자는 15px */
  .people .person__desc { line-height: 1.5; }
  .people .person__cta { min-height: 44px; padding: 0 20px; gap: 8px; font-size: 15px; }
  /* 아래 이름 고르기 줄(가는 선 아래 글자·점, 위 '이름 고르기 줄' 참고): 화면 폭 가득 펴서 첫 글자가 위 글과 같은 세로줄에서 시작한다 */
  .people__stage[data-tone="photo"] .people__chips { margin: 0 -12px; }
  .people__stage[data-tone="photo"] .people__chip { font-size: 15px; }
}
/* 화면이 아주 낮은 휴대폰: 제목을 조금 줄여 사진 자리를 남긴다 */
@media (max-width: 899px) and (max-height: 640px) {
  .people .person--photo .person__back { font-size: clamp(30px, 9vw, 60px); }
  .people .person--photo .person__front { font-size: clamp(24px, 7vw, 44px); }
}


/* ---------- 인물 누끼: 첫 줄(외곽선 글자) 뒤 · 둘째 줄 앞 ----------
   배경 사진과 같은 크기·자리로 겹치고, 그림자를 넣어 사진에서 살짝 떠 보이게 한다 */
.js .person--photo.is-active .person__center { transform: none; }   /* 끌어 넘길 때 사진과 어긋나지 않게 */
.person--photo .person__cut { z-index: 2; pointer-events: none; filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, .35)) drop-shadow(0 4px 8px rgba(0, 0, 0, .18));   /* 얇은 윤곽 그림자만: 넓은 그림자는 팔·탱크 사이에 얼룩을 만든다 */ }
/* 아래쪽(설명 글·버튼이 놓이는 곳)에서는 누끼가 서서히 사라져, 어둡게 깐 사진 위에서 흰 글자가 읽히게 */
.person--photo .person__cut {
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 58%, transparent 82%);
  mask-image: linear-gradient(180deg, #000 0, #000 58%, transparent 82%);
}
@media (max-width: 899px) {
  .person--photo .person__cut {
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 48%, transparent 64%);
    mask-image: linear-gradient(180deg, #000 0, #000 48%, transparent 64%);
  }
}
/* 첫 줄이 인물에 살짝 걸치도록 슬라이드마다 자리를 맞춘다 (PC) */
@media (min-width: 900px) {
  .people .person--photo[data-index="1"] .person__back { left: 24%; top: 8%; }   /* 백록마케팅 */
  .people .person--photo[data-index="2"] .person__back { left: 9%; }              /* 아인학교 */
  .people .person--photo[data-index="3"] .person__back { left: 15%; top: 8%; }
  .people .person--photo[data-index="4"] .person__back { left: 15%; top: 8%; }
}


/* ---------- 03 나의 제주찾기: 랜딩페이지로 가는 카테고리 4개 ---------- */
/* 검은 엽서 무대 바로 다음에 '나의 제주찾기'(크림)가 이어진다.
   전에는 사이에 검정 → 크림 그라데이션 띠(화면 높이의 70%)가 있었는데, 너무 길어 사용자 요청으로 뺐다 (2026-10-22) */
.pick + .cat { border-top: 0; padding-top: clamp(64px, 10vh, 112px); }
.cat.find { background: #F7F3EC; padding-bottom: clamp(56px, 9vh, 96px); }   /* 아래 푸터와의 빈 곳을 줄였다 (사용자 요청, 전에는 150~280px) */
.find .cat__label { letter-spacing: .04em; }
.find .cat__title { font-size: clamp(30px, 4.4vw, 52px); font-weight: 800; }
.find .cat__text { font-size: clamp(16px, 1.5vw, 20px); }
/* 대표 콘텐츠 카드: 왼쪽 글, 가운데 오른쪽에 기울인 테스트 표지, 뒤에는 바다·섬·유채꽃 */
.find__main {
  --cw: clamp(272px, 26vw, 320px);   /* 표지 폭. 카드 높이도 여기에 맞춰, 표지 아래 말풍선까지 보이게 한다 */
  position: relative; margin: clamp(36px, 6vh, 64px) 0 0;
  display: flex; align-items: center; min-height: calc(var(--cw) * 1.25);
  padding: 64px clamp(20px, 4.4vw, 60px) 32px;
  border-radius: 24px; isolation: isolate;
  background: linear-gradient(180deg, #C3E0F4 0%, #D8EBF8 55%, #E9F3FA 100%);
  box-shadow: 0 10px 30px rgba(18, 35, 58, .08);
}
.find__main::before {
  /* 테스트 배경 사진. 왼쪽은 하늘색에 녹아들고, 위쪽 하늘은 연하게 덮어 카드 색과 맞춘다 (글자 뒤에 깔리도록 z-index -1) */
  content: ""; position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; left: 34%;
  border-radius: 0 24px 24px 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(216, 235, 248, .7) 0%, rgba(216, 235, 248, .25) 45%, rgba(216, 235, 248, 0) 62%),
    url(../images/find-test-bg.jpg) 50% 74% / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 44%);
  mask-image: linear-gradient(90deg, transparent 0, #000 44%);
}
.find__main-text { display: flex; flex-direction: column; align-items: flex-start; max-width: 46%; }
.find__chip {
  position: absolute; z-index: 1; top: 24px; left: clamp(16px, 2.6vw, 36px); margin: 0;
  padding: 4px 12px; border-radius: 999px; background: rgba(18, 35, 58, .08);
  font-size: 16px; font-weight: 600; color: var(--ink); letter-spacing: .02em;
}
.find__main-title { margin: 0 0 14px; font-size: clamp(28px, 3.4vw, 46px); font-weight: 800; line-height: 1.3; letter-spacing: -0.035em; color: var(--ink); }
.find__main-desc { margin: 0 0 28px; font-size: clamp(16px, 1.3vw, 18px); color: #2E3B4C; }
.find__btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 30px; border-radius: 999px;
  background: var(--ink); color: #FFFFFF; font-size: 18px; font-weight: 700; text-decoration: none;
  box-shadow: 0 8px 18px rgba(18, 35, 58, .18);
  transition: gap .3s ease, background-color .3s ease;
}
.find__btn:hover { gap: 16px; background: #24405F; }
/* 표지 무대: 카드 위로 튀어나온 부분은 보이고, 아래는 카드 끝에서 자른다. 왼쪽 글과 겹치지 않게 카드 오른쪽 기준으로 놓는다 */
.find__stage {
  position: absolute; z-index: 1; right: 18%; bottom: 0; width: var(--cw); height: calc(100% + 32px);
  clip-path: inset(-40px -200px 0 -200px);
  pointer-events: none;
}
.find__cover {
  position: absolute; top: 0; left: 50%; width: var(--cw);
  translate: -50% 0; rotate: -3deg;
  display: block; overflow: hidden; border: 6px solid #FFFFFF; border-radius: 28px;
  background: #8EC3EA; box-shadow: 0 18px 40px rgba(18, 35, 58, .22);
  pointer-events: auto;
  transition: rotate .5s cubic-bezier(.2, .8, .2, 1), translate .5s cubic-bezier(.2, .8, .2, 1);
}
.find__cover img { display: block; width: 100%; height: auto; }
.find__main:hover .find__cover { rotate: -1.5deg; translate: -50% -6px; }
.find__harbang {
  position: absolute; bottom: -12%; left: calc(50% - var(--cw) / 2 - var(--cw) * .3);
  width: calc(var(--cw) * .44); height: auto;
  filter: drop-shadow(0 8px 14px rgba(18, 35, 58, .2));
}
.find__spark {
  position: absolute; bottom: calc(var(--cw) * .5); left: calc(50% - var(--cw) / 2 - var(--cw) * .34);
  width: calc(var(--cw) * .15); height: auto; color: var(--orange); rotate: 8deg;
}
.find__corner {
  position: absolute; z-index: 2; top: 14px; right: 14px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  font-size: 22px; font-weight: 700; color: var(--ink); text-decoration: none;
}
.find__corner:hover { background: rgba(18, 35, 58, .08); }
/* 작은 카드 2개: 왼쪽 그림, 가운데 글, 오른쪽 동그란 화살표 */
.find__subs { list-style: none; margin: clamp(20px, 2.4vw, 28px) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 28px); }
.find__sub {
  display: flex; align-items: center; gap: clamp(16px, 2.4vw, 32px); height: 100%; overflow: hidden;
  padding-right: clamp(16px, 2.6vw, 36px); border-radius: 20px; background: #FFFCF7; color: var(--ink); text-decoration: none;
  box-shadow: 0 6px 22px rgba(18, 35, 58, .07);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease;
}
.find__sub:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(18, 35, 58, .12); }
.find__sub-img { flex: none; align-self: stretch; width: min(46%, 266px); height: auto; min-height: 100%; object-fit: cover; }
.find__sub-img--right { object-position: 68% 50%; }   /* 마을 그림: 집이 오른쪽에 있어, 휴대폰처럼 좁은 칸에서도 집이 보이게 */
.find__sub-body { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 24px 0 14px; }
.find__icon { color: var(--orange-ink); margin-bottom: 8px; }
.find__sub-title { font-size: clamp(18px, 1.8vw, 24px); font-weight: 800; letter-spacing: -0.03em; }
.find__sub-desc { font-size: clamp(16px, 1.3vw, 18px); color: var(--muted); }
.find__sub-more { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 16px; font-weight: 700; color: var(--orange-ink); transition: gap .3s ease; }
.find__sub:hover .find__sub-more { gap: 12px; }
.find__sub-go {
  flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  border: 1.5px solid var(--ink); color: var(--ink);
  transition: background-color .3s ease, color .3s ease;
}
.find__sub:hover .find__sub-go { background: var(--ink); color: #FFFFFF; }
@media (max-width: 1000px) {
  /* 태블릿: 표지를 조금 줄여, 왼쪽 글과 오른쪽 위 ↗ 버튼 사이에 들어가게 */
  .find__main { --cw: 250px; }
  .find__main-text { max-width: 42%; }
  .find__stage { right: 10%; }
  .find__subs { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  /* 휴대폰: 글 아래에 표지. 사진은 카드 아래쪽에 깐다 */
  .find__main { --cw: min(64vw, 280px); flex-direction: column; align-items: stretch; min-height: 0; padding: 72px 20px 0; }
  .find__main::before {
    top: auto; left: 0; height: 58%; border-radius: 0 0 24px 24px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 40%);
    mask-image: linear-gradient(180deg, transparent 0, #000 40%);
  }
  .find__main-text { max-width: none; }
  .find__stage { position: relative; right: auto; width: auto; height: calc(var(--cw) * 1.36); margin-top: 32px; clip-path: inset(-40px -40px 0 -40px); }
  .find__cover { left: 58%; }
  .find__harbang { left: max(-4px, calc(58% - var(--cw) / 2 - var(--cw) * .32)); bottom: -8%; width: calc(var(--cw) * .4); }
  .find__spark { left: max(0px, calc(58% - var(--cw) / 2 - var(--cw) * .32)); bottom: calc(var(--cw) * .44); }
}
@media (max-width: 520px) {
  .find__sub-go { display: none; }
  .find__sub-img { width: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  .find__sub, .find__btn, .find__cover, .find__sub-go { transition: none; }
  .find__sub:hover { transform: none; }
}

/* 이전 · 다음 버튼 */
.people__arrow {
  position: absolute; z-index: 6; top: 48%; translate: 0 -50%;
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  border: 1.5px solid var(--ink); background: rgba(255, 255, 255, .55); color: var(--ink);
  font: inherit; font-size: 22px; font-weight: 700; cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background-color .3s ease, color .3s ease, transform .3s ease;
}
.people__arrow:hover { background: var(--ink); color: #FFFFFF; }
.people__arrow--prev { left: var(--pad-x); }
.people__arrow--next { right: var(--pad-x); }
.people__arrow--prev:hover { transform: translateX(-3px); }
.people__arrow--next:hover { transform: translateX(3px); }
.people__arrow:disabled { opacity: .3; cursor: default; background: rgba(255, 255, 255, .4); color: var(--ink); transform: none; }
@media (max-width: 899px) {
  /* 휴대폰: 제목과 부딪히지 않게 '인터뷰 읽기' 버튼 줄 오른쪽에 나란히 둔다 */
  .people__arrow { width: 44px; height: 44px; font-size: 18px; top: auto; bottom: calc(var(--pad-y) + var(--chips-h) + 12px); translate: none; }
  .people__arrow--prev { left: auto; right: calc(var(--pad-x) + 52px); }
}
.people:not(.is-ready) .people__arrow { display: none; }

@media (prefers-reduced-motion: reduce) {
  .people__glow::after { animation: none; }
  .js .person *, .js .person { transition-duration: .01s !important; transition-delay: 0s !important; }
  .js .person.is-active .person__center { transform: none; }
}

/* ---------- 다음 화면이 아래에서 올라와 화면 가득 퍼진다 (.rise) ----------
   site.js가 화면에 들어온 정도를 --enter(0→1)로 넣는다.
   0: 양옆이 좁고 위가 크게 둥근 카드 → 1: 화면 가득
   --enter는 이 칸에만 쓰고 안쪽 요소에는 물려주지 않는다(inherits: false). 물려주면 올라오는 동안 장면마다
   인물 소개 안 요소 110개의 스타일을 다시 계산해 버벅였다 (2026-10-28) */
@property --enter { syntax: '<number>'; inherits: false; initial-value: 1; }
.js .rise {
  position: relative; z-index: 2;
  margin-top: calc(var(--hdr-h, 0px) - 100vh); margin-top: calc(var(--hdr-h, 0px) - 100svh);
  min-height: calc(100vh - var(--hdr-h, 0px)); min-height: calc(100svh - var(--hdr-h, 0px));
  clip-path: inset(0 calc((1 - var(--enter, 1)) * 9%) 0 calc((1 - var(--enter, 1)) * 9%)
    round calc((1 - var(--enter, 1)) * min(26vw, 340px)) calc((1 - var(--enter, 1)) * min(26vw, 340px)) 0 0);
}
/* 덮이는 화면은 조금 어두워지며 뒤로 물러난다 (site.js가 이 칸에 바로 --under를 넣는다)
   will-change: 진하기가 바뀔 때마다 밑에 깔린 제주 사진까지 다시 그리지 않게 따로 그린다 (2026-10-28) */
.under-dim {
  position: absolute; inset: 0; z-index: 20; pointer-events: none;
  background: #0B1A2C; opacity: calc(var(--under, 0) * .45);
  will-change: opacity;
}


/* =========================================================
   02 제주생존한마디 — 공중에서 도는 카드 → 스크롤하면 한 장으로 모인다
   site.js가 카드마다 위치·각도를 정하고, 모이는 정도를 --merge(0→1)로 넣는다
   ========================================================= */
.pick {
  --gap: clamp(150px, 26vh, 280px);   /* 인터뷰 화면과의 여백 */
  --tail: clamp(96px, 16vh, 180px);   /* 엽서 무대가 끝난 뒤 '나의 제주찾기' 전까지 이어지는 검정 (사용자 요청 "살짝 더 길게") */
  position: relative; padding-top: var(--gap); padding-bottom: var(--tail);
  /* 검은 무대: 인터뷰 사진 아래쪽의 어두운 남색에서 이어져 검정으로 */
  background: linear-gradient(180deg, #0A0E14 0, #000000 var(--gap), #000000 100%);
  color: #FFFFFF;
}
.js .pick { height: calc(100vh + 3400px + var(--gap) + var(--tail)); height: calc(100svh + 3400px + var(--gap) + var(--tail)); }   /* ① 카드가 모이며 소개 글이 나오고 ② 더 내리면 모인 카드 한 장이 나온다 */
.pick__stage {
  position: relative; overflow: hidden;
  min-height: calc(100vh - var(--hdr-h, 0px)); min-height: calc(100svh - var(--hdr-h, 0px));
  background: #000000;
}

/* 카드가 무대 위아래 끝에서 칼로 자른 듯 잘리지 않고, 부드럽게 사라지며 나타나게 */
.pick__cards {
  position: absolute; inset: 0; z-index: 1;
  perspective: 1100px; perspective-origin: 50% 45%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 84%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 84%, transparent 100%);
}
.js .pick__stage {
  cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  position: sticky; top: var(--hdr-h, 0px); height: calc(100vh - var(--hdr-h, 0px)); height: calc(100svh - var(--hdr-h, 0px)); }
/* 뒤의 큰 제목 (모일수록 흐려진다) */
.pick__headline {
  position: absolute; left: 0; right: 0; top: clamp(18px, 6vh, 64px); margin: 0;
  display: flex; flex-direction: column; align-items: center; gap: .35em;
  color: var(--ink); text-align: center; white-space: nowrap;
  opacity: calc(1 - var(--merge, 0) * 1.4);
  pointer-events: none;
  z-index: 3;                       /* 레퍼런스처럼 큰 제목이 카드 앞에 온다 (누르는 건 카드로 통과) */
  color: #FFFFFF; text-shadow: 0 2px 24px rgba(0, 0, 0, .7);
}
/* 영문 큰 제목: 굵은 세리프 */
.pick__en {
  font-family: "Bodoni 72", Didot, "Playfair Display", "Times New Roman", Georgia, serif;
  /* 한 줄 그대로. 좁은 휴대폰(312px)이나 글자를 키운 휴대폰(카톡 '가가')에서 화면보다 길어지면 site.js가 --en-fit으로 줄인다 (2026-10-28) */
  font-size: calc(clamp(44px, 9vw, 150px) * var(--en-fit, 1)); font-weight: 700; line-height: .92; letter-spacing: -0.01em;
}
/* 한글 부제 */
.pick__en { color: #F6EFE4; }   /* 크림빛 흰색 */
.pick__hl { font-style: normal; font-weight: 800; color: var(--orange); }
.pick__ko {
  /* 화면보다 길면 말 덩어리(.phrase) 사이에서 두 줄로 접는다 (2026-10-28. 전에는 한 줄 고정이라 좁은 휴대폰·카톡 글자 확대에서 양옆이 잘렸다) */
  max-width: calc(100% - 32px); white-space: normal; text-wrap: balance;
  font-size: clamp(18px, 2.6vw, 40px); font-weight: 600; line-height: 1.3; letter-spacing: -0.03em;
  /* 카드 위에 겹쳐도 읽히도록 검은 빛을 두른다 */
  text-shadow: 0 0 6px #000000, 0 0 14px #000000, 0 0 28px rgba(0, 0, 0, .9);
}
/* 부제 아래 안내: 엽서를 누르면 무엇을 볼 수 있는지 */
.pick__guide {
  max-width: calc(100% - 32px); margin-top: .3em; white-space: normal;
  font-size: clamp(16px, 1.3vw, 19px); font-weight: 500; line-height: 1.5; color: rgba(255, 255, 255, .88);
  text-shadow: 0 0 6px #000000, 0 0 14px #000000, 0 0 24px rgba(0, 0, 0, .9);
}
/* 가운데 안내 '옆으로 넘겨 보세요' (사용자가 준 시안, 2026-10-27): 나선 가운데에 손 그림(위에 주황 ↔) + 두 줄.
   엽서 앞에 떠 있지만 누르기·끌기·마우스 올리기는 엽서로 통과한다. 엽서가 모이기 시작하면(--merge) 금방 흐려진다 */
.pick__hint {
  /* 무대 아래쪽 가운데 (사용자 요청 "하단으로 내려줘", 2026-10-27. 처음엔 나선 가운데 54%·휴대폰 57%) */
  /* z-index 5: 무대 아래쪽에는 아직 안 올라온 소개 글(.pick__intro, 4)의 검은 띠가 걸쳐 있어 그보다 위에 둔다.
     소개 글이 떠오르기(진행 0.31) 전에 이 안내는 이미 사라진다(진행 약 0.2) */
  position: absolute; left: 50%; bottom: clamp(24px, 7vh, 72px); z-index: 5;
  translate: -50% 0;
  display: flex; align-items: center; gap: clamp(10px, .9vw, 14px);
  width: max-content; max-width: calc(100% - 32px);
  pointer-events: none;
  opacity: calc(1 - var(--merge, 0) * 3);
  isolation: isolate;
}
/* 뒤에 밝은 엽서가 지나가도 읽히게, 시안처럼 어두운 바탕을 가장자리 없이 옅게 깐다 */
.pick__hint::before {
  content: ""; position: absolute; inset: -6px -12px; z-index: -1;
  border-radius: 999px; background: rgba(0, 0, 0, .82); box-shadow: 0 0 28px 16px rgba(0, 0, 0, .82);
}
.pick__hint-icon { flex: none; width: clamp(36px, 3vw, 44px); height: auto; overflow: visible; filter: drop-shadow(0 0 6px #000000) drop-shadow(0 0 12px rgba(0, 0, 0, .8)); }
.pick__hint-arrow { fill: none; stroke: var(--orange); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pick__hint-hand { fill: rgba(0, 0, 0, .45); stroke: #FFFFFF; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
/* 손이 좌우로 천천히 오간다 (움직임 줄이기 설정에서는 가만히) */
.pick__hint-move { animation: pick-hint-sway 2.4s ease-in-out infinite; }
@keyframes pick-hint-sway { 0%, 100% { transform: translateX(-4px); } 50% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .pick__hint-move { animation: none; } }
.pick__hint-text {
  margin: 0; display: flex; flex-direction: column; gap: .3em;
  text-shadow: 0 0 6px #000000, 0 0 14px #000000, 0 0 28px rgba(0, 0, 0, .9);   /* 엽서 위에 겹쳐도 읽히게 (위 부제와 같은 검은 빛) */
}
/* 크기: 사용자 요청 "사이즈 줄이고"로 줄였다 (2026-10-27. 전 제목 22~34px·아래 줄 16~19px·손 44~60px) */
/* 두 줄 다 한 줄로 둔다. 글자를 키운 휴대폰(카톡 '가가')에서 들어가지 않으면 site.js가 --hint-fit-t·--hint-fit-s로 줄인다 (2026-10-28.
   전에는 일본어 제목이 두 줄로 접히며 안내 덩어리가 화면 폭 가득 넓어져 왼쪽으로 쏠려 보였다) */
.pick__hint-title { font-size: calc(clamp(19px, 1.7vw, 24px) * var(--hint-fit-t, 1)); font-weight: 800; line-height: 1.25; letter-spacing: -0.03em; color: #FFFFFF; white-space: nowrap; }
.pick__hint-sub { font-size: calc(16px * var(--hint-fit-s, 1)); font-weight: 500; line-height: 1.45; color: rgba(255, 255, 255, .88); white-space: nowrap; }
html:not(.js) .pick__hint { display: none; }
.pick__world {
  /* 엽서들은 3D 공간을 같이 쓰지 않는다(flat). 원근은 site.js가 엽서마다 따로 주고, 앞뒤는 z-index로 정한다
     → 모이는 동안 엽서끼리 서로를 뚫고 지나가며 깨져 보이지 않는다 */
  position: absolute; z-index: 1; left: 50%; top: 54%;   /* 나선 가운데 높이 (엽서를 잡기 쉽게 58% → 52%로 올렸다가 "살짝만 더 내려줘"로 54%, 사용자 요청). 마지막 엽서(.pick__final)와 같은 높이 */
  width: 0; height: 0; transform-style: flat;
  /* 뒤집히며 커지는 동안 엽서 묶음을 다시 그리느라 화면이 0.05~0.1초 멈췄다가 따라잡아, 확 빨라지는 것처럼 보였다 (2026-10-27).
     묶음 전체를 미리 한 장으로 올려 두면 멈춤이 없어진다. 멈춰 있을 때 선명도도 그대로 (엽서 하나하나에 주면 흐려진다: .pcard 참고) */
  will-change: transform;
}
.pcard {
  /* 가로로 긴 엽서: 흰 테두리 안에 그림, 오른쪽 위에 우표 */
  --cw: clamp(96px, 10.4vw, 156px);
  --pw: calc(var(--cw) * 1.45);
  position: absolute; left: calc(var(--pw) / -2); top: calc(var(--cw) * -.48);
  width: var(--pw); height: calc(var(--cw) * .96);
  border-radius: calc(var(--cw) * .035);
  box-shadow: 0 10px 28px rgba(18, 35, 58, .2);
  will-change: opacity;   /* transform까지 미리 고정하면 묶음으로 커질 때 흐릿해진다 */
  overflow: hidden;
  /* 버튼 기본 모양 지우기 */
  margin: 0; font: inherit; text-align: left; cursor: pointer;
  border: calc(var(--cw) * .055) solid #FFFDF8; background-clip: padding-box;
  -webkit-tap-highlight-color: transparent;
}
/* 우표: 톱니 모양 흰 테두리 안의 주황 */
.pcard:not(.pcard--note)::before,
.pcard--note::before, .pick-pop__body::before {
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  background: linear-gradient(160deg, #F97316, #FDBA74);
  border: 2px dotted #FFFDF8; box-shadow: 0 0 0 2px #FFFDF8, 0 2px 6px rgba(18, 35, 58, .25);
}
.pcard:not(.pcard--note)::before { top: 7%; right: 6%; width: 16%; height: 30%; }
/* 뒤쪽으로 돈 카드는 조금 어둡게 (깊이감) */
.pcard::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: #12233A; opacity: var(--shade, 0);
}
.pick__stage.is-grabbing, .pick__stage.is-grabbing .pcard { cursor: grabbing; }
.pcard:hover { box-shadow: 0 0 0 3px #FFFFFF, 0 14px 36px rgba(18, 35, 58, .3); }
.pcard:focus-visible { outline: 3px solid var(--orange-ink); outline-offset: 3px; }
.pick.is-merging .pcard { pointer-events: none; }
/* 제주를 떠올리게 하는 무늬 카드 (글자 없음) */
.pcard--tangerine { background: radial-gradient(circle at 50% 50%, #F97316 0 30%, #FB923C 31% 36%, transparent 37%) 0 0 / 50% 25%, #FFE7C2; }
.pcard--wave { background: repeating-radial-gradient(circle at 50% 115%, #1D4E89 0 9%, #5AA9E6 9% 16%, #CFE6F8 16% 20%); }
.pcard--stone {
  background:
    radial-gradient(ellipse 42% 30% at 28% 26%, #6E6A66 0 70%, transparent 72%),
    radial-gradient(ellipse 36% 28% at 76% 22%, #5B5753 0 70%, transparent 72%),
    radial-gradient(ellipse 44% 30% at 70% 60%, #6E6A66 0 70%, transparent 72%),
    radial-gradient(ellipse 38% 28% at 24% 70%, #5B5753 0 70%, transparent 72%),
    radial-gradient(ellipse 40% 26% at 50% 96%, #6E6A66 0 70%, transparent 72%),
    #2E2C2B;
}
.pcard--canola { background: repeating-linear-gradient(135deg, #F5C518 0 12%, #E9A800 12% 24%), #F5C518; }
.pcard--camellia {
  background:
    radial-gradient(circle at 50% 50%, #FFE08A 0 9%, transparent 10%) 0 0 / 50% 36%,
    conic-gradient(from 45deg at 50% 50%, #C81E3A 0 25%, #E8475F 0 50%, #C81E3A 0 75%, #E8475F 0) 0 0 / 50% 36%,
    #C81E3A;
}
.pcard--oreum {
  background:
    radial-gradient(ellipse 85% 46% at 25% 100%, #4C8C4A 0 98%, transparent 100%),
    radial-gradient(ellipse 75% 40% at 80% 100%, #2F6B3A 0 98%, transparent 100%),
    radial-gradient(ellipse 60% 30% at 55% 100%, #6FAE5B 0 98%, transparent 100%),
    linear-gradient(180deg, #A9D4F5, #E4F1FB);
}
.pcard--sky {
  background:
    radial-gradient(circle at 30% 35%, #FFFFFF 0 13%, transparent 14%),
    radial-gradient(circle at 45% 30%, #FFFFFF 0 16%, transparent 17%),
    radial-gradient(circle at 62% 36%, #FFFFFF 0 12%, transparent 13%),
    radial-gradient(circle at 70% 70%, #FFFFFF 0 10%, transparent 11%),
    radial-gradient(circle at 58% 72%, #FFFFFF 0 13%, transparent 14%),
    linear-gradient(180deg, #5A92D2, #A9D4F5);
}
.pcard--check { background: conic-gradient(#C2410C 0 25%, #12233A 0 50%, #C2410C 0 75%, #12233A 0) 0 0 / 34% 24%; }
/* 엽서 앞면 (사용자가 준 '그래픽 패턴형' 시안): 귤·바다·섬 그림 위에 '이주민의 한 문장'과 손글씨 한마디.
   그림에 우표와 종이 테두리가 들어 있어 흰 테두리와 따로 붙이는 우표는 뺀다 */
.pcard--post {
  /* 그림(614×377)과 같은 비율로 맞춰 양옆이 잘리지 않게 */
  top: calc(var(--pw) / -3.258); height: calc(var(--pw) / 1.629);
  border-width: 0;
  background: #F3E4CE center / cover no-repeat;
}
/* 엽서마다 다른 그림: 장소에 맞춘 아래 풍경 · 왼쪽 꽃과 열매 · 오른쪽 색면 · 우표. 11번은 시안 그림 그대로 */
.pcard--d01 { background-image: url(../images/postcard-front-01.svg); }
.pcard--d02 { background-image: url(../images/postcard-front-02.svg); }
.pcard--d03 { background-image: url(../images/postcard-front-03.svg); }
.pcard--d04 { background-image: url(../images/postcard-front-04.svg); }
.pcard--d05 { background-image: url(../images/postcard-front-05.svg); }
.pcard--d06 { background-image: url(../images/postcard-front-06.svg); }
.pcard--d07 { background-image: url(../images/postcard-front-07.svg); }
.pcard--d08 { background-image: url(../images/postcard-front-08.svg); }
.pcard--d09 { background-image: url(../images/postcard-front-09.svg); }
.pcard--d10 { background-image: url(../images/postcard-front-10.svg); }
.pcard--d11 { background-image: url(../images/postcard-front-11.webp); }
.pcard--d12 { background-image: url(../images/postcard-front-12.svg); }
.pcard--d13 { background-image: url(../images/postcard-front-13.svg); }
.pcard--d14 { background-image: url(../images/postcard-front-14.svg); }
.pcard--d15 { background-image: url(../images/postcard-front-15.svg); }
.pcard--d16 { background-image: url(../images/postcard-front-16.svg); }
.pcard--d17 { background-image: url(../images/postcard-front-17.svg); }
.pcard--d18 { background-image: url(../images/postcard-front-18.svg); }
.pcard--d19 { background-image: url(../images/postcard-front-19.svg); }
.pcard--d20 { background-image: url(../images/postcard-front-20.svg); }
.pcard.pcard--post::before { content: none; }
.pcard__label {
  position: absolute; left: 20.5%; top: 14.5%;
  font-size: calc(var(--pw) * .036); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: #DC5A1E;
  white-space: nowrap;
}
.pcard__label::after { content: ""; display: block; width: 1.9em; height: max(1px, .13em); margin-top: .6em; background: currentColor; }
.pcard--post .pcard__word {
  left: 21.5%; right: 26%; top: 31%; bottom: auto;
  padding: 0; border: 0; border-radius: 0; background: none;
  -webkit-line-clamp: 3; line-clamp: 3;
  /* 잘 읽히게: 손글씨 대신 둥근 고딕 굵게 (사용자 요청) */
  font-family: "Ijeju Card", var(--font); font-size: calc(var(--pw) * .042); font-weight: 700; line-height: 1.4; letter-spacing: -0.02em; color: #1E1B18;
}
.pcard.is-back .pcard__label { visibility: hidden; }
/* 표지 엽서: 엽서가 다 모이면 맨 위로 떠오르는 이제주민 로고 엽서 (site.js가 위치·투명도를 넣는다)
   사용자가 준 시안대로: 수채화 느낌의 바다·등대 그림(postcard-cover-sea.webp, reference/tools/make-cover-sea.py로 만듦) 위에
   주황 로고, 그 아래 주황 팀 이름 '살러 왔다, 살아남기' (2026-10-23)
   (그 전: 민무늬 크림 → 하늘·뭉게구름 postcard-cover-sky.webp → 노을빛 바다 postcard-cover.svg → 주황 바탕에 흰 로고.
    다른 그림으로 되돌리려면 아래 background의 그림 주소만 바꾼다) */
.pick__cover {
  --cw: clamp(96px, 10.4vw, 156px);
  --pw: calc(var(--cw) * 1.45);
  position: absolute; left: calc(var(--pw) / -2); top: calc(var(--pw) / -3.258);
  width: var(--pw); height: calc(var(--pw) / 1.629);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--pw) * .035);
  border-radius: calc(var(--cw) * .035); overflow: hidden;
  /* 팀 그림: 돌담·귤나무·바다 앞 팀원 다섯 명 (사용자 요청 2026-10-23). 같은 이름으로 바꿔 ?v=2 (휴대폰 캐시)
     그 전: 제주청년센터 앞 팀 그림 → 수채화 바다·등대 postcard-cover-sea.webp */
  background: #F3EBDD url(../images/postcard-cover-team.webp?v=2) center / cover no-repeat;
  box-shadow: 0 10px 28px rgba(18, 35, 58, .2);
  opacity: 0; visibility: hidden; pointer-events: none;
}
/* 가운데 로고·팀 이름이 그림 위에서 읽히게, 로고·글자 뒤만 크림빛으로 옅게 덮는다. 그 밖의 그림은 그대로 또렷하다 */
.pick__cover::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 36% 44% at 50% 50%, rgba(255, 249, 238, .86), rgba(255, 249, 238, .6) 55%, rgba(255, 249, 238, 0) 100%);
}
/* 로고: 흰 로고 그림을 모양틀로 써서 주황으로 칠한다 */
.pick__cover-logo {
  position: relative;   /* 위의 크림빛 덮개(::before)보다 앞에 */
  width: calc(var(--pw) * .21); aspect-ratio: 180 / 209;
  background: var(--orange);
  -webkit-mask: url(../images/logo-ijejumin-white.webp) center / contain no-repeat;
  mask: url(../images/logo-ijejumin-white.webp) center / contain no-repeat;
}
/* 팀 이름: 시안처럼 굵게. 바다 그림과 섞이지 않게 뒤를 밝힌다 (사용자 요청 "글이 잘 보이게")
   글자마다 흰 테두리처럼 감싸던 빛(text-shadow 세 겹)이 어색하다는 말에 (사용자 요청 "좀 더 자연스럽게", 2026-10-23)
   글자 뒤에 물 위 햇빛처럼 옆으로 길고 가장자리가 흐린 빛을 깔고, 글자 둘레 빛은 아주 옅게만 남겼다 */
.pick__cover-text {
  position: relative; isolation: isolate;
  font-size: calc(var(--pw) * .05); font-weight: 800; line-height: 1.2; letter-spacing: .02em; color: var(--orange); white-space: nowrap;   /* 크기: 엽서 폭의 5% (사용자 요청으로 6.2% → 5%) */
  text-shadow: 0 0 calc(var(--pw) * .012) rgba(255, 255, 255, .55);
}
.pick__cover-text::before {
  content: ""; position: absolute; z-index: -1;
  left: -30%; right: -30%; top: -70%; bottom: -70%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .62), rgba(255, 255, 255, .38) 45%, rgba(255, 255, 255, .12) 75%, rgba(255, 255, 255, 0));
}
/* 팝업 그림면: 추천 장소 사진 (돌아가는 엽서 앞면에는 무늬만). 사진이 오기 전에는 뒤의 무늬가 보인다 */
.pick-pop__photo {
  position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit;
  object-fit: cover; pointer-events: none; -webkit-user-drag: none; user-select: none;
}
/* 흰 카드: 생존 한마디가 들어갈 자리 */
.pcard--note {
  /* 엽서 뒷면: 왼쪽은 글, 가운데 세로줄, 오른쪽은 우표와 주소 줄 */
  background:
    linear-gradient(#D8CFC1, #D8CFC1) 54% 50% / 1px 76% no-repeat,
    linear-gradient(#D8CFC1, #D8CFC1) 88% 60% / 36% 1px no-repeat,
    linear-gradient(#D8CFC1, #D8CFC1) 88% 74% / 36% 1px no-repeat,
    linear-gradient(#D8CFC1, #D8CFC1) 88% 88% / 36% 1px no-repeat,
    #FFFDF8;
  padding: calc(var(--cw) * .06) 50% calc(var(--cw) * .06) calc(var(--cw) * .07); color: var(--ink);
  display: flex; flex-direction: column; gap: calc(var(--cw) * .03);
}
.pcard--note::before { top: 9%; right: 7%; width: 15%; height: 28%; }
.pcard--note.is-back > * { visibility: hidden; }
/* 엽서 아래쪽에 이주민의 한마디 (세 줄까지, 넘치면 …. 전체는 팝업에서). 뒤돌아 있을 때는 거울글자가 되니 숨긴다 */
.pcard__word {
  position: absolute; left: 6%; right: 6%; bottom: 7%;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
  /* 위아래 여백은 투명 테두리로: 안쪽 여백(padding)으로 두면 잘린 다음 줄이 그 여백에 비쳐 보인다 */
  padding: 0 .65em; border-block: .45em solid transparent; border-radius: calc(var(--cw) * .04);
  font-size: max(8px, calc(var(--cw) * .072)); font-weight: 600; line-height: 1.4; color: var(--ink);
  background: rgba(255, 253, 248, .94);
}
.pcard.is-back .pcard__word { visibility: hidden; }
@media (max-width: 600px) {
  .pcard__word { -webkit-line-clamp: 2; line-clamp: 2; padding: 0 .5em; border-block-width: .35em; font-size: max(10px, calc(var(--cw) * .1)); }   /* 휴대폰: 두 줄까지 (우표가 가려지지 않게) */
  /* 엽서 앞면: 휴대폰 엽서는 작아서 글자를 키우고 글 자리를 넓혀 두 줄까지만 (넘치면 …, 전체는 팝업에서) */
  .pcard--post .pcard__word { -webkit-line-clamp: 2; line-clamp: 2; left: 18%; right: 22%; top: 32%; font-size: max(8px, calc(var(--pw) * .06)); line-height: 1.36; }
  .pcard__label { top: 11%; font-size: max(7px, calc(var(--pw) * .036)); }
}
.pcard__mark { width: calc(var(--cw) * .13); height: calc(var(--cw) * .13); border-radius: 30%; background: conic-gradient(#F97316 0 50%, #FDBA74 0); }
.pcard__kicker { font-size: max(8px, calc(var(--cw) * .062)); color: var(--muted); white-space: nowrap; }
.pcard__big { font-size: max(11px, calc(var(--cw) * .105)); font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; }
.pcard__small { margin-top: auto; font-size: max(8px, calc(var(--cw) * .056)); line-height: 1.35; color: var(--muted); }
/* 모두 모였을 때 남는 한 장 (엽서 뒷면): 사용자가 준 시안대로 (2026-10-22)
   위 줄: 왼쪽 주황 '02 — JEJU LIFE STORIES', 그 아래 가는 선 (오른쪽 편지 봉투 그림은 사용자 요청으로 지웠다)
   가운데 정렬: 주황 '제주생존한마디' → 큰 제목 → 소개 글 → 아래 가는 선 */
.pick__final {
  --fw: min(700px, calc(100vw - 32px));
  position: absolute; left: 50%; top: 54%; z-index: 5;   /* 나선(.pick__world)과 같은 높이 */
  width: var(--fw); translate: -50% -50%;
  padding: 0 28px 30px; border-radius: 10px; text-align: center;
  border: 12px solid #FFFDF8;
  background: #FFFDF8;
  color: var(--ink);
  box-shadow: 0 0 0 1px rgba(18, 35, 58, .06), 0 24px 60px rgba(18, 35, 58, .22);
  opacity: 0; transform: scale(.9);
  pointer-events: none;
}
.pick__final-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 0 16px; border-bottom: 1px solid #E6DCCB; text-align: left;
}
.pick__final-tag { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.4; letter-spacing: .02em; color: var(--orange-ink); }
.pick__final-kicker { margin: 30px 0 0; font-size: 16px; font-weight: 500; line-height: 1.4; color: var(--orange-ink); }
.pick__final-title { margin: 8px 0 16px; font-size: clamp(24px, 2.8vw, 30px); font-weight: 800; line-height: 1.35; letter-spacing: -0.03em; }
.pick__final-text { padding-bottom: 32px; border-bottom: 1px solid #E6DCCB; }
.pick__final-text p { margin: 0; font-size: 17px; line-height: 1.85; color: var(--muted); }
.pick__final-text p + p { margin-top: 12px; }
.pick__final-text p:last-child { font-weight: 700; }   /* 마지막 문장 '지금부터 … 들려드릴게요.'는 굵게 (사용자 요청) */

/* 카드 팝업 */
.pick-pop {
  width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 32px); max-height: calc(100svh - 32px);
  padding: 0; border: 0; border-radius: 26px; overflow: visible;
  background: transparent; color: var(--ink);
}
.pick-pop::backdrop { background: rgba(18, 35, 58, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pick-pop__inner {
  /* 엽서 한 장: 왼쪽 그림면, 오른쪽 글쓰는 면. 한마디가 길면 엽서 안에서 스크롤된다 */
  position: relative; overflow: hidden auto; border-radius: 10px;
  max-height: calc(100vh - 32px); max-height: calc(100svh - 32px);
  display: grid; grid-template-columns: 1.1fr 1fr;
  background: #FFFDF8;
  box-shadow: 0 30px 80px rgba(8, 20, 40, .4);
  transform-origin: var(--ox, 50%) var(--oy, 50%);
  transition: transform .5s cubic-bezier(.2, .9, .25, 1.05), opacity .3s ease;
}
.pick-pop.is-from .pick-pop__inner { transform: translate(var(--fx, 0), var(--fy, 0)) scale(var(--fs, .6)); opacity: .3; transition: none; }
.pick-pop__card { --cw: 300px; min-height: 300px; border-radius: 6px; box-shadow: none; }
.pick-pop__card.pcard { position: relative; left: auto; top: auto; width: auto; height: auto; margin: 14px 0 14px 14px; border-width: 0; cursor: default; }
.pick-pop__card.pcard::before { content: none; }   /* 그림면(사진)에는 우표를 붙이지 않는다. 우표는 글쓰는 면에만 */
.pick-pop__card.is-note { margin: 14px 0 14px 14px; border-radius: 6px; background: linear-gradient(120deg, #F97316 0%, #FDBA74 55%, #FFE7C2 100%); }
.pick-pop__body {
  position: relative; padding: 30px 28px 30px;
  border-left: 1px solid #D8CFC1; margin: 24px 24px 24px 22px;
}
/* 글쓰는 면의 우표: 누른 엽서 그림(614×377)의 우표를 그대로 잘라 보여 준다 (사용자 요청 2026-10-27. 전에는 모든 엽서가 같은 주황 네모).
   site.js가 엽서 그림을 --stamp-img로 넘긴다. SVG 엽서 19장은 우표가 모두 (500, 24) 86×116 자리, 11번(시안 그림)만 (501, 21) 90×121.
   작게 줄이면 우표 옆 바탕색이 경계에 섞여 비치므로 둘레를 2씩 안쪽으로 자른다. 우표 자체에 톱니 테두리가 있어 흰 테두리는 빼고 그림자만 */
.pick-pop__body::before {
  top: 26px; right: 4px; width: 54px; height: 74px;
  border: 0; box-shadow: 0 2px 6px rgba(18, 35, 58, .2);
  background: var(--stamp-img, linear-gradient(160deg, #F97316, #FDBA74)) no-repeat;
  background-size: calc(614 / 82 * 100%) calc(377 / 112 * 100%);
  background-position: calc(502 / (614 - 82) * 100%) calc(26 / (377 - 112) * 100%);
}
.pick-pop[data-design="pcard--d11"] .pick-pop__body::before {
  background-size: calc(614 / 86 * 100%) calc(377 / 117 * 100%);
  background-position: calc(503 / (614 - 86) * 100%) calc(23 / (377 - 117) * 100%);
}
.pick-pop__kicker, .pick-pop__title { margin-right: 72px; }
@media (max-width: 599px) {
  .pick-pop__inner { grid-template-columns: 1fr; }
  .pick-pop__card.pcard, .pick-pop__card.is-note { margin: 12px 12px 0; min-height: 150px; }
  .pick-pop__body { border-left: 0; border-top: 1px solid #D8CFC1; margin: 18px 18px 6px; padding: 22px 4px 26px; }
  .pick-pop__body::before { top: 20px; right: 4px; width: 44px; height: 60px; }
  .pick-pop__kicker, .pick-pop__title { margin-right: 60px; }
  /* 휴대폰: 여백을 줄이고, 위 줄 글자는 한 줄에 들어가게 조금 작게 */
  .pick__final { padding: 0 14px 16px; border-width: 8px; }
  .pick__final-head { padding: 10px 0 12px; }
  .pick__final-tag { font-size: 14px; letter-spacing: 0; }
  .pick__final-kicker { margin-top: 18px; }
  .pick__final-title { margin: 4px 0 10px; font-size: 21px; }
  .pick__final-text { padding-bottom: 18px; }
  .pick__final-text p { font-size: 16px; line-height: 1.6; }
  .pick__final-text p + p { margin-top: 8px; }
}
/* 카카오톡 막대가 보이는 낮은 휴대폰 화면(312×520): 엽서가 무대 안에 들어가도록 더 촘촘하게 */
@media (max-width: 599px) and (max-height: 560px) {
  .pick__final { padding-bottom: 12px; border-width: 6px; }
  .pick__final-head { padding: 7px 0 9px; }
  .pick__final-kicker { margin-top: 12px; }
  .pick__final-title { margin-bottom: 8px; }
  .pick__final-text { padding-bottom: 12px; }
  .pick__final-text p { line-height: 1.45; }
  .pick__final-text p + p { margin-top: 6px; }
}
/* 위아래 여백만 준다 (오른쪽 여백은 우표 자리라 위에서 따로 정한다) */
.pick-pop__kicker { margin-top: 0; margin-bottom: 0; font-size: 16px; font-weight: 800; color: var(--orange-ink); letter-spacing: .04em; }
.pick-pop__title { margin-top: 6px; margin-bottom: 10px; font-size: clamp(26px, 6vw, 34px); line-height: 1.25; letter-spacing: -0.03em; text-wrap: balance; }
/* 추천 이유 · 한마디 */
.pick-pop__label { margin: 18px 0 4px; font-size: 16px; font-weight: 700; color: var(--muted); }
.pick-pop__why { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.6; color: var(--ink); }
.pick-pop__word { margin: 0; padding-left: 14px; border-left: 3px solid var(--orange); }
.pick-pop__word-text { margin: 0; font-size: 17px; line-height: 1.7; color: var(--ink); }
.pick-pop__close {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer;
  font-size: 26px; line-height: 1; color: var(--ink);
  background: rgba(255, 255, 255, .85); box-shadow: 0 4px 14px rgba(18, 35, 58, .2);
}
.pick-pop__close:hover { background: #FFFFFF; }
@media (prefers-reduced-motion: reduce) { .pick-pop__inner { transition: none; } }
.js .pick__final {
  /* site.js가 뒤집기 각도(--fr: -90 → 0)와 위치를 넣는다. 반쯤 돌았을 때부터 보인다 */
  opacity: var(--fin, 0);
  transform: perspective(1400px) translateY(var(--fy, 0px)) rotateY(calc(var(--fr, 0) * 1deg)) scale(var(--fs, 1));
  backface-visibility: hidden;
}
.pick.is-merged .pick__final { pointer-events: auto; }
/* 마지막 엽서가 나오면 무대 아래에 '더 내려가요' 표시 (사용자 요청). 첫 화면 스크롤 표시(마우스·꺾쇠·SCROLL)와 같은 모양,
   검은 바탕이라 옅은 흰색. 엽서와 겹칠 만큼 화면이 낮으면 site.js가 엽서를 그만큼 위로 올린다(lift) */
.pick__next {
  --sc: rgba(255, 255, 255, .78);
  position: absolute; left: 50%; bottom: clamp(12px, 2.5vh, 32px); z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  margin: 0; transform: translateX(-50%);
  font-size: 13px; font-weight: 600; line-height: 1; letter-spacing: .34em; text-indent: .34em; color: var(--sc);
  pointer-events: none;
  opacity: 0; transition: opacity .5s ease;
}
.pick.is-merged .pick__next { opacity: 1; }
html:not(.js) .pick__next { display: none; }
/* 아주 낮은 휴대폰 화면(카톡 막대가 보일 때 312×520): 엽서와 표시가 함께 들어가도록 마우스 그림은 빼고 꺾쇠·SCROLL만 */
@media (max-width: 599px) and (max-height: 560px) {
  .pick__next { bottom: 6px; gap: 6px; }
  .pick__next .intro__mouse { display: none; }
}

/* 카드가 모이면서 나오는 소개 글 */
.pick__intro {
  position: absolute; left: 50%; top: 50%; z-index: 4;
  width: min(1040px, calc(100% - 32px)); translate: -50% -50%;
  text-align: center; color: #FFFFFF;
  pointer-events: none;
}
.js .pick__intro {
  /* 스크롤하는 만큼 아래에서 떠오르고(--in 0→1), 더 내리면 위로 지나가며 사라진다(--out 0→1) */
  opacity: calc(1 - var(--outfade, 0));
  transform: translateY(calc((1 - var(--in, 0)) * 62vh - var(--out, 0) * 70vh));
}
/* 소개 글 뒤의 검은 띠: 위아래가 그라데이션으로 흐려져, 엽서 묶음 위에 떠 있는 것처럼 보인다 */
.js .pick__intro::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; width: 100vw; translate: -50% 0; top: -22vh; bottom: -22vh;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .88) 28%, #000000 42%, #000000 62%, rgba(0, 0, 0, .88) 76%, rgba(0, 0, 0, 0) 100%);
}
/* 안쪽 줄들은 위에서부터 차례로 따라 올라온다 (--d: 늦게 출발하는 정도) */
.js .pick__intro .rise-i {
  --p: clamp(0, calc(var(--in, 0) * 1.7 - var(--d, 0)), 1);
  opacity: var(--p);
  transform: translateY(calc((1 - var(--p)) * 48px));
}
.pick__intro-mark.rise-i { --d: 0; }
.pick__quote-box.rise-i { --d: .12; }
.pick__cols li:nth-child(1).rise-i { --d: .34; }
.pick__cols li:nth-child(2).rise-i { --d: .46; }
.pick__cols li:nth-child(3).rise-i { --d: .58; }
.pick.is-intro .pick__intro { pointer-events: auto; }
.pick__intro-mark { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 20px; }
.pick__intro-mark i { display: block; width: 12px; height: 12px; background: #F97316; }
.pick__intro-mark i:first-child { border-radius: 50%; }
.pick__intro-mark b { display: block; width: 66px; height: 2px; background: #F97316; }
.pick__quote-box { margin: 0; }
.pick__quote { margin: 0; font-size: clamp(22px, 3vw, 34px); font-weight: 700; line-height: 1.55; letter-spacing: -0.03em; }
@media (max-width: 600px) {
  .pick__quote .phrase { display: block; }   /* 휴대폰: 말 덩어리마다 한 줄씩 (네 줄) */
  .pick__quote br { display: none; }
}
.pick__cite { display: block; margin: 16px 0 0; font-size: 16px; font-style: normal; color: rgba(255, 255, 255, .72); }
.pick__cols {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  margin: clamp(36px, 7vh, 72px) 0 0; padding: 0; list-style: none; text-align: left;
}
.pick__cols li { padding-top: 18px; border-top: 2px solid #F97316; }
.pick__cols i { display: block; width: 12px; height: 12px; margin-bottom: 12px; background: #F97316; }
.pick__cols li:nth-child(1) i { border-radius: 50%; }
.pick__cols li:nth-child(2) i { height: 2px; margin-top: 5px; margin-bottom: 17px; width: 14px; }
.pick__cols strong { display: block; font-size: 18px; font-weight: 800; }
.pick__cols span { display: block; margin-top: 4px; font-size: 16px; color: rgba(255, 255, 255, .72); }
@media (max-width: 699px) {
  .pick__cols { grid-template-columns: 1fr; gap: 14px; }
  .pick__cols li { padding-top: 12px; }
}
html:not(.js) .pick__intro { position: relative; left: auto; top: auto; translate: none; margin: 0 auto; padding: 48px 0; }
.pick__final-mark { width: 48px; height: 48px; margin: 0 0 14px; border-radius: 30%; background: conic-gradient(#F97316 0 50%, #FDBA74 0); }
/* 자바스크립트가 없으면: 카드는 숨기고 마지막 카드만 보인다 */
html:not(.js) .pick__world, html:not(.js) .pick__headline { display: none; }
html:not(.js) .pick__final { opacity: 1; transform: none; }
@media (max-width: 899px) {
  .pcard, .pick__cover { --cw: clamp(84px, 25vw, 112px); }   /* 휴대폰에서도 엽서를 크게 (390px 화면에서 약 141×94px) */
  .pick__world, .pick__final { top: 57%; }   /* 휴대폰: 위 큰 제목 아래로 조금 내리되, 엽서를 잡기 쉽게 60% → 55% → 57%(살짝 내림) */
}

/* ---------- 카테고리 ---------- */
.cat { padding: clamp(150px, 26vh, 280px) 0; border-top: 1px solid var(--line); background: var(--paper); }
.cat:nth-of-type(odd) { background: var(--cream); }
/* 인터뷰 무대 바로 다음 칸: 마지막 인터뷰(크림색) 무대 아래쪽 색에서 시작해 경계선 없이 이어진다 */
.cat.cat--join {
  border-top: 0;
  min-height: 60vh; min-height: 60svh;
  padding-top: clamp(72px, 12vh, 120px);
  /* 무대 아래쪽의 진한 빛(가운데가 가장 진함)을 그대로 이어받아 아래로 갈수록 연해진다 */
  background:
    radial-gradient(ellipse 55% 55% at 50% 0%, rgba(243, 223, 191, .6) 0%, rgba(243, 223, 191, .32) 45%, rgba(243, 223, 191, 0) 100%),
    linear-gradient(180deg, #FCF0DC 0%, #FBEEDA 30%, var(--cream) 100%);
}
.cat__label { margin: 0; font-size: 16px; font-weight: 800; color: var(--orange-ink); letter-spacing: .08em; }
.cat__title { margin: 4px 0 8px; font-size: clamp(26px, 4vw, 36px); line-height: 1.25; color: var(--ink); letter-spacing: -0.03em; }
.cat__text { margin: 0; font-size: 16px; color: var(--muted); }

.is-reduced .fly { display: none; }

/* ---------- 커서를 바라보는 인물 (백록마케팅) ----------
   person-turn: 3D 모델을 좌우·위아래 각도별로 찍은 사진 133장.
   마우스 커서 쪽으로 몸을 돌리고, 위에서 내려다보거나 아래에서 올려다본 각도로 바뀐다 (site.js의 인물 방향 부분) */
.person__figure--turn { background: none; margin: 0; }
/* 오토바이처럼 가로로 넓은 3D 인물: 칸을 4:3으로 넓히고 조금 낮게 */
.person__figure--wide { aspect-ratio: 4 / 3; height: 62%; bottom: 21%; }
.person__figure--turn.person__figure--wide::after { width: 72%; }
@media (max-width: 899px) {
  .person__figure--wide { height: auto; width: min(94vw, 560px); min-height: 0; max-width: none; bottom: calc(var(--pad-y) + var(--chips-h) + 262px); }
}
/* 발밑 그림자 */
.person__figure--turn::after {
  content: ""; position: absolute; z-index: -1; left: 50%; bottom: 0;
  width: 30%; height: 4%; translate: -50% 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(18, 35, 58, .26), rgba(18, 35, 58, 0));
}
.person-turn__img {
  display: block; width: 100%; height: 100%; max-width: none; object-fit: contain;
  transform-origin: 50% 90%;
  pointer-events: none; -webkit-user-drag: none; user-select: none;
}
.person__ai-note {
  display: inline-block; margin: 6px 0 0; padding: 2px 10px; border-radius: 999px;
  font-size: 16px; font-weight: 700; color: var(--ink);
  background: rgba(255, 255, 255, .7);
}


/* =========================================================
   상세페이지 — 나의 제주찾기 (articles/find-my-jeju.html)
   서브메인 '03 나의 제주찾기'와 같은 크림 배경 · 하늘색 카드 · 남색 버튼을 쓴다
   ========================================================= */
.guide { background: #F7F3EC; }
.guide-sec { padding: clamp(64px, 10vh, 112px) 0; }

/* 첫 화면: 사진 위 흰 글자 (헤더 아래에서 시작해 헤더와 겹치지 않는다)
   높이는 화면에 맞추되(520~760px) 글이 더 길면 늘어난다. 카톡 글자 확대·영어·일본어판에서 높이가 정해져 있어
   제목 위가 잘리고 사진 출처가 버튼에 겹쳤다 (2026-10-28). 사진 출처도 버튼 아래 제자리에 둔다 */
.guide-hero {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(520px, calc(100vh - var(--hdr-h, 0px) - 44px), 760px); min-height: clamp(520px, calc(100svh - var(--hdr-h, 0px) - 44px), 760px);
  background: #0B2F5A; color: #FFFFFF;
}
.guide-hero__photo {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 50% 60%;
}
/* 아래로 갈수록 어둡게 해 흰 글자가 꽃·하늘 위에서도 읽히게 */
.guide-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 22, 44, .3) 0%, rgba(6, 22, 44, .12) 28%, rgba(6, 22, 44, .62) 60%, rgba(6, 22, 44, .88) 100%);
}
.guide-hero__inner {
  position: relative; z-index: 1; width: 100%;
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  padding-top: 48px; padding-bottom: clamp(24px, 4.3vw, 56px);   /* 아래 사진 출처까지 (전에는 출처 자리까지 72~104px) */
}
.guide-hero__title {
  margin: 6px 0 0; font-size: clamp(34px, 5.6vw, 64px); font-weight: 800; line-height: 1.2; letter-spacing: -0.04em;
  text-shadow: 0 2px 14px rgba(6, 22, 44, .5);
}
.guide-hero__lead {
  margin: 0; font-size: clamp(16px, 1.6vw, 20px); font-weight: 600; line-height: 1.6;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}
.guide-hero__note { margin: 0; font-size: 16px; font-weight: 700; color: var(--peach); }
.guide-hero__jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.guide-hero__credit {
  position: relative; z-index: 1; margin: 0; padding: 0 16px 12px;
  font-size: 14px; line-height: 1.5; text-align: right; color: rgba(255, 255, 255, .88);
}

/* ---------- 01 살고 싶은 동네 ---------- */
.towns__picker {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px;
  margin: clamp(24px, 4vh, 36px) 0 16px;
}
.towns__btn {
  display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px;
  border: 1.5px solid rgba(18, 35, 58, .16); border-radius: 999px; background: #FFFFFF;
  font: inherit; font-size: 16px; font-weight: 700; color: var(--ink); text-align: left; cursor: pointer;
  transition: border-color .3s ease, background-color .3s ease, color .3s ease;
}
.towns__btn:hover { border-color: var(--ink); }
.towns__btn-no { font-weight: 800; color: var(--orange-ink); }
.towns__btn[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: #FFFFFF; }
.towns__btn[aria-pressed="true"] .towns__btn-no { color: #FDBA74; }
@media (max-width: 760px) {
  .towns__picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 고른 동네: 서브메인 대표 카드와 같은 하늘색 판 */
.town {
  --town-pad: clamp(20px, 3vw, 36px);
  overflow: hidden; padding: var(--town-pad); border-radius: 22px; background: #DCEBF6;
}
.js .town:not(.is-active) { display: none; }
html:not(.js) .town + .town { margin-top: 16px; }
.town__info { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-bottom: 20px; }
.town__area { width: 100%; margin: 0; font-size: 16px; font-weight: 600; color: #3E4A59; }
.town__name { margin: 0; font-size: clamp(30px, 4vw, 44px); line-height: 1.2; letter-spacing: -0.04em; color: var(--ink); }
.town__desc { flex: 1 1 220px; margin: 0; font-size: 16px; color: #3E4A59; }
.town__type {
  margin: 0; padding: 4px 12px; border-radius: 999px; background: rgba(18, 35, 58, .08);
  font-size: 16px; font-weight: 700; color: var(--ink);
}

/* 명소 카드 5장: 옆으로 밀어서 넘긴다 (판 가장자리까지 이어져 다음 카드가 살짝 보인다) */
.spots {
  position: relative; list-style: none;
  margin: 0 calc(var(--town-pad) * -1); padding: 4px var(--town-pad) 8px;
  display: grid; grid-auto-flow: column; grid-auto-columns: min(86%, 340px); gap: 16px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding: 0 var(--town-pad);
  scrollbar-width: none;
}
.spots::-webkit-scrollbar { display: none; }
/* 마우스로 잡고 끌어 넘기기 (site.js, 사용자 요청 2026-10-26): 손 모양 커서, 끄는 동안은 카드 맞춤·글자 선택을 끈다 */
@media (hover: hover) and (pointer: fine) { .js .spots { cursor: grab; } }
.spots.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; -webkit-user-select: none; }
.spots.is-settling { scroll-snap-type: none; }   /* 놓은 뒤 다음 카드로 미끄러지는 동안 */
.spots.is-dragging a { cursor: grabbing; }
.spot {
  display: flex; flex-direction: column; overflow: hidden; scroll-snap-align: start;
  border-radius: 18px; background: #FFFFFF; box-shadow: 0 1px 0 rgba(18, 35, 58, .04);
}
.spot__photo { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: linear-gradient(135deg, var(--sky), #EEF6FC); }
.spot__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.spot__no {
  position: absolute; left: 12px; top: 12px; padding: 2px 12px; border-radius: 999px;
  font-size: 16px; font-weight: 800; color: #FFFFFF; background: var(--orange-ink);
}
/* 이중섭거리 팽나무(세로 사진): 아래 안내판이 보이게 조금 아래쪽을 보여 준다 */
.spot__photo--low img { object-position: 50% 78%; }
/* 누웨마루거리(제주관광공사 CC BY-NC-ND, '변경 금지')도 다른 카드처럼 칸을 채운다: 3:2 사진이라 양옆이 약 5%씩 가려진다.
   전에는 자르지 않고 전체를 보여 줬는데(위아래 어두운 띠) 사용자 요청으로 바꿨다 (2026-10-27). 파일 자체는 자르지 않았다 */
/* 쓸 수 있는 공개 사진이 없는 명소(너븐숭이 4·3기념관·애월 카페거리. 처음엔 누웨마루거리·도깨비도로도):
   사진 대신 하늘색 판에 이름을 크게 적는다 (2026-10-26. 전에는 'PHOTO ARCHIVE 사진 준비 중'이라 미완성 문구로 점검에 걸렸다).
   이름은 아래 카드 제목과 같아 화면 낭독에서는 뺀다(aria-hidden) */
.spot__plate {
  position: absolute; inset: 0; margin: 0; padding: 40px 24px 24px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: clamp(24px, 2.4vw, 30px); font-weight: 800; line-height: 1.3; letter-spacing: -0.02em; word-break: keep-all;
  color: var(--ink);
}
.spot__body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px 20px 20px; }
.spot__type { margin: 0; font-size: 16px; font-weight: 700; color: var(--orange-ink); }
.spot__name { margin: 0; font-size: clamp(20px, 1.8vw, 22px); font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.spot__desc { margin: 0; font-size: 16px; color: var(--muted); }
.spot__map {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: auto;
  font-size: 16px; font-weight: 700; color: var(--orange-ink); text-decoration: none;
}
.spot__map:hover { text-decoration: underline; }
.spot__credit { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }

/* 이전 · 다음 (인터뷰 슬라이드 화살표와 같은 모양) */
.towns__nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 20px; }
html:not(.js) .towns__picker, html:not(.js) .towns__nav { display: none; }
.towns__status { min-width: 12em; margin: 0; font-size: 16px; font-weight: 700; text-align: center; color: var(--ink); }
.towns__arrow {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  border: 1.5px solid var(--ink); background: rgba(255, 255, 255, .55); color: var(--ink);
  font: inherit; font-size: 22px; font-weight: 700; cursor: pointer;
  transition: background-color .3s ease, color .3s ease, transform .3s ease;
}
.towns__arrow:hover { background: var(--ink); color: #FFFFFF; }
.towns__arrow--prev:hover { transform: translateX(-3px); }
.towns__arrow--next:hover { transform: translateX(3px); }
.towns__arrow:disabled { opacity: .3; cursor: default; background: rgba(255, 255, 255, .4); color: var(--ink); transform: none; }
@media (max-width: 899px) {
  .towns__arrow { width: 48px; height: 48px; font-size: 20px; }
}

/* 동네 → 체크리스트로 넘어가는 띠 */
.guide-next { background: var(--ink); color: #FFFFFF; }
.guide-next__inner {
  display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
  padding-top: clamp(56px, 9vh, 96px); padding-bottom: clamp(56px, 9vh, 96px);
}
.guide-next__kicker { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: .04em; color: #FDBA74; }
.guide-next__text { margin: 0; font-size: clamp(22px, 3vw, 32px); font-weight: 800; line-height: 1.4; letter-spacing: -0.03em; }
.guide-next__btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; margin-top: 8px; padding: 0 24px; border-radius: 999px;
  background: #FFFFFF; color: var(--ink); font-size: 16px; font-weight: 700; text-decoration: none;
  transition: gap .3s ease;
}
.guide-next__btn:hover { gap: 14px; }

/* ---------- 02 제주살이 체크리스트 ---------- */
.guide-sec.check { background: var(--paper); }
.check__board {
  display: grid; grid-template-columns: 300px minmax(0, 1fr); align-items: start; gap: clamp(20px, 3vw, 40px);
  margin-top: clamp(24px, 4vh, 36px);
}
.check__summary { position: sticky; top: calc(var(--hdr-h, 0px) + 16px); padding: 24px; border-radius: 22px; background: #DCEBF6; }
.check__count { margin: 0; font-size: 18px; font-weight: 700; color: var(--ink); }
.check__done { font-size: 44px; font-weight: 800; letter-spacing: -0.03em; color: #A8380A; }   /* 하늘색 판 위에서 대비 5.3:1 (기본 주황잉크는 4.3:1) */
.check__bar { height: 10px; margin: 10px 0 14px; overflow: hidden; border-radius: 999px; background: rgba(18, 35, 58, .1); }
.check__fill { display: block; width: calc(var(--done, 0) * 100%); height: 100%; border-radius: inherit; background: var(--orange); transition: width .4s ease; }
.check__note, .check__save { margin: 0; font-size: 16px; color: #3E4A59; }
.check__save { margin-top: 12px; }
.check__tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.check__tool {
  min-height: 44px; padding: 0 18px; border: 1.5px solid var(--ink); border-radius: 999px; background: transparent;
  font: inherit; font-size: 16px; font-weight: 700; color: var(--ink); cursor: pointer;
}
.check__tool:hover { background: var(--ink); color: #FFFFFF; }
html:not(.js) .check__count, html:not(.js) .check__bar, html:not(.js) .check__tools,
html:not(.js) .check__save, html:not(.js) .check__group-count { display: none; }

.check__groups { display: flex; flex-direction: column; gap: 12px; }
.check__group { border-radius: 18px; background: #FFFFFF; box-shadow: 0 1px 0 rgba(18, 35, 58, .04), 0 0 0 1px var(--line); }
.check__group > summary {
  display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 0 20px;
  list-style: none; cursor: pointer;
  font-size: clamp(18px, 1.6vw, 20px); font-weight: 800; color: var(--ink);
}
.check__group > summary::-webkit-details-marker { display: none; }
/* 펼침 표시 (∨ / ∧) */
.check__group > summary::after {
  content: ""; flex: none; width: 10px; height: 10px; margin: -4px 4px 0 4px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .3s ease, margin .3s ease;
}
.check__group[open] > summary::after { transform: rotate(-135deg); margin-top: 6px; }
.check__group-no { font-size: 16px; color: var(--orange-ink); }
.check__group-title { flex: 1; }
.check__group-count { font-size: 16px; font-weight: 700; color: var(--muted); }
.check__list { list-style: none; margin: 0; padding: 0 12px 12px; }
.check__list li + li { border-top: 1px solid var(--line); }
.check__item {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; min-height: 52px; padding: 13px 10px;
  border: 0; border-radius: 12px; background: none;
  font: inherit; font-size: 16px; line-height: 1.6; color: var(--text); text-align: left; cursor: pointer;
}
.check__item:hover { background: var(--cream); }
.check__box {
  flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px;
  border: 2px solid var(--muted); border-radius: 7px; background: #FFFFFF;
  transition: background-color .2s ease, border-color .2s ease;
}
.check__item[aria-pressed="true"] .check__box { border-color: var(--orange-ink); background: var(--orange-ink); }
.check__item[aria-pressed="true"] .check__box::after {
  content: ""; width: 6px; height: 11px; margin-top: -3px;
  border-right: 2.5px solid #FFFFFF; border-bottom: 2.5px solid #FFFFFF; transform: rotate(45deg);
}
.check__item[aria-pressed="true"] .check__text { color: var(--muted); }
@media (max-width: 899px) {
  .check__board { grid-template-columns: 1fr; }
  .check__summary { position: static; }
}

/* ---------- 03 정책모음: 사용자가 준 PDF '제주 이주 청년 정책 링크 모음 2026'을 내려받는 카드 (2026-10-28) ----------
   파일은 files/jeju-youth-policy-links-2026.pdf (8쪽, 651KB, 한국어. 1쪽 작성 계정은 지운 판). 전에는 '정책 자료를 준비하고 있어요' 점선 카드(.policy__empty)였다 */
.policy__doc {
  display: flex; align-items: flex-start; gap: clamp(16px, 2.4vw, 28px);
  margin-top: clamp(24px, 4vh, 36px); padding: clamp(24px, 3vw, 40px); border-radius: 22px;
  background: #FFFFFF; border: 1.5px solid rgba(18, 35, 58, .1); box-shadow: 0 10px 28px rgba(18, 35, 58, .06);
}
/* 문서 모양 아이콘 (꾸밈) */
.policy__doc-icon {
  position: relative; flex: none; display: grid; place-items: end center; width: 56px; height: 70px; padding-bottom: 10px;
  border-radius: 8px 18px 8px 8px; background: linear-gradient(160deg, #FDBA74, var(--orange));
  font-size: 14px; font-weight: 800; letter-spacing: .04em; color: #FFFFFF;
}
.policy__doc-icon::before {
  content: ""; position: absolute; top: 0; right: 0; width: 18px; height: 18px;
  border-radius: 0 18px 0 8px; background: rgba(255, 255, 255, .45);
}
.policy__doc-body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.policy__doc-title { margin: 0; font-size: clamp(20px, 2vw, 24px); font-weight: 800; line-height: 1.35; color: var(--ink); }
.policy__doc-text { margin: 0; font-size: 16px; line-height: 1.7; color: var(--ink); }
.policy__doc-note { margin: 0; font-size: 16px; line-height: 1.6; color: var(--muted); }
.policy__doc-btn {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 48px; margin-top: 8px; padding: 8px 22px;
  border-radius: 999px; background: var(--ink); color: #FFFFFF; font-size: 16px; font-weight: 800; text-decoration: none;
  transition: background-color .3s ease;
}
.policy__doc-btn:hover { background: var(--orange-ink); }
.policy__doc-meta { font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .78); }
.policy__doc-arrow { flex: none; }
@media (max-width: 599px) {
  .policy__doc { flex-direction: column; }
  .policy__doc-icon { width: 48px; height: 60px; padding-bottom: 8px; font-size: 13px; }
}

/* ---------- 이 페이지에 관하여 · 사진 출처 ---------- */
.guide-about { padding: clamp(48px, 8vh, 80px) 0 clamp(64px, 10vh, 112px); border-top: 1px solid var(--line); background: var(--paper); }
.guide-about__title { margin: 0 0 12px; font-size: 20px; font-weight: 800; color: var(--ink); }
.guide-about__list { margin: 0; padding-left: 1.2em; font-size: 16px; color: var(--muted); }
.guide-about__list li + li { margin-top: 6px; }
.credits { margin: 24px 0 32px; border-radius: 18px; background: #F7F3EC; }
.credits > summary { display: flex; align-items: center; min-height: 52px; padding: 0 20px; font-size: 16px; font-weight: 700; color: var(--ink); cursor: pointer; }
.credits__list { list-style: none; margin: 0; padding: 0 20px 8px; }
.credits__list li { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; padding: 4px 0; border-top: 1px solid var(--line); font-size: 16px; }
.credits__place { font-weight: 700; color: var(--ink); }
.credits__who { margin-right: auto; color: var(--muted); }
.credits__list a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-weight: 600; color: var(--orange-ink); }
.credits__note { margin: 0; padding: 0 20px 16px; font-size: 16px; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .towns__btn, .towns__arrow, .guide-next__btn, .check__fill, .check__box, .check__group > summary::after { transition: none; }
  .towns__arrow:hover { transform: none; }
}

/* =========================================================================
   이주민 인터뷰 기사 (articles/*.html — <body class="page-interview">)
   - 위쪽은 서브메인 스타일이고, 여기서부터는 기사 4편 전용입니다.
   - 공통 틀(상단 바·헤더·푸터)은 서브메인 것을 그대로 쓰므로 기사 쪽 정의는 뺐습니다.
   - 서브메인과 이름이 겹치던 색 변수는 --iv-*, 클래스는 .iv-person*, .iv-credits*로 바꿨습니다.
   - 태그 이름으로 시작하는 규칙(body, a, p, img …)은 기사 페이지에서만 적용되도록 묶었습니다.
   - 뒤쪽 블록이 앞 규칙을 덮어쓰는 구조라 블록 순서를 바꾸지 마세요.
   ========================================================================= */

/* =========================================================
   이제주민 · 한경 웹진 — 공통 스타일 (모든 페이지 공용, 이 파일 하나만 사용)
   기준: 360px 휴대폰 → 1280px PC / 누르는 요소 44px↑ / 본문 16px↑ / 대비 4.5:1↑
   ========================================================= */
:root {
  /* 채널 팔레트 */
  --sky: #A9D4F5;        /* 메인 컬러 (배경용) */
  --sky-soft: #DCEEFB;
  --iv-orange: #F97316;     /* 서브 컬러 — 장식 전용 (흰 바탕 글자로 쓰면 대비 부족) */
  --orange-text: #B4410C;/* 글자·링크용 오렌지 (크림 바탕 대비 5.3:1) */
  --iv-peach: #FFD9BF;
  --iv-cream: #FFF8EC;
  --white: #FFFFFF;
  --iv-ink: #1C2733;        /* 본문 글자 */
  --ink-soft: #46525F;   /* 보조 글자 (크림 바탕 대비 7.3:1) */
  --iv-line: #E7DCC8;
  --sea: #1F4E79;        /* 인터뷰 인트로 바다색 (흰 글자 대비 8.6:1) */
  --sea-text: #D9E9F7;   /* 바다색 위 보조 글자 */

  --iv-font: "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
  --radius: 14px;
  --gutter: 16px;
  --tap: 44px;
}
body.page-interview {
  margin: 0;
  background: var(--iv-cream);
  color: var(--iv-ink);
  font-family: var(--iv-font);
  font-size: 16px;
  line-height: 1.7;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
:where(body.page-interview) img,
:where(body.page-interview) svg,
:where(body.page-interview) video { display: block; max-width: 100%; height: auto; }
:where(body.page-interview) a { color: inherit; }
:where(body.page-interview) a:focus-visible { outline: 3px solid var(--orange-text); outline-offset: 3px; border-radius: 4px; }
:where(body.page-interview) h1,
:where(body.page-interview) h2,
:where(body.page-interview) h3 { line-height: 1.3; margin: 0; letter-spacing: -0.01em; }
:where(body.page-interview) p { margin: 0 0 1em; }
:where(body.page-interview) :where(main, .ivnav) .container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
@media (min-width: 768px) {
  :root { --gutter: 32px; }
}
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--iv-ink); color: var(--white);
  padding: 12px 16px; z-index: 10;
}
.skip-link:focus { left: 8px; top: 8px; }
/* ---------- 공통 틀 1: 상단 바 ---------- */
/* ---------- 공통 틀 2: 헤더 + 메뉴 (휴대폰에서도 숨기지 않음) ---------- */
/* ---------- 공통 틀 3: 푸터 ---------- */
/* =========================================================
   서브메인
   ========================================================= */
/* 첫 화면: 섬으로 들어가는 지도 (헤더와 겹치지 않음) */
.hero { background: var(--sky); overflow: hidden; }
.hero .container {
  display: grid; gap: 24px;
  padding-top: 32px; padding-bottom: 36px;
}
.hero-kicker {
  display: inline-block;
  background: var(--white); color: var(--orange-text);
  font-size: 14px; font-weight: 800;
  padding: 4px 12px; border-radius: 999px;
  margin-bottom: 14px;
}
.hero-title {
  font-size: 32px; font-weight: 900; letter-spacing: -0.03em;
}
.hero-lead { margin-top: 12px; font-size: 17px; }
.map { position: relative; }
.stops { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.stops a {
  display: flex; align-items: center; gap: 12px;
  min-height: 56px;
  padding: 8px 14px;
  background: var(--white);
  border: 2px solid var(--iv-ink);
  border-radius: var(--radius);
  text-decoration: none; font-weight: 700;
  transition: transform .15s, box-shadow .15s;
}
.stops a:hover,
.stops a.is-active { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--iv-ink); }
.stop-num {
  flex: 0 0 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--sky); font-weight: 900;
}
.stop-place { display: block; font-size: 14px; font-weight: 500; color: var(--ink-soft); }
@media (min-width: 900px) {
  .hero .container { grid-template-columns: 1fr 1.25fr; align-items: center; padding-top: 56px; padding-bottom: 56px; }
  .hero-title { font-size: 48px; }
  .hero-text { grid-column: 1; }
  .map { grid-column: 2; grid-row: 1 / span 2; }
  .stops { grid-column: 1; }
}
/* 카테고리 섹션 */
.section { padding-top: 56px; scroll-margin-top: 8px; }
.section-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.section-num {
  font-size: 14px; font-weight: 900; color: var(--orange-text);
}
.section-title { font-size: 26px; font-weight: 900; }
.section-desc { flex: 1 0 100%; color: var(--ink-soft); margin: 0; }
.cards { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 600px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}
.card {
  background: var(--white);
  border: 2px solid var(--iv-ink);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .15s, box-shadow .15s;
}
.card:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--iv-ink); }
.card a { display: block; text-decoration: none; min-height: var(--tap); }
.card-thumb { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; background: var(--sky-soft); }
.card-thumb--empty {
  display: grid; place-items: center;
  color: var(--ink-soft); font-size: 14px; font-weight: 700;
  background: repeating-linear-gradient(-45deg, var(--sky-soft) 0 14px, var(--white) 14px 28px);
}
.card-thumb--peach { background: repeating-linear-gradient(-45deg, var(--iv-peach) 0 14px, var(--white) 14px 28px); }
.card-body { padding: 16px 18px 20px; }
.card-tag { font-size: 14px; font-weight: 800; color: var(--orange-text); }
.card-title { font-size: 20px; font-weight: 800; margin-top: 4px; }
.card-dek { color: var(--ink-soft); margin: 8px 0 0; }
/* 광고 표시 (협찬·광고 글) */
.ad-label {
  display: inline-block;
  border: 2px solid var(--iv-ink); border-radius: 6px;
  padding: 0 8px; margin-right: 6px;
  font-size: 14px; font-weight: 900; color: var(--iv-ink);
  background: var(--white);
}
/* =========================================================
   상세페이지 (기사) — 한 칼럼으로 인물의 이야기를 펼치는 구성
   대표 사진 → 머리(라벨·제목·부제·바이라인) → 리드 → 자기소개
   → 장(CHAPTER) 구성 → 짧은 문답 → 이 사람 · 만든 사람 → 다른 이야기
   ========================================================= */
.article-col { max-width: 720px; margin-left: auto; margin-right: auto; }
/* 대표 사진 (헤더와 겹치지 않고 헤더 아래에 놓임) */
.article-cover { margin: 0; }
.article-cover img,
.article-cover .figure-empty { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 0; }
@media (min-width: 768px) {
  .article-cover { padding: 32px var(--gutter) 0; max-width: 1200px; margin: 0 auto; }
  .article-cover img,
.article-cover .figure-empty { aspect-ratio: 16 / 9; border-radius: var(--radius); }
}
.article-cover figcaption { padding: 8px var(--gutter) 0; font-size: 14px; color: var(--ink-soft); }
@media (min-width: 768px) {
  .article-cover figcaption { padding-left: 0; padding-right: 0; }
}
/* 기사 머리 */
.article-head { padding-top: 32px; }
.breadcrumb { font-size: 14px; }
.breadcrumb a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 700; }
.article-cat {
  display: inline-block; margin-top: 4px;
  font-size: 14px; font-weight: 900; color: var(--iv-ink);
  background: var(--sky); padding: 2px 12px; border-radius: 999px;
}
.article-title { font-size: 30px; font-weight: 900; margin-top: 14px; letter-spacing: -0.03em; line-height: 1.3; }
.article-dek { font-size: 19px; font-weight: 700; color: var(--ink-soft); margin: 12px 0 0; line-height: 1.5; }
.article-dek .series { color: var(--orange-text); margin-right: 4px; }
.byline {
  list-style: none; margin: 24px 0 0; padding: 12px 0;
  border-top: 2px solid var(--iv-ink); border-bottom: 1px solid var(--iv-line);
  display: flex; flex-wrap: wrap; gap: 4px 18px;
  font-size: 16px;
}
.byline b { font-weight: 800; margin-right: 6px; }
@media (min-width: 900px) {
  .article-title { font-size: 44px; }
  .article-head { padding-top: 48px; }
}
/* 본문 */
.article-body { padding-top: 32px; font-size: 18px; line-height: 1.9; }
.article-body .lead { font-size: 20px; font-weight: 800; line-height: 1.75; margin-bottom: 1.4em; }
.article-body h2 { font-size: 26px; font-weight: 900; margin: 0 0 1em; line-height: 1.35; }
.article-body h3 {
  font-size: 20px; font-weight: 800; margin: 2em 0 0.7em;
  padding-left: 12px; border-left: 4px solid var(--iv-orange);
}
.chapter { padding-top: 8px; }
.chapter + .chapter { border-top: 2px solid var(--iv-ink); margin-top: 3em; padding-top: 2.4em; }
.chapter-label {
  display: block; margin-bottom: 6px;
  font-size: 14px; font-weight: 900; letter-spacing: 0.08em; color: var(--orange-text);
}
/* 문답: 질문은 굵게, 답은 바로 아래 일반 문단 */
.qa-q { font-weight: 800; margin-bottom: 0.4em; }
.qa-a { margin-bottom: 1.6em; }
/* 문장 속 강조 (인용 박스 대신) */
.emph {
  font-weight: 800;
  background: linear-gradient(transparent 58%, var(--iv-peach) 58%) no-repeat 0 0 / 100% 100%;
}
/* 본문 사진 (본문 폭, 사진 아래 짧은 캡션) */
.figure { margin: 2.2em 0; }
.figure img { width: 100%; border-radius: var(--radius); }
.figure figcaption { font-size: 14px; color: var(--ink-soft); margin-top: 8px; line-height: 1.6; }
.figure-empty {
  aspect-ratio: 16 / 9; width: 100%; border-radius: var(--radius);
  border: 2px dashed var(--ink-soft);
  display: grid; place-items: center; text-align: center; padding: 16px;
  color: var(--ink-soft); font-size: 15px; font-weight: 700; line-height: 1.6;
  background: var(--white);
}
.figure-empty--portrait { aspect-ratio: 4 / 5; max-width: 420px; margin: 0 auto; }
.video-link {
  display: flex; align-items: center; gap: 10px;
  min-height: var(--tap); padding: 10px 16px;
  border: 2px solid var(--iv-ink); border-radius: var(--radius);
  background: var(--white); font-weight: 800; text-decoration: none;
}
.video-link::before { content: "▶"; color: var(--orange-text); }
.placeholder { background: var(--sky-soft); border-radius: 6px; padding: 0 4px; color: var(--iv-ink); }
/* 다른 이야기 (사진 없는 카드: 라벨 · 제목 · 부제 · 날짜·글) */
.article-end { margin-top: 56px; padding-top: 28px; border-top: 2px solid var(--iv-ink); }
.article-end > h2 { font-size: 22px; font-weight: 900; margin-bottom: 16px; }
.card-meta { font-size: 16px; color: var(--ink-soft); margin: 10px 0 0; }
.back-link {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--tap); padding: 0 18px; margin-top: 24px;
  background: var(--iv-ink); color: var(--white);
  border-radius: 999px; font-weight: 800; text-decoration: none;
}
/* =========================================================
   인터뷰 상세 전용 (모든 인터뷰 기사가 같은 모양으로 사용)
   ① 인트로: 반은 무음 클립 / 반은 포인트 글자
   ② 인물 소개: 가운데 인물, 양옆 이름, 스크롤하면 키워드
   ③ 본문: 장 구성 + 강조 박스 + 타이핑 문장 + 영상
   ④ 추천 장소: 지도 핀을 누르면 설명 팝업
   ⑤ 다른 인터뷰이 쇼츠
   ========================================================= */
/* 스크롤하면 나타나기 — 스크립트가 꺼져 있으면 처음부터 보임 */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal.d2 { transition-delay: .15s; }
.js .reveal.d3 { transition-delay: .3s; }
.js .reveal.d4 { transition-delay: .45s; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}
.media-empty {
  width: 100%; height: 100%;
  display: grid; place-items: center; text-align: center; padding: 20px;
  border: 2px dashed currentColor; border-radius: var(--radius);
  font-size: 15px; font-weight: 700; line-height: 1.6;
}
/* ① 인트로 */
.story-intro { background: var(--sea); color: var(--white); }
.story-intro-grid { display: grid; }
.story-media { aspect-ratio: 4 / 5; padding: 16px; color: var(--sea-text); }
.story-media video,
.story-media img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }
.story-panel { padding: 8px var(--gutter) 40px; display: flex; flex-direction: column; justify-content: center; }
.story-label { font-size: 14px; font-weight: 900; letter-spacing: 0.08em; color: var(--iv-peach); }
.story-title {
  margin-top: 12px;
  font-size: 34px; font-weight: 900; line-height: 1.3; letter-spacing: -0.03em;
  text-decoration: underline; text-decoration-color: var(--iv-orange);
  text-decoration-thickness: 4px; text-underline-offset: 8px;
}
.story-dek { margin: 18px 0 0; font-size: 18px; font-weight: 700; color: var(--sea-text); line-height: 1.6; }
.story-meta { display: flex; align-items: center; gap: 12px; margin-top: 24px; font-size: 16px; color: var(--sea-text); }
.story-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: 0 0 44px;
  display: grid; place-items: center;
  background: var(--sky); color: var(--iv-ink); font-weight: 900;
}
.story-meta b { color: var(--white); display: block; }
.btn-light {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  min-height: var(--tap); margin-top: 28px; padding: 0 20px;
  background: var(--white); color: var(--iv-ink);
  border-radius: 999px; font-weight: 800; text-decoration: none;
}
.btn-light::before { content: "▶"; color: var(--orange-text); }
@media (min-width: 900px) {
  .story-intro-grid { grid-template-columns: 1fr 1fr; min-height: min(82vh, 760px); }
  .story-media { aspect-ratio: auto; padding: 24px; }
  .story-panel { padding: 56px 56px 56px 40px; }
  .story-title { font-size: 52px; }
}
/* ② 인물 소개 */
.iv-person {
  background-color: var(--sky);
  background-image: linear-gradient(var(--sky-soft) 1px, transparent 1px), linear-gradient(90deg, var(--sky-soft) 1px, transparent 1px);
  background-size: 40px 40px;
  padding: 48px 0 0;
  overflow: hidden;
}
.iv-person-stage { display: grid; gap: 16px; justify-items: center; text-align: center; }
.iv-person-name { font-size: 40px; font-weight: 900; letter-spacing: -0.03em; line-height: 1.2; }
.iv-person-role { font-size: 18px; font-weight: 800; }
.iv-person-figure { width: 100%; max-width: 360px; aspect-ratio: 4 / 5; margin: 0; color: var(--ink-soft); }
.iv-person-figure img { width: 100%; height: 100%; object-fit: contain; }
@media (min-width: 900px) {
  .iv-person-stage { grid-template-columns: 1fr minmax(320px, 420px) 1fr; align-items: center; }
  .iv-person-name { font-size: 64px; justify-self: end; display: flex; align-items: center; }
  .iv-person-name::after { content: ""; width: 72px; height: 6px; margin-left: 20px; background: var(--iv-orange); }
  .iv-person-role { font-size: 24px; justify-self: start; display: flex; align-items: center; gap: 20px; }
  .iv-person-role::before { content: ""; width: 72px; height: 6px; background: var(--iv-orange); }
  .iv-person-figure { max-width: 420px; }
}
.keywords { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.keywords li {
  background: var(--white); border: 2px solid var(--iv-ink); border-radius: 999px;
  padding: 6px 16px; font-size: 18px; font-weight: 800;
}
.keywords li::before { content: "#"; color: var(--orange-text); margin-right: 2px; }
.iv-person-story { max-width: 600px; margin: 20px auto 0; text-align: center; font-size: 18px; font-weight: 600; }
.iv-person-figure-wrap { position: relative; width: 100%; max-width: 360px; }
.iv-person-figure { max-width: none; }
.hotspots { display: grid; grid-template-columns: repeat(2, 1fr); margin: 24px 0 0; border-top: 2px solid var(--iv-ink); text-align: left; }
.hotspots div { padding: 12px 10px 14px; border-bottom: 1px solid var(--iv-ink); }
.hotspots div:nth-child(odd) { border-right: 1px solid var(--iv-ink); }
.hotspots dt { font-size: 14px; font-weight: 800; }
.hotspots dd { margin: 2px 0 0; font-size: 16px; font-weight: 700; }
@media (min-width: 900px) {
  .iv-person-figure-wrap { max-width: 420px; }
  .hotspots { position: absolute; inset: 0; margin: 0; border: 0; display: block; pointer-events: none; }
  .hotspots div { position: absolute; width: 190px; padding: 0 0 10px; border: 0; }
  .hotspots div:nth-child(odd) { border: 0; }
  .hotspots div::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--iv-ink); transform-origin: right; }
  .hotspots div::after { content: ""; position: absolute; bottom: -5px; width: 12px; height: 12px; border-radius: 50%; background: var(--iv-orange); border: 2px solid var(--iv-ink); }
  .hotspots div:nth-child(1) { top: 10%; right: 78%; text-align: right; }
  .hotspots div:nth-child(2) { bottom: 14%; right: 82%; text-align: right; }
  .hotspots div:nth-child(3) { top: 22%; left: 80%; }
  .hotspots div:nth-child(4) { bottom: 6%; left: 76%; }
  .hotspots div:nth-child(1)::after,
.hotspots div:nth-child(2)::after { right: -6px; }
  .hotspots div:nth-child(3)::after,
.hotspots div:nth-child(4)::after { left: -6px; }
  .hotspots div:nth-child(3)::before,
.hotspots div:nth-child(4)::before { transform-origin: left; }
  .iv-person-name { align-self: center; }
}
/* ③ 본문 추가 요소 */
.quote-box {
  margin: 2.2em 0; padding: 28px 22px;
  background: var(--white); border: 2px solid var(--iv-ink); border-radius: var(--radius);
  text-align: center; font-size: 21px; font-weight: 800; line-height: 1.6;
}
.quote-box p { margin: 0; }
.quote-box cite { display: block; margin-top: 10px; font-size: 16px; font-style: normal; color: var(--ink-soft); font-weight: 700; }
.typing {
  position: relative; display: block;
  margin: 2.4em 0; padding: 8px 0;
  font-size: 24px; font-weight: 900; line-height: 1.5; letter-spacing: -0.02em;
}
/* 강조 문장은 화면에 들어오면 문장 전체가 한 번에 떠오른다 (위 .reveal과 같은 움직임, 사용자 요청 2026-10-27).
   전에는 한 글자씩 써지는 타이핑 연출(깜빡이는 주황 커서)이었다 */
.js .typing { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.js .typing.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .typing { opacity: 1; transform: none; transition: none; }
}
@media (min-width: 900px) {
  .typing { font-size: 30px; }
}
.video-card { display: block; margin: 2.2em 0; text-decoration: none; }
.video-card-thumb {
  display: block; position: relative; aspect-ratio: 16 / 9;
  background: var(--sea); color: var(--sea-text); border-radius: var(--radius); overflow: hidden;
}
.video-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.video-card-thumb::after {
  content: "▶"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--white); color: var(--orange-text); font-size: 22px;
}
.video-card-cap { display: block; margin-top: 8px; font-size: 16px; font-weight: 800; }
.video-card-cap::after { content: " ↗"; }
.clip { margin: 2.2em 0; }
.clip video { width: 100%; border-radius: var(--radius); }
/* ④ 추천 장소 */
.places { border-top: 2px solid var(--iv-ink); margin-top: 3em; padding-top: 2.4em; }
.places-map { position: relative; border: 2px solid var(--iv-ink); border-radius: var(--radius); overflow: hidden; background: var(--sky); }
.places-map svg { width: 100%; }
.place-pin { cursor: pointer; }
.place-pin:focus-visible { outline: none; }
.place-popup {
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  background: var(--white); border: 2px solid var(--iv-ink); border-radius: var(--radius);
  box-shadow: 5px 5px 0 var(--iv-ink);
  padding: 16px 56px 16px 16px;
  font-size: 16px; line-height: 1.6;
}
.place-popup[hidden] { display: none; }
.place-popup h3 { font-size: 19px; margin: 0 0 4px; padding: 0; border: 0; }
.place-popup p { margin: 0; }
.popup-close {
  position: absolute; top: 4px; right: 4px;
  width: var(--tap); height: var(--tap);
  border: 0; background: transparent; color: var(--iv-ink);
  font-size: 24px; font-weight: 700; cursor: pointer; border-radius: 50%;
}
.popup-close:hover { background: var(--sky-soft); }
@media (min-width: 900px) {
  .place-popup { left: auto; width: 340px; top: 16px; bottom: auto; right: 16px; }
}
.place-list { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 12px; }
.place-item {
  display: grid; grid-template-columns: 36px 1fr; gap: 4px 12px;
  padding: 16px; background: var(--white);
  border: 2px solid var(--iv-ink); border-radius: var(--radius);
  scroll-margin-top: 16px;
}
.place-item:target,
.place-item.is-active { box-shadow: 5px 5px 0 var(--iv-orange); }
.place-item > *:not(.place-num) { grid-column: 2; }
.place-num {
  grid-row: span 3; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; background: var(--iv-orange); color: var(--iv-ink); font-weight: 900;
}
.place-item h3 { font-size: 19px; margin: 0; padding: 0; border: 0; }
.place-tag { font-size: 14px; font-weight: 800; color: var(--orange-text); }
.place-item p { margin: 0; font-size: 16px; line-height: 1.7; }
.place-say { font-weight: 700; }
.place-say::before { content: "“"; color: var(--orange-text); }
.place-say::after { content: "”"; color: var(--orange-text); }
.article-body .place-item h3,
.article-body .place-popup h3 { margin: 0; padding: 0; border: 0; }
/* ⑤ 다른 인터뷰이 쇼츠 — 아래 '이제주민 쇼츠'에서 정의 */
.shorts-wrap { background: var(--iv-ink); color: var(--white); margin-top: 64px; padding: 48px 0 56px; }
.shorts-head h2 { font-size: 26px; font-weight: 900; }
.shorts-head p { color: var(--sea-text); margin: 6px 0 0; }
.shorts-wrap .back-link { background: var(--white); color: var(--iv-ink); margin-top: 32px; }
.story-panel .breadcrumb a { color: var(--white); }
/* =========================================================
   모션 — 움직임 줄이기 설정을 켠 사람에게는 모두 멈춤
   A. 페이지 열릴 때 (CSS만)   B. 스크롤 위치에 맞춰 (CSS 스크롤 타임라인)
   C. 화면에 들어올 때 (site.js가 .is-visible 붙임)   D. 마우스 올릴 때
   ========================================================= */
/* 읽기 진행 막대: 스크롤 타임라인을 지원하는 브라우저에서만 보임 */
.progress { display: none; }
/* 흐르는 글자 띠 */
.marquee { overflow: hidden; border-top: 2px solid var(--iv-ink); border-bottom: 2px solid var(--iv-ink); background: var(--iv-cream); padding: 10px 0; }
.marquee-track { display: flex; width: max-content; }
.marquee-track span {
  font-size: 30px; font-weight: 900; letter-spacing: -0.02em; white-space: nowrap; padding-right: 28px;
  color: var(--iv-ink);
}
.marquee-track span:nth-child(even) { color: var(--orange-text); }
.marquee-track span::after { content: "✳"; margin-left: 28px; color: var(--iv-orange); }
@media (min-width: 900px) {
  .marquee-track span { font-size: 48px; }
}
/* 버튼 글자 굴리기 */
.btn-light,
.back-link { overflow: hidden; }
.btn-light span,
.back-link span { display: inline-block; text-shadow: 0 2.2em currentColor; }
/* 글자 하나씩 (site.js가 .char로 쪼갬) */
.split .char { display: inline-block; white-space: pre; }
@media (prefers-reduced-motion: no-preference) {
  /* ---- A. 페이지 열릴 때 ---- */
  @keyframes rise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
  @keyframes wipe { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes underline-in { from { text-decoration-color: transparent; } to { text-decoration-color: var(--iv-orange); } }
  .story-media { animation: wipe 1.1s cubic-bezier(.7,0,.2,1) both; }
  .story-panel > * { animation: rise .9s cubic-bezier(.2,.7,.2,1) both; }
  .story-panel > :nth-child(1) { animation-delay: .35s; }
  .story-panel > :nth-child(2) { animation-delay: .45s; }
  .story-panel > :nth-child(3) { animation: rise .9s cubic-bezier(.2,.7,.2,1) .55s both, underline-in .6s 1.4s both; }
  .story-panel > :nth-child(4) { animation-delay: .7s; }
  .story-panel > :nth-child(5) { animation-delay: .8s; }
  .story-panel > :nth-child(6) { animation-delay: .9s; }
  .hero-text > * { animation: rise .9s cubic-bezier(.2,.7,.2,1) both; }
  .hero-text > :nth-child(2) { animation-delay: .15s; }
  .hero-text > :nth-child(3) { animation-delay: .3s; }
  .stops li { animation: rise .8s cubic-bezier(.2,.7,.2,1) both; }
  .stops li:nth-child(1) { animation-delay: .5s; }
  .stops li:nth-child(2) { animation-delay: .62s; }
  .stops li:nth-child(3) { animation-delay: .74s; }
  .article-cover .figure-empty,
.article-cover img { animation: wipe 1.1s cubic-bezier(.7,0,.2,1) both; }
  .article-head .article-col > * { animation: rise .8s cubic-bezier(.2,.7,.2,1) .2s both; }
  /* 서브메인 지도: 물결 흐르는 뱃길 · 흔들리는 배 · 숨 쉬는 핀 */
  @keyframes sail { to { stroke-dashoffset: -120; } }
  @keyframes bob { 50% { transform: translateY(-6px) rotate(-3deg); } }
  @keyframes pulse { 50% { transform: scale(1.12); } }
  /* 흐르는 글자 띠 */
  @keyframes marquee { to { transform: translateX(-50%); } }
  .marquee-track { animation: marquee 28s linear infinite; }
  /* ---- C. 화면에 들어올 때 ---- */
  /* 이름 글자가 아래에서 하나씩 */
  .js .split .char { opacity: 0; transform: translateY(0.6em) rotate(8deg); transition: opacity .5s, transform .6s cubic-bezier(.2,.7,.2,1); }
  .js .split.is-visible .char { opacity: 1; transform: none; }
  .split .char:nth-child(2) { transition-delay: .05s; }
  .split .char:nth-child(3) { transition-delay: .1s; }
  .split .char:nth-child(4) { transition-delay: .15s; }
  .split .char:nth-child(5) { transition-delay: .2s; }
  .split .char:nth-child(6) { transition-delay: .25s; }
  .split .char:nth-child(7) { transition-delay: .3s; }
  .split .char:nth-child(8) { transition-delay: .35s; }
  .split .char:nth-child(n+9) { transition-delay: .4s; }
  .js .split.reveal { opacity: 1; transform: none; }
  /* 인물 둘레 라벨: 선이 그어진 뒤 글자가 나타남 */
  .js .hotspots.reveal { opacity: 1; transform: none; }
  .js .hotspots div { opacity: 0; transition: opacity .5s; }
  .js .hotspots.is-visible div { opacity: 1; }
  .hotspots.is-visible div:nth-child(2) { transition-delay: .2s; }
  .hotspots.is-visible div:nth-child(3) { transition-delay: .4s; }
  .hotspots.is-visible div:nth-child(4) { transition-delay: .6s; }
  @media (min-width: 900px) {
    .js .hotspots div::before { transform: scaleX(0); transition: transform .7s cubic-bezier(.7,0,.2,1) .3s; }
    .js .hotspots.is-visible div::before { transform: scaleX(1); }
    .hotspots.is-visible div:nth-child(2)::before { transition-delay: .5s; }
    .hotspots.is-visible div:nth-child(3)::before { transition-delay: .7s; }
    .hotspots.is-visible div:nth-child(4)::before { transition-delay: .9s; }
  }
  /* 키워드가 여러 방향에서 날아와 살짝 떠 있음 */
  @keyframes floaty { 50% { translate: 0 -6px; } }
  .js .keywords li.reveal { transform: translateX(-60px) rotate(-8deg); }
  .js .keywords li.reveal:nth-child(2) { transform: translateY(50px) rotate(6deg); }
  .js .keywords li.reveal:nth-child(3) { transform: translateX(60px) rotate(8deg); }
  .js .keywords li.reveal.is-visible { transform: none; }
  .keywords li { animation: floaty 3.2s ease-in-out infinite; }
  .keywords li:nth-child(2) { animation-delay: -1s; }
  .keywords li:nth-child(3) { animation-delay: -2s; }
  /* 인물 사진 은은하게 떠 있기 (회전과 따로 움직이도록 translate 사용) */
  @keyframes figure-float { 50% { translate: 0 -10px; } }
  .iv-person-turn { animation: figure-float 5s ease-in-out infinite; }
  /* 추천 장소 핀이 위에서 톡 떨어짐 */
  @keyframes drop { 0% { translate: 0 -60px; opacity: 0; } 70% { translate: 0 6px; opacity: 1; } 100% { translate: 0 0; opacity: 1; } }
  .js .places-map.reveal { opacity: 1; transform: none; }
  .js .places-map .place-pin { opacity: 0; }
  .js .places-map.is-visible .place-pin { animation: drop .7s cubic-bezier(.3,1.4,.5,1) both; }
  .js .places-map.is-visible .place-pin:nth-of-type(2) { animation-delay: .15s; }
  .js .places-map.is-visible .place-pin:nth-of-type(3) { animation-delay: .3s; }
  .js .places-map.is-visible .place-pin:nth-of-type(4) { animation-delay: .45s; }
  @keyframes pop { from { opacity: 0; transform: scale(.9) translateY(10px); } to { opacity: 1; transform: none; } }
  .place-popup:not([hidden]) { animation: pop .35s cubic-bezier(.2,.9,.3,1.2) both; }
  /* 카드·쇼츠 순차 등장 */
  /* ---- D. 마우스 올릴 때 ---- */
  .btn-light span,
.back-link span { transition: transform .4s cubic-bezier(.7,0,.2,1); }
  .btn-light:hover span,
.back-link:hover span { transform: translateY(-2.2em); }
  .video-card-thumb::after { transition: transform .3s; }
  .video-card:hover .video-card-thumb::after { transform: translate(-50%, -50%) scale(1.15); }
  /* ---- B. 스크롤 위치에 맞춰 (지원 브라우저: 크롬·엣지·사파리 최신) ---- */
  @supports (animation-timeline: view()) {
    .progress {
      display: block; position: fixed; z-index: 20; left: 0; right: 0; top: 0; height: 4px;
      background: var(--iv-orange); transform-origin: left;
      animation: progress linear both; animation-timeline: scroll(root);
    }
    @keyframes progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    /* 인트로가 화면 위로 빠질 때 사진은 작아지고 글자는 떠오름 */
    .story-media video,
.story-media img,
.story-media .media-empty {
      animation: shrink linear both; animation-timeline: view(); animation-range: exit 0% exit 100%;
    }
    @keyframes shrink { to { transform: scale(.86); opacity: .5; } }
    /* 인물 사진: 스크롤에 따라 좌우로 도는 3D 느낌 */
    .iv-person-figure { perspective: 900px; }
    .iv-person-turn {
      animation: figure-float 5s ease-in-out infinite, turn linear both;
      animation-timeline: auto, view(); animation-range: normal, cover 0% cover 100%;
    }
    @keyframes turn {
      from { transform: rotateY(-28deg) scale(.92); }
      50% { transform: rotateY(0) scale(1); }
      to { transform: rotateY(24deg) scale(.95); }
    }
    /* 글자 띠는 스크롤 방향으로 더 밀림 */
    .marquee-track span { display: inline-block; animation: tilt linear both; animation-timeline: view(); }
    @keyframes tilt { from { transform: skewX(-14deg); } to { transform: skewX(14deg); } }
    /* 본문 사진: 아래에서 위로 걷히며 등장 */
    .article-body .figure img,
.article-body .figure-empty,
.video-card-thumb {
      animation: wipe linear both; animation-timeline: view(); animation-range: entry 0% entry 90%;
    }
    /* 장 제목: 옆에서 밀려 들어옴 */
    .chapter h2,
.places h2 { animation: slide-in linear both; animation-timeline: view(); animation-range: entry 10% cover 30%; }
    @keyframes slide-in { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
    /* 강조 문장: 읽는 위치에 맞춰 형광펜이 칠해짐 */
    .emph { animation: marker linear both; animation-timeline: view(); animation-range: entry 60% cover 50%; }
    @keyframes marker { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
    /* 강조 박스: 살짝 커지며 등장 */
    .quote-box { animation: grow-in linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
    @keyframes grow-in { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
  }
}
/* =========================================================
   깔끔한 편집 톤 (the-edit 참고) — 위의 같은 이름 규칙을 덮어씀
   흰 바탕 · 가는 선 · 넉넉한 여백 · 한 칼럼. 굵은 테두리와 색 면은 덜어냄
   ========================================================= */
:root {
  --iv-paper: #FFFFFF;
  --rule: #E3E6EA;      /* 가는 구분선 */
  --rule-strong: #C9CED4;
  --mute-bg: #F3F5F7;   /* 사진 자리 등 옅은 면 */
}
body.page-interview { background: var(--iv-paper); }
/* 카드 (서브메인·상세페이지 공통) */
.card { border: 1px solid var(--rule); border-radius: 8px; }
.card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(28, 39, 51, .08); }
/* 공통 버튼 */
.back-link { background: var(--iv-ink); }
.btn-light { background: transparent; color: var(--iv-ink); border: 1px solid var(--iv-ink); }
/* ② 인물 소개 */
.iv-person { background: var(--iv-paper); background-image: none; padding: 72px 0 64px; border-bottom: 1px solid var(--rule); }
.iv-person-name { font-size: 36px; }
.iv-person-role { color: var(--ink-soft); font-weight: 700; }
.iv-person-figure .media-empty { border: 1px dashed var(--rule-strong); background: var(--mute-bg); border-radius: 4px; }
.hotspots { border-top: 1px solid var(--rule); }
.hotspots div { border-bottom: 1px solid var(--rule); }
.hotspots div:nth-child(odd) { border-right: 1px solid var(--rule); }
.hotspots dt { color: var(--ink-soft); font-weight: 700; }
.hotspots dd { font-weight: 800; }
.keywords { gap: 4px 18px; }
.keywords li { background: none; border: 0; border-radius: 0; padding: 0; font-size: 17px; font-weight: 700; color: var(--ink-soft); }
.iv-person-story { color: var(--ink-soft); font-weight: 500; font-size: 17px; line-height: 1.8; }
@media (min-width: 900px) {
  .iv-person-name { font-size: 56px; }
  .iv-person-name::after,
.iv-person-role::before { width: 56px; height: 2px; background: var(--rule-strong); }
  .iv-person-role { font-size: 20px; }
  .hotspots { border: 0; }
  .hotspots div,
.hotspots div:nth-child(odd) { border: 0; }
  .hotspots div::before { height: 1px; background: var(--rule-strong); }
  .hotspots div::after { width: 8px; height: 8px; bottom: -4px; border: 0; background: var(--iv-orange); }
  .hotspots div:nth-child(1)::after,
.hotspots div:nth-child(2)::after { right: -4px; }
  .hotspots div:nth-child(3)::after,
.hotspots div:nth-child(4)::after { left: -4px; }
}
/* 휴대폰: 인물 사진 아래 네 칸을 시안처럼 흰 카드로 (사용자가 준 시안, 2026-10-28. 전에는 가는 선으로 나눈 표)
   둥근 흰 카드 + 옅은 그림자, 왼쪽에 살구색 동그라미 속 주황 아이콘, 오른쪽에 작은 회색 이름과 굵은 값. 두 칸씩 두 줄.
   아이콘은 칸마다 붙인 클래스(hot-pin 위치·hot-music 음표·hot-laptop 노트북·hot-house 집·hot-cap 학사모·hot-school 학교·hot-flag 깃발·
   hot-money 지폐·hot-store 가게·hot-briefcase 가방·hot-paw 발자국)가 고른다. 세 언어 기사가 같은 클래스. 그림은 24×24 SVG(주황 #F97316)
   PC(900px 이상)는 전처럼 사진 둘레에 선으로 붙은 글자 */
.hot-pin { --hot-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23F97316' fill-rule='evenodd' d='M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E"); }
.hot-music { --hot-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23F97316' fill-rule='evenodd' d='M20 3 9 5.2v10.1a3.3 3.3 0 1 0 2 3V9.6l7-1.3v5a3.3 3.3 0 1 0 2 3V3z'/%3E%3C/svg%3E"); }
.hot-laptop { --hot-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23F97316' fill-rule='evenodd' d='M5 4h14a2 2 0 0 1 2 2v9H3V6a2 2 0 0 1 2-2zm.5 2.5v6h13v-6zM1 17h22a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2z'/%3E%3C/svg%3E"); }
.hot-house { --hot-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23F97316' fill-rule='evenodd' d='M12 3 1.5 12H5v8.5h5.5V15h3v5.5H19V12h3.5z'/%3E%3C/svg%3E"); }
.hot-cap { --hot-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23F97316' fill-rule='evenodd' d='M12 3 .5 9 12 15l9-4.7V16h2V9zM5 12.6v4c0 1.7 3.1 3.4 7 3.4s7-1.7 7-3.4v-4l-7 3.6z'/%3E%3C/svg%3E"); }
.hot-school { --hot-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23F97316' fill-rule='evenodd' d='M12 2 2 7v2h20V7zM4 10.5V18h3v-7.5zm6.5 0V18h3v-7.5zm6.5 0V18h3v-7.5zM2 19.5h20V22H2z'/%3E%3C/svg%3E"); }
.hot-flag { --hot-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23F97316' fill-rule='evenodd' d='M5 2h2v20H5zm3.5 1H20l-3 4.5 3 4.5H8.5z'/%3E%3C/svg%3E"); }
.hot-money { --hot-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23F97316' fill-rule='evenodd' d='M2 6h20v12H2zm10 3a3 3 0 1 0 0 6 3 3 0 0 0 0-6zM4.5 8.5v7H6v-7zm13.5 0v7h1.5v-7z'/%3E%3C/svg%3E"); }
.hot-store { --hot-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23F97316' fill-rule='evenodd' d='M3 3h18l1.5 6a3 3 0 0 1-5.25 2 3 3 0 0 1-5.25 0 3 3 0 0 1-5.25 0A3 3 0 0 1 1.5 9zm.5 9.8V21H10v-6h4v6h6.5v-8.2a4.6 4.6 0 0 1-3.25-.6 4.6 4.6 0 0 1-5.25 0 4.6 4.6 0 0 1-5.25 0 4.6 4.6 0 0 1-3.25.6z'/%3E%3C/svg%3E"); }
.hot-briefcase { --hot-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23F97316' fill-rule='evenodd' d='M9 3h6a2 2 0 0 1 2 2v1h3a2 2 0 0 1 2 2v4H2V8a2 2 0 0 1 2-2h3V5a2 2 0 0 1 2-2zm.5 2v1h5V5zM2 13.5h8.5V15h3v-1.5H22V19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2z'/%3E%3C/svg%3E"); }
.hot-paw { --hot-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23F97316' fill-rule='evenodd' d='M3 10.5a2 2.6 0 1 0 4 0a2 2.6 0 1 0 -4 0zM7.3 6a2 2.6 0 1 0 4 0a2 2.6 0 1 0 -4 0zM12.7 6a2 2.6 0 1 0 4 0a2 2.6 0 1 0 -4 0zM17 10.5a2 2.6 0 1 0 4 0a2 2.6 0 1 0 -4 0zM12 12.5c-3.3 0-6.5 3.6-6.5 6.2 0 1.6 1.4 2.6 3 2.6 1.4 0 2.3-.7 3.5-.7s2.1.7 3.5.7c1.6 0 3-1 3-2.6 0-2.6-3.2-6.2-6.5-6.2z'/%3E%3C/svg%3E"); }
@media (max-width: 899px) {
  /* 두 칸씩 두 줄. 줄마다 칸 폭은 site.js('기사 인물 소개 네 칸')가 글 길이에 맞춰 나눈다 (시안처럼 글이 긴 칸이 더 넓다) */
  .hotspots { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; border: 0; }
  .hotspots div,
  .hotspots div:nth-child(odd) {
    flex: 1 1 calc(50% - 5px); min-width: 0;
    display: grid; grid-template-columns: 40px 1fr; column-gap: 10px; align-items: center; align-content: center;
    padding: 12px; border: 0; border-radius: 14px; background: #FFFFFF;
    box-shadow: 0 6px 18px rgba(28, 39, 51, .07);
  }
  .hotspots div::before {
    content: ""; grid-row: 1 / span 2; width: 40px; height: 40px; border-radius: 50%;
    background: var(--hot-icon, none) center / 20px no-repeat, #FFEDE0;
  }
  .hotspots dt { font-size: 14px; line-height: 1.35; }
  .hotspots dd { margin: 2px 0 0; font-size: 16px; line-height: 1.35; }
  .hotspots dt, .hotspots dd { overflow-wrap: break-word; }   /* 칸보다 긴 낱말만 마지막 수단으로 끊는다 */
  /* site.js가 폭을 잴 때만 잠깐 (한 줄로 썼을 때 / 가장 좁게) */
  .hotspots.is-fit-max div, .hotspots.is-fit-min div { flex: none; }
  .hotspots.is-fit-max div, .hotspots.is-fit-max dt, .hotspots.is-fit-max dd { width: max-content; }
  .hotspots.is-fit-min dt, .hotspots.is-fit-min dd { width: min-content; }
}
/* ③ 본문 */
.article-col { max-width: 680px; }
/* 줄 간격: 사용자 요청으로 좁혔다 (2026-10-26. 본문 1.95 → 1.75, 첫 문단 1.85 → 1.7) */
.article-body { padding-top: 56px; font-size: 17px; line-height: 1.75; }
@media (min-width: 900px) {
  .article-body { font-size: 18px; }
}
.article-body .lead { font-size: 19px; font-weight: 700; line-height: 1.7; }
.article-body h2 { font-size: 24px; font-weight: 800; }
.chapter + .chapter { border-top: 1px solid var(--rule); }
.quote-box {
  background: none; border: 0; border-radius: 0;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: 28px 0; text-align: left; font-size: 22px; line-height: 1.55;
}
.quote-box cite { font-size: 15px; }
.emph { background: linear-gradient(transparent 72%, var(--iv-peach) 72%) no-repeat 0 0 / 100% 100%; }
.typing {
  font-size: 22px; font-weight: 800; line-height: 1.6;
  padding: 4px 0 4px 18px; border-left: 3px solid var(--iv-orange);
}
@media (min-width: 900px) {
  .typing { font-size: 25px; }
}
.figure img,
.figure-empty,
.article-cover img,
.article-cover .figure-empty { border-radius: 4px; }
.figure-empty { border: 1px dashed var(--rule-strong); background: var(--mute-bg); }
.figure figcaption { font-size: 14px; }
.video-card-thumb { border-radius: 4px; background: var(--mute-bg); }
.video-card-thumb::after { border: 1px solid var(--rule); }
.byline { border-top: 1px solid var(--iv-ink); }
/* ④ 장소 지도 */
.places { border-top: 1px solid var(--rule); }
.places-map { border: 1px solid var(--rule); border-radius: 8px; background: var(--sky-soft); }
.place-popup { border: 1px solid var(--rule); border-radius: 8px; box-shadow: 0 14px 36px rgba(28, 39, 51, .16); }
.place-list { gap: 0; border-top: 1px solid var(--rule); }
.place-item { background: none; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; padding: 18px 4px; }
.place-item:target,
.place-item.is-active { box-shadow: none; background: var(--iv-cream); }
.place-num { width: 28px; height: 28px; font-size: 14px; }
.place-item { grid-template-columns: 28px 1fr; }
/* ⑤ 다른 이주민의 이야기 */
.shorts-wrap { background: var(--iv-paper); color: var(--iv-ink); border-top: 1px solid var(--rule); }
.shorts-head p { color: var(--ink-soft); }
.shorts-wrap .back-link { background: var(--iv-ink); color: var(--iv-paper); }
@media (prefers-reduced-motion: no-preference) {
  @keyframes turn {
    from { transform: rotateY(-12deg) scale(.97); }
    50% { transform: rotateY(0) scale(1); }
    to { transform: rotateY(10deg) scale(.98); }
  }
}
.iv-person-turn { height: 100%; }
/* =========================================================
   ⑤ 이제주민 쇼츠 — 세로 카드 위에 이름·한마디를 얹고 옆으로 넘김
   (페이지는 가로로 밀리지 않고, 카드 줄 안에서만 넘어감)
   ========================================================= */
.shorts-wrap { background: var(--mute-bg); border-top: 0; margin-top: 72px; padding: 56px 0 64px; }
.shorts-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.shorts-head h2 { font-size: 26px; font-weight: 900; }
.shorts-head p { margin: 6px 0 0; color: var(--ink-soft); }
@media (min-width: 900px) {
  .shorts-head h2 { font-size: 32px; }
}
.reels-nav { display: flex; gap: 8px; flex: 0 0 auto; }
.reels-nav[hidden] { display: none; }
.reels-btn {
  width: var(--tap); height: var(--tap); border-radius: 50%;
  border: 1px solid var(--iv-ink); background: var(--iv-paper); color: var(--iv-ink);
  font-size: 18px; font-weight: 700; cursor: pointer;
}
.reels-btn:hover:not(:disabled) { background: var(--iv-ink); color: var(--iv-paper); }
.reels-btn:disabled { opacity: .35; cursor: default; }
.reels-btn:focus-visible { outline: 3px solid var(--orange-text); outline-offset: 2px; }
.reels {
  list-style: none; margin: 28px 0 0; padding: 0 0 4px;
  display: grid; grid-auto-flow: column; grid-auto-columns: 72%; gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.reels::-webkit-scrollbar { display: none; }
@media (min-width: 600px) {
  .reels { grid-auto-columns: calc((100% - 32px) / 3); }
}
@media (min-width: 1000px) {
  .reels { grid-auto-columns: calc((100% - 60px) / 4); gap: 20px; }
}
.reel { scroll-snap-align: start; }
.reel a { display: block; color: var(--iv-paper); text-decoration: none; border-radius: 6px; }
.reel-frame {
  position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 6px;
  background: linear-gradient(160deg, #4A7CA6 0%, var(--sea) 55%, #142F4A 100%);
}
.reel-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
/* 글자가 잘 읽히도록 위·아래 어둡게 */
.reel-frame::before,
.reel-frame::after { content: ""; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; }
.reel-frame::before { top: 0; height: 22%; background: linear-gradient(rgba(12, 18, 28, .55), transparent); }
.reel-frame::after { bottom: 0; height: 62%; background: linear-gradient(transparent, rgba(16, 26, 40, .78) 40%, rgba(10, 16, 26, .96)); }
/* 글자가 이미 들어간 완성 썸네일: 위·아래 어둡게 하는 막을 끔 */
.reel-frame.reel-frame--thumb::before,
.reel-frame.reel-frame--thumb::after { display: none; }
/* 공개 예정 티저 카드: 사람 실루엣만 있는 검은 카드 (링크 없음)
   10/26 점검의 '미완성 문구'로 지웠다가 사용자 요청으로 되돌렸다 (2026-10-27) */
.reel--soon { cursor: default; }
.reel-frame.reel-frame--soon {
  background: radial-gradient(ellipse at 50% 16%, rgba(255, 255, 255, .13), transparent 58%), #0A0E14;
  color: #fff;
}
.reel-frame.reel-frame--soon::before,
.reel-frame.reel-frame--soon::after { display: none; }
.soon-figure { position: absolute; left: 50%; top: 24%; width: 64%; height: 50%; transform: translateX(-50%); }
.soon-figure::before,
.soon-figure::after { content: ""; position: absolute; background: linear-gradient(#262F3C, #151B24); }
.soon-figure::before { top: 0; left: 50%; width: 42%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; }
.soon-figure::after { left: 0; right: 0; top: 36%; height: 220%; border-radius: 50% 50% 0 0 / 14% 14% 0 0; }
.soon-label {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 15%;
  text-align: center; font-size: 16px; font-weight: 900; letter-spacing: .16em; color: #fff;
}
.soon-sub { position: absolute; z-index: 2; left: 0; right: 0; bottom: 9%; text-align: center; font-size: 16px; font-weight: 600; color: #B8C0CC; }
.reel-hint { position: absolute; left: 0; right: 0; top: 34%; text-align: center; font-size: 14px; font-weight: 700; color: var(--sea-text); }
.reel-series {
  position: absolute; z-index: 2; left: 0; right: 0; top: 7%;
  text-align: center; font-size: 14px; font-weight: 600; color: var(--iv-paper);
}
.reel-info { position: absolute; z-index: 2; left: 9%; right: 9%; bottom: 9%; display: block; }
.reel-who { display: block; font-size: 14px; color: var(--iv-paper); }
.reel-who b { font-weight: 800; }
.reel-title { display: block; margin-top: 8px; font-size: 21px; font-weight: 900; line-height: 1.32; letter-spacing: -0.02em; }
.reel-title em { display: block; font-style: normal; color: var(--sky); }
.reel-brand { display: block; margin-top: 16px; text-align: center; font-size: 16px; font-weight: 900; letter-spacing: -0.02em; }
.reel-brand::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 2px; border-radius: 50%; background: var(--iv-orange); vertical-align: top; }
@media (min-width: 1000px) {
  .reel-title { font-size: 22px; }
}
.reel a:focus-visible { outline: 3px solid var(--orange-text); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .reel a:hover .reel-frame img { transform: scale(1.05); }
  .reel-frame { transition: transform .3s ease; }
  .reel a:hover .reel-frame { transform: translateY(-4px); }
  .reels .reveal:nth-child(2) { transition-delay: .08s; }
  .reels .reveal:nth-child(3) { transition-delay: .16s; }
  .reels .reveal:nth-child(4) { transition-delay: .24s; }
}
.shorts-wrap .back-link { margin-top: 36px; }
/* =========================================================
   ① 인트로 (최종) — the-edit 첫 화면 구성
   왼쪽 반: 사진·무음 클립이 꽉 참 / 오른쪽 반: 파란 면에 카테고리·밑줄 제목·부제·날짜, 오른쪽 아래 글쓴이
   공통 헤더는 기준대로 이 화면 위에 따로 있고, 사진과 겹치지 않음
   ========================================================= */
:root { --intro: #1B5594; }
/* 흰 글자 대비 7.5:1 */
.story-intro { background: var(--intro); color: var(--iv-paper); border-bottom: 0; }
.story-intro-grid { display: grid; }
.story-media { aspect-ratio: 4 / 5; padding: 0; color: var(--sea-text); background: #10365E; }
.story-media video,
.story-media img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.story-media .media-empty { border: 0; border-radius: 0; background: #10365E; color: var(--sea-text); }
.story-panel {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 40px var(--gutter) 32px;
}
.story-label {
  display: inline-flex; align-items: center; min-height: var(--tap);
  font-size: 15px; font-weight: 900; letter-spacing: 0.06em;
  color: var(--iv-paper); text-decoration: none;
}
.story-label:hover { text-decoration: underline; }
.story-title {
  margin-top: 6px;
  font-size: 34px; font-weight: 900; line-height: 1.32; letter-spacing: -0.035em;
  color: var(--iv-paper);
  text-decoration: underline; text-decoration-color: var(--iv-paper);
  text-decoration-thickness: 3px; text-underline-offset: 8px;
  text-wrap: balance;
}
.story-dek { margin: 22px 0 0; font-size: 17px; font-weight: 700; color: var(--iv-paper); line-height: 1.6; }
.story-date { margin: 18px 0 0; font-size: 16px; color: var(--sea-text); font-variant-numeric: tabular-nums; }
.story-video {
  display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); margin-top: 12px;
  font-size: 16px; font-weight: 700; color: var(--iv-paper); text-underline-offset: 4px;
}
.story-video::before { content: "▶"; font-size: 13px; }
.story-author {
  align-self: flex-end; margin-top: 28px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.story-avatar {
  flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
  display: grid; place-items: center;
  background: var(--iv-paper); color: var(--intro); font-size: 20px; font-weight: 900;
}
.story-author-name { font-size: 16px; font-weight: 800; color: var(--iv-paper); }
@media (min-width: 900px) {
  .story-intro-grid { grid-template-columns: 1fr 1fr; min-height: min(88vh, 860px); }
  .story-media { aspect-ratio: auto; }
  .story-panel { padding: 10% 6% 44px 6%; }
  .story-title { font-size: clamp(40px, 4.2vw, 68px); text-decoration-thickness: 4px; text-underline-offset: 12px; }
  .story-dek { margin-top: 30px; font-size: 19px; }
  .story-author { margin-top: auto; padding-top: 40px; }
  .story-avatar { width: 80px; height: 80px; }
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes underline-in { from { text-decoration-color: transparent; } to { text-decoration-color: var(--iv-paper); } }
  .story-panel > * { animation: rise .9s cubic-bezier(.2,.7,.2,1) both; }
  .story-panel > :nth-child(1) { animation-delay: .35s; }
  .story-panel > :nth-child(2) { animation: rise .9s cubic-bezier(.2,.7,.2,1) .45s both, underline-in .8s 1.3s both; }
  .story-panel > :nth-child(3) { animation-delay: .6s; }
  .story-panel > :nth-child(4) { animation-delay: .7s; }
  .story-panel > :nth-child(5) { animation-delay: .8s; }
  .story-panel > :nth-child(6) { animation-delay: 1s; }
}
/* 첫 화면 사진: 두 사람이 가운데 오도록 */
.story-media img { object-position: 48% 45%; }
/* =========================================================
   일러스트 제주 지도 (images/jeju-map.svg) + 페이지별 겹침 레이어
   바탕 그림은 서브메인·상세페이지가 같이 쓰고, 핀·길·배는 레이어에 그림
   ========================================================= */
.map,
.places-map { position: relative; }
.map-base { display: block; width: 100%; height: auto; }
.map-layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.map { border-radius: 12px; overflow: hidden; border: 2px solid var(--iv-ink); background: #CFEAF8; }
.places-map { background: #CFEAF8; }
/* 서브메인 레이어 */
/* 상세페이지 레이어 */
@media (prefers-reduced-motion: no-preference) {
  @keyframes gust { 0% { stroke-dashoffset: 260; opacity: 0; } 30% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
}
/* =========================================================
   등고선 제주 지도 — 크림색 면에 주황 해안선·등고선, 마을은 빈 동그라미,
   이야기가 있는 곳은 빛나는 불빛 (서브메인·상세페이지 공통)
   ========================================================= */
.map,
.places-map { position: relative; background: #FBEEE2; border: 0; border-radius: 16px; overflow: hidden; }
.map-towns circle { fill: #FFF7EF; stroke: var(--iv-orange); stroke-width: 3.5; }
.map-towns text { font: 600 24px var(--iv-font); fill: var(--ink-soft); }
.map-mono { font: 700 22px ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: .06em; fill: var(--orange-text); }
.map-arrive { fill: none; stroke: var(--iv-orange); stroke-width: 4; stroke-dasharray: 12 12; stroke-linecap: round; }
.light-halo { fill: var(--iv-orange); opacity: .18; transform-box: fill-box; transform-origin: center; transition: opacity .2s; }
.light-dot { fill: var(--iv-orange); stroke: #FFF7EF; stroke-width: 4; }
.map-pin.is-soon .light-dot { fill: #FFF7EF; stroke: var(--iv-orange); stroke-dasharray: 6 6; }
.map-pin.is-active .light-halo { opacity: .4; }
.map-pin.is-soon.is-active .light-dot { fill: var(--iv-peach); }
.light-label { font: 800 27px var(--iv-font); fill: var(--iv-ink); paint-order: stroke; stroke: #FBEEE2; stroke-width: 8px; stroke-linejoin: round; }
.light-num { font: 700 22px ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; fill: var(--orange-text); }
.place-pin { cursor: pointer; }
.place-pin .pin-hit { fill: transparent; }
.place-pin:hover .light-halo,
.place-pin.is-active .light-halo { opacity: .38; }
.place-pin:focus-visible { outline: none; }
.place-pin:focus-visible .pin-hit { stroke: var(--iv-ink); stroke-width: 3; stroke-dasharray: 6 6; }
@media (max-width: 599px) {
  .map-towns text,
.light-label,
.light-tag { display: none; }
}
.place-popup { border-radius: 14px; }
@media (prefers-reduced-motion: no-preference) {
  .map-arrive { animation: sail 6s linear infinite; }
  @keyframes glow { 50% { transform: scale(1.35); opacity: .06; } }
  .light-halo { animation: glow 2.6s ease-in-out infinite; }
  .place-pin:nth-of-type(2) .light-halo { animation-delay: .5s; }
  .place-pin:nth-of-type(3) .light-halo { animation-delay: 1s; }
  .place-pin:nth-of-type(4) .light-halo { animation-delay: 1.5s; }
  @keyframes soon { to { stroke-dashoffset: -24; } }
  .map-pin.is-soon .light-dot { animation: soon 1.6s linear infinite; }
}
.map-tag { font: 700 22px var(--iv-font); fill: var(--orange-text); }
.light-tag { paint-order: stroke; stroke: #FBEEE2; stroke-width: 8px; stroke-linejoin: round; }
.light-name { font: 800 24px var(--iv-font); fill: var(--iv-ink); }
/* 세로(4:5) 본문 사진은 너무 길지 않게 */
.figure--portrait img { max-width: 440px; margin: 0 auto; }
.figure--portrait figcaption { text-align: center; }
/* 인물 소개 사진 */
.iv-person-figure img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.video-card-thumb img { display: block; }
/* 인물 사진이 들어간 뒤: 둘레 정보는 사진 바깥 양옆에, 선 끝 점이 사진 가장자리에 닿게 */
@media (min-width: 900px) {
  .hotspots div:nth-child(1),
.hotspots div:nth-child(2) { right: calc(100% + 10px); left: auto; }
  .hotspots div:nth-child(3),
.hotspots div:nth-child(4) { left: calc(100% + 10px); right: auto; }
  .hotspots div { width: 170px; }
  .hotspots div:nth-child(1) { top: 8%; }
  .hotspots div:nth-child(2) { bottom: 10%; }
  .hotspots div:nth-child(3) { top: 14%; }
  .hotspots div:nth-child(4) { bottom: 4%; }
}
/* =========================================================
   지도 v3 — 섬 아래 은은한 주황 빛, 커서를 따라 움직이는 빛, 가까운 마을·불빛 반응
   (커서 위치는 site.js가 SVG 좌표로 바꿔 빛 원의 위치 속성만 옮김)
   ========================================================= */
.map,
.places-map {
  background:
    radial-gradient(ellipse 58% 62% at 52% 54%, rgba(249, 115, 22, .24), rgba(249, 115, 22, .09) 45%, rgba(249, 115, 22, 0) 72%),
    #FBEEE2;
}
.map-base { transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.map-glow { fill: url(#cursorGlow); opacity: 0; transition: opacity .4s; pointer-events: none; }
.is-pointer .map-glow { opacity: 1; }
.town-halo { fill: #FFFFFF; opacity: .6; transform-box: fill-box; transform-origin: center; transition: transform .35s, opacity .35s; }
.town-dot { fill: #FFF7EF; stroke: var(--iv-orange); stroke-width: 3.5; transition: fill .3s; }
.map-town text { transition: fill .3s; }
.map-town.is-near .town-halo { transform: scale(1.45); opacity: .95; }
.map-town.is-near .town-dot { fill: var(--iv-orange); }
.map-town.is-near text { fill: var(--iv-ink); }
.light-halo { fill: url(#lightGlow); opacity: .85; }
.map-pin.is-near .light-halo,
.place-pin.is-near .light-halo,
.place-pin:hover .light-halo,
.place-pin.is-active .light-halo,
.map-pin.is-active .light-halo { opacity: 1; transform: scale(1.35); }
.map-pin.is-near.is-soon .light-dot { fill: var(--iv-peach); }
@media (prefers-reduced-motion: no-preference) {
  .map:hover .map-base,
.places-map:hover .map-base { transform: scale(1.015); }
  .light-halo { transition: transform .35s, opacity .35s; }
  @keyframes glow { 50% { transform: scale(1.25); opacity: .55; } }
}
.map-towns .town-halo { stroke: none; }
.map-pin.is-near .light-halo,
.place-pin.is-near .light-halo,
.place-pin:hover .light-halo,
.place-pin.is-active .light-halo,
.map-pin.is-active .light-halo { animation: none; }
/* =========================================================
   지도 v4 — 시안과 같게: 빛은 섬 바깥(바탕 그림의 번짐), 섬 안은 밝게, 글씨는 가늘게
   ========================================================= */
.map,
.places-map { background: #F8ECE1; }
.map-towns text { font: 400 23px var(--iv-font); fill: #5B6470; }
.light-label { font: 600 25px var(--iv-font); stroke: #FFF8F2; }
.light-name { font: 600 23px var(--iv-font); }
.light-num,
.map-mono { font-weight: 500; }
.map-tag { font: 500 21px var(--iv-font); }
.light-tag { stroke: #FFF8F2; }
.map-towns .town-dot { stroke-width: 3; }
/* =========================================================
   섬 프레임 슬라이드 — 손그림 제주 프레임 안쪽에서만 사진이 보이고 옆으로 넘김
   (사진 줄은 프레임 모양 마스크로 잘리고, 프레임 그림이 그 위에 얹힘)
   ========================================================= */
.isle { margin: 28px 0 40px; }
.isle-stage {
  position: relative; aspect-ratio: 1672 / 941;
  width: min(960px, calc(100vw - 2 * var(--gutter)));
  margin-left: 50%; transform: translateX(-50%);
}
@media (max-width: 599px) {
  .isle-stage { width: 100vw; }
  /* 100vw는 스크롤바 폭까지 포함해 살짝 넘치므로 가로로만 잘라낸다 */
  body.page-interview { overflow-x: clip; }
}
.isle-window {
  position: absolute; inset: 0;
  -webkit-mask-image: url("../images/jeju-frame-mask.png"); mask-image: url("../images/jeju-frame-mask.png");
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.isle-track {
  display: flex; height: 100%; margin: 0; padding: 0; list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
  cursor: grab;
}
.isle-track::-webkit-scrollbar { display: none; }
.isle-track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.isle-track:focus-visible { outline: none; }
.isle-slide { position: relative; flex: 0 0 100%; height: 100%; scroll-snap-align: center; overflow: hidden; background: var(--sky-soft); }
/* 사진은 프레임 안쪽 창 크기에 맞춰 채움 (창보다 조금 넉넉하게) */
.isle-slide img {
  position: absolute; left: 15.2%; top: 19.6%; width: 73.6%; height: 61%;
  object-fit: cover; object-position: 50% 50%;
  user-select: none; -webkit-user-drag: none; pointer-events: none;
}
/* 글자가 사진 아래쪽에 있는 장소: 사진을 올리고, 아래 빈 곳은 같은 사진을 흐리게 깔아 이어 보이게 */
.isle-pos-bottom img { top: 15.5%; height: 58%; object-position: 50% 100%;
  -webkit-mask-image: linear-gradient(#000 88%, transparent); mask-image: linear-gradient(#000 88%, transparent); }
.isle-fill-sangumburi::before {
  content: ""; position: absolute; inset: 0;
  background: url("../images/place-sangumburi.jpg") 50% 100% / cover no-repeat;
  filter: blur(16px); transform: scale(1.12);
}
.isle-frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.isle-stage:has(.isle-track:focus-visible) .isle-frame { filter: drop-shadow(0 0 6px rgba(249, 115, 22, .9)); }
.isle-caption-row {
  display: grid; grid-template-columns: var(--tap) minmax(0, 1fr) var(--tap); align-items: center; gap: 12px;
  margin-top: 6px;
}
.isle-nav {
  width: var(--tap); height: var(--tap); border-radius: 50%;
  border: 1px solid var(--iv-ink); background: var(--iv-paper); color: var(--iv-ink);
  font-size: 18px; font-weight: 700; cursor: pointer; transition: background .2s, color .2s;
}
.isle-nav:hover { background: var(--iv-ink); color: var(--iv-paper); }
.isle-nav:focus-visible { outline: 3px solid var(--orange-text); outline-offset: 2px; }
.isle-caption { text-align: center; min-width: 0; }
.isle-cap-top { display: flex; justify-content: center; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.isle-cap-num { font: 700 15px ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; color: var(--orange-text); }
.isle-cap-name { font-size: 20px; font-weight: 800; }
.article-body .isle-cap-desc { margin: 2px 0 0; font-size: 16px; line-height: 1.65; color: var(--ink-soft); }
.isle-dots { display: flex; justify-content: center; margin-top: 4px; }
.isle-dot { width: var(--tap); height: var(--tap); border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.isle-dot span { width: 10px; height: 10px; border-radius: 999px; background: #C9CED4; transition: width .3s, background .3s; }
.isle-dot[aria-current="true"] span { width: 28px; background: var(--iv-orange); }
.isle-dot:focus-visible { outline: 3px solid var(--orange-text); outline-offset: -6px; border-radius: 999px; }
@media (prefers-reduced-motion: no-preference) {
  .isle-slide img { transform: scale(1.08); transition: transform 1.4s cubic-bezier(.2, .7, .2, 1); }
  .isle-slide.is-current img { transform: scale(1); }
  @keyframes isle-cap-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  .isle-caption.is-changing { animation: isle-cap-in .45s ease both; }
  @keyframes isle-float { 50% { transform: translateY(-5px); } }
  .isle-frame { animation: isle-float 6s ease-in-out infinite; }
}
/* 섬 프레임 설명: 번호·이름 / 기울인 한 줄 소개 / 설명 */
.isle-caption { max-width: 600px; margin: 0 auto; }
.article-body .isle-cap-title { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.4; }
.isle-cap-title .isle-cap-num { font: inherit; color: var(--orange-text); }
.isle-cap-title .isle-cap-name { font-size: inherit; text-decoration: underline; text-decoration-style: dotted; text-decoration-color: #9AA3AD; text-underline-offset: 6px; }
.article-body .isle-cap-sub { margin: 6px 0 0; font-size: 17px; font-style: italic; color: var(--iv-ink); }
.article-body .isle-cap-desc { margin: 6px 0 0; font-size: 16px; line-height: 1.75; color: var(--ink-soft); }
.article-body .isle-cap-credit { margin: 8px 0 0; font-size: 12px; line-height: 1.6; color: #6B7280; }
.article-body .isle-cap-credit:empty { display: none; }
/* =========================================================
   인터뷰 탭 — 공통 헤더 아래, 인터뷰 세부페이지끼리 오가는 줄 (휴대폰에서도 숨기지 않고 옆으로 넘김)
   ========================================================= */
.ivnav { background: var(--iv-paper); border-bottom: 1px solid var(--rule); }
.ivnav .container { display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-top: 6px; padding-bottom: 6px; }
.ivnav .container::-webkit-scrollbar { display: none; }
/* 맨 앞 '이주민 인터뷰' 글자(.ivnav-label)는 사용자 요청으로 세 언어 기사 12편에서 지웠다 (2026-10-28) */
.ivnav a {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 14px;
  border-radius: 999px; font-size: 16px; font-weight: 700; color: var(--iv-ink); text-decoration: none; white-space: nowrap;
  transition: background .2s;
}
.ivnav a:hover { background: var(--mute-bg); }
.ivnav a[aria-current="page"] { background: var(--iv-ink); color: var(--iv-paper); }
.ivnav-num { font: 700 13px ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; color: var(--orange-text); }
.ivnav a[aria-current="page"] .ivnav-num { color: var(--iv-peach); }
/* 휴대폰: 글자를 조금 작게 (사용자 요청 "글자 좀 더 줄이고", 2026-10-28. 전 16px·번호 13px). 누르는 칸 높이 44px는 그대로 */
@media (max-width: 899px) {
  .ivnav a { gap: 5px; padding: 0 12px; font-size: 14px; }
  .ivnav-num { font-size: 12px; }
}
/* 빈 장소 슬라이드 */
.isle-empty {
  position: absolute; left: 15.2%; top: 19.6%; width: 73.6%; height: 61%;
  display: grid; place-items: center; font-size: 15px; font-weight: 700; color: var(--ink-soft);
}
/* 섬 프레임 변형 — 손그림 지도 프레임 (.isle--map)
   프레임 그림(848×460)의 뚫린 창 모양 마스크로 사진을 자르고, 사진은 창 크기에 맞춰 채움 */
.isle--map .isle-stage { aspect-ratio: 848 / 460; }
.isle--map .isle-window {
  -webkit-mask-image: url("../images/jeju-frame-map-mask.png"); mask-image: url("../images/jeju-frame-map-mask.png");
}
.isle--map .isle-slide img,
.isle--map .isle-empty { left: 17.3%; top: 17.2%; width: 77.6%; height: 68.7%; }
.isle--map .isle-pos-bottom img { top: 17.2%; height: 68.7%; object-position: 50% 100%; -webkit-mask-image: none; mask-image: none; }
.isle--map .isle-fill-sangumburi::before { display: none; }
/* 섬 프레임 변형 — 바이크 시점 프레임 (.isle--bike, 드라이브 코스용) */
.isle--bike .isle-stage { aspect-ratio: 820 / 440; }
.isle--bike .isle-window {
  -webkit-mask-image: url("../images/jeju-frame-bike-mask.png"); mask-image: url("../images/jeju-frame-bike-mask.png");
}
.isle--bike .isle-slide img,
.isle--bike .isle-empty { left: 11.1%; top: 11.1%; width: 86.4%; height: 78.9%; }
/* 섬 프레임 변형 — 필름 프레임 (.isle--film, 파랑오브레코즈) */
.isle--film .isle-stage { aspect-ratio: 848 / 483; }
.isle--film .isle-window {
  -webkit-mask-image: url("../images/jeju-frame-film-mask.png"); mask-image: url("../images/jeju-frame-film-mask.png");
}
.isle--film .isle-slide img,
.isle--film .isle-empty { left: 18.8%; top: 9.9%; width: 71.6%; height: 61.5%; }
/* 섬 프레임 변형 — 돌담 문 앞 강아지 프레임 (.isle--gate, 에밀리) */
.isle--gate .isle-stage { aspect-ratio: 820 / 503; }
.isle--gate .isle-window {
  -webkit-mask-image: url("../images/jeju-frame-gate-mask.png"); mask-image: url("../images/jeju-frame-gate-mask.png");
}
.isle--gate .isle-slide img,
.isle--gate .isle-empty { left: 13.7%; top: 8.4%; width: 82.1%; height: 63%; }
/* 파랑오브레코즈 첫 화면: 인물이 가운데 오도록 사진 중심을 조금 왼쪽으로 */
.tone-03 .story-media img { object-position: 43% 45%; }
/* =========================================================
   주황 그라데이션 테마 — 하늘색 대신 주황 → 피치 → 크림으로 (모든 인터뷰 페이지 공통)
   주황 바탕 위 글자는 진한 남색(대비 5.4:1 이상), 흰 글자는 쓰지 않음
   ========================================================= */
:root {
  --grad-hero: linear-gradient(155deg, #F97316 0%, #FB8B3C 30%, #FDB27F 62%, #FFE3CC 100%);
  --grad-warm: linear-gradient(165deg, #FDBA8C 0%, #F97316 55%, #C2410C 100%);
  --grad-soft: linear-gradient(180deg, #FFFFFF 0%, #FFF3E8 100%);
  --grad-cream: linear-gradient(180deg, #FFF3E8 0%, #FFE4CF 100%);
}
/* ① 첫 화면 */
.story-intro { background: var(--grad-hero); color: var(--iv-ink); }
.story-media,
.story-media .media-empty { background: rgba(255, 255, 255, .16); color: var(--iv-ink); }
.story-label,
.story-title,
.story-dek,
.story-date,
.story-video,
.story-author-name { color: var(--iv-ink); }
.story-title { text-decoration-color: var(--iv-ink); }
.story-avatar { background: var(--iv-paper); color: var(--orange-text); }
@keyframes underline-in { from { text-decoration-color: transparent; } to { text-decoration-color: var(--iv-ink); } }
/* ② 인물 소개 */
.iv-person { background: var(--grad-soft); }
/* ④ 섬 프레임 빈 칸 */
.isle-slide { background: #FFF1E6; }
/* 영상 카드 */
.video-card-thumb { background: var(--grad-warm); }
/* 맨 위 "인터뷰 풀영상 보기" 버튼으로 내려왔을 때 영상 카드가 화면 위쪽에 바짝 붙지 않도록 */
#interview-video { scroll-margin-top: 72px; }
/* 맨 위 발행일은 조금 작게 */
.story-date { font-size: 14px; }
/* 맨 아래 발행 정보: 위아래 얇은 선 사이에 항목 이름과 내용을 나란히 */
.iv-credits { margin: 44px 0 48px; padding: 14px 0; border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong); }
.iv-credits-list { margin: 0; }
.iv-credits-row { display: grid; grid-template-columns: 6.5em 1fr; gap: 16px; align-items: center; min-height: var(--tap); font-size: 16px; }
.iv-credits-row dt { font-weight: 800; color: var(--iv-ink); }
.iv-credits-row dd { margin: 0; color: var(--iv-ink); }
.iv-credits-row a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--orange-text); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.iv-credits-row a:focus-visible { outline: 3px solid var(--orange-text); outline-offset: 2px; }
/* 세로 영상(9:16): 가로 틀 양옆의 검은 여백이 생기지 않도록 세로 틀로 가운데에 놓음 */
.video-card--vertical { max-width: 360px; margin-left: auto; margin-right: auto; }
.video-card--vertical .video-card-thumb { aspect-ratio: 9 / 16; }
/* 영상을 보다가 스크롤하면 화면 오른쪽 아래 작은 창으로 따라다님 (data-pip가 있는 카드만) */
.video-card-stage { position: relative; aspect-ratio: 9 / 16; }
.video-card-stage > .video-card-thumb { position: absolute; inset: 0; aspect-ratio: auto; }
.video-pip-close { display: none; }
.video-card.is-pip .video-card-stage > .video-card-thumb {
  position: fixed; inset: auto 12px 12px auto; width: min(150px, 40vw); height: auto; aspect-ratio: 9 / 16;
  z-index: 60; border-radius: 10px; box-shadow: 0 6px 24px rgba(20, 14, 10, .45);
  animation: none; clip-path: none; overflow: visible;
}
.video-card.is-pip .video-card-thumb iframe { border-radius: 10px; }
/* 닫기 버튼은 작은 영상 위쪽 바깥에 두어 유튜브 자체 버튼(자막·음량)을 가리지 않게 함 */
.video-card.is-pip .video-pip-close {
  display: grid; place-items: center; position: absolute; z-index: 2; top: calc(-1 * var(--tap) - 4px); right: 0;
  width: var(--tap); height: var(--tap); border: 0; border-radius: 50%;
  background: rgba(20, 14, 10, .65); color: #fff; font-size: 16px; font-weight: 700; cursor: pointer;
}
.video-card.is-pip .video-pip-close:focus-visible { outline: 3px solid var(--iv-orange); outline-offset: 2px; }
/* 작은 창 → 화면 가운데로 크게 (뒤는 어둡게). 다시 누르거나 바깥을 누르면 작은 창으로 */
.video-pip-expand { display: none; }
.video-card.is-pip .video-pip-expand {
  display: grid; place-items: center; position: absolute; z-index: 2; top: calc(-1 * var(--tap) - 4px); right: calc(var(--tap) + 8px);
  width: var(--tap); height: var(--tap); border: 0; border-radius: 50%;
  background: rgba(20, 14, 10, .65); color: #fff; font-size: 18px; font-weight: 700; cursor: pointer;
}
.video-card.is-pip .video-pip-expand:focus-visible { outline: 3px solid var(--iv-orange); outline-offset: 2px; }
.video-card.is-pip.is-pip-large .video-card-stage::after { content: ""; position: fixed; inset: 0; z-index: 59; background: rgba(20, 14, 10, .72); }
.video-card.is-pip.is-pip-large .video-card-stage > .video-card-thumb {
  inset: 50% auto auto 50%; transform: translate(-50%, calc(-50% + 24px)); z-index: 61;
  width: min(calc(100vw - 32px), calc((100vh - 150px) * 0.5625), 480px);
}
/* 영상 카드를 누르면 나오는 재생 화면 */
.video-card.is-playing .video-card-thumb { background: #000; }
.video-card.is-playing .video-card-thumb::after { display: none; }
.video-card-thumb iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-card.is-playing .video-card-cap { color: inherit; text-decoration: none; }
.video-card.is-playing .video-card-cap:hover { text-decoration: underline; }
/* 쇼츠를 누르면 페이지 위에 뜨는 재생 창 */
.is-modal-open { overflow: hidden; }
.video-modal {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center; padding: 16px;
  background: rgba(20, 14, 10, .78);
}
.video-modal[hidden] { display: none; }
.video-modal-box { position: relative; display: grid; justify-items: center; gap: 12px; }
.video-modal-close {
  justify-self: end; width: var(--tap); height: var(--tap); border: 0; border-radius: 50%;
  background: var(--white); color: var(--iv-ink); font-size: 18px; font-weight: 700; cursor: pointer;
}
.video-modal-frame {
  position: relative; aspect-ratio: 9 / 16; background: #000; border-radius: var(--radius); overflow: hidden;
  width: min(calc(100vw - 32px), calc((100vh - 190px) * 0.5625), 420px);
}
.video-modal-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-modal-link {
  display: flex; align-items: center; justify-content: center; min-height: var(--tap); width: 100%;
  border-radius: 999px; background: var(--white); color: var(--iv-ink); font-weight: 800; text-decoration: none;
}
.video-modal-link:hover { text-decoration: underline; }
.video-modal-close:focus-visible,
.video-modal-link:focus-visible { outline: 3px solid var(--iv-orange); outline-offset: 2px; }
/* ⑤ 쇼츠 */
.shorts-wrap { background: var(--grad-cream); }
.reel-frame { background: var(--grad-warm); }
.reel-frame::after { background: linear-gradient(transparent, rgba(67, 20, 7, .72) 40%, rgba(40, 12, 4, .94)); }
.reel-frame::before { background: linear-gradient(rgba(40, 12, 4, .5), transparent); }
.reel-hint { color: var(--iv-ink); }
.reel-title em { color: var(--iv-peach); }
/* =========================================================
   페이지별 그라데이션 — <main class="tone-NN">에 따라 첫 화면·인물·쇼츠 색이 달라짐 (하늘색 제외, 주황 계열)
   01 아인학교 노을 주황 · 02 이재은 강사님 피치 크림 · 03 파랑오브레코즈 호박 주황 · 04 에밀리 코랄
   ========================================================= */
.tone-01 {
  --grad-hero: linear-gradient(155deg, #F97316 0%, #FB8B3C 30%, #FDB27F 62%, #FFE3CC 100%);
  --grad-warm: linear-gradient(165deg, #FDBA8C 0%, #F97316 55%, #C2410C 100%);
  --grad-soft: linear-gradient(180deg, #FFFFFF 0%, #FFF3E8 100%);
  --grad-cream: linear-gradient(180deg, #FFF3E8 0%, #FFE4CF 100%);
}
.tone-02 {
  --grad-hero: linear-gradient(135deg, #FDBA8C 0%, #FFD3B5 40%, #FFE9D9 75%, #FFF8F1 100%);
  --grad-warm: linear-gradient(165deg, #FFE0C7 0%, #FDBA8C 50%, #E0773B 100%);
  --grad-soft: linear-gradient(180deg, #FFFFFF 0%, #FFF6EF 100%);
  --grad-cream: linear-gradient(180deg, #FFF6EF 0%, #FFE9DA 100%);
}
.tone-03 {
  --grad-hero: linear-gradient(170deg, #F59E0B 0%, #FBA94C 35%, #FDCB8F 70%, #FFF1DC 100%);
  --grad-warm: linear-gradient(165deg, #FDCB8F 0%, #F59E0B 55%, #B45309 100%);
  --grad-soft: linear-gradient(180deg, #FFFFFF 0%, #FFF7E8 100%);
  --grad-cream: linear-gradient(180deg, #FFF7E8 0%, #FDEBC8 100%);
}
.tone-04 {
  --grad-hero: linear-gradient(145deg, #FF7A59 0%, #FF9A7A 35%, #FFC2A8 70%, #FFEDE4 100%);
  --grad-warm: linear-gradient(165deg, #FFC2A8 0%, #FF7A59 55%, #C2410C 100%);
  --grad-soft: linear-gradient(180deg, #FFFFFF 0%, #FFF3EE 100%);
  --grad-cream: linear-gradient(180deg, #FFF3EE 0%, #FFE1D6 100%);
}
/* =========================================================
   팔레트 기준 다시 정리 — Cream #FFF0DF · Peach #FFD5B2 · Apricot #FFB47D
   Soft Orange #FF9650 · Main Orange #FF7A1A · Deep Orange #F9670B (이 6가지만 사용)
   ========================================================= */
:root { --iv-orange: #FF7A1A; --iv-peach: #FFD5B2; --iv-cream: #FFF0DF; }
.tone-01 {
  --grad-hero: linear-gradient(155deg, #FF7A1A 0%, #FF9650 32%, #FFB47D 64%, #FFD5B2 100%);
  --grad-warm: linear-gradient(165deg, #FFD5B2 0%, #FF7A1A 55%, #F9670B 100%);
  --grad-soft: linear-gradient(180deg, #FFFFFF 0%, #FFF0DF 100%);
  --grad-cream: linear-gradient(180deg, #FFF0DF 0%, #FFD5B2 100%);
}
.tone-02 {
  --grad-hero: linear-gradient(135deg, #FFB47D 0%, #FFD5B2 48%, #FFF0DF 100%);
  --grad-warm: linear-gradient(165deg, #FFF0DF 0%, #FFB47D 50%, #FF9650 100%);
  --grad-soft: linear-gradient(180deg, #FFFFFF 0%, #FFF0DF 100%);
  --grad-cream: linear-gradient(180deg, #FFFFFF 0%, #FFF0DF 100%);
}
.tone-03 {
  --grad-hero: linear-gradient(170deg, #F9670B 0%, #FF7A1A 30%, #FF9650 62%, #FFB47D 100%);
  --grad-warm: linear-gradient(165deg, #FF9650 0%, #FF7A1A 50%, #F9670B 100%);
  --grad-soft: linear-gradient(180deg, #FFF0DF 0%, #FFD5B2 100%);
  --grad-cream: linear-gradient(180deg, #FFD5B2 0%, #FFB47D 100%);
}
.tone-04 {
  --grad-hero: linear-gradient(145deg, #FF9650 0%, #FFB47D 35%, #FFD5B2 70%, #FFF0DF 100%);
  --grad-warm: linear-gradient(165deg, #FFB47D 0%, #FF9650 50%, #FF7A1A 100%);
  --grad-soft: linear-gradient(180deg, #FFFFFF 0%, #FFF0DF 100%);
  --grad-cream: linear-gradient(180deg, #FFF0DF 0%, #FFB47D 100%);
}
/* 통계·참고 자료 출처 한 줄 */
.source-note { font-size: 14px; line-height: 1.6; color: var(--ink-soft); margin: -0.6em 0 1.6em; }


/* ---------- 서브메인 합치기용 보정 ---------- */
/* 공통 틀(상단 바·헤더·푸터)은 본문에서 물려받는 글꼴·줄 간격·글자색까지 서브메인과 똑같이 보이도록 되돌린다 */
body.page-interview :is(.topbar, .wz-header, .site-footer) { font-family: var(--font); line-height: 1.6; }
/* (합칠 때 뺌) 헤더 글자색은 서브메인 규칙(--hdr-ink, 흰색)을 그대로 따른다. 전에는 기사에서만 헤더 글자를 짙은 색(--text)으로 바꾸고 있었다 */

/* 헤더가 위에 고정되므로 읽기 진행 막대는 헤더 바로 아래에 놓는다 */
.progress { top: var(--hdr-h, 0px); }

/* 움직임 줄이기 설정을 켠 사람은 기사 페이지에서 부드럽게 스크롤하지 않는다 */
@media (prefers-reduced-motion: reduce) { html:has(body.page-interview) { scroll-behavior: auto; } }

/* ---------- 기사 첫 화면 크기를 네 기사 모두 같게 (사용자 요청 2026-10-23) ----------
   사진은 칸을 채우기만 하고 칸 높이를 늘리지 않는다. 전에는 세로 사진(1080×1350)을 쓴 엠아이티도그만
   사진 비율대로 길어져, 1280px 화면에서 790px(다른 기사 704px), 1920px 화면에서 1190px(다른 기사 860px)이었다.
   PC: 높이는 화면의 88%(최대 860px)로 같다. 휴대폰: 사진 칸(4:5)은 원래 같고, 글 칸 최소 높이를 맞춰
   제목 줄 수(2~4줄)가 달라도 첫 화면 높이가 같다 */
.story-media { position: relative; overflow: hidden; }
.story-media video,
.story-media img,
.story-media .media-empty { position: absolute; inset: 0; }
@media (max-width: 899px) {
  .story-panel { min-height: 510px; }   /* 가장 긴 제목(백록마케팅)이 312px 카톡 화면에서 차지하는 높이(약 503px)에 맞춤 */
  /* 영어·일본어판은 제목이 길어 312px 화면에서 가장 긴 글 칸(백록마케팅)이 영어 593px·일본어 548px. 네 기사의 첫 화면이 같게 (2026-10-25) */
  :lang(en) .story-panel { min-height: 600px; }
  :lang(ja) .story-panel { min-height: 550px; }
}

/* ===== 마을 테스트 블록 시작 (scratchpad build.py가 만든다) ===== */
/* =========================================================
   나는 제주 어디 주민? (마을 테스트, articles/jeju-village-test.html)
   사용자가 만든 테스트 아티팩트(claude.ai/artifact/Qhchi6VWQa5d3jBMB8tCCt)를 웹진 안으로 옮김 (사용자 요청 2026-10-27)
   - 모든 규칙을 .vt 안으로 묶었다. 웹진 클래스와 이름이 겹치는 다섯 개(reveal·hero·progress·spots·topbar)는 vt-를 붙였다
   - 아티팩트는 화면 전체(body)를 썼다 → 헤더 아래 칸(.vt)을 쓴다. 첫 화면·질문 화면은 헤더를 뺀 화면 높이에 꼭 맞춘다(--hdr-h)
   - 저장 화면·안내(.sheet·.toast)는 헤더(z-index 50)보다 위
   - 글꼴: Bagel Fat One·Jua·Nanum Pen Script(SIL OFL 1.1)는 테스트에 쓰는 글자만 Google Fonts에서 받아 css/fonts/에,
     G마켓 산스(Gmarket Sans, 무료 글꼴)는 아티팩트에 들어 있던 것을 꺼내 css/fonts/에 둔다. 이 페이지에서만 내려받는다
   - 영어·일본어·중국어 화면은 아티팩트가 Google Fonts에서 따로 불러오던 글꼴 대신 기기 글꼴로 보인다
   ========================================================= */
@font-face { font-family: "Gmarket"; font-weight: 500; font-display: swap; src: url(fonts/vt-gmarket-500.woff) format("woff"); }
@font-face { font-family: "Gmarket"; font-weight: 700; font-display: swap; src: url(fonts/vt-gmarket-700.woff) format("woff"); }
@font-face { font-family: "Bagel Fat One"; font-weight: 400; font-display: swap; src: url(fonts/vt-bagel-fat-one.woff2) format("woff2"); }
@font-face { font-family: "Jua"; font-weight: 400; font-display: swap; src: url(fonts/vt-jua.woff2) format("woff2"); }
@font-face { font-family: "Nanum Pen Script"; font-weight: 400; font-display: swap; src: url(fonts/vt-nanum-pen.woff2) format("woff2"); }
.vt, .vt *, .vt *::before, .vt *::after { box-sizing: border-box; }
.vt img { max-width: 100%; }
.vt [hidden]:not([hidden=until-found i]) { display: none !important; }
.vt-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.vt { position: relative; overflow: hidden; --sky-top: #2E93D1; --sky-mid: #6FB4E6; --sky-low: #CFE3F3; --blue: #4085E0; --deep: #2668B9; --orange: #FD7925; --yellow: #FFD43B; --paper: #FFFFFF; --muted: #5B7FAE; --line: rgba(38, 104, 185, .22); --shadow: rgba(6, 42, 85, .28); --f-display: 'Bagel Fat One', 'Jua', 'Apple SD Gothic Neo', sans-serif; --f-body: 'Gmarket', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; --f-hand: 'Nanum Pen Script', 'Jua', cursive; --f-talk: 'Jua', 'Apple SD Gothic Neo', sans-serif; color-scheme: light; }
.vt[lang=ja] { --f-display: 'Mochiy Pop One', 'Bagel Fat One', 'Hiragino Maru Gothic ProN', sans-serif; --f-body: 'Zen Maru Gothic', 'Gmarket', 'Hiragino Sans', 'Meiryo', sans-serif; --f-hand: 'Yusei Magic', 'Nanum Pen Script', cursive; --f-talk: 'Kiwi Maru', 'Jua', sans-serif; }
.vt[lang=ja] { word-break: normal; word-break: auto-phrase; line-break: strict; font-feature-settings: 'palt'; }
.vt[lang=ja] .bubble { font-size: 17px; }
.vt[lang=ja] .app.fit .bubble { font-size: clamp(13px, 2cqh, 17px); }
.vt[lang=ja] .oneliner { font-size: 22px; line-height: 1.35; }
.vt[lang=en] { --f-hand: 'Caveat', 'Nanum Pen Script', cursive; }
.vt[lang=en] .day { grid-template-columns: auto 1fr; }
.vt:lang(zh) { --f-display: 'ZCOOL KuaiLe', 'Bagel Fat One', 'PingFang SC', 'Microsoft YaHei', sans-serif; --f-body: 'Noto Sans SC', 'Gmarket', 'PingFang SC', 'Microsoft YaHei', sans-serif; --f-hand: 'ZCOOL KuaiLe', 'PingFang SC', 'Microsoft YaHei', sans-serif; --f-talk: 'ZCOOL KuaiLe', 'PingFang SC', 'Microsoft YaHei', sans-serif; }
.vt:lang(zh) { word-break: normal; line-break: strict; }
.vt:lang(zh) .bubble { font-size: 17px; }
.vt:lang(zh) .app.fit .bubble { font-size: clamp(13px, 2cqh, 17px); }
.vt:lang(zh) .oneliner { font-size: 22px; line-height: 1.35; }
.vt:lang(zh) .combo .lbl, .vt[lang=ja] .combo .lbl { word-break: keep-all; }
.vt { background: var(--sky-low) linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 40%, var(--sky-low) 100%); color: var(--deep); font-family: var(--f-body); -webkit-font-smoothing: antialiased; word-break: keep-all; overflow-wrap: break-word; }
.vt::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2; opacity: .5; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.vt .bgphoto { position: absolute; inset: 0; z-index: 0; background: var(--sky-mid) url(../images/find-test-bg.jpg) 50% 30% / cover no-repeat; filter: blur(3.5px); transform: scale(1.04); }
.vt .bgphoto::after { content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, .24); }
.vt .app { position: relative; z-index: 1; max-width: 460px; margin: 0 auto; min-height: calc(100vh - var(--hdr-h, 0px)); min-height: calc(100svh - var(--hdr-h, 0px)); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 14px 40px; display: flex; flex-direction: column; }
.vt .screen { display: flex; flex-direction: column; gap: 18px; flex: 1; }
.vt .app.fit { height: calc(100vh - var(--hdr-h, 0px)); height: calc(100svh - var(--hdr-h, 0px)); min-height: 0; container-type: size; overflow-y: auto; padding-block: 10px 12px; }
.vt .app.fit .screen { flex: 1; min-height: 0; gap: clamp(8px, 1.7cqh, 18px); }
.vt .app.fit .hdr { min-height: 0; margin-bottom: clamp(4px, 1cqh, 10px); }
.vt .app.fit .pill { padding-block: clamp(6px, 1cqh, 9px) clamp(4px, .8cqh, 7px); }
.vt .app.fit .vt-topbar { min-height: 0; }
.vt .app.fit .logo { width: clamp(36px, 6cqh, 52px); }
.vt .app.fit .talk { margin-top: auto; padding-top: 0; }
.vt #quiz .talk { margin-top: 0; }
.vt .app.fit .talk img { width: auto; height: clamp(68px, 15cqh, 160px); }
.vt .app.fit .bubble { font-size: clamp(14px, 2.2cqh, 19px); margin-bottom: clamp(18px, 4cqh, 38px); padding: clamp(9px, 1.4cqh, 13px) clamp(13px, 2cqh, 18px) clamp(7px, 1.1cqh, 10px); }
.vt .vt-topbar { display: flex; align-items: center; justify-content: space-between; min-height: 52px; }
.vt .hdr { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; margin-bottom: 10px; }
.vt .logo-btn { border: 0; background: none; padding: 0; cursor: pointer; display: block; flex: none; }
.vt .hdr-actions { display: flex; gap: 8px; }
.vt .pill { display: inline-flex; align-items: center; gap: 6px; border: 0; cursor: pointer; background: rgba(255,255,255,.93); color: var(--deep); border-radius: 999px; padding: 9px 14px 7px 11px; font: 700 14px/1 var(--f-body); letter-spacing: -0.01em; box-shadow: 0 3px 8px rgba(0, 40, 90, .18); }
.vt .pill svg { width: 19px; height: 19px; flex: none; }
.vt .pill.on { background: var(--orange); color: #fff; }
.vt .pill { white-space: nowrap; }
.vt .hdr.c1 #homebtn .txt { display: none; }
.vt .hdr.c1 #homebtn { padding-inline: 10px; }
.vt .hdr.c2 .hdr-actions { gap: 5px; }
.vt .hdr.c2 .pill { padding-inline: 9px 10px; gap: 4px; }
.vt .hdr.c2 #homebtn { padding-inline: 8px; }
.vt .langwrap { position: relative; }
.vt .langmenu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 45; min-width: 150px; display: flex; flex-direction: column; gap: 2px; background: #fff; border-radius: 16px; padding: 6px; box-shadow: 0 10px 24px rgba(0, 40, 90, .25); }
.vt .langmenu[hidden] { display: none; }
.vt .langmenu button { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 0; background: none; cursor: pointer; text-align: left; padding: 12px 12px 10px; border-radius: 10px; font: 700 15px/1 var(--f-body); color: var(--deep); }
.vt .langmenu button[aria-checked=true] { background: #FFF1E6; color: var(--orange); }
.vt .langmenu button[aria-checked=true]::after { content: '✓'; }
.vt .logo { width: 52px; height: auto; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.15)); }
.vt button { font: inherit; color: inherit; }
.vt button:focus-visible, .vt a:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; border-radius: 12px; }
.vt .paper { position: relative; padding: 22px 20px; }
.vt .paper > .pshadow { position: absolute; inset: 0; filter: drop-shadow(0 6px 8px var(--shadow)); pointer-events: none; }
.vt .paper > .pshadow > .pbg { position: absolute; inset: 0; background-color: var(--paper); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='.018' numOctaves='3' seed='4'/><feColorMatrix values='0 0 0 0 .55  0 0 0 0 .62  0 0 0 0 .72  0 0 0 .16 0'/></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>"); }
.vt .paper > :not(.pshadow) { position: relative; }
.vt .icon { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
.vt .chip { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; flex: none; color: #fff; background: var(--blue); }
.vt .chip > svg { width: 60%; height: 60%; }
.vt .chip.o { background: var(--orange); }
.vt .talk { display: flex; align-items: flex-end; gap: 10px; margin-top: auto; padding-top: 6px; }
.vt .talk img { width: 112px; height: auto; flex: none; filter: drop-shadow(0 6px 8px rgba(0, 30, 60, .3)); }
.vt .bubble { position: relative; background: #fff; border-radius: 22px; padding: 13px 18px 10px; margin-bottom: 38px; font: 400 19px/1.35 var(--f-talk); color: var(--deep); box-shadow: 0 5px 12px rgba(0, 40, 90, .2); text-wrap: balance; }
.vt .bubble::before { content: ''; position: absolute; left: -14px; bottom: 16px; border-style: solid; border-width: 9px 18px 9px 0; border-color: transparent #fff transparent transparent; }
.vt .cta { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 60px; border: 0; border-radius: 999px; background: var(--orange); color: #fff; font: 700 20px/1 var(--f-body); letter-spacing: -0.02em; cursor: pointer; box-shadow: 0 6px 0 #C9561A, 0 10px 18px rgba(0, 40, 90, .25); transition: transform .12s, box-shadow .12s; text-decoration: none; }
.vt .cta:active { transform: translateY(4px); box-shadow: 0 2px 0 #C9561A, 0 6px 12px rgba(0, 40, 90, .25); }
.vt .cta.blue { background: var(--blue); box-shadow: 0 6px 0 #2B66B5, 0 10px 18px rgba(0, 40, 90, .25); }
.vt .cta.ghost { background: #fff; color: var(--deep); box-shadow: 0 6px 0 #B9CFE8, 0 10px 18px rgba(0, 40, 90, .18); }
.vt .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vt .back { border: 0; background: rgba(255,255,255,.9); color: var(--deep); border-radius: 999px; padding: 10px 14px 8px; font: 700 14px var(--f-body); cursor: pointer; }
.vt #start .vt-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(6px, 1.4cqh, 12px); padding-top: 0; }
.vt #start .kicker { font: 700 clamp(13px, 1.9cqh, 15px) var(--f-body); color: #fff; letter-spacing: .02em; background: rgba(38, 104, 185, .55); padding: 8px 14px 6px; border-radius: 999px; }
.vt #start .title { width: min(100%, 380px); height: clamp(96px, 27cqh, 210px); object-fit: contain; display: block; }
.vt #start .sub { margin: 0; font: 400 clamp(21px, 3.4cqh, 30px)/1.15 var(--f-hand); color: #fff; text-shadow: 0 2px 6px rgba(10, 60, 120, .55); }
.vt #start .meta { margin: 0; text-align: center; font: 700 14px var(--f-body); color: #fff; text-shadow: 0 1px 4px rgba(0, 40, 90, .6); }
.vt #start .talk { margin-top: clamp(4px, 1.5cqh, 16px); justify-content: center; }
.vt #start .talk img { height: clamp(84px, 21cqh, 200px); }
.vt .app.fit .cta { min-height: clamp(48px, 7cqh, 60px); font-size: clamp(17px, 2.5cqh, 20px); }
.vt .vt-progress { display: flex; gap: 8px; align-items: center; }
.vt .vt-progress .chip { width: 34px; height: 34px; background: rgba(255,255,255,.9); color: var(--blue); transition: all .2s; }
.vt .vt-progress .chip.done { background: var(--blue); color: #fff; }
.vt .vt-progress .chip.on { width: 44px; height: 44px; background: var(--orange); color: #fff; box-shadow: 0 3px 8px rgba(0, 40, 90, .25); }
.vt .qcard { display: flex; flex-direction: column; gap: clamp(4px, 1cqh, 10px); }
.vt .app.fit .qcard { padding: clamp(12px, 2.3cqh, 22px) 20px; }
.vt .qno { font: 400 clamp(30px, 5.4cqh, 46px)/1 var(--f-display); color: var(--orange); }
.vt .qtext { font: 400 clamp(20px, 3.3cqh, 27px)/1.25 var(--f-display); color: var(--deep); letter-spacing: -0.01em; text-wrap: balance; }
.vt .opts { display: flex; flex-direction: column; gap: clamp(6px, 1.1cqh, 10px); }
.vt .app.fit .opt { min-height: clamp(40px, 6.4cqh, 56px); padding: clamp(7px, 1.3cqh, 15px) 16px clamp(5px, 1.1cqh, 13px); font-size: clamp(14.5px, 2.1cqh, 17px); }
.vt .app.fit .opt .box { width: clamp(20px, 2.8cqh, 24px); height: clamp(20px, 2.8cqh, 24px); }
.vt .opt { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0; cursor: pointer; background: #fff; border-radius: 16px; padding: 15px 16px 13px; min-height: 56px; font: 500 17px/1.3 var(--f-body); color: var(--deep); letter-spacing: -0.02em; box-shadow: 0 3px 0 #B9CFE8, 0 6px 14px rgba(0, 40, 90, .14); transition: transform .1s, background .15s, color .15s; }
.vt .opt .box { width: 24px; height: 24px; flex: none; border: 3px solid var(--deep); border-radius: 7px; background: #fff; position: relative; }
.vt .opt.picked { background: var(--orange); color: #fff; box-shadow: 0 3px 0 #C9561A; }
.vt .opt.picked .box { border-color: #fff; }
.vt .opt.picked .box::after { content: ''; position: absolute; left: 5px; top: 0; width: 7px; height: 13px; border: solid var(--orange); border-width: 0 4px 4px 0; transform: rotate(45deg); }
.vt .opt:active { transform: scale(.98); }
.vt #loading { align-items: center; justify-content: center; text-align: center; }
.vt #loading img { width: clamp(110px, 30cqh, 160px); height: auto; animation: vt-hop .7s ease-in-out infinite alternate; filter: drop-shadow(0 8px 10px rgba(0, 30, 60, .3)); }
.vt #loading p { font: 400 26px/1.3 var(--f-display); color: #fff; text-shadow: 0 3px 0 rgba(38, 104, 185, .55); }
@keyframes vt-hop {from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-14px) rotate(3deg); }}
.vt .rhead { text-align: center; font: 400 22px var(--f-display); color: #fff; text-shadow: 0 3px 0 rgba(38, 104, 185, .55); }
.vt .rcard { display: flex; flex-direction: column; gap: 16px; padding: 26px 22px 22px; }
.vt .rtop { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.vt .typepill { display: inline-flex; align-items: center; gap: 8px; background: var(--blue); color: #fff; font: 700 15px var(--f-body); padding: 7px 14px 5px 7px; border-radius: 999px; }
.vt .typepill .chip { width: 28px; height: 28px; background: #fff; color: var(--blue); }
.vt .region { font: 400 38px/1.12 var(--f-display); color: var(--orange); letter-spacing: -0.01em; text-wrap: balance; }
.vt .region small { display: block; font: 700 14px/1.4 var(--f-body); color: var(--muted); letter-spacing: 0; margin-top: 4px; }
.vt .oneliner { font: 400 27px/1.2 var(--f-hand); color: var(--deep); text-wrap: balance; }
.vt .rtalk { display: flex; align-items: center; justify-content: center; gap: 8px; }
.vt .rtalk img { width: 132px; height: auto; flex: none; filter: drop-shadow(0 6px 8px rgba(0, 30, 60, .25)); }
.vt .rtalk .bubble { margin-bottom: 26px; background: #EEF5FD; box-shadow: none; font-size: 18px; }
.vt .rtalk .bubble::before { border-color: transparent #EEF5FD transparent transparent; }
.vt .sec { display: flex; flex-direction: column; gap: 10px; }
.vt .sec h3 { margin: 0; display: flex; align-items: center; gap: 8px; font: 700 16px var(--f-body); color: var(--deep); letter-spacing: -0.01em; }
.vt .sec h3::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--orange); }
.vt .meters { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; align-items: center; }
.vt .meters dt { font: 500 14px var(--f-body); color: var(--muted); white-space: nowrap; }
.vt .meters dd { margin: 0; display: flex; gap: 5px; }
.vt .meters i { width: 18px; height: 18px; border-radius: 50%; background: #E3ECF7; }
.vt .meters i.f { background: var(--orange); }
.vt .kw { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.vt .kw li { display: flex; gap: 9px; align-items: flex-start; font: 500 15.5px/1.4 var(--f-body); color: var(--deep); letter-spacing: -0.02em; }
.vt .kw li::before { content: ''; flex: none; width: 14px; height: 8px; margin-top: 4px; border: solid var(--orange); border-width: 0 0 3px 3px; transform: rotate(-45deg); }
.vt .day { display: grid; grid-template-columns: 52px 1fr; gap: 8px 10px; align-items: baseline; }
.vt .day b { font: 400 18px var(--f-display); color: var(--blue); }
.vt .day span { font: 500 15.5px/1.4 var(--f-body); color: var(--deep); letter-spacing: -0.02em; }
.vt .tip { background: #FFF5CC; border-radius: 14px; padding: 13px 15px 11px; font: 500 15px/1.45 var(--f-body); color: #5A4A10; letter-spacing: -0.02em; }
.vt .tip b { color: var(--orange); }
.vt .stamp { text-align: center; font: 400 22px var(--f-hand); color: var(--muted); border-top: 2px dashed var(--line); padding-top: 12px; }
.vt .answers { --chip-fs: 13px; display: flex; flex-wrap: nowrap; gap: 5px; justify-content: center; align-items: center; width: 100%; margin-top: -8px; }
.vt .answers span { flex: none; display: inline-flex; align-items: center; height: calc(var(--chip-fs) * 2.3); padding: 2px calc(var(--chip-fs) * .8) 0; line-height: 1; white-space: nowrap; font: 700 var(--chip-fs)/1 var(--f-body); color: var(--deep); background: rgba(255,255,255,.92); border-radius: 999px; }
.vt .answers .br { display: none; }
.vt .answers.two { flex-wrap: wrap; row-gap: 6px; }
.vt .answers.two .br { display: block; flex-basis: 100%; height: 0; }
.vt .second { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0; cursor: pointer; background: transparent; padding: 0; }
.vt .second img { width: 64px; height: auto; flex: none; }
.vt .second .t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vt .second .t small { font: 700 13px var(--f-body); color: var(--muted); }
.vt .second .t b { font: 400 22px/1.15 var(--f-display); color: var(--blue); }
.vt .second .t em { font-style: normal; font: 500 14px var(--f-body); color: var(--deep); }
.vt .second .arrow { margin-left: auto; font: 400 26px var(--f-display); color: var(--orange); }
.vt .zine { display: flex; flex-direction: column; gap: 10px; background: var(--deep); color: #fff; border-radius: 18px; padding: 18px; }
.vt .zine p { margin: 0; font: 500 15.5px/1.45 var(--f-body); letter-spacing: -0.02em; }
.vt .zine p b { color: var(--yellow); }
.vt .zine .cta { min-height: 52px; font-size: 17px; }
.vt .zine .soon { flex-direction: column; gap: 4px; background: rgba(255,255,255,.12); border: 2px dashed rgba(255,255,255,.55); box-shadow: none; min-height: 64px; }
.vt .zine .soon small { font: 500 13px var(--f-body); opacity: .85; }
.vt .zine hr { border: 0; border-top: 1px dashed rgba(255,255,255,.35); margin: 6px 0 2px; width: 100%; }
.vt .save svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.vt .save[disabled] { opacity: .7; cursor: progress; }
.vt .combo { flex-direction: column; gap: 4px; min-height: 74px; padding: 14px 22px 12px; font-size: 18px; line-height: 1.3; text-align: center; }
.vt .combo .l1 { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-wrap: balance; }
.vt .combo small { font: 500 13px var(--f-body); opacity: .9; }
.vt .cta.yellow { background: var(--yellow); color: #3B2A22; box-shadow: 0 6px 0 #D4A90F, 0 10px 18px rgba(0, 40, 90, .22); }
.vt .cta.yellow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
.vt #sheet .cta { width: min(100%, 420px); }
.vt .toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 1000; width: max-content; max-width: calc(100% - 32px); background: rgba(16, 38, 70, .92); color: #fff; font: 700 14px/1.4 var(--f-body); padding: 12px 18px 10px; border-radius: 999px; text-align: center; text-wrap: balance; white-space: pre-line; }
.vt .sheet { position: fixed; inset: 0; z-index: 1001; background: rgba(10, 25, 45, .82); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.vt .sheet { overflow-y: auto; display: block; }
.vt .sheet-in { margin: auto; min-height: 100%; width: min(100%, 440px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding-block: 8px; }
.vt .sheet img { max-width: 100%; max-height: 52vh; height: auto; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.4); -webkit-touch-callout: default; -webkit-user-select: auto; user-select: auto; }
.vt .sheet p { margin: 0; color: #fff; text-align: center; font: 700 16px/1.5 var(--f-body); }
.vt #sheet { background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 50%, var(--sky-low) 100%); overflow: hidden; }
.vt #sheet .cap { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.vt #sheet img { max-height: calc(100% - 180px); max-width: 100%; width: auto; border-radius: 10px; box-shadow: 0 10px 26px rgba(6, 42, 85, .35); }
.vt #sheet .capline { font: 400 21px/1.3 var(--f-display); color: #fff; text-shadow: 0 2px 0 rgba(38, 104, 185, .55); text-align: center; }
.vt #sheet .x { position: absolute; top: max(12px, env(safe-area-inset-top, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255,255,255,.85); color: var(--deep); font: 700 22px/1 var(--f-body); cursor: pointer; }
.vt .sheet .row2 { width: 100%; }
.vt .sheet textarea { width: 100%; min-height: 110px; border: 0; border-radius: 14px; padding: 12px 14px; font: 500 15px/1.5 var(--f-body); color: var(--deep); background: #fff; resize: none; }
.vt .vt-spots { flex-direction: column; gap: 3px; background: #fff; color: var(--orange); border: 2px dashed var(--orange); box-shadow: 0 6px 0 #F3C9AE, 0 10px 18px rgba(0, 40, 90, .14); min-height: 66px; }
.vt .vt-spots .t { display: inline-flex; align-items: center; gap: 8px; }
.vt .vt-spots .t svg { width: 22px; height: 22px; }
.vt .vt-spots small { font: 500 13px var(--f-body); color: var(--muted); }
.vt .beta { text-align: center; font: 500 12px/1.5 var(--f-body); color: var(--muted); }
.vt .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vt .tile { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; border: 0; cursor: pointer; background: #fff; border-radius: 18px; padding: 14px 10px 12px; box-shadow: 0 3px 0 #B9CFE8, 0 6px 14px rgba(0, 40, 90, .14); }
.vt .tile img { width: 76px; height: 86px; object-fit: contain; }
.vt .tile small { font: 700 12.5px var(--f-body); color: var(--muted); }
.vt .tile b { font: 400 18px/1.15 var(--f-display); color: var(--orange); text-wrap: balance; }
.vt .tile.mine { outline: 3px solid var(--orange); }
.vt .vt-reveal { animation: vt-rise .45s ease-out both; }
@keyframes vt-rise {from { transform: translateY(14px); opacity: .001; } to { transform: none; opacity: 1; }}
@media (prefers-reduced-motion: reduce) { .vt *, .vt *::before, .vt *::after { animation: none !important; transition: none !important; } }
/* 아티팩트에서 style="…"로 넣던 것 (공통 기준: style 속성 금지) */
.vt .qno-of { font-size: 22px; color: var(--muted); }
.vt .qtext, .vt .rhead, .vt .region, .vt .oneliner, .vt .tip, .vt .stamp, .vt .beta { margin: 0; }
.vt .vt-topbar.is-plain { min-height: 0; }
.vt-noscript { margin: 0; padding: 48px 16px; text-align: center; font-size: 17px; color: #fff; }
/* 공통 기준(누르는 요소 높이 44px 이상, 본문 글자 16px 이상)에 맞춰 아티팩트보다 조금 키운 것 */
.vt .pill { min-height: 44px; }
.vt .back { min-height: 44px; font-size: 16px; white-space: nowrap; }
/* 낮은 화면에서 아티팩트는 줄들을 납작하게 줄여 한 화면에 넣었다. 버튼을 44px로 키우니 줄끼리 겹쳐서,
   줄은 줄어들지 않게 하고 넘치는 만큼은 테스트 칸 안에서 스크롤된다 (카톡 312×520 등) */
.vt .app.fit > .hdr, .vt .app.fit .screen > * { flex-shrink: 0; }
.vt .langmenu button { min-height: 44px; }
.vt #sheet .x { width: 44px; height: 44px; }
.vt .app.fit .opt { min-height: clamp(44px, 6.4cqh, 56px); font-size: clamp(16px, 2.1cqh, 17px); }
.vt .kw li, .vt .day span, .vt .tip, .vt .zine p { font-size: 16px; }
/* ===== 마을 테스트 블록 끝 ===== */