@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css");
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#171819;color:#ece9e4;font-family:Arial,Pretendard,sans-serif}a{text-decoration:none;color:inherit}button,input,textarea,select{font:inherit}button{cursor:pointer}body::before{content:"";position:fixed;inset:-20%;pointer-events:none;z-index:-1;background:radial-gradient(circle at var(--glow-x,70%) var(--glow-y,20%),rgba(112,90,136,.12),transparent 30%),radial-gradient(circle at 20% 70%,rgba(255,255,255,.025),transparent 28%);filter:blur(20px)}.top{position:fixed;top:0;left:0;right:0;height:64px;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:0 30px;background:rgba(23,24,25,.78);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.075)}.logo{font-weight:800;letter-spacing:.14em}.nav{display:flex;gap:18px;color:#aaa;font-size:13px}.nav a.active,.nav a:hover{color:#fff}.page{display:none}.page.active{display:block}.hero{min-height:88vh;display:grid;place-items:center;background:radial-gradient(circle at 72% 22%,rgba(68,55,82,.55),transparent 34%),linear-gradient(180deg,#1c1d1f,#171819)}.hero-inner{text-align:center;padding:100px 24px 80px}.hero h1{margin:0;font-size:clamp(54px,10vw,124px);letter-spacing:.08em}.hero p{color:#aaa;margin:18px 0 0}main{max-width:1380px;margin:auto;padding:70px 28px 120px}.eyebrow{color:#85817a;font-size:12px;letter-spacing:.15em;text-transform:uppercase;margin-bottom:8px}.section{margin-bottom:112px}.section-desc{color:#9c9892;line-height:1.7;max-width:720px}.featured-editorial{margin-bottom:130px;border:0!important;box-shadow:none!important}.featured-copy{display:flex;justify-content:space-between;gap:28px;align-items:end;margin-bottom:22px}.featured-copy h2{font-size:clamp(38px,6vw,78px);margin:0}.featured-copy .section-desc{max-width:420px;margin:0}.editorial-mosaic{display:grid;grid-template-columns:1.25fr .75fr .9fr;grid-template-rows:260px 260px;gap:18px;border:0!important;box-shadow:none!important}.feature-card,.card,.project-preview-card{position:relative;border:1px solid rgba(255,255,255,.085);border-radius:24px;overflow:hidden;background:#202224;cursor:pointer;transition:.25s}.feature-card:hover,.card:hover,.project-preview-card:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.26);filter:brightness(1.08)}.feature-large{grid-row:span 2}.feature-tall{grid-row:span 2}.feature-thumb,.thumb,.project-preview-thumb,.visual{background:radial-gradient(circle at 70% 30%,rgba(255,255,255,.12),transparent 35%),linear-gradient(135deg,#34373b,#222426)}.feature-thumb{width:100%;height:100%}.feature-caption{position:absolute;left:0;right:0;bottom:0;padding:58px 20px 20px;background:linear-gradient(transparent,rgba(0,0,0,.80))}.feature-caption span{display:block;color:#aaa;font-size:11px;letter-spacing:.1em;margin-bottom:7px}.chapter-head{display:grid;grid-template-columns:150px 1fr;gap:30px;align-items:end;margin-bottom:40px}.chapter-no{font-size:100px;font-weight:800;line-height:.9;color:#2a2c2e}.chapter-title h2{font-size:64px;margin:0}.sub-list{border-left:1px solid #34373b;margin-left:70px;padding-left:36px}.section-head{display:flex;justify-content:space-between;gap:22px;align-items:end;margin-bottom:20px}.sub-index{color:#85817a;font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:8px}.sub-heading{font-size:34px;margin:0 0 10px}.action-btn{border:1px solid #373a3d;background:#202224;color:#ddd7cf;padding:10px 14px;border-radius:999px}.mini-filter{display:none;border:1px solid rgba(255,255,255,.085);background:#202224;border-radius:22px;padding:16px;margin:0 0 22px}.mini-filter.open{display:block}.search{width:100%;background:#202224;color:#ece9e4;border:1px solid #373a3d;border-radius:999px;padding:11px 14px}.filter-row{display:flex;gap:9px;flex-wrap:wrap;margin:12px 0 24px}.label{color:#85817a;font-size:12px;letter-spacing:.08em;text-transform:uppercase}.filter-pill{border:1px solid #373a3d;background:#202224;color:#ddd7cf;padding:8px 12px;border-radius:999px;font-size:13px}.filter-pill.active{background:#ece9e4;color:#171819}.latest-note{color:#85817a;font-size:13px;margin:0 0 16px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.thumb{aspect-ratio:4/5}.card-info{position:absolute;inset:auto 0 0 0;padding:48px 16px 16px;background:linear-gradient(transparent,rgba(0,0,0,.80));opacity:0;transform:translateY(8px);transition:.22s}.card:hover .card-info{opacity:1;transform:translateY(0)}.meta,.card-title{font-size:13px;color:#c9c9c9}.badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}.badge{font-size:11px;color:#d6d1c8;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.045);padding:4px 7px;border-radius:99px}.expanded-gallery{display:none;margin-top:18px}.expanded-gallery.open{display:block}.more-row{display:flex;justify-content:center;margin:28px 0 0}.more-btn{border:0;background:transparent;color:#9c9892;padding:10px 4px;letter-spacing:.08em;text-transform:uppercase;font-size:12px;position:relative}.more-btn::after{content:"";position:absolute;left:4px;right:4px;bottom:4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:.22s}.more-btn:hover::after{transform:scaleX(1)}.project-preview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px}.project-preview-thumb{aspect-ratio:16/10}.project-preview-body{padding:22px}.project-type{display:inline-block;font-size:11px;letter-spacing:.1em;color:#bbb;border:1px solid #444;border-radius:999px;padding:5px 10px;margin-bottom:16px}.project-preview-body h3{font-size:30px;margin:0 0 18px;line-height:1.1}.project-status{color:#9c9892;font-size:14px}.contact-block{border-top:1px solid #34373b;padding-top:48px;color:#9c9892}.contact-links{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}.modal{display:none;position:fixed;inset:0;background:rgba(12,13,14,.74);z-index:80;padding:28px;overflow:auto}.modal.open{display:block}.modal-card{max-width:980px;margin:auto;background:#1d1f21;border:1px solid #333;border-radius:24px;overflow:hidden}.modal-image{min-height:520px;display:grid;place-items:center;background:#28282c;color:rgba(255,255,255,.58);font-size:42px;text-align:center;padding:20px}.modal-body{padding:28px}.modal-top{display:flex;justify-content:space-between}.close{border:1px solid #333;background:#202224;color:#ccc;border-radius:999px;padding:8px 13px}.toast{position:fixed;right:30px;bottom:30px;transform:translateY(12px);background:rgba(32,34,36,.94);border:1px solid rgba(255,255,255,.12);color:#d8d4ce;border-radius:999px;padding:11px 18px;font-size:13px;opacity:0;pointer-events:none;transition:.25s;z-index:90;box-shadow:0 18px 50px rgba(0,0,0,.25)}.toast.show{opacity:1;transform:translateY(0)}.project-layout{display:grid;grid-template-columns:300px 1fr;padding-top:64px;min-height:100vh}.project-side{position:sticky;top:64px;height:calc(100vh - 64px);overflow:auto;padding:28px;border-right:1px solid rgba(255,255,255,.08);background:#151617}.filter-title{display:flex;justify-content:space-between;align-items:center;color:#aaa;border:1px solid #303236;border-radius:999px;padding:10px 13px;cursor:pointer}.filter-panel{display:none;margin:12px 0 20px}.filter-panel.open{display:block}.project-side h4{margin:24px 0 12px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#777}.project-item{display:grid;grid-template-columns:46px 1fr;gap:10px;padding:8px;border-radius:12px;transition:.28s;cursor:pointer}.project-item:hover,.project-item.active{background:rgba(255,255,255,.04);transform:translateX(2px)}.mini-thumb{width:46px;height:46px;border-radius:10px;background:linear-gradient(135deg,#34373b,#222426)}.project-main{max-width:1060px;padding:72px 56px 120px}.project-main h1,.detail-hero h1{font-size:clamp(68px,10vw,132px);line-height:.9;margin:0}.project-main p{color:#9c9892;line-height:1.8}.project-grid{display:grid;grid-template-columns:1fr .95fr;gap:72px;margin-top:90px}.timeline{margin-top:6px;border-left:1px solid #34373b;padding-left:30px}.year{font-size:30px;font-weight:700;margin:0 0 30px}.entry{position:relative;padding:0 0 34px}.entry:before{content:"";position:absolute;left:-35px;top:7px;width:8px;height:8px;border-radius:50%;background:#ece9e4}.date{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#7f7b75;margin-bottom:8px}.title{font-size:20px;font-weight:600;margin-bottom:6px}.entry-meta{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#9c9892}.old-year{display:none}.old-year.open{display:block}.detail-hero{min-height:88vh;display:grid;align-items:end;padding:130px 56px 80px;background:radial-gradient(circle at 72% 22%,rgba(68,55,82,.55),transparent 34%),linear-gradient(180deg,#202124,#171819)}.detail-hero p{max-width:720px;color:#aaa;font-size:20px;line-height:1.7}.detail-content{max-width:1180px;margin:auto;padding:90px 28px 130px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:42px 0 100px}.stat{border-top:1px solid #34373b;padding-top:18px}.stat strong{font-size:48px;display:block}.story-block{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;margin:110px 0}.story-block.reverse .visual{order:2}.visual{min-height:460px;border-radius:28px;border:1px solid rgba(255,255,255,.085)}.story-copy h2{font-size:54px;margin:0 0 18px}.story-copy h2.title-small{font-size:22px}.story-copy h2.title-medium{font-size:36px}.story-copy h2.title-large{font-size:54px}.story-copy p{color:#aaa;line-height:1.9;font-size:17px}.quote{font-size:clamp(46px,7vw,96px);line-height:1.02;margin:120px 0;color:#ece9e4}.links{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}.link-pill{border:1px solid #373a3d;border-radius:999px;padding:11px 16px;color:#ddd;background:#202224}.teaser{min-height:88vh;display:grid;place-items:center;text-align:center;padding:100px 24px}.teaser h1{font-size:clamp(54px,10vw,124px);margin:0}.teaser p{color:#aaa;max-width:680px;line-height:1.8}.reveal{opacity:0;transform:translateY(22px);transition:.7s}.reveal.is-visible{opacity:1;transform:translateY(0)}@media(max-width:980px){.nav{display:none}.editorial-mosaic,.project-preview-grid,.project-grid,.story-block,.stats{grid-template-columns:1fr}.feature-card{height:340px}.feature-large,.feature-tall{grid-row:auto}.featured-copy{display:block}.chapter-head{grid-template-columns:1fr}.chapter-no{font-size:60px}.chapter-title h2{font-size:44px}.sub-list{margin-left:10px;padding-left:20px}.grid{grid-template-columns:repeat(2,1fr)}.project-layout{display:block}.project-side{display:none}.project-main{padding:90px 22px}.story-block.reverse .visual{order:0}.detail-hero{padding:100px 24px 60px}.story-copy h2{font-size:38px}}


/* v0.2 - Selected Works curse-line removal
   The featured mosaic must be separated only by whitespace.
   Remove every possible line-like edge from Selected Works only. */
#featured,
#featured .featured-copy,
#featured .editorial-mosaic,
#featured .feature-card,
#featured .feature-thumb,
#featured .feature-caption {
  border: 0 !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}
#featured::before,
#featured::after,
#featured .featured-copy::before,
#featured .featured-copy::after,
#featured .editorial-mosaic::before,
#featured .editorial-mosaic::after,
#featured .feature-card::before,
#featured .feature-card::after,
#featured .feature-thumb::before,
#featured .feature-thumb::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#featured + .chapter,
#featured + .chapter .chapter-head {
  border: 0 !important;
  border-top: 0 !important;
  box-shadow: none !important;
}

