/* Two studios, one welcoming doorway. Native links work without JavaScript. */
.brand-invite{--invite-ink:#f3edda;--invite-line:#dccba078;--invite-glow:#b4bf8340;position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:8px 12px 8px 10px;border:1px solid var(--invite-line);border-radius:7px;background:linear-gradient(120deg,#294936,#162e23);color:var(--invite-ink);box-shadow:0 3px 18px #111a1615,inset 0 1px 0 #ffffff14;font-family:"Noto Sans KR","Malgun Gothic",sans-serif;text-decoration:none;white-space:nowrap;overflow:hidden;transform:translateY(0);transition:transform .25s,box-shadow .25s,border-color .25s,background .25s;flex:none}
.brand-invite::before{content:"";position:absolute;inset:-30% auto -30% -65%;width:45%;z-index:-1;background:linear-gradient(90deg,transparent,#f5e5b343,transparent);transform:skewX(-22deg) translateX(-150%);animation:brand-invite-light 7s ease-in-out 1.2s infinite;pointer-events:none}
.brand-invite::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 20% 0%,#d9e6ad25,transparent 65%);pointer-events:none}
.brand-invite span{border:0;line-height:1.35}
.brand-invite__icon{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:#ffffff0c;color:var(--invite-ink);transition:transform .4s;flex:none}
.brand-invite__icon svg{display:block;width:27px;height:27px;overflow:visible}
.brand-invite__copy{display:flex;flex-direction:column;gap:3px;text-align:left}
.brand-invite__copy strong{font-family:"Noto Serif KR","Batang",serif;font-size:16px;font-weight:500;letter-spacing:.025em;line-height:1.3;color:var(--invite-ink)}
.brand-invite__copy small{font-size:8px;font-weight:400;letter-spacing:.025em;line-height:1.4;color:var(--invite-ink);opacity:.78}
.brand-invite__arrow{display:grid;place-items:center;width:23px;height:23px;border:1px solid var(--invite-line)!important;border-radius:50%;font-size:14px;font-weight:400;color:var(--invite-ink);margin-left:3px;transition:transform .25s,background .25s;flex:none}
.brand-invite--brow{--invite-ink:#493d2e;--invite-line:#cbb58c;--invite-glow:#d6c29c38;background:linear-gradient(120deg,#f4ead6,#e1d0b0);box-shadow:0 3px 18px #111a1620,inset 0 1px 0 #fffffff2}
.brand-invite--brow .brand-invite__icon{background:#7c5e2810}
.brand-invite--brow::before{background:linear-gradient(90deg,transparent,#fffdfdcc,transparent)}
.brand-invite--brow::after{background:radial-gradient(ellipse at 20% 0%,#fff8eeb0,transparent 65%)}
.brand-invite:hover,.brand-invite:focus-visible{transform:translateY(-2px);box-shadow:0 5px 24px var(--invite-glow),inset 0 1px 0 #ffffff24;border-color:#d8c49a;text-decoration:none}
.brand-invite:hover .brand-invite__icon,.brand-invite:focus-visible .brand-invite__icon{transform:rotate(-9deg)}
.brand-invite:hover .brand-invite__arrow,.brand-invite:focus-visible .brand-invite__arrow{transform:translate(2px,-2px);background:#ffffff12}
.brand-invite:focus-visible{outline:2px solid #c9b380;outline-offset:4px}
.brand-invite:active{transform:translateY(0);box-shadow:inset 0 2px 7px #14271e25}
.nm-nav.brand-nav .brand-switch .brand-invite,.nm-nav.brand-nav:not(.is-scrolled) .brand-switch .brand-invite{color:var(--invite-ink);font-size:16px;text-decoration:none}
body:has(.cinematic-hero) .doopi-header .brand-switch .brand-invite,body:has(.cinematic-hero) .doopi-header:not(.hero-away) .brand-switch .brand-invite{color:var(--invite-ink);font-size:16px;border-bottom:1px solid var(--invite-line)}
.doopi-header .brand-switch .brand-invite span{border-bottom:0}
.doopi-header .brand-switch .brand-invite__arrow{border:1px solid var(--invite-line)}
.brand-nav .brand-switch{gap:14px}
.doopi-header .brand-switch{gap:10px}
.doopi-header .brand-switch__current{font-size:12px}
.nm-nav.brand-nav.is-scrolled .brand-switch .brand-invite:focus-visible,body:has(.cinematic-hero) .doopi-header.hero-away .brand-switch .brand-invite:focus-visible{outline-color:#40573f}
@keyframes brand-invite-light{0%,58%{transform:skewX(-22deg) translateX(-150%);opacity:0}62%{opacity:1}80%,100%{transform:skewX(-22deg) translateX(620%);opacity:0}}
body:has(.atelier.is-paused) .brand-invite::before,html.motion-paused .brand-invite::before{animation-play-state:paused}
@media(max-width:1250px) and (min-width:768px){.brand-nav{gap:18px}.brand-nav .brand-switch{gap:10px}.brand-nav .nav-links{gap:17px}.brand-invite{gap:8px;padding-inline:9px}.brand-invite__copy strong{font-size:15px}.brand-invite__copy small{font-size:7px}}
@media(max-width:767px){
  .brand-invite{gap:7px;min-height:44px;padding:7px 9px;border-radius:6px}
  .brand-invite__icon{width:24px;height:24px}
  .brand-invite__icon svg{width:22px;height:22px}
  .brand-invite__copy strong{font-size:14px;letter-spacing:0}
  .brand-invite__copy small{display:none}
  .brand-invite__arrow{width:20px;height:20px;font-size:12px;margin-left:0}
  .brand-nav .brand-switch{gap:10px}
  .nav.nm-nav.brand-nav .logo>span{font-size:20px}
  .brand-nav .brand-switch__divider{display:none}
  .brand-nav .nav-book{font-size:10px;gap:6px;padding-inline:0;white-space:nowrap}
  .brand-nav .nav-menu-btn{flex:none}
  .doopi-header .brand-switch .brand-divider,.doopi-header .brand-switch__current{display:none}
  .doopi-header .brand-switch .brand-invite{min-height:38px;padding:5px 9px;gap:8px}
  .doopi-header .brand-invite__copy strong{font-size:13px}
}
@media(max-width:760px){.doopi-header{padding-block:12px}.doopi-header .header-actions{gap:4px}}
@media(max-width:389px){
  .brand-nav .brand-switch{gap:7px}
  .nav.nm-nav.brand-nav .logo>span{font-size:18px}
  .brand-invite{gap:5px;padding-inline:7px;min-height:42px}
  .brand-invite__icon{width:20px;height:20px}.brand-invite__icon svg{width:19px;height:19px}
  .brand-invite__copy strong{font-size:12px}
  .brand-invite__arrow{width:17px;height:17px;font-size:11px}
  .brand-nav .nav-book{font-size:9px;gap:4px}
  .brand-nav .nav-book>span{display:none}
  .brand-nav .nav-menu-btn{width:30px}
}
@media(prefers-reduced-motion:reduce){.brand-invite,.brand-invite *{transition:none!important}.brand-invite::before{animation:none;display:none}.brand-invite:hover,.brand-invite:focus-visible,.brand-invite:hover .brand-invite__icon,.brand-invite:focus-visible .brand-invite__icon,.brand-invite:hover .brand-invite__arrow,.brand-invite:focus-visible .brand-invite__arrow{transform:none}}
