*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:#120d09;overflow:hidden}body{font-family:Georgia,'Times New Roman',serif}button{font:inherit}#stage{position:relative;width:100vw;height:100vh;overflow:hidden}#roomImage{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none;transition:opacity .06s linear}#roomTitle{position:fixed;z-index:8;top:22px;left:28px;color:#fff;font:italic 25px Georgia,serif;text-shadow:0 2px 5px #000,0 0 8px #0008;letter-spacing:.01em}#stage.bedroom #roomTitle{cursor:pointer}
#musicBar{position:fixed;z-index:8;right:26px;top:20px;display:flex;gap:12px;align-items:center;color:#fff;text-shadow:0 2px 5px #000;font:italic 14px Georgia,serif;background:#2c1d1494;padding:8px 10px 8px 14px;border-radius:2px;backdrop-filter:blur(2px)}#trackName{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#playBtn{border:0;background:transparent;color:#fff;cursor:pointer;font-size:15px;padding:0 2px}
.hotspotLayer{position:absolute;inset:0}.hotspot{position:absolute;border:0;background:transparent;cursor:pointer;padding:0}.mirror{left:69.2%;top:24.2%;width:8.3%;height:55.3%}.books{left:31.8%;top:82%;width:24.2%;height:18%;clip-path:polygon(5% 58%,20% 44%,42% 39%,47% 15%,88% 0,100% 46%,84% 60%,96% 80%,76% 100%,22% 92%,0 75%)}.trophy{left:71.8%;top:9%;width:8.8%;height:17.5%}.posters{left:38.3%;top:0%;width:32.4%;height:35%}.laptop{left:33%;top:73.5%;width:12.8%;height:19.8%}.bgm{left:42.8%;top:43.5%;width:17%;height:12.5%;clip-path:polygon(0 0,88% 0,100% 35%,92% 100%,5% 100%)}.door{left:80.2%;top:4%;width:15.4%;height:70%;clip-path:polygon(9% 0,100% 0,100% 100%,0 100%,0 8%)}.dog{left:16%;top:68.2%;width:12.5%;height:13.5%}.cat{left:82%;top:72%;width:10.8%;height:10%}
#bedroomHotspots{display:none}.idea{left:73.4%;top:7.5%;width:22%;height:28.5%}.private{left:78.5%;top:35.5%;width:18%;height:25%}.note{left:46.5%;top:56.5%;width:10.5%;height:10%}.beddog{left:35%;top:46%;width:17%;height:13%}.bedcat{left:18.5%;top:35%;width:7.5%;height:19%}#stage.bedroom #livingHotspots{display:none}#stage.bedroom #bedroomHotspots{display:block}
#tip{position:fixed;z-index:9;display:none;color:#fff;font:italic 19px Georgia,serif;-webkit-text-stroke:.45px #fff;text-shadow:0 2px 4px #000,0 0 8px #000;pointer-events:none;white-space:nowrap}
#overlay,#musicOverlay,#privateOverlay{position:fixed;inset:0;z-index:10;display:none;place-items:center;background:rgba(8,6,4,.68)}#overlay.open,#musicOverlay.open,#privateOverlay.open{display:grid}
#paper,#musicPaper,#privatePaper{position:relative;width:min(520px,78vw);min-height:365px;padding:55px 60px 52px;color:#463a30;background:#e6d7c1;box-shadow:0 18px 50px #0009;clip-path:polygon(1% 1%,6% .2%,12% 1%,19% .3%,28% 1.1%,37% .4%,47% 1%,56% .2%,66% .9%,77% .3%,88% 1%,99% .4%,99.4% 12%,98.8% 24%,99.5% 36%,98.9% 49%,99.4% 63%,98.8% 76%,99.3% 89%,98.5% 99%,88% 98.8%,77% 99.4%,65% 98.7%,54% 99.5%,43% 98.8%,31% 99.3%,19% 98.6%,8% 99.2%,.5% 98.5%,1.2% 86%,.5% 72%,1.1% 58%,.4% 44%,1.2% 29%,.5% 15%);background-image:radial-gradient(#765f4520 .65px,transparent .8px),linear-gradient(110deg,#eadfce,#dfcdb5);background-size:5px 5px,100% 100%;transform:rotate(-.45deg);animation:paperPop .095s cubic-bezier(.16,.88,.26,1.18)}#paper:after,#musicPaper:after,#privatePaper:after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(7deg,transparent 0 10px,#70583806 11px 12px);mix-blend-mode:multiply}.tape{position:absolute;width:74px;height:28px;top:-10px;left:50%;transform:translateX(-50%) rotate(1deg);background:#c8b78b8c;box-shadow:0 1px 2px #6c5a3b33}#paper h1,#musicPaper h1,#privatePaper h1{margin:0 0 38px;text-align:center;font-family:'Segoe Print','Bradley Hand','Comic Sans MS',cursive;font-weight:400;font-size:52px;line-height:1;letter-spacing:.01em;transform:rotate(-1deg)}.paperBody{text-align:center;font-size:16px;line-height:1.8}.sub{text-align:center;margin:-25px 0 28px;font-style:italic}#musicPaper,#privatePaper{min-height:390px}#musicPaper button,.folders button{position:relative;z-index:2;display:block;width:100%;margin:10px 0;padding:13px 10px;border:0;border-bottom:1px solid #6c58475c;background:transparent;color:#493c30;text-align:left;cursor:pointer;font-style:italic;font-size:17px}#musicPaper button:hover,.folders button:hover{padding-left:18px}.folders{padding-top:10px}
@keyframes paperPop{from{opacity:0;transform:translateY(-12px) scale(.92) rotate(-1.7deg)}to{opacity:1;transform:translateY(0) scale(1) rotate(-.45deg)}}
@media(max-width:700px){#roomTitle{left:18px;top:16px;font-size:19px}#musicBar{right:14px;top:14px;font-size:12px}#trackName{max-width:145px}#paper,#musicPaper,#privatePaper{width:86vw;min-height:55vh;padding:48px 36px}#paper h1,#musicPaper h1,#privatePaper h1{font-size:42px}}

/* v5 fixed hotspot markers */
#tip{display:none!important}
.hotspot{overflow:visible}
.hotspot::after{content:"";position:absolute;left:var(--mx,50%);top:var(--my,50%);width:10px;height:10px;border:2px solid rgba(255,255,255,.95);border-radius:50%;background:rgba(255,255,255,.18);box-shadow:0 1px 5px #000,0 0 0 3px rgba(255,255,255,.13);transform:translate(-50%,-50%);pointer-events:none;opacity:.9}
.hotspot::before{content:attr(data-label);position:absolute;left:var(--lx,50%);top:var(--ly,50%);transform:translate(var(--tx,-50%),var(--ty,-155%));color:#fff;font:italic 19px Georgia,'Times New Roman',serif;-webkit-text-stroke:.35px #fff;text-shadow:0 2px 4px #000,0 0 8px #000;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .07s linear}
.hotspot:hover::before{opacity:1}
/* tighter/expanded living-room hit areas and label anchors */
.mirror{left:67.7%;top:23%;width:10.4%;height:57%;--mx:55%;--my:50%;--lx:55%;--ly:50%}
.trophy{left:70.7%;top:7.5%;width:11.7%;height:21%;--mx:54%;--my:48%;--lx:54%;--ly:48%}
.door{left:82.8%;top:10%;width:12.1%;height:61%;clip-path:polygon(10% 0,100% 0,100% 100%,0 100%,0 10%);--mx:63%;--my:72%;--lx:63%;--ly:72%;--tx:-55%;--ty:-155%}
.bgm{--mx:52%;--my:48%;--lx:52%;--ly:48%}.posters{--mx:67%;--my:60%;--lx:67%;--ly:60%}.books{--mx:63%;--my:40%;--lx:63%;--ly:40%}.laptop{--mx:52%;--my:48%;--lx:52%;--ly:48%}.dog{--mx:48%;--my:48%;--lx:48%;--ly:48%}.cat{--mx:55%;--my:48%;--lx:55%;--ly:48%}
/* bedroom fixed markers */
.idea{--mx:55%;--my:52%;--lx:55%;--ly:52%}.private{--mx:53%;--my:48%;--lx:53%;--ly:48%}.note{--mx:50%;--my:52%;--lx:50%;--ly:52%}.beddog{--mx:52%;--my:50%;--lx:52%;--ly:50%}.bedcat{--mx:52%;--my:48%;--lx:52%;--ly:48%}
.out{left:2%;top:76%;width:28%;height:22%;clip-path:polygon(0 25%,100% 0,100% 100%,0 100%);--mx:35%;--my:62%;--lx:35%;--ly:62%;--tx:-50%;--ty:-155%}
@media(max-width:700px){.hotspot::before{font-size:15px}.hotspot::after{width:8px;height:8px}}

/* v6: markers appear only on hover; fixed within each hotspot */
.hotspot::after{opacity:0;transition:opacity .05s linear}
.hotspot:hover::after{opacity:.9}
.hotspot:hover::before{opacity:1}
/* recentered living-room interaction targets */
.trophy{left:72.3%;top:8.2%;width:9.6%;height:20.5%;--mx:54%;--my:47%;--lx:54%;--ly:47%}
.mirror{left:69.0%;top:25.0%;width:9.4%;height:54.5%;--mx:55%;--my:48%;--lx:55%;--ly:48%}
.cat{left:81.8%;top:70.0%;width:10.5%;height:12.5%;--mx:55%;--my:45%;--lx:55%;--ly:45%}

/* v7 — hotspot coordinate layer follows the 16:9 image itself, including object-fit:cover cropping */
.hotspotLayer{
  position:absolute;
  left:50%;top:50%;
  width:max(100vw,calc(100vh * 16 / 9));
  height:max(100vh,calc(100vw * 9 / 16));
  transform:translate(-50%,-50%);
}
/* exact object-centered living-room targets */
.trophy{left:73.2%;top:5.0%;width:8.0%;height:17.0%;--mx:50%;--my:35%;--lx:50%;--ly:35%}
.mirror{left:71.2%;top:23.0%;width:10.3%;height:57.0%;--mx:50%;--my:51%;--lx:50%;--ly:51%}
.door{left:83.2%;top:7.0%;width:15.0%;height:66.0%;clip-path:polygon(14% 0,100% 0,100% 100%,0 100%,0 8%);--mx:52%;--my:50%;--lx:52%;--ly:50%;--tx:-50%;--ty:-155%}
.cat{left:83.8%;top:70.5%;width:9.0%;height:12.0%;--mx:35%;--my:48%;--lx:35%;--ly:48%}
/* larger writing canvas, preserving paper color, edge, type and animation */
#paper,#musicPaper,#privatePaper{width:min(720px,88vw);min-height:520px;padding:68px 76px 64px}
#paper h1,#musicPaper h1,#privatePaper h1{font-size:56px}
#musicPaper,#privatePaper{min-height:520px}
@media(max-width:700px){
  #paper,#musicPaper,#privatePaper{width:91vw;min-height:70vh;max-height:88vh;overflow:auto;padding:54px 38px 48px}
  #paper h1,#musicPaper h1,#privatePaper h1{font-size:44px}
}


/* v8 — keep Counseling Psy. label fully visible inside the clipped books hotspot */
.books{--mx:68%;--my:40%;--lx:76%;--ly:40%;--tx:-50%;--ty:-155%}

/* v8 — PRIVATE opens a computer desktop instead of paper */
#computerScreen{
  position:relative;width:min(760px,88vw);height:min(480px,72vh);overflow:hidden;
  border:12px solid #191b1d;border-radius:12px;background:#4f78a8;
  box-shadow:0 22px 65px #000c, inset 0 0 0 1px #ffffff24;
  animation:screenPop .11s cubic-bezier(.16,.88,.26,1.12);
  font-family:Arial,Helvetica,sans-serif;color:#fff;
}
#computerScreen:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(#ffffff08 50%,#00000008 50%);background-size:100% 4px;mix-blend-mode:soft-light}
.screenTop{height:42px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;background:#e8e8e8;color:#343434;font-size:14px;letter-spacing:.02em}
.screenDots{font-size:9px;letter-spacing:5px;color:#777}
.desktopFolders{height:calc(100% - 42px);display:flex;align-items:center;justify-content:center;gap:86px;padding:30px}
.desktopFolders button{border:0;background:transparent;color:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:12px;font-size:15px;text-shadow:0 1px 3px #0008}
.folderIcon{position:relative;width:92px;height:66px;border-radius:5px;background:#69a8e8;box-shadow:inset 0 -8px 0 #4c91d6,0 5px 10px #1c385b55}
.folderIcon:before{content:"";position:absolute;left:7px;top:-13px;width:40px;height:18px;border-radius:5px 5px 0 0;background:#69a8e8}
.desktopFolders button:hover .folderIcon{transform:translateY(-3px);filter:brightness(1.08)}
@keyframes screenPop{from{transform:scale(.95);opacity:.2}to{transform:scale(1);opacity:1}}
@media(max-width:700px){#computerScreen{width:92vw;height:58vh;border-width:8px}.desktopFolders{gap:25px;padding:20px}.folderIcon{width:68px;height:49px}.folderIcon:before{width:30px;height:13px;top:-10px}.desktopFolders button{font-size:12px}}

/* v9 — larger, softer room title */
#roomTitle{font-size:32px;opacity:.78}
@media(max-width:700px){#roomTitle{font-size:24px;opacity:.78}}

/* v11 — micro-position fixes from visual QA */
/* Keep Counseling Psy. fully inside the clipped books hotspot */
.books{--mx:72%;--my:40%;--lx:92%;--ly:40%;--tx:-50%;--ty:-155%}
/* Move the More marker about one marker-width further into the doorway */
.door{--mx:44%;--my:50%;--lx:44%;--ly:50%;--tx:-50%;--ty:-155%}
/* Anchor Broadcasting marker on the trophy base rather than the cup */
.trophy{--mx:50%;--my:76%;--lx:50%;--ly:76%}

/* v12 — visual micro-position fixes */
/* SNS marker/label: move upward onto/above the Apple logo */
.laptop{--mx:52%;--my:34%;--lx:52%;--ly:34%}
/* Tastes marker/label: center on the poster hotspot */
.posters{--mx:50%;--my:50%;--lx:50%;--ly:50%}

/* v13 — label placement fixes from screenshot QA */
/* SNS: center the marker on the Apple logo and place the label directly above it. */
.laptop{--mx:67%;--my:43%;--lx:67%;--ly:43%;--tx:-50%;--ty:-175%}
/* Counseling Psy.: move marker + label onto the Lacan front-cover area, well inside the clipped hotspot so the full text is never clipped. */
.books{--mx:38%;--my:48%;--lx:38%;--ly:48%;--tx:-18%;--ty:-165%}
\n\n/* v14 — exact hover-anchor fixes */
/* SNS: marker + label sit above the Apple logo, toward the sofa/laptop gap. */
.laptop{--mx:67%;--my:10%;--lx:67%;--ly:10%;--tx:-50%;--ty:-165%}

/* Counseling label is rendered OUTSIDE the clipped polygon hotspot so it can never be cut off. */
.books::before,.books::after{display:none!important}
.objectHint{position:absolute;pointer-events:none;opacity:0;transition:opacity .07s linear;z-index:8}
.objectHint span{position:absolute;left:0;top:0;transform:translate(-50%,-165%);color:#fff;font:italic 19px Georgia,'Times New Roman',serif;-webkit-text-stroke:.35px #fff;text-shadow:0 2px 4px #000,0 0 8px #000;white-space:nowrap}
.objectHint i{position:absolute;left:0;top:0;width:14px;height:14px;border:2px solid #fff;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 3px #0005,0 1px 5px #0008;background:#ffffff20}
.booksHint{left:48.0%;top:81.0%}
.books:hover ~ .booksHint,.books:focus-visible ~ .booksHint{opacity:1}

/* v15 — spacing refinement: separate SNS and Counseling Psy. */
/* SNS anchor near the laptop's upper-left corner, above the Apple logo. */
.laptop{--mx:18%;--my:8%;--lx:18%;--ly:8%;--tx:-50%;--ty:-165%}
/* Counseling Psy. anchor just to the right of the '무' on the Being and Nothingness title. */
.booksHint{left:45.5%;top:77.2%}

/* v16 — fixed global hover labels: no relative hotspot drift */
.laptop::before,.laptop::after{display:none!important}
.snsHint{left:35.8%;top:72.8%}
.laptop:hover ~ .snsHint,.laptop:focus-visible ~ .snsHint{opacity:1}
/* Circle sits just down-right of the ‘무’ on 존재와 무. */
.booksHint{left:47.2%;top:79.2%}

/* v17 — object-anchored labels. These are global image coordinates, independent of hotspot clipping. */
/* SNS: on the laptop lid, upper-left/center area. */
.snsHint{left:34.2%!important;top:69.0%!important}
/* Counseling Psy.: on the Being and Nothingness book stack, safely away from laptop. */
.booksHint{left:43.8%!important;top:76.8%!important}

/* v18 — corrected image-coordinate anchors after screenshot QA */
/* SNS: visibly on the laptop lid, between its upper-left edge and Apple logo. */
.snsHint{left:37.8%!important;top:74.2%!important}
/* Counseling Psy.: on the right-hand book stack, immediately around the '존재와 무' title area. */
.booksHint{left:50.8%!important;top:78.0%!important}

/* v19 — requested micro-adjustments from v18 */
/* SNS: 0.8 cm-ish visual nudge right + down */
.snsHint{left:38.6%!important;top:75.0%!important}
/* Counseling Psy.: ~1 cm visual nudge downward */
.booksHint{left:50.8%!important;top:79.0%!important}

/* v20: move Counseling Psy. hint down 4cm only */
.booksHint{transform:translateY(4cm)!important;}
/* v21: move Counseling Psy. up 3cm from v20 */
.booksHint{transform:translateY(1cm)!important;}

/* FINAL — bedroom Private hover placement */
/* Marker sits on the lower-left silver iMac bezel; label appears below the marker. */
.private{--mx:18%;--my:88%;--lx:18%;--ly:88%;--tx:-50%;--ty:62%}