:root {
  --bg: #f2ede6;
  --ink: #2a2520;
  --ink-soft: #6e6760;
  /* 서비스 전체 그린을 한 단계 진하게(2026-08-26, "서비스에 있는 초록색을 일괄적으로
     진한 색으로 반영해줘. 확실히 식별되어야 한다") — src/styles/main.css(3D 앱)와
     동일하게 맞춤. 기존 --green-deep 값을 새 기본 --green으로 올리고, hover/강조용
     --green-deep은 그보다 한 단계 더 진하게 재설정 */
  --green: #3a5e47;
  --green-deep: #294634;
  --line: rgba(42, 37, 32, 0.12);
  --card-bg: #fbf8f3;
  /* 경고/삭제 역할에 #a23b3b/#c64a4a/#d0483f/#dc5050 4가지 빨강이 컴포넌트마다
     따로 쓰이던 걸 하나로 통합(2026-09-03 디자인 검토 #4) — 텍스트(에러 문구)로
     가장 많이 쓰이던 값(대비가 가장 좋음)을 기준으로 채택 */
  --danger: #a23b3b;
  --danger-tint: rgba(162, 59, 59, 0.12);
}

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

html, body {
  height: 100%;
}

body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.landing {
  min-height: 100vh;
  max-width: 1080px;
  margin: 0 auto;
  padding: 80px 32px 48px;
  display: flex;
  flex-direction: column;
}

.landing-header {
  text-align: center;
  margin-bottom: 56px;
}

.landing-eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 14px;
}

.landing-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: clamp(2.4rem, 4vw + 1rem, 3.6rem);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 12px;
}

.landing-sub {
  font-size: 1.05rem;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
  max-width: 34em;
  margin: 0 auto;
}

/* ── 주요 기능 ── */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 36px;
  padding: 48px 0 64px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 72px;
}

.feature-num {
  display: block;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--green);
  margin-bottom: 10px;
}

.feature-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--ink);
  margin-bottom: 8px;
}

.feature-desc {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--ink-soft);
}

/* ── 전시 쇼케이스 ── */
.showcase {
  margin-bottom: 80px;
  text-align: center;
}
.showcase-cta { display: inline-block; }

.section-head {
  text-align: center;
  margin-bottom: 36px;
}

.section-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 8px;
}

.section-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: 1.6rem;
  color: var(--ink);
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
}

/* ── 요금제 ── */
.pricing {
  margin-bottom: 72px;
}

.pricing-sub {
  text-align: center;
  font-size: 0.9rem;
  color: var(--ink-soft);
  max-width: 30em;
  margin: 0 auto 40px;
}

.price-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  max-width: 700px;
  margin: 0 auto;
}
/* 웹(≥900px)에서 씨앗·새싹·나무·숲 4개를 한 줄에(2026-09-06, "3개 나란히
   배열해줘" → 2026-09-14 "숲" 티어 추가로 4개로 확장) — max-width:700px가
   4*240px+3*24px(1032px)보다 훨씬 좁아 auto-fit이 여러 줄로 줄바꿈하던 문제.
   그 아래 폭에서는 기존 auto-fit(태블릿 2열/모바일 1열)을 그대로 둠 */
@media (min-width: 900px) {
  .price-cards { grid-template-columns: repeat(4, 1fr); max-width: 1040px; }
}

.price-card {
  position: relative;
  text-align: center;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 40px 28px 32px;
}

.price-card-featured {
  border-color: rgba(78, 124, 95, 0.4);
  box-shadow: 0 24px 48px -28px rgba(78, 124, 95, 0.35);
}

.price-promo {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--green-deep);
  background: rgba(78, 124, 95, 0.12);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
}

.price-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--ink);
  margin-bottom: 10px;
}

.price-amount {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 2.2rem;
  color: var(--ink);
  margin-bottom: 24px;
}

.price-unit {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-left: 2px;
}

.price-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}

.price-features li {
  font-size: 0.88rem;
  color: var(--ink-soft);
  padding-left: 22px;
  position: relative;
}

.price-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: 500;
}

/* 준비 중 tier(새싹·나무, 2026-09-05) — 씨앗과 나란히 보이되 아직 못 산다는 걸
   은은하게 표시 */
.price-card-soon { opacity: 0.72; }
.price-promo-muted { color: var(--ink-soft); background: rgba(42, 37, 32, 0.08); }

.pricing-tbd {
  max-width: 420px;
  margin: 0 auto;
  text-align: center;
  background: var(--card-bg);
  border: 1px dashed var(--line);
  border-radius: 4px;
  padding: 40px 28px;
}

.pricing-tbd-text {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--ink-soft);
}

.pricing-note {
  text-align: center;
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin-top: 28px;
}

/* ── 작가 등록 CTA ── */
.cta {
  text-align: center;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 56px 32px;
  margin-bottom: 24px;
}

.cta-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: 1.7rem;
  color: var(--ink);
  margin-bottom: 10px;
}

.cta-desc {
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin-bottom: 28px;
}

.cta-btn {
  display: inline-block;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--green);
  padding: 14px 32px;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}

.cta-btn:hover,
.cta-btn:focus-visible {
  background: var(--green-deep);
  transform: translateY(-2px);
  outline: none;
}

.cta-btn {
  border: none;
  cursor: pointer;
  font-family: inherit;
}

/* ── 작가 등록 신청 폼 ── */
.apply-box {
  max-width: 420px;
  margin: 0 auto;
}

.apply-login-note {
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin-top: 12px;
  line-height: 1.5;
}

.apply-form {
  display: none;
  flex-direction: column;
  gap: 16px;
  text-align: left;
  margin-top: 8px;
}

.apply-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

.apply-label input,
.apply-label textarea,
.apply-label select {
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 10px 12px;
  resize: vertical;
}

.apply-label input:focus,
.apply-label textarea:focus,
.apply-label select:focus {
  outline: none;
  border-color: var(--green);
}

.apply-id-row {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  overflow: hidden;
}

.apply-id-prefix {
  padding: 10px 0 10px 12px;
  font-size: 0.82rem;
  color: var(--ink-soft);
  white-space: nowrap;
}

.apply-id-row input {
  border: none;
  border-radius: 0;
  flex: 1;
  min-width: 0;
}

.apply-id-row input:focus {
  border: none;
}

.apply-hint { font-size: 0.78rem; min-height: 1.2em; }
.apply-hint-ok { color: var(--green-deep); }
.apply-hint-error { color: var(--danger); }

/* 전시실 규모(S/미니) 선택 라디오 그룹(2026-09-11, 체크박스에서 라디오 2택으로 전환 —
   "초간단 시작"이 선택 안 하면 사라지는 부가 옵션이 아니라 S와 대등한 선택지임을 표현) */
.apply-hall-preset-group { display: flex; flex-direction: column; gap: 8px; }
.apply-hall-preset-option { display: flex; flex-direction: column; gap: 6px; background: var(--card-bg); border: 1px solid var(--line); border-radius: 4px; padding: 12px 14px; cursor: pointer; }
.apply-hall-preset-option:has(input:checked) { border-color: var(--green); }
.apply-hall-preset-row { display: flex; align-items: flex-start; gap: 8px; font-size: 0.85rem; color: var(--ink); letter-spacing: normal; }
.apply-hall-preset-row input { margin-top: 3px; accent-color: var(--green); }
.apply-hall-preset-option .apply-hint { letter-spacing: normal; line-height: 1.6; margin-left: 24px; }
.apply-hall-preset-example {
  align-self: flex-start;
  margin-left: 24px;
  font-size: 0.78rem;
  color: var(--green-deep);
  text-decoration: none;
  border-bottom: 1px solid rgba(78, 124, 95, 0.4);
}
.apply-hall-preset-example:hover { border-color: var(--green-deep); }

.apply-label input[type="file"] {
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--ink-soft);
  padding: 4px 0;
  border: none;
}

.apply-samples-preview {
  display: flex;
  gap: 10px;
}

.apply-sample-thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--line);
}

.apply-form .cta-btn { align-self: flex-start; }

.apply-error { font-size: 0.82rem; color: var(--danger); min-height: 1.2em; }

/* 이용 정책 동의(2026-09-05, COMMERCE_PLAN.md 8절) */
.apply-consent {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 16px 18px;
}
.apply-consent-text {
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: 12px;
}
.apply-consent-text strong { color: var(--ink); font-weight: 600; }
.apply-consent-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--ink);
  cursor: pointer;
}
.apply-consent-check input { margin-top: 3px; accent-color: var(--green); }

.apply-success {
  display: none;
  font-size: 0.95rem;
  color: var(--green-deep);
  background: rgba(78, 124, 95, 0.1);
  border-radius: 4px;
  padding: 16px;
}

.apply-status[hidden] { display: none; }
.apply-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  font-size: 0.95rem;
  background: rgba(78, 124, 95, 0.1);
  border-radius: 4px;
  padding: 20px 16px;
}
.apply-status[hidden] { display: none; }
.apply-status-text { color: var(--ink); line-height: 1.6; }
.apply-status-text strong { color: var(--green-deep); }

/* 승인 완료 직후 "작가 시작 가이드" 링크(2026-09-06) — "지금 보러 가기" 버튼
   바로 다음 단계(로그인→관리자 패널→작품 등록)를 안내하는 문서라, 승인
   화면에서 바로 이어서 볼 수 있게 노출 */
.apply-status-guide-link {
  color: var(--green-deep); font-weight: 500; font-size: 0.85rem;
  text-decoration: none; border-bottom: 1px solid rgba(78,124,95,0.4);
}
.apply-status-guide-link:hover { border-color: var(--green-deep); }

.cta-fallback {
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin-top: 20px;
}

.cta-fallback a { color: var(--ink-soft); }

.card {
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 0.3s ease;
}

.card:hover,
.card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -24px rgba(42, 37, 32, 0.18);
  border-color: rgba(78, 124, 95, 0.4);
  outline: none;
}

.card:hover .card-link,
.card:focus-visible .card-link {
  color: var(--green-deep);
  letter-spacing: 0.04em;
}

.card-cover {
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}

/* 실제 작품 이미지(hyangwon/misun)는 <img>로 삽입 — 검색엔진 이미지 색인·스크린리더 대체 텍스트를
   위해 CSS background-image 대신 진짜 <img alt="">를 씀(2026-08-12 SEO 보강). 그라데이션은
   이미지 로드 전/실패 시 배경으로 계속 깔림. cr처럼 이미지가 없는 카드는 그라데이션만 유지 */
.card-cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.06) 100%);
}

