/* ==========================================================================
   Personal Vision House — Design System v2
   ========================================================================== */

/* ---------- 0. 자체 호스팅 폰트 (외부 CDN 의존성 제거) ---------- */
@font-face {
  font-family: 'Pretendard Variable';
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
  src: url('assets/fonts/PretendardVariable.woff2') format('woff2-variations');
}

@font-face {
  font-family: 'Sora Brand';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('assets/fonts/Sora-Bold.woff2') format('woff2');
}

/* ---------- 1. 디자인 토큰 ---------- */
:root {
  color-scheme: light;
  --font-brand: 'Sora Brand', 'Pretendard Variable', sans-serif;
  /* Color Palette */
  --c-navy-950: #0a0f1e;
  --c-navy-900: #0f172a;
  --c-navy-800: #1e293b;
  --c-navy-700: #334155;
  --c-navy-600: #475569;
  --c-navy-500: #64748b;
  --c-navy-400: #94a3b8;
  --c-navy-300: #cbd5e1;
  --c-navy-200: #e2e8f0;
  --c-navy-100: #f1f5f9;
  --c-navy-50:  #f8fafc;

  /* Blue-led palette (indigo tokens now map to blue-600 family) */
  --c-indigo-700: #1d4ed8;
  --c-indigo-600: #2563eb;
  --c-indigo-500: #3b82f6;
  --c-indigo-400: #60a5fa;
  --c-indigo-300: #93c5fd;
  --c-indigo-200: #bfdbfe;
  --c-indigo-100: #dbeafe;
  --c-indigo-50:  #eff6ff;

  /* Violet kept only for accents (lighter usage) */
  --c-violet-700: #4338ca;
  --c-violet-600: #4f46e5;
  --c-violet-500: #6366f1;
  --c-violet-100: #e0e7ff;
  --c-violet-50:  #eef2ff;

  --c-sky-600: #0284c7;
  --c-sky-500: #0ea5e9;
  --c-sky-400: #38bdf8;
  --c-sky-100: #e0f2fe;
  --c-sky-50:  #f0f9ff;

  --c-teal-700: #0f766e;
  --c-teal-600: #0d9488;
  --c-teal-500: #14b8a6;
  --c-teal-100: #ccfbf1;
  --c-teal-50:  #f0fdfa;

  --c-red-600: #dc2626;
  --c-red-100: #fee2e2;
  --c-red-50:  #fef2f2;

  --c-green-600: #16a34a;
  --c-green-100: #dcfce7;

  /* Warm accent — small signals only (eyebrow dot, completion mark, AI prompt highlight).
     Never used as a large background fill, so the brand stays calm/consulting-credible. */
  --c-amber-400: #fbbf24;
  --c-amber-500: #f59e0b;

  /* Semantic Colors */
  --color-bg:         #f8fafc;
  --color-surface:    #ffffff;
  --color-border:     #e2e8f0;
  --color-border-focus: #3b82f6;
  --color-text:       #0f172a;
  --color-text-2:     #475569;
  --color-text-3:     #94a3b8;
  --color-primary:    #2563eb;
  --color-primary-hover: #1d4ed8;

  /* Typography */
  --font-base: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size-xs:   11px;
  --font-size-sm:   13px;
  --font-size-base: 15px;
  --font-size-md:   16px;
  --font-size-lg:   18px;
  --font-size-xl:   22px;
  --font-size-2xl:  28px;
  --font-size-3xl:  36px;

  /* Spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* Radius */
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  20px;
  --r-full: 9999px;

  /* Shadow */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.06);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.06);

  /* Transitions */
  --t-fast:   120ms ease;
  --t-base:   200ms ease;
  --t-slow:   320ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --header-h: 60px;
  --sidebar-w: 300px;
}

/* ---------- 2. 리셋 & 베이스 ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root,
body {
  word-break: keep-all;
  overflow-wrap: break-word;
}

html {
  font-size: var(--font-size-base);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

/* ---------- 3. 접근성 ---------- */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--sp-4);
  background: var(--c-indigo-600);
  color: #fff;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-sm);
  font-size: var(--font-size-sm);
  font-weight: 600;
  z-index: 10000;
  text-decoration: none;
  transition: top var(--t-fast);
}
.skip-link:focus { top: var(--sp-2); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 4. 헤더 ---------- */
/* 서재 임베드(#vhrec + vhview=done): 결과만 남기고 이 앱의 조작 표면을 걷는다.
   교차 오리진 iframe에는 부모(my.visionhouse.app)가 CSS를 넣을 수 없으므로
   이 앱이 스스로 감춘다. 훅은 script.js enterDoneViewMode()가 붙인다. */
html.vh-done-view .app-header,
html.vh-done-view .skip-link,
html.vh-done-view .hub-link,
/* 저장·전송 안내는 임베드에서 사실이 아니다 - 열람자는 아무것도 저장하지 않는다 */
html.vh-done-view .app-footer-privacy,
/* 랜딩 소개(1334px)가 결과 위에 그대로 깔려 있었다 - 임베드는 결과부터 시작한다 */
html.vh-done-view #phase-0 { display: none !important; }
html.vh-done-view .main-content { padding-top: 0; }

/* 형태(높이·여백·록업 괘선·진행률 바)는 vh-header-kit 정본이 소유한다 — 파일 맨 아래 블록.
   좁은 화면 재배치(아래 600px/360px 그리드)는 이 서비스 몫이고, 그때의 행 높이는
   --header-h 를 --vh-hdr-h 로 물려 킷과 같은 값을 보게 한다. */
.app-header {
  background: var(--c-navy-900);

  --vh-hdr-h: var(--header-h);
  --vh-hdr-edge: rgba(255, 255, 255, 0.06);
  --vh-hdr-rule: rgba(255, 255, 255, 0.22);
  --vh-hdr-family-ink: rgba(255, 255, 255, 0.68);
  /* 언어 토글 활성 pill이 '크롬에서 오려낸' 글자색으로 쓴다(킷 v1.1.0) */
  --vh-hdr-chrome: var(--c-navy-900);
  --vh-hdr-track-bed: rgba(255, 255, 255, 0.06);
  --vh-hdr-track-fill: linear-gradient(90deg, var(--c-indigo-500), var(--c-sky-400));
}

.header-lockup {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-shrink: 0;
}
.header-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: #fff;
  flex-shrink: 0;
}
/* v1.6.1: 옛 파란 박스 제거. v1.6.2: 가는 흰 후광 추가. v1.7.0: 마크 source가 SVG→PNG 교체.
   v1.7.1: 후광 강도 ↑ (Marcus 요청). 2겹으로 — 내층(작은 blur)이 외곽 선명도, 외층(큰 blur)이 halo bloom. */
.brand-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  filter:
    drop-shadow(0 0 3px rgba(255,255,255,0.32))
    drop-shadow(0 2px 12px rgba(255,255,255,0.38));
}
.brand-icon img,
.brand-icon svg { display: block; }
.brand-name {
  font-size: var(--font-size-sm);
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
/* 패밀리 워드마크는 vh-header-kit 정본이 소유한다. */
.brand-pre { color: inherit; margin-right: 3px; }

/* 스텝 네비게이션 */
.step-nav {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
  justify-content: center;
  overflow: hidden;
}

.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.step-dot {
  width: 28px;
  height: 28px;
  border-radius: var(--r-full);
  background: rgba(255,255,255,0.08);
  border: 1.5px solid rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}

.step-num {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.4);
  line-height: 1;
}

.step-label {
  font-size: 10px;
  font-weight: 500;
  color: rgba(255,255,255,0.3);
  white-space: nowrap;
  transition: color var(--t-base);
}

.step-connector {
  flex: 1;
  height: 1.5px;
  background: rgba(255,255,255,0.1);
  min-width: 12px;
  max-width: 40px;
  margin-bottom: 14px;
  transition: background var(--t-base);
}

/* 완료된 스텝 */
.step-item.is-completed .step-dot {
  background: var(--c-indigo-600);
  border-color: var(--c-indigo-400);
}
.step-item.is-completed .step-dot svg { stroke: #fff; }
.step-item.is-completed .step-num { color: #fff; }
.step-item.is-completed .step-label { color: var(--c-indigo-400); }

/* 활성 스텝 */
.step-item.is-active .step-dot {
  background: var(--c-indigo-500);
  border-color: var(--c-indigo-300);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.3);
}
.step-item.is-active .step-num { color: #fff; }
.step-item.is-active .step-label { color: #fff; font-weight: 600; }

/* 완료된 커넥터 */
.step-connector.is-done { background: var(--c-indigo-600); }

/* 거쳐온 단계: 헤더에서 클릭/키보드로 점프 가능 */
.step-item.is-nav { cursor: pointer; }
.step-item.is-nav:hover .step-dot { box-shadow: 0 0 0 4px rgba(255,255,255,0.12); }
.step-item.is-nav:hover .step-label { color: rgba(255,255,255,0.85); }
.step-item.is-nav:focus-visible {
  outline: 2px solid var(--c-indigo-300);
  outline-offset: 3px;
  border-radius: 10px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-shrink: 0;
}

.save-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--font-size-xs);
  color: rgba(255,255,255,0.35);
  padding: 4px var(--sp-3);
  border-radius: var(--r-full);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  transition: color var(--t-base), background var(--t-base);
  white-space: nowrap;
}
.save-badge.is-saving {
  color: var(--c-indigo-400);
  background: rgba(59,130,246,0.1);
  border-color: rgba(59,130,246,0.2);
}
.save-badge.is-saved {
  color: #4ade80;
  background: rgba(74,222,128,0.08);
  border-color: rgba(74,222,128,0.15);
}

.btn-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.btn-icon:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border-color: rgba(255,255,255,0.2);
}

/* 언어 토글 (한국어 기본 / EN) */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: var(--r-full);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  flex-shrink: 0;
}
.lang-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,0.72);
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 1;
  padding: 5px 10px;
  border-radius: var(--r-full);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast);
}
.lang-btn:hover { color: #fff; }
.lang-btn.is-active,
.lang-btn[aria-pressed="true"] {
  background: var(--c-indigo-600);
  color: #fff;
}
.lang-btn:focus-visible {
  outline: 2px solid var(--c-indigo-300);
  outline-offset: 1px;
}
@media (max-width: 480px) {
  .lang-btn { padding: 5px 8px; }
}

@media (max-width: 600px) {
  :root { --header-h: 96px; }

  /* 이 폭부터 헤더 행은 grid다 — 도구의 auto 마진을 끄지 않으면 justify-self: end 가
     무시되고 트랙보다 넓을 때 오른쪽으로 넘쳐 문서가 가로로 밀린다(390px 실측). */
  .app-header { --vh-hdr-tools-push: 0; }

  .app-header .header-inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "brand actions"
      "steps steps";
    align-content: center;
    column-gap: var(--sp-3);
    row-gap: var(--sp-2);
    height: auto;
    min-height: var(--header-h);
    padding: var(--sp-2) var(--sp-4);
  }

  .header-lockup {
    grid-area: brand;
    min-width: 0;
  }

  .app-header .header-actions {
    grid-area: actions;
    justify-self: end;
    min-width: 0;
    gap: var(--sp-1);
  }

  .save-badge {
    width: 36px;
    height: 36px;
    justify-content: center;
    padding: 0;
  }

  .save-badge .save-text { display: none; }

  .step-nav {
    grid-area: steps;
    width: 100%;
    min-width: 0;
    overflow: visible;
  }

  .step-item { gap: 0; }

  .step-connector {
    flex: 1 1 18px;
    min-width: 0;
    max-width: none;
    margin-bottom: 0;
  }
}

@media (max-width: 360px) {
  :root { --header-h: 148px; }
  .app-header .header-inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "brand"
      "actions"
      "steps";
  }
  .app-header .header-actions { width: 100%; justify-content: flex-end; }
}

@media (max-width: 240px) {
  .app-header .header-inner { padding-inline: var(--sp-2); }
  .app-header .header-actions { gap: var(--sp-1); }
  .lang-btn { min-width: 44px; padding-inline: 0; }
  .lang-btn[data-lang="ko"] { font-size: 0; }
  .lang-btn[data-lang="ko"]::after { content: 'KO'; font-size: var(--font-size-xs); }
}
/* 진행률 바(.progress-track/.progress-fill)는 vh-header-kit 정본이 소유한다.
   채움 색은 --vh-hdr-track-fill 토큰으로 위에서 주입한다. */

/* ---------- 5. 앱 바디 레이아웃 ---------- */
.app-body {
  display: flex;
  min-height: calc(100dvh - var(--header-h) - 3px);
  justify-content: flex-start; /* 사이드바를 화면 맨 왼쪽에 고정 */
}

/* 사이드바는 좌측 끝에, 메인 콘텐츠는 남은 공간에서 중앙 배치 */
.app-body-inner {
  display: flex;
  width: 100%;
  max-width: none;
}

/* ---------- 6. 집 사이드바 ---------- */
.house-sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--c-navy-900);
  border-right: 1px solid rgba(255,255,255,0.06);
  padding: var(--sp-6);
  position: sticky;
  top: calc(var(--header-h) + 3px);
  height: calc(100dvh - var(--header-h) - 3px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* 비전하우스 접기/펴기 토글: 데스크톱·모바일 공통 동작 */
.house-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 44px;
  margin-bottom: var(--sp-3);
  padding: var(--sp-2);
  background: none;
  border: none;
  cursor: pointer;
  color: #fff;
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: 0.01em;
}
.house-toggle-title { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.house-toggle-title svg { color: var(--c-indigo-400); flex-shrink: 0; }
.house-toggle-chevron { color: rgba(255,255,255,0.55); flex-shrink: 0; transition: transform var(--t-base); }
.house-sidebar:not(.is-collapsed) .house-toggle-chevron { transform: rotate(180deg); }
.house-sidebar.is-collapsed .house-card { display: none; }
.house-sidebar.is-collapsed .house-toggle { margin-bottom: 0; }

.house-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--r-xl);
  padding: var(--sp-5);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.house-svg-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.house-svg-wrap svg {
  width: 100%;
  max-width: 240px;
  height: auto;
  overflow: visible;
}

/* SVG 텍스트 스타일 */
.svg-cell-text {
  font-family: var(--font-base);
  font-size: 8.5px;
  font-weight: 700;
  fill: #fff;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}
.svg-guide-text {
  font-family: var(--font-base);
  font-size: 11px;
  font-weight: 500;
  fill: #94a3b8;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}
.svg-pillar-text {
  font-family: var(--font-base);
  font-size: 9px;
  font-weight: 700;
  fill: #fff;
  text-anchor: middle;
  dominant-baseline: middle;
  /* writing-mode 제거: 가로 텍스트 유지 */
  pointer-events: none;
}
.svg-beam-text {
  font-family: var(--font-base);
  font-size: 9px;
  font-weight: 600;
  fill: rgba(255,255,255,0.9);
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}
.svg-roof-text {
  font-family: var(--font-base);
  font-size: 9px;
  font-weight: 700;
  fill: #fff;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}

/* 집 레전드 */
.house-legend {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(255,255,255,0.07);
}
.legend-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--font-size-xs);
  color: rgba(255,255,255,0.35);
  transition: color var(--t-base);
}
.legend-item.is-active { color: rgba(255,255,255,0.75); }
.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
  opacity: 0.35;
  transition: opacity var(--t-base);
}
.legend-item.is-active .legend-dot { opacity: 1; }
.legend-dot--teal   { background: var(--c-teal-500); }
.legend-dot--sky    { background: var(--c-sky-500); }
.legend-dot--violet { background: var(--c-violet-500); }
.legend-dot--indigo { background: var(--c-indigo-500); }

/* ---------- 7. 메인 콘텐츠 ---------- */
.main-content {
  flex: 1;
  min-width: 0;
  padding: var(--sp-8) var(--sp-10) var(--sp-12);
  max-width: 820px;
  margin: 0 auto; /* 남은 공간에서 입력 콘텐츠 중앙 정렬 */
}

/* ---------- 8. 페이즈 (단계) ---------- */
.phase {
  display: none;
  animation: fadeSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
}
/* 가시성은 hidden 속성으로 결정 (showPhase가 동기적으로 설정) — rAF 지연 시 빈 화면 방지 */
.phase:not([hidden]) { display: block; }
.phase.is-active { display: block; }

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 페이즈 헤더 */
.phase-hero {
  text-align: center;
  padding: var(--sp-8) 0 var(--sp-6);
}

/* v1.6.0 — 근본으로 회귀. v1.3-1.5에 추가했던 .hero-stage 다층 히어로(메쉬·오브·다크·cream editorial·serif)
   전부 제거. 단순한 .phase-hero 구조 + Toss-style 그라데이션 마크만 남김. */
.phase-hero-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin: 0 auto var(--sp-4);
}
.phase-hero-icon img,
.phase-hero-icon svg { display: block; }

.phase-tag {
  display: inline-flex;
  align-items: center;
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--r-full);
  margin-bottom: var(--sp-3);
}
.phase-tag--teal   { background: var(--c-teal-100);   color: var(--c-teal-700); }
.phase-tag--sky    { background: var(--c-sky-100);    color: var(--c-sky-600); }
.phase-tag--violet { background: var(--c-violet-100); color: var(--c-violet-700); }
.phase-tag--indigo { background: var(--c-indigo-100); color: var(--c-indigo-600); }

.phase-header {
  margin-bottom: var(--sp-6);
}

.phase-title {
  font-size: var(--font-size-2xl);
  font-weight: 800;
  color: var(--color-text);
  line-height: 1.25;
  letter-spacing: -0.03em;
  margin-bottom: var(--sp-2);
}
.phase-title--complete {
  font-size: var(--font-size-3xl);
  background: linear-gradient(135deg, var(--c-indigo-600), var(--c-violet-600));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

#phase-0 .phase-title {
  position: relative;
  display: block;
  width: 100%;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--sp-3);
  color: var(--c-navy-900);
  font-size: 36px;
  font-weight: 880;
  line-height: 1.16;
  letter-spacing: 0;
  text-wrap: balance;
  background: linear-gradient(96deg, var(--c-navy-900) 0%, var(--c-navy-900) 58%, var(--c-indigo-700) 78%, var(--c-teal-700) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

#phase-0 .phase-title::after {
  content: "";
  display: block;
  width: min(180px, 56%);
  height: 4px;
  margin: 9px auto 0;
  border-radius: var(--r-full);
  background: linear-gradient(90deg, rgba(37, 99, 235, 0), rgba(37, 99, 235, 0.58) 38%, rgba(20, 184, 166, 0.68) 72%, rgba(20, 184, 166, 0));
}

.phase-desc {
  font-size: var(--font-size-md);
  color: var(--color-text-2);
  line-height: 1.65;
}

/* 코칭 카드 */
.coaching-card {
  background: linear-gradient(135deg, var(--c-indigo-50), var(--c-violet-50));
  border: 1px solid var(--c-indigo-100);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--font-size-sm);
  color: var(--c-navy-700);
  line-height: 1.7;
  margin-top: var(--sp-3);
}
.coaching-card p + p { margin-top: var(--sp-2); }
.coaching-card-hint {
  color: var(--c-navy-600);
  font-size: var(--font-size-xs);
  margin-top: var(--sp-2);
}

/* ---------- 9. 폼 요소 ---------- */
.form-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--sp-6);
}

