/* =========================================================================
 * Picment Gallery — Session Download Page MVP
 * Phase: Picment-Gallery-Session-Download-Page-MVP (2026-06-11)
 *
 * 디자인 토큰:
 *   웜 오프화이트 배경 + 차콜 텍스트 + 샴페인 골드 포인트.
 *   모바일 우선, max-width 720px, 차분한 웨딩 톤.
 * ========================================================================= */

:root {
  /* 색 */
  --color-bg:           #FAF7F2;
  --color-card-bg:      #FFFFFF;
  --color-text:         #1F1F1F;
  --color-text-mute:    #5A5A5A;
  --color-gold:         #C9A86A;
  --color-gold-soft:    #E0CFA8;
  --color-warn:         #B45309;
  --color-warn-bg:      #FEF5E7;
  --color-error:        #9B2C2C;
  --color-border:       #E8E2D6;
  --color-img-placeholder: #F0EDE6;

  /* 형태 */
  --radius-card:        12px;
  --radius-button:      8px;
  --shadow-card:        0 2px 12px rgba(0,0,0,0.06);

  /* 폰트 */
  --font-stack: system-ui, -apple-system, "Segoe UI",
                "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;

  /* 여백 */
  --gap-sm: 8px;
  --gap-md: 16px;
  --gap-lg: 24px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-stack);
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

.app {
  max-width: 720px;
  margin: 0 auto;
  /* 📜 Phase Picment-Gallery-iPhone-Logo-Render-Audit-And-Copy-Punctuation-Softening (2026-06-14)
     iOS notch / dynamic island 안전 영역 확보 — viewport-fit=cover 환경에서 24px 가 부족해
     iPhone 상단 카메라/다이내믹 아일랜드 아래로 로고가 겹쳐 보이던 현상 차단. */
  padding-top: max(24px, env(safe-area-inset-top, 24px));
  padding-right: 16px;
  padding-bottom: 48px;
  padding-left: 16px;
}

/* ── 헤더 / 브랜드 ─────────────────────────────────────── */

.brand {
  text-align: center;
  padding: 8px 0 24px;
}

.brand-logo-wrap {
  position: relative;
  display: inline-block;
  /* margin-bottom: 0 으로 전환 — 로고-bar 간격은 .brand-underline 의 margin-top 단일 권위.
     이전 margin-bottom 10px + underline margin-top 10px 가중 20px → bar-tagline 12px 와 비대칭 문제 해결. */
  margin-bottom: 0;
  /* min-height 으로 로고 로드 전/실패 시에도 헤더 공간 확보 — 슬로건이 위로 밀려 layout shift 차단. */
  min-height: 56px;
  /* 좌우 padding 으로 로고 가장자리가 카드 경계와 밀착 안 되게. */
  padding: 4px 8px;
  /* 📜 Phase Picment-Gallery-iPhone-Logo-Render-Audit-And-Copy-Punctuation-Softening (2026-06-14)
     iOS Safari 가 inline-block 컨테이너 안 SVG 의 줄높이를 베이스라인 정렬해 하단을 잘라 보이게
     하던 후보. overflow:visible 명시 + line-height 0 으로 baseline drop 차단. */
  overflow: visible;
  line-height: 0;
}

.brand-logo {
  display: block;
  /* 사용자 요구: max-width 220px, height auto. max-height 제거 — SVG aspect ratio 자연 유지. */
  max-width: 220px;
  width: 100%;
  height: auto;
  /* 일부 SVG export 가 intrinsic dimensions 0 인 경우 대비. */
  min-height: 1px;
  /* 📜 Phase Picment-Gallery-Outlined-Logo-Asset-Replace-And-Staging-Deploy (2026-06-15)
     · aspect-ratio 600 / 160 = 새 outlined SVG viewBox 정합 (path 변환 + 상/하 17~21 단위 path 여백).
     · 모든 문자열이 <text> → <path> 로 outlined → iOS Safari font-substitute / overflow clip 양쪽 다 차단.
     · object-fit contain = 컨테이너 다르게 잡혀도 비율 왜곡 0.
     · margin auto = inline-block 부모 안 가운데 정렬 안정. */
  aspect-ratio: 600 / 160;
  object-fit: contain;
  margin: 0 auto;
}

.brand-logo-fallback {
  /* 기본 숨김 — JS 가 .show 클래스 추가 시에만 노출.
     ⚠ underline bar 는 공통 .brand-underline 으로 분리 — fallback 자체에는 border-bottom 부재 (중복 방지). */
  display: none;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--color-text);
  margin: 0 auto;
}

.brand-logo-fallback.show {
  display: inline-block;
}

/* 로고 이미지 자체에 fallback 클래스가 동시에 붙으면 — JS 가 .show 후 img 는 display:none 처리. */
.brand-logo.failed {
  display: none !important;
}

/* champagne gold underline bar — 로고 (SVG / 텍스트 fallback) 와 슬로건 사이 공통 장식 요소.
   양 분기에서 동일하게 표시되도록 logo-wrap / fallback 외부에 sibling 으로 배치.
   width 200px = 슬로건 "흩어지는 순간을 하나의 앨범으로." 폭 (system-ui 14px 기준 ~215px) 의 약 93% —
   양 끝 "어 ~ 으" 구간을 자연스럽게 받쳐주는 길이. tagline 폭 보다 약간 짧아 안정감.
   tagline 자체가 viewport 무관 (font-size 14px 고정) 이므로 vw 기반 clamp 비채택 — 고정 px 가 안정.
   margin top 12px = bottom 12px — 로고/슬로건과 시각적 균형. wrap 의 margin-bottom 은 0 으로 전환됨. */
.brand-underline {
  width: 200px;
  height: 2px;
  background-color: var(--color-gold);
  border-radius: 999px;
  margin: 12px auto 12px;
}

.brand-tagline {
  color: var(--color-text-mute);
  font-size: 14px;
}

/* ── In-app browser 경고 배너 ──────────────────────────── */

.banner {
  border-radius: var(--radius-card);
  padding: 12px 16px;
  margin-bottom: var(--gap-md);
  font-size: 13px;
  line-height: 1.55;
}

.banner-warning {
  background: var(--color-warn-bg);
  border: 1px solid #F3D7A0;
  color: var(--color-warn);
}

/* ── 상태 카드 (Loading / Expired / NotFound / Error / NoFiles) ── */

.view { margin-top: 8px; }

.state-block {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 32px 24px;
  text-align: center;
  box-shadow: var(--shadow-card);
}

.state-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--color-text);
}

.state-body {
  color: var(--color-text-mute);
  font-size: 14px;
  margin: 0 0 20px;
  line-height: 1.6;
}

.state-text {
  color: var(--color-text-mute);
  font-size: 14px;
  margin-top: 16px;
}

.spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-gold);
  border-radius: 50%;
  margin: 0 auto;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── 세션 메타 카드 ────────────────────────────────────── */

.session-meta {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 14px 16px;
  margin-bottom: var(--gap-md);
  box-shadow: var(--shadow-card);
}

.session-meta-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 14px;
  padding: 4px 0;
}

.session-meta-label {
  color: var(--color-text-mute);
  font-size: 13px;
}

.session-meta-value {
  font-weight: 500;
  color: var(--color-text);
  font-size: 14px;
}

.session-meta-value.warn {
  color: var(--color-warn);
}