/* v0.5 Project block editor renderer */
.content-blocks{margin:90px 0 120px}
.project-block{margin:92px 0}
.text-only{max-width:820px}
.text-only.align-center{text-align:center;margin-left:auto;margin-right:auto}
.text-only.align-right{text-align:right;margin-left:auto}
.text-only h2{font-size:clamp(38px,6vw,72px);margin:0 0 18px;line-height:1.05}
.text-only p{color:#aaa;line-height:1.9;font-size:18px}.text-only p.body-small{font-size:14px}.text-only p.body-medium{font-size:18px}.text-only p.body-large{font-size:20px}
.image-only .visual{min-height:520px}
.image-caption{color:#8f8a83;font-size:13px;margin:14px 0 0;text-align:center}
.visual{display:grid;place-items:center;color:rgba(255,255,255,.42);font-size:12px;letter-spacing:.14em;text-transform:uppercase;overflow:hidden}
.visual.ratio-1x1{aspect-ratio:1/1;min-height:auto}.visual.ratio-4x5{aspect-ratio:4/5;min-height:auto}.visual.ratio-16x9{aspect-ratio:16/9;min-height:auto}.visual.ratio-21x9{aspect-ratio:21/9;min-height:auto}.visual.ratio-full-width{min-height:72vh}.visual.ratio-original{min-height:420px}
.overlay-block{position:relative;min-height:560px;border-radius:30px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:radial-gradient(circle at 70% 30%,rgba(255,255,255,.14),transparent 35%),linear-gradient(135deg,#383a40,#202124);display:grid}
.overlay-block.ratio-1x1{aspect-ratio:1/1;min-height:auto}.overlay-block.ratio-4x5{aspect-ratio:4/5;min-height:auto}.overlay-block.ratio-16x9{aspect-ratio:16/9;min-height:auto}.overlay-block.ratio-21x9{aspect-ratio:21/9;min-height:auto}
.overlay-shade{position:absolute;inset:0}.overlay-copy{position:relative;z-index:1;max-width:640px;padding:48px;color:#f4f0e9;align-self:end}.overlay-copy h2{font-size:clamp(40px,6vw,82px);line-height:1.02;margin:0 0 16px}.overlay-copy p{color:#d6d1c8;line-height:1.8;font-size:17px}.position-center{place-items:center}.position-center .overlay-copy{text-align:center;align-self:center}.position-top-left .overlay-copy{align-self:start}.position-bottom-right .overlay-copy{justify-self:end;text-align:right}
.mini-gallery{display:grid;gap:18px}.mini-gallery.cols-2{grid-template-columns:repeat(2,1fr)}.mini-gallery.cols-3{grid-template-columns:repeat(3,1fr)}.mini-gallery.cols-4{grid-template-columns:repeat(4,1fr)}
.spacer{height:80px}.spacer-small{height:40px}.spacer-medium{height:80px}.spacer-large{height:140px}
@media(max-width:980px){.mini-gallery,.mini-gallery.cols-2,.mini-gallery.cols-3,.mini-gallery.cols-4{grid-template-columns:1fr}.overlay-copy{padding:30px}.image-only .visual{min-height:300px}}

/* v0.6 Project Detail Timeline
   의미 전달용 선/점만 사용합니다. 섹션 구분선이 아니며 Selected Works에는 적용하지 않습니다. */
.project-timeline-section{margin-top:110px;overflow:hidden}
.horizontal-timeline{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,280px);gap:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;overflow-y:hidden;padding:42px 0 8px;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.horizontal-timeline::-webkit-scrollbar{display:none}
.horizontal-timeline::before{content:"";position:absolute;left:0;right:0;top:50px;height:1px;background:rgba(236,233,228,.24);pointer-events:none}
.timeline-node{position:relative;scroll-snap-align:start;padding:42px 34px 10px 0;min-height:170px}
.timeline-dot{position:absolute;top:3px;left:0;width:8px;height:8px;border-radius:999px;background:#ece9e4;box-shadow:0 0 0 6px #171819;z-index:1;transition:transform .22s,background .22s}
.timeline-node:hover .timeline-dot{transform:scale(1.22);background:#fff}
.timeline-node .date{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#7f7b75;margin-bottom:14px;white-space:nowrap}
.timeline-node .title{font-size:22px;font-weight:600;margin-bottom:8px;color:#ece9e4;line-height:1.15}
.timeline-node .entry-meta{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#9c9892;line-height:1.6}
@media(max-width:760px){.horizontal-timeline{grid-auto-columns:minmax(190px,76vw)}.project-timeline-section{margin-top:80px}.timeline-node{padding-right:24px}.timeline-node .title{font-size:19px}}

/* =========================================================
   v1.0 — Editorial Gray + Premium Paper + Editorial Typography
   Motion rule: quiet, small, guide-focused interactions.
   Divider rule: section dividers are not used for decoration.
   Selected Works curse-line remains forbidden below.
   ========================================================= */
:root{
  --bg:#ece9e3;
  --bg-2:#e5e1d9;
  --surface:#f7f5f1;
  --surface-soft:#f2efe8;
  --surface-muted:#e7e2d8;
  --ink:#1f1f1d;
  --ink-soft:#4f4a43;
  --muted:#817a70;
  --faint:#aaa297;
  --line:rgba(31,31,29,.12);
  --line-soft:rgba(31,31,29,.075);
  --overlay:rgba(20,19,17,.50);
  --serif: Georgia, 'Times New Roman', ui-serif, serif;
  --sans: Inter, Pretendard, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}

html{background:var(--bg);}
body{
  background:
    radial-gradient(circle at 18% 8%, rgba(255,255,255,.72), transparent 38%),
    radial-gradient(circle at 84% 18%, rgba(205,197,185,.30), transparent 32%),
    linear-gradient(180deg,var(--bg),var(--bg-2));
  color:var(--ink);
  font-family:var(--sans);
  letter-spacing:-.012em;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(31,31,29,.018) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(31,31,29,.012) 0 1px, transparent 1px 7px),
    radial-gradient(circle at var(--glow-x,70%) var(--glow-y,20%),rgba(255,255,255,.38),transparent 28%);
  opacity:.62;
  filter:none;
  mix-blend-mode:multiply;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:
    radial-gradient(rgba(31,31,29,.055) .55px, transparent .55px);
  background-size:4px 4px;
  opacity:.18;
  mix-blend-mode:multiply;
}

a,button{transition:color .18s var(--ease), background .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease), opacity .22s var(--ease), filter .22s var(--ease);}
button{color:inherit}

.top{
  height:72px;
  padding:0 38px;
  background:rgba(236,233,227,.78);
  backdrop-filter:blur(18px) saturate(1.08);
  border-bottom:1px solid var(--line-soft);
  color:var(--ink);
}
.logo{
  font-family:var(--serif);
  font-size:20px;
  font-weight:500;
  letter-spacing:.065em;
}
.nav{gap:30px;color:var(--ink-soft);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;}
.nav a{position:relative;padding:8px 0;}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .24s var(--ease);}
.nav a:hover::after,.nav a.active::after{transform:scaleX(1)}
.nav a.active,.nav a:hover{color:var(--ink)}

main{max-width:1440px;padding:92px 44px 150px;}
.hero{
  min-height:86vh;
  background:
    radial-gradient(circle at 75% 18%, rgba(255,255,255,.52), transparent 34%),
    linear-gradient(180deg,rgba(247,245,241,.72),rgba(236,233,227,0));
}
.hero-inner{text-align:left;width:min(1180px,calc(100vw - 72px));padding:148px 24px 80px;}
.hero h1{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(64px,9vw,132px);
  line-height:.92;
  letter-spacing:-.055em;
  color:var(--ink);
}
.hero p{color:var(--ink-soft);font-size:17px;margin-top:26px;letter-spacing:.01em}

.eyebrow{color:var(--muted);font-size:11px;letter-spacing:.18em;font-weight:700;text-transform:uppercase;margin-bottom:12px;}
.section{margin-bottom:150px;}
.section-desc{color:var(--ink-soft);font-size:16px;line-height:1.85;}
.featured-editorial{margin-bottom:170px!important;}
.featured-copy{margin-bottom:36px;align-items:start;}
.featured-copy h2,
.chapter-title h2,
.sub-heading,
#projects h2,
#contactTitle,
.project-main h1,
.detail-hero h1,
.teaser h1,
.story-copy h2,
.text-only h2,
.overlay-copy h2{
  font-family:var(--serif);
  font-weight:400;
  letter-spacing:-.045em;
  color:var(--ink);
}
.featured-copy h2{font-size:clamp(42px,5.5vw,82px);}
.featured-copy .section-desc{font-size:15px;max-width:360px;color:var(--muted);}

.editorial-mosaic{gap:26px;}
.feature-card,.card,.project-preview-card{
  border:0;
  border-radius:18px;
  background:var(--surface);
  box-shadow:none;
  filter:none;
}
.feature-card:hover,.card:hover,.project-preview-card:hover{transform:translateY(-6px);filter:none;}
.feature-thumb,.thumb,.project-preview-thumb,.visual,.mini-thumb{
  background:
    radial-gradient(circle at 72% 18%,rgba(240,167,186,.24),transparent 34%),
    radial-gradient(circle at 28% 70%,rgba(92,70,132,.18),transparent 34%),
    linear-gradient(135deg,#d8d0c5,#847a6f 56%,#2a2928);
}
.feature-caption,.card-info{
  background:linear-gradient(transparent,rgba(25,22,19,.76));
  color:#fff;
  opacity:.96;
}
.feature-caption span,.card-info .meta,.card-title{color:rgba(255,255,255,.82)}
.feature-card:hover .feature-thumb,.card:hover .thumb,.project-preview-card:hover .project-preview-thumb{transform:scale(1.018);}
.feature-thumb,.thumb,.project-preview-thumb{transition:transform .48s var(--ease), filter .35s var(--ease)}
.card-info{transition:opacity .26s var(--ease), transform .26s var(--ease)}

.chapter-head{grid-template-columns:120px 1fr;gap:42px;margin-bottom:58px;}
.chapter-no{font-family:var(--serif);font-weight:400;color:rgba(31,31,29,.14);font-size:112px;}
.chapter-title h2{font-size:clamp(52px,6vw,86px)}
.sub-list{border-left:1px solid var(--line);margin-left:48px;padding-left:44px;}
.sub-index,.label,.latest-note,.project-status{color:var(--muted)}
.sub-heading{font-size:clamp(34px,4vw,54px);}
.section-head{margin-bottom:28px;}
.action-btn,.filter-pill,.search,.mini-filter,.link-pill,.close{
  border:1px solid var(--line);
  background:rgba(247,245,241,.58);
  color:var(--ink-soft);
}
.action-btn:hover,.filter-pill:hover,.link-pill:hover,.close:hover{background:var(--surface);color:var(--ink);transform:translateY(-1px)}
.filter-pill.active{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.search::placeholder{color:var(--faint)}
.mini-filter{background:rgba(247,245,241,.52);border-radius:20px;}
.grid{gap:24px;}
.badge{color:rgba(255,255,255,.84);border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08)}
.more-btn{color:var(--ink);font-weight:700;letter-spacing:.12em;}
.more-btn:hover{transform:translateX(0)}
.more-btn::after{height:1px;background:var(--ink);}
.more-btn:hover::after{transform:scaleX(1)}
.more-btn:hover{opacity:.75}

.project-preview-grid{gap:30px;margin-top:44px;}
.project-preview-card{background:rgba(247,245,241,.58);}
.project-preview-body{padding:26px 4px 0;}
.project-type{border:0;padding:0;margin-bottom:14px;color:var(--muted);font-weight:700;}
.project-preview-body h3{font-family:var(--serif);font-weight:400;font-size:34px;color:var(--ink);}
.contact-block{border-top:1px solid var(--line);color:var(--ink-soft)}
#footerText{color:var(--muted)!important}

.modal{background:rgba(236,233,227,.74);backdrop-filter:blur(12px);}
.modal-card{background:var(--surface);border:1px solid var(--line);color:var(--ink);box-shadow:0 30px 100px rgba(31,31,29,.16)}
.modal-image{background:linear-gradient(135deg,#d8d0c5,#8d8378);color:rgba(31,31,29,.55)}
.modal-body p,#modalNote{color:var(--ink-soft)!important}
.toast{right:34px;bottom:34px;background:rgba(31,31,29,.86);border:1px solid rgba(255,255,255,.14);color:var(--surface);box-shadow:0 22px 70px rgba(31,31,29,.22);border-radius:999px;}

.project-layout{grid-template-columns:320px 1fr;padding-top:72px;background:transparent;}
.project-side{top:72px;height:calc(100vh - 72px);background:rgba(229,225,217,.58);border-right:1px solid var(--line);padding:34px 30px;}
.filter-title{border:1px solid var(--line);color:var(--ink-soft);background:rgba(247,245,241,.42)}
.project-side h4{color:var(--muted);font-weight:700;}
.project-item{position:relative;border-radius:14px;color:var(--ink-soft);}
.project-item::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:1px;background:var(--ink);transform:scaleY(0);transform-origin:center;transition:transform .22s var(--ease);}
.project-item:hover,.project-item.active{background:rgba(247,245,241,.56);transform:translateX(3px);color:var(--ink)}
.project-item.active::before,.project-item:hover::before{transform:scaleY(1)}
.project-item span{color:var(--muted)!important}
.project-main{max-width:1120px;padding:94px 64px 140px;}
.project-main p{color:var(--ink-soft)}
.project-grid{gap:96px;margin-top:100px;}
.timeline{border-left:1px solid var(--line);}
.entry:before{background:var(--ink);box-shadow:0 0 0 5px var(--bg)}
.date{color:var(--muted)}.title{color:var(--ink)}.entry-meta{color:var(--muted)}

.detail-hero{
  min-height:72vh;
  margin:-94px -64px 0;
  padding:150px 64px 84px;
  background:
    radial-gradient(circle at 82% 20%,rgba(255,255,255,.60),transparent 34%),
    linear-gradient(180deg,rgba(247,245,241,.72),rgba(236,233,227,.0));
}
.detail-hero p{color:var(--ink-soft);font-size:20px;}
.detail-content{padding:110px 28px 150px;}
.stats{gap:28px}.stat{border-top:1px solid var(--line);}.stat strong{font-family:var(--serif);font-weight:400;color:var(--ink)}
.story-block{gap:96px;margin:130px 0;}
.visual{border:0;border-radius:22px;color:rgba(31,31,29,.42);}
.story-copy p,.text-only p,.overlay-copy p{color:var(--ink-soft);}
.quote{font-family:var(--serif);font-weight:400;color:var(--ink);}
.overlay-block{border:0;border-radius:26px;background:linear-gradient(135deg,#d8d0c5,#5d5350);}
.overlay-copy h2{color:#fff}.overlay-copy p{color:rgba(255,255,255,.82)}
.teaser p{color:var(--ink-soft)}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .64s var(--ease), transform .64s var(--ease)}
.reveal.is-visible{opacity:1;transform:translateY(0)}

.content-blocks{margin:110px 0 130px}.project-block{margin:110px 0}.image-caption{color:var(--muted)}
.mini-gallery{gap:24px}.spacer{height:96px}.spacer-small{height:48px}.spacer-medium{height:96px}.spacer-large{height:160px}

.project-timeline-section{margin-top:130px;}
.horizontal-timeline::before{background:rgba(31,31,29,.20)}
.timeline-dot{background:var(--ink);box-shadow:0 0 0 7px var(--bg)}
.timeline-node:hover .timeline-dot{background:var(--ink);}
.timeline-node .date{color:var(--muted)}
.timeline-node .title{font-family:var(--serif);font-weight:400;color:var(--ink);}
.timeline-node .entry-meta{color:var(--muted)}

/* Image modals and cards should feel like paper, not heavy panels. */
.card,.feature-card,.project-preview-card,.visual,.overlay-block{will-change:transform}

/* Keep the curse line dead: Selected Works uses only whitespace. */
#featured,#featured *{box-shadow:none!important;}
#featured,#featured .featured-copy,#featured .editorial-mosaic,#featured .feature-card,#featured .feature-thumb,#featured .feature-caption{border:0!important;outline:0!important;}
#featured::before,#featured::after,#featured *::before,#featured *::after{box-shadow:none!important;}
#featured + .chapter,#featured + .chapter .chapter-head{border-top:0!important;box-shadow:none!important;}

@media(max-width:980px){
  .top{padding:0 22px}.hero-inner{width:auto;text-align:left;padding-left:22px;padding-right:22px}main{padding:70px 22px 120px}.sub-list{border-left:0;margin-left:0;padding-left:0}.project-side{display:none}.project-main{padding:94px 22px}.detail-hero{margin:-94px -22px 0;padding:124px 22px 66px}.story-block{gap:34px}.grid{gap:16px}
}


/* v1.1 Refinement: softer transparent header + cinematic image modal */
.top{
  background:rgba(236,233,227,.34) !important;
  backdrop-filter:blur(16px) saturate(1.04) !important;
  -webkit-backdrop-filter:blur(16px) saturate(1.04) !important;
  border-bottom:1px solid rgba(31,31,29,.035) !important;
  box-shadow:none !important;
}
.top::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(31,31,29,.05),transparent);
  pointer-events:none;
}

.modal{
  display:flex !important;
  align-items:center;
  justify-content:center;
  padding:clamp(18px,3vw,42px) !important;
  background:rgba(31,31,29,.18) !important;
  backdrop-filter:blur(18px) saturate(1.04) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.04) !important;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .42s var(--ease), visibility .42s var(--ease), background .42s var(--ease);
}
.modal.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.modal-card{
  position:relative;
  width:min(1120px,94vw);
  max-height:88vh;
  overflow:hidden !important;
  border:0 !important;
  border-radius:28px !important;
  background:#1f1f1d !important;
  color:#fff !important;
  box-shadow:0 44px 130px rgba(31,31,29,.26) !important;
  transform:translateY(18px) scale(.985);
  opacity:.2;
  transition:transform .52s var(--ease), opacity .44s var(--ease), box-shadow .52s var(--ease);
}
.modal.open .modal-card{
  transform:translateY(0) scale(1);
  opacity:1;
}
.modal-image{
  min-height:min(72vh,720px) !important;
  width:100%;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 72% 18%,rgba(240,167,186,.30),transparent 34%),
    radial-gradient(circle at 28% 70%,rgba(92,70,132,.22),transparent 34%),
    linear-gradient(135deg,#d8d0c5,#847a6f 56%,#2a2928) !important;
  color:rgba(255,255,255,.58) !important;
  font-family:var(--serif);
  font-size:clamp(36px,6vw,88px) !important;
  letter-spacing:-.045em;
  padding:clamp(28px,6vw,72px) !important;
}
.modal-image::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(31,31,29,.02) 0%,rgba(31,31,29,.10) 38%,rgba(31,31,29,.78) 100%);
}
.modal-body{
  position:absolute;
  left:0;right:0;bottom:0;
  z-index:2;
  padding:clamp(24px,4vw,48px) !important;
  background:linear-gradient(180deg,rgba(31,31,29,0),rgba(31,31,29,.46) 18%,rgba(31,31,29,.82));
  color:#fff !important;
  transform:translateY(14px);
  opacity:.94;
  transition:transform .52s var(--ease), opacity .52s var(--ease);
}
.modal.open .modal-body{transform:translateY(0);opacity:1;}
.modal-top{align-items:flex-start;gap:22px;}
#modalTitle{
  font-family:var(--serif);
  font-weight:400;
  letter-spacing:-.035em;
  color:#fff !important;
  font-size:clamp(30px,4.2vw,58px);
  margin:0 0 12px !important;
}
.modal .meta,#modalMeta{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  justify-content:flex-start;
  color:rgba(255,255,255,.68) !important;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.modal-body p,#modalNote{
  max-width:720px;
  color:rgba(255,255,255,.78) !important;
  line-height:1.85 !important;
  margin:20px 0 0;
}
.modal .badges{margin-top:18px;}
.modal .badge{
  color:rgba(255,255,255,.88) !important;
  border:1px solid rgba(255,255,255,.28) !important;
  background:rgba(31,31,29,.36) !important;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.close{
  position:absolute;
  top:18px;
  right:18px;
  z-index:4;
  width:40px;height:40px;
  display:grid;place-items:center;
  padding:0 !important;
  border:1px solid rgba(255,255,255,.26) !important;
  background:rgba(31,31,29,.30) !important;
  color:rgba(255,255,255,.86) !important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.close:hover{background:rgba(31,31,29,.52) !important;transform:translateY(-1px)}

@media(max-width:760px){
  .modal-card{width:96vw;max-height:86vh;border-radius:22px!important;}
  .modal-image{min-height:68vh!important;}
  .modal-body{padding:24px!important;}
}


/* v1.2 refinements: project preview overlay cards + Menu Only hover language */
.project-preview-card{
  min-height:360px;
  border:0;
  border-radius:24px;
  background:transparent;
  box-shadow:none;
  overflow:hidden;
}
.project-preview-card .project-preview-thumb{
  position:absolute;
  inset:0;
  aspect-ratio:auto;
  height:100%;
  width:100%;
  border-radius:24px;
  transition:transform .64s var(--ease), filter .64s var(--ease);
}
.project-preview-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(20,18,16,.02) 0%,rgba(20,18,16,.08) 38%,rgba(20,18,16,.72) 100%);
  opacity:.92;
  transition:opacity .34s var(--ease);
  pointer-events:none;
}
.project-preview-card .project-preview-body{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:2;
  padding:34px;
  color:#fff;
  transform:translateY(6px);
  transition:transform .34s var(--ease), opacity .34s var(--ease);
}
.project-preview-card .project-type{
  color:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  display:inline-block;
  padding:5px 10px;
  margin-bottom:14px;
  font-size:10px;
  letter-spacing:.16em;
  background:rgba(255,255,255,.07);
  backdrop-filter:blur(8px);
}
.project-preview-card .project-preview-body h3{
  color:#fff;
  text-shadow:0 12px 40px rgba(0,0,0,.22);
}
.project-preview-card .project-status{
  color:rgba(255,255,255,.74);
}
.project-preview-card:hover{
  transform:translateY(-5px);
  filter:none;
}
.project-preview-card:hover .project-preview-thumb{
  transform:scale(1.025);
  filter:saturate(1.04) contrast(1.02);
}
.project-preview-card:hover::after{
  opacity:1;
}
.project-preview-card:hover .project-preview-body{
  transform:translateY(0);
}

.project-item.menu-only{
  color:var(--muted);
}
.project-item.menu-only::before{
  display:none;
}
.project-item.menu-only .mini-thumb{
  filter:grayscale(.45) contrast(.9);
  opacity:.62;
  transition:opacity .28s var(--ease), filter .28s var(--ease), transform .28s var(--ease);
}
.project-item.menu-only:hover{
  background:rgba(31,31,29,.045);
  color:var(--ink-soft);
  transform:translateX(0);
}
.project-item.menu-only:hover .mini-thumb{
  opacity:.38;
  filter:grayscale(1) contrast(.86);
  transform:scale(.96);
}
.project-item.menu-only:hover strong{
  opacity:.72;
  transition:opacity .22s var(--ease);
}
.project-item.menu-only:hover span{
  opacity:.58;
}

/* =========================================================
   v1.3 — Editorial Identity
   - Remove white Project Detail hero cap
   - Add quiet editorial accent, not a brand color
   - Accent only for structural typography/motion cues
   ========================================================= */
:root{
  --accent:#6A5847;
  --accent-soft:rgba(106,88,71,.16);
  --accent-faint:rgba(106,88,71,.08);
}

/* Project detail should read as one continuous premium paper page. */
.detail-hero{
  background:transparent !important;
  margin:-94px -64px 0 !important;
  padding:150px 64px 84px !important;
  min-height:68vh !important;
}
.detail-hero::before,
.detail-hero::after{display:none!important;content:none!important;}
.detail-hero p{color:var(--ink-soft)!important;}
.detail-content{background:transparent!important;}

/* Editorial accent: structural cues only. */
.chapter-no,
.sub-index,
.eyebrow,
.project-type,
.timeline-node .date,
.date{
  color:var(--accent)!important;
}
.chapter-no{opacity:.34;}

/* Active/hover line in project list uses accent, not pure black. */
.project-item::before{
  background:var(--accent)!important;
}
.project-item.active{
  background:rgba(106,88,71,.075)!important;
}
.project-item:hover:not(.menu-only){
  background:rgba(106,88,71,.06)!important;
}

/* Button underline and arrow-like affordances get a restrained accent. */
.more-btn::after,
.nav a::after{
  background:var(--accent)!important;
}
.more-btn:hover{color:var(--accent)!important;}
.link-pill:hover,
.action-btn:hover{
  border-color:var(--accent-soft)!important;
  color:var(--accent)!important;
}

/* Horizontal timeline: line/dots are meaningful, so they keep the accent. */
.horizontal-timeline::before{
  background:rgba(106,88,71,.26)!important;
}
.timeline-dot{
  background:var(--accent)!important;
  box-shadow:0 0 0 7px var(--bg)!important;
}
.timeline-node:hover .timeline-dot{
  background:var(--accent)!important;
  transform:scale(1.18);
}
.timeline-node .title{color:var(--ink)!important;}
.timeline-node .entry-meta{color:var(--muted)!important;}

/* Quote blocks: accent as printed mark, not decoration. */
.quote{
  position:relative;
  color:var(--ink)!important;
}
.quote::before{
  content:'“';
  display:block;
  font-family:var(--serif);
  color:var(--accent);
  font-size:clamp(38px,6vw,88px);
  line-height:.75;
  margin-bottom:18px;
}

/* Stats and subtle rules use warm paper ink. */
.stat{border-top-color:rgba(106,88,71,.18)!important;}
.stat strong{color:var(--accent)!important;}

/* Modal badges remain readable over image overlays. */
.modal .badge{
  color:rgba(255,255,255,.92)!important;
  border-color:rgba(255,255,255,.34)!important;
  background:rgba(106,88,71,.38)!important;
}

/* Top nav stays airy over the editorial page. */
.top{
  background:rgba(236,233,227,.28)!important;
  border-bottom-color:rgba(106,88,71,.035)!important;
}
.top::after{background:linear-gradient(90deg,transparent,rgba(106,88,71,.05),transparent)!important;}

/* Keep the curse line dead: Selected Works uses only whitespace. */
#featured,#featured *{box-shadow:none!important;}
#featured,#featured .featured-copy,#featured .editorial-mosaic,#featured .feature-card,#featured .feature-thumb,#featured .feature-caption{border:0!important;outline:0!important;}
#featured::before,#featured::after,#featured *::before,#featured *::after{box-shadow:none!important;border:0!important;background-image:none!important;}
#featured + .chapter,#featured + .chapter .chapter-head{border-top:0!important;box-shadow:none!important;}

@media(max-width:980px){
  .detail-hero{margin:-94px -22px 0!important;padding:124px 22px 66px!important;}
}

/* =========================================================
   v1.4 — DIN Title System
   - DIN Next is used only for title/UI identity areas.
   - Body, descriptions, and long-form reading text keep the current editorial sans.
   - Font files are NOT bundled. If DIN Next is not installed, the stack falls back safely.
   ========================================================= */
:root{
  --title-sans:"DIN Next", "DIN Next LT Pro", "DIN 2014", "DIN Condensed", "Bahnschrift", "Arial Narrow", "Pretendard Variable", Pretendard, var(--sans);
}

/* Brand / title typography */
.logo,
.hero h1,
.featured-copy h2,
.chapter-title h2,
.sub-heading,
#projects h2,
#contactTitle,
.project-main h1,
.detail-hero h1,
.teaser h1,
.story-copy h2,
.text-only h2,
.overlay-copy h2,
.quote,
.project-timeline-section h2,
.project-preview-body h3,
.project-item strong,
.nav,
.more-btn,
.action-btn,
.link-pill,
.project-type,
.eyebrow,
.sub-index,
.chapter-no,
.year,
.title,
.timeline-node .title,
.timeline-node .date,
.stat strong{
  font-family:var(--title-sans)!important;
}

.logo{
  font-weight:700!important;
  letter-spacing:.12em!important;
  text-transform:uppercase;
}
.hero h1{
  font-weight:700!important;
  letter-spacing:.015em!important;
  line-height:.86!important;
  text-transform:uppercase;
}
.featured-copy h2,
.chapter-title h2,
#projects h2,
#contactTitle,
.project-main h1,
.detail-hero h1,
.teaser h1{
  font-weight:700!important;
  letter-spacing:-.012em!important;
  text-transform:uppercase;
}
.sub-heading,
.story-copy h2,
.text-only h2,
.overlay-copy h2,
.project-preview-body h3{
  font-weight:600!important;
  letter-spacing:-.01em!important;
}
.nav,
.more-btn,
.action-btn,
.link-pill,
.project-type,
.eyebrow,
.sub-index{
  font-weight:700!important;
  letter-spacing:.14em!important;
}
.chapter-no{
  font-weight:700!important;
  letter-spacing:-.045em!important;
}

/* Keep reading surfaces editorial and calm. */
.hero p,
.section-desc,
.project-main p,
.detail-hero p,
.story-copy p,
.text-only p,
.overlay-copy p,
.contact-block,
.entry-meta,
.timeline-node .entry-meta,
.latest-note,
.modal-body p{
  font-family:var(--sans)!important;
}

/* =========================================================
   v1.6 — Subcategory balance refinement
   - Restore readable subcategory title size.
   - Lower hierarchy through color, weight, spacing, not tiny text.
   ========================================================= */
.sub-list .sub-heading{
  font-family:var(--title-sans)!important;
  font-size:clamp(32px,3.6vw,48px)!important;
  line-height:1.05!important;
  font-weight:400!important;
  letter-spacing:.015em!important;
  text-transform:none!important;
  color:var(--ink-soft)!important;
  opacity:.82!important;
  margin:0 0 16px!important;
}
.sub-list .section-desc{
  color:var(--muted)!important;
  opacity:.84!important;
  font-size:16px!important;
  line-height:1.8!important;
  margin-top:6px!important;
}
.sub-list .sub-index{
  color:var(--accent)!important;
  opacity:.56!important;
  font-size:11px!important;
  letter-spacing:.16em!important;
  margin-bottom:14px!important;
}
.sub-list .section-head{
  margin-bottom:30px!important;
}
.sub-list .action-btn{
  opacity:.72!important;
}
.sub-list .action-btn:hover{
  opacity:1!important;
}
@media(max-width:980px){
  .sub-list .sub-heading{font-size:clamp(30px,8vw,42px)!important;}
}

/* v1.7 — Editorial Index Filter Layer
   Filter UI follows the site rule: no pop-up window, no rounded pills, no icons.
   It unfolds as a quiet paper layer inside the current section. */
.action-btn,.filter-pill,.mini-filter,.search{border-radius:0 !important;}
.index-toggle{
  appearance:none;
  border:0;
  background:transparent;
  color:var(--ink-soft);
  font-family:var(--title-font);
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:8px 0 6px;
  position:relative;
}
.index-toggle::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;height:1px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .24s var(--ease),opacity .24s var(--ease);
  opacity:.72;
}
.index-toggle:hover::after,.index-toggle.active::after{transform:scaleX(1)}
.index-toggle.active{color:var(--ink)}
.index-layer{
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  margin:0;
  padding:0 28px;
  background:rgba(229,226,219,.42);
  overflow:hidden;
  transition:grid-template-rows .42s var(--ease), opacity .28s var(--ease), margin .42s var(--ease), padding .42s var(--ease), background .42s var(--ease);
}
.index-layer.open{
  grid-template-rows:1fr;
  opacity:1;
  margin:20px 0 30px;
  padding:24px 28px 26px;
}
.index-layer>*{min-height:0;}
.index-search-row,.index-group{
  display:flex;
  align-items:flex-start;
  gap:22px;
  flex-wrap:wrap;
  padding:6px 0;
}
.index-search-row{margin-bottom:8px;}
.index-label{
  width:72px;
  flex:0 0 72px;
  color:var(--muted);
  font-family:var(--title-font);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding-top:10px;
}
.index-search{
  flex:1 1 260px;
  min-width:220px;
  border:0;
  border-bottom:1px solid rgba(106,88,71,.28);
  background:transparent;
  color:var(--ink);
  padding:8px 0 9px;
  outline:none;
  font-family:var(--body-font);
  border-radius:0 !important;
}
.index-search::placeholder{color:rgba(94,90,84,.48)}
.index-search:focus{border-bottom-color:var(--accent)}
.index-option{
  appearance:none;
  border:0;
  background:transparent;
  color:var(--ink-soft);
  padding:9px 0 6px;
  margin-right:20px;
  position:relative;
  font-family:var(--body-font);
  font-size:14px;
  line-height:1.4;
}
.index-option::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:1px;height:1px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .22s var(--ease),opacity .22s var(--ease);
  opacity:.72;
}
.index-option:hover{color:var(--ink)}
.index-option:hover::after,.index-option.active::after{transform:scaleX(1)}
.index-option.active{color:var(--ink);}

/* Project-side filter also uses the same quiet index language. */
.project-side .filter-title{
  border:0 !important;
  background:transparent !important;
  padding:0 0 8px !important;
  border-radius:0 !important;
  display:inline-flex;
  gap:10px;
  position:relative;
  font-family:var(--title-font);
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:11px;
}
.project-side .filter-title::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .24s var(--ease);opacity:.72;
}
.project-side .filter-title:hover::after{transform:scaleX(1)}
.project-side .filter-title span{display:none;}
.project-side .filter-panel{
  border:0 !important;
  border-radius:0 !important;
  background:rgba(229,226,219,.42) !important;
  padding:0 16px !important;
  margin:0 !important;
  overflow:hidden;
  max-height:0;
  opacity:0;
  transition:max-height .42s var(--ease), opacity .28s var(--ease), margin .42s var(--ease), padding .42s var(--ease);
}
.project-side .filter-panel.open{
  max-height:240px;
  opacity:1;
  margin:18px 0 24px !important;
  padding:18px 16px !important;
}
.project-side .filter-panel .search{
  border:0 !important;
  border-bottom:1px solid rgba(106,88,71,.28) !important;
  background:transparent !important;
  padding:8px 0 !important;
  border-radius:0 !important;
}
.project-side .filter-panel .filter-row{gap:18px;margin:16px 0 0 !important;}
.project-side .filter-panel .filter-pill{
  border:0 !important;
  background:transparent !important;
  color:var(--ink-soft) !important;
  padding:7px 0 5px !important;
  border-radius:0 !important;
  position:relative;
}
.project-side .filter-panel .filter-pill::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease);}
.project-side .filter-panel .filter-pill:hover::after,.project-side .filter-panel .filter-pill.active::after{transform:scaleX(1)}
.project-side .filter-panel .filter-pill.active{color:var(--ink) !important;}

@media(max-width:720px){
  .index-layer.open{padding:22px 18px;}
  .index-label{width:100%;flex-basis:100%;padding-top:0;}
  .index-search-row,.index-group{gap:10px 18px;}
}

/* =========================================================
   v1.8 — Filter Naming / Title Hierarchy / Tag Language
   - Label returns from Index to Filter.
   - Selected Works Korean descriptor sits under the title, not detached to the right.
   - Filter layer typography uses the DIN title system.
   - Artwork tags are no longer rounded pills; they read like quiet metadata.
   ========================================================= */

/* Selected Works descriptor placement */
#featured .featured-copy{
  display:block !important;
  margin-bottom:38px !important;
}
#featured .featured-copy .section-desc{
  max-width:none !important;
  margin:8px 0 0 !important;
  color:var(--muted) !important;
  font-family:var(--body-font) !important;
  font-size:15px !important;
  line-height:1.7 !important;
}
#featured .featured-copy h2{margin:0 !important;}

/* Filter layer typography: title/UI areas use DIN stack */
.index-toggle,
.index-label,
.index-option,
.index-search,
.project-side .filter-title,
.project-side .filter-panel .search,
.project-side .filter-panel .filter-pill{
  font-family:var(--title-sans) !important;
}
.index-toggle,
.project-side .filter-title{
  letter-spacing:.15em !important;
}
.index-option,
.project-side .filter-panel .filter-pill{
  font-size:14px !important;
  letter-spacing:.03em !important;
}
.index-search,
.project-side .filter-panel .search{
  letter-spacing:.02em !important;
}

/* Tag metadata: no pills, no circles, no filled chips */
.badges{
  display:flex !important;
  align-items:center !important;
  gap:0 !important;
  flex-wrap:wrap !important;
  margin-top:12px !important;
  color:rgba(255,255,255,.74) !important;
}
.tag-label{
  font-family:var(--title-sans) !important;
  font-size:10px !important;
  letter-spacing:.16em !important;
  text-transform:uppercase !important;
  color:rgba(255,255,255,.46) !important;
  margin-right:10px !important;
}
.badge{
  border:0 !important;
  background:transparent !important;
  border-radius:0 !important;
  padding:0 !important;
  color:rgba(255,255,255,.78) !important;
  font-family:var(--title-sans) !important;
  font-size:11px !important;
  letter-spacing:.04em !important;
  line-height:1.6 !important;
}
.badge:not(:last-child)::after{
  content:"/";
  display:inline-block;
  margin:0 7px;
  color:rgba(255,255,255,.34);
}
.modal .badges{
  margin-top:20px !important;
  color:rgba(255,255,255,.78) !important;
}
.modal .tag-label{color:rgba(255,255,255,.52) !important;}
.modal .badge{
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:rgba(255,255,255,.82) !important;
  padding:0 !important;
}
.modal .badge:not(:last-child)::after{
  color:rgba(255,255,255,.38);
}

/* Keep the Selected Works curse line dead. */
#featured,#featured *{box-shadow:none!important;}
#featured,#featured .featured-copy,#featured .editorial-mosaic,#featured .feature-card,#featured .feature-thumb,#featured .feature-caption{border:0!important;outline:0!important;}
#featured::before,#featured::after,#featured *::before,#featured *::after{box-shadow:none!important;border:0!important;background-image:none!important;}
#featured + .chapter,#featured + .chapter .chapter-head{border-top:0!important;box-shadow:none!important;}

/* =========================================================
   v1.9 — Modal Typography Complete
   - Image modal title now follows the DIN title system.
   - Modal tag metadata uses quiet middle-dot separation.
   - Body/notes remain in the editorial reading font.
   ========================================================= */
#modalTitle{
  font-family:var(--title-sans) !important;
  font-weight:700 !important;
  letter-spacing:-.012em !important;
  text-transform:uppercase !important;
  color:#fff !important;
}
.modal-image{
  font-family:var(--title-sans) !important;
  font-weight:700 !important;
  letter-spacing:-.012em !important;
  text-transform:uppercase !important;
}
.modal .meta,
#modalMeta{
  font-family:var(--title-sans) !important;
  letter-spacing:.12em !important;
}
.modal-body p,
#modalNote{
  font-family:var(--sans) !important;
}
.modal .badges{
  gap:0 !important;
}
.modal .badge{
  font-family:var(--title-sans) !important;
  letter-spacing:.04em !important;
}
.modal .badge:not(:last-child)::after{
  content:"·" !important;
  display:inline-block;
  margin:0 8px;
  color:rgba(255,255,255,.42) !important;
}


/* =========================================================
   v2.0 — Title Pairing System
   - DIN Next remains the English title identity font.
   - Korean title glyphs fall back to Pretendard.
   - Project detail quote/title blocks are now part of the title system.
   ========================================================= */
:root{
  --title-sans:"DIN Next", "DIN Next LT Pro", "DIN 2014", "DIN Condensed", "Bahnschrift", "Arial Narrow", "Pretendard Variable", Pretendard, var(--sans);
}
.logo,
.hero h1,
.featured-copy h2,
.chapter-title h2,
.sub-heading,
#projects h2,
#contactTitle,
.project-main h1,
.detail-hero h1,
.teaser h1,
.story-copy h2,
.text-only h2,
.overlay-copy h2,
.project-timeline-section h2,
.project-preview-body h3,
.project-item strong,
.nav,
.more-btn,
.action-btn,
.link-pill,
.project-type,
.eyebrow,
.sub-index,
.chapter-no,
.year,
.title,
.timeline-node .title,
.timeline-node .date,
.stat strong,
.quote,
#modalTitle,
.modal-image{
  font-family:var(--title-sans)!important;
  font-synthesis-weight:none;
}
.detail-hero h1,
.hero h1,
.project-main h1,
.teaser h1,
.quote{
  word-break:keep-all;
}
.quote{
  font-weight:700!important;
  letter-spacing:-.012em!important;
  text-transform:none!important;
}
.quote::before{
  font-family:var(--title-sans)!important;
}
.project-timeline-section h2{
  font-weight:700!important;
  letter-spacing:-.012em!important;
  text-transform:uppercase;
  color:var(--ink);
}
/* Korean title samples should read as title typography, not body copy. */
.korean-title-sample,
[data-korean-title="true"]{
  font-family:var(--title-sans)!important;
  word-break:keep-all;
}
/* Keep the Selected Works curse line dead. */
#featured,#featured *{box-shadow:none!important;}
#featured,#featured .featured-copy,#featured .editorial-mosaic,#featured .feature-card,#featured .feature-thumb,#featured .feature-caption{border:0!important;outline:0!important;}
#featured::before,#featured::after,#featured *::before,#featured *::after{box-shadow:none!important;border:0!important;background-image:none!important;}
#featured + .chapter,#featured + .chapter .chapter-head{border-top:0!important;box-shadow:none!important;}


/* v3.3 — Showcase naming + chapter title alignment
   Keep the Selected Works curse line dead: no divider around the Showcase section. */