.input-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

/* 팀 코드 등 한 줄을 전부 차지해야 하는 입력 그룹 (input-row 그리드 전체 열 span) */
.input-group--full { grid-column: 1 / -1; }

.input-label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--c-navy-700);
}

.input-field {
  width: 100%;
  padding: 10px var(--sp-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--r-md);
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  color: var(--color-text);
  background: var(--color-surface);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  outline: none;
  -webkit-appearance: none;
  resize: vertical;
}
.input-field::placeholder { color: var(--c-navy-400); }
.input-field:hover { border-color: var(--c-navy-300); }
.input-field:focus {
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
  background: #fff;
}
.input-field--highlight {
  border-color: var(--c-indigo-200, #c7d2fe);
  background: var(--c-indigo-50);
}
.input-field--highlight:focus {
  border-color: var(--c-indigo-500);
  background: #fff;
}

textarea.input-field { min-height: 80px; }
/* 비전 입력: 줄바꿈되는 textarea. 넉넉한 기본 높이로 길게 쓰도록 유도하고, JS가 내용에 맞춰 키운다. */
textarea.vision-desc-input { min-height: 60px; line-height: 1.55; resize: none; overflow: hidden; }

.required-mark { color: var(--c-red-600); margin-left: 2px; }
.optional-mark { color: var(--c-navy-400); font-size: var(--font-size-xs); font-weight: 400; }

/* ---------- 10. 선택 상태 표시 ---------- */
.selection-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.selection-count {
  font-size: var(--font-size-sm);
  color: var(--color-text-2);
}
.selection-count strong { color: var(--c-indigo-600); }
.selection-hint {
  font-size: var(--font-size-xs);
  color: var(--c-navy-400);
}

/* ---------- 11. 가치 카드 그리드 ---------- */
.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

.value-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: var(--sp-3) var(--sp-2);
  min-height: 72px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--r-lg);
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color var(--t-base), background var(--t-base), box-shadow var(--t-base), transform var(--t-fast);
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}
.value-card:hover {
  border-color: var(--c-indigo-300, #a5b4fc);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.value-card:active { transform: translateY(0) scale(0.98); }

.value-card.is-selected {
  border-color: var(--c-teal-500);
  background: var(--c-teal-50);
  box-shadow: 0 0 0 3px rgba(20,184,166,0.12);
}
.value-card.is-selected::after {
  content: '';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  background: var(--c-teal-500);
}

.card-num {
  font-size: 10px;
  font-weight: 700;
  color: var(--c-navy-400);
  line-height: 1;
}
.value-card.is-selected .card-num { color: var(--c-teal-600); }

.card-name {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
}
.value-card.is-selected .card-name { color: var(--c-teal-700); }

.card-en {
  font-size: 10px;
  color: var(--c-navy-400);
  font-weight: 400;
}

.card-img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  margin-bottom: 2px;
  pointer-events: none;
}

/* ---------- 12. Top5 탈락 그리드 ---------- */
.top5-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

.top5-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: var(--sp-4) var(--sp-3);
  min-height: 80px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--r-lg);
  background: var(--color-surface);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--t-base), background var(--t-base), opacity var(--t-base), transform var(--t-fast);
  -webkit-tap-highlight-color: transparent;
}
.top5-card:hover {
  border-color: var(--c-red-600);
  background: var(--c-red-50);
  transform: translateY(-1px);
}
.top5-card:active { transform: scale(0.97); }

.top5-card.is-eliminated {
  opacity: 0.35;
  cursor: pointer;
  text-decoration: line-through;
  background: var(--c-navy-100);
  border-color: var(--c-navy-200);
}
.top5-card.is-eliminated:hover {
  opacity: 0.7;
  border-color: var(--c-indigo-300);
  background: var(--c-indigo-50);
}

.top5-card .card-name { font-size: var(--font-size-base); font-weight: 700; }
.top5-card .card-en   { font-size: var(--font-size-xs); color: var(--c-navy-400); }

/* ---------- 13. 우선순위 리스트 ---------- */
.rank-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
}

.rank-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--r-lg);
  cursor: grab;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  user-select: none;
}
.rank-item:hover { border-color: var(--c-navy-300); box-shadow: var(--shadow-sm); }
.rank-item.is-dragging {
  opacity: 0.5;
  cursor: grabbing;
  box-shadow: var(--shadow-lg);
  border-color: var(--c-indigo-400);
}

.drag-handle {
  font-size: 18px;
  color: var(--c-navy-300);
  cursor: grab;
  flex-shrink: 0;
  line-height: 1;
}

.rank-num {
  width: 28px;
  height: 28px;
  border-radius: var(--r-full);
  background: var(--c-indigo-50);
  color: var(--c-indigo-600);
  font-size: var(--font-size-sm);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rank-name {
  flex: 1;
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-text);
}

.rank-controls {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.rank-move {
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  border: 1px solid var(--color-border);
  background: var(--c-navy-50);
  color: var(--c-navy-600);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.rank-move:hover:not(:disabled) {
  background: var(--c-indigo-50);
  border-color: var(--c-indigo-300, #a5b4fc);
  color: var(--c-indigo-600);
}
.rank-move:disabled { opacity: 0.3; cursor: default; }

/* ---------- 14. 정의 목록 ---------- */
.definition-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}

.definition-item {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  transition: border-color var(--t-fast);
}
.definition-item:focus-within { border-color: var(--c-indigo-400); }

.definition-item label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.def-rank {
  width: 24px;
  height: 24px;
  border-radius: var(--r-full);
  background: var(--c-teal-100);
  color: var(--c-teal-700);
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.def-name {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--color-text);
}

/* 가치 정의 보기(안) 선택 칩 */
.def-options-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-3);
  margin-bottom: var(--sp-2);
}
.def-options {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.def-option {
  width: 100%;
  text-align: left;
  padding: 10px var(--sp-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--r-md);
  background: var(--color-surface);
  color: var(--color-text-2);
  font-family: var(--font-base);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.def-option:hover { border-color: var(--c-teal-500); background: var(--c-teal-50); }
.def-option.is-active {
  border-color: var(--c-teal-500);
  background: var(--c-teal-50);
  color: var(--color-text);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--c-teal-500);
}

.definition-item textarea {
  width: 100%;
  min-height: 72px;
  padding: 10px var(--sp-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--r-md);
  font-family: var(--font-base);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  background: var(--c-navy-50);
  resize: vertical;
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  line-height: 1.6;
}
.definition-item textarea::placeholder { color: var(--c-navy-400); }
.definition-item textarea:focus {
  border-color: var(--c-teal-500);
  box-shadow: 0 0 0 3px rgba(20,184,166,0.1);
  background: #fff;
}

/* ---------- 15. 섹션 블록 ---------- */
.section-block {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-xl);
  padding: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-4);
  box-shadow: var(--shadow-xs);
}

.section-block-header {
  margin-bottom: var(--sp-4);
}

.section-block-title {
  font-size: var(--font-size-md);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--sp-1);
}

.section-block-desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-2);
  line-height: 1.6;
}

/* ---------- 16. 강점 팔레트 ---------- */
#strength-counter {
  display: inline-flex;
  align-items: center;
  margin-left: var(--sp-2);
  padding: 3px 8px;
  border: 1px solid var(--c-sky-100);
  border-radius: var(--r-full);
  background: var(--c-sky-50);
  color: var(--c-sky-600);
  font-size: var(--font-size-xs);
  white-space: nowrap;
}

.strength-wheel-shell {
  --wheel-deep: #132832;
  --wheel-mid: #24414c;
  --wheel-surface: #2f4e59;
  --wheel-accent: #8ca6af;
  --wheel-accent-soft: #c2d1d6;
  --wheel-ink: #f4f8f9;
  width: min(100%, 720px);
  margin: 0 auto;
}

.strength-wheel-orbit-area {
  position: relative;
  width: 100%;
}

.strength-wheel-stage {
  position: relative;
  width: min(100%, 520px);
  aspect-ratio: 1;
  margin: 0 auto;
  overflow: hidden;
  container-type: inline-size;
  isolation: isolate;
  border: 1px solid rgba(194, 209, 214, 0.24);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 44%, rgba(140, 166, 175, 0.13), transparent 43%),
    linear-gradient(145deg, var(--wheel-deep) 0%, var(--wheel-mid) 56%, #172f3a 100%);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
}

.strength-wheel-stage::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.26;
  background-image:
    linear-gradient(rgba(244, 248, 249, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 248, 249, 0.04) 1px, transparent 1px);
  background-size: 24px 24px;
  content: '';
  -webkit-mask-image: radial-gradient(circle, #000 24%, transparent 74%);
  mask-image: radial-gradient(circle, #000 24%, transparent 74%);
}

.strength-wheel-stage::after {
  position: absolute;
  inset: 22.1%;
  z-index: -1;
  border: 1px solid rgba(194, 209, 214, 0.19);
  border-radius: 50%;
  background: transparent;
  content: '';
}

.strength-wheel-halo {
  position: absolute;
  inset: 8.2%;
  border: 1px solid rgba(194, 209, 214, 0.2);
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(140, 166, 175, 0.09), inset 0 0 16px rgba(140, 166, 175, 0.07);
  animation: strengthHaloBreath 4.8s ease-in-out infinite;
}

.strength-wheel-ring {
  position: absolute;
  inset: 8.8%;
  border-radius: 50%;
  background: conic-gradient(from 20deg, #76939e 0deg, #9aafb6 92deg, #698792 178deg, #b3c3c8 268deg, #76939e 360deg);
  filter: drop-shadow(0 0 6px rgba(140, 166, 175, 0.18));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
}

.strength-wheel-ring::before {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0.34;
  background: conic-gradient(from 0deg, transparent 0 35%, rgba(244, 248, 249, 0.68) 42%, transparent 49% 100%);
  content: '';
  animation: strengthPrismSweep 12s linear infinite;
}

.strength-wheel-center {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: flex;
  width: 38%;
  aspect-ratio: 1;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  padding: 18px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(194, 209, 214, 0.3);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 34%, rgba(61, 88, 99, 0.96), rgba(18, 40, 50, 0.98) 76%);
  box-shadow: inset 0 0 18px rgba(194, 209, 214, 0.08);
  color: var(--wheel-ink);
  text-align: center;
}

.strength-wheel-center-title {
  color: var(--wheel-accent-soft);
  font-size: clamp(10px, 2.2cqi, 12px);
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.strength-wheel-center-detail {
  display: grid;
  width: 100%;
  min-width: 0;
  gap: 4px;
  place-items: center;
}

.strength-wheel-center-name {
  color: #fff;
  font-size: clamp(12px, 2.8cqi, 15px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.22;
  text-wrap: balance;
}

.strength-wheel-center-desc,
.strength-wheel-center-signal {
  color: #dce6e9;
  font-size: clamp(9px, 2.05cqi, 11px);
  line-height: 1.35;
  text-wrap: balance;
}

.strength-wheel-center-signal-label {
  margin-top: 2px;
  color: var(--wheel-accent-soft);
  font-size: clamp(8px, 1.75cqi, 9px);
  font-weight: 800;
  line-height: 1.2;
}

.strength-wheel-center-detail:not(.has-content) .strength-wheel-center-desc,
.strength-wheel-center-detail:not(.has-content) .strength-wheel-center-signal-label,
.strength-wheel-center-detail:not(.has-content) .strength-wheel-center-signal {
  display: none;
}

.strength-wheel-markers,
.strength-wheel-choices {
  position: absolute;
  inset: 0;
}

.strength-wheel-marker {
  position: absolute;
  width: 8px;
  height: 8px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(244, 248, 249, 0.62);
  border-radius: 50%;
  background: var(--wheel-surface);
  box-shadow: 0 0 0 3px rgba(244, 248, 249, 0.05);
  transition: width var(--t-fast), height var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}

.strength-wheel-marker.is-selected {
  width: 19px;
  height: 19px;
  border-color: #fff;
  background: #fff;
  box-shadow: 0 0 0 5px rgba(194, 209, 214, 0.16), 0 0 12px rgba(194, 209, 214, 0.42);
}

.strength-wheel-marker.is-selected::after {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--c-sky-600);
  content: attr(data-selection);
  font-size: 9px;
  font-weight: 900;
}

.strength-wheel-choices {
  top: 0;
  left: 50%;
  width: min(100%, 520px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  pointer-events: none;
  container-type: inline-size;
}

.strength-wheel-node {
  position: absolute;
  display: flex;
  width: clamp(78px, 18cqi, 94px);
  height: 46px;
  align-items: center;
  justify-content: center;
  padding: 4px 7px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(194, 209, 214, 0.28);
  border-radius: var(--r-full);
  outline: 0;
  background: rgba(20, 45, 56, 0.91);
  color: var(--wheel-ink);
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}

.strength-wheel-node[data-orbit="inner"] {
  width: clamp(76px, 16.8cqi, 88px);
}

.strength-wheel-node-light {
  position: absolute;
  left: 7px;
  display: grid;
  place-items: center;
  width: 8px;
  height: 8px;
  border: 1px solid rgba(244, 248, 249, 0.72);
  border-radius: 50%;
  background: var(--wheel-accent);
  box-shadow: 0 0 0 3px rgba(194, 209, 214, 0.07);
  transition: width var(--t-fast), height var(--t-fast), transform var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}

.strength-wheel-node-number {
  color: var(--wheel-deep);
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
}

.strength-wheel-node.is-selected .strength-wheel-node-light {
  width: 18px;
  height: 18px;
  border-color: #f7fafb;
  background: #e6eef0;
  box-shadow: 0 0 0 4px rgba(194, 209, 214, 0.14);
}

.strength-wheel-node.is-selected {
  border-color: var(--wheel-accent-soft);
  background: rgba(64, 94, 104, 0.98);
  color: #fff;
}

.strength-wheel-node-copy {
  position: static;
  width: 100%;
  min-width: 0;
  padding: 0 2px 0 13px;
  transform: none;
  opacity: 1;
  color: inherit;
  text-align: center;
  white-space: normal;
  pointer-events: none;
}

.strength-wheel-node-name {
  display: block;
  font-size: clamp(9px, 2.05cqi, 10.5px);
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.08;
  text-wrap: balance;
}

.strength-wheel-node-desc,
.strength-wheel-node-signal-label,
.strength-wheel-node-signal {
  display: none;
}

.strength-wheel-node:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(194, 209, 214, 0.28);
}

.strength-wheel-node:active .strength-wheel-node-light {
  transform: scale(0.88);
}

.strength-wheel-mobile-hint {
  display: none;
}

.strength-wheel-selected {
  width: min(100%, 640px);
  margin: var(--sp-4) auto 0;
}

.strength-wheel-selected-title {
  display: block;
  margin-bottom: var(--sp-2);
  color: var(--c-navy-700);
  font-size: var(--font-size-sm);
  font-weight: 800;
}

.strength-wheel-slots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-2);
}

.strength-wheel-slot {
  display: flex;
  min-width: 0;
  min-height: 44px;
  align-items: center;
  gap: var(--sp-2);
  padding: 8px 10px;
  border: 1px dashed var(--c-navy-200);
  border-radius: var(--r-md);
  background: var(--c-navy-50);
  color: var(--c-navy-400);
  font-family: var(--font-base);
  font-size: var(--font-size-xs);
  text-align: left;
}

.strength-wheel-slot.is-filled {
  border-style: solid;
  border-color: var(--c-sky-300);
  background: var(--c-sky-50);
  color: var(--c-sky-700);
  cursor: pointer;
}

.strength-wheel-slot-index {
  display: grid;
  flex: 0 0 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--c-sky-600);
  font-weight: 900;
}

.strength-wheel-slot-name {
  min-width: 0;
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.strength-wheel-slot:focus-visible {
  outline: 3px solid var(--c-sky-400);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .strength-wheel-node:hover {
    border-color: rgba(226, 236, 239, 0.68);
    background: rgba(48, 79, 90, 0.96);
  }

  .strength-wheel-slot.is-filled:hover {
    border-color: var(--c-sky-500);
    box-shadow: 0 4px 14px rgba(14, 165, 233, 0.12);
  }
}

@keyframes strengthHaloBreath {
  50% { transform: scale(1.018); opacity: 0.74; }
}

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

@media (max-width: 719px) {
  #strength-counter {
    margin-top: var(--sp-2);
    margin-left: 0;
  }

  .strength-wheel-stage {
    width: min(76vw, 280px);
  }

  .strength-wheel-center {
    padding: 8px;
  }

  .strength-wheel-center-detail {
    display: none;
  }

  .strength-wheel-center-title {
    font-size: 12px;
  }

  .strength-wheel-choices {
    position: relative;
    inset: auto;
    display: flex;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    gap: 12px;
    margin-top: -18px;
    padding: 28px 4px 12px;
    transform: none;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-padding-inline: 4px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    pointer-events: auto;
  }

  .strength-wheel-choices::-webkit-scrollbar {
    display: none;
  }

  .strength-wheel-node {
    position: relative;
    inset: auto !important;
    display: block;
    flex: 0 0 min(78vw, 260px);
    width: auto;
    height: auto;
    min-height: 154px;
    padding: 18px 50px 18px 18px;
    transform: none;
    border: 1px solid rgba(194, 209, 214, 0.28);
    border-radius: var(--r-lg);
    background:
      radial-gradient(circle at 88% 16%, rgba(140, 166, 175, 0.12), transparent 30%),
      linear-gradient(145deg, #203b47 0%, #132832 100%);
    box-shadow: 0 4px 8px rgba(15, 23, 42, 0.14);
    color: #fff;
    scroll-snap-align: center;
    text-align: left;
  }

  .strength-wheel-node[data-orbit="inner"] {
    width: auto;
  }

  .strength-wheel-node:first-child {
    margin-left: 2px;
  }

  .strength-wheel-node:last-child {
    margin-right: 2px;
  }

  .strength-wheel-node.is-selected {
    border-color: var(--wheel-accent-soft);
    background: linear-gradient(145deg, #31515d 0%, #1a343f 100%);
    box-shadow: 0 0 0 3px rgba(194, 209, 214, 0.14);
  }

  .strength-wheel-node-light {
    position: absolute;
    top: 16px;
    left: auto;
    right: 16px;
    width: 18px;
    height: 18px;
  }

  .strength-wheel-node.is-selected .strength-wheel-node-light {
    width: 26px;
    height: 26px;
  }

  .strength-wheel-node-copy {
    position: static;
    display: block;
    width: auto;
    max-width: none;
    padding: 0;
    transform: none;
    border: 0;
    border-radius: 0;
    opacity: 1;
    background: transparent;
    box-shadow: none;
    text-align: left;
    transition: none;
  }

  .strength-wheel-node:focus-visible .strength-wheel-node-copy {
    transform: none;
  }

  .strength-wheel-node-name {
    display: block;
    padding-right: var(--sp-2);
    font-size: 18px;
    line-height: 1.35;
  }

  .strength-wheel-node-desc {
    display: block;
    margin-top: 7px;
    color: #dce6e9;
    font-size: 13px;
    line-height: 1.45;
  }

  .strength-wheel-node-signal-label {
    display: block;
    margin-top: 12px;
    color: var(--wheel-accent-soft);
    font-size: 11px;
    font-weight: 800;
  }

  .strength-wheel-node-signal {
    display: block;
    margin-top: 3px;
    color: #f5fbff;
    font-size: 13px;
    line-height: 1.45;
  }

  .strength-wheel-mobile-hint {
    display: block;
    margin: 2px 0 0;
    color: var(--c-navy-500);
    font-size: var(--font-size-xs);
    text-align: center;
  }

  .strength-wheel-selected {
    margin-top: var(--sp-4);
  }

  .strength-wheel-slots {
    grid-template-columns: 1fr;
  }

  .strength-wheel-slot {
    font-size: var(--font-size-sm);
  }
}

/* v1.19.0 — 24개 생성형 아이콘을 한 장의 정돈된 팔레트 보드로 보여준다.
   휠의 카테고리 연상·겹침을 제거하고, 설명은 별도 패널에서 공간 효율적으로 읽는다. */
.section-block--strength-palette {
  position: relative;
  left: 50%;
  width: min(1080px, calc(100vw - var(--sidebar-w) - 72px));
  max-width: none;
  padding: 0;
  overflow: hidden;
  transform: translateX(-50%);
  border-radius: 22px;
  box-shadow: 0 20px 52px rgba(15, 23, 42, 0.12);
}

.section-block--strength-palette > .section-block-header {
  margin: 0;
  padding: 22px 24px 18px;
  background: var(--color-surface);
}

#strength-palette {
  position: static;
  left: auto;
  width: 100%;
  max-width: none;
  transform: none;
  container-type: inline-size;
  container-name: strength-palette;
}

.strength-palette-frame {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--color-surface);
  box-shadow: none;
}