.file-count {
  text-align: center;
  font-size: 14px;
  color: var(--color-text-mute);
  margin: 8px 0 16px;
  line-height: 1.55;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* ──────────────────────────────────────────────────────────────────────
 * 📜 Phase R+4-C-FIX-1B (2026-06-15) — 늦은 업로드 GIF/Motion 준비 중 배너.
 * 📜 Phase R+4-C-FIX-1B-banner-contrast-fix (2026-06-16) — 시인성 강화 (CSS only).
 *
 * 위치: file-count 와 file-list 사이.
 * 상태: 기본 = "준비 중 + 자동 표시 안내" / .delayed-media-pending--timeout = "조금 뒤 새로고침".
 * 모바일 우선 — warm cream 배경 + 검정 텍스트로 어두운 갤러리 톤 위에서 확실히 보이도록.
 * 경고 톤 아닌 안내 톤 — 따뜻한 amber/gold border + 부드러운 shadow.
 * ────────────────────────────────────────────────────────────────────── */
.delayed-media-pending {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 16px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #FFF7D6;
  border: 1px solid #F2C94C;
  color: #1F1A0F;
  line-height: 1.5;
  box-shadow: 0 4px 14px rgba(31, 26, 15, 0.18), 0 1px 2px rgba(31, 26, 15, 0.10);
}
.delayed-media-pending[hidden] {
  display: none;
}
.delayed-media-pending-dot {
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #D97706;
  box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.55);
  animation: delayedMediaPulse 1.4s ease-in-out infinite;
}
.delayed-media-pending-text {
  flex: 1 1 auto;
  min-width: 0;
}
.delayed-media-pending-title {
  font-size: 14px;
  font-weight: 700;
  color: #1F1A0F;
  letter-spacing: 0.1px;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.delayed-media-pending-sub {
  font-size: 12px;
  font-weight: 500;
  color: #4A3F26;
  margin-top: 3px;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.delayed-media-pending--timeout {
  background: #FFFBEB;
  border-color: #E0B453;
}
.delayed-media-pending--timeout .delayed-media-pending-dot {
  background: #B45309;
  animation: none;
}
@keyframes delayedMediaPulse {
  0%   { box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(217, 119, 6, 0); }
  100% { box-shadow: 0 0 0 0 rgba(217, 119, 6, 0); }
}

/* ── Phase: Picment-Gallery-Minimal-UI-Cleanup-Expiry-Line-And-Footer-CTA (2026-06-14) ──
   상단 .success-title — "사진이 준비됐어요" 인사. 카드 아님 — 작고 깔끔한 H2. */
.success-title {
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.1px;
  color: var(--color-text);
  margin: 4px 0 6px;
  line-height: 1.4;
}

/* 파일 용량 표시 (`14.2 MB`) 제거 — JS 가 더 이상 렌더링하지 않지만 캐시 잔재 / 후속 회귀 안전망. */
.file-size {
  display: none !important;
}

/* ── Phase: Picment-Gallery-Session-Card-Adaptive-Layout-V2-Implementation (2026-06-14) ──
   파일 5개 이상 진입 시 .file-list 에 .file-list--compact-mode 클래스 부여.
   대표 큰 카드 1개 (기존 .file-card 그대로) + 정사각 썸네일 grid 조합.
   파일 1~4 개일 때는 본 클래스 없음 → 직전 phase 의 1열 큰 카드 100% 그대로. */

.file-list--compact-mode {
  gap: 20px;
}

.file-compact-section {
  margin-top: 0;
}

.file-compact-heading {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-mute);
  margin: 0 0 12px;
  letter-spacing: 0.2px;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.file-tiles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px;
}
@media (min-width: 480px) {
  .file-tiles-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
  }
}

/* 개별 tile — button 으로 렌더링하되 카드 외형 + 정사각 비율 + 라벨 */
.file-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease;
}
.file-tile:active {
  transform: scale(0.97);
}
.file-tile:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
  border-radius: 10px;
}

.file-tile-img-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--color-img-placeholder);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
}
.file-tile-img-wrap img,
.file-tile-img-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* video 클릭이 tile button 클릭을 가로채지 않도록 차단 — tile 핸들러가 항상 우선. */
  pointer-events: none;
}

/* 📜 Phase Picment-Gallery-Motion-Video-Preview-Modal-And-Promo-Linebreak-Fix (2026-06-14)
   영상 썸네일 placeholder — 무한재생 0 정책. 어두운 톤 + ▶ 큰 아이콘 (별도 overlay 가 표시). */
.file-tile-video-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1F2937 0%, #0D1117 100%);
  display: block;
}

.file-tile-overlay-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  padding-left: 2px; /* visual center for ▶ glyph */
}

.file-tile-label {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--color-text-mute);
  line-height: 1.35;
  word-break: keep-all;
  overflow-wrap: break-word;
  min-height: 1.35em; /* download 진행 텍스트 변경 시 layout shift 차단 */
}

.file-tile-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--color-text-mute);
  text-align: center;
  padding: 8px;
}

/* Reduced motion — tile active scale 제거 */
@media (prefers-reduced-motion: reduce) {
  .file-tile { transition: none !important; }
  .file-tile:active { transform: none !important; }
}

/* ── 파일 카드 목록 ────────────────────────────────────── */

.file-list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}

.file-card {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.file-preview {
  width: 100%;
  background: var(--color-img-placeholder);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  overflow: hidden;
}

.file-preview img,
.file-preview video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: contain;
  background: #fff;
}

.file-preview-empty {
  color: var(--color-text-mute);
  font-size: 13px;
  padding: 32px;
}

.file-info {
  padding: 14px 16px 16px;
}

.file-type-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--color-text-mute);
  margin-bottom: 10px;
}

.file-type-label {
  font-weight: 500;
  color: var(--color-text);
  font-size: 14px;
}

.file-size {
  color: var(--color-text-mute);
}

.file-actions {
  display: flex;
  gap: 8px;
}

.file-note {
  margin-top: 10px;
  font-size: 11px;
  color: var(--color-text-mute);
  line-height: 1.5;
}

/* ── 버튼 ──────────────────────────────────────────────── */

.btn-primary {
  background: var(--color-gold);
  color: #fff;
  border: none;
  border-radius: var(--radius-button);
  padding: 11px 16px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  flex: 1;
  font-family: inherit;
  transition: opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.btn-primary:hover { opacity: 0.92; }
.btn-primary:active { opacity: 0.85; }

.btn-primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn-secondary {
  background: #fff;
  border: 1px solid var(--color-gold);
  color: var(--color-gold);
  border-radius: var(--radius-button);
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  margin-top: 16px;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
}

.btn-secondary:hover { background: #FBF8F0; }

.btn-secondary[hidden] { display: none; }

.caption {
  margin: 24px auto 0;
  font-size: 12px;
  color: var(--color-text-mute);
  text-align: center;
  line-height: 1.6;
  max-width: 360px;
}

/* ── 하단 Picment Photobooth CTA (footer-promo) ───────────
   📜 Phase Picment-Gallery-Footer-CTA-TwoColumn-Homepage-And-Kakao-Link (2026-06-15)
   직전 Phase 의 `<aside class="success-cta">` (hardcoded 1버튼) + `#footerPromo` 본 카드 (1버튼)
   두 카드가 /s 하단에 동시 노출되어 중복 인상 → 단일 `#footerPromo` 카드 + 2버튼 (홈페이지 보기 / 카카오톡 문의) 로 통합.
   기존 `.success-cta-*` / `.footer-promo-label` / `.footer-promo-cta` 룰 폐기.
   문구 / URL 출처 = app.js `FOOTER_PROMO` config (textContent 안전 렌더).  */

/* ── 푸터 ──────────────────────────────────────────────── */

.site-footer {
  margin-top: 32px;
  padding-top: var(--gap-md);
  border-top: 1px solid var(--color-border);
}

.footer-promo {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 22px 20px 20px;
  margin: 0 auto 16px;
  max-width: 420px;
  text-align: center;
  box-shadow: var(--shadow-card);
}

/* 이미지가 있을 때만 상단에 별도 영역. 단일 권위 = textContent flow. */
.footer-promo-image {
  display: block;
  width: 100%;
  max-height: 140px;
  object-fit: cover;
  border-radius: 8px;
  margin: 0 0 12px;
}

.footer-promo-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.8px;
  color: var(--color-gold);
  margin-bottom: 8px;
  text-transform: uppercase;
}

.footer-promo-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.45;
  margin: 0 0 8px;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.footer-promo-desc {
  font-size: 13px;
  color: var(--color-text-mute);
  line-height: 1.55;
  margin: 0 0 16px;
  /* description 문자열 안의 \n 을 line break 로 렌더 — textContent 안전 + 두 줄 카피.
     (직전 Phase Picment-Gallery-Motion-Video-Preview-Modal-And-Promo-Linebreak-Fix 정책 유지.) */
  white-space: pre-line;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 2열 버튼 row — 모바일 360px 에서도 두 글자 카피 ("홈페이지 보기" / "카카오톡 문의") 한 줄 유지. */
.footer-promo-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 4px;
}

.footer-promo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 📜 Phase Picment-Gallery-Homepage-Phone-Secondary-CTA-And-FAQ-Contact-Update (2026-06-15)
     line-height 1.2 + text-align center 명시 — 일부 폰트 fallback 환경에서 baseline drop
     으로 텍스트가 살짝 위/아래로 흔들리던 잠재 가능성 차단. */
  text-align: center;
  line-height: 1.2;
  min-height: 48px;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
  text-decoration: none;
  white-space: nowrap;
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
}