.card-cover[data-gallery="hyangwon"] {
  background: linear-gradient(135deg, #d8e0d2 0%, #a5b89e 50%, #6e8a73 100%);
}

.card-cover[data-gallery="changrim"] {
  background: linear-gradient(135deg, #e8d8c6 0%, #c4a682 50%, #8a6f4f 100%);
}

.card-cover[data-gallery="misun"] {
  background: linear-gradient(135deg, #d6dde2 0%, #a3b4bd 50%, #5f7680 100%);
}

.card-body {
  padding: 32px 28px 36px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card-label {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 0.85rem;
  color: var(--green);
  letter-spacing: 0.06em;
}

.card-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: 2rem;
  color: var(--ink);
  margin-bottom: 4px;
}

.card-desc {
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin-bottom: 16px;
  min-height: 3em;
}

.card-link {
  font-size: 0.9rem;
  color: var(--green);
  letter-spacing: 0.02em;
  font-weight: 500;
  transition: color 0.2s ease, letter-spacing 0.3s ease;
}

.landing-footer {
  margin-top: 64px;
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
}

@media (max-width: 720px) {
  .landing {
    padding: 56px 20px 32px;
  }

  .landing-header {
    margin-bottom: 40px;
  }

  .features {
    grid-template-columns: 1fr 1fr;
    gap: 28px 20px;
    padding: 36px 0 44px;
    margin-bottom: 48px;
  }

  .showcase {
    margin-bottom: 56px;
  }

  .cards {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .card-body {
    padding: 24px 22px 28px;
  }

  .card-name {
    font-size: 1.7rem;
  }

  .cta {
    padding: 40px 24px;
  }
}

/* 낙엽 효과(2026-09-06) — 화면 전체 고정 오버레이. z-index:-1이라 body 배경
   바로 위에서만 그려지고, 그 뒤(음수 z-index) 레이어에 있으므로 배경이 있는
   일반 콘텐츠(카드·앱바 등, 전부 z-index:auto)에는 자연히 가려짐 — .feed-page가
   데스크톱에서 560px로 좁게 가운데 정렬돼 있어(바로 아래 .feed-page 참고) 그
   양옆 여백에서 특히 잘 보임 */
.feed-leaves-canvas {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
}

/* ── 전시 피드 (메인) ── */
.feed-page {
  max-width: 560px;
  margin: 0 auto;
  /* 하단 떠있는 캡슐 내비 + 그 위에 절반 겹치는 원형 FAB가 콘텐츠를 가리지
     않도록 여유 확보 — 2026-08-22 피드 개편에서 탭바/FAB 추가, 2026-08-23 캡슐형
     내비로 교체 */
  padding: 0 20px 125px;
}

/* 슬림 고정 상단바 — 인스타그램처럼 로그인/마이페이지 진입점이 스크롤 중에도 항상
   보이도록(2026-08-20, 큰 히어로 마스트헤드는 그대로 두고 그 위에 얇은 sticky 바만
   추가 — 히어로 전체를 고정하면 화면을 너무 많이 잡아먹음). 피드 이미지가 뒤로
   스크롤되는 실제 콘텐츠 위라 블러가 자연스러운 자리 — about/mypage 등 플랫 배경
   페이지에는 적용 안 함(글래스모피즘 검토 결론) */
.feed-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 -20px;
  padding: 14px 20px;
  background: rgba(242, 237, 230, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.feed-topbar-brand {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--ink);
  white-space: nowrap;
}
.feed-topbar .feed-masthead-meta { margin-top: 0; flex-wrap: nowrap; }

/* 좁은 화면에서 sticky 바가 2줄로 늘어나면 "슬림 상단바"라는 목적이 무색해짐 —
   about 링크는 페이지 하단(footer)에도 이미 있어 여기서 숨겨도 도달성 손실 없음 */
@media (max-width: 480px) {
  .feed-topbar .feed-meta-divider,
  .feed-topbar .feed-about-link {
    display: none;
  }
}

.feed-masthead {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 0;
  margin-bottom: 28px;
}

.feed-wordmark {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.2rem, 2rem + 2vw, 2.9rem);
  color: var(--ink);
}

.feed-tagline {
  max-width: 34ch;
  color: var(--ink-soft);
  font-size: 1rem;
  margin-top: 8px;
}

/* 로그인 상태/'서비스 소개' 링크를 별개로 쌓지 않고 한 줄의 저채도 유틸리티 묶음으로 —
   제목·태그라인(본문)과 시각적 무게가 다른 부가 정보임을 구분되게 함 */
.feed-masthead-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}

.feed-meta-divider { color: var(--line); font-size: 0.8rem; }

.feed-about-link {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--green-deep);
  text-decoration: none;
  border-bottom: 1px solid rgba(78, 124, 95, 0.4);
}
.feed-about-link:hover { border-color: var(--green-deep); }

/* 사이트 공통 내비게이션 바 — 피드(index.html)를 제외한 5개 landing 페이지(about/
   mypage/admin/admin-accounts/community) 전부 여기에 통일(2026-08-19, "링크 연결이
   유기적이지 않다" 리포트). 이전엔 페이지마다 클래스명·문구·위치가 제각각인
   "뒤로가기" 링크를 따로 구현하고 있었음(landing-footer-back/feed-about-link/
   admin-nav-link/무클래스 4종) — 왼쪽은 항상 "← 피드로 돌아가기"(홈 고정), 오른쪽은
   그 페이지와 실제로 연결되는 이웃 페이지들(예: 관리자 도구 3개는 서로 교차 링크).
   피드(index.html)는 홈 자체라 이 바 대신 이미 더 풍부한 자체 마스트헤드를 씀 */
.page-nav {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px 16px;
  margin-bottom: 16px;
}
.page-nav-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* 피드 상단바(.feed-topbar-brand)와 같은 자리표시 — "랜딩 페이지와 같이 헤더에
   foresto gallery임을 표시"(2026-08-20) 요청으로 sticky 바에도 브랜드 노출.
   about.html 등 아직 page-nav-sticky를 안 쓰는 페이지에도 같이 보이지만
   해가 되지 않아 .page-nav 공통에 둠 */
.page-nav-brand {
  height: 22px;
  width: auto;
  display: block;
}
/* "← 피드로 돌아가기"가 밑줄 텍스트 링크라 옆의 원형 언어 전환 버튼과 비교되며
   허전해 보인다는 피드백(2026-08-27) — 화살표 글자(←) 대신 벡터 아이콘을 쓰고
   테두리 있는 pill 버튼으로 바꿈. 텍스트 쪽 "← " 접두어는 각 페이지 마크업·i18n에서
   제거(아이콘이 그 역할을 대신함) */
.page-nav-home {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit; font-size: 0.82rem; font-weight: 500;
  color: var(--green-deep); text-decoration: none;
  padding: 7px 14px 7px 11px;
  border: 1px solid rgba(78, 124, 95, 0.35);
  border-radius: 999px;
  background: none; cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.2s, background 0.2s;
}
.page-nav-home::before {
  content: '';
  width: 13px; height: 13px;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='M11 18l-6-6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='M11 18l-6-6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.page-nav-home:hover { border-color: var(--green-deep); background: rgba(78, 124, 95, 0.08); }
/* [hidden] 특이도가 더 높은 속성 선택자로 명시 — display:inline-flex가 UA의
   [hidden]{display:none}을 덮어써 hidden=true여도 계속 보이는 함정(이 세션에서
   .feed-comment-form/.feed-comment-gate/.feed-pill-badge에도 같은 이유로 이미
   추가했던 것과 동일 — 여기 .page-nav-home은 빠져 있었음). 실사용 버그로 재현:
   "← 갤러리" 버튼이 ?from= 파라미터 없이도(=hidden=true인 채로) 계속 보이고,
   클릭하면 갱신 안 된 자리표시자 href="#"라 "아무 반응 없는 죽은 버튼"으로 보임
   (2026-09-02, 피드 하단 MY 탭 → 마이페이지 진입 시 리포트) */
.page-nav-home[hidden] { display: none; }
.page-nav-links { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.page-nav-links a {
  font-size: 0.85rem; color: var(--ink-soft); text-decoration: none;
}
.page-nav-links a:hover { color: var(--green-deep); }

/* sticky+블러 변형 — 스크롤이 긴 페이지(마이페이지의 관심 작가·작품·글 목록)에서
   피드 상단바(.feed-topbar)와 같은 방식으로 "← 피드로 돌아가기"를 항상 노출
   (2026-08-20, "마이페이지에서도 일관성을 위해 블러헤더가 필요"). 레시피는
   .feed-topbar와 동일 — 다른 4개 page-nav 사용 페이지(about/admin/admin-accounts/
   community)는 스크롤이 짧아 아직 opt-in 안 함, 필요해지면 이 클래스만 추가 */
.page-nav-sticky {
  position: sticky;
  top: 0;
  z-index: 20;
  /* .page-nav-sticky의 margin이 .page-nav의 margin-bottom을 통째로 덮어써서,
     타이틀 위 여백을 줄이려던 이전 두 차례 수정(.page-nav/.feed-masthead)이
     이 sticky 변형을 쓰는 페이지(사실상 전부, about.html 제외)엔 전혀
     반영되지 않고 있었음(2026-08-27, "여전하다" 재지적으로 발견) */
  margin: 0 -20px 8px;
  padding: 14px 20px;
  background: rgba(242, 237, 230, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.feed-account { display: flex; align-items: center; gap: 14px; }

.feed-login-btn {
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  color: #fff;
  background: var(--green);
  border: none;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
}
.feed-login-btn:hover { background: var(--green-deep); }
.feed-login-btn:disabled { opacity: 0.6; cursor: default; }

.feed-account-info { display: flex; align-items: center; gap: 10px; font-size: 0.82rem; }
.feed-account-info[hidden] { display: none; }

/* 아바타+이름을 하나의 칩으로 묶어 시선을 한곳에 모음 — 예전엔 아바타 옆에 밑줄 그어진
   "마이페이지"·"로그아웃" 두 링크가 나란히 붙어 작은 글자 셋이 빽빽하게 몰려 보였음
   (사용자 피드백, 2026-08-18). 로그아웃은 세로 구분선으로 한 걸음 떼어 놓고 더 작고
   흐리게 눌러, "내 계정" 칩과 "부가 동작"이 한눈에 구분되게 함
*/
.feed-mypage-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.feed-mypage-chip:hover { color: var(--green-deep); }

.feed-logout-btn {
  font-family: inherit;
  font-size: 0.76rem;
  color: var(--ink-soft);
  opacity: 0.75;
  background: none;
  border: none;
  border-left: 1px solid var(--line);
  padding: 0 0 0 10px;
  cursor: pointer;
  text-decoration: none;
}
.feed-logout-btn:hover { opacity: 1; text-decoration: underline; }

.feed-list {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
/* .feed-list 자체의 display:flex(데스크탑에선 grid)가 [hidden]과 명시도가 같아서
   "이야기"/"소통" 필터로 전환해도 게시물 목록이 안 숨겨지던 버그 — 이미
   .feed-mini-avatar/.feed-account-info에서 겪은 것과 동일 패턴(2026-08-23) */
.feed-list[hidden] { display: none; }
/* "작품"/"이야기" 탭 필터링(2026-08-23) — 무한 스크롤로 나중에 추가되는 카드도
   data-type만 맞으면 자동으로 걸러지도록 JS의 개별 hidden 토글 대신 속성 선택자로 처리 */
.feed-list[data-filter="artwork"] .feed-post-full[data-type="story"] { display: none; }
.feed-list[data-filter="story"] .feed-post-full[data-type="artwork"] { display: none; }
/* 굿즈(2026-08-29)는 "작품"/"이야기" 둘 중 어디에도 안 걸리게(두 필터 모두에서 새는
   버그가 될 뻔했음 — data-type이 story도 artwork도 아니라 위 두 규칙 어느 쪽에도
   안 걸림) 별도로 명시. "굿즈" 전용 탭도 같은 날 바로 이어서 추가 — "피드에 굿즈
   보기 버튼 추가해줘" 요청으로 처음엔 "전체"에만 보이던 걸 전용 필터 탭으로 승격 */
.feed-list[data-filter="artwork"] .feed-post-full[data-type="goods"] { display: none; }
.feed-list[data-filter="story"] .feed-post-full[data-type="goods"] { display: none; }
.feed-list[data-filter="goods"] .feed-post-full[data-type="artwork"] { display: none; }
.feed-list[data-filter="goods"] .feed-post-full[data-type="story"] { display: none; }
/* "글"(article) 탭(2026-09-12, WRITER_PLAN.md) — 위와 동일한 패턴으로 추가 */
.feed-list[data-filter="artwork"] .feed-post-full[data-type="article"] { display: none; }
.feed-list[data-filter="story"] .feed-post-full[data-type="article"] { display: none; }
.feed-list[data-filter="goods"] .feed-post-full[data-type="article"] { display: none; }
.feed-list[data-filter="article"] .feed-post-full[data-type="artwork"] { display: none; }
.feed-list[data-filter="article"] .feed-post-full[data-type="story"] { display: none; }
.feed-list[data-filter="article"] .feed-post-full[data-type="goods"] { display: none; }
/* 공지는 일반 피드(전체·작품·작업노트·에세이·굿즈)에는 안 섞이고 "공지" 탭에서만
   완전한 카드로 보임(2026-09-13 — "탭은 유지하고, 일반 피드에는 나오지 말고
   공지 탭에서만 보여줘": 탭을 없앴다가 바로 다시 살림, 배너·팝업은 그대로 유지) */
.feed-post-full[data-type="notice"] { display: none; }
.feed-list[data-filter="notice"] .feed-post-full[data-type="notice"] { display: block; }
.feed-list[data-filter="notice"] .feed-post-full[data-type="artwork"] { display: none; }
.feed-list[data-filter="notice"] .feed-post-full[data-type="story"] { display: none; }
.feed-list[data-filter="notice"] .feed-post-full[data-type="goods"] { display: none; }
.feed-list[data-filter="notice"] .feed-post-full[data-type="article"] { display: none; }
/* "공지 탭에서 필터 pill 바로 아래에 카드가 딱 붙어있다"(2026-09-13) — 다른
   필터는 "지금 핫한 전시"/예정 전시 섹션이 그 자리를 채워 자연스러운 여백이
   생기는데, "공지" 탭은 그 섹션들이 전부 숨겨져(전체 탭 전용) pill 줄→얇은
   구분선→카드로 바로 이어져 유독 좁아 보임. 공지 탭에서만 위쪽 여백 보강 */
.feed-list[data-filter="notice"] { margin-top: 28px; }
/* 공지 탭은 웹 데스크탑에서 전체보기로(2026-09-13, "공지는 격자 형식이 아닌
   전체보기로 구현해줘" — .feed-page가 인스타그램처럼 560px 좁은 열로 가운데
   정렬돼 있어서, 넓은 화면에서는 공지 카드가 좁은 칸 하나에 갇혀 격자 칸처럼
   보였음). 부모의 폭 제한을 벗어나 뷰포트 기준으로 훨씬 넓게 펼침 — 다른
   게시물 타입·필터는 기존 좁은 열 유지, 공지만 예외
   (min-width: 900px)는 .feed-desktop-nav와 같은 데스크탑 기준점 재사용 */
@media (min-width: 900px) {
  /* .feed-list는 이 미디어쿼리 뒤쪽(다른 규칙)에서 display:grid +
     grid-template-columns: repeat(auto-fill, minmax(320px, 1fr))로 다열
     그리드가 됨(여러 게시물이 섞이는 "전체" 탭 등에는 맞지만, 공지 카드
     하나만 있을 땐 그리드 칸 하나 폭(약 320~450px)에 갇혀버려 옆에 빈
     공간만 남았음 — 실제로 라이브에서 이 상태로 재현됨). display를 다시
     block으로 되돌려 그리드 자체를 끔 */
  /* 위 음수 마진 방식은 width가 max-width(900px)에 걸려 잘리는 순간
     계산이 안 맞아 왼쪽으로 쏠려버림(2026-09-13, "화면 정렬이 맞지 않다"
     리포트로 실제 확인 — 900px는 맞는데 뷰포트 중앙이 아니라 왼쪽 끝에
     붙어있었음). margin 대신 position:relative + left:50% +
     translateX(-50%)로 교체 — left:50%는 부모(.feed-page 안쪽) 기준으로
     중앙까지 이동시키고, translateX(-50%)는 그 지점에서 "자기 자신의
     실제 렌더링 폭" 절반만큼 되돌아가므로 max-width로 폭이 얼마로
     잘리든 항상 정확히 가운데에 맞음 */
  .feed-list[data-filter="notice"] {
    display: block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100vw - 80px);
    max-width: 900px;
  }
}

/* 게시물 하나 = 카드 한 장. 예전엔 헤더(작가)·액자(캐러셀)·라벨/메타가 각자 테두리·여백이
   달라 세 조각으로 따로 노는 느낌이었음(사용자 피드백, 2026-08-18) — .feed-post 자체를
   하나의 카드(테두리+배경)로 두고 안의 각 구간은 좌우 패딩만 맞춰 이어지게 함 */
.feed-post {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.feed-skeleton-post {
  height: 420px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: linear-gradient(90deg, var(--card-bg) 25%, rgba(78, 124, 95, 0.08) 50%, var(--card-bg) 75%);
  background-size: 200% 100%;
  animation: mypage-skeleton-pulse 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .feed-skeleton-post { animation: none; }
}

/* 2열 격자 보기(2026-08-26, "피드를 컴팩트하게 보여줄 수 있는 방법은?" 요청) — 카드
   목록(#feed-list)과 같은 데이터로 병행 렌더링해두고 둘 중 하나만 보여줌(뷰 전환 시
   재조회 없이 즉시 전환). .feed-list와 같은 이유로 [hidden]과 display 명시도가 같아
   .feed-grid[hidden] 규칙이 반드시 필요함 */
.feed-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
}
.feed-grid[hidden] { display: none; }
.feed-grid[data-filter="artwork"] .feed-grid-item[data-type="story"] { display: none; }
.feed-grid[data-filter="story"] .feed-grid-item[data-type="artwork"] { display: none; }
.feed-grid[data-filter="artwork"] .feed-grid-item[data-type="goods"] { display: none; }
.feed-grid[data-filter="story"] .feed-grid-item[data-type="goods"] { display: none; }
.feed-grid[data-filter="goods"] .feed-grid-item[data-type="artwork"] { display: none; }
.feed-grid[data-filter="goods"] .feed-grid-item[data-type="story"] { display: none; }
.feed-grid[data-filter="artwork"] .feed-grid-item[data-type="article"] { display: none; }
.feed-grid[data-filter="story"] .feed-grid-item[data-type="article"] { display: none; }
.feed-grid[data-filter="goods"] .feed-grid-item[data-type="article"] { display: none; }
.feed-grid[data-filter="article"] .feed-grid-item[data-type="artwork"] { display: none; }
.feed-grid[data-filter="article"] .feed-grid-item[data-type="story"] { display: none; }
.feed-grid[data-filter="article"] .feed-grid-item[data-type="goods"] { display: none; }
/* 공지는 격자에서도 "공지" 탭에서만(위 .feed-post-full 규칙과 동일 이유) */
.feed-grid-item[data-type="notice"] { display: none; }
.feed-grid[data-filter="notice"] .feed-grid-item[data-type="notice"] { display: block; }
.feed-grid[data-filter="notice"] .feed-grid-item[data-type="artwork"] { display: none; }
.feed-grid[data-filter="notice"] .feed-grid-item[data-type="story"] { display: none; }
.feed-grid[data-filter="notice"] .feed-grid-item[data-type="goods"] { display: none; }
.feed-grid[data-filter="notice"] .feed-grid-item[data-type="article"] { display: none; }
/* 격자 뷰 유형 구분(2026-09-03 디자인 검토 #7: 색 점 → 알파벳 배지 추가 →
   2026-09-13: "그냥 이미지 테두리 색상으로 구분하면 좋겠다"는 요청으로 배지 제거,
   테두리 색으로 단순화. box-sizing:border-box라 테두리가 생겨도 격자 칸 크기는
   그대로 — img는 position:absolute+inset:0라 부모의 패딩 경계(테두리 안쪽)
   기준으로 배치되어 테두리를 가리지 않음. 팔레트는 .feed-post-space-pill/
   .feed-avatar 링과 동일 */
.feed-grid-item {
  position: relative;
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  background: var(--card-bg) center/cover;
  text-decoration: none;
  border: 3px solid var(--green-deep);
}
.feed-grid-item[data-type="story"] { border-color: var(--type-story); }
.feed-grid-item[data-type="article"] { border-color: var(--type-article); }
.feed-grid-item[data-type="goods"] { border-color: var(--type-goods); }
.feed-grid-item[data-type="notice"] { border-color: var(--danger); }
.feed-grid-item img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.feed-grid-item.is-text {
  display: flex; align-items: center; justify-content: center;
  padding: 12px; text-align: center;
  font-size: 0.72rem; line-height: 1.5; color: var(--ink-soft);
  background: var(--card-bg);
}

.feed-list-empty {
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.9rem;
  margin: 40px 0;
}
.feed-list-empty[hidden] { display: none; }

.feed-load-sentinel {
  height: 1px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--ink-soft);
  opacity: 0;
  margin-top: 24px;
  transition: opacity 0.2s ease;
}
.feed-load-sentinel.visible { height: auto; opacity: 1; }

.feed-post-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 0 10px;
}

.feed-follow-btn {
  margin-left: auto;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--green-deep);
  background: none;
  border: 1px solid var(--green);
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
}
.feed-follow-btn:hover { background: rgba(78, 124, 95, 0.08); }
.feed-follow-btn.is-following { background: var(--green); color: #fff; }
.feed-follow-btn:disabled { opacity: 0.6; cursor: default; }

/* 운영자 전용 게시물 삭제(2026-08-25) — 기본 숨김, feed-page.js가 isOperator일 때만 노출 */
.feed-post-delete-btn {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; margin-left: 4px; flex-shrink: 0;
  border: none; background: none; border-radius: 50%;
  color: var(--ink-soft); cursor: pointer; padding: 0;
}
.feed-post-delete-btn:hover { background: var(--danger-tint); color: var(--danger); }
.feed-post-delete-btn:disabled { opacity: 0.5; cursor: default; }
.feed-post-delete-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
/* display:flex 위에서 지정한 게 [hidden]의 기본 display:none을 덮어씀(같은 특이도,
   author 스타일이 나중에 로드돼 이김) — 햄버거 메뉴 아이콘 때와 같은 함정
   (2026-08-23 주석 참고), 여기선 [hidden] 쪽 특이도를 올려서 해결 */
.feed-post-delete-btn[hidden] { display: none; }

/* 운영자 전용 게시물 수정(2026-08-25) — 삭제 버튼과 같은 크기/배치, hover 색만 초록
   계열로 구분(파괴적 동작이 아니므로) */
.feed-post-edit-btn {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; margin-left: 4px; flex-shrink: 0;
  border: none; background: none; border-radius: 50%;
  color: var(--ink-soft); cursor: pointer; padding: 0;
}
.feed-post-edit-btn:hover { background: rgba(78, 124, 95, 0.12); color: var(--green-deep); }
.feed-post-edit-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.feed-post-edit-btn[hidden] { display: none; }

/* 운영자 전용 SNS 이미지 다운로드(2026-08-29) — 수정/삭제 버튼과 같은 크기/배치 */
.feed-post-sns-btn {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; margin-left: 4px; flex-shrink: 0;
  border: none; background: none; border-radius: 50%;
  color: var(--ink-soft); cursor: pointer; padding: 0;
}
.feed-post-sns-btn:hover { background: rgba(78, 124, 95, 0.12); color: var(--green-deep); }
.feed-post-sns-btn:disabled,
.feed-post-sns-btn.is-loading { opacity: 0.5; cursor: wait; }
.feed-post-sns-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.feed-post-sns-btn[hidden] { display: none; }

.feed-post-edit-form { margin-top: 8px; }
.feed-post-edit-name,
.feed-post-edit-textarea {
  width: 100%;
  border: 1px solid var(--green);
  background: #fff;
  color: var(--ink);
  border-radius: 12px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 0.88rem;
}
.feed-post-edit-name { margin-bottom: 6px; }
.feed-post-edit-textarea { resize: vertical; }
.feed-post-edit-name:focus, .feed-post-edit-textarea:focus { outline: none; }
/* 이야기·공지 수정 시 사진 첨부/교체(2026-09-13) — 라벨·미리보기 자체는
   작성 모달의 .feed-modal-confirm-label/.feed-modal-confirm-thumb를 그대로
   재사용(중복 스타일 방지), 이 인라인 편집 폼 컨텍스트에 맞는 여백만 보강 */
.feed-post-edit-photo-label { margin-top: 8px; }
.feed-post-edit-photo-preview { margin-top: 6px; }
.feed-post-edit-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.feed-post-edit-save, .feed-post-edit-cancel {
  font-family: inherit; font-size: 0.8rem; font-weight: 500;
  border-radius: 999px; padding: 6px 14px; cursor: pointer;
}
.feed-post-edit-save { border: none; background: var(--green); color: #fff; }
.feed-post-edit-save:disabled { opacity: 0.6; cursor: default; }
.feed-post-edit-cancel { border: 1px solid var(--line); background: none; color: var(--ink-soft); }

.feed-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(78, 124, 95, 0.14);
  color: var(--green-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
  overflow: hidden;
}
.feed-avatar img { width: 100%; height: 100%; object-fit: cover; }
/* 유형별 헤일로 링(2026-09-13) — pill 색 구분(2026-09-12)과 이후 헤더 왼쪽
   색상 바 두 차례 시도가 전부 아쉽다는 피드백을 받아 최종적으로 이 방식으로
   교체. 아바타 자체(작가/갤러리 고유 식별색)와 배경색 틈을 살짝 띄운 뒤 그
   바깥에 유형색 링을 두름 — 인스타그램 스토리 링과 같은 원리로, 채우기색과
   링색이 안 섞이고 분리돼 보임. overflow:hidden은 위 .feed-avatar 자체의
   내용물(이니셜/이미지)만 자르고 box-shadow는 요소 바깥에 그려지므로 링 표시엔
   영향 없음. 페이지 배경(var(--bg))과 틈 색을 맞춰 어색한 사각 여백처럼
   안 보이게 함 */
.feed-post-full[data-type="story"] .feed-avatar { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5.5px var(--type-story); }
.feed-post-full[data-type="article"] .feed-avatar { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5.5px var(--type-article); }
.feed-post-full[data-type="goods"] .feed-avatar { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5.5px var(--type-goods); }
.feed-post-full[data-type="notice"] .feed-avatar { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5.5px var(--danger); }
.feed-post-full:not([data-type="story"]):not([data-type="article"]):not([data-type="goods"]):not([data-type="notice"]) .feed-avatar { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5.5px var(--green-deep); }

.feed-mini-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(78, 124, 95, 0.14);
  color: var(--green-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.78rem;
  flex-shrink: 0;
  overflow: hidden;
}
.feed-mini-avatar img { width: 100%; height: 100%; object-fit: cover; }
/* .feed-mini-avatar 자체의 display:flex가 [hidden] 속성과 동일 우선순위라 hidden이
   무시되던 버그 — .feed-account-info[hidden]과 동일한 패턴으로 명시적 오버라이드
   (2026-08-23, 로그아웃 상태에서 메뉴 버튼에 빈 원이 같이 보이던 리포트) */
.feed-mini-avatar[hidden] { display: none; }

.feed-swipe-hint {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  padding: 6px 16px;
  background: rgba(42, 37, 32, 0.72);
  color: #fff;
  font-size: 0.76rem;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  white-space: nowrap;
  z-index: 2;
}
.feed-swipe-hint.visible { opacity: 1; }
.feed-swipe-hint.hidden { opacity: 0; }

/* 영문 이름처럼 길면 2줄로 줄바꿈되던 문제(2026-09-02, "언어에 따라 2줄로 나온다"
   리포트) — 한 줄 말줄임(…) 처리. 부모(.feed-post-header-info)는 이미 min-width:0
   이라 줄어들 수 있음 */
.feed-post-name {
  font-weight: 700; font-size: 0.98rem;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0;
}
/* 스토리 작성자명이 /artist/{uid} 링크일 때(2026-08-23) 스타일을 따로 안 줘서 브라우저
   기본 파란 밑줄 링크로 나오던 문제(2026-09-03 UI/UX 검토 리포트) — .feed-comment-name
   과 같은 패턴(색은 상속, 밑줄은 hover/focus에서만) */
.feed-post-name a { color: inherit; text-decoration: none; }
.feed-post-name a:hover, .feed-post-name a:focus { text-decoration: underline; }
.feed-post-tag { font-size: 0.72rem; color: var(--ink-soft); }

/* 벽을 따라 걸린 작품 사이를 걸어 지나가는 감각 — 가운데는 정면, 옆은 복도 깊숙이
   각지어 물러나 보이도록 실제 원근(perspective/rotateY/translateZ)을 준다.
   자체 테두리·배경은 없음 — 카드(.feed-post) 하나가 이미 경계를 이루므로, 이미지
   안쪽에 또 다른 회색 액자를 겹쳐 그리면 액자 속 액자처럼 겉돌아 보였음(2026-08-18) */
.feed-frame {
  position: relative;
  padding: 6px 0;
  overflow: hidden;
}

.feed-stage {
  perspective: 900px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.feed-stage::-webkit-scrollbar { display: none; }

.feed-track { display: flex; padding: 0 8%; gap: 4%; }

.feed-slide {
  flex: 0 0 84%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  transform-style: preserve-3d;
  will-change: transform;
}

.feed-slide img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 2px;
  background: var(--card-bg);
  border: 6px solid var(--card-bg);
  box-shadow: 0 14px 26px -8px rgba(20, 19, 15, 0.3);
}

.feed-edge {
  position: absolute;
  top: 14px;
  bottom: 14px;
  width: 13%;
  pointer-events: none;
  z-index: 2;
}
.feed-edge.left { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.feed-edge.right { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }

.feed-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.feed-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--line);
  transition: background 0.25s ease, transform 0.25s ease;
}
.feed-dot.is-active { background: var(--green-deep); transform: scale(1.4); }

.feed-label {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  padding: 14px 18px 0;
}
.feed-label-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.25rem;
}
.feed-label-medium {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 4px;
}

.feed-post-caption {
  padding: 6px 2px 0;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--ink);
}

/* "이야기" 포스트(2026-08-23, 특정 작품에 안 매인 근황 글) — 이미지+"들어가기" 배지
   대신 본문 텍스트(+선택적 사진)만 있음 */
.feed-story-text {
  padding: 4px 2px 0;
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--ink);
  white-space: pre-wrap;
}
/* 사진이 있으면 사진 다음에 오므로(2026-08-28, "사진이 위로, 글이 아래로" 요청)
   헤더 바로 아래일 때보다 더 넓은 여백 필요 — 사진 없을 때(헤더 직후)의 기본
   padding-top: 4px는 유지하고, 사진 바로 다음일 때만 넓힘 */