.strength-palette-board {
  min-width: 0;
  padding: 22px;
  display: grid;
  align-content: center;
  color: var(--c-navy-50);
  background: var(--c-navy-900);
}

.strength-palette-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: visible;
  border-top: 1px solid rgba(226, 232, 240, 0.16);
  border-left: 1px solid rgba(226, 232, 240, 0.16);
}

.strength-palette-tile {
  position: relative;
  min-width: 0;
  min-height: 112px;
  padding: 13px 8px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-right: 1px solid rgba(226, 232, 240, 0.16);
  border-bottom: 1px solid rgba(226, 232, 240, 0.16);
  border-radius: 0;
  color: var(--c-navy-50);
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--t-fast), box-shadow var(--t-fast), color var(--t-fast);
}

.strength-palette-tile:active {
  background: rgba(255, 255, 255, 0.1);
}

.strength-palette-tile:focus-visible {
  z-index: 2;
  outline: 3px solid #fff;
  outline-offset: -3px;
}

.strength-palette-tile.is-selected {
  color: #fff;
  background: rgba(197, 167, 125, 0.13);
  box-shadow: inset 0 0 0 2px #c5a77d;
}

.strength-palette-icon-mat {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.96);
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.035);
}

.strength-palette-icon {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.strength-palette-name {
  min-width: 0;
  max-width: 100%;
  color: inherit;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 720;
  letter-spacing: -0.018em;
  text-align: center;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.strength-palette-order {
  position: absolute;
  top: 7px;
  right: 7px;
  z-index: 1;
  min-width: 25px;
  min-height: 25px;
  padding: 0 6px;
  display: none;
  place-items: center;
  border: 2px solid var(--c-navy-900);
  border-radius: var(--r-full);
  color: var(--c-navy-900);
  background: #c5a77d;
  font-size: 12px;
  line-height: 1;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

.strength-palette-tile.is-selected .strength-palette-order { display: grid; }

.strength-palette-detail {
  min-width: 0;
  padding: 26px 24px 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.72fr);
  gap: 28px;
  color: var(--color-text);
  background: #f8fafc;
  border-top: 1px solid var(--color-border);
}

.strength-palette-detail-main,
.strength-palette-selected { min-width: 0; }

.strength-palette-detail-visual {
  width: 124px;
  height: 124px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #d9e2eb;
  border-radius: 26px;
  background: #eef3f7;
}

.strength-palette-detail-icon {
  display: block;
  width: 104px;
  height: 104px;
  object-fit: contain;
}

.strength-palette-detail-kicker,
.strength-palette-detail-signal-label,
.strength-palette-selected-title {
  display: block;
  color: var(--c-navy-600);
  font-size: var(--font-size-xs);
  line-height: 1.45;
  font-weight: 760;
  letter-spacing: 0.045em;
}

.strength-palette-detail-kicker { margin-top: 16px; }

.strength-palette-detail-name {
  display: block;
  margin-top: 5px;
  color: var(--c-navy-900);
  font-size: clamp(22px, 3.4cqi, 30px);
  line-height: 1.22;
  font-weight: 850;
  letter-spacing: -0.035em;
  word-break: keep-all;
}

.strength-palette-detail-desc,
.strength-palette-detail-signal {
  margin: 8px 0 0;
  color: var(--c-navy-700);
  font-size: 14px;
  line-height: 1.65;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.strength-palette-detail-signal-label {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

.strength-palette-selected {
  align-self: end;
  padding-top: 2px;
}

.strength-palette-selected-slots {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.strength-palette-selected-slot {
  width: 100%;
  min-height: 46px;
  padding: 9px 11px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  border: 1px solid #cbd7e2;
  border-radius: 12px;
  color: var(--c-navy-800);
  background: #fff;
  box-shadow: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}

.strength-palette-selected-slot:disabled {
  color: var(--c-navy-600);
  background: transparent;
  border-style: dashed;
  cursor: default;
  opacity: 1;
}

.strength-palette-selected-slot.is-filled {
  border-color: #9fb1c1;
  background: #fff;
}

.strength-palette-selected-slot:focus-visible {
  outline: 3px solid var(--color-border-focus);
  outline-offset: 2px;
}

.strength-palette-selected-index {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: var(--r-full);
  color: var(--c-navy-900);
  background: #dce6ee;
  font-size: 12px;
  line-height: 1;
  font-weight: 820;
  font-variant-numeric: tabular-nums;
}

.strength-palette-selected-slot.is-filled .strength-palette-selected-index {
  background: #c5a77d;
}

.strength-palette-selected-name {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  .strength-palette-tile:hover { background: rgba(255, 255, 255, 0.075); }
  .strength-palette-tile.is-selected:hover { background: rgba(197, 167, 125, 0.18); }
  .strength-palette-selected-slot.is-filled:hover { border-color: var(--c-navy-500); background: #f1f5f9; }
}

@container strength-palette (min-width: 560px) {
  .strength-palette-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .strength-palette-tile { min-height: 120px; }
}

@container strength-palette (min-width: 920px) {
  .strength-palette-frame { grid-template-columns: minmax(0, 1fr) minmax(286px, 300px); }
  .strength-palette-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .strength-palette-tile { min-height: 124px; }
  .strength-palette-detail {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 28px;
    border-top: 0;
    border-left: 1px solid var(--color-border);
  }
}

@container strength-palette (max-width: 559px) {
  .strength-palette-board { padding: 18px 14px; }
  .strength-palette-icon-mat { width: 64px; height: 64px; border-radius: 15px; }
  .strength-palette-icon { width: 54px; height: 54px; }
  .strength-palette-detail { grid-template-columns: 1fr; gap: 24px; padding: 22px 18px; }
  .strength-palette-detail-visual { width: 108px; height: 108px; border-radius: 22px; }
  .strength-palette-detail-icon { width: 90px; height: 90px; }
  .strength-palette-detail-name { font-size: 24px; }
}

@media (max-width: 768px) {
  .section-block--strength-palette {
    left: auto;
    width: 100%;
    transform: none;
  }
}

/* ---------- 17. 강점 입력 아이템 ---------- */
.strength-inputs {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.strength-item {
  border: 1.5px solid var(--color-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--t-fast);
}
.strength-item:focus-within { border-color: var(--c-sky-400); }

.strength-item-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--sp-2);
  flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-navy-50);
  border-bottom: 1px solid var(--color-border);
}

.strength-num {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--c-sky-600);
}

.strength-desc {
  margin-left: auto;
  font-size: var(--font-size-xs);
  color: var(--c-sky-600);
  background: var(--c-sky-50);
  border: 1px solid var(--c-sky-100);
  border-radius: var(--r-sm);
  padding: 3px 8px;
  line-height: 1.4;
}

/* 강점 입력 행: 매칭된 강점의 도메인 배지 (스카이블루, 값과 구별) */
.strength-domain {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--c-sky-700);
  background: var(--c-sky-100);
  border-radius: var(--r-full);
  padding: 2px 10px 2px 4px;
}
.strength-domain-img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.strength-item-body {
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* ---------- 18. 사명 프레임워크 ---------- */
.mission-framework {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.mission-frame-item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--sp-3);
  align-items: center;
}

.mission-frame-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mission-frame-key {
  font-size: var(--font-size-sm);
  font-weight: 800;
  color: var(--c-violet-600);
  letter-spacing: 0.04em;
}

.mission-frame-desc {
  font-size: 11px;
  color: var(--c-navy-400);
  line-height: 1.4;
}

.mission-suggestion-box {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-violet-50);
  border: 1px solid var(--c-violet-100);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-4);
}

.suggestion-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--c-violet-600);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  padding-top: 2px;
}

.suggestion-text {
  font-size: var(--font-size-sm);
  color: var(--c-navy-700);
  line-height: 1.6;
}

/* AI 어시스트 */
/* 탐색 질문 블록 */
.mission-q-block {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}

.mission-q-label {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}

.mission-q-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  border-radius: var(--r-full);
  background: var(--c-indigo-100);
  color: var(--c-indigo-700);
  font-size: var(--font-size-xs);
  font-weight: 800;
  flex-shrink: 0;
  margin-top: 2px;
}

.mission-q-title {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--c-navy-800);
  margin-bottom: 2px;
}

.mission-q-hint {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--c-navy-400);
  line-height: 1.5;
}

/* AI 프롬프트 섹션 */
.ai-prompt-section {
  margin-top: var(--sp-5);
  border: 1.5px solid var(--c-indigo-200);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.ai-prompt-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-indigo-50);
  flex-wrap: wrap;
}

.ai-prompt-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--c-indigo-700);
  margin: 0 0 4px;
}
.ai-prompt-title::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-amber-400);
  flex-shrink: 0;
}

.ai-prompt-desc {
  font-size: var(--font-size-xs);
  color: var(--c-navy-500);
  line-height: 1.6;
  margin: 0;
  max-width: 480px;
}

.ai-prompt-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--c-indigo-100);
  background: var(--c-white);
}

.ai-prompt-preview-label {
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--c-navy-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ai-prompt-preview {
  margin: 0;
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-navy-50);
  font-family: 'Pretendard Variable', 'Pretendard', -apple-system, sans-serif;
  font-size: var(--font-size-xs);
  color: var(--c-navy-700);
  line-height: 1.8;
  white-space: pre-wrap;
  word-break: break-word;
  border-top: 1px solid var(--c-navy-100);
  max-height: 360px;
  overflow-y: auto;
}

/* ---------- 19. 비전 행 ---------- */
.vision-rows {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

.vision-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-3);
  align-items: flex-start;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  transition: border-color var(--t-fast);
}
.vision-row:focus-within { border-color: var(--c-indigo-400); }

.vision-row-num {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.vision-num-badge {
  width: 26px;
  height: 26px;
  border-radius: var(--r-full);
  background: var(--c-indigo-50);
  color: var(--c-indigo-600);
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.vision-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 120px;
}

.vision-timeline-label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--c-navy-600);
}

.vision-timeline-select,
.vision-custom-input {
  padding: 8px var(--sp-3);
  border: 1.5px solid var(--color-border);
  border-radius: var(--r-md);
  font-family: var(--font-base);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  background: var(--c-navy-50);
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  -webkit-appearance: none;
}
.vision-timeline-select:focus,
.vision-custom-input:focus {
  border-color: var(--c-indigo-400);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.1);
  background: #fff;
}

/* ---------- 20. 완성 요약 카드 ---------- */
.phase-header--complete {
  text-align: center;
  padding: var(--sp-6) 0;
}

.complete-badge {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, var(--c-indigo-600), var(--c-sky-500));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--sp-4);
  box-shadow: 0 8px 24px rgba(37,99,235,0.35);
}
/* 완성 배지 --mono 변형 (v1.5.0): Toss-style 그라데이션 마크를 그대로 보여줌,
   배경 그라데이션·코너 dot 제거. 마크 자체의 컬러가 단일 포인트. */
.complete-badge--mono {
  width: auto;
  height: auto;
  padding: var(--sp-3);
  background: none;
  box-shadow: none;
  filter:
    drop-shadow(0 16px 36px rgba(59,130,246,0.22))
    drop-shadow(0 4px 10px rgba(67,56,202,0.12));
}
.complete-badge--mono img,
.complete-badge--mono svg { display: block; }
.complete-badge--mono::after { display: none; }   /* amber dot 제거 — 마크 자체가 컬러 포인트 */
/* 완성 배지 우상단 작은 따뜻 액센트 — 차가운 블루 시스템에 한 점 온기 */
.complete-badge::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--c-amber-400);
  box-shadow: 0 0 0 3px #fff, 0 2px 6px rgba(245,158,11,0.45);
  animation: completePop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes completePop {
  from { transform: scale(0.5); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* ---------- 최종 완성 축하 (개인 버전: 폭죽 연발) ---------- */
.fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 9999; overflow: hidden; }
.fx-burst { position: absolute; width: 0; height: 0; }
.fx-spark {
  position: absolute;
  left: 0; top: 0;
  width: 7px; height: 7px; margin: -3.5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 7px currentColor;
  opacity: 0;
  will-change: transform, opacity;
  animation-name: fxSpark;
  animation-timing-function: cubic-bezier(.12,.6,.28,1);
  animation-fill-mode: forwards;
}
@keyframes fxSpark {
  0%   { transform: translate(0,0) scale(1); opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translate(var(--dx), calc(var(--dy) + 48px)) scale(0.2); opacity: 0; }
}
.fx-flash {
  position: absolute;
  left: -9px; top: -9px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 24px 6px currentColor;
  animation: fxFlash 0.5s ease-out forwards;
}
@keyframes fxFlash {
  0%   { transform: scale(0.3); opacity: 0.95; }
  100% { transform: scale(4.5); opacity: 0; }
}
.phase-header--complete.is-celebrate { animation: heroRise 0.8s cubic-bezier(.2,.9,.3,1) both; }
@keyframes heroRise {
  0%   { transform: translateY(14px) scale(0.97); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
.phase-header--complete.is-celebrate .complete-badge { animation: badgeTwinkle 1s ease-in-out both; }
@keyframes badgeTwinkle {
  0%   { transform: scale(0.6); opacity: 0; }
  45%  { transform: scale(1.12); opacity: 1; }
  70%  { transform: scale(0.98); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .fx-layer { display: none; }
  .phase-header--complete.is-celebrate,
  .phase-header--complete.is-celebrate .complete-badge { animation: none; }
}

.summary-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-xl);
  overflow: hidden;
  margin-bottom: var(--sp-6);
  box-shadow: var(--shadow-md);
}

/* 비전하우스 요약 내부 */
.vh {
  display: flex;
  flex-direction: column;
}

.vh-tier {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--color-border);
}
.vh-tier:last-child { border-bottom: none; }

.vh-tier-header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.vh-tier-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--r-full);
}
.vh-tier-badge--teal   { background: var(--c-teal-100);   color: var(--c-teal-700); }
.vh-tier-badge--sky    { background: var(--c-sky-100);    color: var(--c-sky-600); }
.vh-tier-badge--violet { background: var(--c-violet-100); color: var(--c-violet-700); }
.vh-tier-badge--indigo { background: var(--c-indigo-100); color: var(--c-indigo-600); }

.vh-tier-title {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--c-navy-400);
}

.vh-tier-mission p {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--c-indigo-600);
  line-height: 1.6;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.vh-vision-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.vh-vision-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  line-height: 1.6;
}

.vh-v-num {
  width: 22px;
  height: 22px;
  border-radius: var(--r-full);
  background: var(--c-violet-100);
  color: var(--c-violet-600);
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.vh-v-desc {
  flex: 1;
  font-weight: 500;
  word-break: keep-all;
  overflow-wrap: break-word;
  /* 말줄임 없이 전체 표시 */
}

.vh-when {
  font-size: 11px;
  color: var(--c-violet-600);
  background: var(--c-violet-50);
  border: 1px solid var(--c-violet-100);
  border-radius: var(--r-full);
  padding: 1px 8px;
  white-space: nowrap;
  flex-shrink: 0;
}

.vh-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
}

.vh-pillar {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  background: var(--c-sky-50);
  border: 1px solid var(--c-sky-100);
  border-radius: var(--r-md);
  padding: var(--sp-3);
}
.vh-pillar-img {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  object-fit: contain;
}
.vh-pillar-text {
  min-width: 0;
}
.vh-pillar b {
  display: block;
  font-size: var(--font-size-md);
  font-weight: 700;
  color: var(--c-sky-700, #0369a1);
  margin-bottom: 4px;
}
.vh-pillar-ev {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--c-navy-600);
  line-height: 1.5;
}
.vh-pillar--empty {
  background: var(--c-navy-50);
  border-color: var(--color-border);
  min-height: 48px;
}

.vh-values {
  display: grid;
  /* 핵심가치는 항상 Top 5 → 3칸 고정으로 첫 줄 3개, 둘째 줄 2개(3+2) */
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
}

.vh-value {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  background: var(--c-teal-50);
  border: 1px solid var(--c-teal-100);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
}
.vh-value-img {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  object-fit: contain;
}
.vh-value-text {
  min-width: 0;
}
.vh-value b {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--c-teal-700);
  margin-bottom: 2px;
}
.vh-value-def {
  display: block;
  font-size: 11px;
  color: var(--c-navy-600);
  line-height: 1.5;
}

.vh-empty {
  color: var(--c-navy-400);
  font-size: var(--font-size-sm);
  font-style: italic;
}

.summary-note {
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--font-size-sm);
  color: var(--c-navy-600);
  background: var(--c-navy-50);
  border-top: 1px solid var(--color-border);
}

/* ---------- 21. 내보내기 액션 ---------- */
.export-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: flex-end; /* 버튼은 아래 정렬, 위 말풍선은 위로 솟게 */
  justify-content: center; /* 줄바꿈 시 마지막 버튼이 왼쪽에 혼자 쏠리지 않게 가운데 정렬 */
  margin-top: var(--sp-4);
  margin-bottom: var(--sp-8);
}

/* 완료 페이지: 버튼 위에 뜨는 '움직이는 말풍선' 안내 (정상 흐름 배치라 어느 화면에서도 겹치지 않음) */
.btn-hint {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}
.speech-bubble {
  position: relative;
  max-width: 230px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--c-indigo-50);
  border: 1px solid var(--c-indigo-100);
  color: var(--color-text-2);
  font-size: var(--font-size-xs);
  font-weight: 500;
  line-height: 1.55;
  text-align: center;
  box-shadow: var(--shadow-xs);
  animation: bubbleFloat 2.8s ease-in-out infinite;
}
.speech-bubble b { font-weight: 700; color: var(--c-indigo-700); }
/* 아래로 향하는 꼬리: 테두리 삼각형(::before) 위에 면 삼각형(::after)을 겹쳐 외곽선 유지 */
.speech-bubble::before,
.speech-bubble::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 0;
  height: 0;
  border-style: solid;
  transform: translateX(-50%);
}
.speech-bubble::before {
  top: 100%;
  border-width: 8px 8px 0 8px;
  border-color: var(--c-indigo-100) transparent transparent transparent;
}
.speech-bubble::after {
  top: calc(100% - 1px);
  border-width: 7px 7px 0 7px;
  border-color: var(--c-indigo-50) transparent transparent transparent;
}
@keyframes bubbleFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
@media (prefers-reduced-motion: reduce) {
  .speech-bubble { animation: none; }
}