#featured .featured-copy{
  display:block !important;
}
#featured .featured-copy > div{
  display:block !important;
}
#featured .featured-copy .section-desc{
  margin:8px 0 0 !important;
  max-width:none !important;
}
#featured,
#featured::before,
#featured::after,
#featured .featured-copy,
#featured .editorial-mosaic{
  border:0 !important;
  box-shadow:none !important;
  outline:0 !important;
}
.chapter-head{
  display:flex !important;
  align-items:baseline !important;
  gap:18px !important;
  margin-bottom:40px !important;
}
.chapter-title > .eyebrow{
  display:none !important;
}
.chapter-no{
  font-family:var(--font-title, "DIN Next", Pretendard, sans-serif) !important;
  font-size:clamp(28px,3vw,42px) !important;
  line-height:1 !important;
  font-weight:700 !important;
  letter-spacing:.02em !important;
  color:var(--accent, #6A5847) !important;
  opacity:.82 !important;
}
.chapter-title h2{
  margin:0 !important;
  line-height:.95 !important;
}
.chapter-title .section-desc{
  margin:14px 0 0 !important;
}
@media(max-width:720px){
  .chapter-head{gap:12px !important;align-items:flex-start !important;}
  .chapter-no{font-size:22px !important;margin-top:8px !important;}
}

/* v3.4 — Restore chapter number visual style while keeping v3.3 alignment.
   01 / 02 keep the softer editorial look from v3.2, but stay aligned with section titles. */
.chapter-head{
  display:flex !important;
  align-items:baseline !important;
  gap:34px !important;
  margin-bottom:58px !important;
}
.chapter-no{
  font-family:var(--serif, Georgia, serif) !important;
  font-size:clamp(72px,8vw,112px) !important;
  line-height:.78 !important;
  font-weight:400 !important;
  letter-spacing:-.035em !important;
  color:rgba(31,31,29,.14) !important;
  opacity:1 !important;
  transform:translateY(3px) !important; /* optical alignment with DIN uppercase title */
}
.chapter-title > .eyebrow{
  display:none !important;
}
.chapter-title h2{
  margin:0 !important;
  line-height:.92 !important;
}
.chapter-title .section-desc{
  margin:14px 0 0 !important;
}
@media(max-width:720px){
  .chapter-head{gap:18px !important;align-items:baseline !important;margin-bottom:42px !important;}
  .chapter-no{font-size:clamp(48px,14vw,72px) !important;transform:translateY(2px) !important;}
}


/* v3.5 — Restore section number visual style exactly from v3.2 while keeping title alignment. */
.chapter-head{
  display:flex !important;
  align-items:baseline !important;
  gap:42px !important;
  margin-bottom:58px !important;
}
.chapter-title > .eyebrow{display:none !important;}
.chapter-no{
  font-family:var(--title-sans) !important;
  font-size:112px !important;
  line-height:.9 !important;
  font-weight:700 !important;
  letter-spacing:-.045em !important;
  color:rgba(31,31,29,.14) !important;
  opacity:.34 !important;
  transform:none !important;
}
.chapter-title h2{margin:0 !important;line-height:.92 !important;}
.chapter-title .section-desc{margin:14px 0 0 !important;}
.latest-note{display:none !important;}
@media(max-width:720px){
  .chapter-head{gap:18px !important;align-items:baseline !important;margin-bottom:42px !important;}
  .chapter-no{font-size:60px !important;}
}


/* =========================================================
   v3.6 — Chapter number exact color restore + dense gallery verification
   - Number color is restored to the visible editorial ink tone, not washed out.
   - Number and title stay on one optical line.
   - Latest gallery preview shows 16 works to verify dense layout.
   ========================================================= */
.chapter-head{
  display:flex !important;
  align-items:center !important;
  gap:42px !important;
  margin-bottom:58px !important;
}
.chapter-title > .eyebrow{display:none !important;}
.chapter-no{
  font-family:var(--title-sans) !important;
  font-size:112px !important;
  line-height:.86 !important;
  font-weight:700 !important;
  letter-spacing:-.045em !important;
  color:rgba(31,31,29,.24) !important;
  opacity:1 !important;
  transform:translateY(-2px) !important;
}
.chapter-title h2{
  margin:0 !important;
  line-height:.9 !important;
  transform:translateY(-1px) !important;
}
.chapter-title .section-desc{margin:14px 0 0 !important;}
.latest-note{display:none !important;}
@media(max-width:720px){
  .chapter-head{gap:18px !important;align-items:center !important;margin-bottom:42px !important;}
  .chapter-no{font-size:60px !important;transform:translateY(0) !important;}
}

/* =========================================================
   v3.7 — Authoritative chapter number restore + real dense data
   - 01/02 color is the v3.2 warm brown-gray: #6A5847 at .34 visual opacity.
   - Title is optically lowered to sit on the same line with the large number.
   - This block intentionally overrides v3.3~v3.6 attempts.
   ========================================================= */
.chapter-head{
  display:flex !important;
  align-items:flex-start !important;
  gap:42px !important;
  margin-bottom:58px !important;
}
.chapter-title > .eyebrow{display:none !important;}
.chapter-no{
  font-family:var(--title-sans) !important;
  font-size:112px !important;
  line-height:.9 !important;
  font-weight:700 !important;
  letter-spacing:-.045em !important;
  color:rgba(106,88,71,.34) !important; /* v3.2 warm brown-gray */
  opacity:1 !important;
  transform:none !important;
  margin:0 !important;
  padding:0 !important;
}
.chapter-title{
  transform:translateY(18px) !important; /* optical correction: title was floating too high */
}
.chapter-title h2{
  margin:0 !important;
  line-height:.92 !important;
  transform:none !important;
}
.chapter-title .section-desc{margin:14px 0 0 !important;}
.latest-note{display:none !important;}
@media(max-width:720px){
  .chapter-head{gap:18px !important;align-items:flex-start !important;margin-bottom:42px !important;}
  .chapter-no{font-size:60px !important;}
  .chapter-title{transform:translateY(8px) !important;}
}

/* =========================================================
   v3.8 — Final chapter number/title alignment fix
   - Keep the v3.7 warm brown-gray number color exactly.
   - Remove the downward title offset that made Commercial/Personal sit lower.
   - Lock number and title to the same top row.
   ========================================================= */
.chapter-head{
  display:flex !important;
  align-items:flex-start !important;
  gap:42px !important;
  margin-bottom:58px !important;
}
.chapter-no{
  font-family:var(--title-sans) !important;
  font-size:112px !important;
  line-height:.9 !important;
  font-weight:700 !important;
  letter-spacing:-.045em !important;
  color:rgba(106,88,71,.34) !important;
  opacity:1 !important;
  transform:none !important;
  margin:0 !important;
  padding:0 !important;
  display:block !important;
}
.chapter-title{
  transform:none !important;
  margin:0 !important;
  padding:0 !important;
}
.chapter-title h2{
  margin:0 !important;
  line-height:.9 !important;
  transform:none !important;
}
.chapter-title .section-desc{margin:14px 0 0 !important;}
@media(max-width:720px){
  .chapter-head{gap:18px !important;align-items:flex-start !important;margin-bottom:42px !important;}
  .chapter-no{font-size:60px !important;}
  .chapter-title{transform:none !important;}
}


/* =========================================================
   v3.9 — Gallery preview rule restoration
   - Gallery previews show 8 works by JS; the rest opens with Show More.
   - Show More uses the same quiet tone as subcategory titles.
   - Tighten only the gap between subcategory title/filter header and image grid.
   ========================================================= */
.more-btn{
  color:var(--ink-soft) !important;
  font-weight:500 !important;
}
.more-btn::after{
  background:var(--ink-soft) !important;
}
.more-btn:hover{
  color:var(--ink-soft) !important;
  opacity:.78 !important;
}
.sub-list .section-head,
.section[data-section] .section-head{
  margin-bottom:14px !important;
}
.index-layer{
  margin-bottom:16px !important;
}
.grid[data-latest]{
  margin-top:0 !important;
}

/* =========================================================
   v4.0 — No Container UI
   - Remove remaining pill/badge/round-icon language from project meta and contact links.
   - Metadata is expressed with typography, spacing, opacity, and separators.
   ========================================================= */
.project-preview-card .project-type{
  display:block !important;
  width:auto !important;
  padding:0 !important;
  margin:0 0 13px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  color:rgba(255,255,255,.66) !important;
  font-family:var(--title-sans) !important;
  font-size:10px !important;
  letter-spacing:.18em !important;
  text-transform:uppercase !important;
  line-height:1.4 !important;
}
.project-preview-card .project-status{
  max-width:92% !important;
  color:rgba(255,255,255,.70) !important;
  font-family:var(--sans) !important;
  font-size:13px !important;
  line-height:1.65 !important;
}
.contact-links{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  flex-wrap:wrap !important;
  margin-top:30px !important;
}
.contact-text-link{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 0;
  color:var(--ink-soft) !important;
  font-family:var(--title-sans) !important;
  font-size:12px !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
}
.contact-text-link::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:3px;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .24s var(--ease);
}
.contact-text-link:hover{color:var(--ink) !important;}
.contact-text-link:hover::after{transform:scaleX(1);}
.contact-text-link span{
  color:var(--accent) !important;
  font-size:11px;
  transform:translateY(-1px);
  transition:transform .2s var(--ease);
}
.contact-text-link:hover span{transform:translate(2px,-3px);}
.contact-sep{
  color:var(--faint);
  font-size:12px;
  margin:0 2px;
}
/* Keep round button styles away from contact only; related project links may still use text buttons later. */
#contact .link-pill{display:none !important;}

/* =========================================================
   v4.1 — Reveal Hover Motion System
   - Cards no longer float upward on hover.
   - Interaction language: image reveals information through soft overlay,
     2% zoom, and quiet text fade-up.
   ========================================================= */
:root{
  --motion-fast:220ms;
  --motion-mid:260ms;
  --motion-modal:320ms;
  --hover-overlay:rgba(48,42,36,.18);
  --hover-overlay-deep:rgba(22,19,16,.54);
}

.feature-card,
.card,
.project-preview-card{
  transform:none !important;
  transition:border-color var(--motion-fast) var(--ease), filter var(--motion-fast) var(--ease), opacity var(--motion-fast) var(--ease) !important;
  will-change:auto;
}
.feature-card:hover,
.card:hover,
.project-preview-card:hover{
  transform:none !important;
  filter:none !important;
  border-color:transparent !important;
  box-shadow:none !important;
}
.feature-card:active,
.card:active,
.project-preview-card:active{
  transform:scale(.99) !important;
  transition-duration:80ms !important;
}

.feature-thumb,
.thumb,
.project-preview-thumb{
  transform:scale(1);
  filter:saturate(1) contrast(1) brightness(1);
  transition:transform var(--motion-mid) var(--ease), filter var(--motion-mid) var(--ease) !important;
  will-change:transform;
}
.feature-card:hover .feature-thumb,
.card:hover .thumb,
.project-preview-card:hover .project-preview-thumb{
  transform:scale(1.02) !important;
  filter:saturate(1.02) contrast(1.02) brightness(.98) !important;
}

.feature-caption,
.card-info{
  opacity:0 !important;
  transform:translateY(8px) !important;
  background:linear-gradient(180deg, rgba(48,42,36,0) 0%, var(--hover-overlay) 30%, var(--hover-overlay-deep) 100%) !important;
  transition:opacity var(--motion-mid) var(--ease), transform var(--motion-mid) var(--ease) !important;
  color:#fff !important;
}
.feature-card:hover .feature-caption,
.card:hover .card-info{
  opacity:1 !important;
  transform:translateY(0) !important;
}
.feature-caption span,
.card-info .meta{
  opacity:0;
  transform:translateY(7px);
  transition:opacity var(--motion-mid) var(--ease) 30ms, transform var(--motion-mid) var(--ease) 30ms;
}
.feature-caption h3,
.card-info .card-title{
  opacity:0;
  transform:translateY(8px);
  transition:opacity var(--motion-mid) var(--ease) 55ms, transform var(--motion-mid) var(--ease) 55ms;
}
.feature-card:hover .feature-caption span,
.feature-card:hover .feature-caption h3,
.card:hover .card-info .meta,
.card:hover .card-info .card-title{
  opacity:1;
  transform:translateY(0);
}

.project-preview-card::after{
  background:linear-gradient(180deg,rgba(48,42,36,.02) 0%,rgba(48,42,36,.10) 42%,rgba(22,19,16,.62) 100%) !important;
  opacity:.74 !important;
  transition:opacity var(--motion-mid) var(--ease) !important;
}
.project-preview-card:hover::after{opacity:.96 !important;}
.project-preview-card .project-preview-body{
  transform:translateY(8px) !important;
  opacity:.88 !important;
  transition:opacity var(--motion-mid) var(--ease), transform var(--motion-mid) var(--ease) !important;
}
.project-preview-card:hover .project-preview-body{
  transform:translateY(0) !important;
  opacity:1 !important;
}
.project-preview-card .project-type,
.project-preview-card .project-status,
.project-preview-card .project-preview-body h3{
  transition:opacity var(--motion-mid) var(--ease), transform var(--motion-mid) var(--ease) !important;
}
.project-preview-card .project-type{opacity:.76; transform:translateY(5px);}
.project-preview-card .project-preview-body h3{transform:translateY(7px);}
.project-preview-card .project-status{opacity:.78; transform:translateY(7px);}
.project-preview-card:hover .project-type,
.project-preview-card:hover .project-preview-body h3,
.project-preview-card:hover .project-status{
  opacity:1;
  transform:translateY(0);
}

/* Modal motion refinement in the same reveal language. */
.modal{
  opacity:0;
  transition:opacity var(--motion-modal) var(--ease);
}
.modal.open{
  opacity:1;
}
.modal-card{
  transform:scale(.985) translateY(10px);
  opacity:0;
  transition:transform var(--motion-modal) var(--ease), opacity var(--motion-modal) var(--ease);
}
.modal.open .modal-card{
  transform:scale(1) translateY(0);
  opacity:1;
}

/* =========================================================
   v4.2 — Transition Refinement
   - Smooth modal close transition.
   - Project right panel softly transitions when selecting items.
   - Remove remaining white cap from Project Detail hero area.
   ========================================================= */
.modal{
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
  transition:
    opacity .36s var(--ease),
    background .36s var(--ease),
    visibility 0s linear .36s !important;
}
.modal.open{
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
  transition:
    opacity .36s var(--ease),
    background .36s var(--ease),
    visibility 0s linear 0s !important;
}
.modal .modal-card{
  transform:translateY(14px) scale(.985) !important;
  opacity:0 !important;
  transition:transform .42s var(--ease), opacity .34s var(--ease) !important;
}
.modal.open .modal-card{
  transform:translateY(0) scale(1) !important;
  opacity:1 !important;
}
.modal .modal-body{
  transform:translateY(16px) !important;
  opacity:.88 !important;
  transition:transform .42s var(--ease), opacity .34s var(--ease) !important;
}
.modal.open .modal-body{
  transform:translateY(0) !important;
  opacity:1 !important;
}

.project-main{
  transition:opacity .34s var(--ease), transform .34s var(--ease) !important;
}
.project-main.is-switching{
  opacity:0 !important;
  transform:translateY(12px) !important;
}

/* Project detail now lives on the same Editorial Gray paper as the rest of the page. */
.project-main .detail-hero{
  background:transparent !important;
  background-image:none !important;
  margin:0 0 76px 0 !important;
  padding:0 !important;
  min-height:auto !important;
  display:block !important;
}
.project-main .detail-hero::before,
.project-main .detail-hero::after{
  content:none !important;
  display:none !important;
}
.project-main .detail-content{
  background:transparent !important;
  padding:0 0 130px 0 !important;
  margin:0 !important;
  max-width:1180px !important;
}
.project-main .detail-hero p{
  color:var(--ink-soft) !important;
}
@media(max-width:980px){
  .project-main .detail-hero{margin:0 0 58px 0 !important;padding:0 !important;}
}

/* =========================================================
   v4.3 — Project Detail Background Unify
   The project detail view must not introduce a white/surface cap.
   Project content stays on the same Editorial Gray paper as the page.
   ========================================================= */
#projectPage,
.project-layout,
.project-main,
#projectContent,
#projectContent > .detail-hero,
#projectContent > .detail-content,
.detail-content,
.detail-content > section,
.content-blocks,
.project-timeline-section,
.project-main section:not(.overlay-block),
.project-main .story-block,
.project-main .story-copy,
.project-main .stats,
.project-main .stat,
.project-main .links {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

#projectContent .detail-hero {
  margin: 0 0 76px 0 !important;
  padding: 0 !important;
  min-height: auto !important;
  border: 0 !important;
  box-shadow: none !important;
}

#projectContent .detail-hero > div,
#projectContent .detail-hero h1,
#projectContent .detail-hero p,
#projectContent .detail-content > section:first-child {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Keep intentional image/overlay visual blocks intact. */
#projectContent .visual,
#projectContent .overlay-block,
#projectContent .timeline-dot,
#projectContent .horizontal-timeline::before {
  background-color: unset;
}

/* =========================================================
   v4.4 — Project Detail Style Unification
   Character Design Theory uses the correct editorial-gray project surface.
   Every project detail now follows the same transparent paper-ground system.
   ========================================================= */
#projectPage,
.project-layout,
.project-main,
#projectContent{
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
}

#projectContent > .detail-hero,
#projectContent > .detail-content,
#projectContent .detail-hero,
#projectContent .detail-content,
#projectContent .detail-content > section,
#projectContent .content-blocks,
#projectContent .project-block,
#projectContent .story-block,
#projectContent .story-copy,
#projectContent .text-only,
#projectContent .project-timeline-section,
#projectContent .stats,
#projectContent .stat,
#projectContent .mini-gallery,
#projectContent .links{
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}

/* Make full project pages use the same calm top area as the Character Design Theory page. */
#projectContent .detail-hero{
  min-height:auto !important;
  display:block !important;
  margin:0 0 76px 0 !important;
  padding:0 !important;
  border:0 !important;
}
#projectContent .detail-hero > div{
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  box-shadow:none !important;
}
#projectContent .detail-hero h1{
  color:var(--ink) !important;
  margin:0 !important;
}
#projectContent .detail-hero p{
  color:var(--ink-soft) !important;
  max-width:760px !important;
}
#projectContent .detail-content{
  max-width:none !important;
  margin:0 !important;
  padding:0 0 120px 0 !important;
}
#projectContent .detail-content > section:first-child{
  margin:0 0 96px 0 !important;
  padding:0 !important;
  border:0 !important;
}

/* Keep actual image/visual blocks visible; only their surrounding page surface is unified. */
#projectContent .visual,
#projectContent .overlay-block,
#projectContent .modal-image,
#projectContent .thumb,
#projectContent .project-preview-thumb{
  background-color:unset;
}

@media(max-width:980px){
  #projectContent .detail-hero{margin:0 0 54px 0 !important;padding:0 !important;}
  #projectContent .detail-content{padding-bottom:90px !important;}
}


/* =========================================================
   v4.5 — Project detail intro hard match
   Full project detail pages now use the same top intro structure as
   Character Design Theory / Teaser pages. No project can introduce a
   separate white hero surface anymore.
   ========================================================= */
#projectContent .project-detail-intro,
#projectContent > .project-detail-intro,
.project-main .project-detail-intro{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  min-height: 72vh !important;
  display: grid !important;
  place-items: center !important;
  text-align: center !important;
  padding: 110px 24px 86px !important;
  margin: 0 0 34px 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}
#projectContent .project-detail-intro > div{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  max-width: 920px !important;
}
#projectContent .project-detail-intro h1{
  font-family: var(--title-sans, "DIN Next", "DINNextLTPro", Pretendard, sans-serif) !important;
  font-weight: 700 !important;
  letter-spacing: -.055em !important;
  color: var(--ink) !important;
  font-size: clamp(54px, 9vw, 124px) !important;
  line-height: .92 !important;
  margin: 0 !important;
}
#projectContent .project-detail-intro p{
  max-width: 720px !important;
  margin: 24px auto 0 !important;
  color: var(--ink-soft) !important;
  font-size: 19px !important;
  line-height: 1.8 !important;
}
/* Neutralize legacy full-page hero in case any old detail-hero markup remains. */
#projectContent .detail-hero,
#projectContent .detail-hero > div{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
@media(max-width:980px){
  #projectContent .project-detail-intro{min-height:auto !important;padding:92px 20px 62px !important;text-align:left !important;place-items:start !important;}
  #projectContent .project-detail-intro p{margin-left:0 !important;margin-right:0 !important;}
}

/* =========================================================
   v4.6 — Actual Project Detail Background Lock
   User-provided screenshot showed that Bianca's Day and other detail pages
   still used a whiter top field than Character Design Theory.
   Fix: all project detail intro areas now use one fixed editorial paper
   background, not the body radial highlight. No project-specific brightness.
   ========================================================= */
#projectPage,
.project-layout,
.project-main,
#projectContent {
  background-color: var(--bg) !important;
  background-image: none !important;
}

#projectContent .project-detail-intro,
#projectContent > .project-detail-intro,
.project-main .project-detail-intro,
#projectContent .teaser.project-detail-intro {
  position: relative !important;
  isolation: isolate !important;
  background-color: var(--bg) !important;
  background-image:
    linear-gradient(180deg, var(--bg) 0%, var(--bg) 72%, var(--bg-2) 100%) !important;
  box-shadow: none !important;
  border: 0 !important;
}

#projectContent .project-detail-intro::before,
#projectContent .teaser.project-detail-intro::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background:
    repeating-linear-gradient(0deg, rgba(31,31,29,.014) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(31,31,29,.010) 0 1px, transparent 1px 7px) !important;
  opacity: .46 !important;
  mix-blend-mode: multiply !important;
}

#projectContent .project-detail-intro::after,
#projectContent .teaser.project-detail-intro::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 50% 48%, rgba(106,88,71,.050), transparent 45%) !important;
  opacity: 1 !important;
}

#projectContent .project-detail-intro > div,
#projectContent .project-detail-intro h1,
#projectContent .project-detail-intro p,
#projectContent .project-detail-intro .eyebrow {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

#projectContent .detail-content,
#projectContent .detail-content > section,
#projectContent .content-blocks,
#projectContent .project-block,
#projectContent .project-timeline-section {
  background-color: transparent !important;
  background-image: none !important;
}


/* =========================================================
   v4.7 — Showcase copy + Project Detail Links
   - Showcase subtitle returns to 대표작.
   - Related/project block links use the same text-link language as Contact.
   - No circular pills or badge containers for project links.
   ========================================================= */
#projectContent .links,
.project-main .links,
.project-block .links{
  display:flex !important;
  align-items:center !important;
  gap:0 !important;
  flex-wrap:wrap !important;
  margin-top:26px !important;
}
#projectContent .links .project-text-link,
.project-main .links .project-text-link,
.project-block .links .project-text-link{
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:var(--subtle) !important;
  font-family:var(--title-sans, "DIN Next", Pretendard, sans-serif) !important;
  font-size:12px !important;
  font-weight:500 !important;
  letter-spacing:.11em !important;
  line-height:1.7 !important;
  text-transform:uppercase !important;
  transition:color .22s ease, opacity .22s ease !important;
}
#projectContent .links .project-text-link:not(:last-child)::before,
.project-main .links .project-text-link:not(:last-child)::before,
.project-block .links .project-text-link:not(:last-child)::before{
  content:"·" !important;
  position:static !important;
  order:2 !important;
  display:inline-block !important;
  margin:0 14px !important;
  color:var(--subtle) !important;
  opacity:.65 !important;
  transform:none !important;
  background:none !important;
  width:auto !important;
  height:auto !important;
}
#projectContent .links .project-text-link::after,
.project-main .links .project-text-link::after,
.project-block .links .project-text-link::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:-4px !important;
  height:1px !important;
  background:currentColor !important;
  transform:scaleX(0) !important;
  transform-origin:left !important;
  transition:transform .22s ease !important;
}
#projectContent .links .project-text-link span,
.project-main .links .project-text-link span,
.project-block .links .project-text-link span{
  display:inline-block !important;
  font-size:12px !important;
  transform:translate(0,0) !important;
  transition:transform .22s ease !important;
  order:1 !important;
}
#projectContent .links .project-text-link:hover,
.project-main .links .project-text-link:hover,
.project-block .links .project-text-link:hover{
  color:var(--ink) !important;
}
#projectContent .links .project-text-link:hover::after,
.project-main .links .project-text-link:hover::after,
.project-block .links .project-text-link:hover::after{
  transform:scaleX(1) !important;
}
#projectContent .links .project-text-link:hover span,
.project-main .links .project-text-link:hover span,
.project-block .links .project-text-link:hover span{
  transform:translate(2px,-3px) !important;
}
/* Hide/neutralize legacy pill styling if any old link-pill survives in project detail. */
#projectContent .link-pill,
.project-main .link-pill,
.project-block .link-pill{
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  padding:0 !important;
}


/* v3.2.12 Typography polish */
.whispers-overlay,.whispers-panel{max-width:620px!important;background:rgba(250,248,244,.96)!important;}
.whispers-date{letter-spacing:.12em!important;font-weight:400!important;margin:2.5rem 0 .75rem!important;}
.whispers-item{line-height:1.9!important;margin:.9rem 0!important;}
.whispers-item::before{margin-right:.55rem!important;}
.whispers-time-axis{font-size:.72rem!important;opacity:.45!important;}