/* 홈페이지 보기 — 기존 톤 유지 (얇은 골드 외곽 + 차분한 텍스트). */
.footer-promo-btn-home {
  color: var(--color-gold);
  border-color: var(--color-gold);
}
.footer-promo-btn-home:hover  { background: #FBF8F0; }
.footer-promo-btn-home:active { background: #F5EFE0; }

/* 카카오톡 문의 — 살짝 강조: 샴페인 계열 테두리 + 은은한 골드 그림자.
   배경은 과한 노란색 채움 X — 톤 유지. */
.footer-promo-btn-kakao {
  color: var(--color-text);
  border: 1px solid rgba(188, 157, 95, 0.75);
  box-shadow: 0 8px 18px rgba(188, 157, 95, 0.12);
}
.footer-promo-btn-kakao:hover {
  background: #FBF8F0;
  border-color: rgba(188, 157, 95, 0.95);
  box-shadow: 0 10px 22px rgba(188, 157, 95, 0.18);
}
.footer-promo-btn-kakao:active {
  background: #F5EFE0;
  box-shadow: 0 4px 10px rgba(188, 157, 95, 0.18);
}

@media (prefers-reduced-motion: reduce) {
  .footer-promo-btn { transition: none !important; }
}

.footer-base {
  text-align: center;
  font-size: 12px;
  color: var(--color-text-mute);
  padding: 16px 0;
  letter-spacing: 0.3px;
}

/* ── 반응형 — 데스크탑 미세 조정 ───────────────────────── */

@media (min-width: 600px) {
  .app { padding: 32px 24px 56px; }
  .brand { padding-bottom: 32px; }
  .state-block { padding: 40px 32px; }
}

/* ── 접근성 — reduced motion ───────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 2s; }
  * { transition-duration: 0.01ms !important; }
}

/* =========================================================================
 * Picment 홈페이지 — `/` 진입 시 표시
 * Phase: Picment-Website-Home-Minimum-PreLaunch-Implementation (2026-06-14)
 *
 * 디자인 토큰 (:root 변수) 모두 재사용 — 새 색 / 폰트 0 추가.
 * 외부 라이브러리 0 / 무거운 애니메이션 0.
 * `/s/{token}` Gallery 다운로드 페이지 레이아웃 0 영향.
 * ========================================================================= */

/* ── Hero ─────────────────────────────────────────────── */
.home-hero {
  text-align: center;
  padding: 8px 4px 28px;
  margin-bottom: var(--gap-md);
}

.home-hero-title {
  font-size: clamp(24px, 5.5vw, 32px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.2px;
  margin: 0 0 14px;
  color: var(--color-text);
  animation: home-fade-in 0.6s ease both;
}

.home-hero-sub {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.2px;
  color: var(--color-gold);
  margin: 0 0 12px;
  animation: home-fade-in 0.6s ease 0.08s both;
}

.home-hero-desc {
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text-mute);
  max-width: 420px;
  margin: 0 auto;
  animation: home-fade-in 0.6s ease 0.16s both;
}

/* ── Service cards ────────────────────────────────────── */
.home-services {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
  margin-bottom: 24px;
}

.home-service-card {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 18px 20px;
  box-shadow: var(--shadow-card);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  animation: home-slide-up 0.5s ease both;
}

.home-service-card:nth-child(1) { animation-delay: 0.20s; }
.home-service-card:nth-child(2) { animation-delay: 0.28s; }
.home-service-card:nth-child(3) { animation-delay: 0.36s; }

.home-service-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.home-service-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 6px;
  letter-spacing: 0.1px;
}

.home-service-tag {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-text-mute);
}

/* ── QR 안내 카드 ─────────────────────────────────────── */
.home-qr-help {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 20px;
  margin-bottom: 16px;
  text-align: center;
  box-shadow: var(--shadow-card);
  animation: home-fade-in 0.6s ease 0.40s both;
}

.home-qr-title {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--color-text);
}

.home-qr-body {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--color-text-mute);
  margin: 0 0 6px;
}

.home-qr-hint {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--color-text-mute);
  margin: 0;
}

.home-qr-hint code {
  font-family: ui-monospace, "SF Mono", Consolas, Menlo, monospace;
  font-size: 12px;
  background: var(--color-img-placeholder);
  color: var(--color-text);
  padding: 1px 6px;
  border-radius: 4px;
}

/* ── CTA placeholder ──────────────────────────────────── */
.home-cta {
  text-align: center;
  padding: 12px 0 8px;
  animation: home-fade-in 0.6s ease 0.48s both;
}

.home-cta-text {
  display: inline-block;
  font-size: 13px;
  color: var(--color-text-mute);
  padding: 10px 18px;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-button);
  background: rgba(255, 255, 255, 0.5);
}

/* ── Home footer-base 2-line (copyright + powered by) ── */
.footer-base-copyright {
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 4px;
}

.footer-base-powered {
  color: var(--color-text-mute);
  font-size: 11.5px;
  letter-spacing: 0.4px;
}

/* ── Keyframes ────────────────────────────────────────── */
@keyframes home-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes home-slide-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── PC: 3-column service grid ────────────────────────── */
@media (min-width: 640px) {
  .home-services {
    flex-direction: row;
    gap: var(--gap-md);
  }
  .home-service-card { flex: 1; }
}

/* ── 접근성 — reduced motion (home 전용 강한 가드) ────── */
@media (prefers-reduced-motion: reduce) {
  .home-hero-title,
  .home-hero-sub,
  .home-hero-desc,
  .home-service-card,
  .home-qr-help,
  .home-cta {
    animation: none !important;
  }
  .home-service-card {
    transition: none !important;
  }
}

/* =========================================================================
 * Picment 홈페이지 — 상용화 콘텐츠 섹션
 * Phase: Picment-Website-Commercial-Copy-And-Editable-Content-Revision (2026-06-14)
 *
 * 디자인 토큰 재사용. 신규 색/폰트 0. 외부 라이브러리 0.
 * Hero 는 기존 .home-hero (위 블록) 유지하되 eyebrow 1개 추가.
 * ========================================================================= */

/* ── Hero eyebrow (신규) ──────────────────────────────── */
.home-hero-eyebrow {
  font-size: 11.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-gold);
  margin: 0 0 12px;
  font-weight: 600;
  animation: home-fade-in 0.5s ease both;
}

/* ── Hero CTA 영역 ────────────────────────────────────── */
.home-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 22px;
  animation: home-fade-in 0.6s ease 0.25s both;
}
.home-hero-cta-empty {
  font-size: 13px;
  color: var(--color-text-mute);
  padding: 10px 18px;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-button);
  background: rgba(255, 255, 255, 0.5);
}
.home-cta-btn {
  /* 📜 Phase Picment-Gallery-Homepage-Phone-Secondary-CTA-And-FAQ-Contact-Update (2026-06-15)
     inline-block → inline-flex 로 전환 + align/justify center + text-align/line-height —
     글자가 시각적으로 살짝 치우치던 문제 차단 (Hero 의 "카카오톡 문의" 등). */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
  padding: 11px 22px;
  border-radius: var(--radius-button);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid transparent;
  transition: opacity 0.15s, background 0.15s, transform 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.home-cta-btn--primary {
  background: var(--color-gold);
  color: #fff;
  border-color: var(--color-gold);
}
.home-cta-btn--primary:hover { opacity: 0.92; transform: translateY(-1px); }
.home-cta-btn--secondary {
  background: #fff;
  color: var(--color-gold);
  border-color: var(--color-gold);
}
.home-cta-btn--secondary:hover { background: #FBF8F0; transform: translateY(-1px); }

/* ── 공통 섹션 ────────────────────────────────────────── */
.home-section {
  margin: 36px 0;
}
.home-section-title {
  font-size: clamp(20px, 4.5vw, 26px);
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--color-text);
  text-align: center;
  letter-spacing: -0.1px;
}
.home-section-subtitle {
  font-size: 11.5px;
  font-weight: 600;
  margin: 18px 0 12px;
  color: var(--color-text-mute);
  text-align: center;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.home-section-intro {
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text-mute);
  text-align: center;
  margin: 4px auto 16px;
  max-width: 520px;
}
.home-section-note {
  font-size: 11.5px;
  color: var(--color-text-mute);
  text-align: center;
  margin-top: 14px;
}

/* ── Features grid ────────────────────────────────────── */
.home-features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 18px;
}
.home-feature-card {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 18px;
  box-shadow: var(--shadow-card);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.home-feature-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.home-feature-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 6px;
}
.home-feature-body {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--color-text-mute);
}
@media (min-width: 640px) {
  .home-features-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .home-features-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Program tier cards ──────────────────────────────── */
.home-tier-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 6px;
}
.home-tier-card {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 16px 18px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
}
.home-tier-name {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--color-gold);
  margin-bottom: 4px;
  text-transform: uppercase;
}
.home-tier-for {
  font-size: 13px;
  color: var(--color-text);
  font-weight: 500;
  margin-bottom: 6px;
}
.home-tier-body {
  font-size: 12.5px;
  color: var(--color-text-mute);
  line-height: 1.6;
  flex: 1;
}
.home-tier-status {
  display: inline-block;
  align-self: flex-start;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 3px 10px;
  border-radius: 999px;
  margin-top: 10px;
}
.home-tier-status--preparing {
  background: var(--color-warn-bg);
  color: var(--color-warn);
  border: 1px solid #F3D7A0;
}
.home-tier-status--direct {
  background: #F3F0E6;
  color: #8A6A2F;
  border: 1px solid var(--color-gold-soft);
}
@media (min-width: 720px) {
  .home-tier-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .home-tier-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── Gallery (QR 안내) + Phone mockup ──────────────── */
.home-gallery-layout {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
  margin-top: 18px;
}
.home-gallery-copy {
  text-align: center;
  max-width: 480px;
}
.home-gallery-copy > p {
  font-size: 13.5px;
  color: var(--color-text-mute);
  line-height: 1.7;
  margin: 0 0 8px;
}
.home-gallery-hint {
  font-size: 12.5px;
}
.home-gallery-hint code {
  font-family: ui-monospace, "SF Mono", Consolas, Menlo, monospace;
  font-size: 12px;
  background: var(--color-img-placeholder);
  color: var(--color-text);
  padding: 1px 6px;
  border-radius: 4px;
}
.home-phone-mockup {
  width: 220px;
  height: 420px;
  background: #1F1F1F;
  border-radius: 32px;
  padding: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  margin: 0 auto;
  animation: home-float 4s ease-in-out infinite;
}
.home-phone-mockup-screen {
  width: 100%;
  height: 100%;
  background: var(--color-bg);
  border-radius: 24px;
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.home-mockup-brand {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-gold);
  text-align: center;
  letter-spacing: 0.4px;
  margin-bottom: 2px;
}
.home-mockup-meta {
  font-size: 10px;
  color: var(--color-text-mute);
  text-align: center;
  padding: 6px 8px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 6px;
}
.home-mockup-tile {
  background: var(--color-img-placeholder);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  width: 100%;
  aspect-ratio: 4 / 3;
}
.home-mockup-tile-row { display: flex; gap: 6px; }
.home-mockup-tile.small { flex: 1; aspect-ratio: 1; }
.home-mockup-btn {
  background: var(--color-gold);
  color: #fff;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 6px;
  margin-top: auto;
  letter-spacing: 0.3px;
}
@keyframes home-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@media (min-width: 720px) {
  .home-gallery-layout {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 36px;
  }
  .home-gallery-copy { text-align: left; }
  .home-phone-mockup { margin: 0; flex-shrink: 0; }
}

/* ── Process steps ────────────────────────────────────── */
.home-process-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 0;
  margin: 18px 0 0;
  counter-reset: process-step;
  list-style: none;
}
.home-process-step {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 16px 18px 14px 56px;
  box-shadow: var(--shadow-card);
  position: relative;
  counter-increment: process-step;
}
.home-process-step::before {
  content: counter(process-step);
  position: absolute;
  left: 18px;
  top: 16px;
  width: 26px;
  height: 26px;
  background: var(--color-gold);
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-process-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 4px;
}
.home-process-body {
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text-mute);
}
@media (min-width: 720px) {
  .home-process-list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .home-process-list { grid-template-columns: repeat(5, 1fr); }
  .home-process-step {
    padding: 56px 16px 16px;
    text-align: center;
  }
  .home-process-step::before {
    left: 50%;
    top: 18px;
    transform: translateX(-50%);
  }
}