/* ---------- 21a. 비전하우스 이미지 꾸미기 ---------- */
.image-customizer {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(1040px, calc(100vw - 32px));
  max-width: none;
  max-height: min(900px, calc(100dvh - 32px));
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--r-xl);
  color: var(--color-text);
  background: var(--color-surface);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}
.image-customizer:not([open]):not([data-dialog-open]) { display: none; }
.image-customizer::backdrop {
  background: rgba(10, 15, 30, 0.72);
  backdrop-filter: blur(6px);
}
.image-customizer[data-dialog-open] {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  width: 100vw;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 16px;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: rgba(10, 15, 30, 0.72);
  box-shadow: none;
  backdrop-filter: blur(6px);
  overflow: auto;
}
.image-customizer__shell {
  display: flex;
  flex-direction: column;
  max-height: min(900px, calc(100dvh - 32px));
  background: var(--color-surface);
}
.image-customizer[data-dialog-open] .image-customizer__shell {
  width: min(1040px, calc(100vw - 32px));
  max-height: min(900px, calc(100dvh - 32px));
  border: 1px solid var(--color-border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}
.image-customizer__header {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-5);
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--color-border);
}
.image-customizer__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 2px;
  color: var(--color-primary);
  font-size: var(--font-size-xs);
  font-weight: 800;
  letter-spacing: 0.06em;
}
.image-customizer__eyebrow::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: var(--r-full);
  background: var(--c-teal-500);
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.14);
}
.image-customizer__header h2 {
  margin: 0;
  color: var(--color-text);
  font-size: var(--font-size-xl);
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: -0.025em;
}
.image-customizer__header p:last-child {
  margin: var(--sp-1) 0 0;
  color: var(--color-text-2);
  font-size: var(--font-size-sm);
}
.image-customizer__close {
  display: inline-grid;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  color: var(--color-text-2);
  background: transparent;
  font: inherit;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.image-customizer__close:hover { color: var(--color-text); background: var(--c-navy-50); }
.image-customizer__body {
  display: grid;
  grid-template-columns: minmax(300px, 0.95fr) minmax(360px, 1.05fr);
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
.image-customizer__preview-panel {
  display: grid;
  min-height: 560px;
  place-items: center;
  align-content: center;
  gap: var(--sp-3);
  padding: var(--sp-8);
  color: #fff;
  background: var(--c-navy-900);
}
.image-customizer__preview-stage {
  display: grid;
  width: min(100%, 430px);
  min-height: 0;
  place-items: center;
}
.image-customizer__preview {
  display: grid;
  width: min(100%, 430px);
  max-height: 500px;
  aspect-ratio: var(--vhic-ratio, 260 / 396);
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--r-lg);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.28);
}
.image-customizer__preview svg {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}
.image-customizer__compare {
  min-height: 44px;
  padding: 0 var(--sp-4);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--r-full);
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: 700;
  cursor: pointer;
  touch-action: none;
}
.image-customizer__compare:hover { background: rgba(255, 255, 255, 0.14); }
.image-customizer__controls {
  min-width: 0;
  padding: var(--sp-6);
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--color-surface);
}
.image-customizer__group {
  min-width: 0;
  margin: 0 0 var(--sp-5);
  padding: 0;
  border: 0;
}
.image-customizer__group legend {
  margin-bottom: var(--sp-2);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: 800;
}
.image-customizer__choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-2);
}
.image-customizer__group--ratio .image-customizer__choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.image-customizer__choices button {
  position: relative;
  display: inline-flex;
  min-width: 0;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  color: var(--color-text-2);
  background: var(--color-surface);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: 700;
  line-height: 1.25;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast), color var(--t-fast);
}
.image-customizer__choices button:hover { border-color: var(--c-navy-300); background: var(--c-navy-50); color: var(--color-text); }
.image-customizer__choices button[aria-pressed="true"] {
  border-color: var(--color-primary);
  color: var(--color-primary-hover);
  background: var(--c-indigo-50);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
}
.image-customizer__group--palette button::before {
  content: '';
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--r-full);
  background: var(--vhic-chip-bg, #0f172a);
  box-shadow: 0 0 0 1px var(--vhic-chip-accent, #2563eb);
}
.image-customizer__group--palette [data-vhic-palette="original"] { --vhic-chip-bg: #0f172a; --vhic-chip-accent: #14b8a6; }
.image-customizer__group--palette [data-vhic-palette="ocean"] { --vhic-chip-bg: #082f49; --vhic-chip-accent: #0284c7; }
.image-customizer__group--palette [data-vhic-palette="sunset"] { --vhic-chip-bg: #3b1835; --vhic-chip-accent: #e11d48; }
.image-customizer__group--palette [data-vhic-palette="forest"] { --vhic-chip-bg: #10251d; --vhic-chip-accent: #4d7c5b; }
.image-customizer__group--palette [data-vhic-palette="lavender"] { --vhic-chip-bg: #272445; --vhic-chip-accent: #8b5cf6; }
.image-customizer__group--palette [data-vhic-palette="mono"] { --vhic-chip-bg: #18181b; --vhic-chip-accent: #71717a; }
.image-customizer__group--shape button::before,
.image-customizer__group--ratio button::before {
  content: '';
  flex: 0 0 auto;
  width: 19px;
  height: 15px;
  border: 2px solid currentColor;
  border-radius: 3px;
  opacity: 0.72;
}
.image-customizer__group--shape [data-vhic-shape="soft"]::before { border-radius: 7px; }
.image-customizer__group--shape [data-vhic-shape="linear"]::before { height: 10px; border-radius: 0; }
.image-customizer__group--ratio [data-vhic-ratio="portrait"]::before { width: 12px; height: 18px; }
.image-customizer__group--ratio [data-vhic-ratio="square"]::before { width: 16px; height: 16px; }
.image-customizer__advanced {
  margin-top: var(--sp-2);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  background: var(--c-navy-50);
  overflow: hidden;
}
.image-customizer__advanced summary {
  min-height: 48px;
  padding: 13px var(--sp-4);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: 800;
  cursor: pointer;
}
.image-customizer__advanced[open] summary { border-bottom: 1px solid var(--color-border); }
.image-customizer__advanced-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
  padding: var(--sp-4);
}
.image-customizer__advanced-grid label {
  min-width: 0;
  color: var(--color-text-2);
  font-size: var(--font-size-sm);
  font-weight: 700;
}
.image-customizer__color {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  background: var(--color-surface);
}
.image-customizer__color input[type="color"] {
  width: 42px;
  height: 32px;
  padding: 2px;
  border: 1px solid var(--color-border);
  border-radius: var(--r-sm);
  background: var(--color-surface);
  cursor: pointer;
}
.image-customizer__range,
.image-customizer__select {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  min-height: 44px;
  align-items: center;
  gap: var(--sp-3);
}
.image-customizer__range input { width: 100%; accent-color: var(--color-primary); }
.image-customizer__range output {
  min-width: 38px;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.image-customizer__select { grid-template-columns: 88px minmax(0, 1fr); }
.image-customizer__select select {
  min-height: 44px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  color: var(--color-text);
  background: var(--color-surface);
  font: inherit;
}
.image-customizer__check {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  background: var(--color-surface);
  cursor: pointer;
}
.image-customizer__check input {
  width: 19px;
  height: 19px;
  margin: 0;
  accent-color: var(--color-primary);
}
.image-customizer__notice {
  min-height: 0;
  margin: 0;
  padding: 0 var(--sp-4) var(--sp-4);
  color: var(--c-navy-600);
  font-size: var(--font-size-xs);
}
.image-customizer__notice:empty { display: none; }
.image-customizer__footer {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}
.image-customizer__footer-actions { display: flex; gap: var(--sp-2); }
.image-customizer button:focus-visible,
.image-customizer summary:focus-visible,
.image-customizer input:focus-visible,
.image-customizer select:focus-visible {
  outline: 3px solid var(--color-border-focus);
  outline-offset: 2px;
}

@media (max-width: 760px) {
  .image-customizer {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border: 0;
    border-radius: 0;
  }
  .image-customizer[data-dialog-open] { inset: 0; padding: 0; }
  .image-customizer[data-dialog-open] .image-customizer__shell {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border: 0;
    border-radius: 0;
  }
  .image-customizer__shell { height: 100dvh; max-height: 100dvh; }
  .image-customizer__header { padding: var(--sp-4); }
  .image-customizer__header h2 { font-size: var(--font-size-lg); }
  .image-customizer__header p:last-child { max-width: 32ch; }
  .image-customizer__body {
    display: block;
    min-height: 0;
    overflow: auto;
  }
  .image-customizer__preview-panel {
    position: sticky;
    top: 0;
    z-index: 1;
    min-height: 0;
    padding: var(--sp-4);
  }
  .image-customizer__preview-stage { width: 100%; max-height: 38dvh; }
  .image-customizer__preview { width: min(100%, 340px); max-height: 38dvh; }
  .image-customizer__compare { min-height: 44px; }
  .image-customizer__controls { padding: var(--sp-5) var(--sp-4); overflow: visible; }
  .image-customizer__footer {
    padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom));
  }
}

@media (min-width: 761px) and (max-height: 720px) {
  .image-customizer,
  .image-customizer__shell {
    max-height: calc(100dvh - 16px);
  }
  .image-customizer[data-dialog-open] { padding: 8px; }
  .image-customizer[data-dialog-open] .image-customizer__shell {
    max-height: calc(100dvh - 16px);
  }
  .image-customizer__header { padding: var(--sp-3) var(--sp-5); }
  .image-customizer__header p:last-child { display: none; }
  .image-customizer__body { min-height: 0; }
  .image-customizer__preview-panel {
    min-height: 0;
    padding: var(--sp-4);
    overflow: auto;
  }
  .image-customizer__preview-stage { max-height: calc(100dvh - 280px); }
  .image-customizer__preview {
    width: min(100%, 340px);
    max-height: calc(100dvh - 300px);
  }
  .image-customizer__controls { padding: var(--sp-4) var(--sp-5); }
  .image-customizer__footer { padding: var(--sp-3) var(--sp-5); }
}

@media (max-width: 480px) {
  .image-customizer__header p:last-child { display: none; }
  .image-customizer__choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .image-customizer__group--shape .image-customizer__choices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .image-customizer__group--shape button,
  .image-customizer__group--ratio button { flex-direction: column; padding-inline: var(--sp-1); font-size: var(--font-size-xs); }
  .image-customizer__advanced-grid { grid-template-columns: 1fr; }
  .image-customizer__range,
  .image-customizer__select,
  .image-customizer__check { grid-column: 1; }
  .image-customizer__footer { align-items: stretch; }
  .image-customizer__footer > .btn { padding-inline: var(--sp-3); }
  .image-customizer__footer-actions { flex: 1; }
  .image-customizer__footer-actions .btn { flex: 1; padding-inline: var(--sp-3); }
}

@media (forced-colors: active) {
  .image-customizer,
  .image-customizer__choices button,
  .image-customizer__advanced,
  .image-customizer__color,
  .image-customizer__check { border: 1px solid CanvasText; }
  .image-customizer__preview-panel { background: Canvas; color: CanvasText; }
  .image-customizer__choices button[aria-pressed="true"] { outline: 3px solid Highlight; }
  .image-customizer__group--palette button::before { forced-color-adjust: none; }
}

@media (prefers-reduced-motion: reduce) {
  .image-customizer,
  .image-customizer * {
    scroll-behavior: auto;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ---------- 22. 버튼 시스템 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 10px var(--sp-5);
  border-radius: var(--r-md);
  font-family: var(--font-base);
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast), opacity var(--t-fast);
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--c-indigo-500); outline-offset: 2px; }
/* hidden 속성이 .btn의 display 규칙에 가려지지 않도록 강제 (.modal-overlay[hidden] 패턴과 동일) */
.btn[hidden] { display: none !important; }

.btn-lg {
  padding: 13px var(--sp-8);
  font-size: var(--font-size-base);
  border-radius: var(--r-lg);
}

.btn-sm {
  padding: 7px var(--sp-4);
  font-size: var(--font-size-xs);
  border-radius: var(--r-sm);
}

.btn-primary {
  background: var(--c-indigo-600);
  border-color: var(--c-indigo-600);
  color: #fff;
  box-shadow: 0 1px 3px rgba(37,99,235,0.3), 0 1px 2px rgba(37,99,235,0.2);
}
.btn-primary:hover:not(:disabled) {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  box-shadow: 0 4px 12px rgba(37,99,235,0.35);
}

.btn-outline {
  background: transparent;
  border-color: var(--color-border);
  color: var(--c-navy-700);
}
.btn-outline:hover:not(:disabled) {
  background: var(--c-navy-50);
  border-color: var(--c-navy-300);
}

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--c-indigo-600);
}
.btn-ghost:hover:not(:disabled) {
  background: var(--c-indigo-50);
  border-color: var(--c-indigo-100);
}

.btn-ghost-danger {
  background: transparent;
  border-color: transparent;
  color: var(--c-red-600);
}
.btn-ghost-danger:hover:not(:disabled) {
  background: var(--c-red-50);
  border-color: var(--c-red-100);
}

.btn-teal {
  background: var(--c-teal-600);
  border-color: var(--c-teal-600);
  color: #fff;
  box-shadow: 0 1px 3px rgba(13,148,136,0.3);
}
.btn-teal:hover:not(:disabled) {
  background: var(--c-teal-700);
  border-color: var(--c-teal-700);
}

.btn-complete {
  background: linear-gradient(135deg, var(--c-indigo-600), var(--c-sky-500));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 14px rgba(37,99,235,0.35);
  padding: 12px var(--sp-8);
  font-size: var(--font-size-base);
  border-radius: var(--r-lg);
}
.btn-complete:hover:not(:disabled) {
  box-shadow: 0 6px 20px rgba(37,99,235,0.45);
  transform: translateY(-1px);
}

.btn-danger {
  background: var(--c-red-600);
  border-color: var(--c-red-600);
  color: #fff;
}
.btn-danger:hover:not(:disabled) { background: #b91c1c; border-color: #b91c1c; }

.btn-restart-complete {
  color: var(--c-navy-600);
}

/* 스피너 */
.btn-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: var(--r-full);
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 완료 후 Vision House 홈 유도 CTA */
.hub-cta {
  margin: var(--sp-8) auto 0;
  max-width: 480px;
  padding: var(--sp-5) var(--sp-6);
  text-align: center;
  background: var(--c-indigo-50);
  border: 1px solid var(--c-indigo-100);
  border-radius: var(--r-xl);
}
.hub-cta-text {
  margin: 0 0 var(--sp-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-2);
  word-break: keep-all;
  overflow-wrap: break-word;
}
.hub-cta-btn { display: inline-flex; }

/* ---------- 23. 페이즈 액션 바 ---------- */
.phase-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--color-border);
  margin-top: var(--sp-2);
}

.action-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

/* ---------- 24. 웰컴 필라 (누르면 뒤집히는 플립 카드) ---------- */
.welcome-pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

/* 카드 = 토글 버튼. 앞면(개념)과 뒷면(설명)을 한 칸에 겹쳐 키 높이를 자동 정렬한다. */
.welcome-pillar {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  border-radius: var(--r-xl);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.welcome-pillar:hover,
.welcome-pillar:focus-visible { transform: translateY(-3px); }
.welcome-pillar:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 3px;
}
/* 카드별 광택·글로우 색 (앞면 아이콘 색과 일치) */
.welcome-pillar--teal   { --wp-tint: #eafaf6; --wp-edge: rgba(13, 148, 136, 0.5); }
.welcome-pillar--sky    { --wp-tint: #e6f4fe; --wp-edge: rgba(2, 132, 199, 0.5); }
.welcome-pillar--indigo { --wp-tint: #eef1ff; --wp-edge: rgba(79, 70, 229, 0.5); }
.welcome-pillar--violet { --wp-tint: #f3eeff; --wp-edge: rgba(124, 58, 237, 0.5); }

.wp-inner {
  display: grid;
  perspective: 900px;
}

.wp-face {
  grid-area: 1 / 1;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-3);
  background: linear-gradient(157deg, #ffffff 0%, #ffffff 58%, var(--wp-tint, #f8fafc) 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--r-xl);
  text-align: center;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.22s ease;
}
/* 은은하게 움직이는 광택 — 텍스트 아래(z-index:-1)에서 천천히 사선으로 드리프트 */
.wp-face::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(115deg,
    rgba(255, 255, 255, 0) 38%,
    rgba(2, 6, 23, 0.02) 46%,
    rgba(255, 255, 255, 0.78) 50%,
    rgba(2, 6, 23, 0.02) 54%,
    rgba(255, 255, 255, 0) 62%);
  transform: translate3d(-24%, -14%, 0);
  animation: wp-sheen 6s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes wp-sheen {
  from { transform: translate3d(-24%, -14%, 0); }
  to   { transform: translate3d(24%, 14%, 0); }
}
/* 카드마다 광택 위상차 → 가로로 잔잔히 번지는 느낌 */
.welcome-pillar--sky    .wp-face::before { animation-delay: -1.5s; }
.welcome-pillar--indigo .wp-face::before { animation-delay: -3s; }
.welcome-pillar--violet .wp-face::before { animation-delay: -4.5s; }
/* 앞면/뒷면을 각각 독립적으로 회전(preserve-3d 비의존) → 호환성·렌더 안정성↑ */
.wp-front { transform: rotateY(0deg); }
.welcome-pillar.is-flipped .wp-front { transform: rotateY(180deg); }
.welcome-pillar.is-flipped .wp-back  { transform: rotateY(0deg); }
.welcome-pillar:hover .wp-face,
.welcome-pillar:focus-visible .wp-face {
  border-color: var(--wp-edge, var(--c-navy-300));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}

.wp-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.wp-icon--teal   { background: var(--c-teal-100);   color: var(--c-teal-600); }
.wp-icon--sky    { background: var(--c-sky-100);    color: var(--c-sky-600); }
.wp-icon--violet { background: var(--c-violet-100); color: var(--c-violet-600); }
.wp-icon--indigo { background: var(--c-indigo-100); color: var(--c-indigo-600); }

.wp-label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--c-navy-400);
  letter-spacing: 0.04em;
}

.wp-value {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-text);
}

/* 뒷면: 개념 설명 */
.wp-back {
  transform: rotateY(180deg);
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: 1.55;
  color: var(--color-text-2);
  word-break: keep-all;
  overflow-wrap: break-word;
}
.wp-back strong { font-weight: 700; }
.wp-back--teal   strong { color: var(--c-teal-700,   var(--c-teal-600)); }
.wp-back--sky    strong { color: var(--c-sky-700,    #0369a1); }
.wp-back--indigo strong { color: var(--c-indigo-700, var(--c-indigo-600)); }
.wp-back--violet strong { color: var(--c-violet-700, var(--c-violet-600)); }

@media (prefers-reduced-motion: reduce) {
  .welcome-pillar { transition: none; }
  .wp-face { transition: border-color 0.18s ease; }
  .wp-face::before { animation: none; }
}

/* ---------- 25. 토스트 ---------- */
.toast {
  position: fixed;
  bottom: var(--sp-6);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--c-navy-900);
  color: #fff;
  padding: 10px var(--sp-5);
  border-radius: var(--r-full);
  font-size: var(--font-size-sm);
  font-weight: 500;
  white-space: nowrap;
  box-shadow: var(--shadow-xl);
  z-index: 9000;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base), transform var(--t-base);
  max-width: calc(100vw - 32px);
  overflow: hidden;
  text-overflow: ellipsis;
}
.toast.is-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 480px) {
  .toast {
    width: max-content;
    max-width: calc(100vw - 32px);
    border-radius: var(--r-lg);
    line-height: 1.45;
    text-align: center;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: keep-all;
    overflow-wrap: break-word;
  }
}

/* ---------- 26. 확인 모달 ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: var(--sp-4);
  animation: fadeIn 0.15s ease both;
}
.modal-overlay[hidden] { display: none; }

/* 공유 메뉴 (데스크톱 커스텀 공유) */
.share-sheet { max-width: 380px; text-align: left; }
.share-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-2); }
.share-sheet-title { margin: 0; font-size: var(--font-size-md); font-weight: 700; color: var(--color-text); }
.share-sheet-hint { margin: 0 0 var(--sp-4); font-size: var(--font-size-sm); line-height: 1.5; color: var(--color-text-2); }
.share-close { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; background: transparent; color: var(--color-text-3); border-radius: var(--r-md); cursor: pointer; }
.share-close:hover { background: var(--c-navy-50); color: var(--color-text); }
.share-copy {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%;
  padding: 12px var(--sp-4); margin-bottom: var(--sp-4);
  border: 1px solid var(--color-border); border-radius: var(--r-md);
  background: var(--c-navy-50); color: var(--color-text);
  font-family: var(--font-base); font-size: var(--font-size-sm); font-weight: 600;
  cursor: pointer; text-align: left;
}
.share-copy:hover { background: var(--c-indigo-50); border-color: var(--c-indigo-200); }
.share-copy svg { width: 18px; height: 18px; flex: none; color: var(--c-indigo-600); }
.share-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.share-channel {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 10px var(--sp-3);
  border: 1px solid var(--color-border); border-radius: var(--r-md);
  background: var(--color-surface); color: var(--color-text-2);
  font-family: var(--font-base); font-size: var(--font-size-sm); font-weight: 600;
  cursor: pointer; text-align: left;
}
.share-channel:hover { background: var(--c-navy-50); border-color: var(--c-navy-300); color: var(--color-text); }
.share-ic { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; }
.share-ic svg { width: 18px; height: 18px; }
.share-ic--x { color: #0f172a; }
.share-ic--fb { color: #1877F2; }
.share-ic--li { color: #0A66C2; }
.share-ic--mail { color: var(--c-navy-600); }

/* 카카오톡 공유 버튼 (config에 KAKAO_JS_KEY 있을 때만 표시) */
.share-kakao { background: #FEE500; border-color: #FEE500; color: #191600; }
.share-kakao:hover { background: #F5DC00; border-color: #F5DC00; }
.share-kakao svg { width: 18px; height: 18px; flex: none; color: #191600; }
.share-kakao[hidden] { display: none; }

/* 완료 페이지 하단 재설계 — 결과 액션 2-tier + 조용한 홈 링크 */
.result-actions { margin: var(--sp-6) 0 var(--sp-5); }
.result-actions-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; }
.result-actions-hint {
  margin: var(--sp-3) auto 0; max-width: 400px; text-align: center;
  font-size: var(--font-size-xs); color: var(--color-text-2); line-height: 1.55;
  word-break: keep-all; overflow-wrap: break-word;
}
.hint-link { color: var(--c-indigo-600); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.hint-link:hover { color: var(--color-primary-hover); }
.manage-actions {
  display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; align-items: center;
  max-width: 560px; margin: 0 auto; padding-top: var(--sp-5);
  border-top: 1px solid var(--color-border);
}
.manage-hint {
  margin: var(--sp-2) auto 0; max-width: 440px; text-align: center;
  font-size: 12px; color: var(--color-text-2); line-height: 1.5;
  word-break: keep-all; overflow-wrap: break-word;
}
.hub-cta--quiet { display: flex; justify-content: center; margin: var(--sp-8) 0 0; }
.hub-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: 999px;
  background: #fff;
  color: var(--c-indigo-600);
  font-size: var(--font-size-sm);
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}
.hub-link:hover {
  border-color: rgba(37, 99, 235, 0.45);
  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.14);
  transform: translateY(-1px);
}
.hub-link:focus-visible { outline: 2px solid var(--c-indigo-600); outline-offset: 2px; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal-box {
  background: var(--color-surface);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  max-width: 360px;
  width: 100%;
  box-shadow: var(--shadow-xl);
  animation: slideUp 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes slideUp {
  from { transform: translateY(20px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

.modal-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r-full);
  background: var(--c-red-50);
  color: var(--c-red-600);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--sp-4);
}

.modal-msg {
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--color-text);
  text-align: center;
  line-height: 1.6;
  margin-bottom: var(--sp-5);
}

.modal-actions {
  display: flex;
  gap: var(--sp-3);
  justify-content: center;
}
.modal-actions .btn { flex: 1; }

/* ---------- 27. 반응형 ---------- */
@media (max-width: 1024px) {
  :root { --sidebar-w: 260px; }
    .main-content {
    padding: var(--sp-6) var(--sp-6) var(--sp-10);
  }
}

@media (max-width: 768px) {
  /* 사이드바와 메인이 같은 flex 행(.app-body-inner)에 있으므로 그 행을 세로로 쌓는다 */
  .app-body,
  .app-body-inner { flex-direction: column; }

  .house-sidebar {
    width: 100%;
    height: auto;
    position: static;
    padding: var(--sp-3) var(--sp-4);
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    overflow: visible;
  }

  /* 모바일 기본 '접힘' + 첫 페인트 깜빡임 방지: JS가 is-ready 를 달기 전엔 집 카드를 숨긴다.
     (모바일은 집 시각화가 본문 위에 쌓여, 펼쳐져 있으면 시작 화면이 안 보임 → 시작법을 모름) */
  .house-sidebar:not(.is-ready) .house-card { display: none; }
  .house-sidebar:not(.is-ready) .house-toggle { margin-bottom: 0; }


  /* 집 카드: 데스크톱과 동일한 세로 배치(제목·집·레전드)를 유지하되 모바일 폭에 맞춰 컴팩트하게 */
  .house-card {
    flex: none;
    align-items: center;
    padding: var(--sp-4);
  }

  /* 핵심 수정: 기본 flex:1(basis 0%)이 폭을 0으로 무너뜨려 SVG가 overflow로 새던 문제 해결 */
  .house-svg-wrap {
    flex: none;
    width: 100%;
  }
  .house-svg-wrap svg { max-width: 180px; }

  .house-legend {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-2) var(--sp-4);
  }

  .main-content {
    padding: var(--sp-5) var(--sp-4) var(--sp-10);
    max-width: 100%;
  }
  .app-body-inner { max-width: 100%; }

  .step-nav { gap: 0; }
  .step-label { display: none; }
  .step-connector { min-width: 8px; max-width: 20px; }

  .app-header .header-inner { padding: 0 var(--sp-4); gap: var(--sp-3); }
  .brand-name { display: none; }

  .value-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: var(--sp-2); }
  .top5-grid  { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }

  .welcome-pillars { grid-template-columns: repeat(2, 1fr); }

  .input-row { grid-template-columns: 1fr; }

  .mission-frame-item { grid-template-columns: 1fr; gap: var(--sp-2); }

  /* 비전: 좁은 화면에서 텍스트칸과 기한칸을 양옆에 두면 둘 다 작아진다 → 세로로 쌓고 텍스트는 전폭으로. */
  .vision-row { grid-template-columns: 1fr; gap: var(--sp-2); }
  .vision-timeline {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    min-width: 0;
    padding-left: calc(26px + var(--sp-3)); /* 번호 배지 폭만큼 들여써 텍스트칸과 좌측 정렬 */
  }
  .vision-timeline-label { flex: 0 0 auto; }
  .vision-timeline-select { flex: 1 1 auto; min-width: 0; }
  .vision-custom-input { flex: 1 1 100%; }

  .vh-pillars { grid-template-columns: 1fr; }
  .vh-values  { grid-template-columns: 1fr 1fr; }

  .export-actions { flex-direction: column; align-items: stretch; }
  .export-actions .btn { width: 100%; justify-content: center; }
  .btn-hint { width: 100%; }
  .speech-bubble { max-width: 100%; }

  .phase-actions { flex-wrap: wrap; }
  .phase-actions .btn-complete { width: 100%; }

  .modal-actions { flex-direction: column; }

  /* iOS 입력 포커스 줌 방지: 폼 입력 폰트는 16px 이상 */
  .input-field,
  .definition-item textarea,
  select { font-size: 16px; }

  /* 터치 타겟 최소 44px 확보 (langtoggle은 외피 pill 44px + 내부 버튼 40px로 60px 헤더에 맞춤) */
  .btn { min-height: 44px; }
  .btn-share-native { width: 100%; }
  .btn-icon { width: 44px; height: 44px; }
  .lang-toggle { padding: 2px; }
  .lang-btn { min-height: 40px; min-width: 44px; padding: 0 14px; }
}

@media (max-width: 640px) {
  #phase-0 .phase-title {
    max-width: 360px;
    font-size: 29px;
  }
  #phase-0 .phase-desc,
  #phase-0 .welcome-pillars {
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }
  #phase-0 .welcome-pillars { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .value-grid { grid-template-columns: repeat(3, 1fr); }
  .top5-grid  { grid-template-columns: repeat(2, 1fr); }
  #phase-0 .phase-title {
    max-width: 340px;
    font-size: 26px;
  }
  #phase-0 .phase-desc,
  #phase-0 .welcome-pillars {
    max-width: 340px;
  }
  .phase-title { font-size: var(--font-size-xl); }
  .phase-title--complete { font-size: var(--font-size-2xl); }
}

