/* Liquid Cities — 소개 홈페이지 공통 스타일
   앱과 동일 톤: 흰 배경 · 검정 · Helvetica(영문)/Noto Sans KR(한글) · 얇은 라인 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700&family=Noto+Serif+KR:wght@500;600;700&display=swap');
:root {
  --bg: #ffffff; --panel: #f4f4f5; --line: #e2e2e4; --ink: #000; --dim: #6b7076;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; background: var(--bg); color: var(--ink);
  word-break: keep-all; overflow-wrap: break-word; /* 한국어 단어 중간 끊김 방지 */
  /* 영문은 Helvetica 계열, 한글 글리프는 Noto Sans KR로 폴백 */
  font-family: "Helvetica Neue", Helvetica, Arial, "Noto Sans KR", sans-serif;
  font-weight: 400; -webkit-font-smoothing: antialiased;
}
a { color: inherit; }

/* ---- 공통 헤더 (marazuest 3단: 1행 로고+언어(검정) / 2행 메뉴 / 3행 필터) ----
   항상 화면 상단에 고정 */
.hdr { width: 100%; background: var(--bg); position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  font-size: 14px; color: rgba(0,0,0,0.75); }
/* 고정 헤더 높이만큼 본문을 아래로 밀기 (JS가 --hdrH 설정) */
body { padding-top: var(--hdrH, 96px); }
/* marazuest: 좌우 여백 20px, 상하 14px */
.hdr-row { width: 100%; margin: 0; padding: 14px 20px; display: flex;
  justify-content: space-between; align-items: center; }
/* 1행: 흰 배경 바 (로고 좌 · 언어토글 우) — 아래 블랙 라인으로 구분 */
.hdr-top { background: #fff; color: var(--ink); font-weight: 500; font-size: 14px;
  border-bottom: 1px solid var(--ink); }
.hdr-top a { color: var(--ink); }
.hdr-brand { flex: 0 0 auto; }
/* 2행: 메뉴 — 흰 배경, 중앙 정렬, 간격 18px, 아래 라인. (상하 여백은 .hdr-row 14px) */
.hdr-menu { justify-content: center; gap: 18px;
  border-bottom: 1px solid var(--ink); }
/* 기본은 밑줄 없음, 선택된(active) 항목만 밑줄 (marazuest 방식). 색은 블랙, 14px */
.hdr-link { flex: 0 0 auto; font-weight: 500; font-size: 14px; cursor: pointer;
  color: var(--ink); text-decoration: none; text-underline-offset: 3px; }