/* ── FAQ (native <details>) ──────────────────────────── */
.home-faq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 18px;
}
.home-faq-item {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.home-faq-summary {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  padding: 14px 44px 14px 18px;
  cursor: pointer;
  list-style: none;
  position: relative;
}
.home-faq-summary::-webkit-details-marker { display: none; }
.home-faq-summary::after {
  content: "+";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: var(--color-gold);
  font-weight: 400;
  transition: transform 0.2s;
}
.home-faq-item[open] .home-faq-summary::after {
  content: "−";
}
.home-faq-body {
  padding: 0 18px 16px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--color-text-mute);
  /* 📜 Phase Picment-Gallery-Homepage-Phone-Secondary-CTA-And-FAQ-Contact-Update (2026-06-15)
     FAQ 답변 안의 \n 을 line break 로 렌더 — textContent 안전.
     단일 줄 답변은 영향 0, 다중 줄 답변 (예: "문의는 어떻게 하나요?") 만 자연스러운 줄바꿈. */
  white-space: pre-line;
}

/* ── Portfolio (기본 숨김; enabled+items 시만 노출) ──── */
.home-portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.home-portfolio-item {
  background: var(--color-img-placeholder);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.home-portfolio-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Contact ──────────────────────────────────────────── */
.home-contact-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 18px auto 0;
  max-width: 360px;
}
.home-contact-grid:empty { display: none; }

.home-contact-btn {
  /* 📜 Phase Picment-Gallery-Homepage-Phone-Secondary-CTA-And-FAQ-Contact-Update (2026-06-15)
     기본 justify-content 를 center 로 변경 — 값 없는 단일 라벨 (예: kakao "카카오톡 문의") 이
     라벨 단독일 때 좌측으로 치우치지 않고 중앙에 표시되도록.
     라벨+값 (예: phone "전화 문의" + "010-8115-9541") 구조는
     .home-contact-btn--has-value 변형이 space-between 으로 복원. */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
  gap: 12px;
  text-decoration: none;
  padding: 14px 18px;
  border-radius: var(--radius-button);
  border: 1px solid var(--color-border);
  background: var(--color-card-bg);
  color: var(--color-text);
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--shadow-card);
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.home-contact-btn--has-value {
  justify-content: space-between;
  text-align: left;
}
.home-contact-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  background: #FBF8F0;
}
.home-contact-btn--primary {
  background: var(--color-gold);
  color: #fff;
  border-color: var(--color-gold);
}
.home-contact-btn--primary:hover {
  background: var(--color-gold);
  opacity: 0.94;
  color: #fff;
}
.home-contact-btn-label { font-weight: 600; }
.home-contact-btn-value {
  font-size: 12.5px;
  color: var(--color-text-mute);
  font-weight: 400;
  letter-spacing: 0.2px;
}
.home-contact-btn--primary .home-contact-btn-value {
  color: rgba(255, 255, 255, 0.85);
}

.home-contact-empty {
  text-align: center;
  font-size: 13px;
  color: var(--color-text-mute);
  padding: 14px 18px;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-button);
  background: rgba(255, 255, 255, 0.5);
  margin: 18px auto 0;
  max-width: 360px;
}

/* ── Social row (Blog / Instagram) ───────────────────── */
.home-social-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 18px;
}
.home-social-link {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-text-mute);
  text-decoration: none;
  background: var(--color-card-bg);
  transition: border-color 0.15s, color 0.15s;
}
.home-social-link:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
}

/* ── Reduced motion 가드 확장 ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .home-hero-eyebrow,
  .home-hero-cta,
  .home-feature-card,
  .home-tier-card,
  .home-phone-mockup,
  .home-contact-btn,
  .home-faq-summary::after {
    animation: none !important;
    transition: none !important;
  }
  .home-feature-card:hover,
  .home-contact-btn:hover,
  .home-cta-btn:hover {
    transform: none !important;
  }
}

/* =========================================================================
 * Picment 홈페이지 — Visual Polish (Mockup-First)
 * Phase: Picment-Website-Visual-Polish-Mockup-First-Implementation (2026-06-14)
 *
 * 자산 0 추가. 순수 CSS / 인라인 SVG (app.js ICONS 레지스트리) 만 사용.
 * /s/{token} 라우트는 .app--home 미적용 → Gallery 720px 컨테이너 그대로.
 * ========================================================================= */

/* ── 홈 전용 와이드 컨테이너 (1080px) ─────────────────── */
.app.app--home {
  max-width: 1080px;
}
@media (min-width: 1000px) {
  .app.app--home { padding: 32px 32px 64px; }
}

/* ── Hero 컴포지션 (텍스트 + 4-cut 인화지 + QR 카드) ─── */
.home-hero {
  padding: 16px 4px 36px;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.home-hero-content {
  text-align: center;
  max-width: 560px;
}

.home-eyebrow-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--color-gold);
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
  transform: translateY(-1px);
}

/* Hero visual = 인화 4-cut + QR 카드 (자산 없음, 순수 CSS) */
.home-hero-visual {
  position: relative;
  width: 280px;
  height: 380px;
  flex-shrink: 0;
  animation: home-fade-in 0.8s ease 0.3s both;
}

