@import url("https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&family=Noto+Sans+KR:wght@400;500;700;800&display=swap");

:root {
  --paper: #fbf6ee;
  --paper-deep: #f0e2cf;
  --ink: #332d27;
  --muted: #75695c;
  --line: #d7c3aa;
  --red: #c65f43;
  --yellow: #dda23a;
  --green: #2f9362;
  --blue: #3f73a8;
  --body: #d84b4b;
  --mind: #3f7fc2;
  --social: #2f9362;
  --card: #fffaf3;
  --shadow: 0 12px 28px rgba(53, 45, 36, 0.1);
  --btn-dark: #332d27;
  --btn-dark-hover: #46382e;
  --btn-warm: #f4983f;
  --btn-warm-hover: #e8832d;
  --btn-soft: #fff8ee;
  --btn-soft-hover: #fff1df;
  --btn-control-border: #e0b789;
  --btn-control-text: #8b4b23;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Noto Sans KR", system-ui, sans-serif;
  color: var(--ink);
  background:
    linear-gradient(120deg, rgba(198, 95, 67, 0.08), transparent 32%),
    linear-gradient(260deg, rgba(63, 115, 168, 0.08), transparent 36%),
    var(--paper);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(120, 94, 62, 0.12) 1px, transparent 1.5px);
  background-size: 26px 26px;
}

button, input, textarea, select { font: inherit; }
button { letter-spacing: 0; }

.obang-bar { display: flex; height: 10px; }
.obang-bar span { flex: 1; }
.obang-bar .red { background: var(--red); }
.obang-bar .yellow { background: var(--yellow); }
.obang-bar .green { background: var(--green); }
.obang-bar .blue { background: var(--blue); }
.obang-bar .cream { background: #efe4d2; }

.site-header {
  position: relative;
  z-index: 1;
  text-align: left;
  padding: 2px 0 4px;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 0;
}

.eyebrow, .section-kicker {
  margin: 0 0 6px;
  color: var(--red);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-header h1 {
  margin: 0;
  font-family: "Gowun Batang", serif;
  color: #7b6a59;
  font-size: clamp(2.05rem, 2.65vw, 3.1rem);
  font-weight: 700;
  line-height: 0.98;
}
/* 상표 표시. ™ 는 등록하지 않은 표장에도 쓸 수 있다(® 는 실제 등록이 필요).
   제목에 바싹 붙여 작게 올린다. */
.site-header h1 .tm {
  font-size: 0.3em;
  vertical-align: super;
  font-weight: 400;
  margin-left: 2px;
  letter-spacing: 0;
}
/* 베타 표. 눌러서 의견을 보내는 창구를 겸한다 — 지금까지는 체험자가 무언가
   겪어도 알려줄 데가 없었다. 끝나는 날짜는 적지 않는다. 그 날이 지나면 틀린
   말이 되고, 고치는 걸 잊으면 "끝난 서비스" 로 보인다. */
.site-header h1 .beta-tag {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 9px;
  border: 1px solid #d8c3aa;
  border-radius: 999px;
  background: #fffaf3;
  color: #a8763f;
  font-family: -apple-system, "Malgun Gothic", sans-serif;
  font-size: clamp(11px, 0.3em, 15px);
  font-weight: 700;
  letter-spacing: 0.06em;
  vertical-align: middle;
  text-decoration: none;
  white-space: nowrap;
}
.site-header h1 .beta-tag:hover,
.site-header h1 .beta-tag:focus {
  background: #a8763f;
  border-color: #a8763f;
  color: #fff;
}

.subtitle {
  max-width: 720px;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: clamp(0.92rem, 1.02vw, 1.12rem);
  font-weight: 700;
}

.wrap {
  position: relative;
  z-index: 1;
  width: min(1640px, calc(100% - 24px));
  margin: 10px auto 48px;
}

.top-layout {
  display: grid;
  /* 오른쪽(참여자 입력)이 다섯 칸이라 왼쪽에서 폭을 나눠 준다.
     오른쪽 최소값(1000px)은 입력줄 다섯 칸이 안 잘리는 실측치다.
     이걸 못 박지 않으면 왼쪽이 필요 이상으로 가져가 입력줄이 넘친다.
     왼쪽은 auto 라 부제 한 줄(318px, 글자는 화면 따라 커진다)만큼만 잡고
     나머지는 오른쪽이 가져간다. 고정폭으로 두면 큰 화면에서 부제가 접힌다. */
  grid-template-columns: minmax(340px, auto) minmax(1000px, 1fr);
  gap: 28px;
  align-items: end;
  margin: 0 8px 6px;
}

/* 참여자 줄이 접혀 요약만 보일 때는 오른쪽 칸을 내용만큼만 잡는다.
   오른쪽 최소값(902/1000px)은 이름·성별·국가·나이·버튼이 다 들어가는 '입력 줄'
   기준으로 잰 값이라, 요약 줄에도 그대로 걸면 안 쓰는 폭을 붙들고 있게 된다.
   그러면 왼쪽 부제가 눌려 한 글자도 못 늘리고, 요약 줄 안은 텅 빈다.
   (1600px 화면 실측: 왼쪽 362px·요약 1155px·그 안 빈 곳 864px
    → 왼쪽 856px·요약 476px·빈 곳 없음)

   :has() 를 못 읽는 옛 브라우저에서는 지금까지의 모습 그대로다. */
@supports selector(:has(*)) {
  .top-layout:has(#participantPanel.hidden) {
    grid-template-columns: minmax(340px, 1fr) auto;
  }
  .top-layout:has(#participantPanel.hidden) #participantSummary {
    justify-self: end;
  }
}

.profile-zone {
  align-self: end;
}

/* 눈썹 줄 — 왼쪽은 소개 문구, 오른쪽 끝은 홈 단추.
   시뮬레이션 안에서 홈페이지로 나갈 길이 아예 없었다. 참여자 정보 줄은
   접히면 사라지므로, 어느 단계에서나 남아 있는 이 줄에 둔다. */
.eyebrow-row {
  display: flex; align-items: center; gap: 12px;
}
.eyebrow-row .eyebrow { flex: 1 1 auto; }
.home-btn {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 13px; margin: 0 0 10px;
  border: 1px solid #d8c3aa; border-radius: 999px;
  background: #fffaf3; color: #8a7a6b;
  font-size: 12px; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.home-btn:hover, .home-btn:focus { background: #a8763f; border-color: #a8763f; color: #fff; }

.profile-zone .eyebrow {
  color: #8a7a6b;
  text-align: left;
  font-size: clamp(0.76rem, 0.9vw, 1rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 0 0 10px 12px;
}

.profile-zone .eyebrow span {
  color: var(--red);
  font-weight: 800;
}

.dev-stage-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 8px 6px;
  padding: 3px 10px;
  border: 1px solid rgba(215, 195, 170, .7);
  border-radius: 8px;
  background: rgba(255, 250, 243, .72);
  color: var(--muted);
  font-size: .86rem;
}

.dev-stage-tabs span {
  margin-right: 2px;
  font-weight: 900;
  color: #7a4224;
}

.dev-stage-tabs button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(184, 119, 69, .38);
  border-radius: 8px;
  background: var(--btn-soft);
  color: var(--ink);
  cursor: pointer;
  font-weight: 800;
}

.dev-stage-tabs button:hover {
  border-color: rgba(184, 119, 69, .75);
  background: var(--btn-soft-hover);
}

.dev-stage-tabs button.is-active {
  border-color: rgba(184, 119, 69, .82);
  background: #fff7e9;
  box-shadow: inset 0 0 0 1px rgba(184, 119, 69, .22);
}

/* Stage group (1단계/2단계/3단계 + 하위 펼침) */
.stage-group {
  display: none;
  align-items: center;
  position: relative;
}
.stage-group.group-visible {
  display: flex;
}
.stage-group-btn {
  min-height: 30px;
  padding: 0 11px;
  border: 1.5px solid rgba(184, 119, 69, .52);
  border-radius: 8px;
  background: rgba(255, 240, 210, .9);
  color: #7a4224;
  cursor: pointer;
  font-weight: 900;
  font-size: .82rem;
  white-space: nowrap;
  transition: background .14s, border-color .14s;
}
.stage-group-btn:hover {
  background: #ffe8c0;
  border-color: rgba(184, 119, 69, .78);
}
.stage-group-btn.is-active {
  background: #ffd98a;
  border-color: rgba(184, 119, 69, .85);
}
.stage-group.is-open .stage-group-btn {
  border-radius: 8px;
}
.stage-group-sub {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 4px;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 200;
  min-width: 100%;
  border: 1.5px solid rgba(184, 119, 69, .52);
  border-radius: 8px;
  background: rgba(255, 250, 243, .97);
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
  white-space: nowrap;
}
.stage-group.is-open .stage-group-sub {
  display: flex;
}
.stage-group-sub button {
  min-height: 28px;
  padding: 2px 10px;
  border: 1px solid rgba(184, 119, 69, .3);
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-size: .8rem;
  font-weight: 700;
  text-align: left;
}
.stage-group-sub button:hover {
  background: rgba(255, 200, 120, .25);
  border-color: rgba(184, 119, 69, .6);
}
.stage-group-sub button.is-active {
  background: #fff7e9;
  border-color: rgba(184, 119, 69, .82);
  box-shadow: inset 0 0 0 1px rgba(184, 119, 69, .22);
}

.panel, .canvas-shell, .guide-bar, .phase-block, .certificate {
  background: rgba(255, 250, 243, 0.94);
  border: 1px solid rgba(215, 195, 170, 0.72);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.intro-panel { padding: clamp(24px, 4vw, 42px); }
.intro-panel h2 {
  max-width: 820px;
  margin: 0;
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1.2;
  letter-spacing: 0;
}

.lead {
  max-width: 760px;
  margin: 14px 0 28px;
  color: var(--muted);
  font-size: 1rem;
}

.intro-fields {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 14px;
}

.field span {
  display: block;
  margin-bottom: 5px;
  font-weight: 800;
}

.field input, .field select, .step-card input, .step-card textarea {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 10px 12px;
}

.field input:focus, .field select:focus, .step-card input:focus, .step-card textarea:focus {
  outline: 3px solid rgba(221, 162, 58, 0.28);
  border-color: var(--yellow);
}

.actions { display: flex; justify-content: flex-end; margin-top: 22px; }

.btn, .tool-btn {
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 800;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.btn {
  min-height: 42px;
  padding: 0 22px;
}

.btn:hover, .tool-btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--btn-dark); color: var(--paper); box-shadow: 0 10px 22px rgba(51, 45, 39, 0.18); }
.btn-primary:hover { background: var(--btn-dark-hover); }
.btn-secondary { background: #f0e8d8; color: var(--ink); border: 1.5px solid var(--line); }
.btn-secondary:hover { background: #e4d8c4; }
.btn-ghost { background: transparent; color: var(--muted); border: 1.5px solid var(--line); }

@keyframes profileTargetPulse {
  0%, 100% {
    transform: translateY(0);
    box-shadow: 0 0 0 4px rgba(221, 162, 58, 0.22), 0 10px 22px rgba(51, 45, 39, 0.18);
  }
  50% {
    transform: translateY(-1px);
    box-shadow: 0 0 0 8px rgba(221, 162, 58, 0.08), 0 16px 28px rgba(51, 45, 39, 0.24);
  }
}

.hidden { display: none !important; }

.canvas-shell { padding: 12px 14px 14px; }

/* ── Planning mini-mode layout ─────────────────────────────────── */
/* ── 미니모드 레이아웃 ── */
#canvasArea.planning-mini {
  position: relative;
  min-height: calc(100vh - 200px);
  margin: 0 8px 10px;
  background: rgba(255, 250, 243, 0.94);
  border: 1px solid rgba(215, 195, 170, 0.72);
  border-radius: 8px;
  box-shadow: var(--shadow);
}
/* canvas-shell은 mini-mode에서 hidden=true로 숨겨짐 */

/* 세 영역: 인라인 스타일로 position/size 지정됨 */
#canvasRegion {
  box-sizing: border-box;
  background: rgba(255,255,255,0.5);
  border-radius: 8px;
}
#cardSlotRegion {
  box-sizing: border-box;
}
#canvasArea.planning-mini #planningRight {
  box-sizing: border-box;
  overflow: visible;
}
#miniCanvasHolder {
  position: relative;
  overflow: hidden;
}
#canvasArea.planning-mini .canvas-wrap > *:not(canvas) { display: none !important; }
#canvasArea.planning-mini .canvas-wrap {
  transform-origin: top left;
  position: absolute;
  top: 0;
  left: 0;
}
#canvasArea.planning-mini #lifeCanvas {
  width: 1100px;
  height: 440px;
  min-height: 0;
}
/* 카드 그리드 */
#planningCardGrid {
  flex: 1;
  display: flex;
  flex-direction: row;
  gap: 6px;
  width: 100%;
}
.pcg-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.pcg-col-label {
  font-size: .72rem;
  color: #8a6a40;
  font-weight: 600;
  text-align: center;
  padding: 2px 0;
  border-bottom: 1px solid #e0d0b0;
  margin-bottom: 2px;
}
.pcg-slot {
  min-height: 56px;
  border: 1.5px dashed #c8a87a;
  border-radius: 8px;
  background: #fdf8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .68rem;
  color: #b0906a;
  text-align: center;
  padding: 4px;
  overflow: hidden;
  position: relative;
}
.pcg-slot.has-card {
  border-style: solid;
  border-color: #c8963c;
  background: #fffdf8;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0;
}
/* 슬롯 안 카드 컴팩트 오버라이드 */
.pcg-slot .dream-bubble {
  position: static !important;
  left: auto !important; top: auto !important;
  right: auto !important; bottom: auto !important;
  transform: none !important;
  opacity: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  animation: none !important;
  font-size: .72rem;
  border: none !important;
  border-radius: 7px;
  box-shadow: none !important;
  margin: 0 !important;
  max-height: 120px;
  overflow-y: auto;
}
/* 라이프스타일·제론테크 카드: scale 축소 썸네일 */
.pcg-slot .lifestyle-card,
.pcg-slot .gerontech-card {
  position: static !important;
  left: auto !important; top: auto !important;
  right: auto !important; bottom: auto !important;
  animation: none !important;
  opacity: 1 !important;
  margin: 0 !important;
  box-shadow: none !important;
  transform-origin: top center !important;
  /* 편집 화면과 같은 560px로 렌더한 뒤 축소한다. PNG 원본(1643px)으로 렌더하면
     글자(고정 rem·px 단위)만 따라 커지지 않아 왼쪽 위에 작게 뭉친다. */
  transform: scale(0.340) !important;   /* 축소 후 190×129px — 슬롯 130px 안에 통째로 들어간다 */
  width: 560px !important;
  height: 379px !important;             /* 560 ÷ 1.4788 (카드 원본 가로세로비) */
  overflow: hidden;
  flex-shrink: 0;
}
/* 카드가 슬롯 안에 통째로 들어가도록 한다. 조건: 축소 카드 높이(129) ≤ 슬롯 높이(130). */
.pcg-slot:has(.lifestyle-card),
.pcg-slot:has(.gerontech-card) {
  height: 130px;
  overflow: hidden;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
/* ── 미니모드 우측 패널 안 dreamBubble: static flow로 전환 ── */

.pcg-slot .mini-slot-preview {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  pointer-events: none;
}
.pcg-slot .mini-dream-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 8px 10px;
  border-radius: 7px;
  background: linear-gradient(180deg, #fff3a6 0%, #ffe37e 100%);
  color: #6f4b1d;
  font-weight: 700;
  line-height: 1.25;
  overflow: hidden;
}
.pcg-slot .mini-data-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 86px;
  padding: 8px;
  border: 1px solid #d9bd85;
  background: #fffaf0;
  color: #79562a;
  font-size: .72rem;
  line-height: 1.2;
}
.pcg-slot .mini-data-card strong {
  font-size: .78rem;
  color: #5f3f1e;
}
.pcg-slot .mini-data-card span {
  color: #a0713a;
}
#planningRight > .dream-bubble {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: calc(100% - 16px) !important;
  max-width: 100% !important;
  margin: 8px auto !important;
  animation: none !important;
  opacity: 1 !important;
  flex-shrink: 0;
}
/* Dream bubble uses the same edge and corner interaction as the guide panel. */
#planningRight > .dream-bubble {
  --dream-mini-dx: 0px;
  --dream-mini-dy: 0px;
  touch-action: none;
}
#planningRight > .dream-bubble.mini-interactive {
  transform: translate(var(--dream-mini-dx), var(--dream-mini-dy)) !important;
}
#planningRight > .dream-bubble .dream-resize-handle {
  display: none;
}

