/* 선물 (js/steppe/gifts.js): 수레 곁 단추, 고르기 판, 바구니 수, 사물함 보기 아래 바구니 판 */
.sf-giftgo { background: #d9a35f; box-shadow: 0 6px 18px rgba(150, 100, 40, .32); }
.sf-lango { background: #e9875c; box-shadow: 0 6px 18px rgba(190, 100, 50, .32); }
.sf-basket-hud { position: relative; font-size: 22px; }
.sf-basket-hud b { position: absolute; right: -3px; top: -3px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11.5px; line-height: 19px; box-sizing: border-box; }

.sf-giftpanel { position: fixed; left: 50%; bottom: calc(14px + var(--safe-b)); transform: translateX(-50%); z-index: 24; width: min(420px, calc(100% - 24px)); box-sizing: border-box; display: grid; gap: 8px; padding: 10px 12px 12px; border-radius: 22px; background: var(--sf-paper); box-shadow: var(--shadow); animation: sfIn .2s ease-out; }
.sf-gp-head { display: flex; align-items: center; gap: 8px; }
.sf-gp-head b { font-size: 15px; }
.sf-gp-head .sf-small { margin-right: auto; }
.sf-gp-head .sf-x { width: 32px; height: 32px; font-size: 19px; }
.sf-gp-items { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.sf-gp-items button { display: grid; justify-items: center; gap: 1px; border: 0; border-radius: 14px; background: #fff7ee; box-shadow: inset 0 0 0 1px var(--sf-line); padding: 6px 2px; font: inherit; font-size: 11.5px; color: var(--ink); cursor: pointer; white-space: nowrap; overflow: hidden; }
.sf-gp-items button:disabled { opacity: .4; }
.sf-gp-items .em { font-size: 21px; }
.sf-gp-basket { display: flex; flex-wrap: wrap; gap: 4px; min-height: 34px; align-items: center; padding: 4px 6px; border-radius: 14px; background: #f6ead9; }
.sf-gp-basket button { position: relative; width: 32px; height: 32px; border: 0; border-radius: 10px; background: #fffaf2; font-size: 19px; cursor: pointer; padding: 0; }
.sf-gp-basket i { position: absolute; right: -3px; top: -4px; font-style: normal; font-size: 11px; width: 14px; height: 14px; line-height: 14px; border-radius: 50%; background: #c9b4a0; color: #fff; }

/* 사물함 보기: 바구니 판은 이름표 아래 제자리에 (추모하기 · 이전/다음 줄을 덮지 않는다) */
/* 길게 누르기: 누르는 동안 둘레에 링이 차오른다 */
@property --p { syntax: '<percentage>'; inherits: false; initial-value: 0%; }

@media (orientation: landscape) and (max-height: 500px) {
  .sf-giftpanel { left: calc(50% - 40px); width: min(400px, calc(100% - 300px)); bottom: calc(8px + var(--safe-b)); padding: 8px 10px 10px; gap: 6px; }
  .sf-gp-items button { padding: 4px 2px; }
  /* 보기: 가운데 줄 아래 */
}

/* 등 수레의 등 (풍등 · 연등) */
.sf-gp-lan { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sf-gp-lan button { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; border: 0; border-radius: 14px; background: #fff3e2; box-shadow: inset 0 0 0 1px var(--sf-line); font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; }
.sf-gp-lan button.on { background: #ffe2c2; box-shadow: inset 0 0 0 1.5px #e8a86e; font-weight: 700; }
.sf-gp-lan .em { font-size: 18px; }
/* 엄지 자리: 등 날리기 · 등 띄우기 */
.sf-lanthumb { position: fixed; right: calc(12px + env(safe-area-inset-right, 0px)); bottom: calc(92px + var(--safe-b)); z-index: 13; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.sf-lanthumb button { min-height: 46px; padding: 0 18px; border: 0; border-radius: 999px; background: #e9875c; color: #fff; font: inherit; font-size: 15px; font-weight: 700; box-shadow: 0 6px 18px rgba(190, 100, 50, .35); cursor: pointer; white-space: nowrap; }
.sf-lanthumb button[data-lan="lotus"] { background: #e88aa0; box-shadow: 0 6px 18px rgba(190, 80, 110, .3); }
.sf-lanthumb button[hidden] { display: none; }
.sf-cloudoff { background: #f2b44f; box-shadow: 0 6px 18px rgba(200, 140, 40, .35); }

/* 함께하기: 단추 위로 활동이 펼쳐진다 (새 활동은 맨 위에 하나 더) */
.sf-fan-wrap { position: relative; flex: 1; display: flex; }
.sf-fan-wrap > button { flex: 1; }
.sf-dock button.on { background: rgba(240, 143, 134, .14); color: #c0645c; }
.sf-fan { position: absolute; left: 50%; bottom: calc(100% + 14px); transform: translateX(-50%); display: flex; flex-direction: column-reverse; gap: 8px; align-items: stretch; }
.sf-fan[hidden] { display: none; }
.sf-dock .sf-fan button { flex: none; flex-direction: row; gap: 8px; justify-content: flex-start; min-height: 44px; padding: 0 16px 0 12px; border-radius: 999px; background: var(--sf-paper); box-shadow: var(--shadow); font-size: 14px; font-weight: 700; animation: sfFanIn .18s ease-out backwards; }
.sf-dock .sf-fan button:nth-child(2) { animation-delay: .04s; }
.sf-dock .sf-fan button:nth-child(3) { animation-delay: .08s; }
.sf-fan .em { font-size: 19px; }
@keyframes sfFanIn { from { opacity: 0; transform: translateY(10px) scale(.92); } }
@media (prefers-reduced-motion: reduce) { .sf-dock .sf-fan button { animation: none; } }

@media (orientation: landscape) and (max-height: 500px) {
  .sf-lanthumb { right: calc(10px + env(safe-area-inset-right, 0px)); bottom: calc(10px + var(--safe-b)); }
  .sf-lanthumb button { min-height: 42px; padding: 0 16px; font-size: 14px; }
  /* 오른쪽 세로줄: 단추 왼쪽으로 펼치고, 단추 아랫줄에 맞춰 위로 쌓는다 */
  .sf-fan { left: auto; right: calc(100% + 12px); bottom: 0; transform: none; align-items: flex-end; }
  @keyframes sfFanIn { from { opacity: 0; transform: translateX(10px) scale(.92); } }
}
@media (orientation: landscape) and (max-height: 500px) {
  /* 오른쪽 위 작은 단추들(메뉴 · 편지함 · 바구니 · 로그인)은 한 줄로, 세로줄과 겹치지 않게 */
  .sf-hud { flex-direction: row-reverse; align-items: center; }
}
@media (orientation: landscape) and (max-height: 500px) {
  /* 세로줄은 세 칸이라 가운데로 올리고, 그 아래 엄지 자리에 등 단추 */
  .sf-dock { top: calc(50% + 4px); }
}

/* 사물함 보기의 선물 바구니: 판 자체가 고리버들 바구니 (손잡이 · 엮은 테 · 엮은 몸통), 그 안에 선물 그림이 담겨 있다 */
.sf-basket { --wk1: #d9a868; --wk2: #c08a4c; --wk3: #a8733c; position: relative; order: 1; z-index: 2; flex-shrink: 0; box-sizing: border-box; width: min(440px, 100%); min-height: 84px; margin-top: 18px;
  padding: 12px 16px 12px; border-radius: 16px 16px 46px 46px / 14px 14px 34px 34px;
  background:
    repeating-linear-gradient(90deg, rgba(90, 50, 20, .22) 0 2px, transparent 2px 13px),
    repeating-linear-gradient(0deg, var(--wk1) 0 7px, var(--wk2) 7px 9px, var(--wk1) 9px 16px, var(--wk3) 16px 18px),
    var(--wk1);
  box-shadow: inset 0 9px 0 -2px #8f5d2e, inset 0 -6px 12px rgba(80, 40, 10, .35), inset 0 10px 16px rgba(60, 30, 5, .35), 0 8px 18px rgba(80, 50, 40, .28); touch-action: none; user-select: none; -webkit-user-select: none; }
.sf-basket[hidden] { display: none; }
.sf-basket::before { content: ''; position: absolute; left: 6px; right: 6px; top: -5px; height: 12px; border-radius: 10px;
  background: repeating-linear-gradient(115deg, #c79354 0 6px, #9c6a36 6px 8px, #dcae70 8px 13px, #9c6a36 13px 15px); box-shadow: 0 2px 4px rgba(60, 30, 5, .35); }
.sf-basket-handle { position: absolute; left: 50%; top: -30px; width: 46%; height: 34px; transform: translateX(-50%); border: 6px solid #a8733c; border-bottom: 0; border-radius: 60% 60% 0 0 / 100% 100% 0 0; box-sizing: border-box; pointer-events: none;
  box-shadow: inset 0 2px 0 rgba(255, 220, 160, .45); z-index: -1; }
.sf-tray-items { position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 2px 4px; min-height: 58px; }
.sf-bi { position: relative; display: grid; place-items: end center; min-width: 46px; min-height: 52px; padding: 0 1px 2px; border: 0; border-radius: 14px; background: transparent; cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; }
.sf-bi img { display: block; pointer-events: none; filter: drop-shadow(0 3px 2px rgba(60, 30, 5, .45)); transition: transform .12s; }
.sf-bi:hover img { transform: translateY(-3px); }
.sf-bi.armed { background: rgba(255, 236, 190, .55); box-shadow: 0 0 0 2.5px #f6c56b, 0 0 14px rgba(255, 210, 120, .9); }
.sf-bi.armed img { transform: translateY(-6px) scale(1.08); }
.sf-bi.lifted { opacity: .3; }
.sf-bi-empty { align-self: center; color: #fff7ea; font-size: 13px; font-weight: 700; text-shadow: 0 1px 2px rgba(60, 30, 5, .6); }
.sf-basket-n { position: absolute; right: 12px; top: 8px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: rgba(255, 250, 241, .92); color: #7a4c22; font-size: 11.5px; line-height: 20px; text-align: center; box-sizing: border-box; }
.sf-basket-n:empty { display: none; }
.sf-basket-hint { position: relative; display: table; margin: -2px auto 2px; white-space: nowrap; font-size: 12px; color: #6b4b31; background: rgba(255, 250, 241, .9); padding: 3px 10px; border-radius: 999px; pointer-events: none; }
.sf-basket-hint[hidden] { display: none; }
.sf-basket.drop { box-shadow: inset 0 9px 0 -2px #8f5d2e, inset 0 -6px 12px rgba(80, 40, 10, .35), 0 0 0 3px rgba(255, 220, 150, .7), 0 8px 18px rgba(80, 50, 40, .28); }
.sf-basket.hot { transform: scale(1.04); box-shadow: inset 0 9px 0 -2px #8f5d2e, 0 0 0 4px #f6c56b, 0 0 24px rgba(255, 200, 110, .9); }
.sf-basket.nudge { animation: sfPulse .5s ease-in-out 2; }
.sf-basket { transition: transform .12s, box-shadow .12s; }
.sf-ghost { position: fixed; left: 0; top: 0; z-index: 40; pointer-events: none; }
.sf-ghost img { width: 100%; height: 100%; display: block; filter: drop-shadow(0 8px 6px rgba(60, 40, 30, .35)); }
.sf-view.sf-traying .sf-stage { max-height: max(190px, calc(100dvh - 430px)); }
.sf-view.sf-traying .sf-controls { order: 2; }
@media (orientation: landscape) and (max-height: 500px) {
  /* 바구니를 들고 있으면 가운데 줄 위쪽에 (이름표 · 추모하기 · 이전/다음은 그 아래 그대로) */
  .sf-basket { grid-column: 2; grid-row: 1; align-self: end; width: 100%; max-width: 380px; min-height: 64px; margin: 26px 0 4px; padding: 8px 10px 7px; }
  .sf-view.sf-traying .sf-stage { max-height: none; }
  .sf-view.sf-traying .sf-memo { display: none; }
  .sf-tray-items { min-height: 50px; }
  .sf-bi { min-width: 44px; min-height: 48px; }
}