.home-hero-print {
  position: absolute;
  left: 0;
  top: 0;
  width: 200px;
  height: 360px;
  background: #FFFFFF;
  border-radius: 6px;
  box-shadow: 0 18px 40px rgba(31, 31, 31, 0.16), 0 6px 14px rgba(31, 31, 31, 0.08);
  padding: 16px 16px 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr auto;
  gap: 10px;
  transform: rotate(-4deg);
  border: 1px solid #ECE7DC;
}
.home-hero-print-tile {
  border-radius: 4px;
  background: linear-gradient(135deg, #E8DDC9 0%, #D5C5A2 100%);
}
.home-hero-print-tile--2 {
  background: linear-gradient(135deg, #DCD3E0 0%, #B8A8C4 100%);
}
.home-hero-print-tile--3 {
  background: linear-gradient(135deg, #D6E0DC 0%, #A8C2B5 100%);
}
.home-hero-print-tile--4 {
  background: linear-gradient(135deg, #E5D7CB 0%, #C9A86A 100%);
}
.home-hero-print-foot {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--color-gold);
  padding-top: 4px;
}

.home-hero-qr {
  position: absolute;
  right: 0;
  bottom: 24px;
  width: 130px;
  background: #FFFFFF;
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 14px 30px rgba(31, 31, 31, 0.14), 0 4px 10px rgba(31, 31, 31, 0.06);
  border: 1px solid #ECE7DC;
  transform: rotate(4deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.home-hero-qr-pattern {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  width: 86px;
  height: 86px;
  padding: 4px;
  background: #FFFFFF;
}
.home-hero-qr-pattern span {
  background: #1F1F1F;
  border-radius: 1px;
}
/* Quasi-random QR pattern via nth-child (no real data) — 외관 목적만 */
.home-hero-qr-pattern span:nth-child(2),
.home-hero-qr-pattern span:nth-child(4),
.home-hero-qr-pattern span:nth-child(7),
.home-hero-qr-pattern span:nth-child(10),
.home-hero-qr-pattern span:nth-child(12),
.home-hero-qr-pattern span:nth-child(14),
.home-hero-qr-pattern span:nth-child(17),
.home-hero-qr-pattern span:nth-child(20),
.home-hero-qr-pattern span:nth-child(22),
.home-hero-qr-pattern span:nth-child(24) {
  background: #FFFFFF;
}
.home-hero-qr-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--color-gold);
}

.home-hero-qr-pattern--mini {
  width: 56px;
  height: 56px;
  padding: 3px;
  gap: 1px;
}

/* Tablet+: 텍스트 / 비주얼 좌우 분리 */
@media (min-width: 820px) {
  .home-hero {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    padding: 32px 4px 56px;
    text-align: left;
  }
  .home-hero-content { text-align: left; max-width: 520px; }
  .home-hero-eyebrow,
  .home-hero-title,
  .home-hero-desc { text-align: left; }
  .home-hero-cta { justify-content: flex-start; }
  .home-hero-desc { margin-left: 0; margin-right: 0; }
}

/* ── 섹션 디바이더 (얇은 골드 페이드 라인 + 중앙 다이아) ── */
.home-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 40px auto;
  max-width: 240px;
  height: 12px;
  gap: 12px;
  position: relative;
}
.home-divider::before,
.home-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-border), var(--color-gold-soft));
}
.home-divider::after {
  background: linear-gradient(90deg, var(--color-gold-soft), var(--color-border), transparent);
}
/* 중앙 다이아몬드 — flex item 으로 삽입할 자식이 없으므로 box-shadow 트릭 사용 */
.home-divider {
  position: relative;
}
.home-divider > .home-divider-dot {
  width: 6px;
  height: 6px;
  background: var(--color-gold);
  transform: rotate(45deg);
  flex: 0 0 auto;
}

/* ── Section eyebrow (작은 골드 카프스) ───────────────── */
.home-section-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.2px;
  color: var(--color-gold);
  text-align: center;
  margin: 0 0 10px;
  text-transform: uppercase;
}
/* 좌측정렬 hero 의 eyebrow 는 별도 처리 — `home-hero-eyebrow` 가 우선 */

/* ── 섹션 본문 여백 / 폰트 리듬 재정렬 ───────────────── */
.home-section {
  margin: 56px 0;
}
.home-section-title {
  margin-bottom: 14px;
  line-height: 1.3;
}
.home-section-intro {
  line-height: 1.75;
}

/* ── Feature card 아이콘 ─────────────────────────────── */
.home-feature-card {
  padding: 20px 20px 18px;
}
.home-feature-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #FBF8F0;
  color: var(--color-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  border: 1px solid var(--color-gold-soft);
}
.home-feature-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}
.home-feature-title {
  margin-bottom: 4px;
  font-size: 15.5px;
  letter-spacing: -0.1px;
}
.home-feature-body {
  line-height: 1.7;
  font-size: 13px;
  color: var(--color-text-mute);
}

/* ── Process 새 구조 (icon + STEP NN + name + body) ──── */
.home-process-step {
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.home-process-step::before { content: none !important; } /* 기존 counter 사용 안함 */
.home-process-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #FBF8F0;
  color: var(--color-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  border: 1px solid var(--color-gold-soft);
}
.home-process-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}
.home-process-num {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.8px;
  color: var(--color-gold);
  margin-bottom: 2px;
  text-transform: uppercase;
}
.home-process-name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 4px;
}
.home-process-body {
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--color-text-mute);
}
/* PC: 5-column 가로 정렬 시 padding 균등 */
@media (min-width: 1000px) {
  .home-process-step {
    padding: 22px 18px 20px;
    text-align: left;
  }
}