/* ── 미니모드 우측 패널 안 라이프스타일 카드: static flow ── */
/* Dream bubble input styling for dream planning/editing. */
#planningRight > .dream-bubble {
  width: min(520px, calc(100% - 16px)) !important;
  min-height: 76px !important;
  padding: 10px 18px !important;
  border-radius: 18px !important;
}
#planningRight > .dream-bubble .dream-bubble-input {
  min-height: 50px;
  padding: 8px 14px;
  border: 1px solid rgba(184, 119, 69, .34);
  border-radius: inherit;
  background: transparent;
  box-sizing: border-box;
}
#planningRight > .dream-bubble .dream-bubble-input:focus {
  border-radius: 0;
  background: #fff;
}
#planningRight > .dream-bubble.dream-editing .dream-bubble-input {
  border-radius: 0;
  background: #fff;
}

#planningRight > .lifestyle-card,
#planningRight > .gerontech-card {
  position: relative !important;
  left: auto !important; top: auto !important;
  right: auto !important; bottom: auto !important;
  transform: none !important;
  width: 460px !important;
  max-width: calc(100% - 16px) !important;
  margin: 8px auto !important;
  animation: none !important;
  opacity: 1 !important;
  height: auto !important;
  z-index: 1;
}
/* ── 미니모드 가이드 창: absolute로 자유 이동 ── */
/* 미니모드에서도 라이프스타일 카드와 가이드 창의 폭을 맞춘다. */
#planningRight > .lifestyle-card {
  width: min(560px, calc(100% - 16px)) !important;
}
/* 미니모드 가이드 창 — 세 단계(꿈/라이프스타일/제론테크) 모두 같은 규칙을 쓴다.
   카드와 똑같이 흐름 배치(relative)라서 "카드 → 가이드" 순으로 쌓이고,
   좌표 계산이 필요 없다. 끌기 시작할 때만 .panel-free 가 absolute 로 띄운다.
   (예전에는 꿈은 인접 형제 선택자로, 제론테크는 컨테이너 클래스로 각각
    relative 를 되찾고 라이프스타일만 absolute + JS 좌표였다. 그 불일치가
    "가이드 창이 튄다 / 카드를 덮는다" 증상의 뿌리였다.) */
#planningRight .step-panel.mini-float {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: min(560px, calc(100% - 16px)) !important;
  max-width: calc(100% - 16px) !important;
  margin: 8px auto !important;
  flex: none !important;
  min-width: 0;
  overflow: hidden;
  min-height: 120px;
  z-index: 1;
  touch-action: none;
}

/* (꿈 전용 override 는 위 공통 규칙으로 흡수되어 삭제함) */
/* ── 제론테크 mini 배치: 라이프스타일 카드와 같은 중앙 세로 정렬 ── */
#planningRight.gerontech-mini-layout {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px;
  overflow: visible;
  padding: 8px;
}
#planningRight.gerontech-mini-layout > .gerontech-card {
  width: min(560px, calc(100% - 16px)) !important;
  max-width: calc(100% - 16px) !important;
  margin: 8px auto !important;
  flex: none !important;
}
/* (제론테크 전용 override 도 위 공통 규칙으로 흡수되어 삭제함) */
/* 미니모드 오른쪽 칸의 위아래는 이 order 가 정한다 — 놓이는 차례가 아니다.
   stepPanel 과 카드를 각각 따로 appendChild 하는 자리가 둘이라, 나중에
   불린 쪽이 아래로 갔다. 그래서 그릴 때마다 — F5 한 번에도 — 카드와
   가이드 창의 위아래가 뒤집혔다. 차례가 아니라 값으로 정하면 뒤집힐 수 없다.
   카드가 위, 가이드 창이 아래다. */
#planningRight > .dream-bubble,
#planningRight > .lifestyle-card,
#planningRight > .gerontech-card { order: 1; }
#planningRight > .step-panel { order: 2; }

/* 겹칠 때는 가이드 창이 언제나 위다.
   .card-front 가 카드와 가이드 창에 둘 다 z-index:10 을 주는데, 같은 값이면
   다시 DOM 차례가 이긴다. 그래서 가끔 가이드 창이 카드 뒤로 숨었다. */
#planningRight > .step-panel { z-index: 6; }
#planningRight > .step-panel.card-front { z-index: 11 !important; }

/* ── 우측 패널 ── */
.planning-right {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 8px 12px;
  overflow-y: auto;
  max-height: 90vh;
}
/* 스텝 패널: 남은 공간 채움 (mini-float 제외) */
.planning-right .step-panel:not(.mini-float) {
  position: static !important;
  left: auto !important; top: auto !important;
  right: auto !important; bottom: auto !important;
  transform: none !important;
  width: auto !important;
  flex: 1;
  min-height: 200px;
}
#planningScoreTag { position: absolute; top: 6px; left: 6px; background: rgba(255,250,243,.94); border: 1.5px solid rgba(184,119,69,.55); border-radius: 7px; padding: 4px 8px; font-size: .72rem; z-index: 20; white-space: nowrap; }
.participant-panel {
  display: grid;
  /* 이름 · 성별 · 국가 · 나이 · 버튼 = 다섯 칸.
     칸 수와 자식 수가 어긋나면 마지막 것이 다음 줄로 떨어진다.

     최소값은 각 칸의 가장 긴 내용을 실측해서 정했다.
       이름 "Woo Joung Shim" / 성별 "응답 안 함" / 국가 "기타 아시아" / 나이 "100"
     고르면 끝인 셀렉트는 잘리면 무엇을 골랐는지 알 수 없으므로 넉넉해야 하고,
     남는 폭은 어느 칸도 살찌우지 않고 마지막 칸(버튼 앞)이 받는다.
     그래서 화면이 넓어져도 입력칸 크기는 그대로다. */
  grid-template-columns:
    minmax(209px, 0.3fr) minmax(200px, 0.3fr) minmax(252px, 0.3fr)
    minmax(110px, 0.1fr) minmax(auto, 1fr);
  gap: 10px;
  align-items: center;
  margin-bottom: 0;
  padding: 10px 12px;
  border: 1px solid rgba(215, 195, 170, 0.58);
  border-radius: 8px;
  background: rgba(255, 250, 243, 0.78);
  box-shadow: 0 8px 18px rgba(53, 45, 36, 0.06);
}

.participant-panel .field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  margin: 0;
}

.participant-panel .field span {
  margin: 0;
  white-space: nowrap;
}

.participant-panel .field input,
.participant-panel .field select {
  min-height: 42px;
  padding: 8px 12px;
}

.profile-done {
  min-width: 104px;
  position: relative;
}

/* ── 프로필 버튼 그룹 ── */
.profile-btns {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-self: end;   /* 남는 폭은 버튼 앞에 두고 버튼은 오른쪽 끝에 */
}

/* ── 플래너 연습 버튼 ── */
.btn-practice {
  min-height: 42px;
  padding: 0 14px;
  font-size: 14px;
  white-space: nowrap;
  background: var(--green);
  color: #fff;
  box-shadow: 0 6px 14px rgba(47, 147, 98, 0.24);
}
.btn-practice:hover { background: #237a50; transform: translateY(-1px); }

/* ── 플래너 연습 오버레이 / 모달 ── */
.practice-overlay {
  position: fixed;
  inset: 0;
  background: rgba(30, 22, 15, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 900;
  padding: 16px;
  backdrop-filter: blur(2px);
}
.practice-overlay.hidden { display: none; }

body.practice-open { overflow: hidden; }

.practice-modal {
  background: var(--paper);
  border-radius: 18px;
  max-width: 720px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 28px 32px 24px;
  position: relative;
  box-shadow: 0 20px 60px rgba(30, 22, 15, 0.25);
  border: 1px solid var(--line);
}

.practice-modal h2 {
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}

.practice-desc {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 22px;
}

.practice-close {
  position: absolute;
  top: 14px;
  right: 18px;
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  padding: 4px 8px;
  cursor: pointer;
  color: var(--muted);
  border-radius: 6px;
}
.practice-close:hover { background: var(--paper-deep); color: var(--ink); }

.practice-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}

.practice-group-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.practice-tag {
  background: var(--paper-deep);
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.02em;
}

.practice-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.p-opt-btn {
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 8px;
  padding: 6px 11px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: var(--ink);
  transition: border-color 120ms, background 120ms, color 120ms;
  white-space: nowrap;
  font-family: inherit;
}
.p-opt-btn:hover { border-color: var(--btn-warm); background: var(--btn-soft); }
.p-opt-btn.selected {
  background: var(--btn-warm);
  border-color: var(--btn-warm);
  color: #fff;
  box-shadow: 0 4px 12px rgba(244, 152, 63, 0.3);
}

.practice-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  gap: 12px;
}

.btn-reshuffle {
  background: none;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: var(--muted);
  font-family: inherit;
  transition: border-color 120ms, background 120ms;
}
.btn-reshuffle:hover { border-color: var(--btn-warm); background: var(--btn-soft); color: var(--ink); }

.profile-done.attention-target {
  animation: profileTargetPulse 1.6s ease-in-out infinite;
  box-shadow: 0 0 0 4px rgba(221, 162, 58, 0.28), 0 14px 26px rgba(51, 45, 39, 0.24);
}

.participant-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 0;
  min-height: 64px;
  padding: 10px 12px;
  border: 1px solid rgba(215, 195, 170, 0.58);
  border-radius: 8px;
  background: rgba(255, 250, 243, 0.78);
  color: var(--muted);
  font-size: 0.92rem;
  box-shadow: 0 8px 18px rgba(53, 45, 36, 0.06);
}

.participant-summary span {
  font-weight: 800;
  color: var(--ink);
}

.participant-summary .flow-debug {
  margin-left: auto;
  padding: 4px 9px;
  border: 1px solid rgba(190, 113, 48, 0.35);
  border-radius: 7px;
  background: rgba(255, 248, 236, 0.9);
  color: #9a5b2f;
  font: 800 0.84rem/1.2 Consolas, "Courier New", monospace;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.participant-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.top-layout.login-mode {
  grid-template-columns: 1fr;
}

.profile-zone.login-gate {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 80px 0 60px;
}

.profile-zone.login-gate .eyebrow {
  text-align: center;
  margin: 0 0 10px;
}

.login-gate-box {
  margin-top: 18px;
  width: 100%;
  max-width: 480px;
  padding: 28px 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  text-align: center;
}

.login-gate-box p {
  font-weight: 700;
  margin: 0 0 16px;
}

.login-gate-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.login-gate-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.mini-btn {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--btn-control-border);
  border-radius: 8px;
  background: var(--btn-soft);
  color: var(--btn-control-text);
  cursor: pointer;
  font-weight: 800;
}

.mini-btn:hover,
.dev-stage-tabs button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(83, 48, 25, .08);
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 4px 0 12px;
}

.tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  background: #fff;
  border: 1.5px solid var(--line);
  color: var(--ink);
}

.tool-btn.active { color: #fff; border-color: transparent; }
.tool-btn[data-curve="0"].active { background: var(--body); }
.tool-btn[data-curve="1"].active { background: var(--mind); }
.tool-btn[data-curve="2"].active { background: var(--social); }
.tool-btn.ghost.active { background: var(--yellow); color: var(--ink); }
.dot, .guide-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.dot.body, .guide-dot.body { background: var(--body); }
.dot.mind, .guide-dot.mind { background: var(--mind); }
.dot.social, .guide-dot.social { background: var(--social); }

.live-guide {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(760px, 100%);
  min-height: 46px;
  margin: 0 auto 12px;
  padding: 10px 16px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
}

.canvas-wrap {
  position: relative;
  z-index: 2;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  overflow: visible;
  isolation: isolate;
}

.planning-preview-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.award-group {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
  user-select: none;
}

.planning-preview-layer .planning-preview-item {
  position: absolute !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* awardDisplay 드래그 대상(꿈말풍선/카드)은 클릭/드래그 가능하도록 예외 처리 */
.planning-preview-layer .planning-preview-item[data-preview-round] {
  pointer-events: auto !important;
}

/* awardDisplay 세트(꿈말풍선+카드2개) 크기 조절 핸들 */
.award-resize-handle {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: var(--btn-warm);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  cursor: nwse-resize;
  z-index: 4;
  touch-action: none;
}
.award-resize-handle:hover {
  background: var(--btn-warm-hover);
}

/* 비활성 세트 크기 전환 버튼 (소→중→대) */
/* 꿈말풍선 우측 둥근 호 안에 들어가는 원형 버튼 (JS가 28px 기준으로 위치를 잡는다) */
.preview-zoom-btn {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid #d4a96a;
  background: rgba(255, 248, 238, 0.95);
  color: #7a4f20;
  font-size: 15px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  transition: background 0.14s, border-color 0.14s;
  user-select: none;
}
.preview-zoom-btn:hover {
  background: #fff2df;
  border-color: #c08030;
}
.preview-zoom-btn:active {
  transform: translateY(1px) !important;
}

.planning-preview-layer .planning-preview-item button,
.planning-preview-layer .planning-preview-item [contenteditable],
.planning-preview-layer .planning-preview-item input,
.planning-preview-layer .planning-preview-item textarea {
  pointer-events: none !important;
}

.profile-guide-connector {
  position: absolute;
  z-index: 5;
  height: 2px;
  background: #b87745;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  pointer-events: none;
  transform-origin: left center;
}

.profile-guide-connector::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  width: 11px;
  height: 11px;
  border-top: 2px solid #b87745;
  border-right: 2px solid #b87745;
  transform: translateY(-50%) rotate(45deg);
}

#lifeCanvas {
  display: block;
  width: 100%;
  height: auto;
  min-height: 330px;
  border-radius: 6px;
  cursor: crosshair;
  touch-action: none;
}

.step-panel {
  position: absolute;
  z-index: 4;
  top: 18px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: min(540px, 46%);
  padding: 14px 16px;
  border: 2px solid #b87745;
  border-radius: 14px;
  background: #fffaf3;   /* 가이드 창 공통 배경 (변화 보기 기준) */
  color: var(--ink);
  box-shadow: 0 14px 34px rgba(78, 49, 29, 0.16);
  pointer-events: auto;
  font-size: 1rem;      /* 가이드 창 본문 공통 크기 */
  line-height: 1.4;     /* 가이드 창 본문 공통 줄간격 */
}

.step-panel.guide-right {
  left: auto;
  right: 40px;
  transform: none;
  width: min(560px, 43%);
}

.step-panel.future-guide-panel {
  width: min(380px, 32%);
}

.step-panel.future-guide-panel .step-panel-resize-handle:hover,
.step-panel.future-guide-panel .step-panel-resize-corner:hover {
  background: rgba(184,119,69,.35);
}

/* ── 패널 접기/펼치기 & 리사이즈 ── */
#planningRight .step-panel.mini-float #stepPanelContent {
  overflow-y: auto;
  max-height: 100%;
  padding-bottom: 14px;
}
.step-panel-resize-handle,
.step-panel-resize-corner {
  position: absolute;
  z-index: 21;
  background: transparent;
  transition: background .15s;
  touch-action: none;
}
.step-panel-resize-handle:hover,
.step-panel-resize-handle.dragging,
.step-panel-resize-corner:hover,
.step-panel-resize-corner.dragging {
  background: rgba(184,119,69,.35);
}
.step-panel-resize-handle[data-dir="e"] {
  top: 14px;
  right: 0;
  bottom: 14px;
  width: 8px;
  cursor: ew-resize;
  border-radius: 4px;
}
.step-panel-resize-handle[data-dir="s"] {
  right: 14px;
  bottom: 0;
  left: 14px;
  height: 8px;
  cursor: ns-resize;
  border-radius: 4px;
}
.step-panel-resize-corner[data-dir="se"] {
  right: 0;
  bottom: 0;
  width: 16px;
  height: 16px;
  cursor: nwse-resize;
  border-radius: 4px;
}
.step-panel.guide-left {
  left: 56px;
  right: auto;
  transform: none;
  width: min(560px, 43%);
}


#stepPanelContent {
  padding-right: 8px;
}