.feed-story-image + .feed-story-text { padding-top: 10px; }

/* 공지·이야기 본문 속 URL 링크(2026-09-13, linkifyText() 참고) — 본문 텍스트와
   구분되게 브랜드 그린 + 밑줄. user-select:none인 .feed-editable-text 안에서도
   클릭 자체는 그대로 동작함(복사 방지는 텍스트 선택만 막을 뿐 클릭엔 무관) */
.feed-text-link {
  color: var(--green-deep);
  text-decoration: underline;
  word-break: break-all;
}

/* 공지 제목(2026-09-13, title 필드 도입 — "본문 인사말부터 나와서 무슨 공지인지
   파악이 없다" 리포트) — article 제목과 같은 트리트먼트로 통일 */
.feed-notice-full-title {
  padding: 10px 2px 0;
  margin: 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
}
.feed-notice-full-title + .feed-story-text { padding-top: 4px; }

/* 스토리 본문 접기(2026-09-02, "스토리 게시물 보완" — 긴 근황 글이 피드 한 화면을
   다 차지하던 문제). 실제로 넘치는 글에만 "더보기" 버튼이 뜨도록 feed-page.js가
   scrollHeight로 판정해 .is-clamped/버튼 hidden을 관리함 */
.feed-story-text.is-clamped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.feed-story-more-btn {
  display: block;
  margin: 2px 2px 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--green-deep);
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
}
.feed-story-more-btn:hover { text-decoration: underline; }

/* 캡션/이야기 본문 복사 방지(2026-08-31, "텍스트 복사 방지 기능") — 길게 눌러도
   선택 팝업(복사하기 등)이 안 뜨게 함. 편집용 textarea(.feed-post-edit-textarea)는
   이 글을 감싸는 별도 엘리먼트라 영향 없음(feed-page.js 참고). 실제 뷰 소스로 텍스트를
   보는 것 자체는 막지 못하는 어디까지나 UI 차원의 저지선 */