/* ── Gallery: phone notch / bullets / mini QR badge ──── */
.home-gallery-copy > p { font-size: 14px; line-height: 1.75; }
.home-gallery-bullets {
  list-style: none;
  padding: 0;
  margin: 14px 0 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.home-gallery-bullets li {
  position: relative;
  padding-left: 22px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text);
}
.home-gallery-bullets li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 7px;
  width: 6px;
  height: 6px;
  background: var(--color-gold);
  transform: rotate(45deg);
}
.home-gallery-mockup {
  position: relative;
}
.home-phone-notch {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 6px;
  background: #1F1F1F;
  border-radius: 3px;
  z-index: 2;
}
.home-mockup-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  font-size: 9.5px;
  padding: 7px 9px;
}
.home-mockup-meta-time {
  font-weight: 600;
  color: var(--color-gold);
  letter-spacing: 0.1px;
  white-space: nowrap;
}
.home-mockup-tile.big {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #E8DDC9, #C9A86A 50%, #B8A8C4);
}
.home-mockup-tile-row { gap: 5px; }
.home-mockup-tile.small {
  flex: 1;
  aspect-ratio: 1;
}
.home-mockup-tile.small:nth-child(1) { background: linear-gradient(135deg, #DCD3E0, #B8A8C4); }
.home-mockup-tile.small:nth-child(2) { background: linear-gradient(135deg, #D6E0DC, #A8C2B5); }
.home-mockup-tile.small:nth-child(3) { background: linear-gradient(135deg, #E5D7CB, #C9A86A); }

.home-gallery-qr-badge {
  position: absolute;
  bottom: -10px;
  right: -10px;
  width: 80px;
  height: 80px;
  background: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(31, 31, 31, 0.16);
  border: 1px solid #ECE7DC;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(6deg);
}

/* ── FAQ 가독성 ──────────────────────────────────────── */
.home-faq-summary {
  padding: 16px 44px 16px 20px;
  line-height: 1.45;
}
.home-faq-body {
  padding: 0 20px 18px;
  line-height: 1.75;
}

/* ── Contact 카드 spacing 미세 조정 ───────────────────── */
.home-contact-grid { gap: 12px; }

/* ── Tier 카드 균형 ──────────────────────────────────── */
.home-tier-card {
  padding: 18px 20px;
}
.home-tier-body { font-size: 12.5px; line-height: 1.65; }

/* ── Reduced motion 추가 가드 (visual polish) ────────── */
@media (prefers-reduced-motion: reduce) {
  .home-hero-visual,
  .home-hero-print,
  .home-hero-qr,
  .home-gallery-qr-badge {
    animation: none !important;
    transition: none !important;
  }
}

/* =========================================================================
 * Picment 홈페이지 — Mobile Compression & Copy Readability
 * Phase: Picment-Website-Mobile-Compression-And-Card-Copy-Fix (2026-06-14)
 *
 * 1) 한국어 줄바꿈: word-break:keep-all, overflow-wrap:break-word,
 *    line-break:strict, text-wrap:pretty (지원 브라우저 한정 자연 폴백).
 * 2) Responsive grid: auto-fit minmax(240px,1fr) → 폭 좁아지면 자연 1열.
 * 3) Mobile: 강점 카드 1~3 큰 표시 / 4~6 compact 가로 카드.
 * 4) Mobile: Process 세로 타임라인 (좌측 골드 레일 + 점) — 큰 카드 5개 stack 회피.
 * ========================================================================= */

/* ── 1) 한국어 줄바꿈 + 가독성 ────────────────────────── */
.home-hero-title,
.home-hero-desc,
.home-section-title,
.home-section-intro,
.home-section-note,
.home-feature-title,
.home-feature-body,
.home-tier-name,
.home-tier-for,
.home-tier-body,
.home-process-name,
.home-process-body,
.home-faq-summary,
.home-faq-body,
.home-gallery-body,
.home-gallery-note,
.home-gallery-hint {
  /* 한국어가 어절 단위로 자연스럽게 줄바꿈되도록.
     break-all 절대 사용 금지 — 글자 단위로 끊김 발생. */
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
  /* text-wrap: pretty 는 지원 브라우저에서만 적용되고, 미지원 브라우저는 무시. */
  text-wrap: pretty;
}

/* ── 2) Features grid — auto-fit + 240px 최소폭 ──────── */
.home-features-grid {
  /* 기존 1열 → 640px 2열 → 900px 3열 고정 규칙을 auto-fit 으로 단일화.
     컨테이너 폭에 따라 카드 최소 240px 이상 유지하면서 자연스럽게 1/2/3열 전환. */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
/* 1040px 이상에서 명시적 3열 상한 (auto-fit 이 4열로 가지 않게 .app--home 폭 안에서 안전망) */
@media (min-width: 1040px) {
  .home-features-grid {
    grid-template-columns: repeat(3, minmax(240px, 1fr));
  }
}

/* ── 3) Features mobile compact (4번째~6번째 카드만 작게) ── */
@media (max-width: 639px) {
  .home-features-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  /* 핵심 3개는 기존 큰 카드 형태 유지 */
  .home-feature-card:nth-child(-n+3) {
    padding: 20px;
  }
  /* 4~6은 compact 가로형 — 아이콘 좌측, 제목+본문 우측 */
  .home-feature-card:nth-child(n+4) {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 14px;
    padding: 12px 14px;
  }
  .home-feature-card:nth-child(n+4) .home-feature-icon {
    margin-bottom: 0;
    width: 32px;
    height: 32px;
    grid-row: 1 / span 2;
    flex-shrink: 0;
  }
  .home-feature-card:nth-child(n+4) .home-feature-icon svg {
    width: 18px;
    height: 18px;
  }
  .home-feature-card:nth-child(n+4) .home-feature-title {
    font-size: 13.5px;
    margin-bottom: 1px;
    line-height: 1.4;
  }
  .home-feature-card:nth-child(n+4) .home-feature-body {
    font-size: 12.5px;
    line-height: 1.55;
  }
  .home-feature-card:nth-child(n+4):hover {
    transform: none; /* compact 에서는 hover lift 제거 — 모바일 무관 */
  }
}

/* ── Feature title / body 가독성 미세 조정 (전 viewport) ─ */
.home-feature-title {
  line-height: 1.35;
  margin-bottom: 6px;
}
.home-feature-body {
  line-height: 1.7;
  font-size: 13.5px;
}

/* ── 4) Process grid 재정렬 (640px / 720px / 1100px breakpoint) ── */
.home-process-list {
  /* 기존 grid 모바일 1열 → 720px 2열 → 1000px 5열. 5열 임계점을 1100px 로 상향. */
}
@media (min-width: 720px) and (max-width: 1099px) {
  .home-process-list {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (min-width: 1100px) {
  .home-process-list {
    grid-template-columns: repeat(5, 1fr) !important;
  }
}

/* ── 5) Process mobile timeline (640px 이하) ─────────── */
@media (max-width: 639px) {
  .home-process-list {
    grid-template-columns: 1fr !important;
    gap: 0;
    padding-left: 28px;
    position: relative;
    margin-top: 16px;
  }
  /* 좌측 골드 페이드 레일 */
  .home-process-list::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 8px;
    bottom: 20px;
    width: 2px;
    background: linear-gradient(180deg, var(--color-gold-soft), var(--color-border) 60%, transparent);
  }
  /* 카드 모드 해제 — 타임라인 항목으로 전환 */
  .home-process-step {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0 0 18px 0;
    position: relative;
  }
  /* 항목 점 (::after 사용 — 기존 ::before content:none !important 와 충돌 회피) */
  .home-process-step::after {
    content: "";
    position: absolute;
    left: -23px;
    top: 4px;
    width: 12px;
    height: 12px;
    background: var(--color-gold);
    border-radius: 50%;
    border: 2px solid var(--color-bg);
  }
  /* 모바일 타임라인에서는 골드 아이콘 배지 숨김 — 점이 시각 역할 */
  .home-process-icon {
    display: none;
  }
  .home-process-num {
    font-size: 10px;
    letter-spacing: 1.4px;
    margin-bottom: 2px;
  }
  .home-process-name {
    font-size: 14px;
    margin-bottom: 4px;
  }
  .home-process-body {
    font-size: 12.5px;
    line-height: 1.6;
  }
}

/* ── 6) Section note (섹션 하단 작은 안내) ───────────── */
.home-section-note {
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--color-text-mute);
  text-align: center;
  margin-top: 16px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 8px;
}
.home-section-note:empty {
  display: none;
}

/* ── 7) Gallery 문구 분리 — body / note / hint ───────── */
.home-gallery-body {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--color-text);
  margin: 0 0 10px;
}
.home-gallery-note {
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--color-text-mute);
  margin: 0 0 14px;
}
.home-gallery-note:empty { display: none; }

/* ── 8) FAQ 모바일 압축 + 한국어 줄바꿈 ─────────────── */
@media (max-width: 639px) {
  .home-faq-list { gap: 6px; }
  .home-faq-summary {
    padding: 13px 38px 13px 16px;
    font-size: 13.5px;
    line-height: 1.45;
  }
  .home-faq-summary::after { right: 14px; font-size: 16px; }
  .home-faq-body {
    padding: 0 16px 14px;
    font-size: 12.5px;
    line-height: 1.7;
  }
}

/* ── 9) Tier card 가독성 ─────────────────────────────── */
.home-tier-for {
  line-height: 1.4;
}
.home-tier-body {
  line-height: 1.7;
}
@media (max-width: 719px) {
  .home-tier-grid {
    gap: 10px;
  }
  .home-tier-card { padding: 16px 18px; }
  .home-tier-name { margin-bottom: 2px; }
  .home-tier-body { font-size: 12.5px; }
}

/* ── 10) Reduced motion 가드 보강 ────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .home-feature-card:nth-child(n+4) {
    transition: none !important;
  }
}

/* =========================================================================
 * Picment 홈페이지 — Section anchor nav (sticky)
 * Phase: Picment-Website-Live-Domain-Route-And-Cache-Fix (2026-06-14)
 *
 * 홈 (`/`) 에서만 표시. Gallery (`/s/{token}`) 라우트에서는 hidden 유지.
 * 한 페이지 내부 anchor 이동만 — 별도 라우트 / 별도 페이지 미생성.
 * ========================================================================= */

/* nav 컨테이너 — 헤더와 main 사이에 sticky 로 떠 있음. */
.home-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 247, 242, 0.92);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--color-border);
  /* .app 의 좌우 padding 을 상쇄해 nav 가 가장자리까지 확장되도록 */
  margin-left: -16px;
  margin-right: -16px;
  margin-bottom: 8px;
}
@media (min-width: 1000px) {
  .home-nav {
    margin-left: -32px;
    margin-right: -32px;
  }
}

.home-nav-list {
  display: flex;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 8px 16px;
  /* 모바일 가로 스크롤 — 항목이 많을 때 자연스럽게 swipe */
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}
.home-nav-list::-webkit-scrollbar {
  height: 4px;
}
.home-nav-list::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 2px;
}

.home-nav-list a {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--color-text-mute);
  text-decoration: none;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.home-nav-list a:hover,
.home-nav-list a:focus-visible {
  color: var(--color-gold);
  border-bottom-color: var(--color-gold);
  outline: none;
}

/* 데스크톱: 중앙 정렬 + 약간 더 여유 */
@media (min-width: 720px) {
  .home-nav-list {
    justify-content: center;
    gap: 28px;
    padding: 10px 24px;
  }
  .home-nav-list a {
    font-size: 13px;
  }
}

/* sticky nav 가 anchor 타겟을 가리지 않게 — 각 home-section 에 scroll-margin-top */
.home-hero[id],
.home-section[id] {
  scroll-margin-top: 56px;
}
@media (min-width: 720px) {
  .home-hero[id],
  .home-section[id] {
    scroll-margin-top: 64px;
  }
}

/* 전역 스무스 스크롤 — reduced-motion 사용자에게는 적용 안 함 */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* =========================================================================
 * Picment Boot Loader — Gallery flash 차단
 * Phase: Picment-Website-Boot-Loader-And-Gallery-Flash-Fix (2026-06-14)
 *
 * 정적 HTML 의 .brand 헤더 ("Picment Gallery" 로고 + tagline) 가 JS 실행 전에
 * 잠시 보이던 flash 해결. body.is-booting 동안 .app 전체를 visibility:hidden 처리하고,
 * 그 위에 .picment-boot 오버레이를 sticky 보여줌. JS 의 첫 showView() 시점에 클래스 제거.
 *
 * 안전 timeout: HTML <script> 안에 3초 제한 — JS 가 hang 해도 사용자가 영원히 갇히지 않음.
 * ========================================================================= */

.picment-boot {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.25s ease;
}

.picment-boot-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px;
}

/* 로고 이미지 — 기본 숨김. JS probeLogo 가 성공 시 .has-logo 클래스 부여하면 노출. */
.picment-boot-logo {
  display: none;
  max-width: 180px;
  max-height: 60px;
  width: auto;
  height: auto;
}
.picment-boot.has-logo .picment-boot-logo {
  display: block;
}
.picment-boot.has-logo .picment-boot-text {
  display: none;
}

/* 텍스트 fallback — 로고 없을 때 (현재 상태) 표시. 차콜 + 골드 톤은 hover 변화 없음. */
.picment-boot-text {
  font-family: var(--font-stack);
  font-size: clamp(22px, 4.5vw, 28px);
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--color-text);
  user-select: none;
}

