09Trunk house

<main class="stage">
<div class="tk is-demo" id="tkRoot">
  <div class="tk__trunk">
    <div class="tk__lid">
      <span class="tk__paper"></span>
      <span class="tk__wire"></span>
      <span class="tk__bulb tk__bulb--a"></span>
      <span class="tk__bulb tk__bulb--b"></span>
      <span class="tk__bulb tk__bulb--c"></span>
      <span class="tk__bulb tk__bulb--d"></span>
      <span class="tk__bulb tk__bulb--e"></span>
      <span class="tk__bulb tk__bulb--f"></span>
      <span class="tk__mirror"><span class="tk__glass"></span><span class="tk__mshine"></span></span>
      <span class="tk__frame tk__frame--a"></span>
      <span class="tk__frame tk__frame--b"></span>
      <span class="tk__frame tk__frame--c"></span>
      <span class="tk__frame tk__frame--d"></span>
      <span class="tk__frame tk__frame--e"></span>
      <span class="tk__frame tk__frame--f"></span>
      <span class="tk__shelf tk__shelf--l"><span class="tk__book"></span><span class="tk__book tk__book--lean"></span></span>
      <span class="tk__shelf tk__shelf--r"><span class="tk__book"></span></span>
      <span class="tk__pendant"></span>
    </div>
    <div class="tk__base">
      <span class="tk__wood"></span>
      <span class="tk__sofa"><span class="tk__cushion tk__cushion--a"></span><span class="tk__cushion tk__cushion--b"></span></span>
      <span class="tk__pot"><span class="tk__leaf tk__leaf--l"></span><span class="tk__leaf tk__leaf--r"></span></span>
      <span class="tk__ladder"></span>
      <button class="tk__lamp" id="tkLamp" type="button" aria-pressed="false" aria-label="lamp">
        <span class="tk__lstand"></span>
        <span class="tk__lshade"></span>
        <span class="tk__lglow"></span>
      </button>
      <span class="tk__warm"></span>
    </div>
    <span class="tk__hinge tk__hinge--l"></span>
    <span class="tk__hinge tk__hinge--r"></span>
    <span class="tk__handle"></span>
    <span class="tk__latch tk__latch--l"></span>
    <span class="tk__latch tk__latch--r"></span>
  </div>
  <p class="tk__hint">Click the lamp</p>
</div>
</main>

@use "../../../../site/static/demo-tokens" as *;

// 트렁크 가방 하우스 — 열린 가방 뚜껑과 바닥에 아늑한 방을 넣는다(이미지 파일 0).
// 반짝이 전구 여섯 개는 animation-delay 시차로 하나씩 숨쉬고,
// 램프를 누르면 갓의 온기(box-shadow)와 방 전체의 온기 겹침막이 같이 밝아진다.

$duration: $dur-loop;
$easing: $ease-out;
$color: $subject-cream;

$sage: #9aab89;
$sage-edge: #7d8f6e;
$paper: #f3ead9;
$wood: #c89b6a;
$wood-deep: #a87e50;
$floor: #d9b98c;

@include stage($stage-ink);

.tk {
  display: flex; flex-direction: column; align-items: center; gap: $sp-1;
  width: min(100%, 320px);
}

.tk__trunk {
  position: relative; box-sizing: border-box;
  width: 236px; height: 164px;
  border-radius: $r-card;
  background: $sage;
  box-shadow: inset 0 0 0 3px $sage-edge;
}

// ── 뚜껑: 갤러리 벽
.tk__lid {
  position: absolute; left: 8px; right: 8px; top: 8px; height: 88px;
  border-radius: $r-sm;
  background: $sage;
  overflow: hidden;
}
.tk__paper {
  position: absolute; inset: 8px; border-radius: $r-xs;
  background: $paper;
}
.tk__wire {
  position: absolute; left: 2px; right: 2px; top: 18px; height: 2px;
  border-radius: $r-pill; background: rgba(122, 102, 70, .8);
  transform: rotate(1.2deg); transform-origin: left center;
}
.tk__bulb {
  position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: $stage-yellow;
  box-shadow: 0 0 6px rgba(255, 210, 63, .9);
  animation-name: tkTwinkle; animation-duration: $duration;
  animation-timing-function: $ease-out; animation-iteration-count: infinite;
  animation-fill-mode: both;
}
.tk__bulb--a { left: 8%;  top: 16px; animation-delay: 0ms; }
.tk__bulb--b { left: 21%; top: 20px; animation-delay: 250ms; }
.tk__bulb--c { left: 34%; top: 22px; animation-delay: 500ms; }
.tk__bulb--d { left: 47%; top: 21px; animation-delay: 750ms; }
.tk__bulb--e { left: 60%; top: 18px; animation-delay: 1000ms; }
.tk__bulb--f { left: 86%; top: 15px; animation-delay: 1250ms; }