.hdr-link:hover { opacity: 0.6; }
.hdr-link.active { text-decoration: underline; }
/* 우측 언어 토글 (검정 바 안 — 흰색 계열, 14px) */
.hdr-right { display: flex; align-items: center; gap: 14px; }
.hdr-lang { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.hdr-lang .lang-btn { text-decoration: none; color: var(--dim); cursor: pointer; }
.hdr-lang .lang-btn:hover { opacity: 0.8; }
.hdr-lang .lang-btn.active { color: var(--ink); font-weight: 600; }
.hdr-lang .lang-sep { color: var(--dim); }

/* ---- 상단 필터 바 (marazuest식) — 헤더 바로 아래 sticky ---- */
/* 필터 바도 marazuest처럼 중앙 정렬 (간격 15px). 상하 여백은 검정 바와 동일(14px) */
.filter-bar { display: flex; justify-content: center; gap: 15px; padding: 14px 20px;
  border-bottom: 1px solid var(--ink); background: var(--bg);
  position: sticky; top: var(--hdrH, 96px); z-index: 900; font-size: 14px; }
/* 링크는 모두 블랙, 선택된 항목만 밑줄로 구분 */
.filter-link { color: var(--ink); text-decoration: none; cursor: pointer; font-weight: 500;
  white-space: nowrap; text-underline-offset: 3px; }
.filter-link:hover { opacity: 0.7; }
.filter-link.active { color: var(--ink); text-decoration: underline; }
.filter-bar::-webkit-scrollbar { display: none; }
.filter-bar { scrollbar-width: none; }

/* ---- About>Projects: 가로 읽기 매거진 (Untold Stories 스타일) ----
   칼럼 높이 = 화면(헤더·필터바·푸터 제외)에 고정. 섹션은 한 칼럼 고정 폭이고
   긴 글은 옆으로 늘어나지 않고 섹션 안에서 세로 스크롤된다. */
.stories { display: flex; align-items: stretch; overflow-x: auto; overflow-y: hidden;
  /* 푸터 라인까지 이어지도록 살짝 겹침(고정 푸터가 위를 덮음) — 세로 구분선 끊김 방지 */
  height: calc(100vh - var(--hdrH, 96px) - var(--filterH, 45px) - 38px);
  scrollbar-width: thin; }
.story { flex: 0 0 376px; height: 100%; overflow-y: auto;
  padding: 26px 28px 190px; scrollbar-width: thin; } /* 하단 여백 ~5cm — 끝까지 스크롤해도 숨 쉴 공간 */
.story { background: #fff; border-right: 1px solid var(--ink); } /* 톤 교차 대신 선으로 구분 */
.story:last-child { border-right: none; }
.story .story-title { font-size: 26px; font-weight: 500; letter-spacing: -0.01em;
  line-height: 1.15; margin: 2px 0 16px; text-align: left; white-space: nowrap; }
  /* 한 줄 고정 — 긴 타이틀은 JS가 폰트를 줄여 맞춤 → 본문 시작 위치 동일 */
.story .story-date { font-size: 12px; color: var(--dim); margin: 0 0 20px;
  font-family: ui-monospace, Menlo, monospace; }
.story { color: #000; } /* 스토리 텍스트는 순수 블랙 */
.story .article-body { font-size: 14px; line-height: 1.8; color: #000; }
.story .article-body p { margin: 0 0 14px; font-size: 14px; }
/* 편집기 사이즈 단계 (# 크게 / ## 중간) — 전역 h2·h3(13px)가 아닌 매거진 크기로 */
.story .article-body h2 { font-size: 20px; font-weight: 500; margin: 20px 0 8px; }
.story .article-body h3 { font-size: 16px; font-weight: 500; margin: 16px 0 6px; }
.story .article-body h4 { font-size: 14px; font-weight: 600; margin: 14px 0 6px; }
.story img { max-width: 100%; display: block; margin: 12px 0; break-inside: avoid; }
/* 모바일: 가로 읽기는 불편 — 일반 세로 스택으로 전환 */
@media (max-width: 640px) {
  .stories { display: block; height: auto; overflow: visible; }
  .story { columns: auto; height: auto; width: auto !important; padding: 24px 18px; }
  .story { border-right: none; border-bottom: 1px solid var(--ink); } /* 세로 스택은 가로 구분선 */
  .story:last-child { border-bottom: none; }
  /* 모바일 가독성: 본문·타이틀 폰트 확대 */
  .story .story-title { font-size: 28px; }
  .story .article-body, .story .article-body p { font-size: 16px; }
  .story .article-body h2 { font-size: 22px; }
  .story .article-body h3 { font-size: 18px; }
  .story .article-body h4 { font-size: 16px; }
}

/* ---- About 현장 편집 (관리자 세션에서만 표시) ---- */
.story-edit { display: block; margin: 0 0 12px; padding: 4px 10px; font-size: 12px;
  border: 1px solid var(--line); color: var(--dim); background: #fff; border-radius: 2px; }
.story.editing { flex: 0 0 560px; overflow-y: auto; } /* 편집 폼은 넓게 + 세로 스크롤 */
.story-editor label { display: block; font-size: 12px; color: var(--dim); margin: 12px 0 4px; }
.story-editor textarea { min-height: 180px; }

/* Emotional map 소개 한 줄 (필터 바 아래 고정) */
#mapCaption { position: fixed; left: 0; right: 0;
  top: calc(var(--hdrH, 96px) + var(--filterH, 40px)); z-index: 900;
  background: var(--bg); border-bottom: 1px solid var(--ink);
  padding: 9px 20px; font-size: 13px; }
.map-frame-inline.with-caption {
  top: calc(var(--hdrH, 96px) + var(--filterH, 40px) + 36px) !important;
  height: calc(100vh - var(--hdrH, 96px) - var(--filterH, 40px) - 36px) !important; }
@media (max-width: 640px) { #mapCaption { font-size: 12px; padding: 8px 18px; } }

/* Projects의 감정맵 iframe — 헤더 + 필터 바 아래 화면을 채움
   (map.html의 .map-frame과 달리 헤더/필터 바를 남긴다) */
.map-frame-inline { position: fixed; left: 0; right: 0; bottom: 0;
  top: calc(var(--hdrH, 96px) + var(--filterH, 40px)); width: 100%;
  height: calc(100vh - var(--hdrH, 96px) - var(--filterH, 40px));
  border: none; display: block; }

/* ---- 공통 콘텐츠 폭·타이포 ---- */
.wrap { width: 100%; padding: 34px 26px 90px; }
.narrow { max-width: 680px; }
h1 { font-size: 13px; font-weight: 500; letter-spacing: 0; margin: 0 0 8px; }
h2 { font-size: 13px; font-weight: 500; margin: 30px 0 8px; }
.sub { color: var(--dim); font-size: 13px; font-weight: 400; margin: 0 0 24px; line-height: 1.6; }
p { font-size: 13px; font-weight: 400; line-height: 1.75; }
.caption { font-size: 11px; color: var(--dim); }

button, .btn {
  background: #fff; color: var(--ink); border: 1px solid var(--ink);
  padding: 11px 20px; border-radius: 3px; font-size: 13px; font-weight: 400;
  cursor: pointer; font-family: inherit; text-decoration: none; display: inline-block;
}
button:hover:not(:disabled), .btn:hover { background: var(--ink); color: #fff; }
button.secondary { border-color: var(--line); color: var(--dim); }
button:disabled { opacity: 0.35; cursor: default; }
input[type=text], input[type=email], input[type=password], textarea, select {
  width: 100%; background: #fff; border: 1px solid var(--line); color: var(--ink);
  padding: 12px 14px; border-radius: 3px; font-size: 16px; font-family: inherit; font-weight: 300;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--ink); }
textarea { min-height: 220px; resize: vertical; line-height: 1.7; }

/* ---- 메인: 스크롤 등장 사진 흐름 ---- */
.hero { min-height: 78vh; display: flex; flex-direction: column; justify-content: center;
  padding: 0 26px; }
.hero .kicker { font-size: 13px; color: var(--dim); margin: 0 0 14px; }
.hero .head { font-size: clamp(28px, 6vw, 64px); font-weight: 300; line-height: 1.05;
  letter-spacing: -0.02em; margin: 0; }
.hero .head b { font-weight: 500; }
.scroll-hint { margin-top: 40px; font-size: 12px; color: var(--dim); }

/* ---- 제자리 확대 교체 (heatbureau 레퍼런스) ----
   화면은 그대로 고정된 채, 한 자리(중앙)에서 사진이 작게 튀어나와 커지고
   다음 사진으로 교체된다. 스크롤은 "재생 타임라인" 역할만 한다.
   .zoomflow가 세로로 긴 스크롤 길이를 갖고, 그 안 .zoom-stage가 sticky로
   화면에 고정되며, JS가 스크롤 진행도로 현재 사진과 scale을 정한다. */
.zoomflow { position: relative; }
.zoom-stage { position: sticky; top: calc(var(--hdrH, 96px) + var(--filterH, 45px));
  /* 헤더+필터 바로 아래에 처음부터 고정 — 스크롤해도 텍스트·사진 위치 불변 */
  height: calc(100vh - var(--hdrH, 96px) - var(--filterH, 45px) - 40px); overflow: hidden;
  display: flex; align-items: center; justify-content: center; background: var(--bg); }
.zoom-photo { position: absolute; text-align: center; will-change: transform, opacity;
  opacity: 0; pointer-events: none; }
.zoom-photo.on { pointer-events: auto; }
.zoom-photo img { display: block; margin: 0 auto; max-width: 18vw; max-height: 20vh;
  width: auto; height: auto; background: transparent; } /* 투명 PNG · 격자 분산(겹침·잘림 없음) */
@media (max-width: 600px) {
  .zoom-photo img { max-width: 40vw; max-height: 16vh; }
}
/* 시퀀스 대형 텍스트 (인트로/아웃트로) — 무대 중앙 고정 */
.seq-text { position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; padding: 0 26px;
  pointer-events: none; opacity: 0; will-change: opacity, transform; }
.seq-text span { font-size: clamp(32px, 8vw, 92px); font-weight: 500; letter-spacing: -0.02em;
  line-height: 1.02; text-align: center; }
#introText { z-index: 5; }     /* 인트로: 사진보다 아래(중앙은 비워둠) */
#outroText { z-index: 100; }   /* 아웃트로: 맨 위 */
.scroll-hint { position: fixed; bottom: 62px; left: 0; right: 0; text-align: center;
  font-size: 12px; color: var(--dim); z-index: 60; transition: opacity 0.4s; }

/* ---- 리스트(블로그/에세이) ---- */
.post-row { display: block; padding: 26px 0; border-bottom: 1px solid var(--line);
  text-decoration: none; }
.post-row:hover .post-title { opacity: 0.6; }
.post-title { font-size: 13px; font-weight: 500; text-decoration: underline;
  text-underline-offset: 3px; margin: 0 0 8px; }
.post-date { font-size: 11px; color: var(--dim); }
.post-excerpt { font-size: 13px; font-weight: 300; color: var(--ink); line-height: 1.7;
  margin: 8px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---- 개별 글 본문 (마크다운 렌더) ---- */
.article { max-width: 680px; }
.article h1 { font-size: 21px; font-weight: 500; margin: 0 0 6px; letter-spacing: -0.01em; }
.article .post-date { margin-bottom: 30px; display: block; }
.article-body { font-size: 15px; font-weight: 300; line-height: 1.85; }
.article-body h2 { font-size: 16px; margin: 34px 0 10px; }
.article-body h3 { font-size: 14px; margin: 26px 0 8px; }
.article-body p { font-size: 15px; margin: 0 0 18px; }
.article-body img { max-width: 100%; display: block; margin: 24px 0; }
.article-body a { text-decoration: underline; text-underline-offset: 3px; }
.article-body blockquote { margin: 18px 0; padding-left: 16px; border-left: 2px solid var(--line);
  color: var(--dim); }
.article-body ul, .article-body ol { padding-left: 20px; }

/* ---- 맵 임베드 (풀스크린) ----
   iframe은 replaced element라 top+bottom만으론 안 늘어남(기본 높이 150px가 이김).
   height를 명시해 헤더 아래 화면 전체를 채운다. */
.map-frame { position: fixed; left: 0; right: 0; bottom: 0; top: var(--hdrH, 96px);
  width: 100%; height: calc(100vh - var(--hdrH, 96px)); border: none; display: block; }

.status { font-size: 13px; color: var(--dim); margin-top: 12px; }
.err { color: #c0392b; font-size: 13px; margin-top: 12px; }
/* 항상 화면 하단에 고정 */
.footer { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000; background: var(--bg);
  padding: 14px 20px; border-top: 1px solid var(--ink);
  font-size: 14px; font-weight: 500; color: var(--ink); } /* 헤더와 동일 폰트·크기·색 */
/* 고정 푸터에 콘텐츠가 가리지 않게 하단 여백 */
body { padding-bottom: 52px; }
/* 맵(iframe 풀스크린) 페이지는 푸터 숨김 */
body.map-page .footer { display: none; }
/* Projects의 emotional-map 필터(inline iframe)일 때도 푸터 숨김 */
body.proj-map .footer { display: none; }
/* 맵은 fixed iframe이 화면을 꽉 채우므로 body 여백 제거 (잘림 방지) */
body.map-page { padding-top: 0; padding-bottom: 0; }

@media (max-width: 600px) {
  .hero .head { font-size: 30px; }
  .photo-item { margin: 10vh 0; }
}

/* ---- 모바일: 메뉴·필터 바 가로 스크롤 (3단 구조는 그대로 세로로 쌓임) ---- */
@media (max-width: 640px) {
  /* 좌우 여백만 18px로 (상하 14px 통일은 각 요소가 유지) */
  .hdr-row { padding-left: 18px; padding-right: 18px; }
  /* 메뉴·필터: 가운데 정렬 — 화면보다 넓어지면 auto 마진이 0으로 풀려
     왼쪽부터 가로 스크롤이 된다 (center+overflow 조합의 왼쪽 잘림 회피) */
  .hdr-menu { justify-content: flex-start; gap: 16px; overflow-x: auto;
    white-space: nowrap; scrollbar-width: none; }
  .hdr-menu::-webkit-scrollbar { display: none; }
  .hdr-menu > :first-child { margin-left: auto; }
  .hdr-menu > :last-child { margin-right: auto; }
  .hdr-link { flex: 0 0 auto; font-size: 14px; } /* 상위·하위 메뉴 폰트 동일(14px) */
  .filter-bar { justify-content: flex-start; overflow-x: auto; white-space: nowrap;
    padding-left: 18px; padding-right: 18px; gap: 16px; scrollbar-width: none; }
  .filter-bar::-webkit-scrollbar { display: none; }
  .filter-bar > :first-child { margin-left: auto; }
  .filter-bar > :last-child { margin-right: auto; }
  .filter-link { flex: 0 0 auto; font-size: 14px; }
  .wrap { padding-left: 18px; padding-right: 18px; }
  p { font-size: 15px; }
  .sub { font-size: 15px; }
}

/* ---- Fieldwork: 가로 선으로 구분된 도시 목록 ---- */
.field-row { padding: 26px 28px; font-size: 76px; font-weight: 400; line-height: 1.1;
  border-bottom: 1px solid var(--ink); }
@media (max-width: 640px) { .field-row { padding: 20px 18px; font-size: 56px; } }
.field-row { cursor: pointer; color: var(--ink); }
.field-back { display: inline-block; margin: 20px 28px 0; font-size: 13px; color: var(--dim);
  text-decoration: underline; text-underline-offset: 3px; }
.field-row:hover { opacity: 0.6; }
.field-body { padding: 6px 28px 40px; border-bottom: 1px solid var(--ink); }
.field-body > * { max-width: 680px; margin-left: auto; margin-right: auto; } /* 본문 컬럼 페이지 중앙 */
.field-body img { max-width: 100%; display: block; margin: 12px 0; }
.field-body .article-body { font-size: 14px; line-height: 1.8; color: #000; }
@media (max-width: 640px) { .field-body { padding: 6px 18px 32px; } }
.field-row.dim { color: #c9ccd0; cursor: default; } /* 더 연한 회색 */
.field-row.dim:hover { opacity: 1; }

/* ---- Archiving: 좌 인덱스 목록 / 우 이미지 그리드 (Tambourine 레퍼런스) ---- */
.arch-split { display: grid; grid-template-columns: 1fr 1fr;
  height: calc(100vh - var(--hdrH, 96px) - var(--filterH, 45px) - 38px); }
.arch-list { overflow-y: auto; border-right: 1px solid var(--ink); scrollbar-width: thin; }
.arch-search { position: sticky; top: 0; z-index: 10; background: var(--bg);
  border-bottom: 1px solid var(--ink); padding: 13px 20px; }
.arch-search input { border: none; padding: 4px 0; font-size: 14px; width: 100%;
  border-radius: 0; background: transparent; }
.arch-search input:focus { outline: none; }
.arch-empty { padding: 16px 20px; font-size: 13px; color: var(--dim); }
.arch-row { display: flex; align-items: baseline; gap: 14px; padding: 13px 20px;
  border-bottom: 1px solid var(--line); font-size: 13px; text-decoration: none;
  color: var(--ink); }
.arch-row:hover { background: var(--panel); }
.arch-row .w { flex: 1 1 auto; font-weight: 500; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arch-row .m { flex: 0 0 auto; max-width: 34%; color: var(--dim); text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arch-row .d { flex: 0 0 auto; color: var(--dim); font-size: 11px;
  font-family: ui-monospace, Menlo, monospace; }
.arch-row .arr { flex: 0 0 auto; }
.arch-grid { overflow-y: auto; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 30px 22px; padding: 26px 24px 120px; align-content: start; scrollbar-width: thin; }
.arch-cell { display: block; text-decoration: none; color: var(--ink); }
.arch-cell img { width: 100%; display: block; background: #fff; }
.arch-cell .noimg { width: 100%; aspect-ratio: 1; background: var(--panel); }
.arch-cell .cap { font-size: 13px; margin-top: 8px; }
.arch-cell:hover { opacity: 0.7; }
/* 상세 — 오른쪽 반 패널 */
.arch-panel { position: fixed; right: 0; width: 50%;
  top: calc(var(--hdrH, 96px) + var(--filterH, 45px)); bottom: 38px;
  background: var(--bg); border-left: 1px solid var(--ink); z-index: 950;
  overflow-y: auto; padding: 0 26px 80px; scrollbar-width: thin; }
.arch-panel-top { position: sticky; top: 0; display: flex; justify-content: flex-end;
  background: var(--bg); padding: 8px 0 4px; z-index: 5; } /* 스크롤해도 X 고정 */
.arch-close { border: none; background: none; font-size: 22px; line-height: 1;
  padding: 4px 8px; cursor: pointer; color: var(--ink); }
.arch-close:hover { opacity: 0.6; background: none; color: var(--ink); }
.arch-panel video.arch-photo { max-width: 420px; width: 100%; display: block; margin: 6px 0 20px; background: #fff; }
.arch-thought { font-size: 14px; margin: 0 0 10px; }
.arch-cap { font-size: 12px; color: var(--dim); margin: 0 0 22px;
  font-family: ui-monospace, Menlo, monospace; }
@media (max-width: 640px) { .arch-panel { width: 100%; } }
.arch-photo { max-width: 420px; width: 100%; display: block; margin: 6px 0 20px; }
.arch-word { font-size: 26px; font-weight: 500; margin: 0 0 18px; }
.arch-field { display: flex; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line);
  font-size: 13px; }
.arch-field .lbl { flex: 0 0 120px; color: var(--dim); }
.arch-field .val { flex: 1; line-height: 1.7; }
/* 모바일: 목록 숨기고 그리드만(캡션으로 정보 전달) */
@media (max-width: 640px) {
  .arch-split { display: block; height: auto; }
  .arch-list { display: none; }
  .arch-grid { grid-template-columns: repeat(2, 1fr); padding: 20px 18px 90px; }
}

/* ---- Manifesto: 항목별 필드 (가로선 구분, 본문 굵기 + 타이틀 크기) ---- */
/* 구분선이 화면 끝까지 닿도록 wrap 좌우 패딩을 상쇄하고 항목 안쪽에 패딩 */
/* 첫 항목 위 간격 = 항목 사이 간격(60px)과 동일하게 (wrap 상단 34px 보정) */
.mani-list { padding: 0 0 70px; margin: -4px -26px 0; }
.mani-item { display: flex; gap: 26px; padding: 30px 26px; border-bottom: 1px solid var(--ink);
  align-items: baseline; }
.mani-num, .mani-text { font-size: 26px; font-weight: 400; line-height: 1.5; } /* 번호·본문 동일 */
.mani-num { flex: 0 0 auto; }
.mani-text { margin: 0; max-width: 980px; }
@media (max-width: 640px) {
  .mani-list { margin: -12px -18px 0; } /* 모바일: 위 간격 = 항목 간격(44px) */
  .mani-item { gap: 14px; padding: 22px 18px; }
  .mani-num, .mani-text { font-size: 20px; }
}

/* 도시 상세의 이벤트 행 — 헤더와 같은 간격(상하 14px·좌우 20px), 가로줄 구분 */
.fw-event-row { padding: 14px 20px; border-bottom: 1px solid var(--ink);
  font-size: 14px; font-weight: 500; color: var(--ink); cursor: pointer; }
.fw-event-row:hover { opacity: 0.6; }
@media (max-width: 640px) { .fw-event-row { padding: 14px 18px; } }

/* Research Question — 볼드 문장(질문): 타이틀 크기 + 얇은 굵기 + 이탤릭 + 가운데 */
.story--rq .article-body strong { display: block; font-size: 26px; font-weight: 300;
  font-style: italic; text-align: center; line-height: 1.5; }
@media (max-width: 640px) { .story--rq .article-body strong { font-size: 22px; } }

/* 매거진 티저 칼럼 (Who's next? 등) — 연한 회색, 클릭 없음 */
.story--teaser .story-title { color: #c9ccd0; }

/* 잠시 가림 처리 — 블러 + 상호작용 차단 */
.lc-blurred { filter: blur(8px); pointer-events: none; user-select: none; }
/* 크로스오리진 iframe용 — 위에 덮는 반투명 블러 막 */
.lc-blur-shade { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  background: rgba(255,255,255,0.35); z-index: 500; }

/* About 편집 — 섹션 추가 칼럼 */
.story--add { display: flex; align-items: center; justify-content: center; }
.story-add-btn { font-size: 15px; padding: 10px 18px; border: 1px dashed var(--ink);
  background: #fff; cursor: pointer; }

/* About 편집 — 칼럼 상단 관리 버튼 줄 (Edit + 삭제) */
.story-admin-row { display: flex; gap: 6px; margin: 0 0 12px; }
.story-admin-row .story-edit { margin: 0; }
.story-del { color: #c00; border-color: #c00; }

/* 블러 위 안내 문구 — 선명하게 중앙 표시 */
.lc-blur-msg { position: fixed; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  text-align: center; z-index: 600; pointer-events: none;
  font-size: 15px; font-weight: 500; color: var(--dim); }
@media (max-width: 640px) { .lc-blur-msg { font-size: 14px; } } /* 헤더 메뉴와 동일 */