.feed-editable-text {
  user-select: none;
  -webkit-user-select: none;
}
/* 정사각(1:1) — 작품 포스트(.feed-post-img-full)와 같은 4:5였는데, "들어가기" 3D
   공간 미리보기라 몰입감 있게 크게 보여줄 이유가 있는 작품 포스트와 달리, 이야기는
   짧은 근황 텍스트에 곁들이는 사진이라 화면을 거의 다 채울 만큼 큰 게 과했다는
   리포트(2026-08-27) — 높이를 20% 줄여 텍스트 위주 게시물답게 조정.
   margin-top은 예전엔 텍스트 다음 여백이었는데(2026-08-28, 사진↔글 순서 반전으로)
   이제 헤더 바로 다음 여백 — 텍스트가 헤더 직후일 때 쓰던 4px에 맞춤 */
.feed-story-image {
  width: 100%; aspect-ratio: 1 / 1; border-radius: 16px; margin-top: 4px;
  background-color: var(--card-bg); object-position: center; object-fit: cover;
}

/* "글"(article) 포스트(2026-09-12, WRITER_PLAN.md) — 본문이 최대 1만자라 카드엔
   전체를 못 싣고, story처럼 인라인 펼치기 대신 항상 전용 페이지로 연결하는 실제
   링크(.feed-article-link)로 감쌈 */
.feed-article-link {
  display: block;
  color: var(--ink);
  text-decoration: none;
}
.feed-article-cover {
  width: 100%; aspect-ratio: 1 / 1; border-radius: 16px; margin-top: 4px;
  background-color: var(--card-bg); object-position: center; object-fit: cover;
}
.feed-article-title {
  padding: 10px 2px 0;
  margin: 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.4;
}
.feed-article-cover + .feed-article-title { padding-top: 10px; }
.feed-article-excerpt {
  padding: 4px 2px 0;
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.feed-meta {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 2px 0;
}
.feed-meta-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: none;
  padding: 4px;
  margin: -4px;
  cursor: pointer;
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
}
.feed-meta-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.feed-heart-btn.is-liked { color: #c9628f; }
.feed-heart-btn.is-liked svg { fill: #c9628f; stroke: #c9628f; }

/* 좋아요 수 로딩 깜빡임 방지(2026-09-02) — 실제 값이 오기 전엔 "0"이 자리는
   차지하되(레이아웃 흔들림 방지) 안 보이게 숨김. feed-page.js가 값 도착 시 클래스를 뗌 */
.feed-count-pending { visibility: hidden; }

.feed-cta {
  margin: 14px 18px 20px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--green-deep);
}
/* 14~19px대 아이콘 stroke-width 통일(2026-09-03 디자인 검토 #3) — 이 크기대
   아이콘들이 1.7/1.8/2로 컴포넌트마다 제각각이라 같은 크기인데 미묘하게 굵기가
   달라 보였음(예: delete-btn 16px@1.8 vs walkin-badge 15px@2, 크기 차이로
   설명 안 됨). 1.8로 통일. 10px pill 아이콘(작아서 상대적으로 굵어야 읽힘)·
   24px FAB(주 CTA라 의도적으로 굵음)·26px 탭바·32px 예정 플레이스홀더는 크기
   차이가 실제로 커서 그대로 둠 */
.feed-cta svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* 댓글 — 별도 필드 없이 댓글 작성자가 게시물 작성자와 같은 사람이면 "작가" 배지를 붙여,
   평면 목록이어도 대화로 읽히게 한다(feed.js getPost로 authorUid 대조) */
.feed-comments { margin: 0 0 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.feed-comments[hidden] { display: none; }

.feed-comment-item { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 14px; }
.feed-comment-avatar {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.68rem; font-weight: 700;
  background: rgba(42, 37, 32, 0.08); color: var(--ink-soft);
}
.feed-comment-avatar.is-artist { background: rgba(78, 124, 95, 0.14); color: var(--green-deep); }
.feed-comment-head { display: flex; align-items: center; gap: 4px; }
.feed-comment-name { font-weight: 700; font-size: 0.84rem; color: inherit; text-decoration: none; }
.feed-comment-name[href]:hover { text-decoration: underline; }

/* 역할 배지(2026-09-02, "작가/큐레이터/운영자를 명칭 대신 아이콘으로", 이후 "아이콘의
   일관성이 부족하다 — 뱃지 형식으로" 피드백으로 재정리) — 각기 다른 색/굵기로 떠
   있던 outline 아이콘 대신, 셋 다 같은 지름의 색상 원 안에 흰색 아이콘을 넣는
   동일한 "뱃지" 틀로 통일. 색만 역할별로 다르고(작가=--ink, 큐레이터=--green-deep,
   운영자=--amber — 전부 이미 쓰이던 브랜드 색), 크기·모양·아이콘 두께는 공통이라
   한눈에 "같은 종류의 표시"로 읽힘. 아이콘 자체(연필/액자/방패)는 기존 손으로 그린
   인라인 SVG mask 관례(.page-nav-home::before와 동일 기법) 재사용, 액자 아이콘의
   채워진 점(해)만 제거해 셋 다 순수 outline으로 맞춤. 아이콘만으로는 스크린리더·
   툴팁 없이 의미가 안 보이므로, 사용하는 쪽에서 항상 aria-label(또는 title)에
   원래 텍스트를 그대로 남겨야 함(role="img") */
.role-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  vertical-align: -4px;
}
.role-badge::before {
  content: ''; display: block; width: 60%; height: 60%;
  background: #fff;
  -webkit-mask: var(--role-icon) center / contain no-repeat;
  mask: var(--role-icon) center / contain no-repeat;
}
.role-badge-row { display: inline-flex; align-items: center; gap: 6px; }
/* 작가/작품 작가(콘텐츠 제작자) — 연필 */
.role-badge-artist {
  background: var(--ink);
  --role-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z'/%3E%3C/svg%3E");
}
/* 큐레이터(갤러리 전권) — 액자(채워진 점 없이 테두리만, 다른 두 아이콘과 동일하게
   순수 outline으로 통일) */
.role-badge-curator {
  background: var(--green-deep);
  --role-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='2'/%3E%3Crect x='8' y='8' width='8' height='8' rx='1'/%3E%3C/svg%3E");
}
/* 운영자(전체 관리) — 방패 */
.role-badge-operator {
  background: var(--amber);
  --role-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E");
}
.feed-comment-text { font-size: 0.87rem; color: var(--ink); line-height: 1.5; margin-top: 2px; }
.feed-comment-empty { font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 14px; }

.feed-comment-form { display: flex; gap: 8px; }
/* [hidden] 특이도가 더 높은 속성 선택자로 명시 — display:flex 등 author 스타일이
   UA의 [hidden]{display:none}을 덮어써 hidden=true여도 계속 보이는 함정 방지
   (2026-09-02, 댓글 로그인 게이트 토글에서 실사용 확인 중 발견) */
.feed-comment-form[hidden] { display: none; }
.feed-comment-input {
  flex: 1; min-width: 0;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  border-radius: 999px;
  padding: 9px 14px;
  font-family: inherit;
  font-size: 0.86rem;
}
.feed-comment-input:focus { outline: none; border-color: var(--green); }
.feed-comment-send {
  width: 34px; height: 34px; border-radius: 50%; border: none;
  background: var(--green); color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
}
.feed-comment-send svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.feed-comment-send:disabled { opacity: 0.4; cursor: default; }

/* 댓글 로그인 게이트(2026-09-02) */
.feed-comment-gate {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 0.82rem; color: var(--ink-soft);
}
.feed-comment-gate[hidden] { display: none; }
.feed-comment-gate-login {
  flex-shrink: 0; padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--green); background: transparent;
  color: var(--green); font-family: inherit; font-size: 0.78rem;
  font-weight: 600; cursor: pointer;
}

/* ── 마이페이지 ── */
.mypage-body { min-height: 40vh; }

.mypage-gate {
  text-align: center;
  padding: 60px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  color: var(--ink-soft);
}
.mypage-gate[hidden] { display: none; }

.mypage-profile {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  margin-bottom: 40px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.mypage-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(78, 124, 95, 0.14);
  color: var(--green-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.3rem;
  flex-shrink: 0;
  overflow: hidden;
}
.mypage-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mypage-profile-info { flex: 1; min-width: 0; }
.mypage-profile-name { font-weight: 700; font-size: 1rem; }
.mypage-profile-realname { font-size: 0.76rem; color: var(--ink-soft); margin-top: 1px; }
.mypage-profile-email {
  font-size: 0.8rem;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mypage-role {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 10px;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--green-deep);
  background: rgba(78, 124, 95, 0.14);
  border-radius: 999px;
}
.mypage-uid-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.mypage-uid-row[hidden] { display: none; }
.mypage-uid {
  font-size: 0.7rem;
  color: var(--ink-soft);
  font-family: monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mypage-uid-copy {
  font-family: inherit;
  font-size: 0.68rem;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
  flex-shrink: 0;
}
/* 예명 등록(2026-08-24, 작가 전용 — mypage.js renderRole()이 hidden 토글) */
.mypage-penname-section { margin-bottom: 40px; }
.mypage-penname-section[hidden] { display: none; }
.mypage-penname-label { display: block; font-size: 0.8rem; color: var(--ink-soft); margin-bottom: 8px; }
.mypage-penname-row { display: flex; gap: 8px; }
.mypage-penname-input {
  flex: 1; min-width: 0;
  border: 1px solid var(--line); border-radius: 8px;
  padding: 9px 12px; font-family: inherit; font-size: 0.88rem;
}
.mypage-penname-input:focus { outline: none; border-color: var(--green); }
.mypage-penname-save {
  font-family: inherit; font-size: 0.84rem; font-weight: 600;
  padding: 9px 18px; border-radius: 8px; border: none;
  background: var(--green); color: #fff; cursor: pointer; flex-shrink: 0;
}
.mypage-penname-save:hover { background: var(--green-deep); }
.mypage-penname-save:disabled { opacity: 0.6; cursor: default; }
.mypage-penname-saved { margin-top: 8px; font-size: 0.78rem; color: var(--green-deep); }

.mypage-admin-links {
  display: flex;
  gap: 10px;
  margin-bottom: 40px;
}
/* display:flex가 [hidden]과 명시도가 같아 운영자 전용 링크가 일반 회원에게도
   계속 보이던 버그 — .feed-list와 같은 원인(2026-08-23 전수 점검 중 발견) */
.mypage-admin-links[hidden] { display: none; }
.mypage-admin-links a {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--green-deep);
  text-decoration: none;
  padding: 6px 16px;
  border: 1px solid rgba(78, 124, 95, 0.4);
  border-radius: 999px;
}
.mypage-admin-links a:hover { border-color: var(--green-deep); background: rgba(78, 124, 95, 0.08); }

.mypage-referral-banner {
  padding: 16px 20px;
  margin-bottom: 40px;
  background: rgba(78, 124, 95, 0.08);
  border: 1px solid rgba(78, 124, 95, 0.3);
  border-radius: 4px;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--ink);
}
.mypage-referral-banner p { margin-bottom: 8px; }
.mypage-referral-banner a {
  color: var(--green-deep);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(78, 124, 95, 0.4);
}
.mypage-referral-banner a:hover { border-color: var(--green-deep); }

/* 작가 모집 공지 배너(2026-09-05) — 피드 상단, 모든 방문객에게 보이고 X로 닫을 수
   있음. 처음엔 mypage-referral-banner와 같은 초록 톤이었는데 "다른 초록 UI들과
   섞여 눈에 안 띈다" 피드백으로 브랜드의 두 번째 강조색(--amber, promoted 배지 등에
   이미 쓰이던 색)으로 전환 + 최초 등장 시 슬라이드인 애니메이션 추가(마퀴처럼 계속
   움직이는 강조는 "감성적인 톤"과 안 맞아 기각, 1회성 등장 모션으로 대체) */
.feed-recruit-banner {
  position: relative;
  display: flex; align-items: center; flex-wrap: wrap; row-gap: 4px; column-gap: 14px;
  margin: 14px 0; padding: 12px 40px 12px 16px;
  background: var(--amber-tint, rgba(168, 118, 58, 0.14));
  border: 1px solid rgba(168, 118, 58, 0.4);
  border-radius: 4px;
  font-size: 0.85rem; line-height: 1.5; color: var(--ink);
  animation: feed-recruit-slide-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* author 스타일의 display:flex가 명시도와 무관하게 UA 스타일시트의 [hidden]{display:none}
   보다 항상 우선 적용되는 문제(2026-09-04 .mypage-follow-list[hidden] 등과 동일 원인) —
   hidden 속성일 땐 확실히 안 보이게 재정의 필요 */
.feed-recruit-banner[hidden] { display: none; }
@keyframes feed-recruit-slide-in {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .feed-recruit-banner { animation: none; }
}
.feed-recruit-text { margin: 0; }
.feed-recruit-cta {
  color: var(--amber); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid rgba(168, 118, 58, 0.5); white-space: nowrap;
}
.feed-recruit-cta:hover { border-color: var(--amber); }
.feed-recruit-close {
  position: absolute; top: 10px; right: 10px;
  width: 22px; height: 22px; border-radius: 50%;
  background: none; border: 1px solid rgba(168, 118, 58, 0.4); color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
  transition: border-color 0.2s, color 0.2s;
}
.feed-recruit-close:hover { border-color: var(--amber); color: var(--amber); }

/* 그룹 소제목(2026-09-06, 마이페이지 재구성 — 활동/설정/바로가기/관리자 4묶음을
   시각적으로 구분) — 3D 앱 관리자 메뉴의 .admin-menu-group-label과 같은 성격의
   작은 대문자 라벨을 landing 톤(--ink-soft/--line)으로 재현 */
.mypage-group-label {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-soft); margin: 8px 0 14px; padding-top: 24px; border-top: 1px solid var(--line);
}
/* 프로필 카드 바로 다음(첫 그룹 "내 활동")엔 구분선/여백 불필요 — :first-of-type은
   태그명 기준이라(앞에 다른 <div> 형제가 이미 있어) 안 먹혀서 인접 선택자로 지정 */
#mypage-profile + .mypage-group-label { padding-top: 0; border-top: none; }

.mypage-section { margin-bottom: 48px; }
.mypage-section-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: 1.15rem;
  margin-bottom: 16px;
}

.mypage-skeleton {
  border-radius: 4px;
  border: 1px solid var(--line);
  background: linear-gradient(90deg, var(--card-bg) 25%, rgba(78, 124, 95, 0.1) 50%, var(--card-bg) 75%);
  background-size: 200% 100%;
  animation: mypage-skeleton-pulse 1.4s ease-in-out infinite;
}
.mypage-skeleton-row { height: 66px; }
.mypage-skeleton-grid { aspect-ratio: 4 / 5; }
@keyframes mypage-skeleton-pulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mypage-skeleton { animation: none; }
}

