/* 겨울잠 — 자고 일어나면 새봄. 이 게임의 다시 시작이다. */
.sleep{position:fixed;inset:0;z-index:11;display:grid;
  grid-template-rows:auto auto 1fr auto;gap:10px;padding:10px 12px 14px;
  background-size:cover;background-position:center;
  /* 눈 덮인 겨울 숲 — 자러 가는 화면이라 어둡게 덮지 않는다. 포근해야 한다 */
  background-image:url("../../../assets/bg/bg_winter.webp")}

.sleep-head{display:flex;align-items:center;gap:8px;justify-self:start;
  font-size:.72em;background:var(--panel);border:3px solid var(--wood);
  border-radius:999px;padding:6px 16px;padding-right:calc(var(--touch) + 6px)}
.sleep-head img{width:1.3em;height:1.3em;object-fit:contain}
.sleep-head b{color:#c98a1a}

/* 자면 뭘 받는지 — 제일 크게. 이게 누를 이유다 */
.sleep-offer{display:grid;justify-items:center;gap:4px;
  background:var(--panel);border:4px solid var(--wood);border-radius:24px;padding:12px 10px;
  box-shadow:0 5px 0 #8a6236, 0 7px 6px rgba(0,0,0,.28)}
.sleep-offer .amber{display:flex;align-items:center;gap:8px;font-size:1.15em;color:#c98a1a}
.sleep-offer .amber img{width:1.5em;height:1.5em;object-fit:contain}
.sleep-offer .why{font-size:.44em;font-weight:500;opacity:.85;text-align:center;line-height:1.4}

.sleep-go{min-height:var(--touch);width:100%;margin-top:6px;
  border:4px solid var(--wood);border-radius:999px;padding:6px 18px;font-size:.62em;
  background:linear-gradient(180deg,#fff6dd 0%,var(--panel) 55%,#e6cf9e 100%);
  box-shadow:0 5px 0 #8a6236, 0 7px 6px rgba(0,0,0,.28);cursor:pointer}
.sleep-go.can{border-color:var(--leaf);
  background:linear-gradient(180deg,#dff6c4 0%,#b6e58a 55%,#8fce5f 100%);
  box-shadow:0 5px 0 #4f8a2a, 0 7px 6px rgba(0,0,0,.28)}
.sleep-go:disabled{opacity:.6;cursor:default}
.sleep-go:not(:disabled):active{transform:translateY(5px);box-shadow:0 0 0 #4f8a2a}

/* 호박으로 사는 영구 강화 셋 */
/*
 * ⚠ **스크롤되는 칸에는 `min-height:0` 이 있어야 한다.**
 * 격자 칸(`1fr`)은 기본이 `min-height:auto` 라 **내용만큼 늘어난다.**
 * 그러면 스크롤이 안 생기고 아래 것들이 화면 밖으로 밀려난다 —
 * 4:3 폰이나 가로 모드에서 아래가 잘리던 원인이다(2026-08-29, 무기 판에서 먼저 잡았다).
 */
.sleep-perms{display:grid;gap:8px;align-content:start;min-height:0;overflow-y:auto;
  overscroll-behavior:contain;padding:2px}
.sleep-perm{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;
  background:var(--panel);border:3px solid var(--wood);border-radius:20px;padding:8px 12px}
.sleep-perm img{width:clamp(30px,7vmin,46px);height:clamp(30px,7vmin,46px);object-fit:contain}
.sleep-perm .name{font-size:.55em}
.sleep-perm .now{font-size:.44em;font-weight:500;color:#1f5c12}
.sleep-perm button{min-height:var(--touch);min-width:var(--touch);
  border:3px solid var(--wood);border-radius:16px;padding:4px 12px;font-size:.5em;cursor:pointer;
  background:linear-gradient(180deg,#fff6dd 0%,var(--panel) 55%,#e6cf9e 100%);
  box-shadow:0 4px 0 #8a6236;display:grid;place-items:center;gap:2px}
.sleep-perm button.can{border-color:var(--leaf)}
.sleep-perm button:disabled{opacity:.55;cursor:default}
.sleep-perm button:not(:disabled):active{transform:translateY(4px);box-shadow:0 0 0 #8a6236}
.sleep-perm .cost{display:flex;align-items:center;gap:3px}
.sleep-perm .cost img{width:1.1em;height:1.1em}

/*
 * ── 낮은 화면 ────────────────────────────────────────────
 * 가로 모드(360px 높이)에서 위쪽 안내가 자리를 다 먹어 영구 강화 칸이
 * 57px밖에 안 남았다. 스크롤은 되지만 너무 좁다 — 위를 줄여 아래에 자리를 준다.
 */
@media (max-height:700px){
  .sleep{gap:6px;padding:6px 10px calc(8px + env(safe-area-inset-bottom))}
  .sleep-offer{padding:6px 8px;gap:2px}
  .sleep-offer .amber{font-size:.85em}
  .sleep-offer .why{font-size:.36em;line-height:1.25}
  .sleep-go{min-height:52px;font-size:.5em;margin-top:2px}
  .sleep-head{font-size:.58em;padding:4px 12px}
  .sleep-perm{padding:5px 10px;gap:8px}
  .sleep-perm img{width:clamp(24px,5vmin,34px);height:clamp(24px,5vmin,34px)}
  .sleep-perm button{min-height:52px;min-width:52px}
}
/* 가로 모드 — 왼쪽에 '자면 뭘 받나', 오른쪽에 영구 강화 */
@media (orientation:landscape) and (min-width:640px){
  .sleep{grid-template-columns:minmax(220px,38%) 1fr;
         grid-template-rows:auto 1fr;
         grid-template-areas:"head perms" "offer perms";column-gap:10px}
  .sleep-head{grid-area:head}
  .sleep-offer{grid-area:offer;align-self:start}
  .sleep-perms{grid-area:perms}
}