/* Studio Homepage v1.1 Foundation Rebuild */
body.studio-home{
  --studio-bg:#e9e4da;
  --studio-surface:#efeae1;
  --studio-ink:#25231f;
  --studio-soft:#776f64;
  --studio-muted:#a39a8e;
  --studio-line:rgba(67,57,47,.18);
  --studio-line-soft:rgba(67,57,47,.10);
  --studio-warm:rgba(220,174,99,.20);
  margin:0;
  min-height:100vh;
  overflow:hidden;
  background:var(--studio-bg)!important;
  color:var(--studio-ink)!important;
  font-family:Pretendard,Arial,sans-serif;
}
body.studio-home::before{display:none!important}
body.studio-home[data-time="morning"]{--studio-warm:rgba(232,188,105,.17)}
body.studio-home[data-time="afternoon"]{--studio-warm:rgba(222,168,82,.18)}
body.studio-home[data-time="evening"]{--studio-warm:rgba(211,132,82,.13)}
body.studio-home[data-time="night"]{--studio-warm:rgba(122,111,97,.08)}
body.studio-home[data-floor="b0"]{--studio-bg:#dfdad1;--studio-surface:#e6e0d7;--studio-warm:rgba(93,83,72,.05)}
.studio-light{position:fixed;inset:0;z-index:0;pointer-events:none;background:linear-gradient(132deg,var(--studio-warm) 0%,rgba(255,255,255,.055) 23%,rgba(255,255,255,0) 55%);opacity:.78;mix-blend-mode:multiply}
.studio-grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.16;background-image:linear-gradient(rgba(67,57,47,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(67,57,47,.014) 1px,transparent 1px);background-size:46px 46px,52px 52px}
.studio-shell{position:relative;z-index:2;display:grid;grid-template-columns:330px minmax(0,1fr);height:100vh;width:100vw}
.studio-left{padding:54px 42px 42px;border-right:1px solid var(--studio-line);display:flex;flex-direction:column;justify-content:space-between;background:rgba(239,234,225,.28);backdrop-filter:blur(8px)}
.studio-entity{min-height:260px}.living-mark{font-size:28px;line-height:1;margin-bottom:42px;color:#4a4035;animation:studio-breathe 5.5s ease-in-out infinite;transform-origin:center}.living-mark.quiet{animation-duration:8s;opacity:.72}.entity-name{font-family:"Times New Roman",serif;font-size:20px;letter-spacing:.02em;margin-bottom:24px}.entity-dialogue{min-height:88px;max-width:230px;color:var(--studio-soft);font-size:14px;line-height:1.9;word-break:keep-all}.entity-dialogue.line-in{animation:line-in .42s ease both}.building-directory{font-family:Arial,Pretendard,sans-serif}.directory-title{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--studio-muted);margin-bottom:24px}.floor-link{width:100%;border:0;background:transparent;color:var(--studio-muted);display:grid;grid-template-columns:46px 1fr;gap:16px;align-items:baseline;text-align:left;padding:11px 0;letter-spacing:.04em;transition:color .18s ease,transform .18s ease}.floor-link span{font-size:12px;font-weight:700;color:inherit}.floor-link strong{font-size:13px;font-weight:500;color:inherit}.floor-link:hover,.floor-link.active{color:var(--studio-ink)}.floor-link.active{transform:translateX(3px)}.floor-link.locked strong{letter-spacing:.11em;color:rgba(37,35,31,.36)}.floor-link.basement{margin-top:2px}.directory-line{height:1px;background:var(--studio-line);margin:12px 0 12px 0;width:72px}
.studio-right{height:100vh;overflow:auto;padding:62px 0 80px clamp(34px,5vw,76px)}.floor-panel{display:none;max-width:1060px;margin:0 auto;animation:floor-in .36s ease both}.floor-panel.active{display:block}.floor-heading{border-bottom:1px solid var(--studio-line);padding-bottom:34px;margin-bottom:46px}.floor-heading.compact{margin-bottom:28px}.floor-heading span{display:block;color:var(--studio-muted);font-size:12px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:16px}.floor-heading h1{font-family:"Times New Roman",serif;font-size:clamp(54px,8vw,108px);font-weight:400;line-height:.92;margin:0;letter-spacing:-.045em}.lobby-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:22px}.lobby-block{border-top:1px solid var(--studio-line);padding-top:22px;min-height:210px}.lobby-intro h2{font-family:"Times New Roman",serif;font-size:56px;font-weight:400;letter-spacing:-.04em;margin:0 0 22px}.lobby-block p{color:var(--studio-soft);line-height:1.9;max-width:620px}.kicker{font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--studio-muted);margin-bottom:18px}.studio-facts{margin:0}.studio-facts div{display:grid;grid-template-columns:94px 1fr;gap:16px;border-bottom:1px solid var(--studio-line-soft);padding:10px 0}.studio-facts dt{color:var(--studio-muted);font-size:12px}.studio-facts dd{margin:0;color:var(--studio-soft);font-size:14px}.studio-links{display:flex;gap:16px;flex-wrap:wrap;margin-top:22px}.studio-links a{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--studio-ink);border-bottom:1px solid currentColor;padding-bottom:3px}
.room-plates,.gallery-filter{position:sticky;top:0;z-index:5;margin:0 0 48px;padding:0 0 18px;border-bottom:1px solid var(--studio-line);background:linear-gradient(180deg,var(--studio-bg) 78%,rgba(233,228,218,0));display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;cursor:grab}.room-plate{min-width:156px;border:1px solid var(--studio-line);background:rgba(239,234,225,.42);color:var(--studio-soft);padding:14px 16px 16px;text-align:left;transition:.2s ease}.room-plate span{display:block;font-size:11px;letter-spacing:.15em;margin-bottom:12px;color:var(--studio-muted)}.room-plate strong{display:block;font-size:13px;font-weight:500;line-height:1.35}.room-plate:hover,.room-plate.active{color:var(--studio-ink);background:rgba(247,244,237,.62);transform:translateY(-2px)}.room-plate.sealed strong{letter-spacing:.11em;color:rgba(37,35,31,.32)}.project-room{max-width:760px;padding-top:22px}.room-no{font-size:12px;letter-spacing:.18em;color:var(--studio-muted);margin-bottom:24px}.project-room h2{font-family:"Times New Roman",serif;font-size:clamp(48px,7vw,86px);font-weight:400;line-height:.95;letter-spacing:-.045em;margin:0 0 20px}.room-type{color:var(--studio-muted);font-size:12px;letter-spacing:.14em;text-transform:uppercase}.room-summary{color:var(--studio-soft);font-size:18px;line-height:1.9;max-width:680px;margin:34px 0}.room-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:54px}.room-meta div{border-top:1px solid var(--studio-line);padding-top:14px}.room-meta span{display:block;color:var(--studio-muted);font-size:12px;margin-bottom:10px}.room-meta strong{font-weight:500;color:var(--studio-soft);font-size:14px}
.gallery-filter button{border:0;background:transparent;color:var(--studio-muted);padding:12px 22px 12px 0;font-size:12px;letter-spacing:.14em;text-transform:uppercase}.gallery-filter button:hover,.gallery-filter button.active{color:var(--studio-ink)}.gallery-wall{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.gallery-piece{aspect-ratio:4/5;border-top:1px solid var(--studio-line);padding:18px 0;display:flex;flex-direction:column;justify-content:flex-end;min-height:260px}.piece-no{color:var(--studio-muted);font-size:11px;letter-spacing:.14em;margin-bottom:auto}.gallery-piece h3{font-family:"Times New Roman",serif;font-size:28px;font-weight:400;letter-spacing:-.025em;margin:0 0 12px}.gallery-piece p{color:var(--studio-soft);font-size:13px;line-height:1.55;margin:0 0 8px}.gallery-piece span{color:var(--studio-muted);font-size:12px}.b0-panel{max-width:880px}.nameless-area{padding-top:16px}.nameless-main{border-bottom:1px solid var(--studio-line);padding-bottom:52px;margin-bottom:52px}.nameless-main .entity-name{margin:0 0 20px}.nameless-main p{color:var(--studio-soft);line-height:1.9}.b0-section{margin-bottom:54px}.whisper-row{display:grid;grid-template-columns:120px 1fr;gap:24px;padding:16px 0;border-bottom:1px solid var(--studio-line-soft)}.whisper-row span{color:var(--studio-muted);font-size:12px;letter-spacing:.12em;text-transform:uppercase}.whisper-row p{margin:0;color:var(--studio-soft);line-height:1.8}.record-row{display:grid;grid-template-columns:1fr 120px;gap:24px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--studio-line-soft)}.record-row p{margin:0;color:var(--studio-soft)}.record-row span{text-align:right;color:var(--studio-muted);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
@keyframes studio-breathe{0%,100%{transform:translateY(0) rotate(0deg) scale(1);opacity:.72}50%{transform:translateY(-3px) rotate(8deg) scale(1.06);opacity:1}}@keyframes line-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@keyframes floor-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:900px){body.studio-home{overflow:auto}.studio-shell{display:block;height:auto;min-height:100vh;width:100%}.studio-left{position:relative;min-height:auto;padding:34px 24px;border-right:0;border-bottom:1px solid var(--studio-line);gap:34px}.studio-entity{min-height:auto}.entity-dialogue{min-height:auto;max-width:none}.studio-right{height:auto;overflow:visible;padding:36px 0 70px 24px}.lobby-grid,.gallery-wall{grid-template-columns:1fr}.room-meta{grid-template-columns:1fr}.floor-heading h1{font-size:56px}}

/* Studio Homepage v1.1.1 — Content Tone Graft
   Keep the new Studio frame/background, but restore the older editorial content language
   for Gallery and Project detail. */
body.studio-home{
  --studio-title: var(--title-sans, "DIN Next", "DINNextLTPro", Pretendard, sans-serif);
  --studio-serif: var(--serif, Georgia, "Times New Roman", ui-serif, serif);
}
body.studio-home .studio-light{opacity:.50;}
body.studio-home[data-time="afternoon"] .studio-light{opacity:.46;}
body.studio-home[data-time="morning"] .studio-light{opacity:.44;}
body.studio-home[data-time="evening"] .studio-light{opacity:.38;}
body.studio-home[data-time="night"] .studio-light{opacity:.22;}

/* Headings: less antique, closer to Workspace/editorial typography. */
body.studio-home .floor-heading h1,
body.studio-home .lobby-intro h2,
body.studio-home .project-room h2,
body.studio-home .gallery-piece h3{
  font-family:var(--studio-title);
  font-weight:650;
  letter-spacing:-.06em;
}
body.studio-home .floor-heading h1{font-size:clamp(52px,7.2vw,96px);line-height:.94;}
body.studio-home .lobby-intro h2{font-size:clamp(42px,5.2vw,64px);line-height:1;}
body.studio-home .floor-heading{padding-bottom:30px;margin-bottom:40px;}
body.studio-home .floor-heading.compact{margin-bottom:24px;}

/* Gallery: no framed right/top bar. The filter becomes quiet exhibition metadata. */
body.studio-home .gallery-filter{
  position:static;
  top:auto;
  z-index:auto;
  margin:-10px 0 34px;
  padding:0;
  border:0;
  background:transparent;
  gap:24px;
  overflow:visible;
}
body.studio-home .gallery-filter button{
  position:relative;
  padding:0 0 5px;
  color:var(--studio-muted);
  font-size:11px;
  font-weight:600;
  letter-spacing:.16em;
}
body.studio-home .gallery-filter button::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .22s ease;
}
body.studio-home .gallery-filter button:hover::after,
body.studio-home .gallery-filter button.active::after{transform:scaleX(1);}
body.studio-home .gallery-wall{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}
body.studio-home .gallery-piece{
  position:relative;
  aspect-ratio:auto;
  min-height:auto;
  border:0;
  padding:0;
  display:block;
  cursor:pointer;
}
body.studio-home .gallery-thumb{
  aspect-ratio:4/5;
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  padding:0;
  background:rgba(120,110,98,.12);
  border:0;
  overflow:hidden;
  transition:transform .38s var(--ease, ease), filter .3s ease;
}
body.studio-home .gallery-thumb span{
  color:rgba(37,35,31,.30);
  font-size:11px;
  letter-spacing:.14em;
}
body.studio-home .gallery-piece:hover .gallery-thumb{
  transform:translateY(-4px);
  filter:brightness(1.015);
}
body.studio-home .gallery-caption{padding:15px 0 0;}
body.studio-home .gallery-piece h3{
  font-size:20px;
  line-height:1.15;
  margin:6px 0 7px;
}
body.studio-home .gallery-piece p{
  margin:0;
  color:var(--studio-soft);
  font-size:12px;
  line-height:1.5;
}
body.studio-home .piece-no{
  color:var(--studio-muted);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
}

/* Project room plates remain the only true top frame. Make them more like door plates. */
body.studio-home .room-plates{
  margin:0 0 80px;
  padding:0 0 16px;
  border-bottom:1px solid var(--studio-line) !important;
  background:linear-gradient(180deg,var(--studio-bg) 28%,rgba(233,228,218,0)) !important;
}
body.studio-home .room-plate{
  min-width:172px;
  height:90px;
  padding:13px 15px;
  border-radius:0;
  background:rgba(247,244,237,.34);
  display:flex;flex-direction:column;justify-content:space-between;align-items:center;text-align:center;
}
body.studio-home .room-plate strong{font-size:12px;letter-spacing:-.01em;}
body.studio-home .room-plate .room-plate-tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:auto;padding-top:6px;justify-content:center;}
body.studio-home .room-plate .room-plate-tags em{font-style:normal;font-size:9px;letter-spacing:.06em;border:1px solid rgba(37,35,31,.15);border-radius:999px;padding:1px 6px;color:var(--studio-muted);opacity:.75;}
body.studio-home .room-plate span{font-size:10px;}

/* Public: 기본 (따뜻한 베이지) */
body.studio-home .room-plate.plate-public{background:rgba(247,244,237,.38);border-color:rgba(37,35,31,.15);}
body.studio-home .room-plate.plate-public:hover,body.studio-home .room-plate.plate-public.active{background:rgba(247,244,237,.72);border-color:rgba(106,88,71,.35);color:var(--studio-ink);}

/* Teaser: 준비중 (차분한 세이지/회색 톤) */
body.studio-home .room-plate.plate-teaser{background:rgba(224,221,215,.28);border-color:rgba(37,35,31,.1);color:var(--studio-muted);}
body.studio-home .room-plate.plate-teaser strong{color:rgba(37,35,31,.45);}
body.studio-home .room-plate.plate-teaser span{color:rgba(37,35,31,.3);}
body.studio-home .room-plate.plate-teaser:hover,body.studio-home .room-plate.plate-teaser.active{background:rgba(224,221,215,.52);border-color:rgba(37,35,31,.2);color:var(--studio-soft);}
body.studio-home .room-plate.plate-teaser strong{letter-spacing:.04em;}

/* Hidden: 잠긴 방 (거의 보이지 않음, 클릭 불가) */
body.studio-home .room-plate.plate-hidden{background:rgba(31,31,29,.03);border-color:rgba(37,35,31,.06);color:rgba(37,35,31,.22);cursor:not-allowed;pointer-events:none;}
body.studio-home .room-plate.plate-hidden strong{color:rgba(37,35,31,.2);letter-spacing:.08em;}
body.studio-home .room-plate.plate-hidden span{color:rgba(37,35,31,.15);}
body.studio-home .room-plate.plate-hidden .room-plate-tags em{opacity:.4;}

