/* css/s-home.css — 담당: home. 마을 홈(BUILD 5-2, UX K1, FUN 2-4·5-1·5-2). 접두 home- 만 정의.
   지도·길 점·큰 단추·아래 두 단추가 한 화면에 들어오게(가로 넘침 없음).
   지도는 남는 높이만큼 차지한다(flex 1 + 컨테이너 단위). 홈은 한 화면·스크롤 0이 목표(5~7세는 스크롤해서 찾지 않음,
   kidux3·robust3 QA): 지도 폭 하한을 250px(보통)·200px(높이 780 이하)·160px(세로 높이 700 이하)로 두어
   360×640·320×568까지 길 점·[출발!]·[어른한테 말할래]가 한 화면에 들어옴. 세로 700 이하에서는 안내 한 줄을 화면에서만 감춤
   (5~7세는 읽어 주고, 화면 읽기에는 그대로 남음). 그보다 더 낮으면 스크롤되지만 [출발!]과 아래 줄은 화면 아래에 붙어 있음(sticky 띠).
   가로 화면(높이 900 이하: 가로 폰·태블릿·노트북)은 지도 왼쪽·나머지 오른쪽 2단.
   되풀이 움직임은 주기 2초 이상·낮은 대비만. 움직임 줄이기는 base.css 전역 블록이 0.01ms로 줄임 + 아래 블록. */

.home-screen{
  /* router 가 #app 에 .app-screen(위 12·아래 88 여백)을 붙임. 홈은 한 화면에 다 들어가야 해서 그 여백을 되돌려 씀 */
  display:flex; flex-direction:column; gap:8px;
  width:100%; max-width:480px; margin:0 auto;
  padding:calc(8px + env(safe-area-inset-top, 0px)) 16px calc(var(--action-bottom, 30px) + env(safe-area-inset-bottom, 0px));
  min-height:100vh; min-height:100dvh;
  overflow-x:hidden; overflow-x:clip;   /* clip: 스크롤 상자를 만들지 않아 아래 줄 sticky 가 됨 */
}
.app-screen > .home-screen{
  width:auto;
  margin:calc(-12px - env(safe-area-inset-top, 0px)) -16px calc(-88px - env(safe-area-inset-bottom, 0px));
}
.home-screen > *{ min-width:0; }