/* ---------- 28. 인쇄 ---------- */
@media print {
  .app-header,
  .house-sidebar,
  .phase-actions,
  .export-actions,
  .image-customizer,
  .toast,
  .modal-overlay { display: none !important; }

  .app-body { display: block; }
  .main-content { padding: 0; max-width: 100%; }
  .phase { display: none !important; }
  #phase-5 { display: block !important; }
  .summary-card { box-shadow: none; border: 1px solid #ccc; }
}

/* ---------- 29. 고대비 모드 ---------- */
@media (forced-colors: active) {
  #phase-0 .phase-title {
    background: none;
    -webkit-text-fill-color: CanvasText;
    color: CanvasText;
    filter: none;
  }
  #phase-0 .phase-title::after { background: CanvasText; box-shadow: none; }
  .value-card.is-selected,
  .strength-palette-tile.is-selected,
  .strength-palette-selected-slot.is-filled,
  .top5-card:not(.is-eliminated) {
    forced-color-adjust: none;
    outline: 2px solid Highlight;
  }
  .btn-primary,
  .btn-complete { forced-color-adjust: none; }
}

/* ---------- 30. 애니메이션 감소 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .strength-palette-tile,
  .strength-palette-selected-slot { animation: none !important; }
}

/* ---------- 31. 제작·문의 트리거+팝업 (maker-card-kit 수동 미러 — 정본은 킷) ---------- */
/* 트리거: 호스트 푸터의 글씨 형태를 그대로 상속하는 텍스트 버튼 (호스트 토큰 무의존) */
.maker-open {
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}
.maker-open:hover { text-decoration: underline; }
.maker-open:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; border-radius: 2px; }

/* 팝업: 카드 본문을 담는 네이티브 dialog. 가족 계약(verify-family-dialog-centering)대로
   position: fixed; inset: 0; margin: auto 를 명시해 뷰포트 정중앙에 둔다. */
.maker-dialog {
  /* ----- self-contained tokens (Personal VH resolved values) ----- */
  --mk-surface: #ffffff;
  --mk-border: #e2e8f0;
  --mk-text: #0f172a;
  --mk-text-2: #475569;
  --mk-text-3: #94a3b8;
  --mk-primary: #2563eb;       /* indigo-600 */
  --mk-primary-hover: #1d4ed8; /* indigo-700 */
  --mk-indigo-500: #3b82f6;
  --mk-indigo-200: #bfdbfe;
  --mk-indigo-100: #dbeafe;
  --mk-indigo-50: #eff6ff;
  --mk-sky-500: #0ea5e9;
  --mk-amber-400: #fbbf24;
  --mk-navy-50: #f8fafc;
  --mk-fs-xs: 11px;
  --mk-fs-sm: 13px;
  --mk-fs-base: 15px;
  --mk-fs-lg: 18px;
  --mk-fs-xl: 22px;
  --mk-sp-1: 4px;
  --mk-sp-2: 8px;
  --mk-sp-3: 12px;
  --mk-sp-4: 16px;
  --mk-sp-5: 20px;
  --mk-sp-6: 24px;
  --mk-sp-8: 32px;
  --mk-r-lg: 14px;
  --mk-r-xl: 20px;
  --mk-r-full: 9999px;
  --mk-shadow-xs: 0 1px 2px rgba(0, 0, 0, .06);
  --mk-shadow-sm: 0 1px 4px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .04);
  --mk-shadow-xl: 0 16px 48px rgba(0, 0, 0, .12), 0 8px 16px rgba(0, 0, 0, .06);
  --mk-t-fast: 120ms ease;
  --mk-t-base: 200ms ease;

  box-sizing: border-box;
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(480px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: var(--mk-sp-6);
  text-align: center;
  background: var(--mk-surface);
  border: 1px solid var(--mk-border);
  border-radius: var(--mk-r-xl);
  box-shadow: var(--mk-shadow-xl);
  color: var(--mk-text);
  word-break: keep-all;
  overflow-wrap: break-word;
}
.maker-dialog::backdrop { background: rgba(15, 23, 42, 0.55); }
.maker-dialog[open] { animation: makerLightboxIn 0.18s ease-out; }
.maker-dialog *, .maker-dialog *::before, .maker-dialog *::after { box-sizing: border-box; }

.maker-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mk-sp-3);
  margin-bottom: var(--mk-sp-4);
}
.maker-dialog-head .maker-eyebrow { margin: 0; }
.maker-dialog-close {
  flex: none;
  width: 44px;   /* touch floor (web-service-quality §10) */
  height: 44px;
  border-radius: var(--mk-r-full);
  border: 1px solid var(--mk-border);
  background: var(--mk-surface);
  color: var(--mk-text);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: var(--mk-shadow-xs);
}
.maker-dialog-close:hover { border-color: var(--mk-primary); background: var(--mk-indigo-50); }
.maker-dialog-close:focus-visible { outline: 2px solid var(--mk-primary); outline-offset: 2px; }


.maker-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--mk-fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mk-text-3);
  margin: 0 auto var(--mk-sp-4);
}
.maker-eyebrow::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mk-amber-400);
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.18);
}

.maker-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mk-sp-4);
}
.maker-photo {
  width: 116px;
  height: 138px;
  flex: none;
  object-fit: cover;
  object-position: 50% 8%;
  border-radius: var(--mk-r-lg);
  border: 1px solid var(--mk-border);
  background: var(--mk-navy-50);
  cursor: zoom-in;
}
.maker-photo:focus-visible { outline: 2px solid var(--mk-primary); outline-offset: 3px; }

.maker-identity { width: 100%; }
.maker-name {
  margin: 0;
  font-size: var(--mk-fs-xl);
  font-weight: 700;
  color: var(--mk-text);
  line-height: 1.25;
}
.maker-name span {
  font-size: var(--mk-fs-sm);
  font-weight: 500;
  color: var(--mk-text-3);
  margin-left: 6px;
}
.maker-role {
  margin: 4px 0 0;
  font-size: var(--mk-fs-base);
  font-weight: 600;
  color: var(--mk-text-2);
}
.maker-slogan {
  margin: var(--mk-sp-4) 0 0;
  font-size: var(--mk-fs-lg);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--mk-primary);
  word-break: keep-all;
}
.maker-slogan::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  margin: var(--mk-sp-2) auto 0;
  border-radius: var(--mk-r-full);
  background: linear-gradient(90deg, var(--mk-primary), var(--mk-sky-500));
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .maker-slogan {
    background: linear-gradient(90deg, var(--mk-primary), var(--mk-sky-500) 55%, var(--mk-primary));
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: makerSloganShimmer 5s linear infinite;
  }
  @keyframes makerSloganShimmer {
    from { background-position: 0% center; }
    to   { background-position: 200% center; }
  }
}

.maker-proof { width: 100%; }
.maker-creds {
  list-style: none;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--mk-sp-1);
}
.maker-creds li {
  position: relative;
  padding-left: 22px;
  font-size: var(--mk-fs-sm);
  color: var(--mk-text-2);
  line-height: 1.55;
}
.maker-creds li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 13px;
  height: 13px;
  background: var(--mk-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%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'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.maker-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--mk-sp-2);
  margin-top: var(--mk-sp-5);
}
.maker-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 var(--mk-sp-4);
  border: 1px solid var(--mk-border);
  border-radius: var(--mk-r-full);
  font-size: var(--mk-fs-sm);
  font-weight: 600;
  color: var(--mk-text);
  text-decoration: none;
  transition: border-color var(--mk-t-fast), background var(--mk-t-fast);
}
.maker-link svg { width: 16px; height: 16px; fill: currentColor; }
.maker-link:hover { border-color: var(--mk-primary); background: var(--mk-indigo-50); }
.maker-link:focus-visible { outline: 2px solid var(--mk-primary); outline-offset: 2px; }


/* ----- photo lightbox (self-themed, host-independent) ----- */
.img-lightbox {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(15, 23, 42, 0.86);
  overscroll-behavior: contain;
}
.img-lightbox[hidden] { display: none; }
.img-lightbox-img {
  width: auto; height: auto;
  max-width: min(90vw, 520px); max-height: 86dvh;
  border-radius: 14px; box-shadow: 0 16px 48px rgba(0, 0, 0, .12), 0 8px 16px rgba(0, 0, 0, .06); background: #f8fafc;
}
.img-lightbox-close {
  position: absolute; top: max(16px, env(safe-area-inset-top)); right: 16px;
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 9999px; cursor: pointer;
  background: rgba(255, 255, 255, 0.16); color: #fff;
}
.img-lightbox-close:hover { background: rgba(255, 255, 255, 0.28); }
.img-lightbox-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ----- React lightbox via native <dialog> (used by react/MakerCard.tsx) -----
   The vanilla card uses the position:fixed .img-lightbox above; the React port uses a
   native <dialog>. Both are self-themed and host-independent. Keep both blocks; an app uses
   whichever variant it ships. */