/* Project detail: bring back the previous editorial page language inside the Studio frame. */
body.studio-home .project-room{
  max-width:none;
  padding-top:0;
}
body.studio-home .studio-project-detail{
  color:var(--studio-ink);
}
body.studio-home .studio-project-detail .project-detail-intro{
  min-height:0 !important;
  display:block !important;
  padding:20px 0 0 !important;
  margin:0 !important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
body.studio-home .studio-project-detail .project-detail-intro > div{max-width:920px;}
body.studio-home .studio-project-detail .project-detail-intro h1{
  font-family:var(--studio-title);
  font-size:clamp(44px,6.2vw,92px);
  font-weight:720;
  letter-spacing:-.055em;
  line-height:.92;
  margin:0;
  color:var(--studio-ink);
}
body.studio-home .studio-project-detail .project-detail-intro p{
  max-width:720px;
  margin:6px 0 0;
  color:var(--studio-soft);
  font-size:20px;
  line-height:1.8;
}
body.studio-home .studio-project-detail .project-meta-tags{
  display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 0;
}
body.studio-home .studio-project-detail .project-meta-tag{
  font-size:11px;letter-spacing:.1em;
  border:1px solid rgba(236,233,228,.28);border-radius:999px;
  padding:5px 12px;color:rgba(236,233,228,.72);
}
body.studio-home .studio-project-detail .project-meta-tag.status-tag{
  color:rgba(236,233,228,.5);border-color:rgba(236,233,228,.16);
}
body.studio-home .studio-project-detail .detail-content{
  max-width:none;
  margin:0;
  padding:0 clamp(34px,5vw,76px) 120px 0 !important;
}
body.studio-home .studio-project-detail .detail-about{
  display:none !important;
}
body.studio-home .studio-project-detail .detail-about .eyebrow{
  margin-bottom:4px !important;
}
body.studio-home .studio-project-detail .detail-about .section-desc{
  font-size:16px;
  line-height:1.7;
  color:var(--studio-soft);
  max-width:760px;
  margin:0 !important;
}
body.studio-home .studio-project-detail .content-blocks{margin:0 0 118px !important;}
body.studio-home .studio-project-detail .content-blocks > .project-block:first-child{margin-top:0 !important;}
body.studio-home .studio-project-detail .project-block{margin:102px 0;}
body.studio-home .studio-project-detail .text-only{max-width:820px;}
body.studio-home .studio-project-detail .text-only h2,
body.studio-home .studio-project-detail .story-copy h2,
body.studio-home .studio-project-detail .overlay-copy h2,
body.studio-home .studio-project-detail .project-timeline-section h2{
  font-family:var(--studio-title);
  font-weight:680;
  letter-spacing:-.055em;
  color:var(--studio-ink);
}
body.studio-home .studio-project-detail .text-only h2{font-size:clamp(38px,5.4vw,70px);line-height:1.05;margin:0 0 18px;}
body.studio-home .studio-project-detail .text-only p,
body.studio-home .studio-project-detail .story-copy p{
  color:var(--studio-soft);
  line-height:1.9;
  font-size:17px;
}
body.studio-home .studio-project-detail .text-only p.body-small{font-size:14px}
body.studio-home .studio-project-detail .text-only p.body-medium{font-size:17px}
body.studio-home .studio-project-detail .text-only p.body-large{font-size:20px}
body.studio-home .studio-project-detail .story-block{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:72px;
  align-items:center;
}
body.studio-home .studio-project-detail .story-block.reverse .visual{order:2;}
body.studio-home .studio-project-detail .visual{
  min-height:460px;
  display:grid;
  place-items:center;
  color:rgba(37,35,31,.36);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  background:
    radial-gradient(circle at 70% 28%, rgba(255,255,255,.34), transparent 34%),
    linear-gradient(135deg, rgba(118,107,94,.22), rgba(229,224,215,.56));
  border:1px solid var(--studio-line-soft);
  border-radius:0;
  overflow:hidden;
}
body.studio-home .studio-project-detail .visual.ratio-1x1{aspect-ratio:1/1;min-height:auto}
body.studio-home .studio-project-detail .visual.ratio-4x5{aspect-ratio:4/5;min-height:auto}
body.studio-home .studio-project-detail .visual.ratio-16x9{aspect-ratio:16/9;min-height:auto}
body.studio-home .studio-project-detail .visual.ratio-21x9{aspect-ratio:21/9;min-height:auto}
body.studio-home .studio-project-detail .overlay-block{
  position:relative;
  display:grid;
  min-height:520px;
  overflow:hidden;
  border:1px solid var(--studio-line-soft);
  border-radius:0;
  background:
    radial-gradient(circle at 70% 30%,rgba(255,255,255,.20),transparent 35%),
    linear-gradient(135deg,rgba(93,83,72,.46),rgba(213,206,194,.70));
}
body.studio-home .studio-project-detail .overlay-copy{position:relative;z-index:1;max-width:640px;padding:48px;color:#f4f0e9;align-self:end;}
body.studio-home .studio-project-detail .overlay-copy h2{font-size:clamp(40px,5.6vw,78px);line-height:1.02;margin:0 0 16px;color:#f4f0e9;}
body.studio-home .studio-project-detail .overlay-copy p{color:#e2ddd4;line-height:1.8;font-size:17px;}
body.studio-home .studio-project-detail .quote{
  font-family:var(--studio-title);
  font-weight:660;
  font-size:clamp(44px,6.6vw,92px);
  letter-spacing:-.06em;
  line-height:1.04;
  color:var(--studio-ink);
}
body.studio-home .studio-project-detail .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:42px 0 92px;}
body.studio-home .studio-project-detail .stat{border-top:1px solid var(--studio-line);padding-top:18px;}
body.studio-home .studio-project-detail .stat strong{font-size:44px;display:block;color:var(--studio-ink);}
body.studio-home .studio-project-detail .stat span{color:var(--studio-soft);font-size:12px;letter-spacing:.12em;text-transform:uppercase;}
body.studio-home .studio-project-detail .project-timeline-section{margin-top:116px;overflow:hidden;}
body.studio-home .studio-project-detail .project-timeline-section h2{font-size:52px;margin:0 0 30px;}
body.studio-home .studio-project-detail .horizontal-timeline::before{background:var(--studio-line);}
body.studio-home .studio-project-detail .timeline-dot{background:var(--studio-ink);box-shadow:0 0 0 6px var(--studio-bg);}
body.studio-home .studio-project-detail .timeline-node .title{color:var(--studio-ink);}
body.studio-home .studio-project-detail .timeline-node .date,
body.studio-home .studio-project-detail .timeline-node .entry-meta{color:var(--studio-muted);}
body.studio-home .studio-project-detail .detail-links{margin-top:90px;}
body.studio-home .studio-project-detail .links{display:flex;gap:0;flex-wrap:wrap;margin-top:26px;}
body.studio-home .studio-project-detail .project-text-link{position:relative;color:var(--studio-muted);font-size:12px;letter-spacing:.11em;text-transform:uppercase;padding:0;margin:0 24px 0 0;}
body.studio-home .studio-project-detail .project-text-link::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .22s ease;}
body.studio-home .studio-project-detail .project-text-link:hover{color:var(--studio-ink);}
body.studio-home .studio-project-detail .project-text-link:hover::after{transform:scaleX(1);}

@media(max-width:980px){
  body.studio-home .gallery-wall{grid-template-columns:repeat(2,minmax(0,1fr));}
  body.studio-home .studio-project-detail .story-block{grid-template-columns:1fr;gap:34px;}
  body.studio-home .studio-project-detail .story-block.reverse .visual{order:0;}
  body.studio-home .studio-project-detail .stats{grid-template-columns:1fr;}
  body.studio-home .studio-project-detail .project-detail-intro{min-height:auto;padding:66px 0 48px;}
}
@media(max-width:620px){body.studio-home .gallery-wall{grid-template-columns:1fr;}}


/* Studio Homepage v1.1.2 — Frame Cleanup + Quiet Room Plate Scroll
   - Gallery/Project no longer keep surplus right-side framing from the generic floor panel.
   - Project room plates keep the corridor concept, but the browser scrollbar is hidden.
   - Horizontal overflow is suggested with a soft edge fade, not a visible UI bar. */
body.studio-home [data-panel="2f"],
body.studio-home [data-panel="3f"]{
  max-width:none;
  margin:0;
}
body.studio-home [data-panel="2f"] .floor-heading,
body.studio-home [data-panel="3f"] .floor-heading{
  max-width:none;
  width:100%;
}
body.studio-home [data-panel="3f"] .gallery-filter,
body.studio-home [data-panel="3f"] .gallery-wall{
  max-width:none;
}

/* v4.3.90 — room-plates not sticky when inside a project */
body.studio-home [data-panel="2f"]:has(.studio-project-detail) .room-plates{
  position:static !important;
  top:auto !important;
}
body.studio-home [data-panel="2f"] .project-room,
body.studio-home [data-panel="2f"] .studio-project-detail,
body.studio-home [data-panel="2f"] .studio-project-detail .detail-content{
  max-width:none;
}
body.studio-home .room-plates{
  position:sticky;
  top:0;
  z-index:6;
  display:flex;
  gap:12px;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;
  overflow-y:hidden;
  scroll-behavior:smooth;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
  -ms-overflow-style:none;
  padding:0 38px 18px 0;
  border-bottom:1px solid var(--studio-line);
  background:linear-gradient(180deg,var(--studio-bg) 28%,rgba(233,228,218,0));
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 calc(100% - 58px),rgba(0,0,0,0));
  mask-image:linear-gradient(90deg,#000 0%,#000 calc(100% - 58px),rgba(0,0,0,0));
}
body.studio-home .room-plates::-webkit-scrollbar{display:none; width:0; height:0;}
body.studio-home .room-plate{
  flex:0 0 auto;
  scroll-snap-align:start;
}
body.studio-home .room-plate.active{
  transform:translateY(-2px);
}
@media(max-width:900px){
  body.studio-home [data-panel="2f"],
  body.studio-home [data-panel="3f"]{max-width:none;margin:0;}
  body.studio-home .room-plates{
    padding-right:34px;
    -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 calc(100% - 42px),rgba(0,0,0,0));
    mask-image:linear-gradient(90deg,#000 0%,#000 calc(100% - 42px),rgba(0,0,0,0));
  }
}

/* Studio Homepage v1.1.3 — No Right Content Frame Rule
   Foundation rule: the only persistent frame is the left Building Directory.
   Right content must not create an extra side frame. Project may keep only its room-plate corridor. */
body.studio-home .floor-panel,
body.studio-home [data-panel="1f"],
body.studio-home [data-panel="2f"],
body.studio-home [data-panel="3f"],
body.studio-home [data-panel="b0"]{
  max-width:none!important;
  width:100%!important;
  margin:0!important;
}
body.studio-home .floor-heading,
body.studio-home [data-panel="2f"] .floor-heading,
body.studio-home [data-panel="3f"] .floor-heading{
  max-width:none!important;
  width:100%!important;
}
body.studio-home .b0-panel,
body.studio-home .nameless-area,
body.studio-home .nameless-main,
body.studio-home .b0-section{
  max-width:none!important;
  width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
}
body.studio-home [data-panel="3f"] .gallery-filter,
body.studio-home [data-panel="3f"] .gallery-wall{
  max-width:none!important;
  width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
}
body.studio-home [data-panel="3f"] .gallery-filter{
  border:0!important;
  background:transparent!important;
  position:static!important;
  padding:0!important;
}
/* B0 is not a framed Workspace preview. It is a plain Nameless One page inside the same right content area. */
body.studio-home .nameless-main{
  border-bottom:1px solid var(--studio-line-soft);
}

/* Studio Homepage v1.1.5 — Breathing Scroll System
   Foundation rule: native scroll chrome is removed. A custom, paper-thin
   scroll trace fades in and out slowly so it feels like a residue, not UI. */
body.studio-home,
body.studio-home .studio-right{
  scrollbar-width:none!important;
  -ms-overflow-style:none!important;
}
body.studio-home::-webkit-scrollbar,
body.studio-home .studio-right::-webkit-scrollbar{
  display:none!important;
  width:0!important;
  height:0!important;
}
/* v4.3.57 — rail width 확장으로 클릭/드래그 hit area 20px 확보.
   thumb은 right:0 유지라 시각적 위치 변화 없음.
   right:18px 고정이므로 rail 우측 끝=뷰포트 18px, 좌측 끝=뷰포트 38px. */
body.studio-home .studio-scroll-rail{
  position:fixed;
  top:34px;
  right:18px;
  bottom:34px;
  width:20px;
  z-index:30;
  pointer-events:none;
  opacity:0;
  transition:opacity 1.05s ease;
  cursor:ns-resize;
}
body.studio-home .studio-scroll-rail.is-visible{opacity:1;pointer-events:auto;}
/* v4.3.58 — hover 시 thumb 3px로 두꺼워져 드래그 가능함을 암시 */
body.studio-home .studio-scroll-rail.is-visible:hover .studio-scroll-thumb{
  width:3px;
  background:rgba(58,52,44,.32);
  transition:width .18s ease, background-color .18s ease;
}
body.studio-home .studio-scroll-thumb{
  position:absolute;
  top:0;
  right:0;
  width:1px;
  min-height:34px;
  border-radius:999px;
  background:rgba(58,52,44,.18);
  transform:translate3d(0,0,0);
  transition:height .38s ease, transform .42s cubic-bezier(.22,.61,.36,1), background-color .65s ease;
}
body.studio-home .studio-scroll-rail.is-active .studio-scroll-thumb{
  width:2px;
  background:rgba(58,52,44,.24);
}
body.studio-home .room-plates,
body.studio-home .horizontal-timeline{
  scrollbar-width:none!important;
  -ms-overflow-style:none!important;
}
body.studio-home .room-plates::-webkit-scrollbar,
body.studio-home .horizontal-timeline::-webkit-scrollbar{
  display:none!important;
  width:0!important;
  height:0!important;
}

@media(max-width:900px){
  body.studio-home .studio-scroll-rail{display:none;}
  body.studio-home{scrollbar-width:none!important;}
  body.studio-home::-webkit-scrollbar{display:none!important;width:0!important;height:0!important;}
}

.room-plates::-webkit-scrollbar{display:none;}

/* Studio Homepage v1.1.8 — Project Room Rail Polish
   The project corridor is not a scrollbar. It behaves like a quiet door-plate rail:
   drag to browse, click to enter, edge fades only when more rooms exist. */
body.studio-home .room-plates{
  cursor:grab;
  user-select:none;
  touch-action:pan-y;
  overscroll-behavior-x:contain;
  -webkit-mask-image:none!important;
  mask-image:none!important;
  scroll-snap-type:none!important;
  scroll-behavior:auto!important;
  padding-right:54px!important;
  position:sticky;
}
body.studio-home .room-plates.is-grabbing,
body.studio-home .room-plates.is-dragging{cursor:grabbing;}
body.studio-home .room-plates.is-dragging .room-plate{pointer-events:none;}
body.studio-home .room-plates::before,
body.studio-home .room-plates::after{
  content:"";
  position:sticky;
  z-index:3;
  align-self:stretch;
  flex:0 0 48px;
  pointer-events:none;
  opacity:0;
  transition:opacity .75s ease;
}
body.studio-home .room-plates::before{
  left:0;
  margin-right:-48px;
  background:linear-gradient(90deg,var(--studio-bg),rgba(233,228,218,0));
}
body.studio-home .room-plates::after{
  right:0;
  margin-left:-48px;
  background:linear-gradient(90deg,rgba(233,228,218,0),var(--studio-bg));
}
body.studio-home .room-plates.has-left::before,
body.studio-home .room-plates.has-right::after{opacity:1;}
body.studio-home .room-plates.is-dragging::before,
body.studio-home .room-plates.is-dragging::after{opacity:.92;}
body.studio-home .room-plate{
  will-change:transform;
  transition:transform .28s cubic-bezier(.22,.61,.36,1), background-color .28s ease, color .22s ease, border-color .28s ease;
}
body.studio-home .room-plates.is-dragging .room-plate{
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
@media(max-width:900px){
  body.studio-home .room-plates{padding-right:42px!important;}
  body.studio-home .room-plates::before,
  body.studio-home .room-plates::after{flex-basis:36px;}
  body.studio-home .room-plates::before{margin-right:-36px;}
  body.studio-home .room-plates::after{margin-left:-36px;}
}

/* Studio Homepage v1.1.11 — B0 Nameless One original motion + Workspace Whispers law
   B0 keeps only The Nameless One. The orbit and Whispers behavior follow the Workspace source room. */
body.studio-home[data-floor="b0"]{
  --studio-bg:#e3ded5;
  --studio-surface:#e8e2d9;
  --studio-warm:rgba(80,72,63,.028);
}
/* 폐장 중 B0: 배경 어둡게 유지, 텍스트만 밝게 */
body.studio-home.studio-closed[data-floor="b0"]{
  --studio-soft:#b0a89e !important;
  --studio-muted:#7a7570 !important;
  --studio-ink:#d4cfc8 !important;
}
body.studio-home [data-panel="b0"],
body.studio-home .b0-panel{
  max-width:none!important;
  width:100%!important;
  min-height:calc(100vh - 142px)!important;
  height:auto!important;
  padding:0!important;
  margin:0!important;
}
body.studio-home [data-panel="b0"].active,
body.studio-home .b0-panel.active{display:block!important;}
body.studio-home .nameless-space{
  position:relative!important;
  display:grid!important;
  grid-template-columns:minmax(260px,.82fr) minmax(320px,1fr)!important;
  align-items:center!important;
  column-gap:clamp(36px,7vw,120px)!important;
  width:100%!important;
  min-height:calc(100vh - 142px)!important;
  overflow:hidden!important;
  background:linear-gradient(180deg,rgba(247,245,241,.10),rgba(255,255,255,0));
}
body.studio-home .nameless-space::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 26% 48%,rgba(106,88,71,.045),transparent 28%),radial-gradient(circle at 78% 54%,rgba(106,88,71,.025),transparent 32%);
  pointer-events:none;
}
body.studio-home .nameless-geometry{
  position:relative!important;
  left:auto!important;
  top:auto!important;
  width:clamp(230px,26vw,330px)!important;
  height:clamp(230px,26vw,330px)!important;
  transform:none!important;
  opacity:.76!important;
  justify-self:center!important;
  pointer-events:none!important;
  display:grid;
  place-items:center;
  z-index:1;
  filter:drop-shadow(0 30px 70px rgba(47,42,37,.06));
}
body.studio-home .nameless-square{
  position:absolute;
  border:1px solid rgba(106,88,71,.105);
  transform:rotate(45deg);
  transform-origin:center;
}
body.studio-home .nameless-square.square-a{
  inset:6%;
  opacity:.34;
  animation:namelessBreathe 10s cubic-bezier(.16,1,.3,1) infinite;
}
body.studio-home .nameless-square.square-b{
  inset:31%;
  opacity:.44;
  animation:namelessRing 15s linear infinite;
}
body.studio-home .nameless-square.square-c{
  inset:44%;
  opacity:.52;
  animation:namelessRing 22s linear infinite reverse;
}
body.studio-home .nameless-geometry::before,
body.studio-home .nameless-geometry::after{
  content:"";
  position:absolute;
  border:1px solid rgba(106,88,71,.085);
  inset:18%;
  transform:rotate(45deg);
  animation:namelessBreathe 13s cubic-bezier(.16,1,.3,1) infinite reverse;
}
body.studio-home .nameless-geometry::after{
  inset:55%;
  animation-duration:16s;
  animation-direction:normal;
}
body.studio-home .nameless-core{
  position:relative;
  left:auto;
  top:auto;
  transform:none;
  color:#6c5d4f;
  font-size:clamp(58px,7vw,86px);
  line-height:1;
  z-index:2;
  animation:namelessObserve 10s cubic-bezier(.16,1,.3,1) infinite;
}
body.studio-home .nameless-voice{
  position:relative!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  transform:none!important;
  width:min(520px,100%)!important;
  justify-self:start!important;
  z-index:1;
  color:rgba(54,48,42,.58)!important;
}
body.studio-home .nameless-voice p{
  margin:0 0 34px;
  font-size:clamp(17px,1.5vw,22px);
  line-height:1.92;
  font-weight:400;
  color:rgba(54,48,42,.58)!important;
  word-break:keep-all;
}
body.studio-home .nameless-voice p::before{content:"“";margin-right:.12em;color:rgba(106,88,71,.28)}
body.studio-home .nameless-voice p::after{content:"”";margin-left:.12em;color:rgba(106,88,71,.28)}
body.studio-home .nameless-voice div{
  font-size:10px;
  letter-spacing:.20em;
  text-transform:uppercase;
  color:rgba(54,48,42,.38)!important;
}
body.studio-home .nameless-whisper-trigger{
  position:absolute;
  right:clamp(24px,4vw,58px)!important;
  bottom:clamp(22px,4vw,48px)!important;
  z-index:5;
  border:0;
  background:transparent;
  color:#6c5d4f;
  font-family:Georgia,serif;
  width:auto;
  height:auto;
  padding:12px;
  font-size:28px;
  line-height:1;
  cursor:pointer;
  opacity:.52;
  transition:opacity .24s cubic-bezier(.16,1,.3,1),transform .24s cubic-bezier(.16,1,.3,1);
  filter:drop-shadow(0 18px 34px rgba(47,42,37,.06));
}
body.studio-home .nameless-whisper-trigger:hover,
body.studio-home .nameless-whisper-trigger.active{
  opacity:.88;
  transform:translateY(-2px) rotate(45deg);
}
body.studio-home .nameless-whisper-trigger:focus-visible{outline:1px solid rgba(69,58,48,.34);outline-offset:6px;}

body.studio-home .whispers-panel{
  position:absolute;
  right:clamp(34px,6vw,96px);
  bottom:clamp(82px,8vw,126px);
  z-index:4;
  width:min(610px,calc(100vw - 68px));
  max-height:min(720px,calc(100vh - 156px));
  background:transparent;
  backdrop-filter:none;
  box-shadow:none;
  border:0;
  padding:18px 78px 24px 44px;
  opacity:0;
  transform:translate3d(0,42px,0);
  pointer-events:none;
  transition:opacity .82s cubic-bezier(.16,1,.3,1),transform .82s cubic-bezier(.16,1,.3,1);
  will-change:opacity,transform;
}
body.studio-home .whispers-panel.open{
  opacity:1;
  transform:translate3d(0,0,0);
  pointer-events:auto;
}
body.studio-home .whispers-close{
  position:absolute;
  right:42px;
  top:-8px;
  z-index:4;
  border:0;
  background:transparent;
  color:rgba(106,88,71,.22);
  font-size:21px;
  line-height:1;
  padding:8px;
  cursor:pointer;
  transition:color .32s cubic-bezier(.16,1,.3,1),transform .48s cubic-bezier(.16,1,.3,1),opacity .32s cubic-bezier(.16,1,.3,1);
  opacity:.52;
}
body.studio-home .whispers-close:hover{color:rgba(106,88,71,.50);transform:rotate(90deg);opacity:1}
body.studio-home .whispers-scroll{
  position:relative;
  z-index:2;
  max-height:calc(min(720px,calc(100vh - 156px)) - 42px);
  overflow:auto;
  padding:2px 18px 2px 0;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
body.studio-home .whispers-scroll::-webkit-scrollbar{width:0;height:0}
body.studio-home .whispers-day{margin:0 0 42px;transition:opacity .6s cubic-bezier(.16,1,.3,1)}
body.studio-home .whispers-date{
  position:relative;
  font-family:Georgia,serif;
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(106,88,71,.38);
  padding:0;
  margin:0 0 22px;
}
body.studio-home .whispers-list{display:grid;gap:18px}
body.studio-home .whisper-item{
  display:grid;
  grid-template-columns:12px minmax(0,1fr);
  gap:9px;
  align-items:start;
  color:rgba(54,48,42,.62);
  line-height:1.92;
  font-size:14px;
  word-break:keep-all;
}
body.studio-home .whisper-item::before{content:'·';color:rgba(106,88,71,.32);font-size:18px;line-height:1.54}
body.studio-home .whispers-empty{color:rgba(106,88,71,.42);font-size:14px;line-height:1.8;padding:24px 0}
body.studio-home .whispers-axis{
  position:absolute;
  right:8px;
  top:34px;
  bottom:34px;
  z-index:3;
  width:44px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:flex-start;
  pointer-events:none;
  opacity:.78;
  transition:opacity .72s cubic-bezier(.16,1,.3,1),transform .72s cubic-bezier(.16,1,.3,1);
  transform:translateY(8px);
}
body.studio-home .whispers-panel.open .whispers-axis{opacity:.9;transform:translateY(0)}
body.studio-home .whispers-axis::before{content:"";position:absolute;left:4px;top:16px;bottom:16px;width:1px;background:linear-gradient(to bottom,rgba(106,88,71,.10),rgba(106,88,71,.04),rgba(106,88,71,.10))}
body.studio-home .whispers-axis span{position:relative;display:block;padding-left:15px;font-family:Georgia,serif;font-size:9px;line-height:1;letter-spacing:.16em;text-transform:uppercase;color:rgba(106,88,71,.23);transition:color .42s cubic-bezier(.16,1,.3,1),opacity .42s cubic-bezier(.16,1,.3,1),transform .42s cubic-bezier(.16,1,.3,1);opacity:var(--axis-fade,.45)}
body.studio-home .whispers-axis span::before{content:"";position:absolute;left:1px;top:50%;width:7px;height:1px;background:rgba(106,88,71,.16);transform:translateY(-50%);transition:width .42s cubic-bezier(.16,1,.3,1),background .42s cubic-bezier(.16,1,.3,1)}
body.studio-home .whispers-axis span.active{color:rgba(106,88,71,.66);opacity:1;transform:translateX(-3px)}
body.studio-home .whispers-axis span.active::before{width:12px;background:rgba(106,88,71,.40)}
body.studio-home .nameless-space.whispers-open .nameless-voice{opacity:.48;transition:opacity .68s cubic-bezier(.16,1,.3,1)}
body.studio-home .nameless-space.whispers-open .nameless-geometry{opacity:.72;transition:opacity .68s cubic-bezier(.16,1,.3,1)}
body.studio-home .whispers-header{display:flex;align-items:center;gap:10px;padding:0 42px 0 0;margin-bottom:24px;flex-shrink:0}
body.studio-home .whispers-title{font-family:Georgia,serif;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(106,88,71,.42);flex:1}
body.studio-home .whispers-mode-toggle{border:0;background:transparent;color:rgba(106,88,71,.36);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:0;cursor:pointer;transition:color .22s}
body.studio-home .whispers-mode-toggle:hover{color:rgba(106,88,71,.66)}

@keyframes namelessObserve{0%,100%{transform:translate3d(-24px,12px,0) rotate(0deg) scale(1)}20%{transform:translate3d(26px,-18px,0) rotate(42deg) scale(1.03)}44%{transform:translate3d(8px,26px,0) rotate(96deg) scale(.98)}68%{transform:translate3d(-30px,-12px,0) rotate(162deg) scale(1.02)}86%{transform:translate3d(18px,4px,0) rotate(225deg) scale(1)}}
@keyframes namelessBreathe{0%,100%{opacity:.24;transform:rotate(45deg) scale(.96)}50%{opacity:.62;transform:rotate(58deg) scale(1.04)}}
@keyframes namelessRing{to{transform:rotate(405deg)}}

@media(max-width:900px){
  body.studio-home .nameless-space{grid-template-columns:1fr!important;row-gap:34px!important;align-content:center!important;min-height:72vh!important;}
  body.studio-home .nameless-geometry{width:220px!important;height:220px!important;justify-self:start!important;margin-left:4vw!important;opacity:.56!important;}
  body.studio-home .nameless-voice{justify-self:start!important;width:auto!important;max-width:520px!important;margin-left:4vw!important;margin-right:4vw!important;}
  body.studio-home .whispers-panel{right:18px;bottom:74px;width:calc(100vw - 36px);padding:18px 54px 24px 28px;background:transparent}
  body.studio-home .nameless-whisper-trigger{right:18px!important;bottom:18px!important}
  body.studio-home .whisper-item{font-size:13px}
  body.studio-home .whispers-close{right:24px;top:-8px}
  body.studio-home .whispers-axis{right:0;width:38px}
  body.studio-home .whispers-axis span{font-size:8px;padding-left:13px}
}

/* Studio Homepage v1.1.12 — B0 tone correction
   Restore Nameless frame visibility on the darker B0 surface, and make Whispers feel like the same underground room. */
body.studio-home[data-floor="b0"] .nameless-geometry{
  opacity:.94!important;
  filter:drop-shadow(0 34px 74px rgba(47,42,37,.085))!important;
}
body.studio-home[data-floor="b0"] .nameless-square{
  border-color:rgba(82,69,58,.30)!important;
}
body.studio-home[data-floor="b0"] .nameless-square.square-a{
  opacity:.66!important;
}
body.studio-home[data-floor="b0"] .nameless-square.square-b{
  opacity:.72!important;
}
body.studio-home[data-floor="b0"] .nameless-square.square-c{
  opacity:.78!important;
}
body.studio-home[data-floor="b0"] .nameless-geometry::before,
body.studio-home[data-floor="b0"] .nameless-geometry::after{
  border-color:rgba(82,69,58,.22)!important;
  opacity:.76!important;
}
body.studio-home[data-floor="b0"] .nameless-space.whispers-open .nameless-geometry{
  opacity:.88!important;
}
body.studio-home[data-floor="b0"] .nameless-core{
  color:rgba(72,61,52,.82)!important;
}

body.studio-home[data-floor="b0"] .whispers-panel,
body.studio-home[data-floor="b0"] .whispers-overlay{
  background:linear-gradient(180deg,rgba(229,224,216,.88),rgba(222,216,207,.82))!important;
  border:1px solid rgba(82,69,58,.075)!important;
  box-shadow:0 34px 90px rgba(47,42,37,.075)!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
}
body.studio-home[data-floor="b0"] .whispers-panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(106,88,71,.035),rgba(255,255,255,0) 42%),
    radial-gradient(circle at 18% 0%,rgba(255,252,245,.16),transparent 42%);
  opacity:.62;
}
body.studio-home[data-floor="b0"] .whispers-scroll,
body.studio-home[data-floor="b0"] .whispers-close,
body.studio-home[data-floor="b0"] .whispers-axis{
  position:relative;
}
body.studio-home[data-floor="b0"] .whispers-scroll{z-index:2;}
body.studio-home[data-floor="b0"] .whispers-close{z-index:4;}
body.studio-home[data-floor="b0"] .whispers-axis{z-index:3;}

@keyframes namelessBreathe{0%,100%{opacity:.46;transform:rotate(45deg) scale(.96)}50%{opacity:.82;transform:rotate(58deg) scale(1.04)}}

@media(max-width:900px){
  body.studio-home[data-floor="b0"] .nameless-geometry{opacity:.86!important;}
  body.studio-home[data-floor="b0"] .whispers-panel{
    background:linear-gradient(180deg,rgba(229,224,216,.9),rgba(222,216,207,.84))!important;
  }
}

/* Studio Homepage v1.1.14 — B0 threshold transition
   B0 is not a normal floor change; it is a quiet boundary crossing. */
body.studio-home,
body.studio-home .studio-light,
body.studio-home .studio-grain,
body.studio-home .studio-left{
  transition:
    background-color .82s cubic-bezier(.16,1,.3,1),
    background .82s cubic-bezier(.16,1,.3,1),
    opacity .82s cubic-bezier(.16,1,.3,1),
    border-color .82s cubic-bezier(.16,1,.3,1),
    color .82s cubic-bezier(.16,1,.3,1);
}
body.studio-home .studio-threshold-overlay{
  position:fixed;
  inset:0;
  z-index:30;
  pointer-events:none;
  opacity:0;
  transform:translate3d(-18%,0,0);
  background:
    linear-gradient(90deg,
      rgba(72,64,56,0) 0%,
      rgba(72,64,56,.035) 28%,
      rgba(72,64,56,.16) 50%,
      rgba(72,64,56,.04) 72%,
      rgba(72,64,56,0) 100%);
  mix-blend-mode:multiply;
  will-change:opacity,transform;
}
body.studio-home.threshold-active .studio-threshold-overlay{
  animation:studioThresholdPass 1.08s cubic-bezier(.16,1,.3,1) both;
}
body.studio-home.threshold-from-b0 .studio-threshold-overlay{
  background:
    linear-gradient(90deg,
      rgba(238,232,222,0) 0%,
      rgba(238,232,222,.04) 30%,
      rgba(255,249,236,.18) 50%,
      rgba(238,232,222,.035) 72%,
      rgba(238,232,222,0) 100%);
  mix-blend-mode:screen;
}
body.studio-home .studio-right.threshold-out .floor-panel.active{
  opacity:.12;
  filter:blur(2.2px);
  transform:translate3d(0,10px,0);
  transition:
    opacity .30s cubic-bezier(.16,1,.3,1),
    filter .30s cubic-bezier(.16,1,.3,1),
    transform .30s cubic-bezier(.16,1,.3,1);
}
body.studio-home .studio-right.threshold-in .floor-panel.active{
  animation:studioThresholdReveal .78s cubic-bezier(.16,1,.3,1) both;
}
body.studio-home.threshold-to-b0 .studio-light{
  opacity:.20!important;
}
body.studio-home.threshold-to-b0 .studio-left{
  border-right-color:rgba(67,57,47,.14);
}
@keyframes studioThresholdPass{
  0%{opacity:0;transform:translate3d(-22%,0,0)}
  24%{opacity:.42;transform:translate3d(-10%,0,0)}
  54%{opacity:.70;transform:translate3d(6%,0,0)}
  100%{opacity:0;transform:translate3d(28%,0,0)}
}
@keyframes studioThresholdReveal{
  0%{opacity:0;filter:blur(2px);transform:translate3d(0,12px,0)}
  100%{opacity:1;filter:blur(0);transform:translate3d(0,0,0)}
}
@media (prefers-reduced-motion: reduce){
  body.studio-home.threshold-active .studio-threshold-overlay{animation:none;opacity:0;}
  body.studio-home .studio-right.threshold-out .floor-panel.active,
  body.studio-home .studio-right.threshold-in .floor-panel.active{animation:none;filter:none;transform:none;opacity:1;}
}

/* Studio Homepage v1.1.15 — Transition Controller Cleanup
   Rule: only one spatial transition may run at a time.
   - Normal floors: no translate/floor-in motion.
   - B0 threshold: fade/blur + temperature shift only, no extra vertical lift.
*/
body.studio-home .floor-panel{
  animation:none!important;
  transform:none!important;
}
body.studio-home .floor-panel.active{
  animation:none!important;
  transform:none!important;
}
body.studio-home .studio-right.threshold-out .floor-panel.active{
  transform:none!important;
  opacity:.12;
  filter:blur(2.2px);
}
body.studio-home .studio-right.threshold-in .floor-panel.active{
  animation:studioThresholdRevealClean .72s cubic-bezier(.16,1,.3,1) both!important;
}
@keyframes studioThresholdRevealClean{
  0%{opacity:0;filter:blur(2px);transform:none;}
  100%{opacity:1;filter:blur(0);transform:none;}
}
@media (prefers-reduced-motion: reduce){
  body.studio-home .studio-right.threshold-in .floor-panel.active{animation:none!important;filter:none!important;opacity:1!important;transform:none!important;}
}

/* Studio Homepage v1.1.16 — Animation Rule Separation
   floor = ground-floor soft transition only
   threshold = B0 boundary transition only
   dialogue = The Studio type-in only */
body.studio-home .studio-right.floor-transition .floor-panel.active{
  animation:studioGroundFloorIn .34s cubic-bezier(.16,1,.3,1) both!important;
}
body.studio-home .studio-right.threshold-out .floor-panel.active,
body.studio-home .studio-right.threshold-in .floor-panel.active{
  animation-name:studioThresholdRevealClean!important;
}
@keyframes studioGroundFloorIn{
  0%{opacity:0;filter:blur(1px);transform:translate3d(0,3px,0)}
  100%{opacity:1;filter:blur(0);transform:translate3d(0,0,0)}
}
body.studio-home .entity-dialogue{
  transition:opacity .12s ease, filter .12s ease;
  transform:none!important;
}
body.studio-home .entity-dialogue.line-in{
  animation:none!important;
}
body.studio-home .entity-dialogue.typing-out{
  opacity:0;
  filter:blur(.4px);
}
body.studio-home .entity-dialogue.typing{
  opacity:1;
  filter:none;
}
body.studio-home .entity-dialogue.typing::after{
  content:"";
  display:inline-block;
  width:.45em;
  height:1em;
  margin-left:.04em;
  vertical-align:-.12em;
  border-right:1px solid currentColor;
  opacity:.38;
  animation:studioCaretBreath .8s steps(1,end) infinite;
}
@keyframes studioCaretBreath{
  0%,48%{opacity:.38}
  49%,100%{opacity:0}
}
@media (prefers-reduced-motion: reduce){
  body.studio-home .studio-right.floor-transition .floor-panel.active{animation:none!important;filter:none!important;transform:none!important;opacity:1!important;}
  body.studio-home .entity-dialogue.typing::after{display:none;}
}


/* Studio Homepage v1.1.17 — Soft Floor Transition Polish
   Ground floors should dissolve softly, while B0 keeps the threshold-only rule. */
body.studio-home .studio-right.floor-transition .floor-panel.active{
  animation:studioGroundFloorIn .54s cubic-bezier(.22,.61,.36,1) both!important;
}
@keyframes studioGroundFloorIn{
  0%{opacity:0;filter:blur(.7px);transform:translate3d(0,1.5px,0)}
  38%{opacity:.72;filter:blur(.28px);transform:translate3d(0,.5px,0)}
  100%{opacity:1;filter:blur(0);transform:translate3d(0,0,0)}
}
body.studio-home .studio-right.threshold-out .floor-panel.active,
body.studio-home .studio-right.threshold-in .floor-panel.active{
  animation-name:studioThresholdRevealClean!important;
}
body.studio-home .entity-dialogue.typing::after{
  animation:studioCaretBreath .92s steps(1,end) infinite;
}
@media (prefers-reduced-motion: reduce){
  body.studio-home .studio-right.floor-transition .floor-panel.active{animation:none!important;filter:none!important;transform:none!important;opacity:1!important;}
}