/* 위: [어른] 왼쪽 · 레벨 칩 오른쪽 */
.home-head{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  min-height:var(--touch-child, 56px);
}
.home-adult.secondary-button{
  position:relative; width:auto; flex:none;
  min-width:var(--touch-child, 56px); min-height:var(--touch-child, 56px);
  padding:6px 18px; border-radius:var(--radius-pill, 999px);
  font-size:var(--fs-child-body, 18px);
}
/* A 카드가 있을 때: 글자 없는 점(모양 + 테두리, 색만으로 구분하지 않음) */
.home-adult-dot{
  position:absolute; top:5px; right:5px;
  width:12px; height:12px; border-radius:50%;
  background:var(--color-coral, #F3B7A0); border:2px solid var(--color-ink, #5A3E2B);
}
/* 레벨 칩: 알약 대신 불규칙하게 둥근 조약돌(SVG 바탕) + 칭호 배지 + '탐험가 Lv.L'(gpt-v3·review-v2 #2) */
.home-level.level-chip{
  position:relative; isolation:isolate; margin-left:auto;
  background:transparent; border:0; border-radius:0;
  padding:4px 16px 4px 8px; gap:6px;
}
.home-level-pebble{ position:absolute; inset:0; z-index:-1; pointer-events:none; }
.home-level-pebble svg{ display:block; width:100%; height:100%; overflow:visible; }
.home-level-pebble path{
  fill:var(--kid-surface, #fff); stroke:var(--kid-border-press, #9C7F67); stroke-width:2;
  vector-effect:non-scaling-stroke;
}
button.home-level.level-chip:focus-visible{ outline-offset:2px; }
.home-level .home-level-num{ font-size:18px; letter-spacing:-.01em; }
.theme-child[data-age="young"] .home-level .home-level-num{ font-size:16px; }
.home-level .home-level-art,
.home-level .level-chip__badge > span{ display:block; width:100%; height:100%; }
.home-level .level-chip__badge svg,
.home-level .level-chip__badge img{ width:100%; height:100%; object-fit:contain; display:block; }

/* 지도: 세로 752×1344. 컨테이너 단위를 모르는 옛 브라우저: 화면 높이에서 위·아래 고정 몫을 뺀 만큼 */
.home-mapwrap{ display:flex; justify-content:center; min-width:0; }
.home-screen{ --home-map-minw:min(calc(100vw - 32px), 250px); }
@media (max-height: 780px){ .home-screen{ --home-map-minw:min(calc(100vw - 32px), 200px); } }
@media (orientation: portrait) and (max-height: 700px){
  .home-screen{ --home-map-minw:min(calc(100vw - 32px), 160px); }
  /* 안내 한 줄은 화면에서만 감춤(화면 읽기에는 남김): 길 점·지도에 자리를 줌 */
  .home-screen[data-state="map"] > .home-line{
    position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
    clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
  }
  /* 지도가 좁아지면(폭 160~200) 이름표도 작게: 이웃 이름표·장소에 덜 걸치게 */
  .home-map .home-place-name,
  .theme-child[data-age="young"] .home-map .home-place-name{ font-size:12px; padding:1px 6px; gap:2px; }
}
.home-map{
  --home-fixed:330px;
  position:relative;
  width:clamp(var(--home-map-minw), calc((100vh - var(--home-fixed)) * 0.5595), 100%);
  width:clamp(var(--home-map-minw), calc((100dvh - var(--home-fixed)) * 0.5595), 100%);
  aspect-ratio:752 / 1344;
  border-radius:var(--radius-card, 24px);
  box-shadow:var(--shadow-card);
  background:var(--kid-green, #CFE8C6);
}
/* 컨테이너 단위를 아는 브라우저: 지도 칸이 남는 높이를 받고(flex 1), 지도는 그 칸 안에 비율대로 들어감 */
@supports (container-type: size){
  .home-screen[data-state="map"] .home-mapwrap{
    flex:1 1 0; min-height:calc(var(--home-map-minw) / 0.5595);
    container-type:size;
    align-items:flex-start;
  }
  .home-screen[data-state="map"] .home-map{
    width:min(100cqw, calc(100cqh * 0.5595));
    max-width:100%;
  }
}
.home-map-bg{
  position:absolute; inset:0; overflow:hidden;
  border-radius:inherit;
}
.home-map-bg > *, .home-map-bg img, .home-map-bg svg{
  position:absolute; inset:0; display:block;
  width:100%; height:100%; min-height:0; object-fit:cover; border-radius:0;
}
.home-svg{ display:block; width:100%; height:100%; }
.home-svg > svg{ display:block; width:100%; height:100%; }

/* 장소 아이콘(누름 56 이상) */
.home-map .home-place.ghost-button{
  position:absolute; z-index:3;
  width:24%; min-width:var(--touch-child, 56px); min-height:0; aspect-ratio:1;
  padding:0; margin:0;
  transform:translate(-50%, -50%);
  background:transparent; border:0; border-radius:50%;
}
.home-map .home-place.ghost-button:active{ background:transparent; transform:translate(-50%, -50%) scale(.96); }
.home-place > .home-place-art, .home-place > img, .home-place > .fallback-box{
  position:absolute; inset:0; width:100%; height:100%; min-height:0; object-fit:contain; display:block;
}
.home-place > .fallback-box{ border-radius:50%; }
.home-place.is-home{ width:26%; }
/* 닫힌 장소: 흐린 그림 + 닫힌 문 모양(자물쇠 아님) */
.home-place.is-closed > .home-place-art,
.home-place.is-closed > img{ filter:saturate(.45) brightness(.98); opacity:.8; }
.home-place-shut{
  position:absolute; left:50%; bottom:18%; width:22%; height:28%;
  transform:translateX(-50%);
  background:#B98B66; border:2px solid var(--color-ink, #5A3E2B);
  border-radius:40% 40% 4px 4px;
}
.home-place-shut::after{   /* 문고리 */
  content:""; position:absolute; right:18%; top:52%;
  width:4px; height:4px; border-radius:50%; background:var(--color-ink, #5A3E2B);
}
/* 장소 이름표(gpt-v2-village): 그림 아래 흰 알약. 넘치면 줄바꿈 없이 줄임(…). 이름표를 눌러도 그 장소 */
.home-place-name{
  position:absolute; left:50%; top:84%; z-index:2;
  transform:translateX(calc(-50% + var(--home-name-dx, 0px)));   /* 이웃 장소에 걸치면 home.js 가 옆으로 비킴 */
  display:inline-flex; align-items:center; gap:3px;
  max-width:160%; padding:2px 8px;
  background:var(--kid-surface, #fff); color:var(--color-ink, #5A3E2B);
  border:1.5px solid var(--kid-border-press, #9C7F67); border-radius:var(--radius-pill, 999px);
  font-size:14px; font-weight:700; line-height:1.25; letter-spacing:-.02em;
  white-space:nowrap; box-shadow:0 1px 0 rgba(90,62,43,.12);
  transition:none;   /* home.js 가 자리를 재며 옮김: 옮기는 동안 움직임이 끼면 잰 값이 틀림 */
}
.theme-child[data-age="young"] .home-place-name{ font-size:15px; }
.home-place-name.is-inside{ top:auto; bottom:0; }
.home-place-name.is-above{ top:auto; bottom:84%; }   /* 아래에 이웃 장소가 붙어 있으면 그림 위로 */   /* 지도 맨 아래 장소(우리 방): 지도 밖으로 나가지 않게 */
.home-place-name-t{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
/* 닫힌 곳: 이름 앞 작은 닫힌 문(모양으로 구분, 자물쇠 아님) */
.home-place-name-door{
  position:relative; flex:none; width:9px; height:12px;
  background:#B98B66; border:1.5px solid var(--color-ink, #5A3E2B); border-radius:5px 5px 1px 1px;
}
.home-place-name-door::after{ content:""; position:absolute; right:1px; top:5px; width:2px; height:2px; border-radius:50%; background:var(--color-ink, #5A3E2B); }
.home-place.is-closed .home-place-name{ color:var(--kid-guide, #7A6150); border-style:dashed; }
.home-place-decor{ position:absolute; right:-4%; bottom:-2%; width:42%; height:42%; pointer-events:none; }
.home-place-ribbon{ position:absolute; left:-6%; bottom:2%; width:38%; height:38%; pointer-events:none; }
.home-place-flag{
  position:absolute; right:-2%; top:-18%; width:42%; height:52%; pointer-events:none;
  transform-origin:20% 100%;
}
.home-place-favor{
  position:absolute; left:-8%; top:-10%; width:40%; height:40%; pointer-events:none;
  transform-origin:50% 0;
  animation:home-sway 3.2s ease-in-out infinite;   /* 살랑: 2초 이상 주기, 낮은 폭 */
}
@keyframes home-sway{ 0%,100%{ transform:rotate(-4deg); } 50%{ transform:rotate(4deg); } }
.home-place-flag .fallback-box,.home-place-decor .fallback-box,.home-place-ribbon .fallback-box,.home-place-favor .fallback-box{ display:none; }

/* 조약돌 길 물건: 그림만(누를 곳 아님) */
.home-road-layer,.home-fog-layer{ position:absolute; inset:0; pointer-events:none; border-radius:inherit; overflow:hidden; }
.home-road-layer{ z-index:2; }
.home-fog-layer{ z-index:4; }
.home-road{ position:absolute; width:9%; aspect-ratio:1; transform:translate(-50%, -50%); }
.home-road .fallback-box{ display:none; }

/* 안개(그림 카드 기간): 걷힌 만큼 빠짐. 그림이 없으면 부드러운 흰 구름 */
.home-fog{ position:absolute; width:36%; aspect-ratio:1; transform:translate(-50%, -50%); }
.home-fog > *{ width:100%; height:100%; display:block; object-fit:contain; }
/* 물음표 구름: 구름 가운데 작은 '?' 원(움직임 없음) */
.home-fog-q{
  position:absolute; left:50%; top:46%; z-index:1;
  transform:translate(-50%, -50%);
  width:auto; height:auto; min-width:22px; padding:0 6px;
  font-family:var(--font-heading); font-size:16px; font-weight:800; line-height:22px; text-align:center;
  color:var(--kid-guide, #7A6150); background:rgba(255,255,255,.92);
  border:1.5px solid var(--kid-border, #EAD9C9); border-radius:var(--radius-pill, 999px);
}
.home-fog > .home-fog-q{ width:auto; height:auto; display:block; }
.home-fog--soft{
  background:radial-gradient(closest-side, rgba(255,255,255,.96) 0%, rgba(255,255,255,.9) 45%, rgba(255,255,255,0) 100%);
  border-radius:50%;
}

/* 지도 위 길동무·우렁 선생님(쿡 찌르기) */
.home-ch-wrap{
  position:absolute; z-index:5; transition:none;
  width:17%; min-width:var(--touch-child, 56px);
  transform:translate(-50%, -78%);
}
.home-map .home-ch.ghost-button{
  display:block; width:100%; min-height:0; aspect-ratio:1; padding:0;
  background:transparent; border:0; border-radius:50%;
}
.home-map .home-ch.ghost-button:active{ background:transparent; }
.home-ch-pic{ display:block; width:100%; height:100%; }
.home-ch-pic img,.home-ch-img{ display:block; width:100%; height:100%; object-fit:contain; }
.home-ch-dot{ display:block; width:70%; height:70%; margin:15%; border-radius:50%; border:2px solid var(--color-ink, #5A3E2B); }
.home-ch-pic.is-hop{ animation:home-hop 420ms var(--ease-gentle) 1; }
@keyframes home-hop{ 0%,100%{ transform:translateY(0); } 40%{ transform:translateY(-4px); } }
.home-bubble{
  position:absolute; left:50%; bottom:100%; z-index:6;
  transform:translate(-50%, -4px);
  width:max-content; max-width:min(64vw, 220px);
  padding:6px 12px;
  background:#fff; color:var(--color-ink, #5A3E2B);
  border:2px solid var(--kid-border-press, #9C7F67); border-radius:16px;
  font-size:16px; font-weight:700; line-height:1.35; text-align:center;
  word-break:keep-all; overflow-wrap:anywhere;
  pointer-events:none;
}
.home-bubble[hidden]{ display:none; }
.home-ch-wrap.is-left .home-bubble{ left:0; transform:translate(0, -4px); }
.home-ch-wrap.is-right .home-bubble{ left:auto; right:0; transform:translate(0, -4px); }

/* 길 점: (출발)●─○─○─(우리 방) */
.home-path{
  display:flex; align-items:center; justify-content:center; gap:10px;
  min-height:32px; flex-wrap:nowrap;
}
.home-path .home-dots{ flex:0 1 auto; min-width:0; padding:4px 6px; }
.home-path-end{
  display:inline-flex; align-items:center; gap:6px; flex:none;
  font-size:var(--fs-small, 14px); font-weight:700; color:var(--kid-guide, #7A6150);
  white-space:nowrap;
}
.home-line{
  margin:0; text-align:center;
  font-size:var(--fs-child-body, 18px); font-weight:600; line-height:1.4;
  color:var(--kid-guide, #7A6150);
  word-break:keep-all; overflow-wrap:anywhere;
}
.theme-child[data-age="young"] .home-line{ font-size:20px; }

/* 큰 단추 하나('한 번 더 걷기'는 아래 줄 오른쪽, home.js drawFoot) */
.home-actions{ display:flex; flex-direction:column; align-items:stretch; gap:4px; margin-top:auto; }
/* 아주 낮은 화면에서 홈이 스크롤될 때: 큰 단추([출발!]·[우리 방])도 아래 띠에 붙음 */
.home-screen[data-state="map"] > .home-actions{ display:contents; }
.home-screen[data-state="map"] > .home-actions > :first-child{ margin-top:auto; }
.home-screen[data-state="map"] > .home-actions > .home-big{
  position:sticky; z-index:7;
  bottom:calc(var(--action-bottom, 30px) + var(--touch-child, 56px) + 8px + env(safe-area-inset-bottom, 0px));
}
/* 좁은 칸(320 폭·가로 2단 오른쪽 칸)에서는 두 줄로 접힘: 단추 밖으로 나가거나 잘리지 않게 */
.home-again.small-button{
  flex:0 1 auto; min-width:0; min-height:var(--touch-child, 56px); padding:4px 8px;
  color:var(--kid-guide, #7A6150); font-size:var(--fs-body, 16px);
  text-align:center; word-break:keep-all; overflow-wrap:anywhere;
}

/* 맨 아래: 왼쪽 [어른한테 말할래] · 오른쪽 [우리 방](큰 단추가 [우리 방]이면 '한 번 더 걷기' 또는 빈칸) */
.home-foot{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  min-height:var(--touch-child, 56px);
  /* 아주 낮은 화면에서 넘쳐도 [어른한테 말할래]는 늘 첫 화면에(시범판 표시 위로) */
  position:sticky; z-index:7;
  bottom:calc(var(--action-bottom, 30px) + env(safe-area-inset-bottom, 0px));
  background:var(--app-bg, #FFF6E8);
  /* 큰 단추와 사이(위 8px)·시범판 줄(아래)도 바탕색으로 덮어 지도가 비쳐 지나가지 않게 */
  box-shadow:0 -8px 0 0 var(--app-bg, #FFF6E8), 0 calc(var(--action-bottom, 30px) + env(safe-area-inset-bottom, 0px)) 0 0 var(--app-bg, #FFF6E8);
}
.home-foot > :only-child{ margin-right:auto; }
.home-safety.safety-btn{ min-width:0; flex:none; }   /* 줄지 않음: 글자가 단추 밖으로 나가지 않게 */
.home-safety .icon{ width:22px; height:22px; }
.home-room.secondary-button{
  position:relative; width:auto; flex:none;
  padding:6px 18px; border-radius:var(--radius-pill, 999px);
}
/* 새 엽서를 우체통에 넣은 뒤에만: 그림 점(모양 + 테두리) */
.home-room-dot{
  position:absolute; top:4px; right:6px;
  width:12px; height:12px; border-radius:3px; transform:rotate(45deg);
  background:var(--color-primary, #F6C85F); border:2px solid var(--color-ink, #5A3E2B);
}

/* 프로필 없음·앨범 */
.home-setup{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  text-align:center; padding:16px 0;
}
.home-setup-ch{ width:min(52vw, 200px); aspect-ratio:1; }
.home-setup-ch img,.home-setup-ch svg,.home-setup-ch > *{ width:100%; height:100%; object-fit:contain; display:block; }
.home-setup-line{
  margin:0; font-family:var(--font-heading); font-size:var(--fs-section, 20px); font-weight:700; line-height:1.4;
  color:var(--color-ink, #5A3E2B); word-break:keep-all; overflow-wrap:anywhere;
}
.home-album-title{
  margin:8px 0 0; text-align:center;
  font-family:var(--font-heading); font-size:var(--fs-title, 24px); font-weight:800; color:var(--color-ink, #5A3E2B);
}

/* 장소 시트: 장소 그림 크게 + 고친 물건(누르면 1초 장난감) + 쌤 한 줄 */
.home-psheet{ display:flex; flex-direction:column; gap:12px; align-items:center; }
.home-psheet-pic{ width:min(68vw, 260px); aspect-ratio:1; }
.home-psheet-pic > *,.home-psheet-pic img,.home-psheet-pic svg{ width:100%; height:100%; object-fit:contain; display:block; min-height:0; }
.home-toys{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.home-toy.ghost-button{
  width:72px; height:72px; min-height:0; padding:4px;
  background:#fff; border:2px solid var(--kid-border-press, #9C7F67); border-radius:18px;
}
.home-toy > *{ width:100%; height:100%; object-fit:contain; display:block; min-height:0; }
.home-toy.is-play{ animation:home-toy 1s var(--ease-gentle) 1; }
@keyframes home-toy{
  0%,100%{ transform:translateY(0) rotate(0); }
  25%{ transform:translateY(-4px) rotate(-6deg); }
  50%{ transform:translateY(0) rotate(5deg); }
  75%{ transform:translateY(-3px) rotate(-3deg); }
}
.home-psheet-say{ display:flex; align-items:flex-end; gap:10px; width:100%; }
.home-psheet-teacher{ flex:none; width:72px; height:72px; }
.home-psheet-teacher > *{ width:100%; height:100%; object-fit:contain; display:block; }
.home-psheet-line{
  flex:1; min-width:0; margin:0; padding:10px 14px;
  background:#fff; border:2px solid var(--kid-border, #EAD9C9); border-radius:18px 18px 18px 4px;
  font-size:var(--fs-child-body, 18px); font-weight:600; line-height:1.45; color:var(--color-ink, #5A3E2B);
  word-break:keep-all; overflow-wrap:anywhere;
}

/* 하루 첫 열기 사건(엽서 → 깃발 → 졸업): 한 장씩 */
.home-event{
  position:fixed; inset:0; z-index:var(--z-sheet, 60);
  display:flex; align-items:center; justify-content:center;
  padding:16px 16px calc(var(--action-bottom, 30px) + env(safe-area-inset-bottom, 0px));
  background:rgba(90,62,43,.32);
}
.home-event-card{
  width:100%; max-width:420px; max-height:100%; overflow:auto;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:20px 16px 16px;
  background:var(--kid-surface, #fff); border-radius:var(--radius-card, 24px);
  box-shadow:var(--shadow-raised);
  animation:home-in var(--motion-normal, 240ms) var(--ease-gentle) both;
}
@keyframes home-in{ from{ opacity:0; transform:translateY(4px) scale(.97); } to{ opacity:1; transform:none; } }
.home-postcard{ position:relative; width:100%; aspect-ratio:3 / 2; border-radius:18px; overflow:hidden; background:var(--kid-peach, #F7D6A5); transition:transform 420ms var(--ease-gentle), opacity 420ms var(--ease-gentle); }
.home-postcard > .home-postcard-art,.home-postcard > img,.home-postcard > .fallback-box,.home-postcard > .home-svg{ position:absolute; inset:0; width:100%; height:100%; min-height:0; object-fit:cover; }
.home-postcard-body{ position:absolute; inset:10% 8%; display:flex; align-items:center; gap:10px; }
.home-postcard-ch{ flex:none; width:30%; aspect-ratio:1; }
.home-postcard-ch > *{ width:100%; height:100%; object-fit:contain; display:block; }
.home-postcard-text{
  flex:1; min-width:0; margin:0;
  font-size:var(--fs-child-body, 18px); font-weight:700; line-height:1.45; color:var(--color-ink, #5A3E2B);
  background:rgba(255,255,255,.88); border-radius:14px; padding:8px 10px;
  word-break:keep-all; overflow-wrap:anywhere;
}
.home-event-card.is-put .home-postcard{ transform:translateY(24px) scale(.9); opacity:0; }
.home-event-pic{ position:relative; display:flex; align-items:flex-end; justify-content:center; gap:8px; width:100%; min-height:120px; }
.home-event-place{ width:44%; aspect-ratio:1; }
.home-event-place > *,.home-event-ch > *{ width:100%; height:100%; object-fit:contain; display:block; min-height:0; }
.home-event-flag{ position:absolute; left:38%; top:0; width:16%; aspect-ratio:3/4; transform-origin:20% 100%; }
.home-event-flag.is-plant{ animation:home-plant 900ms var(--ease-gentle) 1 both; }
@keyframes home-plant{ from{ transform:translateY(-10px); opacity:.2; } to{ transform:none; opacity:1; } }
.home-event-flag .fallback-box{ display:none; }
.home-event-ch{ width:30%; aspect-ratio:1; }
.home-event-ch.is-big{ width:46%; }
.home-event-line{
  margin:0; text-align:center;
  font-family:var(--font-heading); font-size:var(--fs-section, 20px); font-weight:700; line-height:1.45; color:var(--color-ink, #5A3E2B);
  word-break:keep-all; overflow-wrap:anywhere;
}

@media (prefers-reduced-motion: reduce){
  .home-place-favor,.home-ch-pic.is-hop,.home-toy.is-play,.home-event-flag.is-plant{ animation:none; }
  .home-postcard{ transition:none; }
}
.motion-reduce .home-place-favor,.motion-reduce .home-ch-pic.is-hop,.motion-reduce .home-toy.is-play,.motion-reduce .home-event-flag.is-plant{ animation:none; }

/* 가로 화면(가로 폰·태블릿·노트북, 높이 900 이하): 지도는 왼쪽 칸에 화면 높이만큼, 나머지 줄은 오른쪽 칸에
   → 길 점·[출발!]·[어른한테 말할래]가 첫 화면에, 스크롤 0 */
@media (orientation: landscape) and (max-height: 900px){
  .home-screen[data-state="map"]{
    display:grid; max-width:720px;
    grid-template-columns:calc((100dvh - 16px - var(--action-bottom, 30px)) * 0.5595) minmax(0, 1fr);
    grid-template-rows:auto minmax(0, 1fr) auto auto auto auto;
    column-gap:20px; row-gap:8px;
    height:100vh; height:100dvh; min-height:0;
  }
  /* router 의 .app-screen(최대 480) 밖으로 넓힘: 가운데 맞춘 채 min(720, 화면 폭) */
  .app-screen > .home-screen[data-state="map"]{
    width:min(720px, 100vw);
    margin-left:calc((100% - min(720px, 100vw)) / 2); margin-right:0;
  }
  .home-screen[data-state="map"] > .home-mapwrap{ grid-column:1; grid-row:1 / -1; min-height:0; flex:none; }
  .home-screen[data-state="map"] > .home-head{ grid-column:2; grid-row:1; }
  .home-screen[data-state="map"] > .home-path{ grid-column:2; grid-row:3; }
  .home-screen[data-state="map"] > .home-line{ grid-column:2; grid-row:4; }
  .home-screen[data-state="map"] > .home-actions{ display:flex; grid-column:2; grid-row:5; margin-top:0; }
  .home-screen[data-state="map"] > .home-actions > :first-child{ margin-top:0; }
  .home-screen[data-state="map"] > .home-foot{ grid-column:2; grid-row:6; }
  @supports not (container-type: size){
    .home-screen[data-state="map"] .home-map{ width:100%; }
  }
}

/* 그림이 없을 때의 색 상자(.fallback-box, 기본 최소 높이 120)는 작은 자리에서 그 자리 크기에 맞춤 */
.home-screen .fallback-box,
.home-psheet .fallback-box,
.home-event .fallback-box{ min-height:0; height:100%; }
.home-level .fallback-box,
.home-ch .fallback-box{ border-radius:50%; }
.home-safety.safety-btn,.home-room.secondary-button{ min-width:var(--touch-child, 56px); }
/* 큰 단추가 [우리 방]일 때 새 엽서 점(B-38: 작은 [우리 방]은 이때 없음) */
.home-big{ position:relative; }
.home-big .home-room-dot{ top:8px; right:12px; }