.living_wrap {
  --paper: #ece6da; --ink: #1c1915; --ink2: rgba(28, 25, 21, 0.66); --ink3: rgba(28, 25, 21, 0.42); --rule: rgba(28, 25, 21, 0.16); --accent: #b0472b;
  --m: clamp(16px, 2.2vw, 36px); --top: clamp(78px, 11vh, 112px);
  --sans: 'EL Sans', 'Archivo', system-ui, sans-serif; --serif: 'EL Serif', 'Instrument Serif', Georgia, serif; --mono: 'EL Mono', 'JetBrains Mono', ui-monospace, monospace;
  position: relative; z-index: 1; color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased;
}
.living_wrap * { box-sizing: border-box; }
.living_wrap p, .living_wrap h2, .living_wrap figure, .living_wrap ol { margin: 0; padding: 0; font: inherit; }
.living_wrap .living_contain { position: relative; }
.living_wrap .living_part { position: relative; pointer-events: none; }
.living_wrap .living_part.is-world { height: 320vh; }
.living_wrap .living_part[data-part="night"] { height: 300vh; }
.living_wrap .living_pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.living_wrap .living_pin > * { pointer-events: auto; }
.living_wrap .living_tag { font: 400 10.5px/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink2); }
.living_wrap .living_h2 { font: 300 clamp(48px, min(6.2vw, 11vh), 120px)/0.88 var(--sans); font-variation-settings: 'wdth' 92; letter-spacing: -0.05em; margin-top: 14px; }
.living_wrap .living_p { font: 400 clamp(15px, 1.05vw, 17px)/1.5 var(--sans); color: var(--ink2); max-width: 26em; margin-top: 20px; }

/* amenities */
.living_wrap .living_col { position: absolute; top: var(--top); left: var(--m); width: min(34vw, 500px); padding: 22px 26px 26px; background: color-mix(in srgb, var(--paper) 84%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.05); backdrop-filter: blur(14px) saturate(1.05); border: 1px solid var(--rule); }
.living_wrap.is-night .living_col, .living_wrap.is-night .living_clock { background: rgba(14, 16, 20, 0.72); border-color: rgba(239, 230, 214, 0.16); }
.living_wrap .living_strip { position: absolute; left: var(--m); bottom: calc(var(--m) * 3); width: 190px; height: min(46vh, 420px); color: var(--ink); padding: 14px 12px; background: color-mix(in srgb, var(--paper) 84%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.05); backdrop-filter: blur(14px) saturate(1.05); border: 1px solid var(--rule); }
.living_wrap .living_strip svg { width: 100%; height: 100%; display: block; overflow: visible; }
.living_wrap .living_strip button { position: absolute; left: 0; display: flex; align-items: center; gap: 8px; background: none; border: 0; padding: 4px 0; cursor: pointer; font: 400 10.5px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink2); white-space: nowrap; transform: translateY(-50%); }
.living_wrap .living_strip button::before { content: ''; width: 9px; height: 9px; border: 1px solid currentColor; border-radius: 50%; background: var(--paper); transition: background 0.3s; }
.living_wrap .living_strip button.is-on { color: var(--accent); }
.living_wrap .living_strip button.is-on::before { background: var(--accent); border-color: var(--accent); }
.living_wrap .living_card { position: absolute; right: var(--m); bottom: calc(var(--m) * 3); width: min(30vw, 440px); padding: 12px 12px 16px; background: color-mix(in srgb, var(--paper) 84%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.05); backdrop-filter: blur(14px) saturate(1.05); border: 1px solid var(--rule); }
.living_wrap .living_card_img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #d9d1c3; }
.living_wrap .living_card_img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.7s, transform 1.4s cubic-bezier(.2, .7, .2, 1); }
.living_wrap .living_card_img img.is-off { opacity: 0; transform: scale(1.06); }
.living_wrap .living_card_cap { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin-top: 14px; }
.living_wrap .living_card_lv { font: 400 11px/1.3 var(--mono); letter-spacing: 0.06em; color: var(--accent); grid-row: 1 / span 2; }
.living_wrap .living_card_name { font: 300 clamp(22px, 1.9vw, 32px)/1 var(--sans); letter-spacing: -0.03em; }
.living_wrap .living_card_text { font: 400 13.5px/1.5 var(--sans); color: var(--ink2); }

/* night */
.living_wrap .living_clock { position: absolute; right: var(--m); bottom: calc(var(--m) * 3); text-align: right; color: var(--ink); cursor: ew-resize; touch-action: pan-y; padding: 20px 24px 18px; background: color-mix(in srgb, var(--paper) 84%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.05); backdrop-filter: blur(14px) saturate(1.05); border: 1px solid var(--rule); }
.living_wrap .living_clock_t { font: 250 clamp(80px, min(12vw, 22vh), 230px)/0.8 var(--sans); font-variation-settings: 'wdth' 80; letter-spacing: -0.06em; font-variant-numeric: tabular-nums; }
.living_wrap .living_clock_s { font: 400 10.5px/1.5 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink2); margin-top: 14px; }
.living_wrap.is-night { --ink: #efe6d6; --ink2: rgba(239, 230, 214, 0.72); --ink3: rgba(239, 230, 214, 0.45); --rule: rgba(239, 230, 214, 0.2); }

@media (max-width: 767px) {
  .living_wrap { --top: 84px; }
  .living_wrap .living_h2 { font-size: clamp(44px, 13vw, 64px); }
  .living_wrap .living_col { width: auto; right: var(--m); padding: 16px 18px 18px; }
  .living_wrap .living_strip { height: 30vh; bottom: auto; top: 38vh; width: 228px; }
  .living_wrap .living_strip button { left: 50% !important; }
  .living_wrap .living_card { left: var(--m); right: var(--m); width: auto; bottom: var(--m); display: grid; grid-template-columns: 38% 1fr; gap: 12px; }
  .living_wrap .living_card_cap { margin-top: 0; grid-template-columns: 1fr; }
  .living_wrap .living_card_lv { grid-row: auto; }
  .living_wrap .living_clock_t { font-size: 84px; }
}

@media (prefers-reduced-motion: reduce) {
  .living_wrap *, .living_wrap *::before, .living_wrap *::after { animation: none !important; transition-duration: 0.01ms !important; }
}