/* v4.1 — The Stage Foundation / 4F */
body.studio-home.host-mode{
  --studio-bg:#e8e2d8;
  --studio-surface:#f3eee6;
  --studio-warm:rgba(224,156,71,.17);
}
body.studio-home.host-mode .studio-left{
  background:rgba(241,235,225,.42);
}
body.studio-home.host-mode .living-mark{
  font-size:31px;
  color:#5d4632;
  animation:host-breathe 2.2s ease-in-out infinite;
}
body.studio-home.host-mode .entity-name{
  letter-spacing:.04em;
}
body.studio-home.host-mode .entity-dialogue{
  color:#5f564b;
  font-size:14px;
  line-height:1.78;
  min-height:128px;
}
body.studio-home.host-mode .entity-dialogue.typing{
  border-right:1px solid rgba(93,70,50,.46);
}
@keyframes host-breathe{
  0%,100%{transform:scale(1) rotate(0deg);opacity:.88;filter:drop-shadow(0 0 0 rgba(119,88,55,0));}
  35%{transform:scale(1.11) rotate(3deg);opacity:1;filter:drop-shadow(0 0 12px rgba(119,88,55,.15));}
  68%{transform:scale(.98) rotate(-2deg);opacity:.78;}
}
.stage-floor{max-width:1180px;}
.stage-foundation{min-height:calc(100vh - 140px);}
.stage-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr);gap:36px;align-items:end;border-bottom:1px solid var(--studio-line);padding-bottom:34px;margin-bottom:30px;}
.stage-hero h1{font-family:"Times New Roman",serif;font-weight:400;font-size:clamp(58px,8.5vw,112px);line-height:.9;letter-spacing:-.055em;margin:0;}
.stage-hero p{margin:0;color:var(--studio-soft);line-height:1.9;max-width:520px;}
.stage-menu{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 38px;}
.stage-menu-item{border:1px solid var(--studio-line);background:rgba(255,252,246,.32);border-radius:18px;padding:16px 16px 17px;text-align:left;color:var(--studio-soft);min-height:92px;}
.stage-menu-item span{display:block;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--studio-ink);margin-bottom:18px;}
.stage-menu-item strong{font-size:12px;font-weight:500;color:var(--studio-muted);}
.stage-menu-item:hover,.stage-menu-item.active{transform:translateY(-3px);border-color:rgba(91,70,52,.28);background:rgba(255,252,246,.52);}
.stage-menu-item.staff strong::after{content:" 🔒";font-size:11px;}
.stage-view{display:none;animation:floor-in .32s ease both;}
.stage-view.active{display:block;}
.stage-lobby-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;}
.stage-card{border-top:1px solid var(--studio-line);padding:24px 0 8px;min-height:210px;}
.stage-card.wide{grid-row:span 2;min-height:438px;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:26px;}
.stage-card h2{font-family:"Times New Roman",serif;font-size:clamp(42px,5vw,72px);font-weight:400;line-height:1;letter-spacing:-.045em;margin:0 0 22px;max-width:720px;}
.stage-card strong{display:block;font-family:"Times New Roman",serif;font-size:40px;font-weight:400;letter-spacing:-.04em;margin:0 0 18px;}
.stage-card p{color:var(--studio-soft);line-height:1.88;margin:0;max-width:620px;}
.box-office-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:24px;}
.box-office-head h2{font-family:"Times New Roman",serif;font-size:clamp(42px,5vw,70px);font-weight:400;line-height:1;letter-spacing:-.045em;margin:0;}
.stage-search{width:min(360px,42vw);border:0;border-bottom:1px solid var(--studio-line);background:transparent;color:var(--studio-ink);padding:12px 0;font:inherit;outline:none;}
.stage-search::placeholder{color:var(--studio-muted);}
.stage-tags{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px;}
.stage-tags button{border:1px solid var(--studio-line);border-radius:999px;background:transparent;color:var(--studio-muted);padding:8px 13px;font-size:12px;letter-spacing:.08em;}
.stage-tags button:hover,.stage-tags button.active{color:var(--studio-ink);background:rgba(255,252,246,.46);border-color:rgba(91,70,52,.28);}
.performance-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}
.performance-card{position:relative;min-height:246px;border:1px solid var(--studio-line);border-radius:22px;background:rgba(255,252,246,.36);padding:24px;display:flex;flex-direction:column;justify-content:space-between;transition:transform .22s var(--ease),background .22s var(--ease),border-color .22s var(--ease);}
.performance-card:hover,.performance-card:focus-visible{transform:translateY(-4px);background:rgba(255,252,246,.56);border-color:rgba(91,70,52,.28);outline:none;}
.performance-card h3{font-family:"Times New Roman",serif;font-size:34px;font-weight:400;line-height:1.05;letter-spacing:-.04em;margin:0 0 12px;}
.performance-card p{margin:0;color:var(--studio-muted);font-size:13px;letter-spacing:.07em;text-transform:uppercase;}
.performance-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px;}
.performance-tags span{font-size:11px;color:var(--studio-muted);border:1px solid var(--studio-line-soft);border-radius:999px;padding:5px 9px;}
.performance-actions{display:flex;gap:8px;margin-top:20px;}
.performance-actions button,.curtain-button{border:1px solid var(--studio-line);background:rgba(255,252,246,.50);border-radius:999px;color:var(--studio-ink);font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:10px 13px;}
.performance-actions button:hover,.curtain-button:hover{transform:translateY(-2px);background:rgba(255,252,246,.78);}
.stage-empty-curtain{min-height:520px;border:1px solid var(--studio-line);border-radius:28px;background:radial-gradient(circle at 50% 18%,rgba(255,250,239,.52),transparent 30%),linear-gradient(180deg,rgba(78,60,45,.08),rgba(255,252,246,.28));display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:44px;overflow:hidden;}
.stage-empty-curtain.staff-only{background:radial-gradient(circle at 50% 18%,rgba(255,250,239,.32),transparent 28%),linear-gradient(180deg,rgba(44,35,29,.10),rgba(255,252,246,.18));}
.curtain-mark{font-size:42px;color:#5d4632;margin-bottom:28px;animation:host-breathe 2.4s ease-in-out infinite;}
.stage-empty-curtain h2{font-family:"Times New Roman",serif;font-size:clamp(44px,5vw,76px);font-weight:400;line-height:1;letter-spacing:-.045em;margin:0 0 18px;}
.stage-empty-curtain p{max-width:620px;margin:0 auto 28px;color:var(--studio-soft);line-height:1.9;}
.curtain-button.secondary{opacity:.78;}
.stage-empty-text{color:var(--studio-muted);line-height:1.8;}
@media(max-width:980px){
  .stage-hero,.stage-lobby-grid,.performance-grid{grid-template-columns:1fr;}
  .stage-menu{grid-template-columns:repeat(2,minmax(0,1fr));}
  .stage-card.wide{min-height:280px;}
  .box-office-head{display:block;}
  .stage-search{width:100%;margin-top:18px;}
}
@media(max-width:560px){.stage-menu{grid-template-columns:1fr}.performance-actions{flex-direction:column}}

/* v4.1.1 — The Stage gets its own left-side directory */
.stage-directory{
  display:none;
  font-family:Arial,Pretendard,sans-serif;
}
body.studio-home.host-mode .building-directory{
  display:none;
}
body.studio-home.host-mode .stage-directory{
  display:block;
}
.stage-side-link{
  width:100%;
  border:0;
  background:transparent;
  color:var(--studio-muted);
  display:grid;
  grid-template-columns:46px 1fr;
  gap:16px;
  align-items:baseline;
  text-align:left;
  padding:11px 0;
  letter-spacing:.04em;
  transition:color .18s ease,transform .18s ease;
}
.stage-side-link span{
  font-size:12px;
  font-weight:700;
  color:inherit;
}
.stage-side-link strong{
  font-size:13px;
  font-weight:500;
  color:inherit;
}
.stage-side-link:hover,
.stage-side-link.active{
  color:var(--studio-ink);
}
.stage-side-link.active{
  transform:translateX(3px);
}
.stage-side-link.staff strong::after{
  content:"  LOCKED";
  font-size:10px;
  letter-spacing:.12em;
  color:rgba(91,70,52,.42);
}
.stage-return{
  margin-bottom:2px;
}
.stage-return span{
  font-size:15px!important;
  font-weight:400!important;
}
.stage-return strong{
  letter-spacing:.04em;
}
body.studio-home.host-mode .entity-dialogue{
  max-height:134px;
  overflow:hidden!important;
  scrollbar-width:none;
}
body.studio-home.host-mode .entity-dialogue::-webkit-scrollbar{
  display:none;
}
body.studio-home.host-mode .stage-menu{
  display:none;
}
@media(max-width:900px){
  body.studio-home.host-mode .building-directory{display:none;}
  body.studio-home.host-mode .stage-directory{display:block;}
}

/* v4.1.2 — Stage left menu refinement */
body.studio-home.host-mode .studio-left{
  justify-content:flex-start;
  gap:28px;
}
body.studio-home.host-mode .studio-entity{
  min-height:0;
  margin-bottom:8px;
}
body.studio-home.host-mode .living-mark{
  margin-bottom:26px;
}
body.studio-home.host-mode .entity-name{
  margin-bottom:18px;
}
body.studio-home.host-mode .entity-dialogue{
  min-height:112px;
  max-height:126px;
}
body.studio-home.host-mode .stage-directory{
  margin-top:6px;
}
body.studio-home.host-mode .stage-directory .directory-line{
  margin:14px 0 16px;
}
.stage-side-link{
  display:block;
  padding:10px 0;
  letter-spacing:.045em;
}
.stage-side-link span{
  display:block;
  font-size:13px;
  font-weight:500;
  color:inherit;
}
.stage-side-link strong{
  display:none!important;
}
.stage-side-link.staff span::after{
  content:"  LOCKED";
  font-size:10px;
  letter-spacing:.12em;
  color:rgba(91,70,52,.42);
}
.stage-side-link.staff strong::after{
  content:"";
}
.stage-return{
  display:grid;
  grid-template-columns:28px 1fr;
  gap:12px;
  align-items:baseline;
  padding:6px 0 10px;
}
.stage-return span{
  font-size:14px!important;
}
.stage-return strong{
  font-size:12px!important;
  font-weight:600!important;
}

/* v4.1.3 — Stage directory spacing polish
   Studio return is a quiet exit, not a category divider.
   The blank space below it separates Studio return from Stage rooms. */
body.studio-home.host-mode .stage-directory{
  margin-top:24px;
}
body.studio-home.host-mode .stage-directory > .directory-line{
  display:none!important;
}
body.studio-home.host-mode .stage-return{
  margin-bottom:58px!important;
  padding-bottom:0!important;
}
body.studio-home.host-mode .stage-side-link{
  padding:10px 0;
}

/* v4.1.6 — verified Stage left-frame fix
   Goal: The Host speaks without any scroll UI, Studio return stays above,
   and Stage room menu is pinned to the bottom of the left frame. */
body.studio-home.host-mode .studio-left{
  justify-content:flex-start !important;
  overflow:hidden !important;
}
body.studio-home.host-mode .studio-entity{
  flex:0 0 auto !important;
  min-height:0 !important;
  margin-bottom:22px !important;
}
body.studio-home.host-mode .entity-dialogue{
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:5 !important;
  width:100% !important;
  max-width:230px !important;
  height:auto !important;
  min-height:0 !important;
  max-height:9.2em !important;
  overflow:hidden !important;
  overflow-y:hidden !important;
  overflow-x:hidden !important;
  scrollbar-width:none !important;
  -ms-overflow-style:none !important;
  word-break:keep-all !important;
}
body.studio-home.host-mode .entity-dialogue::-webkit-scrollbar{
  width:0 !important;
  height:0 !important;
  display:none !important;
}
body.studio-home.host-mode .stage-directory{
  display:flex !important;
  flex-direction:column !important;
  flex:1 1 auto !important;
  width:100% !important;
  min-height:0 !important;
  margin-top:0 !important;
}
body.studio-home.host-mode .stage-directory > .directory-line{
  display:none !important;
}
body.studio-home.host-mode .stage-return{
  flex:0 0 auto !important;
  margin:0 !important;
  padding:6px 0 0 !important;
}
body.studio-home.host-mode .stage-side-link[data-stage-tab="lobby"]{
  margin-top:auto !important;
}
body.studio-home.host-mode .stage-side-link{
  flex:0 0 auto !important;
  padding:10px 0 !important;
}
body.studio-home.host-mode .stage-menu{
  display:none !important;
}

/* v4.1.7 — Stage left frame corrected
   The Studio return is fixed at the very top of the Stage frame.
   The Host occupies the upper/middle space without touching the return.
   The Stage room menu sits near the bottom with a quiet breathing gap. */
body.studio-home.host-mode .studio-left{
  position:relative !important;
  justify-content:flex-start !important;
  overflow:hidden !important;
}
body.studio-home.host-mode .stage-directory{
  position:absolute !important;
  left:42px !important;
  right:42px !important;
  top:54px !important;
  bottom:46px !important;
  display:flex !important;
  flex-direction:column !important;
  width:auto !important;
  min-height:0 !important;
  margin:0 !important;
  pointer-events:none !important;
}
body.studio-home.host-mode .stage-directory > *{
  pointer-events:auto !important;
}
body.studio-home.host-mode .stage-directory > .directory-line{
  display:none !important;
}
body.studio-home.host-mode .stage-return{
  flex:0 0 auto !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
}
body.studio-home.host-mode .stage-return span{
  font-size:14px !important;
}
body.studio-home.host-mode .stage-return strong{
  font-size:12px !important;
  font-weight:600 !important;
}
body.studio-home.host-mode .studio-entity{
  flex:0 0 auto !important;
  margin-top:92px !important;
  margin-bottom:0 !important;
  min-height:0 !important;
  max-height:52vh !important;
  overflow:hidden !important;
}
body.studio-home.host-mode .living-mark{
  margin-bottom:24px !important;
}
body.studio-home.host-mode .entity-name{
  margin-bottom:16px !important;
}
body.studio-home.host-mode .entity-dialogue{
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:5 !important;
  max-width:230px !important;
  max-height:9.5em !important;
  min-height:0 !important;
  overflow:hidden !important;
  overflow-y:hidden !important;
  overflow-x:hidden !important;
  scrollbar-width:none !important;
  -ms-overflow-style:none !important;
  word-break:keep-all !important;
}
body.studio-home.host-mode .entity-dialogue::-webkit-scrollbar{
  display:none !important;
  width:0 !important;
  height:0 !important;
}
body.studio-home.host-mode .stage-side-link[data-stage-tab="lobby"]{
  margin-top:auto !important;
}
body.studio-home.host-mode .stage-side-link{
  flex:0 0 auto !important;
  display:block !important;
  padding:10px 0 !important;
  border:0 !important;
}
body.studio-home.host-mode .stage-side-link span{
  display:block !important;
}
body.studio-home.host-mode .stage-side-link strong{
  display:none !important;
}
@media(max-width:900px){
  body.studio-home.host-mode .stage-directory{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    margin-top:20px !important;
  }
  body.studio-home.host-mode .studio-entity{
    margin-top:0 !important;
    max-height:none !important;
  }
}


/* v4.1.8 — Stage left rail final correction
   Desired order in Stage mode:
   upper: The Host / lower: Studio return / Lobby / The Box Office / Stage / Backstage.
   The return belongs to the bottom menu group, directly above Lobby with a small breathing gap. */
body.studio-home.host-mode .studio-left{
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  overflow:hidden !important;
  padding-top:54px !important;
  padding-bottom:34px !important;
}
body.studio-home.host-mode .studio-entity{
  order:1 !important;
  flex:0 0 auto !important;
  margin:0 !important;
  padding:0 !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:visible !important;
}
body.studio-home.host-mode .stage-directory{
  order:2 !important;
  position:static !important;
  inset:auto !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-end !important;
  flex:0 0 auto !important;
  width:100% !important;
  min-height:0 !important;
  margin-top:auto !important;
  margin-bottom:8px !important;
  padding:0 !important;
  pointer-events:auto !important;
}
body.studio-home.host-mode .stage-directory .directory-line{
  display:none !important;
}
body.studio-home.host-mode .stage-return{
  display:grid !important;
  grid-template-columns:28px 1fr !important;
  gap:12px !important;
  align-items:baseline !important;
  width:100% !important;
  margin:0 0 18px 0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  color:rgba(91,70,52,.62) !important;
  transform:none !important;
}
body.studio-home.host-mode .stage-return:hover{
  color:var(--studio-ink) !important;
}
body.studio-home.host-mode .stage-return span{
  display:block !important;
  font-size:13px !important;
  font-weight:400 !important;
  line-height:1.2 !important;
}
body.studio-home.host-mode .stage-return strong{
  display:block !important;
  font-size:12px !important;
  font-weight:500 !important;
  line-height:1.2 !important;
  letter-spacing:.04em !important;
}
body.studio-home.host-mode .stage-side-link,
body.studio-home.host-mode .stage-side-link[data-stage-tab="lobby"]{
  display:block !important;
  width:100% !important;
  flex:0 0 auto !important;
  margin:0 !important;
  padding:10px 0 !important;
  border:0 !important;
  background:transparent !important;
  transform:none !important;
}
body.studio-home.host-mode .stage-side-link.active{
  transform:translateX(3px) !important;
}
body.studio-home.host-mode .stage-side-link span{
  display:block !important;
  font-size:13px !important;
  font-weight:500 !important;
  line-height:1.25 !important;
}
body.studio-home.host-mode .stage-side-link strong{
  display:none !important;
}
body.studio-home.host-mode .entity-dialogue,
body.studio-home.host-mode #studioDialogue{
  display:block !important;
  width:100% !important;
  max-width:230px !important;
  min-height:0 !important;
  height:auto !important;
  max-height:8.15em !important;
  line-height:1.72 !important;
  white-space:normal !important;
  word-break:keep-all !important;
  overflow:hidden !important;
  overflow-y:hidden !important;
  overflow-x:hidden !important;
  scrollbar-width:none !important;
  -ms-overflow-style:none !important;
  resize:none !important;
}
body.studio-home.host-mode .entity-dialogue::-webkit-scrollbar,
body.studio-home.host-mode #studioDialogue::-webkit-scrollbar{
  width:0 !important;
  height:0 !important;
  display:none !important;
}
body.studio-home.host-mode .entity-dialogue.typing{
  border-right:0 !important;
}
body.studio-home.host-mode .entity-dialogue.typing::after{
  display:none !important;
  content:none !important;
}
body.studio-home.host-mode .stage-menu{
  display:none !important;
}
@media(max-width:900px){
  body.studio-home.host-mode .stage-directory{
    position:static !important;
    margin-top:26px !important;
    margin-bottom:0 !important;
  }
}

/* v4.1.9 — Stage menu raised by bottom breathing space, not top coordinates.
   The five Stage links are one bottom-based group: Studio / Lobby / The Box Office / Stage / Backstage.
   Position is controlled only by lower empty space so responsive movement stays natural. */
body.studio-home.host-mode .studio-left{
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  overflow:hidden !important;
}
body.studio-home.host-mode .stage-directory{
  order:2 !important;
  position:static !important;
  inset:auto !important;
  display:flex !important;
  flex-direction:column !important;
  width:100% !important;
  flex:0 0 auto !important;
  margin-top:auto !important;
  margin-bottom:92px !important;
  padding:0 !important;
}
body.studio-home.host-mode .stage-return{
  margin:0 0 24px 0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
}
body.studio-home.host-mode .stage-side-link,
body.studio-home.host-mode .stage-side-link[data-stage-tab="lobby"]{
  margin:0 !important;
  padding:10px 0 !important;
  border:0 !important;
  background:transparent !important;
}
body.studio-home.host-mode .entity-dialogue,
body.studio-home.host-mode #studioDialogue{
  overflow:hidden !important;
  overflow-x:hidden !important;
  overflow-y:hidden !important;
  scrollbar-width:none !important;
  -ms-overflow-style:none !important;
  max-height:8.15em !important;
}
body.studio-home.host-mode .entity-dialogue::-webkit-scrollbar,
body.studio-home.host-mode #studioDialogue::-webkit-scrollbar{
  display:none !important;
  width:0 !important;
  height:0 !important;
}
@media(max-width:900px){
  body.studio-home.host-mode .stage-directory{
    margin-top:28px !important;
    margin-bottom:0 !important;
  }
}

/* v4.2.1 — Stage directory numbering restored with Studio floor-link format.
   Keep the five Stage links as one bottom-based group, but use the same
   two-column number/name rhythm as the original Studio building directory. */
body.studio-home.host-mode .stage-directory{
  order:2 !important;
  position:static !important;
  inset:auto !important;
  display:flex !important;
  flex-direction:column !important;
  width:100% !important;
  flex:0 0 auto !important;
  margin-top:auto !important;
  margin-bottom:92px !important;
  padding:0 !important;
  font-family:Arial,Pretendard,sans-serif !important;
}
body.studio-home.host-mode .stage-return,
body.studio-home.host-mode .stage-side-link{
  width:100% !important;
  border:0 !important;
  background:transparent !important;
  color:var(--studio-muted) !important;
  display:grid !important;
  grid-template-columns:46px 1fr !important;
  gap:16px !important;
  align-items:baseline !important;
  text-align:left !important;
  padding:11px 0 !important;
  letter-spacing:.04em !important;
  border-radius:0 !important;
  transition:color .18s ease, transform .18s ease !important;
  opacity:1 !important;
}
body.studio-home.host-mode .stage-return{
  margin:0 0 18px 0 !important;
}
body.studio-home.host-mode .stage-side-link,
body.studio-home.host-mode .stage-side-link[data-stage-tab="lobby"]{
  margin:0 !important;
}
body.studio-home.host-mode .stage-return span,
body.studio-home.host-mode .stage-side-link span{
  display:block !important;
  font-size:12px !important;
  font-weight:700 !important;
  color:inherit !important;
  letter-spacing:.04em !important;
  text-transform:none !important;
}
body.studio-home.host-mode .stage-return strong,
body.studio-home.host-mode .stage-side-link strong{
  display:block !important;
  font-size:13px !important;
  font-weight:500 !important;
  color:inherit !important;
  letter-spacing:.04em !important;
  text-transform:none !important;
}
body.studio-home.host-mode .stage-return:hover,
body.studio-home.host-mode .stage-side-link:hover,
body.studio-home.host-mode .stage-side-link.active{
  color:var(--studio-ink) !important;
}
body.studio-home.host-mode .stage-side-link.active{
  transform:translateX(3px) !important;
}
body.studio-home.host-mode .stage-side-link.staff strong::after{
  content:"" !important;
}
body.studio-home.host-mode .entity-dialogue,
body.studio-home.host-mode #studioDialogue{
  overflow:hidden !important;
  overflow-x:hidden !important;
  overflow-y:hidden !important;
  scrollbar-width:none !important;
  -ms-overflow-style:none !important;
  max-height:8.15em !important;
}
body.studio-home.host-mode .entity-dialogue::-webkit-scrollbar,
body.studio-home.host-mode #studioDialogue::-webkit-scrollbar{
  display:none !important;
  width:0 !important;
  height:0 !important;
}
@media(max-width:900px){
  body.studio-home.host-mode .stage-directory{
    margin-top:28px !important;
    margin-bottom:0 !important;
  }
}

/* v4.2.2 — Stage directory alignment repair.
   Keep the Stage directory as one bottom-based group. Do not pin with top/absolute.
   The bottom blank space positions 04 Backstage around the original Studio 1F line. */
body.studio-home.host-mode .stage-directory{
  order:2 !important;
  position:static !important;
  inset:auto !important;
  display:flex !important;
  flex-direction:column !important;
  width:100% !important;
  flex:0 0 auto !important;
  margin-top:auto !important;
  margin-bottom:98px !important;
  padding:0 !important;
  gap:0 !important;
  font-family:Arial,Pretendard,sans-serif !important;
}
body.studio-home.host-mode .stage-return,
body.studio-home.host-mode .stage-side-link,
body.studio-home.host-mode .stage-side-link[data-stage-tab="lobby"]{
  display:grid !important;
  grid-template-columns:46px 1fr !important;
  gap:16px !important;
  align-items:baseline !important;
  width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:var(--studio-muted) !important;
  text-align:left !important;
  padding:11px 0 !important;
  letter-spacing:.04em !important;
  opacity:1 !important;
  transition:color .18s ease, transform .18s ease !important;
}
body.studio-home.host-mode .stage-return{
  margin-top:0 !important;
  margin-bottom:16px !important;
}
body.studio-home.host-mode .stage-side-link,
body.studio-home.host-mode .stage-side-link[data-stage-tab="lobby"]{
  margin-top:0 !important;
  margin-bottom:0 !important;
}
body.studio-home.host-mode .stage-return span,
body.studio-home.host-mode .stage-side-link span,
body.studio-home.host-mode .stage-side-link[data-stage-tab="lobby"] span{
  display:block !important;
  grid-column:1 !important;
  font-size:12px !important;
  line-height:1.2 !important;
  font-weight:700 !important;
  color:inherit !important;
  letter-spacing:.04em !important;
  text-transform:none !important;
}
body.studio-home.host-mode .stage-return strong,
body.studio-home.host-mode .stage-side-link strong,
body.studio-home.host-mode .stage-side-link[data-stage-tab="lobby"] strong{
  display:block !important;
  grid-column:2 !important;
  font-size:13px !important;
  line-height:1.25 !important;
  font-weight:500 !important;
  color:inherit !important;
  letter-spacing:.04em !important;
  text-transform:none !important;
}
body.studio-home.host-mode .stage-return:hover,
body.studio-home.host-mode .stage-side-link:hover,
body.studio-home.host-mode .stage-side-link.active{
  color:var(--studio-ink) !important;
}
body.studio-home.host-mode .stage-side-link.active{
  transform:translateX(3px) !important;
}
body.studio-home.host-mode .stage-side-link.staff strong::after{
  content:"" !important;
}
@media(max-width:900px){
  body.studio-home.host-mode .stage-directory{
    margin-top:28px !important;
    margin-bottom:0 !important;
  }
}

/* v4.2.3 — Stage directory vertical position correction.
   Keep bottom-based positioning. The previous spacer was too large and lifted the group.
   04 Backstage now sits lower, closer to the original Studio 1F line, while preserving a small bottom breathing space. */
body.studio-home.host-mode .stage-directory{
  margin-top:auto !important;
  margin-bottom:42px !important;
}
@media(max-width:900px){
  body.studio-home.host-mode .stage-directory{
    margin-top:28px !important;
    margin-bottom:0 !important;
  }
}

/* v4.2.5 — Studio <-> The Stage spatial transfer
   Stage is not a normal floor fade. It uses a brief curtain/light pass, while
   keeping the existing bottom-based menu layout untouched. */
body.studio-home.stage-transfer-active .studio-threshold-overlay{
  opacity:1;
  pointer-events:none;
  animation:stageTransferLight .92s cubic-bezier(.16,1,.3,1) both;
  background:
    radial-gradient(circle at 22% 50%, rgba(255,248,231,.22), transparent 24%),
    linear-gradient(90deg,
      rgba(35,29,23,0) 0%,
      rgba(35,29,23,.10) 24%,
      rgba(255,249,232,.34) 50%,
      rgba(35,29,23,.10) 76%,
      rgba(35,29,23,0) 100%);
  mix-blend-mode:screen;
}
body.studio-home.stage-transfer-from-stage .studio-threshold-overlay{
  background:
    radial-gradient(circle at 74% 50%, rgba(255,248,231,.16), transparent 24%),
    linear-gradient(90deg,
      rgba(35,29,23,0) 0%,
      rgba(255,249,232,.25) 42%,
      rgba(35,29,23,.08) 68%,
      rgba(35,29,23,0) 100%);
}
body.studio-home .studio-right.stage-transfer-out .floor-panel.active{
  opacity:.08 !important;
  filter:blur(2.4px) !important;
  transform:scale(.996) !important;
  transition:
    opacity .26s cubic-bezier(.16,1,.3,1),
    filter .26s cubic-bezier(.16,1,.3,1),
    transform .26s cubic-bezier(.16,1,.3,1) !important;
}
body.studio-home .studio-right.stage-transfer-in .floor-panel.active{
  animation:stageTransferIn .62s cubic-bezier(.16,1,.3,1) both !important;
}
body.studio-home.stage-transfer-active .studio-left{
  transition:background .42s ease, border-color .42s ease, filter .42s ease;
}
body.studio-home.stage-transfer-active .studio-entity,
body.studio-home.stage-transfer-active .building-directory,
body.studio-home.stage-transfer-active .stage-directory{
  transition:opacity .28s ease, filter .28s ease;
}
body.studio-home.stage-transfer-active .studio-entity{
  filter:blur(.25px);
}
@keyframes stageTransferLight{
  0%{opacity:0;transform:translate3d(-26%,0,0) scaleX(.92)}
  28%{opacity:.48;transform:translate3d(-10%,0,0) scaleX(1)}
  56%{opacity:.66;transform:translate3d(7%,0,0) scaleX(1.04)}
  100%{opacity:0;transform:translate3d(30%,0,0) scaleX(.96)}
}
@keyframes stageTransferIn{
  0%{opacity:0;filter:blur(2px);transform:scale(.998)}
  45%{opacity:.72;filter:blur(.5px);transform:scale(1)}
  100%{opacity:1;filter:blur(0);transform:scale(1)}
}
@media (prefers-reduced-motion: reduce){
  body.studio-home.stage-transfer-active .studio-threshold-overlay{animation:none;opacity:0;}
  body.studio-home .studio-right.stage-transfer-out .floor-panel.active,
  body.studio-home .studio-right.stage-transfer-in .floor-panel.active{animation:none!important;filter:none!important;transform:none!important;opacity:1!important;}
}

/* v4.2.7 — Host entity anchor alignment
   The Stage must feel like the same left rail space as Studio during transfer.
   Keep The Host symbol/name/dialogue on the exact Studio entity rhythm; only the
   character, copy, and Stage directory differ. */