.mypage-empty { font-size: 0.88rem; color: var(--ink-soft); line-height: 1.7; }
.mypage-empty-cta {
  display: block;
  width: fit-content;
  margin-top: 8px;
  color: var(--green-deep);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(78, 124, 95, 0.4);
}
.mypage-empty-cta:hover { border-color: var(--green-deep); }

.mypage-follow-list { display: flex; flex-direction: column; gap: 12px; }
.mypage-follow-list[hidden] { display: none; }
.mypage-follow-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.mypage-follow-link { display: flex; align-items: center; gap: 12px; flex: 1; text-decoration: none; color: inherit; }

.mypage-gallery-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.mypage-gallery-card {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 12px 14px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
}
.mypage-gallery-name { font-weight: 600; }
.mypage-gallery-id { font-size: 0.78rem; color: var(--ink-soft); }
.mypage-gallery-pending {
  font-size: 0.82rem;
  color: var(--ink-soft);
  background: rgba(78, 124, 95, 0.08);
  border: 1px solid rgba(78, 124, 95, 0.3);
  border-radius: 4px;
  padding: 10px 14px;
  margin-bottom: 12px;
}
.mypage-gallery-request-btn {
  font-family: inherit; font-size: 0.84rem; font-weight: 600;
  padding: 9px 18px; border-radius: 999px;
  border: 1px solid rgba(78, 124, 95, 0.4);
  background: none; color: var(--green-deep); cursor: pointer;
}
.mypage-gallery-request-btn:hover { border-color: var(--green-deep); background: rgba(78, 124, 95, 0.08); }
.mypage-gallery-request-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
  padding: 16px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.mypage-gallery-request-note { font-size: 0.8rem; color: var(--ink-soft); line-height: 1.6; }
.mypage-gallery-request-form input[type="text"],
.mypage-gallery-request-form textarea {
  width: 100%;
  border: 1px solid var(--line); border-radius: 8px;
  padding: 9px 12px; font-family: inherit; font-size: 0.88rem;
  margin-top: 6px;
}
.mypage-gallery-request-form input[type="text"]:focus,
.mypage-gallery-request-form textarea:focus { outline: none; border-color: var(--green); }
.mypage-gallery-request-actions { display: flex; gap: 10px; }
.mypage-gallery-request-cancel {
  font-family: inherit; font-size: 0.84rem;
  padding: 9px 18px; border-radius: 8px;
  border: 1px solid var(--line); background: none; color: var(--ink-soft); cursor: pointer;
}
.mypage-gallery-request-cancel:hover { border-color: var(--ink-soft); }

.mypage-liked-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}
.mypage-liked-card { display: block; text-decoration: none; color: var(--ink); }
.mypage-liked-thumb { position: relative; }
.mypage-liked-thumb img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: var(--card-bg);
}
.mypage-unlike-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(42, 37, 32, 0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.mypage-unlike-btn svg { width: 16px; height: 16px; fill: currentColor; }
.mypage-unlike-btn:hover { background: rgba(42, 37, 32, 0.75); }
.mypage-unlike-btn:disabled { opacity: 0.6; cursor: default; }
.mypage-liked-title {
  display: block;
  margin-top: 6px;
  font-size: 0.8rem;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mypage-comment-list { display: flex; flex-direction: column; gap: 12px; }
.mypage-comment-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
}
.mypage-comment-thumb {
  width: 44px;
  height: 44px;
  border-radius: 4px;
  background: rgba(78, 124, 95, 0.14);
  color: var(--green-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
  flex-shrink: 0;
  overflow: hidden;
}
.mypage-comment-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mypage-comment-body { min-width: 0; flex: 1; }
.mypage-comment-target {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--green-deep);
  margin-bottom: 4px;
}
.mypage-comment-text {
  font-size: 0.9rem;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mypage-comment-date { font-size: 0.76rem; color: var(--ink-soft); margin-top: 4px; }

.feed-foot {
  margin-top: 72px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 0.8rem;
  color: var(--ink-soft);
}
/* 저작권 안내 문구(2026-09-04) — 위 copyright 줄보다 한 단계 더 작고 옅게, 법적
   고지문 특유의 "본문 아님" 느낌으로 구분 */
.feed-legal-notice {
  margin-top: 8px;
  max-width: 480px;
  margin-left: auto; margin-right: auto;
  font-size: 0.68rem;
  line-height: 1.5;
  opacity: 0.6;
  word-break: keep-all;
}
/* 웹(데스크탑 폭) 전용 확대(2026-09-05) — 이 파일의 기존 데스크탑 기준(900px)과 통일 */
@media (min-width: 900px) {
  .feed-legal-notice { font-size: 0.85rem; max-width: 600px; }
}

@media (prefers-reduced-motion: reduce) {
  .card,
  .card-link {
    transition: none;
  }
}

/* ============================================================
   피드 개편 (2026-08-22) — 발견 피드 B안: 앱바 + 필터 pill + "지금 핫한 전시"
   칩 + 팔로잉 + 1열 작품 카드 + 하단 탭바/FAB. 기존 .feed-topbar/.feed-masthead/
   .feed-post(코브플로우) 스타일은 더 이상 index.html에서 안 쓰이지만 그대로
   남겨둠(다른 곳에서 참조 없음 확인 — 죽은 CSS, 추후 정리 대상). 색 토큰은 새로
   만들지 않고 기존 --green/--green-deep을 그대로 pine/sage로 씀 — 목업에만 있고
   지금 없는 amber만 신규 추가(전시 칩 등 accent 용도, 현재는 배경 그라데이션
   fallback으로만 씀 — 실 사용처는 후속 확장 시 늘어날 수 있음) */
:root {
  --amber: #a8763a; --amber-tint: rgba(168, 118, 58, 0.14);
  /* 게시물 유형 색(2026-09-13, "각 유형이 명확하게 구분되도록 재정의") — 작품은
     브랜드 기본 그린(--green-deep) 재사용. 작업노트/에세이/굿즈는 전부 새로
     지정 — 이전엔 굿즈(#5c3d5c)·작업노트(#2f4f63)·에세이(#2a2520, --ink와
     완전히 같은 값) 전부 저채도 어두운 색이라 서로도 기본 텍스트색과도 구분이
     잘 안 됐음. --amber는 "추천(promoted)" 배지가 이미 쓰고 있어 유형색과는
     겹치지 않는 별도 색상(보라/파랑/로즈)으로 신규 지정 */
  --type-story: #6b4c8a;
  --type-article: #3d6ea1;
  --type-goods: #a3466f;
}

/* 당겨서 새로고침(2026-08-26, "피드를 아래로 스와이프하면 리프레시해줘" 요청) —
   콘텐츠 전체를 밀어내리는 방식 대신(문서 스크롤 구조 + sticky appbar + fixed
   하단 탭바와 얽혀 위험) 뷰포트 최상단에 고정된 인디케이터만 당긴 정도에 비례해
   나타났다 사라지는 방식. transform/opacity는 feed-page.js가 드래그 중 직접 갱신 */
.feed-refresh-indicator {
  position: fixed; top: calc(var(--safe-top, 0px) + 10px); left: 50%; z-index: 30;
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--card-bg); border: 1px solid var(--line);
  box-shadow: 0 4px 12px rgba(42, 37, 32, 0.12);
  opacity: 0; pointer-events: none;
  transform: translate(-50%, -12px);
}
.feed-refresh-indicator svg { width: 18px; height: 18px; fill: none; stroke: var(--green); stroke-width: 1.8; }
.feed-refresh-indicator.is-loading svg { animation: feed-refresh-spin 0.7s linear infinite; }
@keyframes feed-refresh-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .feed-refresh-indicator.is-loading svg { animation: none; }
}

.feed-appbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin: 0 -20px; padding: 14px 20px;
  background: rgba(242, 237, 230, 0.85);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.feed-appbar-mark-link { display: block; flex-shrink: 0; line-height: 0; }
.feed-appbar-mark {
  height: 24px; width: auto;
  display: block;
}
/* 샵 아이콘 추가(2026-08-27)로 항목이 6개가 되면서, 좁은 모바일 화면에서는 전부
   합친 너비가 뷰포트를 넘어 마지막 항목(주로 메뉴·샵 아이콘)이 화면 밖으로 밀려
   "아이콘이 안 보인다"는 리포트로 이어짐 — .feed-hotshows-row 등 이 앱에 이미 있는
   가로 스크롤 관례를 그대로 적용해, 다 안 들어가면 잘리는 대신 옆으로 스크롤해서
   전부 닿을 수 있게 함(줄바꿈 대신 스크롤을 택한 이유: 줄바꿈은 앱바 높이가
   들쭉날쭉해져 sticky 헤더가 씹혀 보일 위험이 있음) */
/* 아이콘 줄 + 계정/메뉴 버튼을 한 묶음으로(2026-09-20, "햄버거 메뉴가 디자인과
   이질감이 있다" — 메뉴 버튼을 .feed-appbar 최상위 4번째 자식으로 뒀더니
   justify-content:space-between이 아이콘 줄과의 사이를 벌려 따로 떨어져 보였음).
   이 묶음 안에서만 justify-content 영향을 받지 않고 항상 서로 붙어 있음 */
.feed-appbar-right { display: flex; align-items: center; gap: 10px; min-width: 0; }
.feed-appbar-icons {
  display: flex; align-items: center; gap: 10px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  min-width: 0;
}
.feed-appbar-icons::-webkit-scrollbar { display: none; }
.feed-appbar-icons > * { flex-shrink: 0; }
.feed-appbar-pinned-btn { flex-shrink: 0; }
.feed-icon-btn {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: var(--card-bg);
  cursor: pointer; padding: 0;
}
.feed-icon-btn svg { width: 16px; height: 16px; fill: none; stroke: var(--ink); stroke-width: 1.8; }
.feed-icon-btn[aria-expanded="true"] { border-color: var(--green); }

/* 언어 스위처(2026-08-26, landing/i18n) — .feed-icon-btn과 같은 원형 버튼 크기로 맞춰서
   .feed-appbar-icons 안에 자연스럽게 섞이게 하고, .page-nav-links(about/mypage 등)
   안에서도 인라인으로 쓸 수 있게 함 */
.lang-switcher { position: relative; display: inline-flex; }
.lang-switcher-btn {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: var(--card-bg);
  cursor: pointer; padding: 0;
}
.lang-switcher-btn svg { width: 16px; height: 16px; fill: none; stroke: var(--ink); stroke-width: 1.8; }
.lang-switcher-btn[aria-expanded="true"] { border-color: var(--green); }
/* position:fixed — body에 직접 붙어 렌더링되고(i18n/index.js의 mountLangSwitcher 참고)
   top/right는 열 때마다 JS가 버튼의 화면 좌표로 인라인 지정 */
.lang-switcher-dropdown {
  position: fixed; z-index: 60;
  background: var(--card-bg); border: 1px solid var(--line); border-radius: 10px;
  padding: 6px; display: flex; flex-direction: column; gap: 2px; min-width: 96px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.lang-switcher-dropdown button {
  text-align: left; padding: 7px 10px; border-radius: 6px; border: none; background: none;
  font-family: inherit; font-size: 0.85rem; color: var(--ink); cursor: pointer;
}
.lang-switcher-dropdown button:hover { background: rgba(78, 124, 95, 0.08); }
.lang-switcher-dropdown button.is-active { color: var(--green-deep); font-weight: 700; }
.lang-switcher-dropdown[hidden] { display: none; }

.feed-search-panel, .feed-menu-panel {
  padding: 14px 0 18px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.feed-search-panel[hidden], .feed-menu-panel[hidden] { display: none; }
.feed-search-input {
  width: 100%; font-family: inherit; font-size: 0.92rem;
  padding: 10px 14px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg); color: var(--ink);
}
.feed-search-input:focus { outline: none; border-color: var(--green); }
.feed-search-hint { font-size: 0.76rem; color: var(--ink-soft); margin-top: 8px; }
.feed-search-hint a { color: var(--green-deep); }

.feed-menu-panel .feed-account { justify-content: space-between; }
/* 로그아웃 상태에선 이 칸에 로그인 버튼 하나만 남는데, 기본 .feed-login-btn은
   내용 너비만큼만 차지하는 작은 알약 버튼이라 바로 아래 풀와이드 링크 목록과
   나란히 있으면 서로 안 어울려 보였음(2026-09-20 리포트) — 이 패널 안에서만
   목록과 같은 폭·리듬으로 맞춤(mypage.html의 로그인 게이트 등 다른 곳의
   .feed-login-btn은 그대로 알약 버튼 유지) */
.feed-menu-panel .feed-login-btn:not([hidden]) {
  display: block;
  width: 100%;
  padding: 13px 2px;
  border-radius: 10px;
}
.feed-menu-panel .feed-about-link {
  display: block;
  padding: 10px 2px;
  border-bottom: none;
}

.feed-filters {
  display: flex; gap: 8px; padding: 14px 0 4px;
  overflow-x: auto; scrollbar-width: none;
  /* 스크롤 힌트 부재(2026-09-03 UI/UX 검토 #2) — 한국어는 우연히 pill 6개가 한
     화면에 다 들어가지만, 영어/중국어는 라벨이 길어져 "팔로잉"(Following)이
     화면 밖으로 밀려나도 더 있다는 표시가 전혀 없었음. 오른쪽 끝을 옅게 페이드시켜
     "더 스크롤할 게 있다"는 걸 넌지시 알림(콘텐츠가 다 들어가는 경우엔 끝 pill
     가장자리가 살짝만 흐려지는 정도라 무해함) */
  mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
}
.feed-filters::-webkit-scrollbar { display: none; }
/* 카드/격자 보기 토글(2026-08-26) — 필터 pill 줄에 뒀다가 좁은 화면에서 pill이
   잘리거나(1차) 토글이 아래 줄로 밀려나는(2차) 문제로 앱바 아이콘 줄로 옮김
   (#feed-view-toggle-btn, 필터 pill과 아예 공간을 다투지 않음) */
#feed-view-toggle-btn[aria-pressed="true"] { border-color: var(--green); background: rgba(78, 124, 95, 0.1); }
#feed-view-toggle-btn[aria-pressed="true"] svg { stroke: var(--green); }
.feed-pill {
  flex-shrink: 0; font-family: inherit; font-size: 0.82rem; font-weight: 600;
  padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line);
  background: none; color: var(--ink-soft); cursor: pointer;
  text-decoration: none; /* "갤러리" 링크(2026-08-27)도 같은 클래스를 씀 */
  display: inline-flex; align-items: center; gap: 6px;
}
.feed-pill.is-active { background: var(--green); border-color: var(--green); color: #fff; }

/* 관심 작가 새 소식 배지(2026-09-02) — "팔로잉" pill 전용. display를 [hidden]에도
   적용되게 :not([hidden])로 한정 — 안 그러면 author 스타일이 UA의 [hidden]{display:none}을
   덮어써서 hidden=true여도 계속 보이는 함정(2026-09-02 배포 직후 실사용 확인 중 발견:
   익명 세션인데도 배지가 항상 떠 있었음) */
.feed-pill-badge:not([hidden]) {
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: var(--danger); color: #fff; font-size: 0.68rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}

/* 모바일 전용 핫한전시/예정전시 탭(2026-09-06) — JS(feed-page.js)가 둘 다
   데이터 있고 좁은 화면일 때만 노출. .feed-hotshows-title과 같은 글자 톤을
   그대로 써서 탭 모드가 아닐 때(=각 섹션 자체 제목)와 시각적으로 이어지게 함 */
.feed-hotshow-tabs { display: flex; gap: 18px; padding: 14px 0 0; }
.feed-hotshow-tabs[hidden] { display: none; }
.feed-hotshow-tab-btn {
  background: none; border: none; padding: 0 0 6px; cursor: pointer;
  font-family: inherit;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-soft); border-bottom: 2px solid transparent;
}
.feed-hotshow-tab-btn.is-active { color: var(--ink); border-color: var(--green-deep); }

.feed-hotshows { padding: 14px 0 4px; }
.feed-hotshows[hidden] { display: none; }
.feed-hotshows.tabs-active { padding-top: 10px; }
.feed-hotshows.tabs-active .feed-hotshows-head { display: none; }
.feed-hotshows-head { margin-bottom: 10px; }
.feed-hotshows-title {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-soft);
}
.feed-hotshows-row {
  display: flex; gap: 10px; padding-bottom: 4px;
  overflow-x: auto; scrollbar-width: none;
}
.feed-hotshows-row::-webkit-scrollbar { display: none; }
.feed-hotshow-chip, .feed-hotshows-skeleton {
  flex: 0 0 144px; height: 100px; border-radius: 12px;
}
.feed-hotshow-chip {
  position: relative; z-index: 0; overflow: hidden;
  background: linear-gradient(155deg, var(--green), var(--green-deep)) center/cover;
  color: #f4f1ea;
}
.feed-hotshow-chip::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(10,12,9,0.1) 0%, rgba(10,12,9,0.55) 55%, rgba(10,12,9,0.88) 100%);
}
/* <img>로 렌더링(2026-08-31, SEO) — 가독성용 ::before(z-index:0)와 콘텐츠 링크
   (z-index:1)보다 확실히 뒤에 깔리게 z-index:-1 */