.img-lightbox-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  max-width: none;
  max-height: none;
  overflow: visible;
}
.img-lightbox-dialog::backdrop {
  background: rgba(15, 23, 42, 0.86);
}
.img-lightbox-dialog img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(90vw, 520px);
  max-height: 86dvh;
  object-fit: contain;
  border-radius: 14px;
  border: 5px solid #fff;
  background: #fff;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .12), 0 8px 16px rgba(0, 0, 0, .06);
}
.img-lightbox-dialog-close {
  position: absolute;
  top: -16px;
  right: -16px;
  width: 44px;   /* touch floor (web-service-quality §10) */
  height: 44px;
  border-radius: 9999px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #0f172a;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .04);
}
.img-lightbox-dialog-close:hover { border-color: #2563eb; background: #eff6ff; }
.img-lightbox-dialog-close:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.img-lightbox-dialog[open] { animation: makerLightboxIn 0.18s ease-out; }
@keyframes makerLightboxIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .maker-link { transition: none; }
  .maker-slogan { animation: none; }
  .maker-dialog[open] { animation: none; }
  .img-lightbox-dialog[open] { animation: none; }
}

/* ===== profile-photo handwriting flourish (lightbox): '조직을 더 재밌고 성과나게!' writes itself =====
   The vanilla (.img-lightbox) and React (.img-lightbox-dialog) lightboxes both wrap the photo in
   .maker-ink-stage and add the .maker-ink overlay; opening the lightbox (display:none -> shown)
   restarts these CSS animations, so no JS is needed to replay them. Pen webfont = NanumGangInHanWiRo
   (SIL OFL), subset to 조직을 더 재밌고 성과나게! only and inlined here so the kit stays self-contained (no font
   file to sync). If the handwriting text changes, re-subset the font for the new glyphs (README). */
