/* 가족 미술관 (가칭) — 시안. transform/opacity 전환만 사용 */
:root{
  --ease:cubic-bezier(.22,.61,.36,1);
  --vh:1vh;
  --p-wall:#f3ede3;--p-side:#e6ddcf;--p-floor:#b9976e;--p-ceil:#ebe3d6;--p-text:#2b2622;--p-sub:#5e554c;--p-accent:#7a3f2a;
  --f-wall:#1e1e20;--f-side:#161618;--f-floor:#2a2826;--f-ceil:#121214;--f-text:#f1eee8;--f-sub:#b5b0a8;--f-accent:#c8553d;
  --sans:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic","맑은 고딕",sans-serif;
  --serif:"Noto Serif KR","AppleMyungjo","Batang",serif;
}
html{font-size:16px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
html.big{font-size:20px}
*,*:before,*:after{box-sizing:border-box}
body{margin:0;font-family:var(--sans);font-size:1.125rem;line-height:1.6;color:var(--p-text);background:#2b2622;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
@media (min-width:1024px){body{font-size:1.0625rem}}
h1,h2,h3,p{margin:0}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid #1b6ef3;outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:8px;top:-60px;z-index:100;background:#fff;color:#000;padding:12px 16px;font-size:1rem}
.skip:focus{top:8px}
#app{position:relative;min-height:calc(var(--vh)*100)}
.screen{position:relative;width:100%;min-height:calc(var(--vh)*100)}
.screen.fixed{position:fixed;top:0;left:0;right:0;height:calc(var(--vh)*100);overflow:hidden}
.fade{transition:opacity 300ms var(--ease)}
html.rm .fade{transition-duration:150ms}

/* 공통 버튼 */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;min-width:48px;padding:8px 18px;border-radius:12px;border:2px solid currentColor;background:transparent;font-size:1.0625rem;font-weight:600;text-decoration:none;cursor:pointer;line-height:1.3;text-align:center}
.btn.main{min-height:56px;font-size:1.25rem;font-weight:700;border-color:transparent;background:var(--p-accent);color:#fff;padding:10px 28px}
.photo .btn.main{background:var(--f-accent);color:#fff;font-size:1.1875rem}
.btn[aria-pressed="true"]{background:#fff;color:#2b2622;border-color:#fff}
.light .btn[aria-pressed="true"]{background:var(--p-text);color:#fff;border-color:var(--p-text)}
.btn[disabled]{opacity:.45;cursor:default}
.toggles{display:flex;flex-wrap:wrap;justify-content:center}
.toggles .btn{margin:6px;font-size:1rem}
.note{font-size:.875rem;line-height:1.5;opacity:.92}

/* S1 입구 */
.entrance{background:#000;color:#fff}
.entrance .zoomer{position:absolute;top:0;left:0;right:0;bottom:0;will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.entrance .zoomer img{width:100%;height:100%;object-fit:cover;object-position:48.5% 55%;display:block}
.entrance .scrim-top{position:absolute;left:0;right:0;top:0;height:46%;background:linear-gradient(rgba(10,9,8,.72),rgba(10,9,8,0));pointer-events:none}
.entrance .scrim-bot{position:absolute;left:0;right:0;bottom:0;height:48%;background:linear-gradient(rgba(10,9,8,0),rgba(10,9,8,.82) 55%);pointer-events:none}
.entrance .ui{will-change:opacity}
.entrance header{position:absolute;left:0;right:0;top:0;padding:calc(18px + env(safe-area-inset-top)) 20px 0;text-align:center}
.entrance .kicker{font-size:.9375rem;letter-spacing:.08em;opacity:.95}
.entrance h1{font-family:var(--serif);font-size:1.75rem;line-height:1.3;font-weight:700;margin-top:4px}
.entrance .halls{font-size:1.0625rem;margin-top:6px}
.entrance .greet{font-size:1rem;margin-top:6px;opacity:.95}
.entrance .bottom{position:absolute;left:0;right:0;bottom:0;padding:0 16px calc(12px + env(safe-area-inset-bottom));text-align:center}
.entrance .bottom .btn.main{width:100%;max-width:360px;font-size:1.375rem;min-height:60px}
.entrance .hint{font-size:1rem;margin:0 0 8px}
.door{position:absolute;min-width:56px;min-height:56px;border-radius:6px;border:2px solid rgba(255,255,255,.85);background:rgba(255,255,255,.06);box-shadow:0 0 0 3px rgba(0,0,0,.25);cursor:pointer;padding:0;transform:translate(-50%,-50%)}
.door span{position:absolute;left:50%;top:100%;margin-top:6px;transform:translateX(-50%);white-space:nowrap;font-size:.9375rem;font-weight:700;background:rgba(0,0,0,.6);padding:2px 10px;border-radius:999px}
#flash{position:fixed;top:0;left:0;right:0;bottom:0;background:#fffaf2;opacity:0;pointer-events:none;z-index:60;will-change:opacity}
@media (min-width:1024px){
  .entrance h1{font-size:2.5rem}
  .entrance header{padding-top:36px}
}
@media (max-height:620px){ .entrance .greet{display:none} }

/* S2 로비/배치도 */
.lobby{background:#e9e4dc;color:var(--p-text);padding:calc(16px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom))}
.lobby .wrap{max-width:1040px;margin:0 auto}
.topline{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.topline .btn{border-width:2px;font-size:1rem}
.lobby h1{font-family:var(--serif);font-size:1.625rem;line-height:1.35;margin:4px 0 4px}
.lobby .lead{color:var(--p-sub);margin-bottom:14px}
.halls-list{display:block}
.hall-card{display:block;position:relative;border-radius:14px;overflow:hidden;text-decoration:none;color:#fff;margin-bottom:14px;background:#333;min-height:200px}
.hall-card img{display:block;width:100%;height:200px;object-fit:cover}
.hall-card .cap{position:absolute;left:0;right:0;bottom:0;padding:40px 16px 14px;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.78) 45%)}
.hall-card .cap b{display:block;font-size:1.375rem;line-height:1.3}
.hall-card .cap span{font-size:1rem}
.hall-card .go{position:absolute;right:12px;top:12px;background:rgba(0,0,0,.6);border-radius:999px;padding:6px 14px;font-size:1rem;font-weight:700}
@media (min-width:760px){
  .halls-list{display:flex}
  .hall-card{flex:1;margin-right:16px}
  .hall-card:last-child{margin-right:0}
  .hall-card img{height:300px}
}
.links{margin:6px 0 10px;text-align:center}
.links a{display:inline-flex;align-items:center;min-height:48px;padding:0 12px;font-size:1.0625rem;font-weight:600}
.foot{text-align:center;color:var(--p-sub);margin-top:14px}
.photo.lobby{background:#111113;color:var(--f-text)}
.photo.lobby .lead,.photo.lobby .foot{color:var(--f-sub)}

/* 평면도 */
.banner{height:120px;border-radius:12px;overflow:hidden;margin-bottom:14px}
.banner img{width:100%;height:100%;object-fit:cover;display:block}
.plan{position:relative;border:6px solid #8d877e;border-radius:4px;padding:12px;background:#f7f4ef}
.photo .plan{background:#1b1b1d;border-color:#4a4744}
.plan .entry{display:block;text-align:center;font-size:.9375rem;color:var(--p-sub);margin-top:6px}
.photo .plan .entry{color:var(--f-sub)}
.rooms{display:block}
.room-card{display:flex;align-items:center;width:100%;min-height:96px;margin-bottom:10px;padding:14px 16px;border:2px solid #8d877e;border-radius:4px;background:var(--p-wall);color:var(--p-text);text-decoration:none;cursor:pointer;text-align:left}
.photo .room-card{background:var(--f-wall);color:var(--f-text);border-color:#5a5652}
.room-card .num{flex:none;width:44px;height:44px;border-radius:50%;background:var(--p-accent);color:#fff;font-weight:700;font-size:1.25rem;display:flex;align-items:center;justify-content:center;margin-right:14px}
.photo .room-card .num{background:var(--f-accent)}
.room-card b{display:block;font-size:1.1875rem;line-height:1.35}
.room-card span{font-size:1rem;color:var(--p-sub)}
.room-card .rt{color:inherit;font-size:inherit;display:block}
.photo .room-card span{color:var(--f-sub)}
@media (min-width:760px){
  .rooms{display:flex}
  .room-card{flex:1;min-height:180px;margin:0 10px 0 0;flex-direction:column;justify-content:center;text-align:center}
  .room-card:last-child{margin-right:0}
  .room-card .num{margin:0 0 10px}
}
.grow{position:fixed;top:0;left:0;z-index:50;transform-origin:0 0;will-change:transform,opacity;pointer-events:none}

/* S3 전시실 */
.room{display:flex;flex-direction:column;color:var(--p-text);background:var(--p-ceil)}
.room.photo{color:var(--f-text);background:var(--f-ceil)}
.room .bar{flex:none;display:flex;align-items:center;min-height:56px;padding:4px 12px;padding-top:calc(4px + env(safe-area-inset-top));background:var(--p-wall);border-bottom:1px solid rgba(0,0,0,.08);position:relative;z-index:3}
.room.photo .bar{background:#141416;border-bottom-color:#2c2b2a}
.room .bar h1{font-size:1.0625rem;line-height:1.3;font-weight:700;flex:1;min-width:0}
.room .bar h1 small{display:block;font-size:.875rem;font-weight:500;color:var(--p-sub)}
.room.photo .bar h1 small{color:var(--f-sub)}
.stage{position:relative;flex:1;min-height:0;overflow:hidden;-webkit-perspective:900px;perspective:900px;-webkit-perspective-origin:50% 42%;perspective-origin:50% 42%;touch-action:pan-y}
.box{position:absolute;top:0;left:0;right:0;bottom:0;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}
.plane{position:absolute}
.front{left:var(--side);right:var(--side);top:var(--ceil);bottom:var(--floor);background:linear-gradient(#f6f1e8,var(--p-wall));overflow:hidden}
.left,.right{top:var(--ceil);bottom:var(--floor);width:560px;background:linear-gradient(90deg,#ddd3c3,var(--p-side));overflow:hidden}
.left{right:calc(100% - var(--side));-webkit-transform-origin:100% 100%;transform-origin:100% 100%;transform:rotateY(90deg)}
.right{left:calc(100% - var(--side));-webkit-transform-origin:0 100%;transform-origin:0 100%;transform:rotateY(-90deg);background:linear-gradient(270deg,#ddd3c3,var(--p-side))}
.floor{left:var(--side);right:var(--side);top:calc(100% - var(--floor));height:560px;-webkit-transform-origin:50% 0;transform-origin:50% 0;transform:rotateX(90deg);background:var(--p-floor);background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.06) 0 2px,transparent 2px 70px)}
.ceil{left:var(--side);right:var(--side);bottom:calc(100% - var(--ceil));height:560px;-webkit-transform-origin:50% 100%;transform-origin:50% 100%;transform:rotateX(-90deg);background:var(--p-ceil)}
.photo .front{background:linear-gradient(#232326,var(--f-wall))}
.photo .left{background:linear-gradient(90deg,#101012,var(--f-side))}
.photo .right{background:linear-gradient(270deg,#101012,var(--f-side))}
.photo .floor{background:var(--f-floor)}
.photo .ceil{background:var(--f-ceil)}
/* 노출 콘크리트 폼타이 구멍 무늬(옆 벽, 0.3배 시차) */
.ties{position:absolute;top:0;bottom:0;left:-100%;width:300%;background-image:radial-gradient(circle,rgba(0,0,0,.16) 0 2.5px,transparent 3px);background-size:90px 60px;background-position:20px 26px;will-change:transform}
.photo .ties{background-image:radial-gradient(circle,rgba(255,255,255,.06) 0 2.5px,transparent 3px)}
.safelight{position:absolute;left:0;right:0;bottom:10px;height:3px;background:#3a3836}
.strip{position:absolute;top:0;bottom:0;left:0;display:flex;will-change:transform;transition:transform 350ms var(--ease)}
html.rm .strip,html.rm .ties{transition:none!important}
.panel{flex:none;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 10px}
.art{display:flex;flex-direction:column;align-items:center;text-decoration:none;color:inherit;cursor:pointer;border-radius:4px;padding:4px}
.frame{background:#fff;border:6px solid #a8804f;border-color:#b58c5a #9c7445 #8e6a3f #a37b4a;box-shadow:0 12px 18px -6px rgba(40,25,10,.35)}
.frame .mat{padding:var(--mat,24px);background:#fbfaf7}
.frame img,.print img{display:block;background:#ddd}
.print{position:relative;background:#f7f6f2;padding:12px;box-shadow:0 10px 16px -6px rgba(0,0,0,.6)}
.print:before{content:"";position:absolute;left:50%;top:5px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#8a8580}
.plaque{margin-top:12px;background:#fbf9f5;color:#2b2622;padding:4px 10px;border:1px solid rgba(0,0,0,.1);font-size:.9375rem;line-height:1.4;text-align:center;max-width:100%}
.photo .plaque{background:#2a2a2d;color:var(--f-text);border-color:#3a3a3d}
.plaque b{font-weight:700}
.walltext{max-width:300px;text-align:left}
.walltext h2{font-family:var(--serif);font-size:1.5rem;line-height:1.35;margin-bottom:8px}
.photo .walltext h2{font-family:var(--sans);letter-spacing:-.02em}
.walltext p{font-size:1.125rem}
.walltext .who{font-size:1rem;color:var(--p-sub);margin-top:10px}
.photo .walltext .who{color:var(--f-sub)}
.endcard{text-align:center;max-width:300px}
.endcard h2{font-size:1.375rem;line-height:1.4;margin-bottom:14px}
.endcard .btn{width:100%;margin-bottom:10px}
.walk{position:absolute;left:0;right:0;bottom:0;height:var(--floor);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0 10px 8px;z-index:2}
.walkbtns{display:flex;width:100%;justify-content:space-between;margin-top:6px}
.walkbtns .btn{flex:0 1 48%;white-space:nowrap;padding:8px 10px}
.walk .btn{background:rgba(255,255,255,.92);color:#2b2622;border-color:#2b2622;min-height:56px;height:56px;min-width:104px;font-size:1.0625rem}
@media (min-width:1024px){.walkbtns .btn{flex:0 0 auto;min-width:180px}}
.photo .walk .btn{background:rgba(20,20,22,.9);color:var(--f-text);border-color:#8f8a84}
.walk .pos{font-size:1rem;font-weight:700;background:rgba(255,255,255,.85);padding:4px 12px;border-radius:999px;color:#2b2622;font-variant-numeric:tabular-nums}
.photo .walk .pos{background:rgba(20,20,22,.85);color:var(--f-text)}
.coach{position:absolute;left:12px;right:12px;top:10px;z-index:2;text-align:center;font-size:1rem;word-break:keep-all;overflow-wrap:anywhere;background:rgba(43,38,34,.9);color:#fff;padding:8px 12px;border-radius:10px}
.roomnav{flex:none;display:flex;padding:6px 8px calc(6px + env(safe-area-inset-bottom));background:var(--p-wall);border-top:1px solid rgba(0,0,0,.08);position:relative;z-index:3}
.room.photo .roomnav{background:#141416;border-top-color:#2c2b2a}
.roomnav .btn{flex:1;margin:0 4px;min-height:52px;padding:6px 8px;font-size:1.0625rem}

/* S4 작품 보기 */
.viewer{position:fixed;top:0;left:0;right:0;height:calc(var(--vh)*100);z-index:40;display:flex;flex-direction:column;color:var(--p-text)}
.viewer .dim{position:absolute;top:0;left:0;right:0;bottom:0;background:#e9e2d6;will-change:opacity}
.viewer.photo .dim{background:#0e0e10}
.viewer.photo{color:var(--f-text)}
.viewer .vtop{position:relative;flex:none;display:flex;align-items:center;justify-content:space-between;padding:calc(6px + env(safe-area-inset-top)) 10px 4px}
.viewer .vtop .btn{font-size:1.0625rem}
.viewer .vbody{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch}
.zwrap{position:relative;flex:none;height:calc(var(--vh)*58);margin:0 12px;overflow:hidden;display:flex;align-items:center;justify-content:center;touch-action:none;-webkit-user-select:none;user-select:none}
.flip{will-change:transform;transform-origin:0 0}
.zimg{display:block;transform-origin:0 0;will-change:transform;-webkit-user-drag:none;cursor:zoom-in}
.zoomed .zimg{cursor:grab}
.reset{position:absolute;right:8px;bottom:8px;z-index:2;background:rgba(255,255,255,.95);color:#2b2622;border-color:#2b2622}
.vtext{padding:14px 18px 16px}
.vtext h2{font-size:1.375rem;font-weight:700;line-height:1.35}
.viewer:not(.photo) .vtext h2{font-family:var(--serif)}
.viewer.photo .vtext h2{letter-spacing:-.02em}
.vtext .year{font-size:1rem;color:var(--p-sub);margin-top:2px;font-variant-numeric:tabular-nums}
.viewer.photo .vtext .year{color:var(--f-sub)}
.vtext .desc{font-size:1.125rem;line-height:1.6;margin-top:10px}
.vtext .desc.clamp{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.more{margin-top:6px;border:none;background:none;text-decoration:underline;font-weight:700;min-height:48px;padding:0 4px;cursor:pointer}
.vnav{position:fixed;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;padding:8px 10px calc(8px + env(safe-area-inset-bottom));border-top:1px solid rgba(0,0,0,.1);background:#e9e2d6}
.viewer.photo .vnav{background:#0e0e10}
.viewer .vbody{padding-bottom:calc(80px + env(safe-area-inset-bottom))}
.viewer.photo .vnav{border-top-color:#2c2b2a}
.vnav .btn{width:40%;min-height:56px;font-size:1.1875rem;font-weight:700}
.vnav .count{flex:1;text-align:center;font-weight:700;font-size:1.125rem;font-variant-numeric:tabular-nums}
.vanim{transition:opacity 300ms var(--ease)}
html.rm .vanim{transition-duration:150ms}
@media (min-width:1024px){
  .viewer .vbody{flex-direction:row;overflow:hidden}
  .zwrap{flex:0 0 65%;height:auto;margin:0 0 0 16px}
  .vside{flex:0 0 35%;display:flex;flex-direction:column;justify-content:center;padding:0 24px}
  .vtext{padding:0 0 20px}
  .viewer .vbody{padding-bottom:16px}
  .vnav{position:relative;border-top:none;padding:0;background:transparent!important}
  .vnav .btn{width:42%}
}

/* S5 목록 */
.grid{display:flex;flex-wrap:wrap;margin:0 -6px 10px}
.grid a{display:block;width:50%;padding:6px;text-decoration:none;color:inherit}
.grid .thumb{height:150px;background:#fff;display:flex;align-items:center;justify-content:center;border:1px solid rgba(0,0,0,.1);padding:8px}
.photo .grid .thumb{background:#1e1e20;border-color:#333}
.grid img{max-width:100%;max-height:100%;display:block}
.grid .t{display:block;font-size:1rem;font-weight:700;margin-top:4px}
.grid .y{display:block;font-size:.9375rem;color:var(--p-sub)}
.photo .grid .y{color:var(--f-sub)}
@media (min-width:760px){.grid a{width:25%}.grid .thumb{height:190px}}
.list h2{font-size:1.25rem;margin:18px 0 8px}
.list h3{font-size:1.0625rem;margin:8px 0 2px}
.section-photo{background:#141416;color:var(--f-text);border-radius:12px;padding:6px 14px 10px;margin-top:20px}
.section-photo .y{color:var(--f-sub)}
[hidden]{display:none!important}
[tabindex="-1"]:focus{outline:none}
.frame,.frame .mat,.print{display:block}

/* ===== v3: 평면도 배치도 ===== */
.front{-webkit-transform-origin:50% 100%;transform-origin:50% 100%}
.box.folded .front{transform:rotateX(-89deg)}
.box.folded .left{transform:rotateY(90deg) rotateX(-89deg)}
.box.folded .right{transform:rotateY(-90deg) rotateX(-89deg)}
.box.folded .ceil{opacity:0}
.unfold .front,.unfold .left,.unfold .right{transition:transform 300ms cubic-bezier(.22,.61,.36,1)}
.unfold .ceil{transition:opacity 300ms linear}
.notrans,.notrans *{transition:none!important}
.wimg{opacity:0;transition:opacity 150ms linear}
.wimg.on{opacity:1}
.roomnav .btn.wide{flex:1.7;line-height:1.2}

.planscreen{overflow:hidden}
.planscreen.with-sheet{padding-bottom:calc(var(--vh)*46)}
.planscreen.photo{background:#1e1e20}
.planwrap{position:relative;margin:4px 0 8px}
.plan-svg{display:block;width:100%;height:auto;overflow:visible;-webkit-user-select:none;user-select:none}
@media (min-width:768px){.plan-svg{max-height:calc(var(--vh)*72)}}
.unfolding .plan-svg{will-change:transform}
.plan-svg .rm{cursor:pointer}
.plan-svg .rm:focus{outline:none}
.pf{fill:#e9e6e1}.rf{fill:#f6f3ee}
.rw{fill:none;stroke:#4a4744;stroke-width:6}
.dots{fill:none;stroke:#b8b3ac;stroke-width:2;stroke-dasharray:0 30;stroke-linecap:round}
.water{fill:#c9d6d8;stroke:#9fb3b6;stroke-width:2}.wl{stroke:#9fb3b6;stroke-width:2}
.gap{stroke:#e9e6e1;stroke-width:8}.leaf{stroke:#4a4744;stroke-width:3}.arc{fill:none;stroke:#4a4744;stroke-width:1.5}.closed{stroke:#4a4744;stroke-width:6}
.etri{fill:#4a4744}.etext{fill:#2b2622;font-weight:700}
.namet{fill:#2b2622;font-weight:700}.cntt{fill:#2b2622}.numc{fill:#4a4744}.numt{fill:#fff;font-weight:700}.newt{font-weight:400}
.rm.sel .rf{fill:#efe2d6}.rm.sel .rw{stroke:#7a3f2a}.rm.sel .numc{fill:#7a3f2a}
.rring{fill:none;stroke:#7a3f2a;stroke-width:3px;vector-effect:non-scaling-stroke;opacity:0}
.rm:focus .rring{opacity:1}
.locked .rw{stroke-dasharray:8 6}
.locked.sel .rf{fill:#f6f3ee}.locked.sel .rw{stroke:#1f1d1b}
.locked .namet,.locked .cntt{fill:#5e554c}
.hatch{stroke:#4a4744;stroke-opacity:.3;stroke-width:2}
.lean{fill:#f6f3ee;stroke:#4a4744;stroke-width:2}
.locked .rring{stroke:#4a4744}
.photo .pf{fill:#2a2826}.photo .rf{fill:#2c2c2e}.photo .rw{stroke:#8a8680}.photo .dots{stroke:#55524e}
.photo .water{fill:#2f3b3e;stroke:#45575b}.photo .wl{stroke:#45575b}.photo .gap{stroke:#2a2826}
.photo .leaf,.photo .arc,.photo .closed{stroke:#8a8680}.photo .etri{fill:#8a8680}.photo .etext,.photo .namet,.photo .cntt{fill:#f1eee8}
.photo .numc{fill:#4a4846}.photo .numt{fill:#f1eee8}
.photo .rm.sel .rf{fill:#2c2c2e}.photo .rm.sel .rw{stroke:#c8553d}.photo .rm.sel .numc{fill:#c8553d}.photo .rring{stroke:#c8553d}
.photo .locked .namet,.photo .locked .cntt{fill:#b5b0a8}.photo .locked.sel .rw{stroke:#e0dbd4}.photo .locked .rring{stroke:#b5b0a8}
.photo .hatch{stroke:#8a8680}.photo .lean{fill:#2c2c2e;stroke:#8a8680}
.listh{font-size:1.125rem;margin:14px 0 6px}
.roomlist{list-style:none;margin:0;padding:0;border-top:1px solid rgba(0,0,0,.15)}
.photo .roomlist{border-top-color:#3a3836}
.rl{display:flex;align-items:center;width:100%;min-height:56px;padding:4px 10px;border:0;border-bottom:1px solid rgba(0,0,0,.15);background:transparent;color:inherit;text-decoration:none;text-align:left;font-size:1.0625rem;cursor:pointer}
.photo .rl{border-bottom-color:#3a3836}
.rl .n{flex:none;width:34px;height:34px;border-radius:50%;background:#4a4744;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1rem;margin-right:12px}
.photo .rl .n{background:#4a4846}
.rl .nm{flex:1;min-width:0;font-weight:700}
.rl .nm small{font-size:.875rem;font-weight:400}
.rl .c{flex:none;font-size:1rem;margin-left:8px;color:var(--p-sub)}
.photo .rl .c{color:var(--f-sub)}
.rl .ar{flex:none;margin-left:8px;font-size:1.25rem}
.rl.locked{color:var(--p-sub)}
.photo .rl.locked{color:var(--f-sub)}
.rl.locked .n{background:transparent;color:inherit}
.rl.locked .nm{font-weight:500}
.tip{position:absolute;z-index:5;width:272px;padding:16px;background:#f6f3ee;color:#2b2622;border:1px solid #4a4744;border-radius:4px;pointer-events:none;opacity:0}
.photo .tip{background:#2c2c2e;color:#f1eee8;border-color:#8a8680}
.tthumb{width:240px;height:150px;background:#fbfaf7;overflow:hidden}
.photo .tthumb{background:#1e1e20}
.tthumb img{display:block;width:100%;height:100%;object-fit:cover}
.thatch{width:240px;height:96px;border:1px dashed #4a4744;background:repeating-linear-gradient(45deg,rgba(74,71,68,.3) 0 2px,transparent 2px 10px)}
.photo .thatch{border-color:#8a8680;background:repeating-linear-gradient(45deg,rgba(138,134,128,.3) 0 2px,transparent 2px 10px)}
.tname{font-size:1.125rem;font-weight:700;line-height:1.4;margin-top:8px}
.tname small{font-size:.875rem;font-weight:400}
.ttheme{font-size:1rem;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tcount,.thint,.tnote{font-size:.875rem;line-height:1.45}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:30;max-height:calc(var(--vh)*45);overflow-y:auto;background:#f6f3ee;color:#2b2622;border-top:1px solid #4a4744;padding:14px 16px calc(12px + env(safe-area-inset-bottom));transform:translateY(100%);opacity:0;transition:transform 200ms cubic-bezier(.22,.61,.36,1),opacity 200ms linear}
.sheet.photo{background:#2c2c2e;color:#f1eee8;border-top-color:#8a8680}
.sheet.on{transform:none;opacity:1}
html.rm .sheet{transition:none}
.sheetin{position:relative;max-width:560px;margin:0 auto}
.sheet .tthumb,.sheet .thatch{width:100%;height:140px}
.sheet .thatch{height:96px}
.sheet .enterroom{display:flex;width:100%;margin-top:8px}
.textbtn{border:none;background:none;text-decoration:underline;min-height:48px;min-width:64px;padding:0 8px}
.gridview{position:fixed;top:0;left:0;right:0;height:calc(var(--vh)*100);z-index:35;display:flex;flex-direction:column;background:var(--p-wall);color:var(--p-text)}
.gridview.photo{background:#1e1e20;color:var(--f-text)}
.gtop{flex:none;display:flex;align-items:center;padding:8px 12px;padding-top:calc(8px + env(safe-area-inset-top));border-bottom:1px solid rgba(0,0,0,.1)}
.gridview.photo .gtop{border-bottom-color:#2c2b2a}
.gt{margin-left:12px;font-weight:700;font-size:1rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gbody{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:6px}
.ggrid{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
.ggrid li{width:33.333%;padding:4px}
@media (min-width:1024px){.ggrid li{width:16.666%}}
.ggrid a{display:block;text-decoration:none;color:inherit}
.sq{display:block;position:relative;padding-top:100%;background:#fbfaf7;overflow:hidden}
.gridview.photo .sq{background:#2c2c2e}
.sq img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 150ms linear}
.sq img.on{opacity:1}
.gtitle{display:block;font-size:.875rem;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list h3 .cnt{font-size:.9375rem;font-weight:400}
.shead{display:flex;align-items:center;justify-content:space-between;min-height:48px;margin-top:4px}
.shead .tname{margin:0;min-width:0}
.shead .closesheet{flex:none;margin-right:-8px}
.plan-svg.zooming .rm:not(.sel),.plan-svg.zooming>path,.plan-svg.zooming>g{opacity:.2;transition:opacity 250ms linear}
.plan-svg.zooming .rm.sel{opacity:1}