.feed-hotshow-chip img {
  position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover;
}
/* 커버 이미지가 없을 때 파비콘을 작게 중앙에 띄우는 폴백(2026-09-06) — 위
   .feed-hotshow-chip img 규칙(inset:0로 전체를 채움)을 이 클래스만 덮어써서
   로고 마크가 늘어나거나 잘리지 않고 작은 아이콘으로 보이게 함. 명시도를 이기려면
   같은 조합자 형태(.feed-hotshow-chip img.foo)를 유지해야 함 */
.feed-hotshow-chip img.feed-hotshow-chip-favicon {
  inset: auto; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 34px; height: 34px; object-fit: contain; opacity: 0.85;
}
/* 칩 전체를 덮는 링크 — 팔로우 버튼(아래)만 별도로 얹어 클릭이 안 섞이게 함
   (칩 자체는 <a>가 아니라 <div>로 바꿈, 2026-08-22) */
.feed-hotshow-chip-link {
  position: absolute; inset: 0; z-index: 1;
  padding: 10px; display: flex; flex-direction: column; justify-content: flex-end;
  text-decoration: none; color: inherit;
}
/* 32px로 확대(2026-08-27 UI/UX 감사) — 가로 스크롤 카드 모서리의 24px 원형 버튼은
   스와이프 중 오터치하기 쉬운 터치 타겟이었음. 144x100px 카드 안에서 과하게 커
   보이지 않는 선에서 최대한 키움 */
.feed-hotshow-follow-btn {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  width: 32px; height: 32px; border-radius: 50%; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20, 18, 15, 0.55); color: #fff; border: none;
  font-size: 1rem; font-weight: 700; line-height: 1; cursor: pointer;
}
/* display:flex가 [hidden]과 명시도가 같아 비로그인 방문자에게도 이 버튼이 계속
   보이던 버그 — .feed-list와 같은 원인(2026-08-23 전수 점검 중 발견) */
.feed-hotshow-follow-btn[hidden] { display: none; }
.feed-hotshow-follow-btn.is-following { background: var(--green-deep); }
.feed-hotshow-follow-btn:disabled { opacity: 0.6; cursor: default; }
.feed-hotshow-chip-name {
  position: relative; font-family: 'Playfair Display', Georgia, serif; font-weight: 600;
  font-size: 0.82rem; line-height: 1.25;
  /* 한 줄 말줄임(nowrap+ellipsis)이던 걸 2줄 클램프로(2026-09-03 UI/UX 검토 #3) —
     "Kim Mi-sun Oil Pa…"처럼 영어 제목이 단어 중간에서 잘리던 문제. 줄바꿈은 단어
     경계에서 되므로 2줄 안에서는 안 잘리고, 그래도 넘치면 마지막 줄만 …로 줄임 */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.feed-hotshow-chip-tag {
  position: relative; font-size: 0.62rem; opacity: 0.9; margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.feed-hotshows-skeleton {
  background: linear-gradient(90deg, var(--card-bg) 25%, rgba(78, 124, 95, 0.08) 50%, var(--card-bg) 75%);
  background-size: 200% 100%;
  animation: mypage-skeleton-pulse 1.4s ease-in-out infinite;
  border: 1px solid var(--line);
}

/* "지금 핫한 전시"(가로 스크롤) 구간과 아래 세로 피드를 가르는 얇은 실선 — 예전엔
   card-bg를 채운 8px 띠였는데, 팔로잉 섹션이 없어 곧바로 나오는 경우(팔로잉 0명)
   흰 줄이 붕 떠 보인다는 리포트(2026-08-22)로 일반적인 1px 구분선으로 단순화 */
/* 공지 상단 고정 배너(2026-09-13) — .feed-recruit-banner와 같은 톤+구조를
   --danger/--danger-tint로 재현. 항목이 여러 개일 수 있어 세로로 쌓음(추천
   배너는 1개뿐이라 한 줄이면 충분했음). "눌러도 반응 없다" 리포트로 <button>
   으로 바꿔 클릭하면 "공지" 필터로 전환됨(feed-page.js) — 버튼 기본 스타일 리셋 */
/* "여전히 공지와 피드가 붙어 있다"(2026-09-13) — 바로 위 .feed-hotshows(지금
   핫한 전시/예정 전시)는 padding:14px 0 4px로 위아래 여백이 있는데, 이 배너
   섹션은 그 클래스를 안 써서 여백이 아예 0이었음. 같은 값으로 맞춤 */
.feed-notice-banner-section { padding: 14px 0 4px; }
.feed-notice-banner-list { display: flex; flex-direction: column; gap: 8px; }
.feed-notice-banner-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 14px;
  background: var(--danger-tint); border: 1px solid rgba(162, 59, 59, 0.3);
  border-radius: 4px;
  font-family: inherit; font-size: 0.85rem; line-height: 1.5; color: var(--ink);
  text-align: left; cursor: pointer;
}
.feed-notice-banner-item:hover { border-color: var(--danger); }
.feed-notice-banner-item svg { flex-shrink: 0; width: 16px; height: 16px; stroke: var(--danger); fill: none; }
.feed-notice-banner-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.feed-notice-banner-date { flex-shrink: 0; font-size: 0.76rem; color: var(--ink-soft); }

.feed-divider { margin: 18px 0 4px; border-top: 1px solid var(--line); }

/* 목업(B안): 카드 전체가 아니라 이미지만 둥근 박스 — 헤더·메타·캡션은 카드 배경
   없이 페이지 배경 위에 그대로 놓임(인스타그램 낱장 리듬). 예전엔 .feed-post-full
   자체가 배경/테두리/둥근모서리를 가진 하나의 박스라 헤더까지 카드 안에 갇혀 보였음
   (2026-08-23, "모든 내용을 네모 박스 안에 넣고 있다" 리포트) */
.feed-post-full { min-width: 0; }
/* 전시 이름이 언어별로 길이 차이가 큼(영문은 "Kim Mi-sun Oil Painting Solo
   Exhibition"처럼 한국어보다 훨씬 김) — 예전엔 폭 제한이 없어 pill 안에서 텍스트가
   여러 줄로 줄바꿈됐음(2026-08-26 리포트: "영어명은 너무 길다. 전부 다 보여주지
   말고 앞부분만"). 부모(.feed-post-header-info)까지 min-width:0으로 줄어들 수 있게
   하고, pill 텍스트는 한 줄로 말줄임(…) 처리 */
.feed-post-header-info { min-width: 0; flex: 1; }
.feed-post-space-pill {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 3px;
  font-size: 0.68rem; font-weight: 600; color: var(--green-deep);
  background: rgba(78, 124, 95, 0.1); padding: 3px 8px 3px 6px; border-radius: 999px;
  max-width: 100%;
}
.feed-post-space-pill svg { width: 10px; height: 10px; fill: none; stroke: var(--green-deep); stroke-width: 2; flex-shrink: 0; }
.feed-post-space-pill-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
/* 유형별 색 구분(2026-09-12 도입 → 2026-09-13 팔레트 재정의) — 격자 보기의
   .feed-grid-item 테두리, 아래 .feed-avatar 링과 동일한 --type-* 토큰 재사용.
   기본값(artwork)은 위 규칙의 --green-deep 그대로 두고 나머지만 덮어씀 */
.feed-post-space-pill.is-story { color: var(--type-story); background: rgba(107, 76, 138, 0.1); }
.feed-post-space-pill.is-story svg { stroke: var(--type-story); }
.feed-post-space-pill.is-article { color: var(--type-article); background: rgba(61, 110, 161, 0.1); }
.feed-post-space-pill.is-article svg { stroke: var(--type-article); }
.feed-post-space-pill.is-goods { color: var(--type-goods); background: rgba(163, 70, 111, 0.1); }
.feed-post-space-pill.is-goods svg { stroke: var(--type-goods); }
.feed-post-space-pill.is-notice { color: var(--danger); background: var(--danger-tint); }
.feed-post-space-pill.is-notice svg { stroke: var(--danger); }
/* "작품 · {갤러리명}" 배지가 resolveGalleryTitle() 응답 전엔 빈 텍스트라 아이콘만
   있는 배지가 떴다가 텍스트로 갑자기 넓어지던 문제(2026-09-02) — 로딩 중엔 자리를
   먼저 잡아주는 스켈레톤 막대를 보여줌(실제 텍스트가 오면 feed-page.js가 클래스를 뗌) */
.feed-post-space-pill-text.feed-pill-text-loading {
  display: inline-block;
  width: 44px;
  height: 0.75em;
  border-radius: 3px;
  background: rgba(78, 124, 95, 0.25);
}
/* 추천(미리보기) 카드 표기(2026-09-03, "작품/추천 배지 용어 재정립" — "작가 공유"와
   의미가 안 겹치게 배지 자체를 없애고, 배경 없는 옅은 텍스트만 붙임).
   2026-08-29에 도입했던 .feed-post-space-pill.is-promoted(알약 배지)는 이 방식으로
   대체돼 더 이상 안 씀. 처음엔 이름 옆 인라인이었는데, 그러면 헤더가 1줄이 돼
   실제 게시물(이름+배지 2줄, ~52px)과 추천 카드(1줄, ~25px) 높이가 확 달라져
   피드 스크롤 시 카드 리듬이 깨지던 문제(2026-09-03 디자인 검토 #2) — .feed-post-
   space-pill과 같은 자리(이름 아래 둘째 줄)에 오도록 옮겨 헤더 높이를 맞춤 */
.feed-promoted-ghost { font-size: 0.72rem; font-weight: 600; color: var(--amber); margin-top: 3px; }

.feed-post-img-full {
  position: relative; display: block; width: 100%; aspect-ratio: 4 / 5;
  border-radius: 16px; overflow: hidden;
  background-color: var(--card-bg);
  text-decoration: none;
}
/* <img>로 렌더링(2026-08-31, SEO) — .feed-walkin-badge(자식)는 이미 position:absolute라
   DOM 순서상 이 뒤에 오면 z-index 손댈 필요 없이 자연히 위에 그려짐 */
.feed-post-img-full img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.feed-walkin-badge {
  position: absolute; left: 12px; bottom: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--green-deep); color: #fff;
  padding: 7px 13px 7px 9px; border-radius: 999px;
  font-size: 0.76rem; font-weight: 700;
  box-shadow: 0 8px 16px -6px rgba(0,0,0,0.35);
}
.feed-walkin-badge svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 1.8; }

/* 화면 끝까지 붙는 풀와이드 바 대신, 좌우 여백을 두고 뜬 캡슐(pill) 형태로
   — 참고 이미지(뉴스 앱 하단 pill 내비) 스타일 요청(2026-08-23). width:fit-content는
   iOS Safari 실기기에서 두 가지 버그를 냄: (1) left:0;right:0;margin:auto와
   같이 쓰면 안 좁혀지고 풀와이드로 늘어남, (2) flex 자식 5개(탭 4개+숨김
   스페이서) 중 첫 자식("홈")을 폭 계산에서 빠뜨려 화면 밖으로 밀려나 안 보임.
   그래서 fit-content를 완전히 버리고, 내용이 정확히 고정돼있는 걸 이용해
   명시적 px 폭을 계산해 넣음(탭 개수·크기가 바뀌면 이 값도 같이 바꿔야 함) */
.feed-tabbar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  z-index: 20;
  width: min(440px, calc(100vw - 32px)); /* 84px×5칸(탭4+숨김 스페이서) + 좌우
    패딩 20px, ≥481px 폭 기준 — min()으로 좁은 화면에서도 최소 16px 여백 보장 */
  display: flex; justify-content: center; gap: 0;
  padding: 12px 10px;
  border-radius: 999px;
  background: rgba(242, 237, 230, 0.92);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 28px -8px rgba(20, 18, 15, 0.28);
}
.feed-tab {
  flex: 0 0 84px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: var(--ink-soft); text-decoration: none;
}
/* FAB(원형, 아래) 대비 너무 가늘어 보인다는 리포트로 21px→26px 상향 */
.feed-tab svg { width: 26px; height: 26px; fill: none; stroke: var(--ink-soft); stroke-width: 1.6; }
.feed-tab span { font-size: 0.66rem; font-weight: 600; }
.feed-tab.is-active { color: var(--green-deep); }
.feed-tab.is-active svg { stroke: var(--green-deep); }
.feed-tab-spacer { visibility: hidden; }