.step-panel.complete {
  border-color: var(--green);
  background: #fffaf3;   /* 항상 review·longevity·adjust 규칙이 덮지만 기준값으로 맞춰 둔다 */
}

/* 커브 작성 완료(review) 창 활동별 색상 (complete 규칙 override) */
.step-panel.complete.review-body {
  background: #fff8f8;   /* 색조 유지, 강도는 #fffaf3 수준 */
  border-color: #d84b4b;
}
.step-panel.complete.review-body .step-panel-title {
  color: #d84b4b;
}
.step-panel.complete.review-body .step-panel-resize-handle:hover,
.step-panel.complete.review-body .step-panel-resize-corner:hover {
  background: rgba(216,75,75,.35);
}

.step-panel.complete.review-mind {
  background: #f5faff;   /* 색조 유지, 강도는 #fffaf3 수준 */
  border-color: #3f7fc2;
}
.step-panel.complete.review-mind .step-panel-title {
  color: #3f7fc2;
}
.step-panel.complete.review-mind .step-panel-resize-handle:hover,
.step-panel.complete.review-mind .step-panel-resize-corner:hover {
  background: rgba(63,127,194,.35);
}

.step-panel.complete.review-social {
  background: #f4fbf7;   /* 색조 유지, 강도는 #fffaf3 수준 */
  border-color: #2f9362;
}
.step-panel.complete.review-social .step-panel-title {
  color: #2f9362;
}
.step-panel.complete.review-social .step-panel-resize-handle:hover,
.step-panel.complete.review-social .step-panel-resize-corner:hover {
  background: rgba(47,147,98,.35);
}

.step-panel.longevity-panel {
  width: min(560px, 50%);
  top: 18px;
  background: #fffaf3 !important;
  border-color: #b87745 !important;
}
.step-panel.complete.longevity-panel .step-panel-title {
  color: #7a4224;
}

/* 활동별 longevity-panel 색상 (complete 규칙 override) */
.step-panel.longevity-panel.longevity-body {
  background: #fff8f8 !important;
  border-color: #d84b4b !important;
}

.step-panel.longevity-panel.longevity-body .step-panel-resize-handle:hover,
.step-panel.longevity-panel.longevity-body .step-panel-resize-corner:hover {
  background: rgba(216,75,75,.35);
}

.step-panel.longevity-panel.longevity-mind {
  background: #f5faff !important;
  border-color: #3f7fc2 !important;
}

.step-panel.longevity-panel.longevity-mind .step-panel-resize-handle:hover,
.step-panel.longevity-panel.longevity-mind .step-panel-resize-corner:hover {
  background: rgba(63,127,194,.35);
}

.step-panel.longevity-panel.longevity-social {
  background: #f4fbf7 !important;
  border-color: #2f9362 !important;
}

.step-panel.longevity-panel.longevity-social .step-panel-resize-handle:hover,
.step-panel.longevity-panel.longevity-social .step-panel-resize-corner:hover {
  background: rgba(47,147,98,.35);
}

.step-panel.profile-guide-panel {
  top: 42%;
  width: min(560px, 44%);
  transform: translate(-50%, -50%);
}

.step-panel.profile-guide-panel .step-panel-resize-handle:hover,
.step-panel.profile-guide-panel .step-panel-resize-corner:hover {
  background: rgba(184,119,69,.35);
}

.step-panel.mind-adjust-panel {
  width: min(560px, 48%);
  top: 18px;
  background: #f5faff;
  border-color: var(--mind);
}

.step-panel.body-adjust-panel {
  width: min(560px, 48%);
  top: 18px;
  background: #fff8f8;
  border-color: var(--body);
}

.step-panel.social-adjust-panel {
  width: min(560px, 50%);
  top: 18px;
  background: #f4fbf7;
  border-color: var(--social);
}

.step-panel.planning-intro-panel {
  top: 48px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: min(640px, 54%);
  background: #fffaf3;
  border-color: #b87745;
}

/* 1단계 시작 버튼 */
.step-panel.planning-intro-panel .step-panel-action {
  border: 2px solid #b87745;
  background: #fff0df;
  color: #4d392b;
}

.step-panel.planning-intro-panel .step-panel-action:hover {
  background: #ffffff;
}

.step-panel.planning-intro-panel .step-panel-resize-handle:hover,
.step-panel.planning-intro-panel .step-panel-resize-corner:hover {
  background: rgba(184,119,69,.35);
}

.step-panel.dream-guide-panel {
  top: 50%;
  left: 52px;
  right: auto;
  transform: translateY(-50%);
  width: min(560px, 36%);
  padding: 20px 20px 5px;
  border: 2px solid #b66f34;
  border-radius: 14px;
  background: #fffaf3;
  box-shadow: none;
  font-size: 1rem;      /* 가이드 창 본문 공통 크기 */
  z-index: 12;
}


.step-panel-title {
  margin-bottom: 8px;
  font-weight: 800;
  color: #7a4224;
  font-size: 1.02em;
}

.step-panel.complete .step-panel-title {
  color: var(--green);
}

.step-panel.mind-adjust-panel .step-panel-title {
  color: var(--mind);
}

.step-panel.body-adjust-panel .step-panel-title {
  color: var(--body);
}

.step-panel.social-adjust-panel .step-panel-title {
  color: var(--social);
}

.step-panel p {
  margin: 0 0 3px;
  line-height: 1.4;     /* 가이드 창 본문 공통 줄간격 */
}

.step-panel ul {
  margin: 8px 0;
  padding-left: 20px;
}

.step-panel li {
  margin: 6px 0;   /* 가이드 창 목록 항목 사이 공통 간격 (인접 마진 상쇄로 6px) */
}

.dream-narrative {
  background: rgba(182, 111, 52, 0.07);
  border-left: 3px solid #b66f34;
  border-radius: 4px;
  padding: 8px 12px;
  margin: 0 0 12px;
  font-size: 0.97em;
  line-height: 1.6;
  color: #5a3010;
}

.dream-sentences {
  margin: 0 0 12px;
  padding-left: 18px;
}

.dream-sentences li {
  margin: 2px 0;
  font-style: italic;
  color: #7a4224;
}

.dream-gerontech-bridge {
  background: rgba(255, 255, 255, 0.65);
  border: 1px dashed #c8956a;
  border-radius: 10px;
  padding: 6px 12px;
  margin: 0 0 10px;
  font-size: 0.93em;
  color: #6a4020;
}

.dream-gerontech-bridge p {
  margin: 2px 0;
}

.dream-gerontech-bridge p::before {
  content: "→ ";
  color: #b66f34;
}

.step-note {
  color: var(--muted);
  font-weight: 700;
}

.step-panel-action {
  margin-top: 10px;
  min-height: 40px;
  padding: 0 24px;
  border-radius: 999px;
  font-size: 0.98rem;
}

