:root {
  color-scheme: light;
  font-family: Arial, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  color: #2d272a;
  background: #fff7f5;
}

* { box-sizing: border-box; }
body { margin: 0; }
main { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.room-card { width: min(100%, 420px); overflow: hidden; border: 1px solid #eadfe3; border-radius: 28px; background: #fff; box-shadow: 0 18px 46px rgba(74, 52, 61, .13); }
.visual { height: 190px; display: grid; place-items: center; background: linear-gradient(145deg, #f5dce8, #ddd1ff); }
.yarn { width: 112px; height: 112px; display: block; border-radius: 24px; object-fit: cover; box-shadow: 0 10px 26px rgba(73, 48, 62, .14); }
.content { padding: 25px 24px 27px; }
.brand { display: flex; align-items: center; gap: 9px; margin-bottom: 23px; color: #7457f6; font-weight: 800; }
.logo { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: #7457f6; font-size: 13px; }
.status { margin: 0 0 9px; color: #7457f6; font-size: 12px; font-weight: 700; }
h1 { margin: 0 0 10px; font-size: 24px; line-height: 1.35; letter-spacing: -.04em; }
.description { margin: 0 0 24px; color: #706268; font-size: 14px; line-height: 1.65; }
.open-button { min-height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 14px; color: #fff; background: #7457f6; font-size: 15px; font-weight: 800; text-decoration: none; }
.open-button[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.open-button:focus-visible, .store-links a:focus-visible { outline: 3px solid rgba(116, 87, 246, .25); outline-offset: 3px; }
.feedback { min-height: 20px; margin: 11px 0 0; color: #7457f6; text-align: center; font-size: 12px; }
.store-links { display: flex; justify-content: center; gap: 9px; flex-wrap: wrap; padding-top: 13px; border-top: 1px solid #eee5e8; color: #817278; font-size: 12px; }
.store-links a { color: #7457f6; font-weight: 700; text-decoration: none; }

@media (max-width: 440px) {
  main { padding: 0; place-items: stretch; }
  .room-card { min-height: 100vh; border: 0; border-radius: 0; box-shadow: none; }
}