body.studio-home.host-mode .studio-left{
  padding:54px 42px 42px !important;
}
body.studio-home.host-mode .studio-entity,
body.studio-home.stage-transfer-active .studio-entity{
  min-height:260px !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
}
body.studio-home.host-mode .living-mark{
  font-size:28px !important;
  line-height:1 !important;
  margin:0 0 42px 0 !important;
}
body.studio-home.host-mode .entity-name{
  font-size:19px !important;
  line-height:normal !important;
  letter-spacing:.02em !important;
  margin:0 0 24px 0 !important;
}
body.studio-home.host-mode .entity-dialogue,
body.studio-home.host-mode #studioDialogue{
  max-width:230px !important;
  min-height:88px !important;
  max-height:8.15em !important;
  margin:0 !important;
  font-size:14px !important;
  line-height:1.9 !important;
  overflow:hidden !important;
  scrollbar-width:none !important;
}
body.studio-home.stage-transfer-active .studio-entity{
  filter:none !important;
}

/* v4.2.8 — Soft Stage transfer polish
   Remove the instant "pop" before Studio <-> Stage changes. The current room fades
   down first, the spatial identity switches while dimmed, then the next room
   appears through a light pass. */
body.studio-home .studio-entity,
body.studio-home .building-directory,
body.studio-home .stage-directory{
  transition:opacity .54s cubic-bezier(.22,.61,.36,1), filter .54s cubic-bezier(.22,.61,.36,1) !important;
}
body.studio-home.stage-transfer-active .studio-threshold-overlay{
  animation:stageTransferLightSoft 1.18s cubic-bezier(.22,.61,.36,1) both !important;
  background:
    radial-gradient(circle at 28% 50%, rgba(255,248,231,.12), transparent 26%),
    linear-gradient(90deg,
      rgba(35,29,23,0) 0%,
      rgba(255,249,232,.10) 32%,
      rgba(255,249,232,.22) 52%,
      rgba(255,249,232,.09) 72%,
      rgba(35,29,23,0) 100%) !important;
  mix-blend-mode:screen;
}
body.studio-home.stage-transfer-from-stage .studio-threshold-overlay{
  background:
    radial-gradient(circle at 72% 50%, rgba(255,248,231,.10), transparent 27%),
    linear-gradient(90deg,
      rgba(35,29,23,0) 0%,
      rgba(255,249,232,.08) 28%,
      rgba(255,249,232,.20) 48%,
      rgba(255,249,232,.08) 70%,
      rgba(35,29,23,0) 100%) !important;
}
body.studio-home .studio-right.stage-transfer-out .floor-panel.active{
  opacity:0 !important;
  filter:blur(1.8px) !important;
  transform:none !important;
  transition:
    opacity .54s cubic-bezier(.22,.61,.36,1),
    filter .54s cubic-bezier(.22,.61,.36,1) !important;
}
body.studio-home .studio-right.stage-transfer-in .floor-panel.active{
  animation:stageTransferInSoft .68s cubic-bezier(.22,.61,.36,1) both !important;
}
body.studio-home.stage-transfer-active .studio-entity,
body.studio-home.stage-transfer-active .building-directory,
body.studio-home.stage-transfer-active .stage-directory{
  opacity:.10 !important;
  filter:blur(.8px) !important;
}
body.studio-home.stage-transfer-active .studio-left{
  filter:none !important;
}
@keyframes stageTransferLightSoft{
  0%{opacity:0;transform:translate3d(-18%,0,0) scaleX(.98)}
  38%{opacity:.34;transform:translate3d(-4%,0,0) scaleX(1)}
  70%{opacity:.28;transform:translate3d(8%,0,0) scaleX(1.01)}
  100%{opacity:0;transform:translate3d(20%,0,0) scaleX(.99)}
}
@keyframes stageTransferInSoft{
  0%{opacity:0;filter:blur(1.8px);transform:none;}
  44%{opacity:.58;filter:blur(.45px);transform:none;}
  100%{opacity:1;filter:blur(0);transform:none;}
}
@media (prefers-reduced-motion: reduce){
  body.studio-home.stage-transfer-active .studio-entity,
  body.studio-home.stage-transfer-active .building-directory,
  body.studio-home.stage-transfer-active .stage-directory{opacity:1!important;filter:none!important;}
}

/* v4.2.10 — Unified Stage entry
   B0 -> The Stage had the preferred softness. Route every entrance into
   The Stage through the same threshold-style light pass, including
   Studio -> The Stage. Stage exit and internal Stage tabs remain unchanged. */
body.studio-home.stage-transfer-entry .studio-threshold-overlay{
  animation:stageEntryThresholdSoft 1.18s cubic-bezier(.22,.61,.36,1) both !important;
  background:
    radial-gradient(circle at 50% 48%, rgba(255,248,231,.14), transparent 30%),
    linear-gradient(90deg,
      rgba(35,29,23,0) 0%,
      rgba(255,249,232,.07) 28%,
      rgba(255,249,232,.22) 50%,
      rgba(255,249,232,.07) 72%,
      rgba(35,29,23,0) 100%) !important;
}
body.studio-home.stage-transfer-entry .studio-right.stage-transfer-out .floor-panel.active{
  opacity:0 !important;
  filter:blur(1.8px) !important;
  transform:none !important;
  transition:
    opacity .54s cubic-bezier(.22,.61,.36,1),
    filter .54s cubic-bezier(.22,.61,.36,1) !important;
}
body.studio-home.stage-transfer-entry .studio-right.stage-transfer-in .floor-panel.active{
  animation:stageEntryPanelSoft .68s cubic-bezier(.22,.61,.36,1) both !important;
}
@keyframes stageEntryThresholdSoft{
  0%{opacity:0;transform:translate3d(0,0,0) scaleX(.99)}
  38%{opacity:.32;transform:translate3d(0,0,0) scaleX(1)}
  70%{opacity:.24;transform:translate3d(0,0,0) scaleX(1.005)}
  100%{opacity:0;transform:translate3d(0,0,0) scaleX(1)}
}
@keyframes stageEntryPanelSoft{
  0%{opacity:0;filter:blur(1.8px);transform:none;}
  44%{opacity:.58;filter:blur(.45px);transform:none;}
  100%{opacity:1;filter:blur(0);transform:none;}
}
@media (prefers-reduced-motion: reduce){
  body.studio-home.stage-transfer-entry .studio-threshold-overlay{animation:none!important;opacity:0!important;}
}


/* v4.2.17 Lobby wording pass — keep the 1F heading quiet with a single rule line. */
body.studio-home [data-panel="1f"] .lobby-block{
  border-top:0;
}

/* v4.2.17 Gallery controls — category/search/tag filter only */
body.studio-home .gallery-controls{
  margin:-10px 0 34px;
}
body.studio-home .gallery-controls .gallery-filter{
  margin:0 0 22px!important;
}

body.studio-home .gallery-search-row{
  width:min(100%,520px);
  margin:0 0 18px;
  display:flex;
  align-items:flex-start;
  gap:28px;
}
body.studio-home .gallery-search{
  flex:1 1 auto;
  min-width:0;
  border:0;
  border-bottom:0;
  border-radius:0;
  background:transparent;
  color:var(--studio-ink);
  padding:0 0 9px;
  font-size:13px;
  letter-spacing:.02em;
  outline:none;
}
body.studio-home .gallery-search::placeholder{
  color:var(--studio-muted);
}
body.studio-home .gallery-search:focus{
  border-bottom-color:transparent;
}
body.studio-home .gallery-tag-filter{
  position:relative;
  display:block;
  flex:0 0 auto;
  padding-top:2px;
}
body.studio-home .gallery-tag-toggle,
body.studio-home .gallery-tag-panel button{
  position:relative;
  border:0;
  background:transparent;
  color:var(--studio-muted);
  padding:0 0 5px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
}
body.studio-home .gallery-tag-toggle::after,
body.studio-home .gallery-tag-panel button::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .22s ease;
}
body.studio-home .gallery-tag-toggle:hover::after,
body.studio-home .gallery-tag-toggle[aria-expanded="true"]::after,
body.studio-home .gallery-tag-panel button:hover::after,
body.studio-home .gallery-tag-panel button.active::after{
  transform:scaleX(1);
}
body.studio-home .gallery-tag-panel{
  position:absolute;
  top:100%;
  right:0;
  z-index:5;
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:18px;
  width:360px;
  margin-top:14px;
  padding:0;
}
body.studio-home .gallery-tag-panel[hidden]{
  display:none!important;
}
body.studio-home .gallery-tag-panel button.active{
  color:var(--studio-ink);
}

@media(max-width:620px){
  body.studio-home .gallery-search-row{
    width:100%;
    gap:18px;
  }
  body.studio-home .gallery-tag-panel{
    right:auto;
    left:0;
    justify-content:flex-start;
    width:min(360px, calc(100vw - 48px));
  }
}

/* v4.2.17 Gallery filter overlay fix — keep Filter outside layout flow */
body.studio-home .gallery-controls{
  position:relative!important;
  overflow:visible!important;
}
body.studio-home .gallery-search-row{
  position:relative!important;
  display:block!important;
  width:min(100%,520px)!important;
  margin:0 0 18px!important;
  padding-right:96px!important;
  overflow:visible!important;
}
body.studio-home .gallery-search{
  display:block!important;
  width:100%!important;
  max-width:none!important;
}
body.studio-home .gallery-tag-filter{
  position:absolute!important;
  right:0!important;
  top:2px!important;
  display:block!important;
  width:auto!important;
  padding:0!important;
  margin:0!important;
  z-index:20!important;
}
body.studio-home .gallery-tag-panel{
  position:absolute!important;
  top:100%!important;
  right:0!important;
  z-index:30!important;
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:18px;
  width:360px;
  margin-top:14px!important;
  padding:0!important;
  pointer-events:auto;
}
body.studio-home .gallery-tag-panel[hidden]{display:none!important;}
@media(max-width:620px){
  body.studio-home .gallery-search-row{
    width:100%!important;
    padding-right:88px!important;
  }
  body.studio-home .gallery-tag-panel{
    right:0!important;
    left:auto!important;
    width:min(320px, calc(100vw - 64px))!important;
  }
}

/* v4.2.17 Gallery filter stable overlay — Filter opens without changing page/gallery metrics */
body.studio-home,
body.studio-home .studio-shell,

/* Studio right padding restore — room-plates는 제외, 나머지 콘텐츠만 */
body.studio-home .floor-heading,
body.studio-home .lobby-grid,
body.studio-home .studio-project-detail,
body.studio-home .gallery-filter,
body.studio-home .gallery-wall,
body.studio-home .b0-section,
body.studio-home .nameless-main,
body.studio-home .stage-floor,
body.studio-home .studio-facts,
body.studio-home .studio-links{
  padding-right:clamp(34px,5vw,76px);
}
@media(max-width:900px){
  /* body·studio-shell 레벨 우측 패딩 제거 */
  body.studio-home,
  body.studio-home .studio-shell {
    padding-right:0 !important;
  }
  body.studio-home .floor-heading,
  body.studio-home .lobby-grid,
  body.studio-home .studio-project-detail,
  body.studio-home .gallery-filter,
  body.studio-home .gallery-wall,
  body.studio-home .b0-section,
  body.studio-home .nameless-main{
    padding-right:0;
  }
}
body.studio-home .studio-right{
  overflow-x:hidden!important;
}
body.studio-home .gallery-controls{
  position:relative!important;
  overflow:visible!important;
}
body.studio-home .gallery-search-row{
  position:relative!important;
  display:flex!important;
  align-items:flex-start!important;
  gap:28px!important;
  width:min(100%,520px)!important;
  margin:0 0 18px!important;
  padding-right:0!important;
  overflow:visible!important;
}
body.studio-home .gallery-search{
  flex:1 1 auto!important;
  min-width:0!important;
  width:auto!important;
  max-width:none!important;
}
body.studio-home .gallery-tag-filter{
  position:relative!important;
  flex:0 0 auto!important;
  top:auto!important;
  right:auto!important;
  width:auto!important;
  margin:0!important;
  padding-top:2px!important;
  z-index:40!important;
}
body.studio-home .gallery-tag-panel{
  position:fixed!important;
  top:var(--gallery-tag-panel-top, 160px)!important;
  left:var(--gallery-tag-panel-left, 0px)!important;
  right:auto!important;
  z-index:999!important;
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:flex-end!important;
  gap:18px!important;
  width:auto!important;
  max-width:calc(100vw - 48px)!important;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
  pointer-events:auto!important;
}
body.studio-home .gallery-tag-panel[hidden]{
  display:none!important;
}
@media(max-width:620px){
  body.studio-home .gallery-search-row{
    width:100%!important;
    gap:18px!important;
  }
  body.studio-home .gallery-tag-panel{
    justify-content:flex-start!important;
    max-width:calc(100vw - 32px)!important;
  }
}


/* v4.2.27 Gallery stable layout — ghost 측정 방식
   setGalleryRowH()가 studio-right 너비에서 역산 → body에 ghost 붙여 실측
   패널 display:none 여부와 무관하게 init()에서 세팅
   필터 전환은 innerHTML 교체만, 레이아웃 일절 건드리지 않음 */

/* body overflow:hidden — 스크롤바 출현으로 인한 viewport 너비 변동 방지 */
body.studio-home{
  overflow:hidden!important;
}

body.studio-home [data-panel="3f"] .gallery-wall{
  /* min-height 제거 — panel min-height(100vh-142px)가 전체 높이를 담당
     gallery-wall에 별도 min-height 두면 panel이 100vh-142px를 초과해
     MaxScroll > 0이 생기고 필터 0개 시 scrollTop 클램핑으로 heading 짤림 */
  overflow:visible;
  width:100%;
  align-content:start;
}

/* placeholder: 공간 차지 + 비가시 */
body.studio-home [data-panel="3f"] .gallery-piece-placeholder{
  visibility:hidden!important;
  pointer-events:none!important;
}
body.studio-home [data-panel="3f"] .gallery-piece-placeholder .gallery-thumb{
  transform:none!important;
  filter:none!important;
}

/* 제목 줄바꿈 방지 — 카드 높이를 콘텐츠 길이와 무관하게 일정하게 유지 */
body.studio-home [data-panel="3f"] .gallery-piece h3{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
body.studio-home [data-panel="3f"] .gallery-piece p{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}


/* ── Gallery thumbnail image & popup · v4.2.29 ── */
.gallery-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
body.studio-home [data-panel="3f"] .gallery-piece:not(.gallery-piece-placeholder){
  cursor:pointer;
}

/* Popup layer */
.art-popup-layer{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  box-sizing:border-box;
  overflow:auto;
}
.art-popup-layer[hidden]{ display:none; }

.art-popup-backdrop{
  position:fixed;
  inset:0;
  z-index:0;
  background:rgba(44, 39, 31, 0.66);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
}
.art-popup-layer.is-open .art-popup-backdrop{
  pointer-events:auto;
}
/* art-popup-inner → see below */
.art-popup-layer.is-open .art-popup-backdrop{ opacity:1; }

.art-popup-close{
  position:fixed;
  top:20px;
  right:28px;
  z-index:10001;
  border:none;
  background:transparent;
  color:rgba(236,233,228,.35);
  font-size:28px;
  line-height:1;
  cursor:pointer;
  padding:8px 12px;
  transition:color .18s ease;
  font-family:inherit;
}
.art-popup-close:hover{ color:rgba(236,233,228,.9); }

/* === ART POPUP INNER LAYOUT === */
.art-popup-inner{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  max-width:min(90vw, 1100px);
  opacity:0;
  transform:translateY(10px) scale(0.98);
  transition:opacity .32s ease, transform .32s ease;
}
.art-popup-layer.is-open .art-popup-inner{
  opacity:1;
  transform:translateY(0) scale(1);
}
.art-popup-img{
  display:block;
  max-width:90vw;
  max-height:82vh;
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:4px;
  box-shadow:0 8px 40px rgba(0,0,0,0.5);
}
.art-popup-meta{
  text-align:center;
  color:rgba(236,233,228,0.85);
  font-family:inherit;
}
.art-popup-title{
  margin:0 0 8px;
  font-size:1.15rem;
  font-weight:600;
  color:rgba(236,233,228,0.95);
  letter-spacing:0.02em;
}
.art-popup-info{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  flex-wrap:wrap;
  font-size:0.82rem;
  color:rgba(236,233,228,0.55);
  margin-bottom:10px;
}
.art-popup-info span + span::before{
  content:' · ';
  margin:0 4px;
}
.art-popup-tags{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px;
  margin-top:6px;
  margin-bottom:14px;
}
.art-popup-tag{
  display:inline-block;
  padding:3px 10px;
  border-radius:20px;
  background:rgba(236,233,228,0.1);
  border:1px solid rgba(236,233,228,0.18);
  font-size:0.75rem;
  color:rgba(236,233,228,0.65);
  letter-spacing:0.02em;
}
.art-popup-note{
  margin:6px 0 0;
  font-size:0.82rem;
  color:rgba(236,233,228,0.5);
  font-style:italic;
  line-height:1.5;
}

/* === ROOM-PLATES FINAL OVERRIDE === */
body.studio-home .room-plates{
  padding-right:0 !important;
  -webkit-mask-image:linear-gradient(to right,white 0%,white calc(100% - 60px),transparent 100%) !important;
  mask-image:linear-gradient(to right,white 0%,white calc(100% - 60px),transparent 100%) !important;
}
body.studio-home .room-plates::before,
body.studio-home .room-plates::after{
  display:none !important;
  content:none !important;
}
@media(max-width:900px){
  body.studio-home .room-plates{
    -webkit-mask-image:linear-gradient(to right,white 0%,white calc(100% - 40px),transparent 100%) !important;
    mask-image:linear-gradient(to right,white 0%,white calc(100% - 40px),transparent 100%) !important;
  }
}



/* ═══════════════════════════════════════
   THE WALL / ROOFTOP
═══════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@500;700&family=Caveat:wght@400;600&family=Special+Elite&family=Indie+Flower&display=swap');

[data-panel="rooftop"] {
  background: none;
  padding: 32px 24px 60px;
  box-sizing: border-box;
}

/* rooftop-mode: body --studio-bg 변수 변경 → 배경 전체가 자연스럽게 회색 */
body.rooftop-mode {
  --studio-bg: #d6d2cb !important;
}



.wall-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  gap: 18px 22px;
  width: 100%;
}

.wall-note {
  background: #faf8f3;
  border-radius: 3px;
  padding: 2px 16px 6px;
  position: relative;
  box-shadow:
    1px 2px 6px rgba(0,0,0,.10),
    0 0 0 1px rgba(0,0,0,.04);
  transition: transform .15s ease;
  line-height: 1.35;
  white-space: pre-wrap;
  word-break: keep-all;
  text-align: center;
  min-height: 100px;
}
.wall-note::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 12px;
  background: rgba(160,140,110,.55);
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
.wall-note:hover {
  transform: rotate(0deg) scale(1.01);
  z-index: 2;
}
.wall-note--rotL { transform: rotate(-1.4deg); }
.wall-note--rotR { transform: rotate(1.1deg); }
.wall-note--rotLL { transform: rotate(-2.6deg); }
.wall-note--rotRR { transform: rotate(2.1deg); }
.wall-note--rotL:hover,
.wall-note--rotR:hover,
.wall-note--rotLL:hover,
.wall-note--rotRR:hover { transform: rotate(0deg) scale(1.01); }

.wall-note-date {
  font-size: 11px;
  color: #a09890;
  letter-spacing: .06em;
  margin-bottom: 2px;
  display: block;
  font-family: 'Nanum Gothic Coding', monospace;
}
.wall-note-content {
  display: block;
  font-size: 13px;
  color: #5a5450;
}

/* 관리자별 폰트 + 톤 */
.wall-note--host {
  background: #fdfaf4;
}
.wall-note--host .wall-note-content {
  font-family: 'Nanum Myeongjo', serif;
  font-size: 14px;
  color: #5a5450;
  font-weight: 500;
}

.wall-note--studio {
  background: #faf9f6;
}
.wall-note--studio .wall-note-content {
  font-family: 'Gaegu', cursive;
  font-size: 15px;
  color: #5a5450;
  font-weight: 400;
}

.wall-note--nameless {
  background: #f8f7f5;
}
.wall-note--nameless .wall-note-content {
  font-family: 'Nanum Gothic Coding', monospace;
  font-size: 13px;
  color: #5a5450;
  letter-spacing: .03em;
  line-height: 1.35;
}

.wall-note--keeper {
  background: #f5f5f3;
}
.wall-note--keeper .wall-note-content {
  font-family: 'Nanum Gothic Coding', monospace;
  font-size: 13px;
  color: #5a5450;
  font-weight: 700;
  letter-spacing: .02em;
}

.wall-note--noise {
  background: #faf8f2;
  opacity: .82;
}
.wall-note--noise .wall-note-content {
  font-family: 'Nanum Myeongjo', serif;
  font-size: 14px;
  color: #5a5450;
  font-style: italic;
}

/* 2칸짜리 노트 */
.wall-note--wide {
  grid-column: span 2;
}


/* Rooftop transition — #studioRight에 직접 적용 (floor-panel의 transform:none!important 우회) */
@keyframes rooftop-rise {
  from { opacity: 0; transform: translateY(80px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes rooftop-descend {
  from { opacity: 0; transform: translateY(-65px); }
  to   { opacity: 1; transform: translateY(0); }
}
body.rooftop-transit-in #studioRight {
  animation: rooftop-rise 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
body.rooftop-transit-out #studioRight {
  animation: rooftop-descend 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@media (prefers-reduced-motion: reduce) {
  body.rooftop-transit-in #studioRight,
  body.rooftop-transit-out #studioRight {
    animation: none;
  }
}

/* rooftop: entity hide / wall description */
#wallDescription {
  display: none;
}
body.rooftop-mode #studioEntity {
  display: none;
}
body.rooftop-mode #wallDescription {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}
.wall-desc-primary {
  font-size: 13px;
  color: var(--studio-ink, #1a1916);
  line-height: 1.55;
  margin: 0;
  font-weight: 500;
}
.wall-desc-secondary {
  font-size: 12px;
  color: var(--studio-muted, #9a9590);
  line-height: 1.7;
  margin: 0;
}

.pb-stats{display:flex!important;align-items:center!important;flex-wrap:wrap;gap:0;justify-content:center}.pb-stats .stat{border-top:0!important;padding:10px 20px!important;text-align:center;flex:0 0 auto!important;min-width:0}.pb-stats .stat-arrow{display:flex;align-items:center;gap:2px;flex-shrink:0;opacity:0.5;padding:0 6px;margin-top:-8px}.pb-stats .stat-arrow i{display:inline-block;width:14px;height:14px;border-top:3.5px solid var(--accent);border-right:3.5px solid var(--accent);transform:rotate(45deg)}

.video-preview:has(video){background:none!important;min-height:0!important;padding:0!important;display:block!important}

/* ===== v4.3 Stage 구조 수정 ===== */

/* 로비 카드 border 조정: wide·Today는 제거, Access(3번째)만 유지 */
.stage-lobby-grid .stage-card { border-top: none; }
.stage-lobby-grid .stage-card:nth-child(3) { border-top: 1px solid var(--studio-line); }

/* THE HOST 와이드 카드 세로 가운데 정렬 */
.stage-card.wide { justify-content: center; }

/* Stage 탭 — 강의 목록 */
.stage-lecture-head { margin-bottom: 28px; }
.stage-lecture-head h2 { font-family: "Times New Roman", serif; font-size: clamp(38px, 5vw, 64px); font-weight: 400; line-height: 1; letter-spacing: -.04em; margin: 0; }
.lecture-list { display: flex; flex-direction: column; }
.lecture-item { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 20px; border-top: 1px solid var(--studio-line); padding: 18px 0; }
.lecture-item:last-child { border-bottom: 1px solid var(--studio-line); }
.lecture-num { font-size: 12px; color: var(--studio-muted); letter-spacing: .1em; }
.lecture-info { display: flex; flex-direction: column; gap: 5px; }
.lecture-tag-label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--studio-muted); }
.lecture-title { font-size: 15px; color: var(--studio-ink); font-weight: 500; margin: 0; }
.lecture-open-btn { border: 1px solid var(--studio-line); background: transparent; border-radius: 999px; color: var(--studio-ink); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 8px 16px; cursor: pointer; transition: background .16s, transform .16s; white-space: nowrap; }
.lecture-open-btn:hover { background: rgba(255,252,246,.64); transform: translateY(-2px); }
.lecture-empty { color: var(--studio-muted); font-size: 14px; padding: 60px 0; margin: 0; }

