/* OLE-VIP V5: poster image + fixed expand-on-hover/tap contact actions */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body.v4-body{margin:0;background:#020915;color:#fff;font-family:system-ui,-apple-system,"Noto Sans KR",sans-serif;min-height:100vh}
.v4-poster{width:min(100%,1024px);margin:0 auto;line-height:0;box-shadow:0 0 48px #0008}
.v4-art{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
.ole-float{--diam:56px;position:fixed;right:max(14px,env(safe-area-inset-right));bottom:calc(22px + env(safe-area-inset-bottom));z-index:50;display:flex;flex-direction:column;align-items:flex-end;gap:11px;pointer-events:none}
.ole-action{position:relative;display:flex;flex-direction:row-reverse;align-items:center;justify-content:flex-start;width:var(--diam);height:var(--diam);max-width:calc(100vw - 22px);border-radius:999px;overflow:hidden;padding:0;border:1px solid #ffffff6b;box-shadow:0 6px 22px #000b, inset 0 1px 2px #ffffff80;color:#fff;text-decoration:none;white-space:nowrap;cursor:pointer;pointer-events:auto;transition:width .24s cubic-bezier(.2,.8,.2,1),transform .18s ease,box-shadow .18s ease;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.ole-action:focus-visible{outline:3px solid #fff;outline-offset:3px}
.ole-action:hover,.ole-action:focus-visible,.ole-action.is-open{width:230px;box-shadow:0 8px 30px #000d,0 0 16px #45d8ff50;transform:translateX(-2px)}
.ole-icon{flex:none;display:flex;justify-content:center;align-items:center;width:calc(var(--diam) - 2px);height:calc(var(--diam) - 2px);margin:0;border-radius:50%;font-size:28px;font-weight:1000;line-height:1;letter-spacing:-2px}
.ole-icon svg{width:34px;height:34px;display:block}
.ole-label{display:block;flex:1;padding:0 4px 0 17px;font-size:14px;font-weight:850;letter-spacing:-.4px;line-height:1.2;opacity:0;transform:translateX(8px);transition:opacity .12s ease,transform .18s ease;text-align:center}
.ole-action:hover .ole-label,.ole-action:focus-visible .ole-label,.ole-action.is-open .ole-label{opacity:1;transform:translateX(0)}
.ole-join{background:linear-gradient(115deg,#543300 0%,#b17a0c 40%,#e4b844 100%);border-color:#ffe17a;color:#fff}
.ole-j{color:#1b1c26;font-family:Arial,sans-serif;font-style:italic;font-size:29px;letter-spacing:-2px;background:linear-gradient(145deg,#ffec97,#ffaf19);text-shadow:0 1px #fff9}
.ole-kakao{background:#FEE500;color:#391B1B;border-color:#fff29d}
.ole-kakao .ole-label{color:#391B1B}
.ole-telegram{background:linear-gradient(145deg,#41c3f5,#1285c2);border-color:#b3ecff}
.ole-unset{opacity:.78}
.v4-popup-overlay{position:fixed;inset:0;z-index:100;background:#000d;display:grid;place-items:center;padding:20px}.v4-popup-overlay[hidden]{display:none}.v4-popup-dialog{position:relative;max-width:420px;width:100%;background:#0a1b38;border:1px solid #4ac4ff;border-radius:10px}.v4-popup-dialog img{display:block;width:100%;max-height:72vh;object-fit:contain}.v4-popup-x{position:absolute;right:-11px;top:-12px;width:38px;height:38px;border-radius:50%;font-size:26px;border:0;background:#fff;cursor:pointer}.v4-popup-actions{display:flex}.v4-popup-actions button{flex:1;background:#123e68;color:white;border:0;padding:12px;cursor:pointer}
@media(max-width:640px){.v4-poster{box-shadow:none}.ole-float{--diam:50px;right:max(10px,env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom));gap:9px}.ole-icon svg{width:31px;height:31px}.ole-label{font-size:13px}.ole-action:hover:not(:focus-visible):not(.is-open){width:var(--diam);transform:none}.ole-action.is-open,.ole-action:focus-visible{width:min(218px,calc(100vw - 24px))}.ole-action.is-open .ole-label{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.ole-action,.ole-label{transition:none}}

/* V6.1: invisible click area ON the CTA painted in the full-length poster. No duplicate text/button. */
.v4-poster{position:relative}
.v6-bottom-join{
 position:absolute;z-index:4;display:block;
 left:var(--cta-x,12%);width:var(--cta-w,76%);top:var(--cta-y,90.45%);height:var(--cta-h,4.65%);
 padding:0;margin:0;background:transparent!important;border:0!important;
 color:transparent!important;font-size:0!important;line-height:0!important;
 box-shadow:none!important;outline:none;border-radius:30px;
 cursor:pointer;touch-action:manipulation;text-decoration:none!important;
}
.v6-bottom-join:focus-visible{outline:3px solid #ffe37a!important;outline-offset:1px}
/* OLE-VIP popup corner fix. Append to END of public_html/assets/v4.css */
/* Both the V4/V6 poster mode and the classic landing mode are supported. */
.v4-popup-dialog, .popup-dialog {
  position: relative;
  box-sizing: border-box;
  max-width: min(420px, calc(100vw - 24px));
  width: 100%;
  border-radius: 16px !important;
  overflow: hidden !important;
  isolation: isolate;
  background: #08172f;
  border: 1px solid rgba(83,199,255,.8);
}
.v4-popup-dialog > a, .popup-dialog > a {display: block; line-height: 0;}
.v4-popup-dialog img, .popup-dialog img {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  max-height: 72dvh;
  object-fit: contain;
  vertical-align: top;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
}
.v4-popup-actions, .popup-actions {
  display: flex;
  width: 100%;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.12);
}
.v4-popup-actions button, .popup-actions button {min-width:0;flex:1 1 0;border-radius:0;}
.v4-popup-x, .popup-close {z-index: 3;}
@media(max-width:480px){
  .v4-popup-overlay,.popup-overlay {padding:12px;}
  .v4-popup-dialog,.popup-dialog{border-radius:14px !important;}
}
/* OLE-VIP popup square corner override (V4-V6).
   Append to the very END of /public_html/assets/v4.css.
   Overrides previously installed rounded-corner popup fix. */
.v4-popup-dialog,
.popup-dialog {
  border-radius: 0 !important;
  overflow: visible !important; /* keep X close control fully visible */
  box-sizing: border-box;
}
.v4-popup-dialog > a,
.popup-dialog > a {
  display: block;
  line-height: 0;
  border-radius: 0 !important;
}
.v4-popup-dialog img,
.popup-dialog img {
  display: block;
  border-radius: 0 !important;
  width: 100%;
  height: auto;
  vertical-align: top;
}
.v4-popup-actions,
.popup-actions,
.v4-popup-actions button,
.popup-actions button {
  border-radius: 0 !important;
}
@media (max-width: 480px) {
  .v4-popup-dialog,
  .popup-dialog {
    border-radius: 0 !important;
  }
}