.feed-fab-create {
  position: fixed; z-index: 25;
  /* 캡슐 윗변에 원 중심이 오도록(캡슐 바닥 여백 14px + 캡슐 높이 50px 절반 -
     FAB 반지름 30px) — 절반은 캡슐 안으로, 절반은 콘텐츠 위로 겹치게. 원·아이콘은
     탭 아이콘 대비 너무 커 보인다는 리포트로 68px→60px, 28px→24px로 낮춤
     (2026-08-23) */
  left: 50%; bottom: calc(34px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  width: 60px; height: 60px; border-radius: 50%;
  /* 반투명(2026-09-03) — 아래 탭바(rgba+blur)와 같은 "젖빛 유리" 톤으로 맞춤 */
  background: rgba(41, 70, 52, 0.82);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px -6px rgba(58,94,71,0.55), 0 0 0 4px var(--bg);
  text-decoration: none;
}
/* 24px → 30px(2026-09-17, "새싹 아이콘을 좀 더 크고 명확하게") — 60px 원 기준 40%→50% */
.feed-fab-create svg { width: 30px; height: 30px; fill: none; stroke: #fff; stroke-width: 2.4; }

@media (max-width: 480px) {
  .feed-tab span { display: none; }
  .feed-tab { flex: 0 0 70px; }
  /* 좁아 보인다는 반복 리포트로 상향(60px→70px칸) — 70px×5칸+좌우 패딩 20px,
     min()으로 좁은 화면에서도 최소 16px 여백 보장 */
  .feed-tabbar { width: min(370px, calc(100vw - 32px)); }
}

/* ---------- 데스크탑 웹 레이아웃(2026-08-22) ----------
   모바일 앱 셸(하단 고정 탭바+원형 FAB, 560px 좁은 컬럼)을 데스크탑에 그대로
   쓰면 화면 낭비+어색한 모바일 관례가 됨. ≥900px에서는: 컨테이너를 다른
   페이지(about.html의 .landing, 1080px)와 맞춰 넓히고, 하단 탭바/FAB 대신
   앱바 안에 텍스트 내비를 두고, 피드를 다열 그리드로 전환 */
.feed-desktop-nav { display: none; }
.feed-desktop-create-btn { display: none; }

@media (min-width: 900px) {
  .feed-page {
    max-width: 1080px;
    padding: 0 32px 64px;
  }
  .feed-appbar, .feed-search-panel, .feed-menu-panel, .feed-divider {
    margin: 0 -32px;
  }
  .feed-appbar, .feed-search-panel, .feed-menu-panel {
    padding-left: 32px;
    padding-right: 32px;
  }
  .feed-appbar-mark { height: 27px; }

  .feed-desktop-nav {
    display: flex; align-items: center; gap: 28px;
    flex: 1; justify-content: center;
  }
  .feed-desktop-link {
    font-size: 0.9rem; font-weight: 500; color: var(--ink-soft); text-decoration: none;
  }
  .feed-desktop-link:hover { color: var(--green-deep); }
  .feed-desktop-link.is-active { color: var(--green-deep); font-weight: 700; }

  .feed-desktop-create-btn {
    display: inline-flex; align-items: center;
    font-size: 0.84rem; font-weight: 600; color: #fff;
    background: var(--green-deep); text-decoration: none;
    padding: 8px 18px; border-radius: 999px;
  }
  .feed-desktop-create-btn:hover { background: var(--green); }

  /* 모바일 전용 하단 크롬 숨김 — 데스크탑 내비가 그 역할을 대신함 */
  .feed-tabbar, .feed-fab-create { display: none; }

  /* 세로 1열 카드 → 여유 폭을 살린 다열 그리드 */
  .feed-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 28px; }

  .feed-hotshow-chip, .feed-hotshows-skeleton { flex: 0 0 176px; height: 118px; }
}

/* ============================================================
   exhibitions.html — "전시 찾기" 목록 페이지(2026-08-23). 하단 탭바/데스크탑 내비의
   "전시 찾기"가 예전엔 /about(서비스 소개)로 잘못 연결돼있던 걸 고치며 신설.
   카드 그리드는 .feed-list의 데스크탑 다열 그리드와 같은 톤(auto-fill/minmax)으로 맞춤
   ============================================================ */
.exhibitions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 8px;
}
/* display:grid가 [hidden]과 명시도가 같아 갤러리 탭을 한 번 연 뒤 다른 탭으로 옮겨도
   그리드가 계속 표시되던 버그(2026-08-28, "특정 탭에서 갤러리가 중복으로 또 나타나는
   버그") — .feed-list[hidden] 등과 동일 패턴으로 명시적 오버라이드 */
.exhibitions-grid[hidden] { display: none; }
.exhibition-card {
  display: flex; flex-direction: column; gap: 10px;
  text-decoration: none; color: var(--ink);
  position: relative;
}
.exhibition-card-cover {
  display: block; width: 100%; aspect-ratio: 4 / 5; border-radius: 16px;
  background-color: var(--card-bg); object-position: center; object-fit: cover;
}
/* 커버 이미지가 없을 때(진행중/종료 갤러리 — "예정"은 위 is-upcoming-placeholder가
   따로 담당) 빈 카드 배경색 위에 파비콘을 작게 얹는 폴백(2026-09-06) */
.exhibition-card-cover.exhibition-card-cover--favicon {
  display: flex; align-items: center; justify-content: center;
}
.exhibition-card-cover--favicon img {
  width: 30%; max-width: 48px; opacity: 0.6;
}
/* mygallery.js — 커버(.exhibition-card-cover)가 <img>가 되면서(2026-08-31) 그
   자체를 링크로 못 쓰므로 감싸는 순수 레이아웃용 래퍼 */
.mygallery-card-cover-link { display: block; }
/* 큐레이터/작품 작가 등급 아이콘 배지 위치(2026-09-02) — 원 배경·아이콘 자체는
   .role-badge/.role-badge-* (공용, style.css 앞부분), 여긴 카드 커버 위 위치만 */
.mygallery-tier-badge { position: absolute; top: 10px; left: 10px; }
/* "예정" 갤러리는 아직 작품이 없어 커버 이미지가 없는 게 정상이라, 빈 배경 대신 안내용
   플레이스홀더를 보여줌(2026-08-28, "예정일 경우 이미지가 없으면 예정 이미지를 만들어서
   보여줘") — 실제 이미지 파일 대신 CSS로 가볍게 생성(기존 작품 로딩 placeholder를
   그라디언트에서 중립 톤+픽토그램으로 바꾼 것과 같은 방향, 2026-08-13) */
.exhibition-card-cover.is-upcoming-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(160deg, rgba(78, 124, 95, 0.16), rgba(78, 124, 95, 0.05));
  color: var(--green-deep);
}
.exhibition-card-cover.is-upcoming-placeholder svg {
  width: 32px; height: 32px; stroke: currentColor; fill: none; stroke-width: 1.5; opacity: 0.75;
}
.exhibition-card-cover.is-upcoming-placeholder span {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; opacity: 0.8;
}
.exhibition-card-title {
  font-family: 'Playfair Display', Georgia, serif; font-weight: 600; font-size: 1.02rem;
}
.exhibition-badge {
  position: absolute; top: 10px; left: 10px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em;
  padding: 4px 10px; border-radius: 999px;
  color: #fff; background: var(--green-deep);
}
.exhibition-badge.is-ended { background: rgba(42, 37, 32, 0.55); }
.exhibition-badge.is-upcoming { background: var(--amber); }
.exhibition-card.is-skeleton {
  aspect-ratio: 4 / 5; border-radius: 16px; border: 1px solid var(--line);
  background: linear-gradient(90deg, var(--card-bg) 25%, rgba(78, 124, 95, 0.08) 50%, var(--card-bg) 75%);
  background-size: 200% 100%;
  animation: mypage-skeleton-pulse 1.4s ease-in-out infinite;
}

/* mygallery.html — "내 전시장" 허브. exhibitions.html의 카드 톤(.exhibition-card
   류)을 그대로 쓰되, 카드 전체가 아니라 커버 이미지만 링크(입장하기)이고 그 아래
   버튼 2개(입장하기/작품 게시)가 별도로 필요해 .exhibition-card를 <a>가 아니라
   <div>로 씀(2026-08-23) */
.mygallery-card-actions { display: flex; gap: 8px; margin-top: 2px; }
.mygallery-btn {
  flex: 1; text-align: center; text-decoration: none;
  font-size: 0.82rem; font-weight: 600;
  padding: 9px 0; border-radius: 999px;
  color: #fff; background: var(--green-deep);
}
.mygallery-btn:hover { background: var(--green); }
.mygallery-btn-outline {
  color: var(--green-deep); background: none; border: 1px solid var(--green);
}
.mygallery-btn-outline:hover { background: rgba(78, 124, 95, 0.08); }
.mygallery-card-hint { font-size: 0.74rem; color: var(--ink-soft); line-height: 1.5; margin: 0; }

/* ============================================================
   about.html 개편 (2026-08-22) — "숲" 메타포 목업(브랜드 확장안) 확정 카피 이식.
   기존 .landing(1080px 컨테이너) 구조는 그대로 유지 — 목업의 풀블리드 섹션
   배경 대신 컨테이너 안에서 border-top 구분선으로 절제해서 표현.
   ============================================================ */

.hero {
  position: relative;
  padding: 12px 0 72px;
  text-align: center;
  overflow: hidden;
}
.hero-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; opacity: 0.9;
}
.hero-inner { position: relative; z-index: 2; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--green-deep); font-weight: 700; margin-bottom: 22px;
}
.hero-eyebrow::before, .hero-eyebrow::after { content: ''; width: 22px; height: 1px; background: var(--green-deep); opacity: 0.5; }
.hero-mark { margin: 0; line-height: 0; }
.hero-mark img {
  width: clamp(220px, 30vw, 420px);
  height: auto;
}
.hero-slogan {
  margin: 18px 0 0;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}
.hero-headline {
  font-family: 'Playfair Display', Georgia, serif; font-weight: 500;
  font-size: clamp(1.4rem, 1.4vw + 1.1rem, 1.9rem);
  margin-top: 22px; text-wrap: balance; color: var(--ink);
}
.hero-sub {
  max-width: 46ch; margin: 20px auto 0;
  color: var(--ink-soft); font-size: 1rem; line-height: 1.75;
}
.hero-ctas { display: flex; gap: 14px; justify-content: center; margin-top: 34px; flex-wrap: wrap; }
.cta-btn-ghost {
  display: inline-flex; align-items: center; font-family: inherit;
  font-size: 0.95rem; font-weight: 500; color: var(--ink);
  background: transparent; border: 1px solid var(--line);
  padding: 14px 32px; border-radius: 999px; text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.cta-btn-ghost:hover { border-color: var(--green-deep); color: var(--green-deep); }

.thesis {
  max-width: 660px; margin: 0 auto; padding: 56px 0;
  border-top: 1px solid var(--line);
  text-align: center;
}
.thesis-old {
  font-size: 0.92rem; color: var(--ink-soft);
  text-decoration: line-through; text-decoration-color: var(--line); text-decoration-thickness: 2px;
}
.thesis-arrow { color: var(--green); font-size: 0.85rem; margin: 12px 0; letter-spacing: 0.1em; }
.thesis-new {
  font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-style: italic;
  font-size: clamp(1.35rem, 1.6vw + 1rem, 1.9rem);
  text-wrap: balance; line-height: 1.45; color: var(--ink);
}
.thesis-new em { color: var(--green-deep); font-style: italic; }

.pillars { padding: 64px 0 24px; border-top: 1px solid var(--line); }
.pillars-head { margin-bottom: 56px; }

.spine { position: relative; }
.spine::before {
  content: '';
  position: absolute; left: 50%; top: 8px; bottom: 8px;
  width: 1px; background: var(--line);
  transform: translateX(-50%);
}
@media (max-width: 720px) { .spine::before { left: 22px; } }

.ring-row {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px;
  align-items: center;
  padding: 36px 0;
}
.ring-row + .ring-row { border-top: 1px dashed var(--line); }
.ring-row .ring-mark {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--green-deep);
  z-index: 2;
}
.ring-row .ring-num {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line);
  opacity: 0.7;
}
@media (max-width: 720px) {
  .ring-row { grid-template-columns: 1fr; padding-left: 52px; }
  .ring-row .ring-mark { left: 22px; }
  .ring-row .ring-num { left: 22px; }
}

.ring-glyph {
  font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 600;
  font-size: clamp(2.4rem, 3.4vw + 1rem, 3.6rem);
  line-height: 1; text-align: right;
  color: var(--ring-accent, var(--green-deep));
  opacity: 0.92;
}
.ring-row:nth-child(even) .ring-glyph { order: 2; text-align: left; }
.ring-row:nth-child(even) .ring-body { order: 1; text-align: right; }
@media (max-width: 720px) {
  .ring-glyph, .ring-row:nth-child(even) .ring-glyph { text-align: left; order: initial; }
  .ring-body, .ring-row:nth-child(even) .ring-body { text-align: left; order: initial; }
}

.ring-body-label {
  display: inline-block; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 700; color: var(--ring-accent, var(--green-deep)); margin-bottom: 8px;
}
.ring-body-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; color: var(--ink); }
.ring-body-desc { color: var(--ink-soft); font-size: 0.92rem; line-height: 1.7; max-width: 40ch; }
.ring-row:nth-child(even) .ring-body-desc { margin-left: auto; }
@media (max-width: 720px) { .ring-row:nth-child(even) .ring-body-desc { margin-left: 0; } }

.ring-row[data-pillar="tree"]  { --ring-accent: var(--green-deep); }
.ring-row[data-pillar="fruit"] { --ring-accent: var(--amber); }
.ring-row[data-pillar="roots"] { --ring-accent: var(--green); }
.ring-row[data-pillar="rings"] { --ring-accent: var(--amber); }

.landing-footer-mark {
  display: block; margin: 0 auto 6px;
  height: 16px; width: auto;
}