.tk__mirror {
  position: absolute; left: 50%; top: 30px; width: 38px; height: 38px;
  margin-left: -19px; border-radius: 50%;
  border: 4px solid $wood; box-sizing: border-box;
  background: $wood-deep;
}
.tk__glass {
  position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(200deg, #dceef2 0%, #b9d7de 100%);
}
.tk__mshine {
  position: absolute; left: 6px; top: 5px; width: 5px; height: 12px;
  border-radius: $r-pill; background: rgba(255, 255, 255, .7);
  transform: rotate(28deg);
}
.tk__frame {
  position: absolute; border: 2px solid $wood; box-sizing: border-box;
  border-radius: $r-xs; background: #fdf6e8;
}
.tk__frame--a { left: 12px;  top: 34px; width: 14px; height: 17px; }
.tk__frame--b { left: 12px;  top: 56px; width: 17px; height: 13px; }
.tk__frame--c { left: 33px;  top: 58px; width: 13px; height: 16px; }
.tk__frame--d { right: 12px; top: 32px; width: 13px; height: 16px; }
.tk__frame--e { right: 31px; top: 58px; width: 16px; height: 13px; }
.tk__frame--f { right: 12px; top: 54px; width: 14px; height: 14px; }

.tk__shelf {
  position: absolute; height: 4px; border-radius: $r-xs;
  background: $wood;
}
.tk__shelf--l { left: 8px; top: 76px; width: 34px; }
.tk__shelf--r { right: 8px; top: 72px; width: 28px; }
.tk__book {
  position: absolute; bottom: 4px; width: 7px; height: 12px;
  border-radius: $r-xs $r-xs 0 0; background: $subject-blue;
}
.tk__shelf--l .tk__book { left: 4px; }
.tk__book--lean { left: 13px; background: $subject-pink; transform: rotate(9deg); transform-origin: bottom left; }
.tk__shelf--r .tk__book { left: 8px; background: $subject-mint; }

.tk__pendant {
  position: absolute; left: 50%; top: 0; width: 3px; height: 18px;
  margin-left: -1.5px; border-radius: $r-pill; background: $wood;
}

// ── 바닥: 거실
.tk__base {
  position: absolute; left: 8px; right: 8px; bottom: 8px; height: 56px;
  border-radius: $r-sm;
  background: $sage; overflow: hidden;
}
.tk__wood {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, $floor 0 22px, #cba671 22px 24px);
}
.tk__sofa {
  position: absolute; left: 50%; bottom: 4px; width: 74px; height: 22px;
  margin-left: -37px;
  border-radius: $r-sm $r-sm $r-xs $r-xs;
  background: #efe3cd;
  box-shadow: inset 0 -4px 0 rgba(122, 102, 70, .25);
}
.tk__cushion {
  position: absolute; bottom: 6px; width: 22px; height: 12px;
  border-radius: $r-xs; background: #e2d2b6;
}
.tk__cushion--a { left: 8px; }
.tk__cushion--b { right: 8px; background: $subject-pink; }

.tk__pot {
  position: absolute; left: 22px; bottom: 4px; width: 18px; height: 14px;
  border-radius: 0 0 $r-xs $r-xs; background: $subject-orange-deep;
}
.tk__leaf {
  position: absolute; bottom: 10px; width: 8px; height: 16px;
  border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
  background: $subject-mint;
  transform-origin: bottom center;
}
.tk__leaf--l { left: 3px; transform: rotate(-16deg); }
.tk__leaf--r { left: 9px; transform: rotate(16deg); }

.tk__ladder {
  position: absolute; right: 24px; bottom: 4px; width: 18px; height: 30px;
  border-left: 3px solid $wood; border-right: 3px solid $wood;
  box-sizing: border-box;
  background: repeating-linear-gradient(0deg, transparent 0 6px, $wood 6px 9px);
  opacity: .85;
}

// 램프: 버튼. 누르면 갓 온기와 방 겹침막이 밝아진다
.tk__lamp {
  position: absolute; right: 54px; bottom: 4px; width: 24px; height: 34px;
  padding: 0; border: 0; background: none; cursor: pointer;
}
.tk__lstand {
  position: absolute; left: 50%; bottom: 0; width: 3px; height: 12px;
  margin-left: -1.5px; border-radius: $r-pill; background: $wood-deep;
}
.tk__lshade {
  position: absolute; left: 50%; top: 0; width: 20px; height: 14px;
  margin-left: -10px;
  clip-path: polygon(26% 0, 74% 0, 100% 100%, 0 100%);
  background: #fdf6e8;
  transition: box-shadow $dur-base $easing;
}
.tk__lglow {
  position: absolute; left: 50%; top: 2px; width: 38px; height: 30px;
  margin-left: -19px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, rgba(255, 210, 63, .8) 0 34%, rgba(255, 210, 63, 0) 74%);
  transition: opacity $dur-base $easing;
}
.tk.is-lamp .tk__lshade {
  box-shadow: 0 6px 18px rgba(255, 210, 63, .55);
}
.tk.is-lamp .tk__lglow { opacity: 1; }