.dream-guide-action {
  display: block;
  margin: 10px 0 0 auto;
  min-width: 270px;
  min-height: 40px;
  padding: 0 26px;
  border: 2px solid #b66f34;
  border-radius: 999px;
  background: #fff0df;
  color: #4d392b;
  font-size: 1.1rem;   /* 가이드 창 버튼 공통 크기 */
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(184, 111, 52, .08);
  transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.step-panel.dream-guide-panel .step-panel-resize-handle:hover,
.step-panel.dream-guide-panel .step-panel-resize-corner:hover {
  background: rgba(182,111,52,.35);
}

.dream-guide-action:hover {
  background: #ffffff;
  border-color: var(--btn-warm);
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(184, 111, 52, .12);
}

.level-bubble {
  position: absolute;
  z-index: 5;
  width: 324px;
  padding: 14px 16px;
  border: 2px solid #b94d58;
  border-radius: 10px;
  background: var(--bubble-bg, #ffe1e5);
  color: var(--ink);
  box-shadow: 0 12px 30px rgba(93, 44, 48, 0.16);
  pointer-events: none;
}

.bubble-connector {
  position: absolute;
  z-index: 4;
  height: 2px;
  border-radius: 999px;
  background: var(--bubble-border, #2f5f9e);
  box-shadow: 0 1px 8px rgba(47, 95, 158, 0.18);
  opacity: 0.82;
  pointer-events: none;
  transform-origin: 0 50%;
}

.bubble-connector::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--bubble-border, #2f5f9e);
  border-top: 2px solid var(--bubble-border, #2f5f9e);
  transform: translateY(-50%) rotate(45deg);
}

.level-bubble::after {
  content: "";
  position: absolute;
  left: var(--bubble-tail-left, 24px);
  width: 20px;
  height: 20px;
  background: var(--bubble-bg, #ffe1e5);
}

.level-bubble[data-tail="bottom"]::after {
  bottom: -13px;
  border-right: 2px solid var(--bubble-border, #b94d58);
  border-bottom: 2px solid var(--bubble-border, #b94d58);
  transform: rotate(45deg);
}

.level-bubble[data-tail="top"]::after {
  top: -13px;
  border-left: 2px solid var(--bubble-border, #b94d58);
  border-top: 2px solid var(--bubble-border, #b94d58);
  transform: rotate(45deg);
}

.level-bubble.no-tail::after {
  display: none;
}

.level-bubble strong,
.level-bubble span,
.level-bubble small {
  display: block;
}

.level-bubble strong {
  margin-bottom: 6px;
  color: #9b2f3d;
  font-size: 1.1rem;
}

.level-bubble span {
  font-size: 0.95rem;
  line-height: 1.48;
}

.level-bubble .future-line {
  margin-bottom: 5px;
}

.level-bubble .future-line b {
  color: #244f87;
}

.level-bubble.future-bubble {
  /* 도메인 탭 일곱 개(All·Health·Social·Economy·Leisure·Daily·Housing)가
     한 줄에 들어가려면 안쪽 폭이 511px 필요하다. 좌우 여백 24px 을 더하면
     535px 이 최소이고, 여유를 두어 560px 로 잡는다. 510px 이던 때는
     Housing 하나가 다음 줄로 떨어져 창이 세로로 길어졌다. */
  width: min(560px, 96vw);
  min-width: 520px;
  border-radius: 14px;
  padding: 10px 12px 0;
  pointer-events: auto;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.future-bubble-edge {
  position: absolute;
  background: transparent;
  pointer-events: none;
  transition: background .15s;
  z-index: 5;
  border-radius: 4px;
}
.future-bubble-edge-n,
.future-bubble-edge-s {
  left: 14px;
  right: 14px;
  height: 8px;
}
.future-bubble-edge-n { top: 0; }
.future-bubble-edge-s { bottom: 0; }
.future-bubble-edge-e,
.future-bubble-edge-w {
  top: 14px;
  bottom: 14px;
  width: 8px;
}
.future-bubble-edge-e { right: 0; }
.future-bubble-edge-w { left: 0; }

.level-bubble.future-bubble[data-resize-dir*="n"] .future-bubble-edge-n,
.level-bubble.future-bubble[data-resize-dir*="s"] .future-bubble-edge-s,
.level-bubble.future-bubble[data-resize-dir*="e"] .future-bubble-edge-e,
.level-bubble.future-bubble[data-resize-dir*="w"] .future-bubble-edge-w {
  background: rgba(47, 95, 158, .35);
}

.future-scroll-body {
  flex: 1 1 auto;
  max-height: 62vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 2px;
  padding-bottom: 4px;
}
.level-bubble.future-bubble.resized .future-scroll-body {
  max-height: none;
  flex: 1 1 0;
  min-height: 0;
}
.future-footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 6px 10px 6px 0;
  border-top: 1px solid #e5eaf5;
  min-height: 36px;
}

/* Future-life note - shows only when the three axes disagree.
   Sits between the three activity sentences and the per-domain life,
   so the reader can see it is a different kind of remark. */
.future-note {
  display: block;
  margin: 10px 0 2px;
  padding: 9px 12px;
  border-left: 3px solid #a8763f;
  border-radius: 0 6px 6px 0;
  background: rgba(168, 118, 63, 0.08);
}
.future-exploration-intro { border: 1px solid #b9cfee; padding: 10px; }
.future-exploration-intro p { margin: 10px 0 0; line-height: 1.45; }
.future-activity-table { margin-top: 6px; border: 1px solid #b9cfee; }
.future-activity-row { display: grid; grid-template-columns: minmax(140px, 32%) minmax(0, 1fr); }
.future-activity-row + .future-activity-row { border-top: 1px solid #b9cfee; }
.future-activity-meter { position: relative; min-height: 44px; border-right: 1px solid #b9cfee; }
.future-activity-fill { position: absolute; inset: 0 auto 0 0; background: var(--activity-color); opacity: .55; }
.future-activity-body { --activity-color: #f34b53; }
.future-activity-mind { --activity-color: #5099db; }
.future-activity-social { --activity-color: #78ad43; }
.future-activity-value { position: relative; padding: 10px 8px; color: #162b40; display: flex; align-items: center; gap: 10px; height: 100%; }
.future-activity-description { padding: 7px 10px; line-height: 1.4; overflow-wrap: anywhere; }
.future-note-line { display: block; }
.future-note-line + .future-note-line { margin-top: 5px; }

.future-story-details { margin-top: 8px; border-top: 1px solid #c8d8f0; padding-top: 6px; }
.future-story-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #1a3f72;
}
.future-story-heading strong { font-size: 13px; font-weight: 700; }
.future-story-heading span { color: #6d7784; font-size: 12px; white-space: nowrap; }
.future-story-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.future-story-tab {
  /* 칸을 똑같이 나누지 않고 글자 길이대로 잡는다.
     예전에는 flex:1 1 0 + min-width:0 이라 일곱 칸이 무조건 같은 폭이 되고
     글자보다 작아져도 됐다. 한국어(2~4글자)에는 넉넉했지만 영어는 잘렸다.
     넘치면 위 .future-story-tabs 의 flex-wrap 이 조용히 다음 줄로 접는다. */
  flex: 0 1 auto;
  min-height: 34px;
  padding: 4px 8px;
  border: 1px solid #aaa;
  border-radius: 7px;
  background: #f7f7f7;
  color: #222;
  font: inherit;
  cursor: pointer;
}
.future-story-tab.is-active {
  border-color: #5080b8;
  background: #eaf2fb;
  color: #1a3f72;
  font-weight: 700;
}
.future-story-domains {
  display: none;
  grid-template-columns: 1fr;
  gap: 4px;
  margin-top: 10px;
}
.future-story-domains[data-category]:not([data-category=""]) { display: grid; }
.future-story-domains .future-line { display: none; }
.future-story-domains[data-category="all"] .future-line,
.future-story-domains[data-category="health"] .future-line[data-category="health"],
.future-story-domains[data-category="social"] .future-line[data-category="social"],
.future-story-domains[data-category="economy"] .future-line[data-category="economy"],
.future-story-domains[data-category="leisure"] .future-line[data-category="leisure"],
.future-story-domains[data-category="daily"] .future-line[data-category="daily"],
.future-story-domains[data-category="housing"] .future-line[data-category="housing"] {
  display: block;
}.future-actions {
  display: inline-flex !important;
  gap: 6px;
  align-items: center;
  pointer-events: auto;
}

.level-bubble.future-bubble strong {
  margin-bottom: 3px;
  font-size: 1.12rem;
}

.future-layout {
  display: grid;
  grid-template-columns: 196px minmax(0, 1fr);
  justify-content: start;
  gap: 7px 12px;
  align-items: stretch;
  margin: 2px 0 8px;
  padding: 8px 9px 8px 8px;
  border: 1px solid #b9ccea;
}

.future-title {
  grid-column: 1 / -1;
  margin: 0;
  color: #2f5f9e;
  white-space: nowrap;
  letter-spacing: 0;
  font-size: 1.04rem !important;
  line-height: 1.24;
}

.future-visual-col {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 6px;
  min-width: 0;
}

.future-portrait {
  position: relative;
  min-height: 94px;
  border: 1px solid #dce7f4;
  border-radius: 0;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.28)),
    linear-gradient(135deg, #e8f1fb, #f7efe5);
}

.future-visuals {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  min-height: 112px;
  padding: 5px 5px 25px;
  border: 1px solid #dce7f4;
  background: #f9fbfd;
  overflow: hidden;
}

.future-visuals .future-portrait {
  min-height: 86px;
  border: 1px solid #dce7f4;
}

.future-portrait::before {
  content: "";
  position: absolute;
  inset: 58% 0 0;
  background: rgba(78, 128, 89, 0.13);
}

.future-face {
  position: relative;
  min-height: 86px;
  border: 1px solid #dce7f4;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.2)),
    linear-gradient(135deg, #eef5fb, #fbf0e9);
}

.future-face::before {
  content: "";
  position: absolute;
  inset: 58% 0 0;
  background: rgba(101, 129, 145, .10);
}

.face-head {
  position: absolute;
  left: 50%;
  top: 22px;
  width: 42px;
  height: 51px;
  border-radius: 44% 44% 48% 48%;
  background: #f0c7aa;
  transform: translateX(-50%);
  box-shadow: inset 0 -4px 0 rgba(130, 86, 66, .08);
}

.face-hair {
  position: absolute;
  left: 50%;
  top: 13px;
  width: 48px;
  height: 29px;
  border-radius: 50% 50% 36% 36%;
  background: #6e6259;
  transform: translateX(-50%);
  z-index: 1;
}

.face-eye {
  position: absolute;
  top: 45px;
  z-index: 2;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #5b4b43;
}

.face-eye.left { left: calc(50% - 11px); }
.face-eye.right { left: calc(50% + 7px); }

.face-mouth {
  position: absolute;
  left: 50%;
  top: 59px;
  z-index: 2;
  width: 18px;
  height: 8px;
  border-bottom: 2px solid rgba(102, 68, 61, .55);
  border-radius: 0 0 18px 18px;
  transform: translateX(-50%);
}

.face-wrinkle {
  position: absolute;
  z-index: 2;
  display: block;
  height: 1px;
  border-radius: 999px;
  background: rgba(132, 88, 74, .34);
  opacity: 0;
}

.face-wrinkle.forehead {
  left: calc(50% - 15px);
  top: 38px;
  width: 30px;
}

.face-wrinkle.cheek-left {
  left: calc(50% - 19px);
  top: 55px;
  width: 12px;
  transform: rotate(8deg);
}

.face-wrinkle.cheek-right {
  left: calc(50% + 7px);
  top: 55px;
  width: 12px;
  transform: rotate(-8deg);
}

.future-good .face-hair,
.future-strong .face-hair {
  background: #6e6259;
}

.future-normal .face-hair,
.future-weak .face-hair {
  background: linear-gradient(90deg, #77706a, #c9c4bd 60%);
}

.future-clearly-weak .face-hair,
.future-semi-dependent .face-hair,
.future-care .face-hair,
.future-dependent .face-hair,
.future-minimal .face-hair,
.future-death .face-hair {
  background: #d8d3ca;
}

.future-weak .face-wrinkle,
.future-clearly-weak .face-wrinkle {
  opacity: .55;
}

.future-semi-dependent .face-wrinkle,
.future-care .face-wrinkle,
.future-dependent .face-wrinkle,
.future-minimal .face-wrinkle,
.future-death .face-wrinkle {
  opacity: .9;
}

.future-person {
  position: absolute;
  left: 50%;
  bottom: 9px;
  width: 52px;
  height: 88px;
  transform: translateX(-50%) scale(.66);
}

.person-head,
.person-body,
.person-arm,
.person-leg,
.person-cane {
  position: absolute;
  display: block;
}

.person-head {
  left: 17px;
  top: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #f2c9af;
  box-shadow: inset 0 -3px 0 rgba(117, 83, 61, 0.12);
}

.person-body {
  left: 13px;
  top: 27px;
  width: 32px;
  height: 42px;
  border-radius: 14px 14px 8px 8px;
  background: #6c9bc9;
}

.future-female .person-body {
  background: #c9889d;
}

.future-neutral .person-body {
  background: #8f9b77;
}

.person-arm {
  top: 34px;
  width: 9px;
  height: 35px;
  border-radius: 9px;
  background: #d6a385;
  transform-origin: top center;
}

.person-arm.left {
  left: 7px;
  transform: rotate(15deg);
}

.person-arm.right {
  right: 7px;
  transform: rotate(-15deg);
}

.person-leg {
  top: 66px;
  width: 10px;
  height: 30px;
  border-radius: 8px;
  background: #5b5f69;
  transform-origin: top center;
}

.person-leg.left {
  left: 18px;
  transform: rotate(7deg);
}

.person-leg.right {
  right: 18px;
  transform: rotate(-7deg);
}

.person-cane {
  display: none;
  right: 2px;
  top: 57px;
  width: 3px;
  height: 43px;
  border-radius: 3px;
  background: #7f5d42;
  transform: rotate(-8deg);
}

.future-clearly-weak .person-cane,
.future-semi-dependent .person-cane,
.future-care .person-cane,
.future-dependent .person-cane,
.future-minimal .person-cane,
.future-death .person-cane {
  display: block;
}

.future-weak .future-person,
.future-clearly-weak .future-person {
  transform: translateX(-50%) scale(.66) rotate(3deg);
}

.future-semi-dependent .future-person,
.future-care .future-person,
.future-dependent .future-person,
.future-minimal .future-person,
.future-death .future-person {
  transform: translateX(-50%) scale(.66) rotate(8deg);
}

.future-minimal .future-person,
.future-death .future-person {
  opacity: .48;
}

.future-caption {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 6px;
  padding: 3px 6px;
  border-radius: 7px;
  background: rgba(255,255,255,.78);
  color: #365273;
  font-size: .72rem;
  font-weight: 800;
  text-align: center;
}

.future-layers {
  display: grid;
  row-gap: 9px;
  align-content: center;
  padding: 4px 0;
}

.future-layer {
  position: relative;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  color: #4e6178;
  font-size: .86rem;
  line-height: 1.25;
  width: 100%;
  height: 30px;
  box-sizing: border-box;
  border: 2px solid currentColor;
  border-radius: 0 15px 15px 0;
  overflow: hidden;
  background: #ffffff;
}

.future-layer-text {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  height: 100%;
  padding: 0 8px;
  border-right: 0px solid currentColor;
  background: rgba(255, 255, 255, .42);
  gap: 3px;
  white-space: nowrap;
  font-weight: 900;
}

.future-layer b {
  color: #244f87;
}

.future-score {
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 108px;
  top: 50%;
  min-width: 62px;
  height: 100%;
  padding: 0 8px;
  border-radius: 0;
  background: rgba(255, 255, 255, .32);
  border: 0;
  color: #2f2a25;
  font-weight: 900;
  font-size: .9rem;
  transform: translate(-50%, -50%);
}

.future-meter-fill {
  position: absolute;
  inset: 0px auto 0px 0;
  width: 0;
  height: auto;
  opacity: .6;
  border-right: 0;
  background: rgba(47, 95, 158, .16);
}

.future-layer-body {
  color: #c94f5a;
}

.future-layer-body .future-meter-fill {
  background: rgba(217, 74, 80, .82);
}

.future-layer-mind {
  color: #3f7fc2;
}

.future-layer-mind .future-meter-fill {
  background: rgba(63, 127, 194, .82);
}

.future-layer-social {
  color: #2f9362;
}

.future-layer-social .future-meter-fill {
  background: rgba(47, 147, 98, .82);
}

.level-bubble small {
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

.level-bubble.future-bubble .future-line {
  margin-bottom: 3px;
}
.future-story-divider {
  margin: 10px 0 8px;
  border-top: 1px solid #c8d8f0;
}
.future-story-name {
  display: block;
  margin-bottom: 8px;
  color: #1a3f72;
  font-size: 14px;
}
.future-story-domains .future-line {
  margin-bottom: 0;
  font-size: 12px;
  line-height: 1.5;
}

.level-bubble.future-bubble span {
  font-size: .92rem;
  line-height: 1.38;
}

.future-actions {
  position: absolute;
  right: 24px;
  bottom: 9px;
  display: inline-flex !important;
  gap: 6px;
  align-items: center;
  pointer-events: auto;
}

.future-end-btn,
.future-choose-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 62px;
  height: 40px;
  padding: 0 14px;
  border: 1.5px solid var(--btn-control-border);
  border-radius: 999px;
  background: rgba(255, 253, 242, .96);
  color: var(--btn-control-text);
  font-family: inherit;
  font-weight: 900;
  font-size: .95rem !important;
  line-height: 1 !important;
  user-select: none;
  pointer-events: auto;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}

.future-end-btn {
  cursor: pointer;
  border-color: #2f5f9e;
  background: #ffffff;
  color: #1a1a1a;
}

.future-choose-btn {
  cursor: pointer;
  background: #2f5f9e;
  color: #fff;
  border-color: #2f5f9e;
}

.future-end-btn:hover {
  border-color: #2f5f9e;
  background: #eef3fb;
  color: #1a1a1a;
  transform: translateY(-1px);
}

.future-choose-btn:hover {
  border-color: #c88742;
  background: #fff2df;
  color: var(--btn-control-text);
  transform: translateY(-1px);
}

.future-confirm-btn {
  display: block;
  width: 100%;
  margin-top: 14px;
  height: 40px;
  padding: 0;
  line-height: 40px;
  border: 2px solid #b87745;
  border-radius: 999px;
  background: #fff0df;   /* 버튼 공통 배경 */
  color: #1a1a1a;
  font-family: inherit;
  font-weight: 900;
  font-size: 1rem;
  cursor: pointer;
  letter-spacing: .04em;
  transition: background .16s ease, transform .12s ease;
}

.future-confirm-btn:hover {
  background: #ffffff;
  transform: translateY(-1px);
}

.future-confirm-btn:active {
  transform: translateY(0);
}

.canvas-hint {
  margin: 12px 0 2px;
  text-align: center;
  color: var(--muted);
  font-size: 0.92rem;
}

.guide-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin: 22px 0;
  padding: 18px 22px;
}
.guide-bar p { margin: 0; color: var(--muted); }

.phase-block { margin-bottom: 22px; overflow: hidden; }
.phase-head {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 18px 22px;
  background: var(--paper-deep);
}
.phase-no {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  font-weight: 800;
}
.phase-title { font-size: 1.18rem; font-weight: 800; }
.phase-hint { color: var(--muted); font-size: 0.9rem; }
.phase-steps { padding: 20px 22px 24px; }

.step-card {
  margin-top: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.step-card h3 { margin: 0 0 8px; }
.step-card p { color: var(--muted); }
.step-card textarea { min-height: 86px; resize: vertical; }

.dream-bubble {
  position: absolute;
  z-index: 6;
  display: grid;
  place-items: center;
  width: clamp(230px, 18vw, 310px);
  min-height: 46px;
  padding: 7px 42px 6px;
  border: 2px solid #d8ad3e;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff1a6 0%, #ffe27d 100%);
  color: #684817;
  box-shadow: none;
  opacity: 0;
  transform: translateY(-24px) scale(.92);
  pointer-events: auto;
}

.dream-bubble.dream-size-small {
  width: clamp(195px, 15vw, 250px);
  min-height: 38px;
  padding: 5px 34px 4px;
}

.dream-bubble.dream-size-large {
  width: clamp(185px, 23vw, 380px);
  min-height: 58px;
  padding: 10px 50px 9px;
}

.dream-bubble::after {
  display: none;
}

.dream-resize-handle {
  position: absolute;
  bottom: 4px;
  right: 8px;
  width: 16px;
  height: 16px;
  cursor: se-resize;
  z-index: 3;
  opacity: 0.45;
  background:
    linear-gradient(135deg, transparent 40%, #b8882a 40%, #b8882a 55%, transparent 55%),
    linear-gradient(135deg, transparent 60%, #b8882a 60%, #b8882a 75%, transparent 75%);
  border-radius: 0 0 6px 0;
  transition: opacity .2s;
}
.dream-bubble:hover .dream-resize-handle,
.dream-bubble:focus-within .dream-resize-handle {
  opacity: 0.75;
}

.dream-bubble-input {
  position: relative;
  z-index: 1;
  width: calc(100% - 4px);
  min-height: 28px;
  border: 0;
  outline: 0;
  overflow-wrap: anywhere;
  word-break: keep-all;
  background: transparent;
  padding: 2px 10px;
  color: #73501a;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.34;
  letter-spacing: 0;
  text-align: center;
  display: block;
  white-space: pre-wrap;
}

.dream-bubble.dream-size-small .dream-bubble-input {
  min-height: 24px;
  font-size: 0.82rem;
}

.dream-bubble.dream-size-large .dream-bubble-input {
  min-height: 38px;
  font-size: 1.1rem;
}

#dreamBubbleText:empty::before {
  content: attr(data-placeholder);
  pointer-events: none;
}
.dream-bubble-input:focus {
  background: #fff;
  box-shadow: 0 0 0 2px rgba(104, 72, 23, .25);
}

/* 편집창(activePlanningStep === "dream")이 열려 있는 동안은 텍스트 필드
   포커스 여부와 무관하게 흰 배경 유지 — 편집 완료 후에만 노란 풍선색. */
.dream-bubble.dream-editing .dream-bubble-input {
  background: #fff;
}

.dream-bubble-show {
  animation: dreamBubbleIn .72s cubic-bezier(.22, 1, .36, 1) forwards;
}

@keyframes dreamBubbleIn {
  from {
    opacity: 0;
    transform: translateY(-34px) scale(.88);
  }
  65% {
    opacity: 1;
    transform: translateY(6px) scale(1.02);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.lifestyle-card {
  position: absolute;
  z-index: 5;
  left: 52px;
  top: 64%;
  width: min(560px, 38%);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: translateY(-50%);
  pointer-events: auto;
}

.gerontech-card {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 50%;
  width: min(540px, 36%);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  pointer-events: auto;
}

.gerontech-card img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.lifestyle-label-layer,
.gerontech-choice-layer {
  font-family: "Noto Serif KR", "Nanum Myeongjo", "Batang", serif;
}

.gerontech-need-note {
  position: absolute;
  left: 7.0%;
  top: 10.0%;
  width: 86.0%;
  height: 10.0%;
  z-index: 3;
  display: block;
  box-sizing: border-box;
  padding: 3px 3px;
  border: 2px solid rgba(196, 132, 45, .35);
  border-radius: 10px;
  background: rgba(255, 235, 141, .5);
  color: #563a18;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.32;
  text-align: center;
  outline: none;
  overflow-y: auto;
  overflow-x: hidden;
  cursor: text;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: normal;
}

.gerontech-need-note:focus {
  border-color: rgba(198, 113, 33, .86);
  background: rgba(255, 237, 151, .72);
  box-shadow: 0 0 0 3px rgba(242, 138, 60, .16);
}

/* 편집 단계(문제점 작성·기술 선택)에서는 흰 바탕으로 또렷하게.
   완료·미리보기 카드는 원래 노란 바탕을 유지한다. */
.gerontech-card:not(.gerontech-card-done) .gerontech-need-note {
  background: #fff;
}

.gerontech-need-note:empty::before {
  content: attr(data-placeholder);
  color: rgba(91, 64, 30, .58);
}

.gerontech-choice-layer {
  position: absolute;
  left: 8.4%;
  top: 23.5%;
  z-index: 4;
  width: 85.0%;
  display: grid;
  gap: 0;
  pointer-events: none;
  /* 안전 영역 = 카드 흰 여백 안쪽. 실측: 가로 5.05~94.88%, 삽화 상단 75.4% */
  align-content: start;   /* 높이를 고정해도 행이 늘어나지 않게 (자동 맞춤의 전제) */
  height: 51.5%;
  overflow: hidden;
  opacity: 0;
}

.gerontech-card.tool-selecting .gerontech-choice-layer,
.gerontech-card.gerontech-card-done .gerontech-choice-layer {
  opacity: 1;
}

.gerontech-card.tool-selecting .gerontech-choice-layer {
  pointer-events: auto;
}

.gerontech-card.gerontech-card-done .gerontech-choice-layer {
  /* Completed cards remain browsable so each technology can show its detail bubble. */
  pointer-events: auto;
  z-index: 5;
}

.gerontech-choice-row {
  display: grid;
  grid-template-columns: 7.7em minmax(0, 1fr);
  align-items: flex-start;
  column-gap: .3em;
  min-height: 1.26em;
  white-space: normal;
}

.gerontech-choice-items {
  display: inline-flex;
  align-items: center;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 0;
  min-width: 0;
  row-gap: 0;
}

.gerontech-choice-punct {
  color: rgba(95, 78, 63, .62);
  font-size: .97em;
  font-weight: 800;
  line-height: 1;
  margin: 0;
}

.gerontech-choice {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 1.26em;
  padding: 0 .07em;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #2d241f;
  font-family: inherit;
  font-size: 1em;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.gerontech-choice::before {
  content: none;
}

.gerontech-choice.group {
  justify-content: space-between;
  color: #1f1711;
  font-weight: 900;
  width: 100%;
  padding-right: 1px;
  white-space: nowrap;
  word-break: keep-all;
  letter-spacing: -.01em;
}

.gerontech-choice.group::after {
  content: ":";
  margin-left: 3px;
  color: rgba(69, 51, 37, .82);
}

.gerontech-choice.item {
  color: #4c413a;
  font-weight: 600;
}

.gerontech-choice:hover {
  background: rgba(255, 240, 215, .8);
}

.gerontech-choice.is-selected {
  background: #f4c27a;
  color: #6f3f12;
}

.gerontech-choice.is-selected::before {
  content: none;
}


.lifestyle-card img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.lifestyle-label-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  color: #3e3934;
  font-weight: 800;
  line-height: 1.02;
}

.lifestyle-label {
  position: absolute;
  display: inline-block;
  white-space: nowrap;
  font-size: 11px;      /* 카드가 560px 고정이라 vw 는 부적절 — 고정값. 흰 여백 실측 상한 */
}

.lifestyle-label-left {
  text-align: right;
  transform: translate(-100%, -50%);
}

.lifestyle-label-right {
  text-align: left;
  transform: translate(0, -50%);
  white-space: normal;
  line-height: 1.2;
}

.lifestyle-label-axis {
  font-size: 11.9px;
  font-weight: 900;
}

.lifestyle-label-vertical {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

.life-scope-space { left: 25.8%; top: 17.4%; }
.life-scope-abroad { left: 21.5%; top: 24.0%; }
.life-scope-domestic { left: 20.0%; top: 30.8%; }
.life-scope-local { left: 18.5%; top: 37.5%; }
.life-scope-nearby { left: 18.0%; top: 44.3%; }
.life-scope-home { left: 18.0%; top: 51.5%; }

.life-residence-city { left: 19.0%; top: 61.4%; }
.life-residence-town { left: 20.0%; top: 68.3%; }
.life-residence-rural { left: 23.5%; top: 75.2%; }
.life-residence-forest { left: 27.0%; top: 82.1%; }

.life-axis-health {
  left: 37.0%;
  top: 18.0%;
  transform: translate(-50%, -50%) rotate(-34deg);
}

.life-axis-family {
  left: 61.0%;
  top: 18.0%;
  transform: translate(-50%, -50%) rotate(34deg);
}

.life-axis-economy {
  left: 27.0%;
  top: 45.5%;
  transform: translate(-50%, -50%);
}

.life-axis-culture {
  left: 70.1%;
  top: 46.5%;
  transform: translate(-50%, -50%);
}

.life-axis-learning {
  left: 37.0%;
  top: 76.0%;
  transform: translate(-50%, -50%) rotate(33deg);
}

.life-axis-social {
  left: 61.0%;
  top: 76.0%;
  transform: translate(-50%, -50%) rotate(-33deg);
}

.life-household-extended { left: 71.5%; top: 17.6%; }
.life-household-family { left: 75.0%; top: 24.4%; }
.life-household-couple { left: 77.0%; top: 31.0%; }
.life-household-single { left: 78.5%; top: 37.6%; }

.life-housing-apartment { left: 79.5%; top: 47.6%; }
.life-housing-house { left: 79.0%; top: 54.6%; }
.life-housing-silver { left: 77.5%; top: 61.5%; }
.life-housing-shared { left: 76.5%; top: 68.4%; }
.life-housing-care { left: 74.0%; top: 75.5%; }
.life-housing-community { left: 70.5%; top: 82.5%; }

.lifestyle-sticker-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.lifestyle-card.sticker-active {
  cursor: none;
}


.lifestyle-score-path {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.lifestyle-score-path polyline {
  fill: rgba(117, 84, 150, .08);
  stroke: #7d629a;
  stroke-width: .85;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lifestyle-sticker {
  position: absolute;
  z-index: 3;
  width: clamp(15px, 1.45vw, 22px);
  height: clamp(15px, 1.45vw, 22px);
  border: 3px solid #c47a38;
  border-radius: 50%;
  background: #f3b06f;
  box-shadow: 0 1px 3px rgba(83, 48, 25, .2), inset 0 1px 0 rgba(255, 235, 202, .9);
  transform: translate(-50%, -50%);
}

.lifestyle-sticker.is-active-stage {
  z-index: 6;
}

.lifestyle-sticker.is-other-stage {
  z-index: 3;
}

.lifestyle-sticker.is-score-sticker {
  border-color: #7d629a;
  background: #b49acb;
  box-shadow: 0 1px 3px rgba(65, 42, 82, .22), inset 0 1px 0 rgba(246, 235, 255, .92);
}

.lifestyle-snap-highlight {
  position: absolute;
  z-index: 1;
  width: clamp(18px, 1.65vw, 26px);
  height: clamp(18px, 1.65vw, 26px);
  border: 2px solid rgba(239, 146, 62, .82);
  border-radius: 50%;
  background: rgba(244, 152, 63, .16);
  box-shadow: 0 0 0 0 rgba(244, 152, 63, .2);
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: lifestyleSnapBlink 1.25s ease-in-out infinite;
}

.lifestyle-score-label {
  position: absolute;
  z-index: 4;
  min-width: 142px;
  max-width: min(280px, 42%);
  padding: 6px 13px;
  border: 1.5px solid #f28a3c;
  border-radius: 7px;
  background: #fff0df;
  color: #19120d;
  font-size: clamp(.78rem, 1.5vw, 1rem);
  font-weight: 800;
  line-height: 1.2;
  box-shadow: 0 2px 6px rgba(92, 54, 26, .1);
  pointer-events: none;
  white-space: nowrap;
  text-align: center;
}

.lifestyle-score-label.is-right {
  transform: translate(0, -50%);
}

.lifestyle-score-label.is-left {
  transform: translate(-100%, -50%);
}

.lifestyle-score-label-preview {
  z-index: 5;
}

@keyframes lifestyleSnapBlink {
  0%, 100% {
    opacity: .28;
    transform: translate(-50%, -50%) scale(.9);
    box-shadow: 0 0 0 0 rgba(244, 152, 63, .15);
  }
  50% {
    opacity: .9;
    transform: translate(-50%, -50%) scale(1.08);
    box-shadow: 0 0 0 5px rgba(244, 152, 63, .1);
  }
}

.lifestyle-card.sticker-active .lifestyle-sticker.is-active-stage:not(.lifestyle-sticker-preview) {
  cursor: grab;
  pointer-events: auto;
}

.lifestyle-card.sticker-active .lifestyle-sticker.is-active-stage:not(.lifestyle-sticker-preview):active {
  cursor: grabbing;
}

.lifestyle-sticker-preview {
  z-index: 2;
  opacity: .68;
  background: #f6bd82;
  border-color: #ca8642;
  box-shadow: 0 0 0 5px rgba(231, 166, 96, .13), 0 3px 8px rgba(83, 48, 25, .18);
  pointer-events: none;
}

.step-panel.lifestyle-guide-panel {
  top: 58%;
  left: auto;
  right: 52px;
  transform: translateY(-50%);
  width: min(560px, 38%);
  padding: 20px 32px 5px !important;
  border: 2px solid #b66f34;
  border-radius: 14px;
  background: #fffaf3;
  box-shadow: none;
  font-size: 1rem;      /* 가이드 창 본문 공통 크기 */
}

/* 라이프스타일 안내 창의 문단과 내부 여백을 압축한다. */
.step-panel.lifestyle-guide-panel {
  padding: 18px 24px 14px;
  line-height: 1.4;     /* 가이드 창 본문 공통 줄간격 */
}
.step-panel.lifestyle-guide-panel p {
  margin: 0 0 6px;
}
.step-panel.gerontech-guide-panel {
  top: 58%;
  left: auto;
  right: 52px;
  transform: translateY(-50%);
  width: min(580px, 42%);
  padding: 20px 32px 5px;
  border: 2px solid #b66f34;
  border-radius: 14px;
  background: #fffaf3;
  box-shadow: none;
  font-size: 1rem;      /* 가이드 창 본문 공통 크기 */
  line-height: 1.4;     /* 가이드 창 본문 공통 줄간격 */
}

.step-panel.gerontech-guide-panel .step-panel-resize-handle:hover,
.step-panel.gerontech-guide-panel .step-panel-resize-corner:hover {
  background: rgba(182,111,52,.35);
}

.step-panel.gerontech-guide-panel p {
  margin: 0 0 6px;
}

.gerontech-start-action {
  display: block;
  min-width: 300px;
  height: 40px;
  min-height: 40px;
  margin: 20px 0 0 auto;
  padding: 0 26px;
  border: 2px solid #f28a3c;
  border-radius: 999px;
  background: #fff0df;   /* 버튼 공통 배경 (변화보기 종료 기준) */
  color: #1f1711;
  font-size: 1.1rem;
  font-weight: 800;
  cursor: pointer;
}

.gerontech-start-action:hover {
  background: #ffffff;   /* 버튼 공통 마우스 오버 */
  transform: translateY(-1px);
}


.lifestyle-guide-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 22px;
  padding: 8px 16px;
  border: 3px solid #ef923e;
  border-radius: 999px;
  background: #fff2df;
  color: #3f2e25;
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: 0;
  white-space: nowrap;
}

.lifestyle-start-action {
  display: block;
  margin: 20px 0 0 auto;
  min-width: 270px;
  min-height: 40px;
  padding: 0 26px;
  border: 2px solid #b66f34;
  border-radius: 999px;
  background: #fff0df;
  color: #4d392b;
  font-size: 1.1rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(184, 111, 52, .08);
  transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.step-panel.lifestyle-guide-panel .step-panel-resize-handle:hover,
.step-panel.lifestyle-guide-panel .step-panel-resize-corner:hover {
  background: rgba(182,111,52,.35);
}

/* 통일된 높이 */
.step-panel.lifestyle-guide-panel .lifestyle-start-action {
  height: 40px;
  min-height: 40px;
}
.lifestyle-start-action:hover {
  background: #ffffff;
  border-color: var(--btn-warm);
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(184, 111, 52, .12);
}

.lifestyle-complete-action {
  min-width: 270px;
  min-height: 54px;
  font-size: 1.14rem;
}

.chip-group { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px; }
.chip {
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  padding: 8px 13px;
  cursor: pointer;
}
.chip.selected { background: var(--green); border-color: var(--green); color: #fff; }

.step-nav { text-align: right; margin-top: 14px; }

.certificate {
  padding: 34px 24px;
  text-align: center;
  border: 6px double var(--yellow);
}
.certificate h2 { margin: 4px 0 10px; font-size: 2rem; }
.name-line {
  display: inline-block;
  margin: 10px 0 14px;
  padding: 4px 46px;
  border-bottom: 2px solid var(--ink);
  font-size: 1.25rem;
  font-weight: 800;
}
.certificate p:not(.section-kicker) { color: var(--muted); }

.modal-back {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(40, 33, 27, 0.58);
}
.modal-back.show { display: flex; }
.modal {
  position: relative;
  width: min(820px, 100%);
  max-height: 88vh;
  overflow: auto;
  border-radius: 8px;
  background: var(--card);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.24);
}
.modal-close {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  font-size: 1.4rem;
}
.modal-head {
  padding: 26px 30px 20px;
  background: var(--green);
  color: #fff;
}
.modal-head h2 { margin: 0 44px 6px 0; }
.modal-head p { margin: 0; opacity: 0.92; }
.modal-body { padding: 24px 30px 30px; }
.modal-confirm-msg { margin: 0; line-height: 1.7; color: var(--ink); }
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 30px 24px;
}
.btn-danger {
  background: #c0392b;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 20px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}
.btn-danger:hover { background: #a93226; }
.scenario-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 18px 0;
}
.scenario-card {
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.scenario-card h3 { margin: 0 0 6px; font-size: 1rem; }
.scenario-card p { margin: 0; color: var(--muted); font-size: 0.9rem; }

/* 두 칸으로 나누기에는 좁아지는 지점.
   영어는 라벨("Country")과 보기 글("Prefer not to say", "United Kingdom")이
   길어 입력줄에 971px 이 필요하다. 한국어판(1320px)보다 늦게 두 칸이 된다. */
@media (max-width: 1420px) {
  .top-layout {
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 0 0 10px;
  }
  .site-header {
    text-align: center;
  }
  .brand-lockup {
    justify-content: center;
  }
  .subtitle {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 760px) {
  .intro-fields, .participant-panel { grid-template-columns: 1fr; }
  /* 한 칸으로 쌓이면 버튼도 줄 전체를 쓴다.
     넓을 때 쓰는 오른쪽 정렬을 여기서 풀어 준다. */
  .profile-btns { justify-self: stretch; }
  .participant-panel .field {
    grid-template-columns: 1fr;
    gap: 5px;
  }
  .participant-panel .field span {
    margin-bottom: 0;
  }
  .actions, .guide-bar, .step-nav { align-items: stretch; justify-content: stretch; flex-direction: column; }
  .btn { width: 100%; justify-content: center; }
  .site-header { padding: 20px 14px 8px; }
  .brand-lockup {
    align-items: center;
  }
  .site-header h1 { font-size: clamp(2.1rem, 12vw, 3.25rem); }
  .subtitle { font-size: 0.88rem; }
  .canvas-shell { padding: 12px; }
  .modal-head, .modal-body { padding-left: 20px; padding-right: 20px; }
  .step-panel {
    position: static;
    width: auto;
    margin: 10px;
    transform: none;
  }
  .profile-guide-connector,
  .step-panel.profile-guide-panel::before,
  .step-panel.profile-guide-panel::after {
    display: none;
  }
  .level-bubble {
    width: 190px;
  }
  .level-bubble.future-bubble {
    width: min(92vw, 420px);
  }
  .future-layout {
    grid-template-columns: 1fr;
  }
  .future-title {
    white-space: normal;
  }
  .future-portrait {
    min-height: 116px;
  }
}

/* @media print 는 아래 보관 섹션 블록에 통합 */

/* ── 인생 브리핑 패널 ── */
.step-panel.life-briefing-panel {
  width: min(580px, 88%);
}

.step-panel.life-briefing-panel .step-panel-resize-handle:hover,
.step-panel.life-briefing-panel .step-panel-resize-corner:hover {
  background: rgba(184,119,69,.35);
}

.step-panel.gt-showcase-panel {
  width: min(680px, 48%);
  max-height: min(700px, calc(100vh - 120px));
  background: #fffaf3;
}

.step-panel.gt-showcase-panel #stepPanelContent {
  max-height: inherit;
  overflow-y: auto;
  padding-right: 10px;
}

.life-briefing-title {
  margin-bottom: 8px;
  color: #7a4224;
  font-size: 1.02em;
  font-weight: 800;
}

.step-panel.life-briefing-panel p {
  margin: 0 0 3px;
  line-height: 1.4;     /* 가이드 창 본문 공통 줄간격 */
}

.life-briefing-textarea {
  width: 100%;
  min-height: 80px;
  margin: 10px 0 4px;
  padding: 10px 12px;
  border: 1.5px solid #d4a87a;
  border-radius: 8px;
  background: #fff;
  font-size: 0.95rem;
  line-height: 1.6;
  resize: vertical;
  box-sizing: border-box;
  font-family: inherit;
  color: var(--ink);
}

.life-briefing-textarea:focus {
  outline: none;
  border-color: #c07a3a;
  box-shadow: 0 0 0 3px rgba(200, 120, 60, 0.15);
}

.life-briefing-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

.life-briefing-action {
  height: 40px;
  min-height: 40px;
  padding: 0 24px;
  border: 2px solid #b87745;   /* 가이드 창 테두리와 동일 (.step-panel) */
  border-radius: 999px;
  background: #fff0df;   /* 버튼 공통 배경 (변화보기 종료 기준) */
  color: #1f1711;
  font-size: 1.1rem;   /* 가이드 창 버튼 공통 크기 */
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}

.life-briefing-action:hover {
  background: #ffffff;   /* 버튼 공통 마우스 오버 */
  transform: translateY(-1px);
}

/* 시상 패널 — 왼쪽(설명+입력+버튼) / 오른쪽(예시 목록) 2단 */
.award-columns {
  display: flex;
  gap: 16px;
  align-items: stretch;
  margin: 10px 0 4px;
}

.award-left-col {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.award-name-textarea {
  width: 100%;
  min-height: 44px;
  margin: 0;
}

.input-error-shake {
  border-color: #d8453a !important;
  animation: inputErrorShake 0.4s;
}

@keyframes inputErrorShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

.award-sample-wrap {
  flex: 1;
}

.award-sample-select {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  min-width: 140px;
  border: 1.5px solid #d4a87a;
  border-radius: 8px;
  background: #fff;
  font-size: 0.9rem;
  color: var(--ink);
  padding: 4px 6px;
  cursor: pointer;
  font-family: inherit;
  overflow-y: auto;
}

.award-sample-select option:first-child {
  font-weight: 700;
  color: #7a5530;
  background: #f5e5d0;
}

/* ── 상장 카드 ── */
.award-card {
  position: absolute;
  z-index: 5;
  pointer-events: auto;
  cursor: move;   /* 카드 본문 아무 곳이나 끌어서 이동 */
  filter: drop-shadow(0 8px 24px rgba(78, 49, 29, 0.22));
}

.award-card-body {
  position: relative;
  display: inline-block;
}

.award-img {
  display: block;
  width: 420px;   /* 420 × 1.475 ≈ 620px 높이 — 상장 내용을 읽을 수 있는 크기 */
  max-width: 100%;
  border-radius: 6px;
}

.award-text-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: "Gowun Batang", "Nanum Myeongjo", "Batang", serif;
}

.award-cert-number {
  position: absolute;
  top: 17.5%;
  left: 51%;
  font-size: 0.99rem;   /* 상장 폭 340→420px(1.235배)에 맞춰 확대 */
  color: #3a2008;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* 성명: 밑줄 위.
   예전에는 left:56% 에서 가운데맞춤 + nowrap 이라, 이름이 길면 왼쪽으로
   밀려 리본 문양을 밟고 들어갔다("ISG Korean Chapter" 가 205px → 왼쪽 끝 31.6%).
   문양 오른쪽으로 칸을 잡고 그 안에서만 가운데맞춘다. */
.award-cert-recipient {
  position: absolute;
  /* 상장 그림을 직접 잰 값이다 — 안쪽 흰 바탕 3.8~96.2%,
     리본은 이 높이에서 42.6% 까지 온다. 그래서 왼쪽 끝을 45% 로 둔다. */
  top: 22.5%;
  left: 45%;
  right: 5.5%;
  height: 9%;
  transform: none;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 1.3rem;
  line-height: 1.15;
  font-weight: 700;
  color: #1a0800;
  white-space: normal;
  word-break: keep-all;
}

/* 상명: 이중선 위 넓은 공간.
   예전에는 nowrap + 고정 크기라 "Rock of the Family Award" 가 405px —
   상장 폭 420px 을 거의 다 먹고 테두리 밖으로 나갔다.
   칸을 정해 두고 길면 두 줄로 접힌다. 칸 높이가 고정이라
   한 줄이든 두 줄이든 아래 글이 밀리지 않는다. */
.award-cert-title {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;   /* 이 높이엔 리본이 없고 흰 바탕이 3.8~96.2% 이라 10~90% 는 안전하다 */
  height: 11%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 900;
  color: #1a0800;
  white-space: normal;
  word-break: keep-all;
  text-wrap: balance;
  letter-spacing: 0.06em;
}

/* ── 마무리 완성 섹션 ── */
.completion-section {
  position: relative;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: stretch;   /* layout이 section 너비 전체 사용 */
  gap: 16px;
  padding: 16px 8px 20px;
  background: linear-gradient(to bottom, #fdf6ec, #f7ede0);
  border-bottom: 2px solid var(--line);
}

.completion-layout {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 16px 36px;
  width: 100%;
  max-width: 860px;
  background: linear-gradient(to bottom, #fdf6ec, #f7ede0);
  border-radius: 8px;
  padding: 16px;
}

/* canvas-row는 항상 줄 전체 사용 (기본 모드) */
.completion-canvas-row {
  flex: 0 0 100%;
  width: 100%;
  text-align: center;
}

/* 저장본과 같은 합성 이미지 — 화면에 보이는 것은 이것 하나뿐이다.
   #completionLayout 은 표지·상장 글자를 읽어오는 원본으로만 DOM 에 남긴다. */
.completion-sheet-img {
  display: block;
  width: 100%;
  height: auto;
  align-self: center;
  border-radius: 6px;
}

.completion-section #completionLayout {
  display: none !important;
}

/* ── 가로 모드: 표지 | 캔버스 | 상장 – 좌우 꽉 채움, 동일 높이 ── */
/*
 * 세 조각이 모두 300dpi · 세로 3508px 이라 픽셀 폭을 그대로 flex 비율로 쓴다.
 *   face.png    2481×3508  (210mm)
 *   canvas3.png 7418×3508  (628mm) — 배경 테두리·장식 + 코드 레이어 합성본
 *   prize.png   2481×3508  (210mm)
 *   합계       12380×3508  (1048×297mm) → aspect-ratio 12380/3508
 * 세 이미지 모두 object-fit: contain — 비율이 어긋나도 자르지 않는다.
 */
.completion-layout.layout-h {
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  max-width: none;
  padding: 6px;
  gap: 6px;
  border-radius: 0;
  aspect-ratio: 12380 / 3508;   /* 2481 + 7418 + 2481 = 12380 */
}
.completion-layout.layout-h .completion-face-body {
  order: 1;
  flex: 2481 2481 0px;
  width: auto;
  min-width: 0;
  overflow: hidden;
}
.completion-layout.layout-h .completion-canvas-row {
  order: 2;
  flex: 7418 7418 0px;
  min-width: 0;
}
.completion-layout.layout-h .completion-cert-body {
  order: 3;
  flex: 2481 2481 0px;
  width: auto;
  min-width: 0;
  overflow: hidden;
}
/* 표지·상장: 비율 유지하며 contain (칸 비율을 맞췄으므로 여백도 거의 없다) */
.completion-layout.layout-h .completion-face-img,
.completion-layout.layout-h .completion-cert-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* 캔버스: 비율 유지하며 contain */
.completion-layout.layout-h .completion-canvas-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  max-height: unset;
}
/* 텍스트 오버레이: 컨테이너 높이 ~400px 기준 (기본 설계값 사용) */
.completion-layout.layout-h .completion-face-name    { font-size: 1.0rem; }
.completion-layout.layout-h .completion-cert-number  { font-size: 0.75rem; }
.completion-layout.layout-h .completion-cert-recipient { font-size: 1.05rem; }
.completion-layout.layout-h .completion-cert-title   { font-size: 1.3rem; }

/* ── 각각 모드: face / cert / canvas 세로 순서 ── */
.completion-layout.layout-v {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  gap: 24px;
}
.completion-layout.layout-v .completion-canvas-row {
  flex: 0 0 auto;
  width: 100%;
}

.completion-canvas-loading {
  margin: 8px 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.completion-canvas-img {
  width: 100%;
  display: block;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(53, 45, 36, 0.12);
}

.completion-face-body,
.completion-cert-body {
  position: relative;
  flex-shrink: 0;
  width: max-content;   /* div 너비를 이미지 크기에 정확히 고정 */
  overflow: hidden;     /* 혹시 남는 텍스트는 이미지 바깥으로 안 나가도록 */
}

.completion-face-img {
  height: 400px;
  width: auto;
  display: block;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(53, 45, 36, 0.15);
}

.completion-cert-img {
  height: 400px;
  width: auto;
  display: block;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(53, 45, 36, 0.15);
}

.completion-face-name {
  position: absolute;
  top: 39%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.0rem;
  font-family: "Gowun Batang", "Nanum Myeongjo", "Batang", serif;
  font-weight: 700;
  color: #4a2c0e;
  white-space: nowrap;
  pointer-events: none;
}

.completion-cert-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}

.completion-cert-number {
  position: absolute;
  top: 17.5%;
  left: 51%;
  font-size: 0.75rem;
  color: #3a2008;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.completion-cert-recipient {
  position: absolute;
  top: 25%;
  left: 56%;
  transform: translateX(-50%);
  font-size: 1.05rem;
  font-weight: 700;
  color: #1a0800;
  white-space: nowrap;
}

.completion-cert-title {
  position: absolute;
  top: 41%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.3rem;
  font-weight: 900;
  color: #1a0800;
  white-space: nowrap;
  letter-spacing: 0.1em;
}

.completion-congrats,
.completion-note {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.7;
  text-align: center;
  max-width: 680px;
  align-self: center;
}

/* 저장 버튼 아래 놓이는 화면 전용 안내문 — 문장이 한 줄에 들어가도록 폭을 넓게 */
.completion-note {
  margin-top: 14px;
  opacity: 0.8;
  max-width: 1040px;
}

.completion-note p {
  margin: 4px 0 0;
}

.completion-congrats b {
  color: var(--ink);
}

.completion-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
}

.completion-save-mode {
  display: flex;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.save-mode-btn {
  padding: 8px 20px;
  background: transparent;
  border: none;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background 0.15s, color 0.15s;
}

.save-mode-btn:hover {
  background: rgba(180, 100, 30, 0.08);
  color: var(--ink);
}

.save-mode-btn.active {
  background: var(--btn-warm);
  color: #fff;
}

.completion-save-btn {
  padding: 10px 28px;
  background: var(--btn-warm);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.03em;
}

.completion-save-btn:hover {
  background: var(--btn-warm-hover);
}

.completion-pdf-btn {
  background: var(--btn-dark);
}

.completion-pdf-btn:hover {
  background: var(--btn-dark-hover);
}

@media print {
  /* 페이지 여백 최소화 */
  @page { margin: 5mm; size: auto; }

  /* body min-height: 100vh 가 빈 2페이지 원인 → 인쇄 시 초기화 */
  html, body {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    background: #fff !important;
  }
  body::before { display: none !important; }

  /* 보관 섹션만 남기고 전부 숨긴다.
     이렇게 하지 않으면 앱의 다른 요소들이 함께 인쇄돼 페이지 수가 늘어난다. */
  body > *:not(.wrap),
  .wrap > *:not(#completionSection) { display: none !important; }

  /* 전체 모드: 합성 이미지 한 장만 */
  #completionSection > *:not(#completionSheetImg) { display: none !important; }

  /* 각각 모드: 조각별 레이아웃을 쓰고 합성 이미지는 뺀다 */
  #completionSection.print-each > #completionSheetImg { display: none !important; }
  #completionSection.print-each > #completionLayout { display: flex !important; }

  .obang-bar, .top-layout, .dev-stage-tabs,
  #canvasArea, .completion-actions, .completion-note, .completion-type-cta,
  .site-header, .toolbar, .guide-bar, .modal-back,
  .panel, .step-panel, .level-bubble, .bubble-connector { display: none !important; }

  /* wrap 하단 여백 제거 */
  .wrap { margin-bottom: 0 !important; min-height: 0 !important; }

  /* 보관 섹션 = 합성 이미지 한 장 */
  #completionSection {
    display: block !important;
    padding: 0 !important;
    gap: 0 !important;
    border: none !important;
    background: #fff !important;
  }

  /* 가로로 긴 한 장(1048×297mm)이라 가로 용지에 폭 맞춰 한 페이지로 */
  #completionSheetImg {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: 100vh !important;
    object-fit: contain !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* 레이아웃: 좌우 꽉 채워 한 페이지 */
  .completion-layout.layout-h {
    gap: 4px !important;
    padding: 0 !important;
    background: none !important;
    border-radius: 0 !important;
    max-width: none !important;
  }
  .completion-face-img, .completion-cert-img { box-shadow: none !important; }
  .completion-canvas-img { box-shadow: none !important; }
  .completion-congrats { font-size: 0.8rem; margin: 4px 0 0; }

  /* 각각 PDF: 아이템마다 새 페이지 */
  .completion-layout.save-each {
    flex-direction: column;
    align-items: center;
  }
  .completion-layout.save-each .completion-face-body,
  .completion-layout.save-each .completion-canvas-row,
  .completion-layout.save-each .completion-cert-body {
    flex: 0 0 auto !important;
    width: 100% !important;
    aspect-ratio: unset !important;
    page-break-after: always;
    break-after: page;
    display: flex;
    justify-content: center;
  }
  .completion-layout.save-each .completion-face-img,
  .completion-layout.save-each .completion-cert-img { height: 80vh; width: auto; }
  .completion-layout.save-each .completion-canvas-img { width: 90vw; height: auto; }
}

/* ── 마무리 카드 (face.png) ── */
.face-card {
  position: absolute;
  z-index: 5;
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(53, 45, 36, 0.18);
  overflow: hidden;
  user-select: none;
}

.face-move-tab {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  padding: 3px 10px;
  background: rgba(255, 248, 238, 0.9);
  border: 1.5px solid var(--line);
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: move;
  color: var(--muted);
}

.face-card-body {
  position: relative;
}

.face-img {
  width: 280px;
  display: block;
}

.face-name-overlay {
  position: absolute;
  top: 39%;
  right: 33%;
  font-size: 1.0rem;
  font-family: "Gowun Batang", "Nanum Myeongjo", "Batang", serif;
  font-weight: 700;
  color: #4a2c0e;
  white-space: nowrap;
  pointer-events: none;
}

/* ── 상말풍선 ── */
.award-bubble {
  position: absolute;
  z-index: 5;
  max-width: 300px;
  padding: 18px 20px 18px;
  border: 2.5px solid #c8904a;
  border-radius: 18px;
  background: #fffbf4;
  box-shadow: 0 8px 24px rgba(78, 49, 29, 0.18);
  pointer-events: auto;
}

.award-bubble-move {
  position: absolute;
  top: 8px;
  right: 8px;
  min-height: 26px;
  padding: 0 10px;
  border: 1.5px solid #c8964a;
  border-radius: 999px;
  background: rgba(255, 253, 242, 0.95);
  color: #7a4f1e;
  cursor: move;
  font-size: 0.8rem;
  font-weight: 800;
}

.award-bubble-content {
  padding-right: 36px;
  font-size: 0.92rem;
  line-height: 1.65;
  color: #3a2008;
}

.award-bubble-content p {
  margin: 0 0 8px;
}

.award-bubble-content p:last-child {
  margin-bottom: 0;
}

.award-bubble-footer {
  margin-top: 14px;
  text-align: center;
}

.award-confirm-btn {
  padding: 8px 24px;
  background: var(--btn-warm);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.04em;
}

.award-confirm-btn:hover {
  background: var(--btn-warm-hover);
}

/* 보관 이동 버튼 (상장 카드 하단에 위치, JS가 left/top 지정) */
.go-archive-btn {
  position: absolute;
  transform: translateX(-50%);
  padding: 12px 32px;
  background: var(--btn-warm);
  border: 2.5px solid var(--btn-warm);
  color: #fff;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  z-index: 10;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.go-archive-btn:hover {
  background: var(--btn-warm-hover);
}
.go-archive-btn.hidden {
  display: none;
}

/* ── 카드 앞으로 (B-4) ───────────────────────────────────── */
.card-front {
  z-index: 10 !important;
}

/* ── 제론테크 호버 버블 (B-5) ───────────────────────────── */
.gt-info-bubble {
  position: fixed;
  z-index: 10000;
  min-width: 260px;
  max-width: 320px;
  padding: 14px 16px 14px 14px;
  border: 2px solid #5a7fc4;
  border-radius: 12px;
  background: #f0f5ff;
  box-shadow: 0 8px 24px rgba(60,80,160,.18);
  font-size: 0.92rem;
  line-height: 1.5;
  pointer-events: auto;
}
.gt-info-bubble.hidden { display: none; }


/* Full-body drag cursors */
.gt-info-bubble:not(.hidden),
.step-panel,
.dream-bubble,
.level-bubble,
.gerontech-card {
  cursor: grab;
}
.gt-info-bubble:not(.hidden):active,
.step-panel:active,
.dream-bubble:active,
.level-bubble:active,
.gerontech-card:active {
  cursor: grabbing;
}
.gt-info-bubble button, .gt-info-bubble textarea, .gt-info-bubble input,
.step-panel button, .step-panel textarea, .step-panel input,
.step-panel [contenteditable],
.dream-bubble button, .dream-bubble [contenteditable],
.level-bubble button,
.gerontech-card button, .gerontech-card [contenteditable] {
  cursor: default;
}
.lifestyle-card:not(.sticker-active) { cursor: grab; }
.lifestyle-card:not(.sticker-active):active { cursor: grabbing; }
.lifestyle-card:not(.sticker-active) button { cursor: default; }

.gt-info-bubble.pinned {
  border-color: #3a5ab8;
  box-shadow: 0 8px 28px rgba(60,80,160,.28);
}
.gt-info-close {
  position: absolute;
  top: 6px; right: 8px;
  border: none; background: none;
  font-size: 0.85rem; cursor: pointer;
  color: #7a8cba;
}
.gt-info-icon {
  display: block;
  font-size: 1.6rem;
  margin-bottom: 4px;
}
.gt-info-title {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: #3a5ab8;
  margin-bottom: 4px;
}
.gt-info-desc {
  margin: 0 0 6px;
  color: #555;
  font-size: 0.88rem;
}
.gt-info-list {
  margin: 0;
  padding-left: 16px;
  color: #333;
}
.gt-info-list li { margin-bottom: 3px; }

.gt-opinion-area {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #a0b4e0;
}

.gt-opinion-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: #3a5ab8;
  margin-bottom: 5px;
}

.gt-opinion-input {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 10px;
  border: 1.5px solid #a0b4e0;
  border-radius: 8px;
  background: #fff;
  font-size: 0.88rem;
  line-height: 1.5;
  color: #333;
  resize: none;
  font-family: inherit;
}

.gt-opinion-input:focus {
  outline: none;
  border-color: #3a5ab8;
}

.gt-opinion-input:disabled {
  background: #f0f3fa;
  border-color: #c8d0e8;
  color: #999;
  cursor: not-allowed;
  resize: none;
}

.gt-opinion-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

.gt-opinion-save,
.gt-opinion-delete {
  padding: 6px 12px;
  border-radius: 7px;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}
.gt-opinion-save {
  border: 1px solid #6d83bd;
  background: #3a5ab8;
  color: #fff;
}
.gt-opinion-delete {
  border: 1px solid #c97171;
  background: #fff;
  color: #a63f3f;
}
.gt-opinion-save:hover:not(:disabled) { background: #2f4c9d; }
.gt-opinion-delete:hover { background: #fff0f0; }
.gt-opinion-save:disabled {
  background: #d8deed;
  border-color: #c8d0e8;
  color: #8792ad;
  cursor: not-allowed;
}

/* ── 활동 시간 슬라이더 (B-6) ───────────────────────────── */
.lifestyle-complete-action {
  min-width: 270px;
  min-height: 54px;
  font-size: 1.14rem;
}
.act-hour-ctrl {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 16px 0 18px;
  height: 27px;
}
.act-hour-btn {
  flex: 0 0 44px;
  height: 27px;
  border: none;
  background: #e07820;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s;
  user-select: none;
  -webkit-user-select: none;
}
.act-hour-btn:first-child { border-radius: 10px 0 0 10px; }
.act-hour-btn:active { background: #c46010; }
.act-hour-inc {
  border-radius: 0 10px 10px 0;
  flex: 0 0 44px;
}
.act-hour-bar-wrap {
  flex: 1;
  height: 100%;
  position: relative;
  background: #e8e0d8;
  overflow: hidden;
}
.act-hour-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: #f0921e;
  transition: width .18s ease;
}
.act-hour-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.25);
  pointer-events: none;
  white-space: nowrap;
}

.act-score-total {
  margin-top: 6px;
  font-size: 0.88rem;
  color: #888;
  text-align: right;
}

/* ── 이전/완료 버튼 행 (B-7) ────────────────────────────── */
.lifestyle-btn-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 0;
}
.lifestyle-btn-row .lifestyle-start-action {
  margin: 0;
  flex: 1;
  min-width: 0;
}
.lifestyle-back-btn {
  flex: 0 0 auto;
  height: 39px;
  min-height: 39px;
  box-sizing: border-box;
  padding: 0 22px;
  border: 2px solid #ef923e;
  border-radius: 999px;
  background: #fff2df;
  color: #ef923e;
  font-size: 1.1rem;
  font-weight: 900;
  cursor: pointer;
  transition: background .16s ease, transform .16s ease;
}
.lifestyle-back-btn:hover {
  background: #ffffff;
  transform: translateY(-1px);
}

/* ── 노후 삶의 유형 결과 섹션 ── */
.type-result-section {
  position: relative;
  z-index: 20;
  background: #f8f6f2;
  padding: 48px 24px 64px;
}
.type-result-inner {
  max-width: 760px;
  margin: 0 auto;
}

/* 헤더 */
.type-result-header {
  text-align: center;
  margin-bottom: 36px;
}
.type-result-name-line {
  font-size: 1.15rem;
  color: #7a6a55;
  margin-bottom: 12px;
}
.type-result-name {
  font-weight: 900;
  color: #4a3820;
}
.type-result-name-suffix {
  margin-left: 4px;
}
.type-result-code-wrap {
  margin: 12px 0 8px;
}
.type-result-code {
  display: inline-block;
  font-size: 2.6rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  color: #c47d2a;
  background: #fff8ee;
  border: 2.5px solid #e8c98a;
  border-radius: 16px;
  padding: 10px 32px;
}
.type-result-code-hint {
  font-size: 0.82rem;
  color: #aaa;
  margin: 6px 0 0;
  letter-spacing: 0.04em;
}

/* 로딩 */
.type-result-loading {
  text-align: center;
  color: #9a8060;
  font-size: 1rem;
  padding: 24px 0;
}

/* 4축 카드 그리드 */
.type-result-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 600px) {
  .type-result-cards { grid-template-columns: 1fr; }
}

/* 라이프스타일 카드는 전체 너비 */
.type-card-wide {
  grid-column: 1 / -1;
}

.type-card {
  background: #fff;
  border-radius: 16px;
  padding: 22px 20px 20px;
  border: 2px solid #e8dcc8;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  transition: box-shadow 0.18s ease;
}
.type-card:hover {
  box-shadow: 0 4px 18px rgba(0,0,0,0.10);
}

/* 축별 강조색 */
.type-card-curve     { border-top: 4px solid #5b8dd9; }
.type-card-dream     { border-top: 4px solid #e97a43; }
.type-card-lifestyle { border-top: 4px solid #6bba72; }
.type-card-gerontech { border-top: 4px solid #9b6bd4; }

.type-card-axis {
  font-size: 0.78rem;
  font-weight: 700;
  color: #aaa;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.type-card-badge {
  display: inline-block;
  font-size: 1.7rem;
  font-weight: 900;
  color: #4a3820;
  line-height: 1;
  margin-bottom: 6px;
}
.type-card-name {
  font-size: 1.05rem;
  font-weight: 800;
  color: #333;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.type-card-subtype {
  font-size: 0.8rem;
  font-weight: 600;
  color: #fff;
  background: #e97a43;
  border-radius: 20px;
  padding: 2px 10px;
}
.type-card-desc {
  font-size: 0.88rem;
  color: #666;
  line-height: 1.65;
  margin: 0;
}

/* 라이프스타일 3단계 열 */
.ls-stage-cols {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.ls-col {
  flex: 1;
  text-align: center;
  background: #faf7f2;
  border-radius: 8px;
  padding: 10px 8px;
  border: 1px solid #e8dcc8;
}
.ls-col-head {
  font-size: 0.78rem;
  font-weight: 700;
  color: #9a8060;
  margin-bottom: 6px;
}
.ls-col-head-main   { color: #3a7a3a; }
.ls-col-head-body23 { color: #3a5a9a; }
.ls-col-head-body12 { color: #8a4a9a; }
.ls-col-type {
  font-size: 0.9rem;
  font-weight: 800;
  color: #4a3820;
}

/* 보관함으로 버튼 */
.type-result-back {
  text-align: center;
  margin-top: 36px;
}
.type-result-back-btn {
  background: none;
  border: 2px solid #c47d2a;
  color: #c47d2a;
  border-radius: 999px;
  padding: 10px 28px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.16s ease;
}
.type-result-back-btn:hover {
  background: #fff8ee;
}

/* 이야기 생성 버튼 */
.type-story-cta {
  text-align: center;
  margin-top: 28px;
}
.generate-story-btn[hidden] {
  display: none;
}
.generate-story-btn {
  display: inline-block;
  background: #fff;
  color: #5b6a8a;
  border: 2px solid #8fa8d0;
  border-radius: 999px;
  padding: 12px 32px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.16s, transform 0.16s;
}
.generate-story-btn:hover:not(:disabled) {
  background: #f0f5ff;
  transform: translateY(-1px);
}
.generate-story-btn:disabled {
  opacity: 0.5;
  cursor: wait;
}

/* 이야기 섹션 */
.type-story-section {
  margin-top: 24px;
  background: #fff;
  border-radius: 16px;
  border: 1.5px solid #dde6f5;
  padding: 28px 28px 24px;
}
.type-story-loading {
  text-align: center;
  color: #8fa8d0;
  font-size: 0.95rem;
  padding: 12px 0;
}
.type-story-content {
  font-size: 0.97rem;
  line-height: 2;
  color: #3a3a3a;
  white-space: pre-wrap;
}

/* "유형 보기" CTA 버튼 (completionSection 하단) */
.completion-type-cta {
  text-align: center;
  margin-top: 24px;
  padding-bottom: 8px;
}
.go-type-result-btn {
  display: inline-block;
  background: linear-gradient(135deg, #c47d2a, #e8a84a);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 14px 36px;
  font-size: 1.1rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(196,125,42,0.28);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.go-type-result-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(196,125,42,0.38);
}

/* ── 제론테크 쇼케이스 */
.gt-showcase-popup { position:absolute; z-index:320; width:300px; background:#fff; border:2.5px solid #ccc; border-radius:14px; padding:14px 16px 16px; box-shadow:0 6px 28px rgba(0,0,0,0.18); pointer-events:none; font-size:0.82rem; line-height:1.55; color:#333; }
.gt-showcase-popup.hidden { display:none; }
.gt-sc-header { display:flex; align-items:baseline; gap:8px; margin-bottom:10px; }
.gt-sc-round-label { font-weight:800; font-size:0.88rem; }
.gt-sc-age { font-size:0.78rem; color:#777; }
.gt-sc-section-title { font-weight:700; font-size:0.80rem; margin-bottom:4px; color:#555; }
.gt-sc-before p { margin:0 0 3px; color:#666; font-size:0.81rem; line-height:1.3; }
.gt-sc-after p { margin:0 0 3px; color:#1a5a3a; font-size:0.81rem; line-height:1.3; }
.gt-sc-loading { color:#aaa; font-size:0.80rem; font-style:italic; text-align:center; padding:8px 0; }
.gt-showcase-panel-title { font-size:1.18rem; font-weight:800; color:#4a3000; margin:0; }
.gt-showcase-panel-desc { font-size:0.88rem; color:#66594e; line-height:1.55; margin:6px 0 14px; }
.gt-showcase-hint { display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.gt-showcase-hint-item { display:flex; align-items:center; gap:8px; font-size:0.83rem; color:#555; }
.gt-showcase-hint-dot { width:14px; height:14px; border-radius:50%; flex-shrink:0; border:2.5px solid; }

.change-view-heading {
  display: flex;
  align-items: center;
}

.change-view-heading-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0;
}

.change-view-eyebrow {
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid #d8c8b9;
  color: #9a5a2e;
  font-size: 0.76rem;
  font-weight: 800;
}

.change-view-count {
  flex: 0 0 auto;
  min-width: 48px;
  padding: 4px 8px;
  border: 1px solid #d8c8b9;
  border-radius: 6px;
  background: #fff;
  color: #67584c;
  font-size: 0.76rem;
  font-weight: 800;
  text-align: center;
}

/* 구 4단 .change-view-tabs 규칙 제거 — 마크업에서 쓰이지 않던 죽은 규칙이었고,
   전/후 스윕 탭이 같은 이름을 쓰게 되어 gap·margin 이 새어 들어갔다.
   현재 정의는 아래 "전/후 스윕" 절에 있다. */

.change-view-explore-guide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: -4px 0 10px;
  padding: 8px 10px;
  border: 1px solid #b8cbe1;
  border-radius: 6px;
  background: #eef5fc;
  color: #3e5f82;
  font-size: 0.76rem;
  line-height: 1.4;
}

.change-view-explore-guide button {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 4px 10px;
  border: 1px solid #6f92bb;
  border-radius: 5px;
  background: #fff;
  color: #315f91;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
}

.change-view-explore-guide button:hover {
  background: #dfeefa;
}

/* 구 4단 .change-view-tab 규칙 제거 — 마크업에서 쓰이지 않던 죽은 규칙인데
   전/후 스윕 탭이 같은 이름을 쓰게 되면서 border-radius: 6px 와
   .change-view-tab span { display: block } 이 새 탭·화살표에 새어 들어갔다.
   현재 정의는 아래 "전/후 스윕" 절에 있다. */

.change-view-case {
  border-top: 1px solid #ddcdbf;
  border-bottom: 1px solid #ddcdbf;
  background: #fff;
}

.change-view-case-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 2px 9px;
}

.change-view-age {
  color: #a35d2d;
  font-size: 0.76rem;
  font-weight: 800;
}

.change-view-case-head h3 {
  margin: 0;
  color: #3e342d;
  font-size: 1.02rem;
}

.change-view-levels {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}

.change-view-levels span {
  padding: 3px 7px;
  border-radius: 5px;
  font-size: 0.72rem;
  font-weight: 700;
}

.change-view-tech-list span {
  padding: 4px 9px;
  border-radius: 5px;
  font-size: 0.82rem;
  font-weight: 700;
}

.change-view-levels .is-body { background: #fde3e3; color: #9b3a3a; }
.change-view-levels .is-mind { background: #e3effb; color: #2f68a0; }
.change-view-levels .is-social { background: #e1f2e8; color: #287552; }

/* ── 전/후 스윕 ───────────────────────────────────────────────
   두 면의 내용은 항상 DOM 에 있고, 보이는 면만 translateX 로 바꾼다.
   2단으로 나누지 않으므로 텍스트 폭이 260px → 약 584px 로 넓어지고,
   가이드 창(.step-panel 0.95rem)과 같은 글자 크기를 쓸 수 있다. */
.change-view-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid #eee4dc;
}

.change-view-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: #f1ebe5;
  color: #8a7c70;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: background .18s, color .18s, border-color .18s;
}

.change-view-tab + .change-view-tab {
  border-left: 1px solid #ddd3ca;
}

.change-view-tab:hover {
  background: #ece4dc;
  color: #6d6055;
}

.change-view-tab[data-face="before"][aria-selected="true"] {
  background: #f7f4f1;
  border-bottom-color: #a9968a;
  color: #4d4037;
}

/* 아직 안 연 '달라지는 점' 탭: 회색(=비활성)으로 읽히지 않도록 초록 계열로 둔다.
   열었을 때 나올 화면(연초록)을 색으로 미리 알린다. */
.change-view-tab[data-face="after"] {
  background: #e4f1e9;
  color: #2f7a55;
}

.change-view-tab[data-face="after"]:hover {
  background: #d8ebe0;
  color: #235f42;
}

.change-view-tab[data-face="after"][aria-selected="true"] {
  background: #eef7f1;
  border-bottom-color: #3d9267;
  color: #256a48;
}

.change-view-tab-arrow {
  font-size: 1.05em;
  line-height: 1;
  transition: transform .18s;
}

/* 열려 있는 동안에는 화살표가 방향을 가리킬 필요가 없다 */
.change-view-tab[aria-selected="true"] .change-view-tab-arrow {
  opacity: 0;
}

.change-view-tab[data-face="after"]:hover .change-view-tab-arrow {
  transform: translateX(3px);
}

/* 변화보기 진입 시 딱 2회만 부드럽게 번진다. 지속 점멸은 쓰지 않는다. */
.change-view-tab.is-hint {
  animation: change-view-tab-hint 1.1s ease-out 2;
}

@keyframes change-view-tab-hint {
  0%, 100% { background: #e4f1e9; box-shadow: none; }
  45%      { background: #cdeada; box-shadow: inset 0 0 0 2px rgba(61, 146, 103, .55); }
}

.change-view-compare {
  overflow: hidden;
}

.change-view-track {
  display: grid;
  grid-template-columns: 100% 100%;
  /* stretch 로 두 면이 같은 높이를 채운다. start 로 두면 짧은 면 아래가
     배경 없이 비어 "내용이 여기서 끝"으로 오해된다. */
  align-items: stretch;
  transition: transform .2s ease;
}

.change-view-compare[data-face="after"] .change-view-track {
  transform: translateX(-100%);
}

.change-view-compare section {
  min-width: 0;
  padding: 14px 16px;
}

.change-view-before {
  background: #f7f4f1;
}

.change-view-after {
  background: #eef7f1;
}

@media (prefers-reduced-motion: reduce) {
  .change-view-track { transition: none; }
  .change-view-tab.is-hint { animation: none; }
  .change-view-tab-arrow { transition: none; }
}

/* 다른 가이드 창과 같은 방식(block 목록)으로 둔다.
   grid + gap 을 쓰면 .step-panel li 의 마진이 상쇄되지 않아
   항목 사이가 3+6+3=12px 로 벌어졌다. 간격은 .step-panel li 마진이 담당한다. */
.change-view-case ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.change-view-case li {
  color: #554b43;
  font-size: 1rem;      /* 가이드 창 본문 공통 크기 */
  line-height: 1.4;     /* 가이드 창 본문 공통 줄간격 */
}

.change-view-before li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);   /* 0.95rem 의 "신체/정신/사회" 폭 */
  gap: 8px;
}

.change-view-before li strong {
  color: #75665b;
}

.change-view-after li::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 7px 1px 0;
  border-radius: 50%;
  background: #3d9267;
}

/* 어느 문장이 어느 기술인지 앞머리에 붙인다.
   아래 이름표만 따로 있을 때는 둘이 이어지지 않았다. */
.change-view-after li strong {
  color: #2f6b4c;
  font-weight: 700;
}
.change-view-after li strong::after {
  content: " · ";
  color: #9bc4aa;
  font-weight: 400;
}

/* 변화 체험 도입 화면. 본문을 조금 크게, 줄 사이를 넓게 둔다. */
.change-view-intro {
  margin: 14px 0 4px;
  color: #4a4038;
  font-size: 1rem;
  line-height: 1.75;
}
.change-view-intro p { margin: 0 0 10px; }
.change-view-intro p:last-child { margin-bottom: 0; }

.change-view-tech-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 10px;
}

.change-view-tech-list span {
  border: 1px solid #9bc4aa;
  background: #fff;
  color: #286947;
}

.change-view-tech-list .is-empty {
  border-color: #cfc5bc;
  color: #887b70;
}

.change-view-direction {
  padding: 12px;
  border-top: 1px solid #eee4dc;
}

.change-view-direction dl {
  display: grid;
  gap: 7px;
  margin: 0;
}

.change-view-direction dl > div {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 10px;
}

.change-view-direction dt {
  color: #9a5a2e;
  font-size: 0.76rem;
  font-weight: 800;
}

.change-view-direction dd {
  margin: 0;
  color: #5c5047;
  font-size: 0.78rem;
  line-height: 1.45;
}

.change-view-empty {
  margin: 0;
  color: #5c5047;
  font-size: 1rem;      /* 가이드 창 본문 공통 크기 */
  line-height: 1.4;     /* 가이드 창 본문 공통 줄간격 */
}

.change-view-footer {
  display: grid;
  grid-template-columns: minmax(110px, 0.7fr) minmax(180px, 1.3fr);
  gap: 8px;
  margin-top: 10px;   /* 가이드 창 버튼과 동일한 상단 여백 */
}

.change-view-footer.is-end {
  display: flex;
  justify-content: flex-end;
}

/* '변화보기 종료'를 가이드 창 버튼(.dream-guide-action 등)과 같은 모양으로 맞춘다.
   btn·btn-primary 의 어두운 사각 스타일을 덮어써야 하므로 선택자를 더 구체적으로 쓴다. */
.change-view-footer.is-end .change-view-next,
.change-view-footer.is-end .btn.change-view-next {
  min-width: 270px;
  height: 40px;
  min-height: 40px;
  padding: 0 26px;
  border: 2px solid #b66f34;
  border-radius: 999px;
  background: #fff0df;
  color: #4d392b;
  font-size: 1.1rem;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(184, 111, 52, .08);
  transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.change-view-footer.is-end .change-view-next:hover,
.change-view-footer.is-end .btn.change-view-next:hover {
  background: #ffffff;
  border-color: var(--btn-warm);
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(184, 111, 52, .12);
}

.change-view-footer .btn {
  min-height: 40px;
  justify-content: center;
}

.change-view-prev {
  border: 1px solid #bca996;
  background: #fff;
  color: #57483c;
}

.change-view-prev:disabled {
  opacity: 0.45;
  cursor: default;
}

@media (max-width: 900px) {
  .step-panel.gt-showcase-panel {
    width: auto;
    max-height: none;
  }

  /* 스윕 구조에서는 좁은 화면에서도 한 면씩 전체 폭으로 보이므로
     2단 해제·구분선 규칙이 필요 없다. 탭 글자만 줄인다. */
  .change-view-tab {
    padding: 8px 6px;
    font-size: 0.84rem;
  }
}


/* 활동 곡선 그리기 완료 버튼 */
#curveDoneBtn {
  display: block;
  margin: 10px 0 0 auto;
  border: 2px solid #b87745;
  background: #fff0df;   /* 버튼 공통 배경 */
  color: #4d392b;
}

/* 커브 작성 완료(review) 버튼 활동별 색상 */
.step-panel.review-body #curveDoneBtn {
  border-color: #d84b4b;
  background: #fff8f8;
}
.step-panel.review-mind #curveDoneBtn {
  border-color: #3f7fc2;
  background: #f5faff;
}
.step-panel.review-social #curveDoneBtn {
  border-color: #2f9362;
  background: #f4fbf7;
}
.step-panel.review-body #curveDoneBtn:hover,
.step-panel.review-mind #curveDoneBtn:hover,
.step-panel.review-social #curveDoneBtn:hover {
  background: #ffffff;
}

/* 조정 패널 버튼 스타일 */
.step-panel.longevity-panel .step-panel-action {
  display: block;
  margin: 10px 0 0 auto;
  border: 2px solid #b87745;
  background: #fff0df;   /* 버튼 공통 배경 */
  color: #4d392b;
}

.step-panel.longevity-panel .step-panel-action:hover {
  background: #ffffff;
}

.step-panel.longevity-panel .step-panel-resize-handle:hover,
.step-panel.longevity-panel .step-panel-resize-corner:hover {
  background: rgba(184,119,69,.35);
}

/* longevity-panel 활동별 버튼 색상 */
.step-panel.longevity-panel.longevity-body .step-panel-action {
  border: 2px solid #d84b4b;
  background: #fff8f8;
}

.step-panel.longevity-panel.longevity-mind .step-panel-action {
  border: 2px solid #3f7fc2;
  background: #f5faff;
}

.step-panel.longevity-panel.longevity-social .step-panel-action {
  border: 2px solid #2f9362;
  background: #f4fbf7;
}

.step-panel.body-adjust-panel .step-panel-action {
  display: block;
  margin: 10px 0 0 auto;
  border: 2px solid #d84b4b;
  background: #fff8f8;
  color: #4d392b;
}

.step-panel.body-adjust-panel .step-panel-action:hover {
  background: #ffffff;
}

.step-panel.body-adjust-panel .step-panel-resize-handle:hover,
.step-panel.body-adjust-panel .step-panel-resize-corner:hover {
  background: rgba(216,75,75,.35);
}

.step-panel.mind-adjust-panel .step-panel-action {
  display: block;
  margin: 10px 0 0 auto;
  border: 2px solid #3f7fc2;
  background: #f5faff;
  color: #4d392b;
}

.step-panel.mind-adjust-panel .step-panel-action:hover {
  background: #ffffff;
}

.step-panel.mind-adjust-panel .step-panel-resize-handle:hover,
.step-panel.mind-adjust-panel .step-panel-resize-corner:hover {
  background: rgba(63,127,194,.35);
}

.step-panel.social-adjust-panel .step-panel-action {
  display: block;
  margin: 10px 0 0 auto;
  border: 2px solid #2f9362;
  background: #f4fbf7;
  color: #4d392b;
}

.step-panel.social-adjust-panel .step-panel-action:hover {
  background: #ffffff;
}

.step-panel.social-adjust-panel .step-panel-resize-handle:hover,
.step-panel.social-adjust-panel .step-panel-resize-corner:hover {
  background: rgba(47,147,98,.35);
}

/* Guide panels clip resized content and scroll internally. */
#stepPanel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}

#stepPanelContent {
  flex: 1 1 auto;
  min-height: 0;
  max-width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
}

#levelBubble.future-bubble .future-scroll-body {
  min-height: 0;
  max-width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
}
/* Guide panels use natural initial height and scroll only after manual resize. */
#stepPanel:not(.resized) #stepPanelContent,
#planningRight .step-panel.mini-float:not(.resized) #stepPanelContent {
  max-height: none;
  overflow: visible;
}

#stepPanel.resized #stepPanelContent {
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

/* 이 말풍선은 안내창과 다르다. app.js 가 배경창 높이에 맞춰 max-height 를
   묶어 놓기 때문에, 여기서 overflow 를 visible 로 두면 넘친 만큼 그냥 잘린다.
   예전에는 영역별 생활 여섯 줄이 338px 안쪽으로 숨어 손도 못 대했다. */
#levelBubble.future-bubble:not(.resized) .future-scroll-body {
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
}

#levelBubble.future-bubble.resized .future-scroll-body {
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
}
/* Step panels become free-positioned on first interaction. */
#stepPanel.panel-free {
  transform: none !important;
  right: auto !important;
  bottom: auto !important;
  max-width: none !important;
}

#stepPanel .step-panel-resize-handle[data-dir="n"],
#stepPanel .step-panel-resize-handle[data-dir="s"] {
  left: 14px;
  right: 14px;
  width: auto;
  height: 8px;
}
#stepPanel .step-panel-resize-handle[data-dir="n"] {
  top: 0;
  bottom: auto;
  cursor: ns-resize;
}
#stepPanel .step-panel-resize-handle[data-dir="s"] {
  top: auto;
  bottom: 0;
  cursor: ns-resize;
}
#stepPanel .step-panel-resize-handle[data-dir="e"],
#stepPanel .step-panel-resize-handle[data-dir="w"] {
  top: 14px;
  bottom: 14px;
  width: 8px;
  height: auto;
}
#stepPanel .step-panel-resize-handle[data-dir="e"] {
  left: auto;
  right: 0;
  cursor: ew-resize;
}
#stepPanel .step-panel-resize-handle[data-dir="w"] {
  left: 0;
  right: auto;
  cursor: ew-resize;
}
#stepPanel .step-panel-resize-corner[data-dir="ne"],
#stepPanel .step-panel-resize-corner[data-dir="se"],
#stepPanel .step-panel-resize-corner[data-dir="sw"],
#stepPanel .step-panel-resize-corner[data-dir="nw"] {
  width: 14px;
  height: 14px;
  border-radius: 0;
}
#stepPanel .step-panel-resize-corner[data-dir="ne"] {
  top: 0;
  right: 0;
  cursor: nesw-resize;
  border-radius: 0 8px 0 0;
}
#stepPanel .step-panel-resize-corner[data-dir="se"] {
  right: 0;
  bottom: 0;
  cursor: nwse-resize;
  border-radius: 0 0 8px 0;
}
#stepPanel .step-panel-resize-corner[data-dir="sw"] {
  bottom: 0;
  left: 0;
  cursor: nesw-resize;
  border-radius: 0 0 0 8px;
}
#stepPanel .step-panel-resize-corner[data-dir="nw"] {
  top: 0;
  left: 0;
  cursor: nwse-resize;
  border-radius: 8px 0 0 0;
}/* Dream guide releases its stacked layout on first interaction. */
/* 끌어서 옮기는 중에만 흐름에서 떠오른다. 공통 규칙(위)보다 특이도가 높아야
   하므로 #planningRight 를 함께 적는다. JS 도 인라인으로 같은 값을 박는다. */
#stepPanel.panel-free,
#planningRight .step-panel.mini-float.panel-free {
  position: absolute !important;
  margin: 0 !important;
  z-index: 10;
}

/* 맞이 화면 ------------------------------------------------------------
   시뮬레이션을 처음 시작할 때 한 번 나온다. 참여자 상당수가 나이 드신
   분들이라 글자를 크게, 줄 간격을 넉넉히 둔다. */
.welcome-overlay {
  position: fixed; inset: 0; z-index: 12000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(60, 48, 36, 0.55);
}
.welcome-overlay[hidden] { display: none; }

/* 시기 선택을 마치면 짜인 작성 레이아웃 위에 한 번 뜨는 설명 창.
   뒤의 레이아웃이 비치도록 덮개를 연하게 둔다 — 무엇을 설명하는지
   눈으로 보면서 읽게 하려는 창이라서다. */
#planningIntroOverlay { background: rgba(60, 48, 36, 0.38); }
/* .welcome-card 는 가운데맞춤이다. 이 창은 여러 줄로 접히는 글이라
   가운데를 맞추면 줄마다 왼쪽 끝이 움직여 다음 줄을 못 찾는다.
   굵기를 같이 주면 뒤에 오는 .welcome-card 가 이기므로 겹쳐 쓴다. */
.welcome-card.planning-intro-card {
  text-align: left;
  /* 한국어는 이것이 없으면 낱말 가운데서 줄이 끊긴다 ("시기" → "시 / 기"). */
  word-break: keep-all;
}
.planning-intro-card .welcome-brand { text-align: center; }
.planning-intro-card .welcome-start { display: block; margin-left: auto; margin-right: auto; }
.planning-intro-card .intro-lead { margin: 0 0 16px; }
.planning-intro-card .intro-stages {
  margin: 0 0 16px;
  padding: 14px 18px;
  border-left: 3px solid #b87745;
  border-radius: 0 8px 8px 0;
  background: rgba(184, 119, 69, 0.07);
}
/* 단계 이름을 한 칸으로 잡아 설명이 그 아래로 흘러도 들여쓰기가 유지된다.
   예전에는 접힌 줄이 "와 바람이 있습니다" 처럼 조각으로 시작했다. */
.planning-intro-card .intro-stages p {
  display: grid;
  grid-template-columns: 4.2em minmax(0, 1fr);
  gap: 0 10px;
  margin: 0 0 10px;
}
.planning-intro-card .intro-stages p:last-child { margin-bottom: 0; }
.planning-intro-card .intro-stages b { color: #8a5a30; }
.planning-intro-card .intro-tail { margin: 0 0 8px; }
.journey-overview-steps {
  margin: 18px auto;
  padding-left: 28px;
  max-width: 480px;
  text-align: left;
  line-height: 1.65;
}
.welcome-card.journey-overview-card {
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.journey-overview-card .welcome-brand { font-size: 28px; }
.welcome-card .journey-overview-summary { margin: 16px 0 20px; }
.welcome-card {
  max-width: 640px; width: 100%;
  max-height: calc(100vh - 48px); overflow-y: auto;
  padding: 44px 48px 40px;
  border-radius: 20px;
  background: #fffaf3;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
  text-align: center;
  color: #5c4b3c;
  font-size: 19px;
  line-height: 1.9;
}
.welcome-card p { margin: 0 0 6px; }
.welcome-hello {
  font-size: 15px; letter-spacing: 0.18em; text-transform: uppercase;
  color: #a8763f; margin-bottom: 4px;
}
.welcome-brand {
  margin: 0 0 22px;
  font-family: "Gowun Batang", serif;
  font-size: 34px; font-weight: 700; color: #7b6a59;
  line-height: 1.2;
}
.welcome-ask { margin: 22px 0 26px; font-weight: 700; color: #7b6a59; }
.welcome-start {
  padding: 14px 46px;
  border: none; border-radius: 999px;
  background: #a8763f; color: #fff;
  font-family: inherit; font-size: 18px; font-weight: 700; cursor: pointer;
  box-shadow: 0 6px 18px rgba(168, 118, 63, 0.35);
}
.welcome-start:hover, .welcome-start:focus { background: #8e6234; }
.welcome-mute { margin: 18px 0 0; font-size: 14px; color: #9b8a78; }
.welcome-mute-btn {
  padding: 2px 4px; border: none; background: none; cursor: pointer;
  font-family: inherit; font-size: 14px; color: #9b8a78; text-decoration: underline;
}
.welcome-mute-btn:hover, .welcome-mute-btn:focus { color: #a8763f; }
@media (max-width: 560px) {
  .welcome-card { padding: 32px 24px 28px; font-size: 17px; }
  .welcome-brand { font-size: 27px; }
}