/* ---------- "+" 게시 모달(2026-08-22) — 갤러리 선택 → 작품 선택 → 캡션 입력 ---------- */
.feed-modal { position: fixed; inset: 0; z-index: 200; }
.feed-modal[hidden] { display: none; }
.feed-modal-overlay { position: absolute; inset: 0; background: rgba(20, 18, 15, 0.55); }
.feed-modal-panel {
  position: relative; z-index: 1;
  max-width: 480px; width: calc(100% - 32px);
  margin: 8vh auto 0;
  max-height: 82vh; overflow-y: auto;
  background: var(--card-bg); border-radius: 12px;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.4);
}
.feed-modal-head {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  padding: 16px 18px; border-bottom: 1px solid var(--line);
  background: var(--card-bg);
}
.feed-modal-back, .feed-modal-close {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid var(--line); background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
}
.feed-modal-back svg, .feed-modal-close svg { width: 14px; height: 14px; fill: none; stroke: var(--ink); stroke-width: 1.8; }
.feed-modal-back[hidden] { visibility: hidden; }
.feed-modal-title { flex: 1; font-weight: 700; font-size: 0.96rem; text-align: center; }
.feed-modal-body { padding: 20px; }
.feed-modal-loading, .feed-modal-empty, .feed-modal-success {
  text-align: center; color: var(--ink-soft); font-size: 0.9rem; padding: 24px 0;
}
.feed-modal-success { color: var(--green-deep); font-weight: 600; }

.feed-modal-list { display: flex; flex-direction: column; gap: 10px; }
.feed-modal-list-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-family: inherit; text-align: left; width: 100%;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); cursor: pointer;
}
.feed-modal-list-item:hover { border-color: var(--green); }
.feed-modal-list-title { font-weight: 600; font-size: 0.94rem; }
.feed-modal-list-tag { font-size: 0.72rem; color: var(--ink-soft); white-space: nowrap; }

.feed-modal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 14px; }
.feed-modal-art-item {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  font-family: inherit; text-align: left; padding: 0; border: none; background: none; cursor: pointer;
}
.feed-modal-art-item:disabled { cursor: default; opacity: 0.5; }
.feed-modal-art-thumb {
  display: block; width: 100%; aspect-ratio: 1; border-radius: 8px;
  background-color: var(--line); background-size: cover; background-position: center;
  border: 1px solid var(--line);
}
.feed-modal-art-title { font-size: 0.78rem; color: var(--ink); line-height: 1.3; }
.feed-modal-art-badge {
  position: absolute; top: 6px; right: 6px;
  background: rgba(20, 18, 15, 0.72); color: #fff; font-size: 0.62rem; font-weight: 700;
  padding: 3px 7px; border-radius: 999px;
}

.feed-modal-confirm { display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center; }
.feed-modal-confirm-thumb {
  width: 140px; aspect-ratio: 4 / 5; border-radius: 8px;
  background-color: var(--line); background-size: cover; background-position: center;
  border: 1px solid var(--line);
}
.feed-modal-confirm-title { font-family: 'Playfair Display', Georgia, serif; font-weight: 600; font-size: 1.05rem; }
.feed-modal-confirm-label {
  width: 100%; text-align: left; font-size: 0.82rem; color: var(--ink-soft);
  display: flex; flex-direction: column; gap: 6px;
}
.feed-modal-confirm-label textarea,
.feed-modal-confirm-label input[type="text"] {
  font-family: inherit; font-size: 0.9rem; color: var(--ink);
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; resize: vertical;
  background: var(--bg);
}
.feed-modal-confirm-label textarea:focus,
.feed-modal-confirm-label input[type="text"]:focus { outline: none; border-color: var(--green); }
.feed-modal-submit { width: 100%; text-align: center; }

/* "숲" 플랜 문의 모달(about.html, 2026-09-14) — .feed-modal 틀 재사용,
   .feed-modal-confirm-label은 input[type="text"]/textarea만 스타일링해서
   email/tel 인풋도 같이 잡아주도록 선택자 확장 */
.forest-inquiry-lead { margin: 0 0 4px; font-size: 0.88rem; line-height: 1.6; color: var(--ink-soft); }
.forest-inquiry-form { display: flex; flex-direction: column; gap: 14px; }
.forest-inquiry-form[hidden] { display: none; }
.forest-inquiry-form .feed-modal-confirm-label input[type="email"],
.forest-inquiry-form .feed-modal-confirm-label input[type="tel"] {
  font-family: inherit; font-size: 0.9rem; color: var(--ink);
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg);
}
.forest-inquiry-form .feed-modal-confirm-label input[type="email"]:focus,
.forest-inquiry-form .feed-modal-confirm-label input[type="tel"]:focus { outline: none; border-color: var(--green); }
.forest-inquiry-submit { width: 100%; text-align: center; margin-top: 4px; }
.forest-inquiry-success { margin: 0; font-size: 0.92rem; line-height: 1.7; color: var(--ink); text-align: center; padding: 12px 0; }

/* 신규 공지 알림 팝업(2026-09-13) — feed-modal 기본 틀 재사용, 본문만 전용 레이아웃 */
.feed-notice-popup-body { display: flex; flex-direction: column; gap: 10px; }
.feed-notice-popup-title {
  margin: 0; font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.1rem; font-weight: 700; color: var(--ink);
}
.feed-notice-popup-text { margin: 0; font-size: 0.92rem; line-height: 1.7; color: var(--ink); white-space: pre-wrap; }
.feed-notice-popup-date { font-size: 0.78rem; color: var(--ink-soft); }
.feed-notice-popup-actions { display: flex; gap: 10px; margin-top: 6px; }
.feed-notice-popup-actions .cta-btn,
.feed-notice-popup-actions .cta-btn-ghost { flex: 1; text-align: center; padding: 11px 16px; font-size: 0.88rem; }

/* ── 통합 굿즈 샵(shop.html, 2026-08-27) — 개별 갤러리 안의 샵(3D 앱)과 별개로,
   피드에서 모든 갤러리의 굿즈를 한곳에 모아 보여줌. src/styles/goods.css의
   .shop-card류와 같은 이름을 쓰되(다른 번들이라 충돌 없음) 이 페이지 톤(--ink 등)에
   맞게 새로 작성 — 카드 전체가 그 갤러리로 가는 링크 */
.unified-shop-list { display: flex; flex-direction: column; gap: 14px; }
.shop-card {
  display: flex; gap: 14px; padding: 14px; width: 100%;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--card-bg); text-decoration: none; color: inherit;
  font: inherit; text-align: left; cursor: pointer;
  transition: border-color 0.2s;
}
.shop-card:hover { border-color: var(--green); }
.shop-card-images { flex-shrink: 0; }
.shop-card-images img {
  width: 84px; height: 84px; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--line); display: block;
}
.shop-card-body { flex: 1; min-width: 0; }
.shop-card-gallery { font-size: 0.72rem; color: var(--green); font-weight: 600; margin-bottom: 2px; }
.shop-card-name { font-size: 0.95rem; color: var(--ink); font-weight: 500; margin-bottom: 4px; }
.shop-card-price { font-size: 0.85rem; color: var(--green); font-weight: 600; margin-bottom: 6px; }
.shop-card-desc {
  font-size: 0.8rem; line-height: 1.6; color: var(--ink-soft);
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: pre-wrap;
}
.shop-card.is-skeleton {
  height: 112px; border-radius: 12px; border: 1px solid var(--line);
  background: linear-gradient(90deg, var(--card-bg) 25%, rgba(78, 124, 95, 0.08) 50%, var(--card-bg) 75%);
  background-size: 200% 100%;
  animation: mypage-skeleton-pulse 1.4s ease-in-out infinite;
}

/* 판매 상태 배지 — src/styles/goods.css와 동일 규칙(다른 번들이라 별도 정의) */
.goods-status-badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.03em; white-space: nowrap;
}
.goods-status-badge.status-available { background: var(--danger); color: #fff; }
.goods-status-badge.status-soldout { background: var(--danger-tint); color: var(--danger); }
.goods-status-badge.status-comingsoon { background: rgba(78, 124, 95, 0.14); color: var(--green); }
.goods-status-badge.status-preparing { background: rgba(42, 37, 32, 0.08); color: var(--ink-soft); }

/* 원작품 판매 상태 배지(originals.js, 2026-09-07) — 굿즈와 상태 어휘가 달라
   (원작품은 재고 개념 없는 유일본이라 판매중/예약중/판매완료) goods-status-badge
   대신 전용 클래스. src/styles/goods.css의 3D 앱 드로어 배지와 배색 통일 */
.artwork-sale-badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.03em; white-space: nowrap;
}
.artwork-sale-badge.status-available { background: rgba(78, 124, 95, 0.16); color: var(--green); }
.artwork-sale-badge.status-reserved { background: rgba(168, 118, 58, 0.16); color: #a8763a; }
.artwork-sale-badge.status-sold { background: rgba(42, 37, 32, 0.08); color: var(--ink-soft); }
.feed-modal-error { color: var(--danger); font-size: 0.82rem; }

/* ── 굿즈 상세 모달(shop.js, 2026-08-27) — feed-modal 틀 재사용, 내용만 이 클래스들 ── */
.goods-detail-images { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.goods-detail-images img {
  width: 100%; max-height: 320px; object-fit: cover;
  /* 10px는 근처 큰 이미지들이 쓰는 12px(.feed-hotshow-chip 등)과 8px(작은 썸네일들)
     사이에 낀 값으로 뚜렷한 이유 없이 표류한 것으로 보여(2026-09-03 디자인 검토
     #6) 12px로 맞춤 — 이 이미지는 320px까지 커지는 상세 뷰용 큰 이미지라 8px보다
     12px 그룹에 더 가까움 */
  border-radius: 12px; border: 1px solid var(--line);
}
.goods-detail-gallery {
  font-size: 0.78rem; margin-bottom: 10px;
}
.goods-detail-gallery a { color: var(--green); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(78, 124, 95, 0.4); }
.goods-detail-gallery a:hover { color: var(--green-deep); }
#goods-detail-status:empty { display: none; }
#goods-detail-status { margin-bottom: 8px; }
.goods-detail-price { font-size: 1rem; font-weight: 600; color: var(--green); margin-bottom: 12px; }

/* 외부 판매 링크(2026-08-30, 결제 기능이 아직 없어 다른 판매처로 안내) */
.goods-detail-buylink {
  display: flex; align-items: center; justify-content: center;
  width: 100%; margin-bottom: 14px; padding: 11px 16px;
  border-radius: 8px; background: var(--green); color: #fff;
  font-size: 0.85rem; font-weight: 600; text-decoration: none; text-align: center;
}
.goods-detail-buylink:hover { background: var(--green-deep); }
/* display:flex 위에서 지정한 게 [hidden]의 기본 display:none을 덮어씀(같은 특이도,
   author 스타일이 나중에 로드돼 이김) — 이 레포에서 여러 번 나온 함정, 여기서도
   재발(2026-08-30, "판매 링크 없는 굿즈에도 구매 버튼이 보인다") */
.goods-detail-buylink[hidden] { display: none; }

.goods-detail-desc { font-size: 0.85rem; line-height: 1.7; color: var(--ink); white-space: pre-wrap; }

/* 마이페이지 소개(bio, 2026-08-27) — 예명 섹션과 같은 톤, textarea만 다름 */
.mypage-bio-input {
  flex: 1; min-width: 0;
  border: 1px solid var(--line); border-radius: 8px;
  padding: 9px 12px; font-family: inherit; font-size: 0.88rem;
  resize: vertical;
}
.mypage-bio-input:focus { outline: none; border-color: var(--green); }

/* ── 작가 프로필(artist.html/artist.js, 2026-08-27) ── */
.artist-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 28px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--line);
}
.artist-header[hidden] { display: none; }
.artist-avatar {
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: #fff; font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.6rem; font-weight: 600;
}
.artist-header-info { flex: 1; min-width: 0; }
.artist-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500; font-size: 1.4rem; margin-bottom: 6px;
  text-wrap: balance;
}
.artist-bio { font-size: 0.88rem; line-height: 1.7; color: var(--ink); }
.artist-bio[hidden] { display: none; }
.artist-own-hint { font-size: 0.78rem; color: var(--ink-soft); margin-top: 8px; }
.artist-own-hint[hidden] { display: none; }
.artist-own-hint a { color: var(--green-deep); font-weight: 500; text-decoration: none; border-bottom: 1px solid rgba(78, 124, 95, 0.4); }
.artist-header .feed-follow-btn { margin-left: 0; flex-shrink: 0; }
.artist-header .feed-follow-btn[hidden] { display: none; }

.artist-section { margin-bottom: 40px; }
.artist-section[hidden] { display: none; }

.artist-gallery-list { display: flex; flex-wrap: wrap; gap: 10px; }
.artist-gallery-chip {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid rgba(78, 124, 95, 0.4);
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--green-deep);
  text-decoration: none;
}
.artist-gallery-chip:hover { border-color: var(--green-deep); background: rgba(78, 124, 95, 0.08); }

.artist-story-list { display: flex; flex-direction: column; gap: 12px; }
.artist-story-card {
  display: flex; gap: 14px; padding: 14px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--card-bg);
  text-decoration: none; color: inherit;
  transition: border-color 0.2s;
}
.artist-story-card:hover { border-color: var(--green-deep); }
.artist-story-thumb {
  width: 64px; height: 64px; flex-shrink: 0;
  border-radius: 8px; background-size: cover; background-position: center;
}
.artist-story-body { min-width: 0; }
.artist-story-text {
  font-size: 0.86rem; line-height: 1.6; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.artist-story-date { font-size: 0.76rem; color: var(--ink-soft); }

/* 글(article) 전체 보기 — /artist/{uid}/{postId}(2026-09-12, WRITER_PLAN.md).
   프로필 목록과 완전히 분리된 뷰라 같은 <main> 안에서 hidden 토글로 공존 */
.artist-article-view[hidden] { display: none; }
.artist-article-back {
  display: inline-block; margin-bottom: 20px;
  font-size: 0.84rem; color: var(--ink-soft); text-decoration: none;
}
.artist-article-back:hover { color: var(--green-deep); }
.artist-article-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600; font-size: 1.8rem; line-height: 1.35;
  margin-bottom: 10px; text-wrap: balance;
}
.artist-article-byline {
  display: flex; gap: 10px; align-items: baseline;
  font-size: 0.82rem; color: var(--ink-soft); margin-bottom: 24px;
}
.artist-article-cover[hidden] { display: none; }
.artist-article-cover {
  width: 100%; max-height: 420px; object-fit: cover;
  border-radius: 16px; margin-bottom: 24px;
}
.artist-article-body { font-size: 0.98rem; line-height: 1.85; color: var(--ink); }
.artist-article-body p { margin: 0 0 1.2em; white-space: pre-wrap; }
.artist-article-body p:last-child { margin-bottom: 0; }