/* 냉장고 안 — 이별하기 전의 행복한 냉장고. 딸기로 가득.
 * 물건은 전부 CSS 그림(상표 없음). 딸기 알은 scene.js가 그려서 깔아 줌.
 * 사진으로 갈아 끼우면(config.art.insideImage) .inside__art가 사진 한 장으로 바뀜.
 */
.inside {
  position: absolute; left: 2em; top: 2em; width: 100em; height: 190em;
  border-radius: 6em 6em 3em 3em; overflow: hidden;
  background:
    radial-gradient(ellipse 96% 30% at 50% 0, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 72%),
    linear-gradient(90deg, rgba(186, 104, 112, .28), rgba(186, 104, 112, 0) 9%, rgba(186, 104, 112, 0) 91%, rgba(186, 104, 112, .28)),
    linear-gradient(#FFF6EC, #F9E0D6 62%, #EFC6C1);
}
.app[data-inside="off"] .inside { visibility: hidden; }
.inside__art { position: absolute; inset: 0; background: center / cover no-repeat; }

/* 포스트잇이 붙는 면 — 문짝·안 모두 100em × 190em 같은 좌표 */
.notes { position: absolute; inset: 0; z-index: 2; }
.notes--held { left: 2em; top: 2em; right: auto; bottom: auto; width: 100em; height: 190em; z-index: 9; pointer-events: none; }
.notes--held > * { pointer-events: auto; }

/* 선반(유리) */
.shelf {
  position: absolute; left: 0; right: 0; height: 1.8em;
  background: linear-gradient(rgba(255, 255, 255, .98), rgba(203, 228, 232, .8));
  box-shadow: 0 .7em 0 rgba(170, 90, 100, .16), 0 -.2em 0 rgba(255, 255, 255, .6);
}

/* 병(상표 없음) — 뚜껑·목·몸통 */
.bottle { position: absolute; width: 13em; height: 31em; }
.bottle::before {
  content: ""; position: absolute; left: 3.4em; top: 0; width: 6.2em; height: 7.4em; border-radius: 1em 1em .3em .3em;
  background:
    linear-gradient(90deg, #A3142A, #EA4B60 38%, #B01A30) top / 100% 3.6em no-repeat,
    linear-gradient(90deg, rgba(255, 255, 255, .85), rgba(255, 232, 236, .6)) bottom center / 76% 4.2em no-repeat;
}
.bottle::after {
  content: ""; position: absolute; left: 0; top: 6.6em; width: 13em; bottom: 0;
  border-radius: 4.6em 4.6em 1.4em 1.4em / 5.4em 5.4em 1.4em 1.4em;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0) 13%, rgba(255, 255, 255, .8) 20%, rgba(255, 255, 255, 0) 31%),
    linear-gradient(var(--milk-a, #FCD3DB), var(--milk-b, #F2A2B5));
  box-shadow: inset -1.4em 0 1.8em rgba(186, 76, 108, .3), inset 0 0 0 .25em rgba(255, 255, 255, .5), .7em .6em 0 rgba(150, 70, 84, .22);
}
.bottle--white { --milk-a: #FFFDF8; --milk-b: #F3E6DC; }
.bottle--white::before {
  background:
    linear-gradient(90deg, #E7DACB, #FFF9EC 38%, #E2D2C0) top / 100% 3.6em no-repeat,
    linear-gradient(90deg, rgba(255, 255, 255, .85), rgba(255, 244, 232, .6)) bottom center / 76% 4.2em no-repeat;
}

/* 딸기 케이크 */
.cake { position: absolute; width: 36em; height: 24em; }
.cake::before { /* 접시 */
  content: ""; position: absolute; left: -2.4em; right: -2.4em; bottom: 0; height: 2.4em; border-radius: 50%;
  background: linear-gradient(#FFFFFF, #EFE3DE); box-shadow: .6em .5em 0 rgba(150, 70, 84, .22);
}
.cake::after { /* 몸통: 크림 · 딸기크림 · 시트 · 잼 · 시트 */
  content: ""; position: absolute; left: 1.6em; right: 1.6em; bottom: 1.5em; height: 16em; border-radius: 1.8em 1.8em .8em .8em;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 22%, rgba(190, 110, 110, 0) 70%, rgba(190, 110, 110, .25)),
    linear-gradient(#FFFDF8 0 26%, #F7B5C2 26% 33%, #FBE3B4 33% 58%, #D7263D 58% 64%, #FBE3B4 64% 100%);
}
.cake__cream { /* 위에 짠 크림 */
  position: absolute; left: 1.6em; right: 1.6em; bottom: 15.4em; height: 4.4em;
  background: radial-gradient(circle at 50% 100%, #FFFDF8 0 2.1em, rgba(255, 253, 248, 0) 2.2em) 0 0 / 4.1em 4.4em repeat-x;
}

/* 잼 병 — 체크 천 뚜껑, 글자 없는 라벨 */
.jar { position: absolute; width: 14em; height: 18em; }
.jar::before {
  content: ""; position: absolute; left: -.6em; right: -.6em; top: 0; height: 4.6em; border-radius: 1.2em 1.2em .4em .4em;
  background:
    repeating-linear-gradient(90deg, rgba(215, 38, 61, .85) 0 1.3em, rgba(255, 255, 255, 0) 1.3em 2.6em),
    repeating-linear-gradient(0deg, rgba(215, 38, 61, .55) 0 1.3em, #FFFDF8 1.3em 2.6em);
  box-shadow: 0 .5em 0 rgba(150, 30, 46, .25);
}
.jar::after {
  content: ""; position: absolute; left: 0; right: 0; top: 4.2em; bottom: 0; border-radius: 1.4em 1.4em 2em 2em;
  background:
    linear-gradient(#FFF9EC, #FFF9EC) center 46% / 68% 42% no-repeat,
    linear-gradient(90deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, .6) 17%, rgba(255, 255, 255, 0) 27%),
    linear-gradient(#C81E33, #8E0F23);
  box-shadow: inset 0 0 0 .3em rgba(255, 255, 255, .3), .6em .5em 0 rgba(150, 70, 84, .22);
}

/* 검정 비니(흰 글씨 strawberry) — 냉장고에 넣어 둔 지난겨울 */
.beanie {
  position: absolute; width: 30em; height: 21em;
  background: radial-gradient(ellipse at 34% 26%, #3A3234, #171213 70%);
  border-radius: 15em 15em 2em 2em / 17em 17em 2em 2em;
  box-shadow: .7em .6em 0 rgba(150, 70, 84, .22);
}
.beanie::before { /* 접은 단 */
  content: ""; position: absolute; left: -1em; right: -1em; bottom: 0; height: 8.4em; border-radius: 1.6em;
  background: repeating-linear-gradient(90deg, #2A2325 0 .7em, #120E0F .7em 1.4em);
}
.beanie::after {
  content: "strawberry"; position: absolute; left: 0; right: 0; bottom: 2.6em; text-align: center;
  color: #fff; font: 700 3.3em/1 "Arial Narrow", "Helvetica Neue", Arial, sans-serif; letter-spacing: .03em;
}

/* 딸기 바구니(연두 종이) */
.punnet { position: absolute; width: 34em; height: 11em; z-index: 1; }
.punnet::before {
  content: ""; position: absolute; inset: 0;
  clip-path: polygon(0 0, 100% 0, 93% 100%, 7% 100%);
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .22) 0 .5em, rgba(255, 255, 255, 0) .5em 2.4em),
    linear-gradient(#CFE2A0, #A9C56F);
}
.punnet::after { content: ""; position: absolute; left: -.8em; right: -.8em; top: -.6em; height: 2em; border-radius: 1em; background: linear-gradient(#E2F0BC, #BFD78B); }

/* 맨 아래 서랍 — 반투명 판 뒤로 딸기가 비침 */
.drawer {
  position: absolute; left: 3em; right: 3em; z-index: 1; border-radius: 1.4em 1.4em 3em 3em;
  background:
    linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .5) 38%, rgba(255, 255, 255, 0) 48%),
    linear-gradient(rgba(255, 255, 255, .5), rgba(255, 240, 240, .22));
  box-shadow: inset 0 1em 0 rgba(255, 255, 255, .92), inset 0 0 0 .4em rgba(255, 255, 255, .55);
}
.drawer::after { /* 손잡이 홈 */
  content: ""; position: absolute; left: 34%; right: 34%; top: 2.4em; height: 1.6em; border-radius: 1em; background: rgba(214, 150, 156, .5);
}
.inside__art .berry { left: 0; top: 0; transform: translate3d(var(--bx), var(--by), 0) rotate(var(--br)) scale(var(--bs, 1)); }

/* 냉기 — 문이 열릴 때 한 번 */
.mist {
  position: absolute; left: -10%; right: -10%; bottom: -6em; height: 64em; z-index: 3; pointer-events: none; opacity: 0;
  background:
    radial-gradient(ellipse 60% 50% at 28% 100%, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 70%),
    radial-gradient(ellipse 52% 42% at 76% 100%, rgba(255, 255, 255, .65), rgba(255, 255, 255, 0) 70%);
}
.app[data-door="open"] .mist { animation: mist 1.6s ease-out .2s 1 both; }
@keyframes mist {
  0% { opacity: 0; transform: translate3d(0, 4em, 0) scale(1); }
  28% { opacity: .9; }
  100% { opacity: 0; transform: translate3d(0, -9em, 0) scale(1.25); }
}
@media (prefers-reduced-motion: reduce) {
  .app[data-door="open"] .mist { animation: none; }
}