// 방 전체 온기 겹침막 (램프를 누를 수 있어야 하므로 포인터는 통과시킨다)
.tk__warm {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(circle at 72% 78%, rgba(255, 210, 63, .3) 0%, rgba(255, 210, 63, 0) 58%);
  transition: opacity $dur-base $easing;
}
.tk.is-lamp .tk__warm { opacity: 1; }

// 앞면 마감: 경첩·손잡이·잠금쇠
.tk__hinge {
  position: absolute; left: 26px; width: 14px; height: 5px;
  border-radius: $r-xs; background: $wood-deep;
}
.tk__hinge--l { top: 96px; }
.tk__hinge--r { right: 26px; left: auto; top: 96px; }
.tk__handle {
  position: absolute; left: 50%; top: 93px; width: 34px; height: 10px;
  margin-left: -17px;
  border: 3px solid #efe3cd; border-bottom: 0; box-sizing: border-box;
  border-radius: $r-pill $r-pill 0 0;
}
.tk__latch {
  position: absolute; top: 95px; width: 7px; height: 9px;
  border-radius: $r-xs; background: $wood-deep;
}
.tk__latch--l { left: 48px; }
.tk__latch--r { right: 48px; }

.tk__hint {
  margin: 0; font-size: 11px; line-height: 1.4;
  color: rgba(255, 247, 230, .72);
}

@keyframes tkTwinkle {
  0%, 100% { opacity: .35; }
  18% { opacity: 1; }
  46% { opacity: .5; }
}

// 사람이 고른 상태: 반짝임은 계속(사는 방) — 상태 전환은 transition 이 담당