/* Booting 동안 .app 자체를 숨김 — Gallery 헤더 paint 차단의 핵심.
   Phase: Picment-Website-Boot-Loader-Minimum-Duration-And-Paint-Stabilization-Fix (2026-06-14)
   !important 보강 — 어떤 외부 스타일 / .app--home / 다른 미디어쿼리도 boot 표시 동안 .app 노출 못 함. */
body.is-booting .app {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
body:not(.is-booting) .app {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.2s ease;
}
body:not(.is-booting) .picment-boot {
  opacity: 0;
  pointer-events: none;
}
.picment-boot[hidden] {
  display: none !important;
}

/* Reduced motion: fade 제거, 즉시 전환 */
@media (prefers-reduced-motion: reduce) {
  .picment-boot,
  body:not(.is-booting) .picment-boot,
  body:not(.is-booting) .app {
    transition: none !important;
  }
}

/* =========================================================================
 * Staging 배지 — Phase: Picment-Gallery-Staging-Environment-Setup-And-Debug-QR-Alignment (2026-06-14)
 *
 * staging.picment.kr 에서만 노출. JS applyStagingBadge() 가 hidden 토글.
 * picment.kr / www.picment.kr 에서는 hidden 유지 — 손님 노출 0.
 * boot loader 보다 위 (z-index 10000) — 부팅 화면 위에서도 보임.
 * ========================================================================= */
.picment-staging-badge {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 10000;
  background: #B45309;
  color: #FFFFFF;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  padding: 5px 11px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(180, 83, 9, 0.28);
  text-transform: uppercase;
  font-family: var(--font-stack);
  pointer-events: none;
  user-select: none;
}
.picment-staging-badge[hidden] {
  display: none !important;
}

/* ═════════════════════════════════════════════════════════════════════════
   Picment-Gallery-Master-Guestbook-MultiMessage-Fix-And-Prompt-Modal-UI (2026-06-14)
   Master 행사 방명록 모달 + 다운로드 직전 재유도 + 수동 작성 CTA 토스트.
   비-Master / guestbook_enabled=false 행사에서는 JS 가 hidden 유지 → 본 CSS 도 0 영향.
   ═════════════════════════════════════════════════════════════════════════ */

/* 수동 작성 CTA (success view 안) */
.guestbook-cta {
  display: block;
  width: 100%;
  margin: 18px 0 14px;
  padding: 13px 18px;
  border: 1.5px solid rgba(201, 166, 107, 0.55);
  border-radius: 10px;
  background: #FFFBF5;
  color: #5C4A2C;
  font-family: var(--font-stack);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.guestbook-cta:hover { background: #FFF6E5; border-color: #C9A66B; color: #3F3018; }
.guestbook-cta:active { transform: translateY(1px); }
.guestbook-cta[hidden] { display: none; }

/* 모달 공통 */
.gb-modal,
.gb-reminder {
  position: fixed;
  inset: 0;
  z-index: 10500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  font-family: var(--font-stack);
  animation: gb-fade-in 0.18s ease-out;
}
.gb-modal[hidden],
.gb-reminder[hidden] { display: none; }

@keyframes gb-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.gb-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(28, 22, 14, 0.55);
  backdrop-filter: blur(2px);
}

.gb-modal-card,
.gb-reminder-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  /* 📜 Phase Picment-Admin-General-Master-Guestbook-Toggle-And-Gallery-Smoke-Audit (2026-06-14)
     iOS Safari 100vh 는 주소창 / 키보드 노출 시 부정확 → dvh 우선 + vh 폴백.
     safe-area-inset-bottom: 노치 / home indicator 영역 위로 패딩 확보. */
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  background: #FFFFFF;
  border-radius: 14px;
  padding: 22px 22px 18px;
  padding-bottom: max(18px, env(safe-area-inset-bottom));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
  box-sizing: border-box;
}

.gb-modal-title,
.gb-reminder-title {
  font-size: 19px;
  font-weight: 700;
  color: #2F2417;
  margin: 0 0 8px;
  letter-spacing: 0.1px;
}

/* 📜 Phase Picment-Gallery-Guestbook-Modal-SkipText-And-PrimaryButton-UX-Fix (2026-06-14)
   📜 Phase Picment-Gallery-Mobile-Realmeasure-And-QA-Hotfix (2026-06-14)
   "건너뛰기" — 옛 "나중에 하기" 하단 secondary 버튼을 우상단 텍스트 링크로 대체.
   본 Phase microfix — font-size 13→10px / opacity 0.48→0.34 / weight 500→400 / min-44px 터치 영역 유지.
   시각 무게는 더 약하게 (메인 primary 강조), 접근성 터치 영역은 44px 표준 유지. */
.gb-skip-link {
  position: absolute;
  top: 6px;
  right: 6px;
  appearance: none;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(40, 36, 30, 0.34);
  font-family: var(--font-stack);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.2px;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.gb-skip-link:hover  { color: rgba(40, 36, 30, 0.62); background: rgba(0, 0, 0, 0.03); }
.gb-skip-link:active { color: rgba(40, 36, 30, 0.85); }
.gb-skip-link:focus-visible { outline: 2px solid #C9A66B; outline-offset: 2px; }

/* 제목이 우상단 건너뛰기 위에 덮이지 않도록 우측 패딩 확보 — 10px 텍스트 + 44px 터치박스 = ~52px 안전선. */
.gb-modal .gb-modal-title { padding-right: 54px; }
.gb-modal-subtitle,
.gb-reminder-body {
  font-size: 13.5px;
  color: #6B5A40;
  margin: 0 0 18px;
  line-height: 1.55;
}

.gb-form { display: flex; flex-direction: column; gap: 14px; }

.gb-field { display: flex; flex-direction: column; gap: 6px; position: relative; }
.gb-field-label {
  font-size: 12.5px;
  font-weight: 600;
  color: #5C4A2C;
  letter-spacing: 0.2px;
}
.gb-field-label--sub {
  font-size: 11.5px;
  color: #7A6849;
  font-weight: 500;
}
.gb-field-optional {
  font-style: normal;
  color: #9A8868;
  font-weight: 500;
  margin-left: 4px;
  font-size: 11.5px;
}
.gb-field-required {
  color: #B45309;
  font-style: normal;
  margin-left: 2px;
}

.gb-input,
.gb-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 13px;
  border: 1.2px solid #E8DCC2;
  border-radius: 9px;
  background: #FFFEFA;
  font-size: 14px;
  color: #2F2417;
  font-family: var(--font-stack);
  line-height: 1.5;
  transition: border-color 0.15s, background 0.15s;
}
.gb-input:focus,
.gb-textarea:focus {
  outline: none;
  border-color: #C9A66B;
  background: #FFFFFF;
}
.gb-textarea { resize: vertical; min-height: 92px; }

.gb-counter {
  position: absolute;
  right: 8px;
  bottom: 8px;
  font-size: 11px;
  color: #A89373;
  pointer-events: none;
  background: rgba(255,255,255,0.85);
  padding: 1px 5px;
  border-radius: 4px;
}

/* 관계 칩 */
.gb-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.gb-chip {
  appearance: none;
  border: 1.2px solid #E8DCC2;
  background: #FFFEFA;
  color: #6B5A40;
  padding: 7px 13px;
  border-radius: 999px;
  font-size: 13px;
  font-family: var(--font-stack);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.gb-chip:hover { background: #FFF6E5; }
.gb-chip[aria-pressed="true"] {
  background: #C9A66B;
  border-color: #B5904D;
  color: #FFFFFF;
  font-weight: 600;
}
.gb-relation-custom { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.gb-relation-custom[hidden] { display: none; }

.gb-error {
  background: #FDECEC;
  color: #98322F;
  font-size: 12.5px;
  padding: 8px 11px;
  border-radius: 7px;
  border: 1px solid #F1C8C5;
}

.gb-actions,
.gb-reminder-actions {
  display: flex;
  gap: 10px;
  margin-top: 6px;
  flex-wrap: wrap;
}

/* 📜 Phase Picment-Gallery-Guestbook-Modal-SkipText-And-PrimaryButton-UX-Fix (2026-06-14)
   single primary 모드 — 컴포즈 모달 하단에 "메시지 남기기" 한 개만 길게 표시.
   다운로드 전 재유도 모달 (.gb-reminder-actions) 는 기존 2버튼 유지. */
.gb-actions--single .gb-btn-primary {
  flex: 1 1 100%;
  min-width: 0;
  width: 100%;
  padding: 14px 16px;
  font-size: 15px;
}

.gb-btn-primary,
.gb-btn-secondary {
  flex: 1 1 calc(50% - 5px);
  min-width: 120px;
  border: none;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14.5px;
  font-weight: 600;
  font-family: var(--font-stack);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.05s;
}
.gb-btn-primary {
  background: #C9A66B;
  color: #FFFFFF;
  box-shadow: 0 2px 6px rgba(181, 144, 77, 0.32);
}
.gb-btn-primary:hover { background: #B5904D; }
.gb-btn-primary:active { transform: translateY(1px); }
.gb-btn-primary:disabled { background: #D6C5A0; cursor: wait; }

.gb-btn-secondary {
  background: transparent;
  color: #6B5A40;
  border: 1.2px solid #E8DCC2;
}
.gb-btn-secondary:hover { background: #FAF3E3; color: #4B3E26; }
.gb-btn-secondary:active { transform: translateY(1px); }

/* 다운로드 전 리마인더 시트 — 모바일에서 bottom sheet 느낌 */
.gb-reminder-card { max-width: 380px; }

/* 토스트 */
.gb-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 10600;
  background: #2F2417;
  color: #FFF6E5;
  font-family: var(--font-stack);
  font-size: 13.5px;
  font-weight: 500;
  padding: 11px 18px;
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.32);
  animation: gb-toast-pop 0.28s ease-out;
}
.gb-toast[hidden] { display: none; }

@keyframes gb-toast-pop {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* 작은 화면 안전 — 키보드 올라온 상태에서도 버튼 접근성 */
@media (max-width: 380px) {
  .gb-modal-card,
  .gb-reminder-card {
    padding: 18px 16px 14px;
    border-radius: 12px;
  }
  .gb-modal-title,
  .gb-reminder-title { font-size: 17px; }
  .gb-btn-primary,
  .gb-btn-secondary { font-size: 14px; padding: 11px 12px; }
}

/* ═════════════════════════════════════════════════════════════════════════
   Picment-Admin-LicenseRefresh-And-Host-Album-Guestbook-List-MVP (2026-06-14)
   /host/{hostToken} 페이지 — 관계자 / 신랑신부 / 운영자.
   ═════════════════════════════════════════════════════════════════════════ */

.host-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.host-title {
  font-size: 22px;
  font-weight: 700;
  color: #2F2417;
  margin: 0;
  flex: 1 1 auto;
}
.host-tier-badge {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #1F2937;
  color: #F0E5C7;
  text-transform: uppercase;
}
.host-tier-badge.tier-master {
  background: #3D2D1B;
  color: #F4D58D;
  border: 1px solid #D4A857;
}
.host-tier-badge.tier-pro {
  background: #172554;
  color: #AFC2FF;
  border: 1px solid #4B67D8;
}
.host-tier-badge.tier-standard {
  background: #102A2A;
  color: #7DD3C7;
  border: 1px solid #2A9D8F;
}
.host-tier-badge.tier-basic {
  background: #1F2937;
  color: #CBD5E1;
  border: 1px solid #4B5563;
}

.host-subtitle {
  font-size: 12.5px;
  color: #7A6849;
  margin: 0 0 16px;
}

.host-tabs {
  display: flex;
  gap: 6px;
  margin: 0 0 14px;
  border-bottom: 1px solid #E8DCC2;
}
.host-tab {
  appearance: none;
  border: none;
  background: transparent;
  padding: 10px 14px;
  font-family: var(--font-stack);
  font-size: 13.5px;
  font-weight: 600;
  color: #7A6849;
  cursor: pointer;
  position: relative;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.host-tab:hover { color: #4B3E26; }
.host-tab[aria-selected="true"] {
  color: #2F2417;
  border-bottom-color: #C9A66B;
}
.host-tab[hidden] { display: none; }

.host-body {}
.host-body[hidden] { display: none; }

.host-empty {
  text-align: center;
  padding: 24px 14px;
  color: #7A6849;
  font-size: 13.5px;
  line-height: 1.55;
}
.host-empty--inline {
  padding: 12px 10px;
  text-align: left;
  font-size: 12.5px;
}

.host-session-card {
  background: #FFFBF5;
  border: 1px solid #E8DCC2;
  border-radius: 12px;
  padding: 14px 14px 12px;
  margin: 0 0 14px;
}
.host-session-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.host-session-ts {
  flex: 1 1 auto;
  font-size: 12.5px;
  font-weight: 600;
  color: #5C4A2C;
}
.host-session-tier {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  background: #FAF3E3;
  color: #7A6849;
  border: 1px solid #E8DCC2;
}
.host-file-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}

/* 축하 메시지 카드 */
.host-msg-card {
  background: #FFFFFF;
  border: 1px solid #E8DCC2;
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0 0 10px;
  transition: border-color 0.15s, background 0.15s;
}
.host-msg-card.status-pending  { border-color: #E8DCC2; }
.host-msg-card.status-approved { border-color: #C9A66B; background: #FFFBF0; }
.host-msg-card.status-hidden   { opacity: 0.65; background: #FAF7F0; }
.host-msg-card.status-deleted  { display: none; }

.host-msg-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.host-msg-who {
  font-weight: 700;
  font-size: 14px;
  color: #2F2417;
}
.host-msg-relation {
  font-size: 11px;
  color: #7A6849;
  padding: 2px 7px;
  background: #FAF3E3;
  border-radius: 999px;
}
.host-msg-status {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: #F0E5C7;
  color: #5C4A2C;
}
.host-msg-card.status-approved .host-msg-status { background: #C9A66B; color: #FFFFFF; }
.host-msg-card.status-hidden   .host-msg-status { background: #9AA0A6; color: #FFFFFF; }

.host-msg-body {
  font-size: 14px;
  color: #2F2417;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0 0 8px;
}
.host-msg-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.host-msg-ts {
  font-size: 11px;
  color: #9A8868;
  flex: 1 1 auto;
}
.host-msg-actions {
  display: flex;
  gap: 5px;
}
.host-msg-btn {
  appearance: none;
  border: 1px solid #E8DCC2;
  background: #FFFEFA;
  color: #5C4A2C;
  font-family: var(--font-stack);
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.host-msg-btn:hover { background: #FFF6E5; }
.host-msg-btn.active,
.host-msg-btn:disabled {
  background: #FAF3E3;
  color: #C9A66B;
  border-color: #C9A66B;
  cursor: default;
}

@media (max-width: 480px) {
  .host-title { font-size: 19px; }
  .host-msg-head { gap: 6px; }
  .host-msg-btn { padding: 5px 8px; font-size: 11px; }
  .host-file-grid { grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); }
}

/* ═════════════════════════════════════════════════════════════════════════
   Picment-Gallery-Motion-Video-Preview-Modal-And-Promo-Linebreak-Fix (2026-06-14)
   영상 / GIF 미리보기 모달 — compactTile 클릭 진입.
   ═════════════════════════════════════════════════════════════════════════ */

.vp-modal {
  position: fixed;
  inset: 0;
  z-index: 10500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  font-family: var(--font-stack);
  animation: vp-fade-in 0.18s ease-out;
}
.vp-modal[hidden] { display: none; }
@keyframes vp-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.vp-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 16, 10, 0.74);
  backdrop-filter: blur(3px);
}

.vp-modal-card {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  background: #FFFFFF;
  border-radius: 14px;
  padding: 14px 18px 16px;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.36);
  box-sizing: border-box;
}

.vp-modal-close {
  position: absolute;
  top: 8px;
  right: 8px;
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(40, 36, 30, 0.5);
  font-size: 18px;
  font-weight: 400;
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
  border-radius: 8px;
  transition: color 0.15s, background 0.15s;
}
.vp-modal-close:hover  { color: rgba(40, 36, 30, 0.85); background: rgba(0, 0, 0, 0.05); }
.vp-modal-close:active { color: #2F2417; }
.vp-modal-close:focus-visible { outline: 2px solid #C9A66B; outline-offset: 2px; }

.vp-modal-title {
  font-size: 15px;
  font-weight: 600;
  color: #2F2417;
  margin: 0 0 10px;
  padding-right: 44px;
  letter-spacing: 0.1px;
}

.vp-modal-body {
  background: #0D1117;
  border-radius: 10px;
  overflow: hidden;
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  max-height: 60vh;
  max-height: 60dvh;
}
.vp-modal-body video,
.vp-modal-body img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 60vh;
  max-height: 60dvh;
  object-fit: contain;
  background: #0D1117;
}

.vp-modal-actions {
  display: flex;
  justify-content: center;
}

.vp-btn-primary {
  width: 100%;
  border: none;
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font-stack);
  background: #C9A66B;
  color: #FFFFFF;
  box-shadow: 0 2px 6px rgba(181, 144, 77, 0.32);
  cursor: pointer;
  transition: background 0.15s, transform 0.05s;
}
.vp-btn-primary:hover  { background: #B5904D; }
.vp-btn-primary:active { transform: translateY(1px); }
.vp-btn-primary:disabled {
  background: #D6C5A0;
  cursor: wait;
}

/* 작은 폰 — 패딩/폰트 약간 축소 */
@media (max-width: 380px) {
  .vp-modal-card { padding: 12px 14px 14px; border-radius: 12px; }
  .vp-modal-title { font-size: 14px; }
  .vp-btn-primary { font-size: 14px; padding: 12px 14px; }
}