@font-face {
  font-family: 'MakerPen';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(data:font/woff;base64,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) format('woff');
}
.maker-ink-stage { position: relative; display: inline-block; line-height: 0; }
.maker-ink-stage::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none; border-radius: 14px;
  background: linear-gradient(115deg, transparent 38%, rgba(140, 152, 175, 0.5) 50%, transparent 62%);
  background-size: 280% 100%;
  background-position: 165% 0;
  /* Confine the gleam to the studio BACKGROUND only — the person silhouette (incl. the white shirt)
     is masked out so the light never crosses him. Mask = rembg cutout of marcus-gong-960, inverted
     (opaque on background, transparent on the person), downscaled + feathered, inlined as PNG. */
  -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAWgAAAGsCAQAAABalfX8AAApxElEQVR42u2dd3cb2bHtfx2QEwkwU9LM3Ln29Vv3rff9v4ftCfKMRIliRAYaqdFAvz/6ACQ1FMUAdp8DVGl5rQm2JaI3qnftqtplhSESEmsTtnwEEgJoCQkBtISEAFpCQgAtIYCWkBBAS0gIoCUkBNASEgJoCQG0hIQAWkJCAC0hIYCWkBBASwigJSQE0BISAmgJCQG0hIQAWkIALSEhgJaQEEBLSAigJSQE0BICaAkJY8KVjyCmuLFcs+TDEECbDOTFrwWYLawlqC1CAbgA2hwgz5kRqP+AhY2Dg4W9hDbYt/5eQgCtJZQjIE/xGTNmxIQpIQ4uaVKksLEVkB1cUqRI4ShYSwigNYo5c6ZMGDJgwIA+PfoM8QlxyZAhQxpn+StDjgIlCmQF1AJo/XLzlAk9OjRo0qZDly49RkwJcUmTIUMKF0fl6xxFquxQo0KRLGlcAbUAWg84z/EZ0OKSM75wSYMufTyGTJhhYZPCJYWDg41NijQ5ytTYZ59damxTJk9GQC2ATh7OMyZ4XHPKBz5wyhUdPMb4TJkRqvJvURJaCtIZClTYYYd99jnggBpb5FWmlkLxiWHJSYoVwrnPFR95z++ccEGHET4B86VoF+ka4S2Fw8EhTZYiFbbZ44g3HHPADuUlqC0BtQA6frKxgPNv/MIfCs6RWPftRoulMrVDijQFKuxyyDHHHLFPjQoFsrg4AmkBdLzKxhSPK074hX/zH77QYcSM+QNtk7udQxsblwxFtthlnyOOOOKQPbYpksGVPC0cOt783OOaE/7kI+cqO4cPMmDrK8ISKddjPNpc8oV9jnnLO96wzxYFUlImCqBfezYjVFKdz5AWZ3xU3Hms4Pzo96T6fwwUqPu0ueaccy5p8BPH7FEkiy3DZALo1+sFzpmrnuCYNld84ZQL2svs/DzyEjJjypgBXdo0aNCiy5ADtskp5UNCAL1SMM8I8JkyZUpAwIA6n/jEOS0GTJk/v6a5RUB8Rnj06NKlz4C37CjqISGAXiGYo/w5wGPIGB+fAQ0+cUKdPlNeWmZbKlf7zAiYMKBPnwETAvYoCpsWQK8O0FNG9GnRpEmHHiMmTBjS5YpzWoyZszrdaMaEGVMmjBgxIWDGPkXSIuQJoFfROvHxaHHJF865pq0AHQEuyqLBC+jGtwTBOQGBIjhTAg4okxFIC6BfBueAMT2u+MxHTjijsYTzTI2KTlcO58UXaUxbyXo+PlOOqJATSAugXwLnIW3O+MB/+JMv1OkxVhAOl8P84Svq3B3FqCdM8HlDlRyuQFoA/Vw4N/jMe37lD77QpI+vOoHhV32/15vj6zFXKwMTAubskJcsLYB+HpzrnPAr/+Y9X2gxYnpn5CgeBh/SI2DKBJ+AaLApiyOPSAD9NDiPaHDCv/knv6kpjfmr0YvvT4ws9hPTavPFEl1aAP2UvDiiyQm/8E9+5ZQ2EzXbnNzXqwm45CmQI0WZlNAOAfRjc+KEDqf8xr/4jVPaK9aZnxMBY9p8oUCJIjlS2PIUBdCPzYcel/zBr/yuCZwBZoxo8ZkiZYpqvkNohwD6EcAZ0+KU92rCeaIFnCMiNOCaPGUqlMiSEtohgH5sfv7In3yhzShB7nxfedjnkiJVqpTJ4ojaIYD+Pn9uc84JZ7QYagTnG3Z/wUf22aFMRgaWEPfR7xRfAxqccUYd7wUTzq9HO8a0OOMTF9qwewG0xvk5wKPBBdf0XjTh/JqTfwPqnPKZOgOm8tAE0A+/0nvUuab95IWq+P6MYzpccMqFKlklBNAPKBxdmrQY4Gv6Mg/VrswZ57S0KloF0Fo2vLu06CqgWJr+OX16XHNBHW8FuzIC6LX22WjTwsPX+FUeffHaXHFNT0iHAPphBt2iw0DzvBfi06dJgw5jAbQA+ts+dT3aS8Kh+/hUlzZdbYtXAbQWE9A9OvSZPOBOp8vbxGdAD48xM8nRAuhvMdM+fYYGFFpzZkwYM2aq/ZdPAJ1YUyVy3pgYIYVFpjS+EA6QWQ6+oUL7Kue9pKEcz2XCxYmiuTS/BdAPuSNFvvvzZ4P4r17QD/8vngt6awlqgbMA+ps71jMCZVHwUjA/7t/yHfPdx1lHCqiFQ38T0vFudb/U1jeCMwJoAfT9r/D5HdeNOOnO0/+8EZxnCtICaIl78/PMEFU3VKxfCIcA+gGABAQGTa+Fy18CaPkI7m0nT5XGEa6oJIwD0BKIynE/4Xg9L9HHWJ0LpCVDs+pOob88mal/fhZAC6C/A43IYDxYXroyoYg1R2gUQCcwG/H0tkpyhCO8IzOGwqEl7mPRs1gBba1gnkPyswD6m7McsxgaK9aK+4USQjkemOV4WoZO9hK3hY2lfgmgJb45y4ExzXoLR5mBWUI5JL7VdwtfSCHCmABt4ShAW8KhJZLKqqv7AkZkQ+wahXKsyZfDWrJoAbR8BN9lp3rn5xtIC5wF0N9h0OaUhfZS5xBASxg+jBkRDkc4tAD6IdkuNIgY2bg4OJKhBdCvC2grhhbMIj+7OPI0BdAPM+hw5ZC2XukpOkI5BNDfW1YNV5ZBhXIIoBMvs0x6hg4uKRyBswD6W9qzORKYhU2KNCnh0ALo++FsG6XqRoQjTYaUsGiZ5fiWanCjGazivor1lZHMamHnkCZDWjK0ZOhv5zxzVANrCWi59y2AfqDIcl8R0OGK/7QRh5bxJAH0Nz8V25D5Yms5x4FY6gqgucfqPMBnQsDckHwXMsdnSB+Pibj4S1H4NTT6NKjTZqTAYa3Qp99aOdxCddjtii9skcYih7vJxEMAzZ17Ul0uOOE9JzSefPfvMfC3XuWmYotP5HGXxawjgJYImeFxyXt+4T0nXDM0wn80xKet2kEpcmRetZwVQBuVnzt85lf+yQca9A05NTwnYMickBRlamxT2GQBT4rCG2CMaXHKn3zknDYjpoY44s/Vxe9zTrmkq/V1csnQMRaEYzpccUkTD98oY62QGWN6NGnRF0BLAMwY06dDj+Gjc3Oo2X3yAR4j9WW0hHKIQeOYkbEn4KO7AxMmm33xWwB9GxCRK/TM0ObE0x35BNAbsEkYyqaNAHqdQP2y/26YuIPShts1CqDXx39oMfYqgJZYbn6YawYQzUVv/CqWAPomO7ukyRq7+WGTIkeeHKlNnosWQN98EmkKlCiQfuSnYhHH8NHj4ZynTIX8o//8Aui1ztAOWcpU2aZg3ACmhUueKvvsUt7sVSwBNMtV0wzbHLDPNrlHDmBa2rD/DNsc8YYDypKhJaJPIkOFA47Zo0TqWbTDSgjQacoc8CM/sk9xswf8BdA3kaLILm85pkru0Z+MdetXUs8wR40f+Jl31J7wJxdAr71sl6PKEW/Zp2QME7VIUVL5+YDio98tAugNgHSKEnscc8gWGUM+m4gqHfKGQypk2HAjAwH03RydZYsDDqiSN6LnttA3DjlUxawAWuKOmlukxj47lEi/CjhWe+7CJk2ZfQ7ZEbohgL7v88iyzT4Hr5LvbgM5XFF+LrDLEYdUycrTFEDfl/FK7HPMAVuaQySiGzu84QcON11/RlawHgDJLj9wSYshgba73xYuOWq85Wd+ZM/A/qYAOjbSUeUtTToMCegy1W4LxMLBJUeVd/ydv/OWbWNUGQF0IuLdIR4DJoQ4ePgEmmyzRIfqU2TJs80xf+d/+Zl9yc8C6IeV3W1+wGeGS54GPYbKpyNM9CRyNPNcoMQWNQ54x9/4mWPhzwLo78Emzw5zHIrscs4l1zTp4ie8YuWQY4t9DjnkgAOOOWaPiugbAujv5WiXIhYpyhxwwSf+wGZKkGiBaJFmS2Xlt+yxQ5UyedLSThFAP0a+s9S40iFVHIb0GL3Q4iB8EfVwyLHDz/w//sERWxTIqoUrgbMA+lHFoUOGAgUc+lxySQefWYIyXZEDfuJv/MwOOeUyKmAWQD+Bs9o4WIw4YJcKWUbPBnR456+tZ89rv+WI6qZPPUun8GW6QpFtdtl6djP8r4Jf+KyCsLrcqBE4C6B5/nJWlgo1aisdWAqfsZWyxwG1zfZ/FkCvar6jxi5bZFd47uEpjZq7+dmRhyKAfulM2w571Cgm0sJYrB4csb/pW90C6NWQjhzb7LO38k2W8JG/f54aRxxTIy/8WQC9ujH63WfoC+EKWvFlDnhj1GqYAFpzTbrI7nJK2on9/VDjmLfsGrS8K4A2YJPliDdqI9yOmcHvcsyhDIkKoFdtFvCOY2pP0qPDF/77qENYY5+aDIkincKVTrrVeMOPXNPDZ/6onmG4kq9Sni22KJIWwU4AvVrDrSN+4poWXmx7LDYuWQoUyEh+Fsqx+hz9lh84pBJbcWbhkiErcBZAv4ZrR4ldDtmjHFNhuFi5SpPClaclgGbllrtFttmi8Eo2NPf7OaVIb/ZJeuHQr+nEnKdABgcL6xEaxcPlofXo2y+SnyVDv8rnFZ3mST+Z0T53FN/CwcGVNSvJ0K93Kyv1TAJgPWMRa5GhZTtFMvSr5egI0PEVha5kaMnQr33e0o7JnePm9xNAS4bm9Q4oWzFfuJUnJYB+FSgHTJgwZfasVdfnbrbMNbWMFEAbHXN8PDq06ePH1PqeEzBhzJipgFoAvdpMOWVAgzMuaDGKDdBjejRp4+ELpKUoXCXZGNLgM3/ymeYKHDqsR/+udU45UNuEMhEtgF4JnGcMafKJ9/zBWWzGjSEzRtT5QIksDhYVGSIVQK8CVmPanPI7v3FC48Uud0/5vSe0OSWNi4ODQ1kkPAH0y9lzl3P+w2/8ySV9prEZ6y5IR9QxTJMmhS2jpALol0FqQJ2P/M4fnNN9YXFmPePr5BE5OBUpiYGuAPqlOsOEDl/4kz85o80kRg365ivlcU2OCjW2KeLK9rcA+iX5+ZrPfOALLUYECfj4zxWkP7HHHttkcaQ0RHToZ+fnc044pcEgEThHf44pPS75zCl1hrEVpZKh16432OeKz3zmSm17P3eOI3who54zps0Zn5d3vSVHC6CfpTB85iNntBknmhfnTPG44oR9qhRwpckigH4qnEc0+cwfnHCprAuSfV+MaXHKDtsUSWPJOTcB9FPh/In3/IdTOhocSY4EvEv+oESBNHbMtmQCaMN7gy0+8Ru/8oHrBMvBv5aop+TIksLGoiiQFkB/HzYzlZ1/5V+853xZDrLSwf3nxIwhDVKkcLAI2adEWprhAuiHNd+hgvM/+XVJN0ItQLOgHRYWcwICDigrWwUJAfQ9VCOaev7E7/yL3zmlxfgFYt1r/Bl9+lhAgM+ECYdskRUrGgH0XxedAsZ41PnEe37hP3x5FbHOWoE63iMkwGeEh8cRVQrKLWSj7Q4E0BGY58yZMmZAl2s+8yfv+cgFHcYxbaY8PUv3mDFlSJ8OLY7YoUxOZeqNzdUC6DlzZviM8ejQ4IovfOKEL9Tpr1Sqs1b8PpnSJ2DCgDbXvOGIXapUKJIljROTc4hmYYXhRuflGQEThvRp0+CKCy4455I6HYbKA9oy4M7tHvsccMA+e+ywTYk8GVKbl6s3FdBz5gQqL/do0uCKSy64pk6bHkMmzFR21hkQFhYpMuQps80OuwrYO9Q2M1dvGqBDQkICpvgM6NOhrsB8RYMmXTzG+MyWzFn//Lbw28tSpMI2O8tsvcMWZfJqy2UjcvXmADqC8oypUgZ6tGhwxRVX1GnSoc+QCVPmBoH5dqa2SZEhR4ktauxxwCH77FKjQoGcytWsN6w3AdAhc0LmTPEZM6BPmxZ1rrmiriiGx2SZl00D8+KntAAHhzRZ8lSosssB+xwqXl0hT0b5TFsCaBP95yIoR1l5ogSuNg3q1KnTpEUHjxG+sva6PbNsGfjzRn/qyK80Q44yW+yoXH2oKEhBgdoSQOv+MMNb1CKax5iprDzCo0uHFg0aNGjSoounKEaw/N+YCeW/LhBEzRWXFDkKVKiyxxHHvOGQXbZVC2YtM7XZgI6AuzAzvPk1Y6bawkM8evTo0KJFkzZtBeUxU4JbFIM1erzhHW/pDHlK1DjkmHe85YgdttTuuL1unUUzAR0q4S3SkSPNYkrAlGD592PVFO7SoUOXDj16DJZZeX6rA2itLe1a5Oo0eSrscsgb3vGGQ6qUloWivTTstRRpEUATb2dvwYvHjBkyYsSIMROm+Pj4TBgxxMOjh4fHQP37gIDZnay83oAGi1CZpmcoLEF9zCFVKuTJklJHiVzlzWQr3doWQMfhkhzJbiMGePSXv4YMleVslK0nKkePGTNR+ftGW173zHwfrC11wjOvCsV9tchVIEtGnfZc/IquIjpLSiKAfgUgzwiYMmZIjy5t2opK9PHwGDHGx1fseaaoR/RXc8WUww0C8UMtmDR5SlSoUKJInhwZcuTIkadAgSIFCuTJkiF962CRJYBejYYcEYgxI4b0l0pFmw59PIaMFCsObhWIoforBMh/IVe2uk2bW+bjNBmyZMlToKjAXqFMiSIFcmRUxjYA1noDOtrs69FUnbw+bZqqr9djeCsrLyBsfaUmx30P5XUFOWulfUVbnSNy1J2ttGrJFChSYYsttqmyRYUyxSXbtvXO167mBeCYFmeccMo1PXr0Fc0YqTsnC63i249cMvO3aJx1K2dHEl80ExLBOsrUVbapUqNKlbIadsooa19bAP0c86szfuFXPlCnr8q8Cf5Xstu6KxWv+f88B2a3BDsbS+XrLDmKlKlQpcYuNbYoUlR0JKfntrmreX5ucsIv/JPPdJgQKHqxGVCOj1XfvOOiuiPAYoiDS5oMOQpssc02W5SpsMcxR+zq6Qniau/6ecKffOZKeeabPW+hM6i/piQwY8qEAQ5prpUCUqDCIf/FkBCbon6mvnoDus+1ujk11MLmRadpjbiegUWAz5A+KVKkyXNJhwCXNCn9DCNdzX0/mzToxHjRxKxh0dcHuLUsIWdMsLHpMSAgRZEKRf0sblytfZk9OnQZbfTJSUuTr/JCGZkRckmBPQ7Z0Y902Bo3VKaM8BjIuclEtZC/PpcJPUUFO0yefa1x4xz8Q6aMlN48F8Jxb8aMf83LUu/Ontr1Gen2bGyNe4TREJKvWw4QgDNjRJcmHYYEkqEfWxIO8RgwVrK/hF4tL48uPYYEehFCW+NTEB2lcAjh0I1Jw4wxffqMYjxBajCgI8muzrUo0Fr+7NHi8YgBY90qHF0z9IQu11wp708JHUlHNFkTSIZ+nGTn0aHNYKM1aJ1jhs9QWaZJhn6Eh/5EzTtLfiYRf9PHVDld2vT06uPqC+jpLfsXCR0pR586F1zTwxdAf6/kiJaupKWic9vL45JPnNFK+CCp5oCeM2VIh6YaSpLQlUMPaHLOGU2G+jwnW8ux/jYXfOFag9utGOU/Gn9zpUWDrmToh+nGkGs+ccIVfd0aqxJfDScM8RjqND5ma9gj9GhwxjktRgJo7fSNr6W7EUMm+qjRtpbFRpNrpUEjRaHWWseEAX08fdRoW7tSY0KfFm08JQZZMp2hGXu+WTyYM6ZDnSaeLjMdtnb6s4aFhsQDY6RtLrmkrYsiZWuncHS4pq4OXkroTjl8ulxyTh1PDx5ta2dc0OSSK7qyeGVMe6XBOVd09UhBtmbf9x7XXNBgoNuc7Yaoy88pC7tcc6k0qVAA/TUju+Ka7kpPEgvgXz9HX9LQozC0tXp9DWhypctHI/HouqdLXZc0ZGs1Xxt9MG0xlnnCDnbyq7lT+jTUDnjipMPW6Js+UoeK+1oUhOFXx96ER39LjQ7Uk2vqoHTYWs3YtanT1myLUB9g66t1+MqUvpc86bA1a3k3pSB8BNHQK2dH1U9LDxdCWxsGPaZLk5ZsET4IZB3fKyEzRnRo0GaQ9NvV1qalMloO9QfaMFcTb6zeBXI8sI5sJ9q3JnAE0Hi0aenAwow2AwsTIx1D2rToJ/38bI2sc9ta2hZYGhu+6HWtrE+HftJOHbY2Q6M92nS1IRwSz3fzTvQJutow6B5tNSi+rlcD1/kgczRY1qWTdJfX1mQKekiXnmEt71DWs+4AekyPLl6y5kC2JsL8gK4QDqMzdEQ6unhMknRTsTUZG/Xo6bSZ9k0BT+eeoZX4UxzQS7osdDXxSRrQZ2ick93Tdh6t2I5oJgHxiHR4eMmOLtiaaBwDPAMIR2gwk45HuhtIhp4rQA/08xo2ErRWYr9rdEZkwDDJXoIOGTpgxEA5DUtgtCPpkIG6Kxlubob2GSf9vV7BVdf10MpfzqKHjJKcZ7c1kHsCZSc1NXbuWOalF4BenOLbYMpx+1qHjCWZb984ZpykUb2tBZyHDLV2SrLkTuITnuYEf1M59FzdI2wp6y+Tj8jrxaStxBZmfSabmqEX1rlfOKOx8fcI1yNDzzYZ0DPGNDnhP3zgOvnlHYkVZOgZPj4+s6QKZTvREmLANR94z0fqjLQvCYVHP+aZBvgEm5iho0t3db7wmStNvDheBulNF++s5UG+gHlSNYWdsIlUnzYdBuI1ulZa9ERBeuOKwhlTJvhrpECHokSrQQY/Gdphiz+bKNIrd5Ct00hqf99NFBwOKVK42N9VeU1SpDebcHhc8ZEqOVwssnGnTDdBWNikSJMhhS15b40AfUmePBmypHFJxfts3UQ9QRzcZYaWYE3copu4ZClTZYs8brzP1k540i76ZVoxJV+/h8XYJhec00iiWWYnPps1Mm6T8GFIhwJpxvTp4iUxcOYmPJjUx9NucDSUjLyCfuE0mX6hneAPPaJHi64uJxslVipu2thJ1EZ2gl5oPerUNTLQlVidfpUmSzYJ/cpO8CLhFWdc0BYD3bUDdIo8ZYpk49Y4kgF0RDcafOYDZ3STtsiWWDmg0xQoUyKHEzfC7ITssXtc8IETrnS5ES0l4Aox5ZIhT550/PhyE7uadMUXLugYSzjECP17PNpOYvLFTkiwG9CmSU/r1djHacsyrnS/NYWfjN2MndjV2BEjTd1GJVazyZ+IP4eb0Dd4RsCMuTFbHg/vX0iOvru3EzDCY6jsDDZgliNkxkwBWkb317P5PVA94LWf5Yi+wVO1Simxrsa6XjJ+snYibqP+0itJWiqs5d6KzxAvCQNOOxGNY0SPHkNtTwQJJ37pFYHpHRa95oCObhK2jfNKEhb9FJ1jAejZemfoiF9FbnY6A1py9MsvTw4YxC/M2gm0vT06NOjKUNJal4UTvCTu5tgJEI4+Tdp4SZquSsTgWxgdgpquM6AjwtGlZSCDFrOvp7XOfAb0GcRtOBN3p3DKkI6a4pgLV12jS+b3neHsq7uya5uh50zxaNM2wJzReiBLS55+nM7Ri79baMfOoD3ahqxdydvj5d3CftxP2o69x9+lTY+RzNltgM4RHbyOtVvoxm5C0qGdlJGfRIzvpRk+AzwG8T5rO2YNekBXEQ4B9Lrn6NvdwnAdAT3Hx6NL3xjJzpJ9lBeO+S8y9BoCelEmdPEMM/+yNm6uI1yJlhM1V2IeIo0b0H16Bh6gkCz93DfyiOG6AhoCxsn09yUS6hZGu4WxehfaMUvtUe9INlU2I0MHCtDT+JpRbswjhYtd4NA4MWuT3inWyp74hJG6ibVmGTqhF5BE4jexxozjbK3YMb+ARky0XbySeA2aOWES5zvZjlmXHIu5zIaVhdEZztm6ATqakPWZJGMQJZFQhp4pw4pw/WY55oZfjbVkUfaZt4KDOA8luzEb+PmGEw5psTyt3xiZvq1h6zsC9JSpMOiN49Hz9ZzlmKvXz0w2Ptgky5kFoNewKLxxHJXYJNqxplvf0XdVCIfEmmToqEQIJUNLrM/GirDnzTzCGaM+ZMsnLvHqOz/WJhyvl9gEyxobGwc7PpwJoCVeNzs7ODjx5Wg7gW+tMOlNulbo4MR5sdCOGcyWgJnNEh3WPENLbFqGdnGxBdAS6wFoB5cU7joXhWLeslkMOkVKsei1A7QlYN44Bu2SIoW7nkXhAs4C6c2R7VzSKkOvGeWw4pfYJRKPiHCk1lHluJHYbaEdG6VxLCjH2hWFNs5SwhEtelMAnSJNah0bK4tvqyuUY6NEu5Ti0GucoR2hHBsF6My6AjqqeNNx/nASCQPaJUNGUY41VDlSZEgL6dgoBp0hG28Ss2NtgmbIqB9PykI2QrTLKkCzjhw6TZZcvD+eRKIZOkOW7HpSjqgNmiVHRkjHBjHoHFnScT5vO9Y2aPQDuqJzbAyg8+TWdXzUIkWWnHoFSbD2g0kpcuTJklrPJVkLR31jRbrbDA06rQDtriPluOFUeTJSFm4EoDPkFaDXNEPbpClQiPtHlEiIQWcpUCQT7/vYjlWXTJOnSE5Y9EYAOkeRQtwyrR2zLplP4oeUSKAkjJJXnnScGke8GdomRYEyRbJSFq59U2XxNk7H+zaOdwUrRZ4yZfLxSjkSCZSEWYpJ0Es7Zl6Vp8wWRVJCOtY63CWgXVhfQDtkKbNFiWy8zEoiEQZdjP852zHPX2UoU2WLgpAO1tlzNE2RCqW4Rbu4AW2Rpsg2VUpxFwsSMWvQRSoU43/Kduw/aoEqO2yRE6VjjRl0ngoV8vF3HOwE5PZtdqkl8e2ViG2TsEAlGTUrbkjZZKmwyx5bZATQa1oSRqV/OYm3sB379zdFiV32qVGQmY419bPLU2Y7mTrJTuCFlKPKPntUJEevJeVIU2B7UwANNhkq7HMoOXqNCUeV7WT6wXYimwxFdjhkj5Lk6LWcstuiRiUZHctOZL09R5UDjtghLzl67XqERWrUKCeTrOyEWFaZfY7ZpyziHevlxZGlQo0qxWSm3u2ElMoCOxzzhl3h0WtGOPJU2WWbQtxjSUkeDbJJs8UR7zhiK/5+v8QrPtcSNXaSe6puYt/kAru85Zxr+kyZiznYmhCObXbZSW5Wx01Q3NniiB+5psOIQO7LrgHhSFGkxj7V5KYp3QQ7/kX2+ZEGbYYEDJkpUAv9MDU/Z6iwxx7bZJMq9V2S41sZtnhDhy4DfOaMmAkqjC8I99lNcjjYTXQqq8AuP+ExxGcOjJkxF2xg4li/TYoSe4pwJKZcuSTrflbmiAk+cyxcOoyWBWL4xK+HRPJrsdvsJT1H6ZJ037/KjLnaQjujxYCJKhHDR6/8SOhQEJbYYZ+dZNfr3MS/1zl2FP+qUOULDXoqT8/vAXVkxBv90zmoQlJArUNBuMU+B2yTT7Kv4GpRSkQWNNvscsAZdbqM8JkxuwVq686t8JA5M6b4+ATCuzV4ikVqHLBHJdlhBleT+SyHLCVqHHHOFS08RvhMFaQXcLbVUnxIyIwJHl26DJkKpBN/z25zyDG7Se/zu9oUFC4ZyuxwRJsOHiMmKvuGim/btwA9Z4pHg8+E+ASCqoRH+svs84ajJBVofQAd5d8UDhkKVBkyYKzgHCybLYv8vAD0hDYnBHTpMhFUJapVFdnlHT9yQJl0soqTq5nBn0uWElMCZsyYES7JRARpa1kQjrliwqkY1iT+ds1T4x0/844d8kk7YrlafTjgYOOSUdrF1/rFzUc1Y8gAl3DJsiWSYs813vE3/ptjtpKfbnc1/JCsR+jLM0ZMGTFgLCoHqzfzekz7Kirna7zjf/gHP7Grg3mQq/G3/6GY4+PRocuIWWIZelMu4lr3/H1kjlzlHf+H/+VvHFDUgf65huaQgBE92vQZJzrS9H1Ih0a25q3lf27r/9adO955tnnD3/m//IM3VJIuB80G9JQhHdr08WVGb+W6haUkUgcHBxcbV5Xki+I8RY4KB/zE3/lv3lLV5SqDmYCe4dOnTYcBUykJVwznqCxf/EqTJU1KXey2ljeBi2xzxBvecsCWPkdGXCPz85wxPVpq1yXJP4m1pnsnW1SpUKCgbg1mSOEspdMI0GW1PVjU6ZSqayjhGNFVDDpZ0S5cw3M/GbZ5xw8csEWJvDpAn1r2aW0c0qTJkydHRq/b7aYC2qNFG0/zKQ7LSMnOpcQx/+C/2KFAhgwpXJWfLQV6GwcXB0e30yKuoQpHlyZtIxi0SdJeqACbpsQ+P7BHXsHWUg0T61a3wNLxK+samp+bNOgkqkGzlnpzNJbrE6jzIQWcWyIeJhwPMA3OM8Z0uOKaDhNDeoShIRQkVAljQJeuKrgts4iTbWB+7lPngmv6arVWYpVjB9EbsM4lDQbmDeaaBug5E7pcckGTAYEQjlepUQY0ueCKbsJ92LUHdMiMIU0uuaLDxJgP2zKsbTWhwxUXNM3zSjEN0D499Tr0tFc47m5BmlZ2N7ikrnwHBdCvljuigvCKjtYvwxso27f2bEz7nOvU6RpTeBuocizY3ZXKz3ON6YW1bBNHdgtz496EfRpc02ZIwSS7Y9uogjAiHNfK3lH/JrKDi6u6aZZhtcqINnWaBlA7QwEdfcgdGjS0FuzCW6rzYgDTNo5Hz5nQp0mDrkHFt2GADhjSok5Le8EuvJOnbSMLwwCPJnXaZsmjtmEKR5O6Eero3TxtHqQX70PjSIdtVMu7S4OmIR3CcGljFkHavBGDKIE0zGqvmPNBTxnQok5bef2bAIrQYD06vPWJj8whHbYxRcqUPi2a9AwqUsJbvnyWgYtuYzo0aJlEOmyjqm4Thvq/BrSZkLaUTGpcErGNqbnH9OjQY2zMBFh4C9IYu1vfpmnS5Llt0JZKn57aUQmNytChsbBeLCO3zdmuNylDD5bnKswZ6g8Jl7cIQgMBPcWjQ8ccomcbYlswY8KIsYE3Z8M7qrR57ZUxffoMmZjxydvGqKKBMtkNDYSFqbQjZE7AmKE5lpi2MZCYq1e3SQP9ofEnjSJIT9UlhVDGRzdx4+M+OIdr5D0qGXpFw5iWkfktNBjOFhYOKeWbZMmA/ypzxCLf6U87wnt7hRh6fzBFjjxZUyDtGsOhF2WhmZzUIKuWv1g3ZimQMwXQtjG7KiMGjJgapHOEd+iSmTk6Ms9deNsJh17h6GjUJ4zszUOjAHFzMBQDWyszAgJmpszP2IaM9g/p0sHDV5zULANx28CJ6AXR8xngiQ69+tHRNh0DjyBb2Ms1WfPku1BNOXbVLRvpFK6McHh06Jvn42Oe7HXP2G40zTE0Y4rGNebiVVcdCAqNy89pLEIcbAOtJedMGdChy9CMeTvXkI+0S5ehgW6jDmly2MDEuIvk0RtlkU48fOY4AuhVlIQDuvRN2my7dWs1SwGbkOGtS+Wm+XH36SgW7epOnFwDPtAJHl36TAwkHClyFHGY08c2srkS3ezt0jOjgnGNYdCeabaBoABdwiFQp89CQxexevQUi5YMvYKPs6s+zrkxlwHDZUmYo4SLvzxNGRpnZ7BIKVFbyxZAr+KF110yaJMAEV3ELpFmTEaH0+7PJn19uniM9X9HukZse7fpKfceyzAOnSZHkQwDsrgGdgsXSWWgqphAjxP1JgM6anob06m6tyjM4pFXzRVTWXRf6UyaS3euAbmho47Uz40bF3VIkSFPniJ50vqruN/sBCwKc+2bK7YxkpF5F6+iDJ0hR4EieTLqvLCpDfAuA/1tG20DRP1IspuBgXMcLhly5CkoQNvGloVRYtG+F2AbINl1VNvVPAYdDSZFkI7WmCwjNwwj6hdp0YEAehVTHEbd+VhuErqkFaALFNReHoYazozoKi16LoB+/otuoMZGA+O6hItJuwxZcqoszJh0T4q71rqjJfkTQL/An7i3HC7HUEDnyKoMXSBjpBZtqc0VTz0LrUmHrbkGvRCLzGPQKNEuQ4YseUoUyeGqA/EmatEDE/QmW+P87C9Hy30DR+MtHNJkFaTzFCmSI21st3C6nOjQuiPgaj5B0FFji+blZ1tl6AjSM4qUKKoRpdDQsrBHR3cWbWtdhiw8+2eG+llkyZElQ5oMBcoUyagR+dDI5kp/eUMhFEA/b5eto4QiU7uEeXKkcRWgS0sHIvPsJ29TQI0B7Wrd9G6rKY7QSAYducLlSJMC8pQoqREljHMXuRn0XxTptgD6OZtsEYM2tSTMkydHChfIqokOU8vCBQnsMtCZRdsGLF6ZyqCjlkqGFA6OUjpyahXLRLPJqNGluemMrXWrtWfc2OjtDJ0hR06NJDmkyJNXQ6Rmbq5EWnRPby3a1nwYZmSkgW5UEmaXhCPqGmYokF/uFpo50TFcphkB9JMc1Xw8+gyMsy64zaCj/JxWqoarRv0zxtqCLW5idZcusALoR0Z0lbBvrGS3gG9BNbtvZLzb1uHmNYsWg/6evkfebE09iSdmmbje68dRoKjge/PPoqztgrEN8MFyu1AA/QTRzmfM2DhzxruSXXHJmEPC5T+NdA4zTyBFpMPTmQramt4knOIzNVSBtpeEo6A0DWtp3Bg1w1NG7hZaKkdrnWpsjY8hzw09h7aYhM6SvjP/fNsr2jb0iFB0iFPji77/H5ayxKdLV6akAAAAAElFTkSuQmCC);
  mask-image: url(data:image/png;base64,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);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  mask-mode: alpha;
  animation: makerInkShine 1.05s ease-out 2.7s both;
}
.maker-ink {
  position: absolute; top: 4.5%; right: 7%; z-index: 2;
  margin: 0; padding: 0;
  text-align: right; pointer-events: none;
  font-family: 'MakerPen', 'NanumGangInHanWiRo', system-ui, cursive;
  font-size: clamp(20px, 6vw, 35px);
  line-height: 1.06;
  color: #18181c;
  letter-spacing: -0.01em;
  transform: rotate(3deg);
  transform-origin: top right;
}
.maker-ink-row { display: block; }
.maker-ink i {
  display: inline-block;
  font-style: normal;
  animation: makerInkWrite 0.42s ease both;
  animation-delay: var(--d, 0s);
}
@keyframes makerInkWrite {
  from { clip-path: inset(-14% 100% -14% -14%); opacity: 0.25; }
  to   { clip-path: inset(-14% -14% -14% -14%); opacity: 1; }
}
@keyframes makerInkShine {
  from { background-position: 165% 0; }
  to   { background-position: -75% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .maker-ink i { animation: none; clip-path: none; opacity: 1; }
  .maker-ink-stage::after { animation: none; background: none; }
}

/* ---------- 32. 앱 푸터 ---------- */
.app-footer {
  padding: var(--sp-6) var(--sp-5);
  padding-bottom: calc(var(--sp-6) + env(safe-area-inset-bottom));
  text-align: center;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}
/* 푸터 안내문·메타는 정보 전달 텍스트 → text-3(#94a3b8, 2.6:1) 금지, navy-500(4.76:1) 이상 */
.app-footer-privacy {
  max-width: 640px;
  margin: 0 auto var(--sp-2);
  font-size: var(--font-size-xs);
  color: var(--c-navy-500);
  line-height: 1.6;
}
.app-footer-meta {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--c-navy-500);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: center;
}
.app-footer-meta a { color: var(--color-text-2); text-decoration: none; }
.app-footer-meta a:hover { color: var(--color-primary); text-decoration: underline; }

/* ---------- 33. 완성 화면 개인 보관 블록 ---------- */
.input-hint {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-3);
  line-height: 1.5;
}