/* Lecture-mode: 헤더·메뉴 숨기고 뷰어 풀스크린 */
.lecture-viewer { display: none; }
.stage-foundation.lecture-mode .stage-hero { display: none; }
.stage-foundation.lecture-mode .stage-menu { display: none; }
.stage-foundation.lecture-mode .stage-view { display: none !important; }
.stage-foundation.lecture-mode .lecture-viewer { display: flex; flex-direction: column; height: calc(100vh - 140px); }
.lecture-viewer-bar { display: flex; align-items: center; gap: 16px; padding: 0 0 16px; border-bottom: 1px solid var(--studio-line); margin-bottom: 20px; flex-shrink: 0; }
.lecture-back { border: none; background: none; color: var(--studio-muted); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; padding: 0; white-space: nowrap; }
.lecture-back:hover { color: var(--studio-ink); }
.lecture-viewer-title { flex: 1; font-size: 14px; color: var(--studio-ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lecture-viewer-nav { display: flex; gap: 8px; flex-shrink: 0; }
.lecture-viewer-nav button { border: 1px solid var(--studio-line); background: transparent; border-radius: 999px; color: var(--studio-ink); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 7px 14px; cursor: pointer; transition: background .14s; }
.lecture-viewer-nav button:hover:not(:disabled) { background: rgba(255,252,246,.64); }
.lecture-viewer-nav button:disabled { opacity: .3; cursor: default; }
.lecture-slide-counter { font-size: 12px; color: var(--studio-muted); letter-spacing: .08em; min-width: 48px; text-align: center; }
.lecture-file-view { flex: 1; border: 1px solid var(--studio-line); border-radius: 18px; overflow: hidden; min-height: 0; }

/* Backstage 탭 — 슬라이드 검색 */
.backstage-head { margin-bottom: 28px; }
.backstage-head h2 { font-family: "Times New Roman", serif; font-size: clamp(38px, 5vw, 64px); font-weight: 400; line-height: 1; letter-spacing: -.04em; margin: 0; }
.backstage-filters { display: flex; flex-direction: column; gap: 16px; margin-bottom: 32px; }
.backstage-search { width: min(400px, 100%); border: 0; border-bottom: 1px solid var(--studio-line); background: transparent; color: var(--studio-ink); padding: 12px 0; font: inherit; outline: none; }
.backstage-search::placeholder { color: var(--studio-muted); }
.backstage-tags { display: flex; gap: 10px; flex-wrap: wrap; }
.backstage-tags button { border: 1px solid var(--studio-line); border-radius: 999px; background: transparent; color: var(--studio-muted); padding: 8px 13px; font-size: 12px; letter-spacing: .08em; cursor: pointer; }
.backstage-tags button:hover, .backstage-tags button.active { color: var(--studio-ink); background: rgba(255,252,246,.46); border-color: rgba(91,70,52,.28); }
.backstage-slide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.backstage-slide { border: 1px solid var(--studio-line); border-radius: 12px; overflow: hidden; background: rgba(255,252,246,.32); cursor: pointer; transition: transform .16s; }
.backstage-slide:hover { transform: translateY(-3px); }
.backstage-slide-thumb { aspect-ratio: 16/9; background: rgba(91,70,52,.06); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.backstage-slide-thumb img { width: 100%; height: 100%; object-fit: cover; }
.backstage-slide-meta { padding: 10px 14px; }
.backstage-slide-title { font-size: 13px; color: var(--studio-ink); font-weight: 500; margin: 0 0 3px; }
.backstage-slide-sub { font-size: 11px; color: var(--studio-muted); letter-spacing: .05em; }
.backstage-empty { grid-column: 1 / -1; color: var(--studio-muted); font-size: 14px; padding: 60px 0; text-align: left; margin: 0; }

/* Stage/Backstage 좌측 정렬 */
.stage-view { text-align: left; }
.backstage-wrap, .backstage-head, .backstage-filters, .backstage-slide-grid { text-align: left; }
.stage-lecture-head, .lecture-list { text-align: left; }


/* ===================================================
   폐장 다크모드 — studio-closed (18:00 ~ 10:00)
   =================================================== */

body.studio-home.studio-closed {
  --studio-bg:        #100f0d;
  --studio-ink:       #d8d3ca;
  --studio-soft:      #7a7468;
  --studio-muted:     #504b45;
  --studio-line:      rgba(180,170,158,.10);
  --studio-line-soft: rgba(180,170,158,.06);
}

/* 배경 글로우 — 더 어둡고 붉은 기운 */
body.studio-home.studio-closed::before {
  background:
    radial-gradient(circle at 68% 18%, rgba(90,40,20,.20), transparent 32%),
    radial-gradient(circle at 18% 78%, rgba(30,18,45,.18), transparent 30%);
}

/* 좌측 패널 */
body.studio-home.studio-closed .studio-left {
  background: rgba(16,14,11,.58);
}

/* 룸 플레이트 */
body.studio-home.studio-closed .room-plate {
  background: rgba(22,20,17,.50);
}
body.studio-home.studio-closed .room-plate:hover,
body.studio-home.studio-closed .room-plate.active,
body.studio-home.studio-closed .room-plate.plate-public:hover,
body.studio-home.studio-closed .room-plate.plate-public.active {
  background: rgba(34,31,26,.72);
  border-color: rgba(150,135,118,.18);
}
body.studio-home.studio-closed .room-plate.plate-public {
  background: rgba(22,20,17,.40);
}
body.studio-home.studio-closed .room-plate strong{
  color:rgba(215,205,192,.88);
}
body.studio-home.studio-closed .room-plate span{
  color:rgba(215,205,192,.62) !important;
}
body.studio-home.studio-closed .room-plate .room-plate-tags em{
  color:rgba(215,205,192,.55) !important;
  border-color:rgba(215,205,192,.22) !important;
  opacity:1 !important;
}


/* Sticky 필터 fade 그라디언트 */
body.studio-home.studio-closed .room-plates,
body.studio-home.studio-closed .gallery-filter {
  background: linear-gradient(180deg, var(--studio-bg) 28%, transparent);
}
body.studio-home.studio-closed .gallery-controls {
  background: linear-gradient(180deg, var(--studio-bg) 82%, transparent);
}

/* 갤러리 썸네일 — 어두운 무광 */
body.studio-home.studio-closed .gallery-thumb {
  background:
    radial-gradient(circle at 72% 24%, rgba(255,255,255,.04), transparent 30%),
    linear-gradient(135deg, rgba(24,22,18,.75), rgba(34,30,24,.92));
  border-color: rgba(160,150,138,.07);
}

/* Stage 메뉴 아이템 */
body.studio-home.studio-closed .stage-menu-item {
  background: rgba(22,20,17,.40);
}
body.studio-home.studio-closed .stage-menu-item:hover,
body.studio-home.studio-closed .stage-menu-item.active {
  background: rgba(34,31,26,.62);
  border-color: rgba(140,120,100,.18);
}

/* 퍼포먼스 카드 */
body.studio-home.studio-closed .performance-card {
  background: rgba(22,20,17,.40);
}
body.studio-home.studio-closed .performance-card:hover,
body.studio-home.studio-closed .performance-card:focus-visible {
  background: rgba(34,31,26,.58);
  border-color: rgba(140,120,100,.20);
}

/* 버튼류 통합 */
body.studio-home.studio-closed .performance-actions button,
body.studio-home.studio-closed .curtain-button,
body.studio-home.studio-closed .stage-tags button,
body.studio-home.studio-closed .backstage-tags button,
body.studio-home.studio-closed .lecture-open-btn,
body.studio-home.studio-closed .lecture-viewer-nav button {
  background: rgba(22,20,17,.40);
}
body.studio-home.studio-closed .performance-actions button:hover,
body.studio-home.studio-closed .curtain-button:hover,
body.studio-home.studio-closed .stage-tags button:hover,
body.studio-home.studio-closed .stage-tags button.active,
body.studio-home.studio-closed .backstage-tags button:hover,
body.studio-home.studio-closed .backstage-tags button.active,
body.studio-home.studio-closed .lecture-open-btn:hover,
body.studio-home.studio-closed .lecture-viewer-nav button:hover:not(:disabled) {
  background: rgba(40,37,31,.70);
  border-color: rgba(150,130,108,.22);
}

/* Backstage 슬라이드 */
body.studio-home.studio-closed .backstage-slide {
  background: rgba(22,20,17,.50);
}

/* Art popup */
body.studio-home.studio-closed .art-popup-card {
  background: rgba(18,16,13,.96);
  border-color: rgba(160,150,138,.10);
}

/* 폐장 배지 — studio-left 하단 */
.studio-closed-badge {
  display: none;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--studio-line);
  color: rgba(190,120,80,.9);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.4;
}
.studio-closed-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(200,90,50,.85);
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(200,90,50,.5);
  animation: studio-breathe 2.8s ease-in-out infinite;
}
body.studio-home.studio-closed .studio-closed-badge {
  display: flex;
}


/* ── 루프탑 다크모드 ── */

/* 좌측 wallDescription 텍스트 */
body.studio-home.studio-closed #wallDescription .wall-desc-primary {
  color: rgba(210, 204, 194, 0.94);
}
body.studio-home.studio-closed #wallDescription .wall-desc-secondary {
  color: rgba(152, 145, 135, 0.82);
}

/* 우측 패널 야간 배경 — 좌측 패널 톤 맞춤 */
body.studio-home.studio-closed[data-floor="rooftop"] #studioRight {
  background: #0c0e1c !important;
}

/* 루프탑 메모 카드 — 전 타입 단일 통일 */
body.studio-home.studio-closed[data-floor="rooftop"] .wall-note,
body.studio-home.studio-closed[data-floor="rooftop"] .wall-note--host,
body.studio-home.studio-closed[data-floor="rooftop"] .wall-note--studio,
body.studio-home.studio-closed[data-floor="rooftop"] .wall-note--nameless,
body.studio-home.studio-closed[data-floor="rooftop"] .wall-note--keeper,
body.studio-home.studio-closed[data-floor="rooftop"] .wall-note--noise {
  background: rgba(16, 22, 58, 0.90) !important;
  box-shadow: 1px 2px 8px rgba(0,0,30,.50), 0 0 0 1px rgba(80,100,200,.10) !important;
  opacity: 1 !important;
}
body.studio-home.studio-closed[data-floor="rooftop"] .wall-note-date {
  color: rgba(140, 155, 210, 0.65) !important;
}
body.studio-home.studio-closed[data-floor="rooftop"] .wall-note-content {
  color: rgba(200, 210, 242, 0.85) !important;
}

/* 루프탑 배경 전체 통일 */
html:has(body.studio-home.studio-closed[data-floor="rooftop"]) {
  background: #0c0e1c !important;
}
body.studio-home.studio-closed[data-floor="rooftop"] {
  background: #0c0e1c !important;
}
body.studio-home.studio-closed[data-floor="rooftop"] .studio-shell {
  background: #0c0e1c !important;
}
body.studio-home.studio-closed[data-floor="rooftop"] {
  background: #0c0e1c !important;
}
body.studio-home.studio-closed[data-floor="rooftop"] .studio-shell {
  background: #0c0e1c !important;
}

/* 4F — 커튼 뒤 빛샘 (상단 좌측 모서리) */
body.studio-home[data-floor="4f"] .studio-left {
  position: relative;
  overflow: visible;
}
body.studio-home[data-floor="4f"] .studio-left::before {
  content: '';
  position: absolute;
  top: -30px;
  left: -30px;
  width: 260px;
  height: 220px;
  background:
    radial-gradient(ellipse at 0% 0%,
      rgba(255, 210, 120, 0.18) 0%,
      rgba(255, 180, 80, 0.08) 35%,
      transparent 68%);
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
}

/* 루프탑 빈 상태 */
.wall-empty{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:60vh;
  text-align:center;
}
.wall-empty p{
  color:rgba(180,170,158,.5);
  font-size:14px;
  line-height:2;
  letter-spacing:.04em;
}

/* 갤러리 0개 빈 상태 */
.gallery-empty{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:200px;
  color:var(--studio-muted,#7a7468);
  font-size:13px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
/* 갤러리 패널 최소 높이 — studio-right padding(62+80=142px) 제거해야 MaxScroll=0 유지 */
body.studio-home [data-panel="3f"]{
  min-height:calc(100vh - 142px);
}

/* v4.3.52 — B0 폐장 모드 텍스트 밝기 보정
   B0 요소들이 CSS 변수 대신 하드코딩된 색상을 쓰므로 직접 선택자로 덮어씀 */
body.studio-home.studio-closed[data-floor="b0"] .nameless-core{
  color:#9c8f82 !important;
}
body.studio-home.studio-closed[data-floor="b0"] .nameless-voice p{
  color:rgba(180,168,155,.75) !important;
}
body.studio-home.studio-closed[data-floor="b0"] .nameless-voice div{
  color:rgba(160,150,138,.55) !important;
}
body.studio-home.studio-closed[data-floor="b0"] .nameless-whisper-trigger{
  color:#9c8f82 !important;
  border-color:rgba(180,168,155,.22) !important;
}
body.studio-home.studio-closed[data-floor="b0"] .nameless-square{
  border-color:rgba(180,168,155,.15) !important;
}

/* v4.3.76 — B0 다크모드 위스퍼 팝업 색상 보정
   whisper panel 요소들이 라이트모드 하드코딩 색상을 쓰므로 덮어씀 */
body.studio-home.studio-closed[data-floor="b0"] .whispers-panel{
  background:rgba(16,14,11,.92) !important;
}
body.studio-home.studio-closed[data-floor="b0"] .whisper-item{
  color:rgba(215,205,192,.90) !important;
}
body.studio-home.studio-closed[data-floor="b0"] .whisper-item::before{
  color:rgba(180,168,155,.28) !important;
}
body.studio-home.studio-closed[data-floor="b0"] .whispers-date{
  color:rgba(195,183,170,.58) !important;
}
body.studio-home.studio-closed[data-floor="b0"] .whispers-empty{
  color:rgba(195,183,170,.58) !important;
}
body.studio-home.studio-closed[data-floor="b0"] .whispers-title{
  color:rgba(195,183,170,.58) !important;
}
body.studio-home.studio-closed[data-floor="b0"] .whispers-mode-toggle{
  color:rgba(160,148,135,.36) !important;
}
body.studio-home.studio-closed[data-floor="b0"] .whispers-mode-toggle:hover{
  color:rgba(215,205,192,.84) !important;
}
body.studio-home.studio-closed[data-floor="b0"] .whispers-close{
  color:rgba(215,205,192,.55) !important;
}
body.studio-home.studio-closed[data-floor="b0"] .whispers-close:hover{
  color:rgba(215,205,192,.85) !important;
}
body.studio-home.studio-closed[data-floor="b0"] .whispers-axis::before{
  background:linear-gradient(to bottom,rgba(160,148,135,.10),rgba(160,148,135,.04),rgba(160,148,135,.10)) !important;
}
body.studio-home.studio-closed[data-floor="b0"] .whispers-axis span{
  color:rgba(195,183,170,.40) !important;
}
body.studio-home.studio-closed[data-floor="b0"] .whispers-axis span::before{
  background:rgba(160,148,135,.16) !important;
}
body.studio-home.studio-closed[data-floor="b0"] .whispers-axis span.active{
  color:rgba(215,205,192,.84) !important;
}
body.studio-home.studio-closed[data-floor="b0"] .whispers-axis span.active::before{
  background:rgba(180,168,155,.40) !important;
}

/* v4.3.52 — 갤러리 0개 상단 고정
   display:block은 .active 클래스에만 적용되도록 절대 override 금지
   align-content:start 로 content가 상단에 붙도록 */
body.studio-home [data-panel="3f"].active{
  align-content:start;
}
body.studio-home [data-panel="3f"] .floor-heading,
body.studio-home [data-panel="3f"] .gallery-controls{
  text-align:left !important;
}


/* v4.3.55 — 갤러리 0개 empty state 정렬 수정
   gallery-empty의 justify-content:center가 "NO ARTWORKS FOUND." 텍스트를
   가로 중앙에 배치함. 3F 패널에서는 좌측 정렬로 override. */
body.studio-home [data-panel="3f"] .gallery-empty{
  justify-content:flex-start;
  align-items:flex-start;
  min-height:60px;
  padding-top:4px;
}

/* v4.3.56 — <main class="studio-right"> 에 전역 main{margin:auto} 룰이 적용되어
   0-items 상태에서 content 크기(~404px)로 수축 후 grid column(971px) 안에서
   가운데 정렬되는 문제 수정.
   margin:0!important 로 auto margin 제거 → studio-right가 grid column 전체를 채움. */
body.studio-home .studio-right{
  margin:0!important;
  max-width:none!important;
}

/* ── 1F Lobby Dust (v4.3.63) ─────────────────────────────────── */
/* canvas를 body에 fixed로 붙여 컨테이너 이슈 없이 렌더 */
body.studio-home .lobby-dust{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:2;
}
.pb-divider{display:flex;align-items:center;justify-content:center;gap:14px;width:var(--divider-width,100%);margin:0 auto;opacity:var(--divider-opacity,.35)}
.pb-divider::before,.pb-divider::after{content:"";display:block;flex:1;border-top:var(--divider-thickness,1px) var(--divider-style,solid) currentColor}
.pb-divider[data-empty="true"]::before{flex:0 0 100%}
.pb-divider[data-empty="true"]::after{display:none}
.pb-divider-label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}

/* ============================================================
   MOBILE OPTIMIZATION — v4.5.2
   Scope: studio-home layout, touch targets, 480px/375px fixes
   ============================================================ */

/* ── 900px: layout base fixes ───────────────────────────── */
@media (max-width:900px) {

  /* 1. studio-right: 오른쪽 패딩 0이었던 것 복구 */
  body.studio-home .studio-right {
    padding-right:24px !important;
  }

  /* 2. studio-left: 모바일에서 nav를 먼저, 엔티티를 아래로 */
  body.studio-home .building-directory { order:-1; }

  /* 3. building-directory: 세로 리스트 → 가로 스크롤 pill 행 */
  body.studio-home .building-directory {
    display:flex !important;
    flex-direction:row-reverse !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
    touch-action:pan-y !important;
    justify-content:flex-end !important;
    gap:8px !important;
    padding-bottom:4px !important;
    scrollbar-width:none !important;
    -ms-overflow-style:none !important;
  }
  body.studio-home .building-directory::-webkit-scrollbar { display:none; }
  /* directory-line 모바일에서 숨김 */
  body.studio-home .directory-line { display:none !important; }

  /* 4. floor-link: pill 스타일로 변환 + 터치 타겟 44px 확보 */
  body.studio-home .floor-link {
    width:auto !important;
    display:inline-flex !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:6px !important;
    min-height:44px !important;
    padding:8px 16px !important;
    border:1px solid var(--studio-line, rgba(37,35,31,.15)) !important;
    border-radius:999px !important;
    background:rgba(239,234,225,.28) !important;
    transform:none !important;
    white-space:nowrap !important;
    flex-shrink:0 !important;
  }
  body.studio-home .floor-link.active {
    transform:none !important;
    background:rgba(239,234,225,.68) !important;
    border-color:rgba(91,70,52,.30) !important;
    color:var(--studio-ink) !important;
  }
  body.studio-home .floor-link strong {
    display:inline !important;
    font-size:12px !important;
  }
  body.studio-home .floor-link span {
    font-size:10px !important;
    font-weight:700 !important;
  }
  body.studio-home .directory-line { display:none !important; }

  /* 5. stage-directory: host-mode(4F)일 때만 pill 처리 */
  body.studio-home.host-mode .stage-directory {
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    gap:8px !important;
    padding-bottom:4px !important;
    scrollbar-width:none !important;
    margin-top:0 !important;      /* auto → 0: 아래로 밀림 방지 */
    width:100% !important;
    order:-1 !important;          /* entity 위로 */
  }
  body.studio-home.host-mode .studio-left {
    justify-content:flex-start !important;  /* space-between 해제 */
    padding-top:20px !important;
    padding-bottom:20px !important;
    overflow:visible !important;
  }
  /* min-height:260px가 마지막 cascade로 덮어씌워지는 것 해제 */
  body.studio-home.host-mode .studio-entity,
  body.studio-home.stage-transfer-active .studio-entity {
    min-height:0 !important;
  }
  body.studio-home.host-mode .living-mark {
    margin-bottom:18px !important;
  }
  body.studio-home.host-mode .entity-name {
    margin-bottom:10px !important;
  }
  body.studio-home.host-mode .stage-directory::-webkit-scrollbar { display:none; }
  body.studio-home.host-mode .stage-directory .floor-link,
  body.studio-home.host-mode .stage-directory .stage-side-link {
    display:inline-flex !important;  /* block → inline-flex */
    width:auto !important;           /* 100% → auto */
    flex-shrink:0 !important;
    align-items:center !important;
    min-height:44px !important;
    padding:8px 14px !important;
    border:1px solid var(--studio-line, rgba(37,35,31,.15)) !important;
    border-radius:999px !important;
    background:rgba(239,234,225,.28) !important;
    white-space:nowrap !important;
    transform:none !important;
  }
  body.studio-home.host-mode .stage-directory .stage-side-link span {
    display:inline !important;   /* block → inline */
    font-size:11px !important;
    font-weight:700 !important;
    letter-spacing:.04em !important;
  }
  body.studio-home.host-mode .stage-directory .stage-side-link strong {
    display:inline !important;   /* none → inline */
    font-size:12px !important;
    font-weight:500 !important;
    margin-left:5px !important;
  }
  body.studio-home.host-mode .stage-directory .stage-side-link.staff strong::after {
    content:'' !important;       /* 🔒 아이콘 숨김 */
  }

  /* 6. gallery filter 터치 타겟 */
  body.studio-home .gallery-filter button {
    min-height:44px !important;
    padding-top:10px !important;
    padding-bottom:10px !important;
  }

  /* 7. art-popup 닫기 버튼 터치 타겟 */
  .art-popup-close {
    min-width:44px !important;
    min-height:44px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    top:8px !important;
    right:8px !important;
    padding:0 !important;
    font-size:24px !important;
    background:rgba(0,0,0,.28) !important;
    border-radius:50% !important;
    width:44px !important;
    height:44px !important;
  }

  /* 8. room-plate: 모바일 크기 조정 */
  body.studio-home .room-plate {
    min-width:130px !important;
  }
}

/* ── 480px: 소형 폰 레이아웃 ────────────────────────────── */
@media (max-width:480px) {

  /* studio-left 패딩 줄이기 */
  body.studio-home .studio-left {
    padding:20px 16px !important;
    gap:20px !important;
  }

  /* studio-right 패딩 줄이기 */
  body.studio-home .studio-right {
    padding-left:16px !important;
    padding-right:16px !important;
    padding-bottom:60px !important;
  }

  /* 헤딩 h1 축소 */
  body.studio-home .floor-heading h1 {
    font-size:40px !important;
    letter-spacing:-.03em !important;
  }

  /* Lobby h2 (MUSULTANG) 축소 */
  body.studio-home .lobby-intro h2 {
    font-size:36px !important;
  }

  /* lobby-block min-height 해제 */
  body.studio-home .lobby-block {
    min-height:unset !important;
  }

  /* project room 제목 */
  body.studio-home .project-room h2 {
    font-size:clamp(32px,11vw,56px) !important;
  }

  /* room summary */
  body.studio-home .room-summary {
    font-size:16px !important;
    margin:24px 0 !important;
  }

  /* stage hero 제목 */
  body.studio-home .stage-hero h1 {
    font-size:46px !important;
  }

  /* stage card 제목 */
  body.studio-home .stage-card h2 {
    font-size:36px !important;
  }
  body.studio-home .stage-card strong {
    font-size:32px !important;
  }

  /* stage-menu: 버튼 min-height */
  body.studio-home .stage-menu-item {
    min-height:76px !important;
    padding:14px 14px 15px !important;
  }

  /* room-plate 더 좁게 */
  body.studio-home .room-plate {
    min-width:110px !important;
    padding:10px 10px 12px !important;
  }

  /* art-popup: 이미지 세로 여유 확보 */
  .art-popup-img {
    max-height:68vh !important;
  }
  .art-popup-layer {
    padding:12px !important;
  }

  /* 엔티티 대화 글씨 크기 */
  body.studio-home .entity-dialogue {
    font-size:13px !important;
    min-height:unset !important;
  }

  /* 층 버튼 더 컴팩트 */
  body.studio-home .floor-link {
    padding:6px 12px !important;
    gap:4px !important;
  }
  body.studio-home .floor-link strong {
    font-size:11px !important;
  }

  /* stage-tags 버튼 터치 타겟 */
  body.studio-home .stage-tags button {
    min-height:44px !important;
    padding:10px 16px !important;
  }
}

/* ── 375px: 최소 폰 크기 보정 ───────────────────────────── */
@media (max-width:375px) {

  body.studio-home .floor-heading h1 {
    font-size:34px !important;
  }

  body.studio-home .lobby-intro h2 {
    font-size:30px !important;
  }

  body.studio-home .stage-hero h1 {
    font-size:38px !important;
  }

  body.studio-home .studio-right {
    padding-left:14px !important;
    padding-right:14px !important;
  }

  body.studio-home .studio-left {
    padding:16px 14px !important;
  }

  .art-popup-img {
    max-height:60vh !important;
  }
}


/* ── Rooftop / Wall Notes — 모바일 최적화 ─────────────── */
@media (max-width:900px) {
  /* 루프탑 패널 위아래 여백 축소 */
  [data-panel="rooftop"] {
    padding-top:16px !important;
    padding-bottom:32px !important;
  }

  /* wall-desc (설명 텍스트) 여백 축소 */
  #wallDescription {
    margin-bottom:16px !important;
  }
  #wallDescription p {
    margin:4px 0 !important;
    font-size:13px !important;
  }

  /* 3컬럼 유지하되 gap 줄이기 */
  .wall-grid {
    grid-template-columns:repeat(3, 1fr) !important;
    gap:10px 10px !important;
  }

  /* 카드 패딩/글씨 축소 */
  .wall-note {
    padding:2px 8px 6px !important;
    min-height:80px !important;
  }
  .wall-note-date {
    font-size:9px !important;
    margin-bottom:4px !important;
    letter-spacing:.02em !important;
  }
  .wall-note-content {
    font-size:11px !important;
    line-height:1.5 !important;
  }
  .wall-note--host .wall-note-content  { font-size:12px !important; }
  .wall-note--studio .wall-note-content { font-size:12px !important; }
  .wall-note--noise .wall-note-content  { font-size:11px !important; }

  /* 압핀 크기 조정 */
  .wall-note::before {
    width:14px !important;
    height:9px !important;
    top:-5px !important;
  }

  /* 회전 애니메이션 모바일에선 제거 (레이아웃 안정) */
  .wall-note--rotL,
  .wall-note--rotR,
  .wall-note--rotLL,
  .wall-note--rotRR {
    transform:none !important;
  }
}

@media (max-width:480px) {
  [data-panel="rooftop"] {
    padding-left:12px !important;
    padding-right:12px !important;
  }
  .wall-grid {
    gap:8px 8px !important;
  }
}

/* 4F 커튼 빛샘 — 모바일에선 숨김 (nav pill에 겹침) */
@media (max-width:900px) {
  body.studio-home[data-floor="4f"] .studio-left::before {
    display:none !important;
  }
}

/* studio-light 그라데이션 — 모바일 nav 영역 차단
   studio-left 배경이 반투명이라 fixed studio-light overlay가
   모바일 상단 nav bar에 비쳐서 gradient처럼 보임 → 배경 불투명화로 차단 */
@media (max-width:900px) {
  body.studio-home .studio-left {
    background: rgba(239,234,225,0.94) !important;
  }
  body.studio-home.host-mode .studio-left {
    background: rgba(241,235,225,0.94) !important;
  }
}

/* studio-light — 모바일에서 숨김
   backdrop-filter:blur(8px) + semi-transparent bg 조합이
   studio-light 그라데이션을 nav bar에 비추는 근본 원인 */
@media (max-width:900px) {
  .studio-light {
    display: none !important;
  }
  body.studio-home .studio-left {
    backdrop-filter: none !important;
    background: rgba(239,234,225,0.97) !important;
  }
  body.studio-home.host-mode .studio-left {
    background: rgba(241,235,225,0.97) !important;
  }
}

/* studio-light/grain 모바일 완전 차단 — 높은 특이도로 override */
@media (max-width:900px) {
  body.studio-home .studio-light,
  body.studio-home .studio-grain {
    display: none !important;
    opacity: 0 !important;
  }
  body.studio-home .studio-left {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(239,234,225,0.97) !important;
  }
  body.studio-home.host-mode .studio-left {
    background: rgba(241,235,225,0.97) !important;
  }
}


/* 4F(host-mode) 모바일: building-directory 다시 숨김
   body.studio-home .building-directory { display:flex !important } 에 의해
   host-mode display:none이 무력화되는 문제 fix */
@media (max-width:900px) {
  body.studio-home.host-mode .building-directory {
    display: none !important;
  }
}

/* 4F 모바일: stage-return(▼ Studio) pill 변환
   desktop rule specificity(0,3,1)가 floor-link pill rule(0,2,1)을 이기는 문제 →
   stage-directory 안으로 범위를 좁혀서(0,4,1) 확실히 override */
@media (max-width:900px) {
  body.studio-home.host-mode .stage-directory .stage-return {
    display: inline-flex !important;
    width: auto !important;
    flex-shrink: 0 !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: 44px !important;
    padding: 8px 14px !important;
    border: 1px solid var(--studio-line) !important;
    border-radius: 999px !important;
    background: rgba(239,234,225,.28) !important;
    white-space: nowrap !important;
    margin: 0 !important;
    grid-template-columns: unset !important;
    color: var(--studio-muted) !important;
  }
  body.studio-home.host-mode .stage-directory .stage-return span {
    display: inline !important;
    font-size: 12px !important;
  }
  body.studio-home.host-mode .stage-directory .stage-return strong {
    display: inline !important;
    font-size: 12px !important;
  }
}

/* 04 Backstage LOCKED 텍스트 — 모바일에서 숨김 */
@media (max-width:900px) {
  body.studio-home .stage-side-link.staff span::after {
    content: '' !important;
    display: none !important;
  }
}