@media (max-width: 340px) {
  .tk__trunk { width: 208px; height: 146px; }
  .tk__lid { height: 78px; }
  .tk__base { height: 50px; }
  .tk__sofa { width: 64px; }
  .tk__lamp { right: 48px; }
  .tk__hint { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .tk__bulb { animation-name: none !important; }
  .tk__lshade, .tk__lglow, .tk__warm { transition: none !important; }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #17141a;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.tk {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: min(100%, 320px);
}

.tk__trunk {
  position: relative;
  box-sizing: border-box;
  width: 236px;
  height: 164px;
  border-radius: 16px;
  background: #9aab89;
  box-shadow: inset 0 0 0 3px #7d8f6e;
}

.tk__lid {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 8px;
  height: 88px;
  border-radius: 8px;
  background: #9aab89;
  overflow: hidden;
}

.tk__paper {
  position: absolute;
  inset: 8px;
  border-radius: 4px;
  background: #f3ead9;
}

.tk__wire {
  position: absolute;
  left: 2px;
  right: 2px;
  top: 18px;
  height: 2px;
  border-radius: 999px;
  background: rgba(122, 102, 70, 0.8);
  transform: rotate(1.2deg);
  transform-origin: left center;
}

.tk__bulb {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ffd23f;
  box-shadow: 0 0 6px rgba(255, 210, 63, 0.9);
  animation-name: tkTwinkle;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.tk__bulb--a {
  left: 8%;
  top: 16px;
  animation-delay: 0ms;
}

.tk__bulb--b {
  left: 21%;
  top: 20px;
  animation-delay: 250ms;
}

.tk__bulb--c {
  left: 34%;
  top: 22px;
  animation-delay: 500ms;
}

.tk__bulb--d {
  left: 47%;
  top: 21px;
  animation-delay: 750ms;
}

.tk__bulb--e {
  left: 60%;
  top: 18px;
  animation-delay: 1000ms;
}

.tk__bulb--f {
  left: 86%;
  top: 15px;
  animation-delay: 1250ms;
}

.tk__mirror {
  position: absolute;
  left: 50%;
  top: 30px;
  width: 38px;
  height: 38px;
  margin-left: -19px;
  border-radius: 50%;
  border: 4px solid #c89b6a;
  box-sizing: border-box;
  background: #a87e50;
}

.tk__glass {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(200deg, #dceef2 0%, #b9d7de 100%);
}

.tk__mshine {
  position: absolute;
  left: 6px;
  top: 5px;
  width: 5px;
  height: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  transform: rotate(28deg);
}

.tk__frame {
  position: absolute;
  border: 2px solid #c89b6a;
  box-sizing: border-box;
  border-radius: 4px;
  background: #fdf6e8;
}

.tk__frame--a {
  left: 12px;
  top: 34px;
  width: 14px;
  height: 17px;
}

.tk__frame--b {
  left: 12px;
  top: 56px;
  width: 17px;
  height: 13px;
}

.tk__frame--c {
  left: 33px;
  top: 58px;
  width: 13px;
  height: 16px;
}

.tk__frame--d {
  right: 12px;
  top: 32px;
  width: 13px;
  height: 16px;
}

.tk__frame--e {
  right: 31px;
  top: 58px;
  width: 16px;
  height: 13px;
}

.tk__frame--f {
  right: 12px;
  top: 54px;
  width: 14px;
  height: 14px;
}

.tk__shelf {
  position: absolute;
  height: 4px;
  border-radius: 4px;
  background: #c89b6a;
}

.tk__shelf--l {
  left: 8px;
  top: 76px;
  width: 34px;
}

.tk__shelf--r {
  right: 8px;
  top: 72px;
  width: 28px;
}

.tk__book {
  position: absolute;
  bottom: 4px;
  width: 7px;
  height: 12px;
  border-radius: 4px 4px 0 0;
  background: #2f6df6;
}

.tk__shelf--l .tk__book {
  left: 4px;
}

.tk__book--lean {
  left: 13px;
  background: #ff9ebb;
  transform: rotate(9deg);
  transform-origin: bottom left;
}

.tk__shelf--r .tk__book {
  left: 8px;
  background: #4cd4a6;
}

.tk__pendant {
  position: absolute;
  left: 50%;
  top: 0;
  width: 3px;
  height: 18px;
  margin-left: -1.5px;
  border-radius: 999px;
  background: #c89b6a;
}

.tk__base {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  height: 56px;
  border-radius: 8px;
  background: #9aab89;
  overflow: hidden;
}

.tk__wood {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, #d9b98c 0 22px, #cba671 22px 24px);
}

.tk__sofa {
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 74px;
  height: 22px;
  margin-left: -37px;
  border-radius: 8px 8px 4px 4px;
  background: #efe3cd;
  box-shadow: inset 0 -4px 0 rgba(122, 102, 70, 0.25);
}

.tk__cushion {
  position: absolute;
  bottom: 6px;
  width: 22px;
  height: 12px;
  border-radius: 4px;
  background: #e2d2b6;
}

.tk__cushion--a {
  left: 8px;
}

.tk__cushion--b {
  right: 8px;
  background: #ff9ebb;
}

.tk__pot {
  position: absolute;
  left: 22px;
  bottom: 4px;
  width: 18px;
  height: 14px;
  border-radius: 0 0 4px 4px;
  background: #c93000;
}

.tk__leaf {
  position: absolute;
  bottom: 10px;
  width: 8px;
  height: 16px;
  border-radius: 50% 50% 50% 50%/70% 70% 30% 30%;
  background: #4cd4a6;
  transform-origin: bottom center;
}

.tk__leaf--l {
  left: 3px;
  transform: rotate(-16deg);
}

.tk__leaf--r {
  left: 9px;
  transform: rotate(16deg);
}

.tk__ladder {
  position: absolute;
  right: 24px;
  bottom: 4px;
  width: 18px;
  height: 30px;
  border-left: 3px solid #c89b6a;
  border-right: 3px solid #c89b6a;
  box-sizing: border-box;
  background: repeating-linear-gradient(0deg, transparent 0 6px, #c89b6a 6px 9px);
  opacity: 0.85;
}

.tk__lamp {
  position: absolute;
  right: 54px;
  bottom: 4px;
  width: 24px;
  height: 34px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.tk__lstand {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 3px;
  height: 12px;
  margin-left: -1.5px;
  border-radius: 999px;
  background: #a87e50;
}

.tk__lshade {
  position: absolute;
  left: 50%;
  top: 0;
  width: 20px;
  height: 14px;
  margin-left: -10px;
  clip-path: polygon(26% 0, 74% 0, 100% 100%, 0 100%);
  background: #fdf6e8;
  transition: box-shadow 300ms ease-out;
}

.tk__lglow {
  position: absolute;
  left: 50%;
  top: 2px;
  width: 38px;
  height: 30px;
  margin-left: -19px;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle, rgba(255, 210, 63, 0.8) 0 34%, rgba(255, 210, 63, 0) 74%);
  transition: opacity 300ms ease-out;
}

.tk.is-lamp .tk__lshade {
  box-shadow: 0 6px 18px rgba(255, 210, 63, 0.55);
}

.tk.is-lamp .tk__lglow {
  opacity: 1;
}

.tk__warm {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle at 72% 78%, rgba(255, 210, 63, 0.3) 0%, rgba(255, 210, 63, 0) 58%);
  transition: opacity 300ms ease-out;
}

.tk.is-lamp .tk__warm {
  opacity: 1;
}

.tk__hinge {
  position: absolute;
  left: 26px;
  width: 14px;
  height: 5px;
  border-radius: 4px;
  background: #a87e50;
}

.tk__hinge--l {
  top: 96px;
}

.tk__hinge--r {
  right: 26px;
  left: auto;
  top: 96px;
}

.tk__handle {
  position: absolute;
  left: 50%;
  top: 93px;
  width: 34px;
  height: 10px;
  margin-left: -17px;
  border: 3px solid #efe3cd;
  border-bottom: 0;
  box-sizing: border-box;
  border-radius: 999px 999px 0 0;
}

.tk__latch {
  position: absolute;
  top: 95px;
  width: 7px;
  height: 9px;
  border-radius: 4px;
  background: #a87e50;
}

.tk__latch--l {
  left: 48px;
}

.tk__latch--r {
  right: 48px;
}

.tk__hint {
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
  color: rgba(255, 247, 230, 0.72);
}

@keyframes tkTwinkle {
  0%, 100% {
    opacity: 0.35;
  }
  18% {
    opacity: 1;
  }
  46% {
    opacity: 0.5;
  }
}
@media (max-width: 340px) {
  .tk__trunk {
    width: 208px;
    height: 146px;
  }
  .tk__lid {
    height: 78px;
  }
  .tk__base {
    height: 50px;
  }
  .tk__sofa {
    width: 64px;
  }
  .tk__lamp {
    right: 48px;
  }
  .tk__hint {
    font-size: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tk__bulb {
    animation-name: none !important;
  }
  .tk__lshade, .tk__lglow, .tk__warm {
    transition: none !important;
  }
}

// lamp: .is-lamp 하나로 갓의 온기와 방의 밝기가 같이 바뀐다.
// 손이 닿는 순간 미리보기 루프(.is-demo)를 떼고 고른 상태를 유지한다.
(function () {
  var root = document.getElementById('tkRoot');
  var lamp = document.getElementById('tkLamp');
  lamp.addEventListener('click', function () {
    root.classList.remove('is-demo');
    var lit = root.classList.toggle('is-lamp');
    lamp.setAttribute('aria-pressed', lit ? 'true' : 'false');
  });
})();

// TrunkHouse — vanilla 판(run/078/demo/09-object-trunk-house/index.html) 의 React 포트.
// 램프는 lit 하나로 갓 온기와 방 밝기가 같이 바뀐다. 첫 클릭에 미리보기 루프를 뗀다.
import { useState } from "react";
import type { CSSProperties } from "react";
import styles from "./TrunkHouse.module.scss";

export type TrunkHouseProps = {
  duration?: number;
  easing?: string;
  color?: string;
  initialLamp?: boolean;
};

type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };

export default function TrunkHouse(props: TrunkHouseProps) {
  const duration = props.duration ?? 2000;
  const easing = props.easing ?? "ease-out";
  const color = props.color ?? "#fff7e6";
  const [lit, setLit] = useState<boolean>(props.initialLamp ?? false);
  const [preview, setPreview] = useState<boolean>(true);

  const vars: Vars = { "--duration": duration + "ms", "--easing": easing, "--color": color };
  const rootClass = ["tk", preview ? "is-demo" : "", lit ? "is-lamp" : ""]
    .filter(Boolean).map((c) => (styles as { [k: string]: string })[c]).join(" ");

  return (
    <main className={styles.stage}>
      <div className={rootClass} style={vars}>
        <div className={styles["tk__trunk"]}>
          <div className={styles["tk__lid"]}>
            <span className={styles["tk__paper"]}></span>
            <span className={styles["tk__wire"]}></span>
            <span className={styles["tk__bulb"] + " " + styles["tk__bulb--a"]}></span>
            <span className={styles["tk__bulb"] + " " + styles["tk__bulb--b"]}></span>
            <span className={styles["tk__bulb"] + " " + styles["tk__bulb--c"]}></span>
            <span className={styles["tk__bulb"] + " " + styles["tk__bulb--d"]}></span>
            <span className={styles["tk__bulb"] + " " + styles["tk__bulb--e"]}></span>
            <span className={styles["tk__bulb"] + " " + styles["tk__bulb--f"]}></span>
            <span className={styles["tk__mirror"]}>
              <span className={styles["tk__glass"]}></span>
              <span className={styles["tk__mshine"]}></span>
            </span>
            <span className={styles["tk__frame"] + " " + styles["tk__frame--a"]}></span>
            <span className={styles["tk__frame"] + " " + styles["tk__frame--b"]}></span>
            <span className={styles["tk__frame"] + " " + styles["tk__frame--c"]}></span>
            <span className={styles["tk__frame"] + " " + styles["tk__frame--d"]}></span>
            <span className={styles["tk__frame"] + " " + styles["tk__frame--e"]}></span>
            <span className={styles["tk__frame"] + " " + styles["tk__frame--f"]}></span>
            <span className={styles["tk__shelf"] + " " + styles["tk__shelf--l"]}>
              <span className={styles["tk__book"]}></span>
              <span className={styles["tk__book"] + " " + styles["tk__book--lean"]}></span>
            </span>
            <span className={styles["tk__shelf"] + " " + styles["tk__shelf--r"]}>
              <span className={styles["tk__book"]}></span>
            </span>
            <span className={styles["tk__pendant"]}></span>
          </div>
          <div className={styles["tk__base"]}>
            <span className={styles["tk__wood"]}></span>
            <span className={styles["tk__sofa"]}>
              <span className={styles["tk__cushion"] + " " + styles["tk__cushion--a"]}></span>
              <span className={styles["tk__cushion"] + " " + styles["tk__cushion--b"]}></span>
            </span>
            <span className={styles["tk__pot"]}>
              <span className={styles["tk__leaf"] + " " + styles["tk__leaf--l"]}></span>
              <span className={styles["tk__leaf"] + " " + styles["tk__leaf--r"]}></span>
            </span>
            <span className={styles["tk__ladder"]}></span>
            <button
              className={styles["tk__lamp"]}
              type="button"
              aria-pressed={lit ? "true" : "false"}
              aria-label="램프"
              onClick={() => { setPreview(false); setLit((l) => !l); }}
            >
              <span className={styles["tk__lstand"]}></span>
              <span className={styles["tk__lshade"]}></span>
              <span className={styles["tk__lglow"]}></span>
            </button>
            <span className={styles["tk__warm"]}></span>
          </div>
          <span className={styles["tk__hinge"] + " " + styles["tk__hinge--l"]}></span>
          <span className={styles["tk__hinge"] + " " + styles["tk__hinge--r"]}></span>
          <span className={styles["tk__handle"]}></span>
          <span className={styles["tk__latch"] + " " + styles["tk__latch--l"]}></span>
          <span className={styles["tk__latch"] + " " + styles["tk__latch--r"]}></span>
        </div>
        <p className={styles["tk__hint"]}>램프를 눌러 보세요</p>
      </div>
    </main>
  );
}