.submit-block {
  margin: var(--sp-5) auto var(--sp-2);
  max-width: 560px;
  padding: var(--sp-5);
  text-align: center;
  background: var(--c-indigo-50);
  border: 1px solid var(--c-indigo-200);
  border-radius: var(--r-lg);
}
.submit-block-head { margin-bottom: var(--sp-4); }
.submit-block-title {
  margin: 0 0 var(--sp-1);
  font-size: var(--font-size-md);
  font-weight: 700;
  color: var(--color-text);
}
.submit-block-desc {
  margin: 0 auto;
  max-width: 460px;
  font-size: var(--font-size-sm);
  color: var(--color-text-2);
  line-height: 1.6;
}
.btn-submit { min-width: 180px; }
/* 저장 중: 파란 활성색 대신 회색 비활성 */
.btn-submit:disabled {
  background: var(--c-navy-100);
  color: var(--color-text-3);
  border: 1px solid var(--color-border);
  box-shadow: none;
  opacity: 1;
  cursor: default;
}
.btn-submit:disabled svg { opacity: 0.7; }
/* 개인 보관 — 완성 화면의 조용한 한 줄 (플랫폼 §1.5-6). 블록의 유일한 내용이므로 구분선 없음 */
.keep-mine {
  margin: 0 auto;
  max-width: 460px;
  font-size: var(--font-size-sm);
  color: var(--color-text-2);
}
.keep-mine a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.keep-mine-status { display: block; margin-top: 4px; font-size: 12px; font-weight: 600; }
.keep-mine-status.is-claimed { color: #1e7a46; }
.keep-mine-status.is-waiting { color: #9a6b00; }

/* 200% reflow: keep locale actions touch-safe without widening the page. */
@media (max-width: 240px) {
  :root { --header-h: 208px; }
  .app-header .header-actions { justify-self: stretch; justify-content: flex-start; flex-wrap: wrap; }
  .lang-btn { min-width: 44px; padding-inline: 0; }
  .lang-btn[data-lang="ko"] { font-size: 0; }
  .lang-btn[data-lang="ko"]::after { content: 'KO'; font-size: var(--font-size-xs); }
}


/* ==========================================================================
   팀 참여 (가족 §4.5 팀 코드 필드 계약 + 완성 후 팀 저장)
   ========================================================================== */
.team-entry { margin-top: 14px; }
.team-entry-row { display: flex; gap: 8px; align-items: stretch; }
.team-entry-row .vh-team-code-field { flex: 1 1 auto; }

.vh-team-code-field { position: relative; display: flex; align-items: center; width: 100%; }
.vh-team-code-field input {
  flex: 1 1 auto; min-width: 0;
  font-size: 16px;               /* 모바일 자동 확대 방지 */
  letter-spacing: 0.08em;
  padding-right: 52px;           /* 필드 안 토글 공간 */
}
.vh-team-code-field input::placeholder { letter-spacing: 0.08em; opacity: 0.55; }
.vh-team-code-toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0; border: 0;
  background: transparent; cursor: pointer; border-radius: 8px; color: inherit;
}
.vh-team-code-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.team-code-status { margin: 6px 0 0; font-size: 0.82rem; min-height: 1.2em; }
.team-code-status.is-error { color: #b91c1c; }
.team-code-status.is-ok { color: #047857; }

.team-publish-block { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }

@media (max-width: 480px) {
  .team-entry-row { flex-direction: column; }
}

/* vh-avatar-kit:css:start */
/* VH family top-right account affordance (source of truth: scripts/web-templates/vh-avatar-kit) */
.vh-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.vh-login:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.58);
  background: rgba(255, 255, 255, 0.08);
}
.vh-login__en { display: none; }
html[lang^="en"] .vh-login__ko { display: none; }
html[lang^="en"] .vh-login__en { display: inline; }
.vh-login--light {
  border-color: rgba(15, 23, 42, 0.28);
  color: #334155;
}
.vh-login--light:hover {
  color: #0f172a;
  border-color: rgba(15, 23, 42, 0.52);
  background: rgba(15, 23, 42, 0.06);
}
.vh-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.38);
  color: #fff;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  flex-shrink: 0;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.vh-avatar:hover {
  border-color: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.16);
}
.vh-avatar-img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
/* light-header variant (밝은 크롬 앱) */
.vh-avatar--light {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.28);
  color: #334155;
}
.vh-avatar--light:hover {
  border-color: #334155;
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.1);
}
.vh-avatar:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 3px;
}
.vh-profile-menu {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}
.vh-profile-panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  width: max-content;
  min-width: 176px;
  max-width: 264px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
}
.vh-profile-panel[hidden] {
  display: none !important;
}
/* 로그인된 계정 주소 — 정보를 전달하므로 흐린 회색이 아니라 slate-700(#fff 대비 10.4:1) */
.vh-profile-email {
  display: block;
  min-width: 0;
  padding: 10px 14px 9px;
  border-bottom: 1px solid #e2e8f0;
  color: #334155;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vh-profile-action {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  color: #0f172a;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}
.vh-profile-action:focus-visible {
  box-shadow: inset 0 0 0 3px #2563eb;
  outline: none;
}
.vh-profile-action:hover {
  background: #f8fafc;
}
.vh-profile-action--logout {
  border-top: 1px solid #e2e8f0;
  color: #b23a2e;
}
.vh-profile-label__en {
  display: none;
}
html[lang^="en"] .vh-profile-label__ko {
  display: none;
}
html[lang^="en"] .vh-profile-label__en {
  display: inline;
}
/* vh-avatar-kit:css:end */

/* vh-header-kit:css start — 정본 scripts/web-templates/vh-header-kit/vh-header.css (v1.1.0)
   FAMILY.md §1 "제품 헤더 패밀리 록업"·"헤더 크롬 치수"·"제품 전체 진행 표시"의 실행 정본.
   이 블록은 손으로 고치지 않는다. 고칠 곳은 정본 하나뿐이고, 바뀌면 같은 세션에 팬아웃한다(§4.8).

   왜 클래스가 아니라 data 속성인가: 14개 제품의 헤더 클래스 이름이 제각각으로 자랐다
   (.app-header / .site-header / .vh-header / .chrome / .app-header-row). 이름을 통일하면
   CSS·JS 셀렉터·계약 테스트·DESIGN.md가 한꺼번에 흔들린다. 그래서 정본은 이름이 아니라
   역할에 건다 — 제품은 기존 클래스를 그대로 두고 속성만 붙인다. 색·배경은 계속 제품 것이다.

     data-vh-header                       <header>          크롬 겉면 (sticky · 하단 헤어라인)
     data-vh-header-row                   헤더 안 단일 행    브랜드 | 진행 | 도구 (높이의 주인)
     data-vh-lockup                       록업 래퍼          [마크 + 서비스명] | Vision House
     data-vh-family                       Vision House <a>  Sora 워드마크 + 좌측 괘선
     data-vh-workflow-progress="header"   진행 표시 <nav>    행의 정중앙 (260728 계약의 표식)
     data-vh-tools                        우측 도구 묶음     언어 토글 → 저장 배지 → 계정(마지막)
     data-vh-track                        진행률 바(선택)    행 아래 3px, 안의 첫 자식이 채움
     data-vh-chrome="dark"                <header>          다크 크롬 제품만. 저장 배지 잉크 전환

   v1.1.0: 헤더 우측 컨트롤(언어 토글)의 겉모습도 정본이 가져간다. 크롬 안의 컨트롤은
   서비스 개성 자리가 아니다 — 260821 실측에서 활성 pill이 파랑·버건디·반투명 사각·아이보리
   반전으로 갈렸고 높이는 21~44px였다. 이제 어느 팔레트와도 싸우지 않는 중립 반전 pill 하나다.

   토큰은 사용처 폴백으로 둔다. 제품 :root가 정의하면 그 값이 이기고, 없으면 다크 크롬 기본값.
   (킷이 요소에 직접 선언하면 제품의 :root 선언을 눌러버린다 — 그래서 var() 폴백이다.) */

[data-vh-header] {
  position: sticky;
  top: 0;
  z-index: var(--vh-hdr-z, 100);
  border-bottom: 1px solid var(--vh-hdr-edge, rgba(255, 255, 255, 0.06));
  /* 설치형(PWA standalone + viewport-fit=cover)에서 상태바·노치 밑에 깔리지 않게 */
  padding-top: env(safe-area-inset-top);
}

/* 행의 배치 방식(flex/grid)만 :where()로 낮춰 서비스에 넘긴다. 진행 표시를 화면 정중앙에
   두려고 3열 그리드를 쓰는 제품이 있고(성과 설계도), 좁은 화면에서 grid로 재배치하는
   제품도 있다(Personal VH). 계약 속성 — 높이·좌우 여백·수직 정렬·간격 — 은 정본이 이긴다. */
:where([data-vh-header-row]) {
  display: flex;
}

/* 헤더 행. 높이는 여기 하나가 정한다 — 제품이 padding으로 높이를 만들면 60px 계약이 깨진다. */
[data-vh-header-row] {
  align-items: center;
  gap: var(--vh-hdr-gap, 16px);
  height: var(--vh-hdr-h, 60px);
  padding-left: max(var(--vh-hdr-pad-x, 24px), env(safe-area-inset-left));
  padding-right: max(var(--vh-hdr-pad-x, 24px), env(safe-area-inset-right));
  padding-top: 0;
  padding-bottom: 0;
}

[data-vh-lockup] {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-shrink: 0;
}

/* 패밀리 워드마크. Sora는 여기와 서비스 록업에만 쓴다(FAMILY.md §1). */
[data-vh-family] {
  position: relative;
  flex: none;
  padding-left: 10px;
  border-left: 1px solid var(--vh-hdr-rule, rgba(255, 255, 255, 0.22));
  color: var(--vh-hdr-family-ink, rgba(255, 255, 255, 0.68));
  font-family: var(--font-brand, var(--font-lockup, 'Sora')), sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.012em;
  text-decoration: none;
  white-space: nowrap;
  transform: translateY(0.5px);
  transition: color 200ms ease;
}
[data-vh-family]:hover {
  color: var(--vh-hdr-family-ink-hover, #fff);
}
/* 괘선은 글자 높이(12px)에 맞춰 짧게 남기고, 누를 자리만 44px로 넓힌다.
   요소 자체를 44px로 키우면 괘선이 헤더를 가로지르는 긴 선이 된다. */
[data-vh-family]::after {
  content: '';
  position: absolute;
  inset: -16px -8px;
}

/* 괘선은 CSS가 그린다. 글자 파이프가 남아 있어도 두 줄이 겹쳐 보이지 않게 잠근다
   (마크업에서 빼는 것이 정식 수순이고, 이 규칙은 재유입 방지턱이다). */
[data-vh-lockup] > .brand-divider,
[data-vh-lockup] > .lock-div {
  display: none;
}

/* 진행 표시: 브랜드와 우측 도구 사이, 행의 정중앙(FAMILY.md §1 고정 슬롯).
   좌석 램프든 번호 도트든 pill이든 안쪽 시각 문법은 서비스 자유 슬롯이다. */
[data-vh-workflow-progress='header'] {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 넘칠 때 왼쪽 항목을 잘라먹지 않게 (미지원 브라우저는 위의 center로 강등) */
  justify-content: safe center;
  min-width: 0;
  /* 좁은 화면에서 문서 가로 넘침을 만들지 않는다 — 넘침이 있으면 fixed 다이얼로그가
     뷰포트 중앙에 서지 못한다(패밀리 센터링 계약). */
  overflow-x: auto;
  scrollbar-width: none;
}
[data-vh-workflow-progress='header']::-webkit-scrollbar {
  display: none;
}

/* 도구 묶음은 flex 행에서 auto 마진으로 오른쪽에 붙는다. 행이 grid인 제품은
   자기 트랙 배치(justify-self/grid-column)를 쓰므로 --vh-hdr-tools-push: 0 으로 끈다 —
   grid 아이템에 auto 마진이 남으면 justify-self가 무시되고, 트랙보다 넓을 때
   왼쪽이 아니라 오른쪽으로 넘쳐 문서 가로 스크롤을 만든다(260821 PVH 390px 실측). */
[data-vh-tools] {
  margin-inline-start: var(--vh-hdr-tools-push, auto);
  display: flex;
  align-items: center;
  gap: var(--vh-hdr-tools-gap, 12px);
  flex-shrink: 0;
}

/* 진행률 바: 헤더 행 바로 아래 3px. 별도 띠가 아니라 크롬의 밑선이다. */
[data-vh-track] {
  height: 3px;
  background: var(--vh-hdr-track-bed, rgba(255, 255, 255, 0.14));
  overflow: hidden;
}
[data-vh-track] > * {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--vh-hdr-track-fill, currentColor);
  border-radius: 0 2px 2px 0;
  transition: width 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- 헤더 컨트롤 스킨: 언어 토글 (v1.1.0) ---------------------------------
   활성은 크롬에서 오려낸 듯한 중립 반전 pill이다. 서비스 악센트를 쓰면 버건디 극장에
   차가운 블루가, 나무·아이보리 공방에 파랑이 하나 박힌다 — 크롬은 가족 골격이지
   서비스 개성 자리가 아니다(Marcus 260821 비준). 라이트 크롬 제품은 토큰을 반전한다. */
[data-vh-tools] .lang-toggle,
[data-vh-tools] .lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 9999px;
  background: var(--vh-hdr-ctrl-bed, rgba(255, 255, 255, 0.08));
  border: 1px solid var(--vh-hdr-ctrl-edge, rgba(255, 255, 255, 0.12));
  flex: none;
}
[data-vh-tools] .lang-toggle button,
[data-vh-tools] .lang-switch button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  /* min-height 는 height 를 덮어쓴다 — 제품들이 터치 타깃용으로 44·36·30px를 걸어 둬서
     판 높이가 갈렸다. 히트 영역은 아래 ::after 가 44px로 만들고, 판은 여기서 못박는다. */
  min-height: 24px;
  padding: 0 10px;
  margin: 0;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: var(--vh-hdr-ctrl-ink, rgba(255, 255, 255, 0.72));
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
}
/* 24px 판 + 위아래 10px 히트 영역 = 44px 터치 타깃. 판을 키우면 크롬이 두꺼워진다. */
[data-vh-tools] .lang-toggle button::after,
[data-vh-tools] .lang-switch button::after {
  content: '';
  position: absolute;
  inset: -10px -2px;
}
[data-vh-tools] .lang-toggle button:hover,
[data-vh-tools] .lang-switch button:hover {
  color: var(--vh-hdr-ctrl-ink-hover, #fff);
}
[data-vh-tools] .lang-toggle button[aria-pressed='true'],
[data-vh-tools] .lang-switch button[aria-pressed='true'],
[data-vh-tools] .lang-toggle button.is-active,
[data-vh-tools] .lang-switch button.is-active,
[data-vh-tools] .lang-toggle button.is-on,
[data-vh-tools] .lang-switch button.is-on {
  background: var(--vh-hdr-ctrl-on-bed, rgba(255, 255, 255, 0.92));
  color: var(--vh-hdr-ctrl-on-ink, var(--vh-hdr-chrome, #0f172a));
}
/* 손가락 입력에서는 폭도 44px를 지킨다 (i18n-kit v1.2.0 가드와 같은 계약). */
@media (pointer: coarse) {
  [data-vh-tools] .lang-toggle button,
  [data-vh-tools] .lang-switch button {
    min-width: 44px;
  }
}

/* 자동 저장 상태 배지 (FAMILY.md §4.9). vh-doc-sync의 conflict·offline이 화면에 닿는 자리. */
.vh-save-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 9999px;
  border: 1px solid var(--vh-hdr-badge-edge, rgba(255, 255, 255, 0.08));
  background: var(--vh-hdr-badge-bg, rgba(255, 255, 255, 0.05));
  color: var(--vh-hdr-badge-ink, rgba(255, 255, 255, 0.38));
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  transition: color 200ms ease, background 200ms ease, border-color 200ms ease;
}
.vh-save-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: currentColor;
  flex: none;
}
.vh-save-badge.is-saving {
  color: var(--vh-hdr-badge-saving, #6f8fd8);
  background: rgba(99, 140, 255, 0.12);
  border-color: rgba(99, 140, 255, 0.28);
}
.vh-save-badge.is-saved {
  color: var(--vh-hdr-badge-saved, #2f9e63);
  background: rgba(47, 158, 99, 0.1);
  border-color: rgba(47, 158, 99, 0.22);
}
.vh-save-badge.is-offline {
  color: var(--vh-hdr-badge-offline, #a5741a);
  background: rgba(240, 182, 73, 0.14);
  border-color: rgba(240, 182, 73, 0.3);
}
.vh-save-badge.is-conflict {
  color: var(--vh-hdr-badge-conflict, #c0392b);
  background: rgba(192, 57, 43, 0.12);
  border-color: rgba(192, 57, 43, 0.3);
}
.vh-save-badge[hidden] {
  display: none;
}

/* 다크 크롬 위에서는 같은 뜻을 밝은 쪽 잉크로 말한다 (AA 확보). */
[data-vh-header][data-vh-chrome='dark'] .vh-save-badge.is-saving {
  color: #9db8ff;
}
[data-vh-header][data-vh-chrome='dark'] .vh-save-badge.is-saved {
  color: #6fdda3;
}
[data-vh-header][data-vh-chrome='dark'] .vh-save-badge.is-offline {
  color: #f0b649;
}
[data-vh-header][data-vh-chrome='dark'] .vh-save-badge.is-conflict {
  color: #ffa3a3;
}

/* 좁은 화면: 서비스명을 먼저 숨기고 `마크 | Vision House`를 보존한다(FAMILY.md §1).
   진행 표시는 같은 헤더 안의 두 번째 행으로 내려간다 — 헤더 밖 별도 띠로 옮기지 않는다. */
@media (max-width: 720px) {
  [data-vh-header-row] {
    flex-wrap: wrap;
    height: auto;
    min-height: var(--vh-hdr-h, 60px);
    row-gap: var(--vh-hdr-row-gap-narrow, 8px);
    padding-top: var(--vh-hdr-pad-y-narrow, 8px);
    padding-bottom: var(--vh-hdr-pad-y-narrow, 8px);
    padding-left: max(var(--vh-hdr-pad-x-narrow, 16px), env(safe-area-inset-left));
    padding-right: max(var(--vh-hdr-pad-x-narrow, 16px), env(safe-area-inset-right));
  }
  [data-vh-workflow-progress='header'] {
    order: 3;
    flex-basis: 100%;
    width: 100%;
  }
  [data-vh-tools] {
    gap: var(--vh-hdr-tools-gap-narrow, 8px);
  }
  .vh-save-badge__text {
    display: none;
  }
  .vh-save-badge {
    padding: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-vh-track] > *,
  [data-vh-family],
  .vh-save-badge {
    transition: none;
  }
}
/* vh-header-kit:css end */

/* ---------- hidden 속성 전역 가드 (260821 가족 감사) ----------
   작성자 스타일시트의 display 는 UA 의 [hidden]{display:none} 을 이긴다. 그래서
   `.cls { display: flex }` 한 줄만 있어도 JS 가 hidden 으로 닫아둔 요소가 계속 그려진다.
   team 에서는 이 결함으로 팀 코드 입력칸이 로그인 여부와 무관하게 노출됐고, my 에서는
   리더 전용 초대 폼이 항상 펼쳐져 '취소' 로도 접히지 않았다. 둘 다 라이브에서 확인했다.

   요소마다 가드를 다는 방식은 계속 실패했다. team 은 같은 버그를 네 번 맞았고
   plan-canvas 는 가드 8개를 갖고도 4개를 놓쳤다. 가드 개수는 안전의 지표가 아니라서
   종류를 통째로 막는다.

   dialog 는 제외한다. native dialog 의 표시 여부는 open 속성이 정하므로 여기서
   !important 로 눌러 버리면 showModal() 로 연 dialog 가 열리지 않는다.
   verify-family-hidden-guard_260821 이 이 규칙의 존재를 가드로 인정한다. */
[hidden]:not(dialog) { display: none !important; }