#allnight-version-home{--av-blue:#315dea;--av-ink:#192432;--av-muted:#657181;--av-line:#e4e9f1;color-scheme:light;background:#fff;color:var(--av-ink);font:15px/1.65 Pretendard,'Malgun Gothic',sans-serif;-webkit-font-smoothing:antialiased;overflow-wrap:break-word;width:100%} #allnight-version-home *,#allnight-version-home *::before,#allnight-version-home *::after{box-sizing:border-box} #allnight-version-home [hidden]{display:none!important} #allnight-version-home .av-header{min-height:64px;padding:0 5.2%;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--av-line)} #allnight-version-home .av-logo{display:flex;align-items:center;border:0;background:transparent;padding:0;cursor:pointer} #allnight-version-home .av-logo img{width:169px;height:auto;display:block} #allnight-version-home .av-nav{display:flex;align-items:center;gap:24px} #allnight-version-home .av-nav button{font:500 12px/1.6 Pretendard,'Malgun Gothic',sans-serif;color:#526071;background:transparent;border:0;padding:10px 0;cursor:pointer} #allnight-version-home .av-nav .av-contact{border:1px solid var(--av-line);border-radius:7px;padding:8px 15px;min-height:38px;color:var(--av-ink)} #allnight-version-home .av-shell{padding-inline:5.2%} #allnight-version-home .av-hero{display:grid;grid-template-columns:1fr 1.08fr;gap:36px;align-items:center;padding-block:57px} #allnight-version-home .av-hero h1{font-size:clamp(34px,4.5vw,46px);line-height:1.23;font-weight:700;letter-spacing:-2px;margin:20px 0;word-break:keep-all} #allnight-version-home .av-hero h1 span{color:var(--av-blue)} #allnight-version-home .av-eyebrow{font-size:11px;letter-spacing:1.5px;font-weight:600;color:var(--av-blue)} #allnight-version-home .av-copy{margin:0;font-size:14px;line-height:1.85;color:var(--av-muted);word-break:keep-all} #allnight-version-home .av-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:26px} #allnight-version-home .av-action{font:600 12px/1.6 Pretendard,'Malgun Gothic',sans-serif;display:inline-flex;align-items:center;justify-content:center;gap:15px;min-height:44px;padding:11px 16px;border:1px solid var(--av-line);background:#fff;color:var(--av-ink);border-radius:7px;cursor:pointer} #allnight-version-home .av-primary{background:var(--av-blue);color:#fff;border-color:var(--av-blue)} #allnight-version-home .av-release{font-size:11px;color:var(--av-muted);margin:19px 0 0} #allnight-version-home .av-showcase{margin:0;background:#edf1fc;border-radius:15px;padding:20px 18px 15px;min-width:0} #allnight-version-home .av-showcase-label{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:11px;font-weight:500;color:#506393;margin:0 2px 17px;letter-spacing:.7px} #allnight-version-home .av-showcase img{display:block;width:100%;height:auto;border-radius:8px;box-shadow:0 16px 26px -17px #21385388} #allnight-version-home .av-showcase figcaption{font-size:11px;color:#546487;display:flex;justify-content:space-between;gap:10px;margin:15px 2px 0} #allnight-version-home .av-versions{padding:34px 0 46px;border-top:1px solid var(--av-line);scroll-margin-top:20px} #allnight-version-home .av-section-title{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:22px} #allnight-version-home .av-section-title h2{font-size:25px;line-height:1.4;letter-spacing:-.9px;font-weight:650;margin:7px 0 0} #allnight-version-home .av-section-title>p{font-size:12px;color:var(--av-muted);margin:0} #allnight-version-home .av-version-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} #allnight-version-home .av-version-grid.av-single{grid-template-columns:minmax(0,1fr);max-width:540px} #allnight-version-home .av-version{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:25px 23px 20px;border:1px solid var(--av-line);border-radius:11px;background:#f8f9fc} #allnight-version-home .av-version.av-sale{background:#f1f5ff;border-color:#b6c8ff} #allnight-version-home .av-version-top{display:flex;justify-content:space-between;align-items:center;gap:9px;width:100%;margin-bottom:12px} #allnight-version-home .av-product-name{font-size:11px;font-weight:600;color:#5d6c81;letter-spacing:.8px} #allnight-version-home .av-status{font-size:11px;background:#e9edf3;color:#59687b;border-radius:4px;padding:3px 8px;white-space:nowrap} #allnight-version-home .av-sale .av-status{background:#e0e9ff;color:#2c52be} #allnight-version-home .av-version h3{margin:0 0 10px;font-size:43px;line-height:1.25;font-weight:600;letter-spacing:-1.7px} #allnight-version-home .av-sale h3{color:var(--av-ink)} #allnight-version-home .av-version>p{font-size:12px;line-height:1.8;color:var(--av-muted);margin:0 0 24px;word-break:keep-all} #allnight-version-home .av-version-bottom{margin-top:auto;padding-top:15px;border-top:1px solid var(--av-line);width:100%;font-size:11px;color:var(--av-muted);min-height:47px;display:flex;align-items:center} #allnight-version-home .av-sale .av-version-bottom{border-color:#d5dff8;padding-top:0;border-top:0} #allnight-version-home .av-sale .av-action{width:100%} #allnight-version-home .av-home-footer{padding:23px 5.2%;border-top:1px solid var(--av-line);display:flex;justify-content:space-between;gap:16px;color:var(--av-muted);font-size:11px} #allnight-version-home .av-home-footer strong{font-weight:600;letter-spacing:.7px;color:#35465c} #allnight-version-home .av-screen-title{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} @media(max-width:760px){#allnight-version-home .av-hero{grid-template-columns:1fr;gap:29px;padding-block:39px}#allnight-version-home .av-hero h1{font-size:42px}#allnight-version-home .av-showcase{max-width:560px}#allnight-version-home .av-nav{gap:14px}#allnight-version-home .av-nav .av-nav-detail{display:none}#allnight-version-home .av-version{padding:21px 17px 17px}#allnight-version-home .av-version-top{align-items:flex-start;flex-direction:column;gap:8px}#allnight-version-home .av-version h3{font-size:37px}#allnight-version-home .av-section-title{align-items:flex-start;flex-direction:column;gap:10px}} @media(max-width:580px){#allnight-version-home .av-shell{padding-inline:6%}#allnight-version-home .av-header{padding-inline:6%;min-height:58px;gap:10px}#allnight-version-home .av-logo img{width:142px}#allnight-version-home .av-nav .av-nav-products{display:none}#allnight-version-home .av-nav{gap:0}#allnight-version-home .av-nav .av-contact{padding:8px 12px}#allnight-version-home .av-hero h1{font-size:35px;letter-spacing:-1.6px}#allnight-version-home .av-version-grid{grid-template-columns:1fr}#allnight-version-home .av-version-top{align-items:center;flex-direction:row}#allnight-version-home .av-version{padding:23px}#allnight-version-home .av-version h3{font-size:40px}#allnight-version-home .av-version>p{margin-bottom:18px}#allnight-version-home .av-home-footer{padding-inline:6%;flex-direction:column;gap:7px}} @media(pointer:coarse){#allnight-version-home .av-nav button,#allnight-version-home .av-logo,} #allnight-blue-detail{--ab-blue:#315dea;--ab-ink:#192432;--ab-muted:#657181;--ab-line:#e4e9f1;--ab-soft:#f5f7fb;--ab-space:1;--ab-radius:12px;background:#fff;color:var(--ab-ink);color-scheme:light;font:15px/1.65 Pretendard,'Malgun Gothic',sans-serif;-webkit-font-smoothing:antialiased;overflow-wrap:break-word;width:100%} #allnight-blue-detail *,#allnight-blue-detail *::before,#allnight-blue-detail *::after{box-sizing:border-box} #allnight-blue-detail h1,#allnight-blue-detail h2,#allnight-blue-detail h3,#allnight-blue-detail p,#allnight-blue-detail figure{margin:0} #allnight-blue-detail a{color:inherit;text-decoration:none} #allnight-blue-detail button{font:inherit;cursor:pointer} #allnight-blue-detail .ab-shell{padding-inline:5.2%} #allnight-blue-detail .ab-header{min-height:78px;display:flex;justify-content:space-between;align-items:center;gap:24px;border-bottom:1px solid var(--ab-line)} #allnight-blue-detail .ab-brand{display:flex;align-items:center;flex-shrink:0;background:transparent;padding:0} #allnight-blue-detail .ab-brand img{width:169px;height:auto;display:block} #allnight-blue-detail .ab-nav{display:flex;gap:25px;align-items:center;font-size:12px;color:#536070} #allnight-blue-detail .ab-contact{border:1px solid var(--ab-line);background:#fff;color:var(--ab-ink);border-radius:7px;padding:8px 15px;font-size:12px;min-height:38px} #allnight-blue-detail .ab-hero{padding-block:calc(60px * var(--ab-space));display:grid;grid-template-columns:1fr 1.08fr;gap:36px;align-items:center} #allnight-blue-detail .ab-kicker{font-size:11px;letter-spacing:1.5px;font-weight:600;color:var(--ab-blue);display:flex;align-items:center;gap:8px} #allnight-blue-detail .ab-kicker::before{content:'';width:6px;height:6px;background:currentColor;border-radius:50%} #allnight-blue-detail h1{font-size:clamp(34px,4.5vw,46px);line-height:1.23;letter-spacing:-2px;font-weight:700;margin:19px 0;word-break:keep-all} #allnight-blue-detail h1 span{color:var(--ab-blue)} #allnight-blue-detail .ab-lead{font-size:14px;line-height:1.85;color:var(--ab-muted);word-break:keep-all} #allnight-blue-detail .ab-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:26px} #allnight-blue-detail .ab-action{display:inline-flex;align-items:center;justify-content:center;gap:15px;min-height:44px;padding:11px 16px;border:1px solid var(--ab-line);border-radius:7px;background:#fff;color:var(--ab-ink);font-size:12px;font-weight:600} #allnight-blue-detail .ab-primary{background:var(--ab-blue);border-color:var(--ab-blue);color:#fff} #allnight-blue-detail .ab-release{display:flex;gap:12px;flex-wrap:wrap;font-size:11px;color:var(--ab-muted);margin-top:22px} #allnight-blue-detail .ab-release strong{color:var(--ab-ink);font-weight:600} #allnight-blue-detail .ab-product{background:#edf1fc;border-radius:15px;padding:20px 18px 15px;min-width:0} #allnight-blue-detail .ab-product-top{display:flex;justify-content:space-between;gap:12px;font-size:11px;letter-spacing:1px;color:#516699;margin:0 2px 17px} #allnight-blue-detail .ab-product img{width:100%;height:auto;display:block;border-radius:8px;box-shadow:0 16px 26px -17px #21385388} #allnight-blue-detail .ab-product figcaption{display:flex;justify-content:space-between;gap:12px;font-size:11px;color:#546487;margin:16px 2px 0} #allnight-blue-detail .ab-specs{display:grid;grid-template-columns:repeat(4,1fr);padding-block:25px;border-block:1px solid var(--ab-line)} #allnight-blue-detail .ab-spec{padding-inline:23px;border-right:1px solid var(--ab-line)} #allnight-blue-detail .ab-spec:first-child{padding-left:0} #allnight-blue-detail .ab-spec:last-child{border:0} #allnight-blue-detail .ab-spec strong{display:block;font-size:18px;letter-spacing:-.5px;font-weight:600} #allnight-blue-detail .ab-spec span{font-size:11px;color:var(--ab-muted)} #allnight-blue-detail .ab-intro{padding-top:calc(51px * var(--ab-space))} #allnight-blue-detail .ab-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:22px} #allnight-blue-detail .ab-eyebrow{font-size:11px;letter-spacing:1.5px;color:var(--ab-blue);font-weight:600;margin-bottom:9px} #allnight-blue-detail h2{font-size:28px;line-height:1.4;letter-spacing:-1px;font-weight:650;word-break:keep-all} #allnight-blue-detail .ab-heading>p{font-size:12px;line-height:1.8;color:var(--ab-muted);word-break:keep-all} #allnight-blue-detail .ab-jump{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-top:26px} #allnight-blue-detail .ab-jump a{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:51px;padding:12px 15px;background:var(--ab-soft);border:1px solid var(--ab-line);border-radius:7px;font-size:12px;font-weight:500} #allnight-blue-detail .ab-jump a:hover{border-color:var(--ab-blue);color:var(--ab-blue)} #allnight-blue-detail .ab-jump small{font-size:11px;color:var(--ab-muted);margin-left:5px} #allnight-blue-detail .ab-section{padding-top:calc(47px * var(--ab-space));scroll-margin-top:20px} #allnight-blue-detail .ab-section-head{display:flex;align-items:flex-start;gap:15px;margin-bottom:23px} #allnight-blue-detail .ab-section-no{font-size:12px;color:var(--ab-blue);padding-top:7px;font-weight:600} #allnight-blue-detail .ab-section h2{font-size:24px;letter-spacing:-.8px} #allnight-blue-detail .ab-section-head p{font-size:12px;color:var(--ab-muted);margin-top:6px;word-break:keep-all} #allnight-blue-detail .ab-section-count{margin-left:auto;flex-shrink:0;font-size:11px;color:var(--ab-muted);padding-top:8px} #allnight-blue-detail .ab-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} @media(max-width:1000px){#allnight-blue-detail .ab-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} #allnight-blue-detail .ab-feature{min-width:0;border:1px solid var(--ab-line);border-radius:var(--ab-radius);overflow:hidden;display:flex;flex-direction:column;background:#fff} #allnight-blue-detail .ab-media{padding:15px 15px 11px;background:#f0f3f8} #allnight-blue-detail .ab-media img{width:100%;height:auto;aspect-ratio:962/752;object-fit:contain;display:block;background:#161b23;border-radius:5px} #allnight-blue-detail .ab-media figcaption{display:flex;justify-content:space-between;gap:12px;margin-top:10px;color:#606d7f;font-size:11px} #allnight-blue-detail .ab-copy{padding:22px 23px 23px;display:flex;flex-direction:column;align-items:flex-start;flex:1;min-width:0} #allnight-blue-detail .ab-meta{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:6px 8px;width:100%;margin-bottom:12px} #allnight-blue-detail .ab-tag{font-size:11px;background:#eef3ff;color:#365abb;padding:3px 8px;border-radius:4px;font-weight:500} #allnight-blue-detail .ab-id{font-size:11px;letter-spacing:1px;color:#697789} #allnight-blue-detail h3{font-size:19px;line-height:1.45;letter-spacing:-.6px;font-weight:650;margin-bottom:8px;word-break:keep-all} #allnight-blue-detail .ab-copy>p{font-size:13px;line-height:1.85;color:#5e6c7d;word-break:keep-all} #allnight-blue-detail .ab-requirement{font-size:11px;line-height:1.7;color:#936112;background:#fff7e6;border-radius:4px;padding:5px 8px;margin-top:16px;word-break:keep-all} #allnight-blue-detail .ab-requirement[data-kind='note']{color:#576578;background:#f0f3f7} #allnight-blue-detail .ab-meta .ab-requirement{margin-top:0;padding:3px 8px;line-height:1.7} #allnight-blue-detail .ab-meta .ab-tag{line-height:1.7} #allnight-blue-detail .ab-feature.ab-spotlight{grid-column:1/-1;display:grid;grid-template-columns:1.22fr 1fr;background:#f6f8fc} #allnight-blue-detail .ab-spotlight .ab-media{padding:18px 18px 12px;background:#edf1f7} #allnight-blue-detail .ab-spotlight .ab-copy{justify-content:center;padding:32px} #allnight-blue-detail .ab-spotlight h3{font-size:26px;line-height:1.35;letter-spacing:-1px} #allnight-blue-detail .ab-spotlight .ab-copy>p{font-size:14px} #allnight-blue-detail .ab-spotlight .ab-meta{justify-content:flex-start;gap:13px;margin-bottom:20px} #allnight-blue-detail .ab-spotlight .ab-caption{font-size:11px;color:var(--ab-blue);margin-top:24px} #allnight-blue-detail .ab-textonly .ab-copy{padding:22px 23px;min-height:169px} #allnight-blue-detail .ab-textonly .ab-meta{margin-bottom:9px} #allnight-blue-detail .ab-textonly h3{font-size:17px} #allnight-blue-detail .ab-extra-wrap{margin-top:calc(50px * var(--ab-space));padding:31px;background:#f4f7ff;border-radius:var(--ab-radius);border:1px solid #e2e9fa} #allnight-blue-detail .ab-extra-wrap.ab-section{padding-top:31px} #allnight-blue-detail .ab-extra-wrap .ab-tag{background:#edefff;color:#5b50aa} #allnight-blue-detail .ab-extra-wrap .ab-grid{gap:18px} #allnight-blue-detail .ab-extra-wrap .ab-copy{padding:20px} #allnight-blue-detail .ab-extra-wrap .ab-section-count{color:#516599} #allnight-blue-detail .ab-pricing{display:grid;grid-template-columns:1.3fr 1fr;gap:32px;align-items:center;margin-top:calc(55px * var(--ab-space));padding:34px;border:1px solid #dce4f6;border-radius:var(--ab-radius);background:#f0f4ff;scroll-margin-top:20px} #allnight-blue-detail .ab-pricing h2{font-size:25px;margin-bottom:10px} #allnight-blue-detail .ab-pricing p{font-size:12px;color:var(--ab-muted);line-height:1.85} #allnight-blue-detail .ab-price-side{text-align:right} #allnight-blue-detail .ab-price-side>span{display:block;font-size:11px;line-height:1.3;color:var(--ab-muted)} #allnight-blue-detail .ab-price{font-size:33px;line-height:1.15;font-weight:650;letter-spacing:-1.5px;margin:0 0 13px} #allnight-blue-detail .ab-price-side small{font-size:11px;display:block;color:var(--ab-muted);margin-top:9px} #allnight-blue-detail .ab-faq{padding-block:35px 30px} #allnight-blue-detail .ab-faq h2{font-size:20px;margin-bottom:16px} #allnight-blue-detail .ab-faq details{border-top:1px solid var(--ab-line);padding-block:15px;font-size:12px} #allnight-blue-detail .ab-faq summary{cursor:pointer;font-size:13px;font-weight:500;line-height:1.7} #allnight-blue-detail .ab-faq details p{color:var(--ab-muted);padding-top:10px;line-height:1.8} #allnight-blue-detail .ab-info{border:1px solid #d7e2ff;background:#f5f8ff;border-radius:8px;padding:20px;margin-top:18px;font-size:13px} #allnight-blue-detail .ab-info p{color:var(--ab-muted);margin-top:5px;font-size:12px;line-height:1.8} #allnight-blue-detail [hidden]{display:none!important} #allnight-blue-detail .ab-footer{border-top:1px solid var(--ab-line);display:flex;align-items:center;justify-content:space-between;gap:18px;padding-block:25px;font-size:11px;color:var(--ab-muted)} #allnight-blue-detail .ab-footer strong{letter-spacing:.8px;font-weight:600;color:#304055} @media(max-width:760px){#allnight-blue-detail .ab-hero{grid-template-columns:1fr;gap:28px;padding-block:42px}#allnight-blue-detail h1{font-size:42px}#allnight-blue-detail .ab-product{max-width:570px}#allnight-blue-detail .ab-nav{gap:15px}#allnight-blue-detail .ab-nav>a{display:none}#allnight-blue-detail .ab-heading{align-items:flex-start;flex-direction:column;gap:12px}#allnight-blue-detail .ab-jump{grid-template-columns:repeat(2,1fr)}#allnight-blue-detail .ab-spec{padding-inline:15px}#allnight-blue-detail .ab-spec strong{font-size:16px}#allnight-blue-detail .ab-spotlight .ab-copy{padding:23px}#allnight-blue-detail .ab-spotlight h3{font-size:23px}#allnight-blue-detail .ab-copy{padding:19px}#allnight-blue-detail .ab-media{padding:12px}#allnight-blue-detail .ab-extra-wrap{padding:23px}#allnight-blue-detail .ab-extra-wrap.ab-section{padding-top:23px}} @media(max-width:580px){#allnight-blue-detail .ab-shell{padding-inline:6%}#allnight-blue-detail .ab-header{min-height:69px;gap:10px}#allnight-blue-detail .ab-brand{padding:4px 7px}#allnight-blue-detail .ab-brand img{width:128px}#allnight-blue-detail .ab-contact{padding:8px 12px}#allnight-blue-detail h1{font-size:35px;letter-spacing:-1.6px}#allnight-blue-detail .ab-hero{padding-block:34px}#allnight-blue-detail .ab-product{padding:16px 13px 13px}#allnight-blue-detail .ab-product-top{letter-spacing:.6px}#allnight-blue-detail .ab-specs{grid-template-columns:repeat(2,1fr);gap:20px 0}#allnight-blue-detail .ab-spec:nth-child(3){padding-left:0}#allnight-blue-detail .ab-spec:nth-child(2){border:0}#allnight-blue-detail .ab-spec strong{font-size:17px}#allnight-blue-detail .ab-intro{padding-top:37px}#allnight-blue-detail h2{font-size:25px}#allnight-blue-detail .ab-jump a{padding:12px 11px}#allnight-blue-detail .ab-jump small{margin-left:2px}#allnight-blue-detail .ab-grid{grid-template-columns:1fr;gap:17px}#allnight-blue-detail .ab-feature.ab-spotlight{grid-template-columns:1fr}#allnight-blue-detail .ab-spotlight .ab-copy{padding:23px}#allnight-blue-detail .ab-spotlight .ab-meta{margin-bottom:13px}#allnight-blue-detail .ab-spotlight .ab-caption{margin-top:15px}#allnight-blue-detail .ab-section-head{gap:10px}#allnight-blue-detail .ab-section h2{font-size:22px}#allnight-blue-detail .ab-section-count{font-size:11px}#allnight-blue-detail .ab-copy{padding:22px}#allnight-blue-detail .ab-textonly .ab-copy{min-height:0}#allnight-blue-detail .ab-extra-wrap{padding:20px 14px}#allnight-blue-detail .ab-extra-wrap .ab-section-head{gap:8px}#allnight-blue-detail .ab-extra-wrap .ab-section-count{display:none}#allnight-blue-detail .ab-extra-wrap .ab-copy{padding:20px}#allnight-blue-detail .ab-pricing{grid-template-columns:1fr;padding:25px;gap:23px}#allnight-blue-detail .ab-price-side{text-align:left}#allnight-blue-detail .ab-footer{align-items:flex-start;flex-direction:column;gap:6px}} @media(pointer:coarse){#allnight-blue-detail .ab-contact,#allnight-blue-detail .ab-nav>a,#allnight-blue-detail .ab-faq summary{min-height:44px}#allnight-blue-detail .ab-faq summary{padding-block:10px}} /* Standalone website rules. The approved clean-blue design is retained above. */ html{scroll-behavior:smooth;scroll-padding-top:80px;scrollbar-gutter:stable;color-scheme:light;background:#fff} body{margin:0;background:#fff;color:#192432;font-family:Pretendard,'Malgun Gothic',sans-serif;-webkit-font-smoothing:antialiased} button,a{-webkit-tap-highlight-color:transparent} button{font-family:inherit} [hidden]{display:none!important} img{max-width:100%} button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #315dea;outline-offset:4px} .site-skip{position:absolute;left:16px;top:0;padding:12px 18px;background:#192432;color:#fff;z-index:100;transform:translateY(-150%)} .site-skip:focus{transform:translateY(10px)} #allnight-version-home{max-width:1180px;margin-inline:auto} #allnight-version-home .av-header{position:sticky;top:0;z-index:50;background:#fff;box-shadow:0 3px 12px #19243206} @media(max-width:580px){html{scroll-padding-top:74px}} #allnight-version-home a{text-decoration:none;color:inherit} #allnight-version-home .av-nav a{font:500 12px/1.6 Pretendard,'Malgun Gothic',sans-serif;color:#526071;padding:10px 0;display:inline-flex;align-items:center;justify-content:center} #allnight-version-home .av-nav a[aria-current='page']{color:#315dea} #allnight-version-home a.av-primary{color:#fff} #allnight-version-home .av-nav .av-contact{padding:8px 15px;color:#192432} #allnight-version-home .av-logo{min-height:44px} #allnight-blue-detail .ab-product img{aspect-ratio:793/594} #allnight-blue-detail .ab-feature{scroll-margin-top:20px} #allnight-blue-detail .ab-media .site-media-button{display:block;width:100%;padding:0;line-height:0;border:0;border-radius:5px;background:transparent;cursor:zoom-in} #allnight-blue-detail .ab-media figcaption{align-items:center} #allnight-blue-detail .site-feature-open{font:500 11px/1.6 Pretendard,'Malgun Gothic',sans-serif;border:0;border-radius:4px;background:transparent;color:#315dea;padding:4px 0;cursor:pointer;min-height:30px} #allnight-blue-detail .ab-requirement{max-width:100%} #allnight-blue-detail .site-compatibility{display:flex;align-items:flex-start;gap:12px;background:#fff8ec;border:1px solid #f0debe;border-radius:9px;padding:15px 18px;margin-bottom:28px;font-size:12px;line-height:1.8;color:#81531b;word-break:keep-all} #allnight-blue-detail .site-compatibility strong{white-space:nowrap;font-weight:600} #allnight-blue-detail .site-support{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:32px;padding:32px;background:#f5f7fb;border:1px solid #e4e9f1;border-radius:12px;margin-top:36px} #allnight-blue-detail .site-support h2{font-size:25px;margin:8px 0 12px} #allnight-blue-detail .site-support-copy>p{font-size:13px;line-height:1.85;color:#657181;margin-bottom:18px;word-break:keep-all} #allnight-blue-detail .site-support figure{margin:0;min-width:0} #allnight-blue-detail .site-support .site-media-button{display:block;width:100%;padding:0;border:0;border-radius:7px;background:transparent;cursor:zoom-in;line-height:0} #allnight-blue-detail .site-support img{display:block;width:100%;height:auto;border-radius:7px} #allnight-blue-detail .site-support figcaption{font-size:11px;color:#657181;margin-top:9px;text-align:center} .site-dialog{box-sizing:border-box;border:1px solid #e1e7ef;border-radius:16px;padding:0;color:#192432;background:#fff;font:14px/1.7 Pretendard,'Malgun Gothic',sans-serif;max-height:calc(100dvh - 40px);max-width:calc(100vw - 32px);box-shadow:0 24px 90px #11182733} .site-dialog::backdrop{background:#14213e99;backdrop-filter:blur(5px)} .site-dialog-close{display:flex;align-items:center;justify-content:center;flex-shrink:0;border:0;border-radius:0;background:transparent;color:#40516c;width:40px;height:40px;font-size:27px;line-height:1;cursor:pointer} .site-dialog h2{margin:7px 0 13px;font-size:24px;line-height:1.4;letter-spacing:-.7px} .site-dialog p{color:#657181;font-size:13px;margin:0} .site-lightbox{width:max-content;max-width:calc(100vw - 32px);overflow:auto;background:#fff} .site-media-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 16px;border-bottom:1px solid #e4e9f1} .site-media-toolbar h2{font-size:16px;letter-spacing:-.3px;margin:0;word-break:keep-all} .site-media-toolbar form{margin:0} .site-lightbox-image-button{display:block;border:0;background:#f2f4f8;padding:0;cursor:zoom-out;line-height:0;max-width:100%} .site-lightbox-image-button img{display:block;width:auto;max-width:min(1100px,calc(100vw - 34px));max-height:calc(100dvh - 170px);object-fit:contain;margin:auto} .site-lightbox-image-button img:not([src]){display:none} .site-media-status:empty{display:none} .site-dialog .site-media-status{padding:10px 18px;color:#53647b;font-size:12px} .site-dialog .site-media-help{text-align:center;padding:9px 18px 12px;font-size:11px;color:#657181} .site-modal-open{overflow:hidden} .site-top{position:fixed;bottom:24px;right:24px;z-index:15;border:1px solid #d7e0ef;border-radius:50%;width:45px;height:45px;background:#fff;color:#315dea;font-size:23px;cursor:pointer;box-shadow:0 5px 16px #19243217} @media(max-width:760px){#allnight-version-home .av-nav .av-nav-detail{display:none}} @media(max-width:580px){#allnight-version-home .av-nav .av-nav-products{display:none}#allnight-version-home .av-nav .av-contact{padding:8px 12px}#allnight-blue-detail .site-support{grid-template-columns:1fr;padding:22px;gap:24px}#allnight-blue-detail .site-compatibility{flex-direction:column;gap:4px}.site-top{right:15px;bottom:15px}} @media(max-width:360px){#allnight-version-home .av-hero h1,#allnight-blue-detail h1{font-size:32px;letter-spacing:-1.5px}} @media(pointer:coarse){#allnight-version-home .av-nav a,#allnight-blue-detail .site-feature-open{min-height:44px}.site-dialog-close{width:44px;height:44px}} /* Compact, centered introduction on the main page only. */ #allnight-version-home #site-home .av-hero{display:block;text-align:center;padding-block:80px 78px} #allnight-version-home #site-home .av-hero>div{max-width:700px;margin-inline:auto} #allnight-version-home #site-home .av-hero h1{margin:12px 0 14px} #allnight-version-home #site-home .av-copy{margin-inline:auto} #allnight-version-home #site-home .av-versions{padding-block:40px 46px} #allnight-version-home #site-home .av-section-title{margin-bottom:18px} @media(max-width:580px){#allnight-version-home #site-home .av-hero{padding-block:60px}#allnight-version-home #site-home .av-hero h1{margin:10px 0 12px}#allnight-version-home #site-home .av-versions{padding-block:36px 40px}} /* A large central play control opens an enlarged, keyboard-accessible player. */ #allnight-blue-detail .ab-feature .site-video-preview{position:relative;display:block;width:100%;padding:0;border:0;border-radius:0;line-height:0;background:#161b23;cursor:pointer;overflow:hidden} #allnight-blue-detail .ab-feature .site-video-preview video{pointer-events:none;aspect-ratio:4/3;object-fit:contain} .site-video-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:72px;height:80px;border:0;border-radius:0;background:none;box-shadow:none;filter:none;pointer-events:none} .site-video-play>span{display:block;width:54px;height:64px;margin:0;border:0;clip-path:polygon(6% 2%,98% 50%,6% 98%);background:rgba(205,205,205,.8);transition:background-color .18s} .site-video-preview:hover .site-video-play>span,.site-video-preview:focus-visible .site-video-play>span{background:rgba(220,220,220,.95)} .site-video-preview:active .site-video-play>span{background:rgba(190,190,190,.7)} #allnight-blue-detail .site-video-preview:focus-visible{outline:3px solid #315dea;outline-offset:-3px} .site-video-dialog{width:min(1026px,calc(100vw - 32px));padding:0;overflow:auto;background:#fff} .site-video-dialog::backdrop{background:rgba(80,80,80,.2);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)} .site-video-dialog video{display:block;width:100%;height:auto;max-height:none;object-fit:contain;background:#111} .site-dialog .site-video-status{padding:10px 18px;color:#53647b;font-size:12px} .site-dialog .site-video-status:empty{display:none} @media(max-width:580px){.site-video-play{width:64px;height:68px}.site-video-play>span{width:46px;height:54px}} /* Full-width feature media with compact title and badge rows. */ #allnight-blue-detail .ab-feature .ab-media{margin:0;padding:0;background:#161b23} #allnight-blue-detail .ab-feature .ab-media .site-media-button{border-radius:0} #allnight-blue-detail .ab-feature .ab-media img{width:100%;height:auto;aspect-ratio:auto 962/752;object-fit:contain;border-radius:0} #allnight-blue-detail .ab-feature .ab-media video{display:block;width:100%;height:auto;background:#161b23} #allnight-blue-detail .ab-feature .ab-copy{min-height:0;padding:16px 18px} #allnight-blue-detail .ab-feature .ab-copy>p{font-size:15px;line-height:1.9;white-space:normal} #allnight-blue-detail .ab-feature:not(.ab-spotlight) h3{font-size:18px;margin-bottom:0} #allnight-blue-detail .ab-feature.ab-spotlight h3{margin-bottom:0} #allnight-blue-detail .ab-feature .ab-meta{margin-bottom:10px} #allnight-blue-detail .ab-extra-wrap .ab-section-head>div{min-width:0} #allnight-blue-detail .ab-extra-wrap .ab-section-head p{max-width:670px;line-height:1.8} @media(max-width:580px){#allnight-blue-detail .ab-feature .ab-copy{min-height:0;padding:18px 20px}#allnight-blue-detail .ab-feature .ab-copy>p{font-size:14px}#allnight-blue-detail .ab-extra-wrap .ab-section-head{flex-wrap:wrap}} /* Reserve the complete heading layout while revealing one character at a time. */ #allnight-version-home .av-hero h1 .av-type-letter{position:relative;color:inherit;visibility:hidden} #allnight-version-home .av-hero h1 .av-type-letter.is-visible{visibility:visible} #allnight-version-home .av-hero h1 .av-type-letter.has-cursor::after{content:"";position:absolute;right:-.1em;top:.08em;width:2px;height:.95em;background:currentColor;animation:av-cursor-blink 1s step-end infinite} @keyframes av-cursor-blink{0%,49%{opacity:1}50%,100%{opacity:0}} /* Entrance motion remains enabled independently of the OS animation setting. */ .site-reveal{opacity:0;visibility:hidden} .site-reveal.is-revealed{opacity:1;visibility:visible;animation:site-reveal-in .65s cubic-bezier(.22,1,.36,1) var(--reveal-delay,0ms) backwards} @keyframes site-reveal-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}} @keyframes site-menu-in{from{opacity:0}to{opacity:1}} html{scroll-behavior:smooth} #allnight-version-home #site-home .av-hero-intro.is-revealed{animation-name:site-menu-in} @media print{.site-reveal{opacity:1!important;visibility:visible!important;animation:none!important}} /* Website interactions; desktop-launcher controls keep their native styling. */ #allnight-version-home .av-nav a, #allnight-version-home .av-action, #allnight-blue-detail .ab-action, #allnight-blue-detail .ab-jump a, .site-top{transition:color .2s ease,background-color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease} #allnight-version-home .av-nav a:not(.av-contact){position:relative} #allnight-version-home .av-nav a:not(.av-contact)::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:2px;border-radius:2px;background:#315dea;transform:scaleX(0);transform-origin:center;transition:transform .2s ease} #allnight-version-home .av-nav a:not(.av-contact):is(:hover,:focus-visible){color:#244ac7;transform:translateY(-1px)} #allnight-version-home .av-nav a:not(.av-contact):is(:hover,:focus-visible)::after{transform:scaleX(1)} #allnight-version-home .av-nav .av-contact:is(:hover,:focus-visible){color:#315dea;background:#eef3ff;border-color:#adc0fb;box-shadow:none;transform:none} #allnight-version-home .av-action:is(:hover,:focus-visible), #allnight-blue-detail .ab-action:is(:hover,:focus-visible){transform:none;box-shadow:none} #allnight-version-home .av-action.av-primary:is(:hover,:focus-visible), #allnight-blue-detail .ab-action.ab-primary:is(:hover,:focus-visible){background:#254dcc;border-color:#254dcc;color:#fff} #allnight-version-home .av-action>span{transition:transform .2s ease} #allnight-version-home .av-action:is(:hover,:focus-visible)>span{transform:none} #allnight-blue-detail .ab-jump a:is(:hover,:focus-visible){background:#eef3ff;color:#315dea;border-color:#adc0fb;box-shadow:0 4px 12px #315dea12;transform:translateY(-2px)} .site-top:is(:hover,:focus-visible){background:#eef3ff;border-color:#adc0fb;box-shadow:0 7px 18px #315dea26;transform:translateY(-3px)} #allnight-version-home .av-nav a:active, #allnight-version-home .av-action:active, #allnight-blue-detail .ab-action:active, #allnight-blue-detail .ab-jump a:active, .site-top:active{transform:translateY(0);box-shadow:none} #allnight-version-home .av-nav a:focus-visible, #allnight-version-home .av-action:focus-visible, #allnight-blue-detail .ab-action:focus-visible, #allnight-blue-detail .ab-jump a:focus-visible, .site-top:focus-visible{outline:2px solid #315dea;outline-offset:4px} /* ===== 2.0 상세 페이지 · 상단 도입부 (제품명 / 설명) ===== */ #allnight-blue-detail .ab-top{padding-top:48px} #allnight-blue-detail .ab-top + .launcher-preview{padding-top:28px} #allnight-blue-detail .ab-top h1{font-size:clamp(30px,4vw,40px);line-height:1.25;letter-spacing:-1.6px;margin:0 0 8px} #allnight-blue-detail .ab-top-copy p{font-size:14px;line-height:1.8;color:var(--ab-muted);word-break:keep-all} @media(max-width:580px){ #allnight-blue-detail .ab-top{padding-top:32px} #allnight-blue-detail .ab-top + .launcher-preview{padding-top:20px} } /* ===== 공통 헤더 · 구매 문의 버튼 (가격 섹션의 '구매 문의하기' 버튼과 동일한 컬러) ===== */ #allnight-version-home .av-nav .av-contact{background:#315dea;border-color:#315dea;color:#fff;font-weight:600} #allnight-version-home .av-nav .av-contact:is(:hover,:focus-visible){background:#254dcc;border-color:#254dcc;color:#fff} /* Cards lift slightly with a soft blue shadow on hover. */ #allnight-version-home .av-version, #allnight-blue-detail .ab-feature{transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s ease,border-color .25s ease} @media(hover:hover){ #allnight-version-home .av-version:hover, #allnight-blue-detail .ab-feature:hover{transform:translateY(-4px);border-color:#9fb6f5;box-shadow:0 12px 28px -12px rgba(49,93,234,.28)} } /* Fixed width so the contact button does not resize while its "↗" glyph loads. */ #allnight-version-home .av-nav .av-contact{width:91px;flex-shrink:0;justify-content:center;white-space:nowrap;padding-inline:0} @media(max-width:580px){#allnight-version-home .av-nav .av-contact{width:85px;padding-inline:0}} /* Crossfade between main and 2.0 pages instead of a hard repaint; the header keeps its place. */ @view-transition{navigation:auto} #allnight-version-home .av-header{view-transition-name:site-header} ::view-transition-old(root),::view-transition-new(root){animation-duration:.2s} /* Standard and premium feature boxes use distinct colors. */ #allnight-blue-detail #abd-standard, #allnight-blue-detail #abd-price{background:#f7f8fa;border-color:#e5e8ee} #allnight-blue-detail #abd-standard h2{color:var(--ab-ink)} #allnight-blue-detail #abd-extra{background:linear-gradient(180deg,#eaf0ff 0%,#f5f8ff 100%);border-color:#c9d6fb} #allnight-blue-detail #abd-extra h2{color:var(--ab-blue)} /* Standard / premium toggle buttons, colored like the boxes they open. */ #allnight-blue-detail .ab-tiers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:26px} #allnight-blue-detail .ab-tier{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;min-height:80px;padding:18px 22px;border:1px solid #e5e8ee;border-radius:var(--ab-radius);background:#f7f8fa;color:var(--ab-ink);text-align:left;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease} #allnight-blue-detail .ab-tier strong{display:block;font-size:18px;line-height:1.4;font-weight:650;letter-spacing:-.5px} #allnight-blue-detail .ab-tier small{display:block;margin-top:2px;font-size:12px;color:var(--ab-muted)} #allnight-blue-detail .ab-tier-premium{background:linear-gradient(180deg,#eaf0ff 0%,#f5f8ff 100%);border-color:#c9d6fb} #allnight-blue-detail .ab-tier-premium strong{color:var(--ab-blue)} #allnight-blue-detail .ab-tier-icon{position:relative;flex-shrink:0;width:32px;height:32px;border-radius:50%;background:#fff;border:1px solid #e5e8ee;transition:transform .3s cubic-bezier(.22,1,.36,1)} #allnight-blue-detail .ab-tier-premium .ab-tier-icon{border-color:#c9d6fb} #allnight-blue-detail .ab-tier-icon::before{content:"";position:absolute;left:50%;top:45%;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translate(-50%,-50%) rotate(45deg)} #allnight-blue-detail .ab-tier-premium .ab-tier-icon{color:var(--ab-blue)} #allnight-blue-detail .ab-tier[aria-expanded='true'] .ab-tier-icon{transform:rotate(180deg)} @media(hover:hover){#allnight-blue-detail .ab-tier-standard:hover{border-color:#aeb6c4}#allnight-blue-detail .ab-tier-premium:hover{border-color:#8fa9f5}} #allnight-blue-detail .ab-tier:focus-visible{outline:2px solid var(--ab-blue);outline-offset:3px} #allnight-blue-detail .ab-extra-wrap.ab-tier-panel{margin-top:16px} @media(max-width:580px){#allnight-blue-detail .ab-tiers{gap:8px}#allnight-blue-detail .ab-tier{min-height:72px;padding:14px 14px;gap:8px}#allnight-blue-detail .ab-tier strong{font-size:16px}#allnight-blue-detail .ab-tier small{font-size:11px}#allnight-blue-detail .ab-tier-icon{width:26px;height:26px}} /* Tier button motion: arrow nudge while both boxes are closed, press feedback, premium shine on hover. */ @keyframes ab-tier-nudge{0%,45%,100%{transform:translate(-50%,-50%) rotate(45deg)}60%{transform:translate(-50%,-10%) rotate(45deg)}75%{transform:translate(-50%,-50%) rotate(45deg)}87%{transform:translate(-50%,-30%) rotate(45deg)}} #allnight-blue-detail .ab-tiers:not(.ab-tiers-open) .ab-tier .ab-tier-icon::before{animation:ab-tier-nudge 1.8s ease-in-out infinite} #allnight-blue-detail .ab-tiers:not(.ab-tiers-open) .ab-tier-premium .ab-tier-icon::before{animation-delay:.25s} #allnight-blue-detail .ab-tier:active{transform:scale(.98);transition-duration:.08s} #allnight-blue-detail .ab-tier-premium{position:relative;overflow:hidden} #allnight-blue-detail .ab-tier-premium>span{position:relative;z-index:1} /* Resource viewer spotlight: light card with a blue accent that sets the bundled program apart. */ #allnight-blue-detail .ab-viewer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:40px;align-items:center;margin-top:calc(51px * var(--ab-space));padding:40px;border:1px solid #d6e0fb;border-radius:var(--ab-radius);background:linear-gradient(135deg,#ffffff 0%,#f3f6ff 55%,#e9efff 100%);box-shadow:0 18px 40px -28px #315dea55} #allnight-blue-detail .ab-viewer h2{font-size:30px;line-height:1.35;font-weight:700;letter-spacing:-1px;word-break:keep-all} #allnight-blue-detail .ab-viewer-copy>p{margin-top:14px;font-size:14px;line-height:1.8;color:var(--ab-muted);word-break:keep-all} @media(max-width:760px){#allnight-blue-detail .ab-viewer{grid-template-columns:1fr;gap:26px;padding:28px}#allnight-blue-detail .ab-viewer-media{order:-1}#allnight-blue-detail .ab-viewer h2{font-size:26px}} @media(max-width:580px){#allnight-blue-detail .ab-viewer{padding:22px 18px;margin-top:37px}#allnight-blue-detail .ab-viewer h2{font-size:23px}#allnight-blue-detail .ab-viewer-copy>p{font-size:13px}} /* Viewer copy sits at the top with the badge beside the label and a feature list below. */ #allnight-blue-detail .ab-viewer{align-items:start} #allnight-blue-detail .ab-viewer-label{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin-bottom:10px} #allnight-blue-detail .ab-viewer-label .ab-eyebrow{margin-bottom:0} #allnight-blue-detail .ab-viewer-features{list-style:none;margin:22px 0 0;padding:20px 0 0;border-top:1px solid #dfe6f7;display:grid;gap:8px} #allnight-blue-detail .ab-viewer-features li{position:relative;padding-left:26px} #allnight-blue-detail .ab-viewer-features li::before{content:"";position:absolute;left:0;top:2px;width:17px;height:17px;border-radius:50%;background:#e3ebff} #allnight-blue-detail .ab-viewer-features li::after{content:"";position:absolute;left:6px;top:5px;width:4px;height:8px;border-right:2px solid var(--ab-blue);border-bottom:2px solid var(--ab-blue);transform:rotate(45deg)} #allnight-blue-detail .ab-viewer-features strong{display:block;font-size:13px;font-weight:600;line-height:1.6} /* The video is shorter than the copy, so give it more width and align its bottom with the feature list. */ #allnight-blue-detail .ab-viewer{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)} #allnight-blue-detail .ab-viewer-media{align-self:end} @media(max-width:760px){#allnight-blue-detail .ab-viewer{grid-template-columns:1fr}} /* No outer card: the viewer section sits directly on the page background. */ #allnight-blue-detail .ab-viewer{padding:0;border:0;border-radius:0;background:none;box-shadow:none} @media(max-width:760px){#allnight-blue-detail .ab-viewer{padding:0}} @media(max-width:580px){#allnight-blue-detail .ab-viewer{padding:0}} /* Resource viewer intro video: muted preview that opens the enlarged player, like feature videos. */ #allnight-blue-detail .ab-viewer-media{position:relative;display:block;width:100%;padding:0;border:1px solid #dfe6f7;border-radius:10px;overflow:hidden;line-height:0;background:#161b23;cursor:pointer} #allnight-blue-detail .ab-viewer-media video{display:block;width:100%;height:auto;aspect-ratio:1520/880;object-fit:contain;pointer-events:none} /* Slimmer title bar for the image and video popups. */ .site-media-toolbar{padding:1px 6px 1px 16px;gap:12px} .site-media-toolbar h2{font-size:14px;font-weight:600;line-height:1.4;position:relative;top:2px} .site-media-toolbar .site-dialog-close{width:34px;height:34px;font-size:22px} @media(pointer:coarse){.site-media-toolbar .site-dialog-close{width:44px;height:44px}} /* Video popup: no light border or white backing peeking around the video edges. */ .site-video-dialog{border:0;background:#111} .site-video-dialog .site-media-toolbar{background:#fff} .site-dialog.site-video-dialog .site-video-status{background:#fff} /* Viewer feature rows: the text itself lifts slightly on hover, no box. */ #allnight-blue-detail .ab-viewer-features li{transition:color .2s ease} @media(hover:hover){#allnight-blue-detail .ab-viewer-features li:hover{color:var(--ab-blue)}} /* The header keeps only the main link (2.0 page) and the contact button. */ #allnight-version-home .av-nav .av-nav-products{display:inline-flex} /* The phone rule above assumed the main link was hidden and dropped the gap; keep it apart from the button. */ @media(max-width:580px){#allnight-version-home .av-nav{gap:20px}} /* Even 80px breathing room between the page's main sections (56px on phones). */ #allnight-blue-detail .ab-viewer{margin-top:80px} #allnight-blue-detail .ab-intro{padding-top:80px} #allnight-blue-detail .ab-pricing{margin-top:36px} #allnight-blue-detail .ab-faq{padding-top:56px} @media(max-width:580px){ #allnight-blue-detail .ab-viewer{margin-top:56px} #allnight-blue-detail .ab-intro{padding-top:56px} #allnight-blue-detail .ab-pricing{margin-top:28px} #allnight-blue-detail .ab-faq{padding-top:40px} } /* Main page hero: space above and below the intro copy. */ #allnight-version-home #site-home .av-hero{padding-block:52px} @media(max-width:580px){#allnight-version-home #site-home .av-hero{padding-block:40px}} /* One shared footer look for the main and 2.0 pages. */ #allnight-version-home .av-home-footer, #allnight-blue-detail .ab-footer{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0;padding:25px 5.2%;border-top:1px solid #e4e9f1;font-size:11px;color:#657181} #allnight-version-home .av-home-footer strong, #allnight-blue-detail .ab-footer strong{font-weight:600;letter-spacing:.8px;color:#304055} @media(max-width:580px){ #allnight-version-home .av-home-footer, #allnight-blue-detail .ab-footer{flex-direction:column;align-items:flex-start;gap:6px;padding:25px 6%} } /* On the short main page the footer sits at the bottom of the screen instead of floating mid-way. */ #allnight-version-home #av-home-screen{display:flex;flex-direction:column;min-height:calc(100dvh - 65px)} #allnight-version-home #av-home-screen>main{flex:1 0 auto} @media(max-width:580px){#allnight-version-home #av-home-screen{min-height:calc(100dvh - 59px)}} /* "접기" button at the bottom of an open standard / premium box. */ #allnight-blue-detail .ab-tier-close{display:flex;align-items:center;gap:8px;margin:28px auto 0;padding:9px 20px;border:1px solid #d5dbe5;border-radius:999px;background:#fff;color:var(--ab-ink);font-size:13px;font-weight:500;line-height:1.5;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease} #allnight-blue-detail #abd-extra .ab-tier-close{border-color:#c9d6fb;color:var(--ab-blue)} #allnight-blue-detail .ab-tier-close-icon{width:7px;height:7px;margin-top:3px;border-left:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg)} @media(hover:hover){#allnight-blue-detail .ab-tier-close:hover{transform:translateY(-2px);border-color:#aeb6c4;box-shadow:0 6px 16px -10px rgba(25,36,50,.35)}#allnight-blue-detail #abd-extra .ab-tier-close:hover{border-color:#8fa9f5;box-shadow:0 6px 16px -10px rgba(49,93,234,.45)}} #allnight-blue-detail .ab-tier-close:active{transform:scale(.97)} #allnight-blue-detail .ab-tier-close:focus-visible{outline:2px solid var(--ab-blue);outline-offset:3px} /* Small "기능 살펴보기" / "접기" hint beside the tier arrow. */ #allnight-blue-detail .ab-tier-action{display:flex;align-items:center;gap:9px;flex-shrink:0} #allnight-blue-detail .ab-tier-hint{font-size:12px;font-weight:500;color:var(--ab-muted);white-space:nowrap} #allnight-blue-detail .ab-tier-premium .ab-tier-hint{color:var(--ab-blue)} #allnight-blue-detail .ab-tier-hint-close, #allnight-blue-detail .ab-tier[aria-expanded='true'] .ab-tier-hint-open{display:none} #allnight-blue-detail .ab-tier[aria-expanded='true'] .ab-tier-hint-close{display:inline} @media(max-width:580px){#allnight-blue-detail .ab-tier-hint{display:none!important}} /* Play button: breathes with a soft glow at rest; grows and brightens on hover. Centering uses the translate property so scale grows the button around its own center. */ .site-video-play{transform:none;translate:-50% -50%} .site-video-play{transition:scale .3s cubic-bezier(.22,1,.36,1),filter .3s ease} .site-video-preview:hover .site-video-play,.site-video-preview:focus-visible .site-video-play{animation:none;scale:1.28;filter:drop-shadow(0 0 18px rgba(255,255,255,.6))} /* Play button style: translucent dark circle with a white triangle; turns signature blue on hover. */ .site-video-play{width:64px;height:64px;border-radius:50%;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);transition:scale .3s cubic-bezier(.22,1,.36,1),filter .3s ease,background-color .25s ease,border-color .25s ease} .site-video-play>span, .site-video-preview:hover .site-video-play>span, .site-video-preview:focus-visible .site-video-play>span, .site-video-preview:active .site-video-play>span{width:20px;height:24px;margin-left:4px;clip-path:polygon(0 0,100% 50%,0 100%);background:#fff} .site-video-preview:hover .site-video-play,.site-video-preview:focus-visible .site-video-play{scale:1.2;background:#315dea;border-color:#315dea;filter:drop-shadow(0 6px 16px rgba(49,93,234,.45))} @media(max-width:580px){.site-video-play{width:56px;height:56px}.site-video-play>span,.site-video-preview:hover .site-video-play>span{width:17px;height:21px;margin-left:3px}} /* ===== 가이드 페이지 (guide.html): same header, fonts, colors and footer as the other pages ===== */ #allnight-version-home .gd-page{max-width:860px;margin:0 auto;padding:0 5.2% 80px;box-sizing:content-box} #allnight-version-home .gd-hero{text-align:center;padding:72px 0 64px} #allnight-version-home .gd-eyebrow{font-size:11px;letter-spacing:1.5px;font-weight:600;color:var(--av-blue)} #allnight-version-home .gd-hero h1{margin:12px 0 10px;font-size:clamp(30px,4.5vw,40px);line-height:1.3;font-weight:700;letter-spacing:-1.5px} #allnight-version-home .gd-hero h1 span{color:var(--av-blue)} #allnight-version-home .gd-hero>p{margin:0;font-size:14px;color:var(--av-muted)} #allnight-version-home .gd-toc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:600px;margin:32px auto 0} #allnight-version-home .gd-toc a{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:50px;padding:12px 16px;border:1px solid var(--av-line);border-radius:10px;background:#f7f8fa;color:var(--av-ink);font-size:13px;font-weight:500;text-decoration:none;transition:transform .2s ease,border-color .2s ease,color .2s ease,background-color .2s ease} #allnight-version-home .gd-toc a span:last-child{color:var(--av-blue)} @media(hover:hover){#allnight-version-home .gd-toc a:hover{transform:translateY(-2px);border-color:#adc0fb;background:#eef3ff;color:#315dea}} #allnight-version-home .gd-toc a:focus-visible{outline:2px solid var(--av-blue);outline-offset:3px} #allnight-version-home .gd-section{padding-top:56px;scroll-margin-top:20px} #allnight-version-home .gd-head{margin:0 0 20px;font-size:22px;line-height:1.4;font-weight:650;letter-spacing:-.7px} #allnight-version-home .gd-video{margin:0 0 28px;border:1px solid var(--av-line);border-radius:12px;overflow:hidden;background:#fff} #allnight-version-home .gd-video:last-child{margin-bottom:0} #allnight-version-home .gd-video video{display:block;width:100%;aspect-ratio:16/9;background:#111} #allnight-version-home .gd-video figcaption{padding:16px 20px} #allnight-version-home .gd-video h3{margin:0 0 4px;font-size:15px;font-weight:600;letter-spacing:-.3px} #allnight-version-home .gd-video p{margin:0;font-size:13px;line-height:1.7;color:var(--av-muted)} @media(max-width:580px){ #allnight-version-home .gd-page{padding:0 6% 56px} #allnight-version-home .gd-hero{padding:52px 0 44px} #allnight-version-home .gd-toc{grid-template-columns:1fr} #allnight-version-home .gd-section{padding-top:40px} #allnight-version-home .gd-head{font-size:20px} #allnight-version-home .gd-video figcaption{padding:14px 16px} } /* Guide page logo is not a link. */ #allnight-version-home .av-logo-static{cursor:default} /* Guide videos: the whole frame is the button that opens the popup, with the shared play badge. */ #allnight-version-home .gd-video .site-video-preview{position:relative;display:block;width:100%;padding:0;border:0;line-height:0;background:#111;cursor:pointer} #allnight-version-home .gd-video .site-video-preview video{pointer-events:none;width:100%;height:auto;display:block} #allnight-version-home .gd-video .site-video-preview:focus-visible{outline:3px solid #315dea;outline-offset:-3px} /* Features without a screenshot: a compact checked list instead of empty cards. */ #allnight-blue-detail .ab-plain-features{list-style:none;margin:20px 0 0;padding:20px 0 0;border-top:1px solid #e2e6ee;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 18px} #allnight-blue-detail .ab-plain-features li{position:relative;padding-left:26px;font-size:13px;font-weight:600;line-height:1.6;word-break:keep-all;scroll-margin-top:80px;transition:color .2s ease} #allnight-blue-detail .ab-plain-features li::before{content:"";position:absolute;left:0;top:2px;width:17px;height:17px;border-radius:50%;background:#e3ebff} #allnight-blue-detail .ab-plain-features li::after{content:"";position:absolute;left:6px;top:5px;width:4px;height:8px;border-right:2px solid var(--ab-blue);border-bottom:2px solid var(--ab-blue);transform:rotate(45deg)} /* Same hover as the Resource Viewer list: the text turns blue, nothing moves. */ @media(hover:hover){#allnight-blue-detail .ab-plain-features li:hover{color:var(--ab-blue)}} @media(max-width:760px){#allnight-blue-detail .ab-plain-features{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:580px){#allnight-blue-detail .ab-plain-features{grid-template-columns:1fr;gap:8px}} /* Video popup title bar filled with the signature blue. */ .site-video-dialog .site-media-toolbar{background:#315dea;border-bottom-color:#315dea} .site-video-dialog .site-media-toolbar h2{color:#fff} .site-video-dialog .site-dialog-close{color:#dce6ff} .site-video-dialog .site-dialog-close:is(:hover,:focus-visible){color:#fff} /* Classic interface shown as a full-width spotlight card at the top of the standard box. */ #allnight-blue-detail .ab-feature.ab-spotlight .ab-copy{padding:32px;justify-content:center} #allnight-blue-detail .ab-feature.ab-spotlight .ab-media video{aspect-ratio:4/3} @media(max-width:760px){#allnight-blue-detail .ab-feature.ab-spotlight .ab-copy{padding:20px}} /* Feature cards no longer lift on hover; only the border and shadow respond. */ #allnight-blue-detail .ab-feature:hover{transform:none} #allnight-version-home .av-version:hover{transform:none} #allnight-blue-detail .ab-feature.ab-spotlight{background:#fff} /* Heading above the compact list of features without a screenshot. */ #allnight-blue-detail .ab-plain-title{margin:32px 0 0;padding-top:24px;border-top:1px solid #e2e6ee;font-size:18px;font-weight:650;letter-spacing:-.5px} #allnight-blue-detail .ab-plain-title+.ab-plain-features{margin-top:14px;padding-top:0;border-top:0} /* Spotlight card copy: small label, headline, then a two-column checked list. */ #allnight-blue-detail .ab-spot-label{display:inline-block;margin-bottom:10px;font-size:11px;font-weight:600;letter-spacing:1.2px;color:var(--ab-blue)} #allnight-blue-detail .ab-spotlight .ab-spot-list{list-style:none;margin:18px 0 0;padding:18px 0 0;border-top:1px solid #e6eaf2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 16px} #allnight-blue-detail .ab-spot-list li{position:relative;padding-left:24px;font-size:13px;line-height:1.6;color:#3d4a5c;word-break:keep-all} #allnight-blue-detail .ab-spot-list li::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:50%;background:#e3ebff} #allnight-blue-detail .ab-spot-list li::after{content:"";position:absolute;left:5.5px;top:6px;width:4px;height:7px;border-right:2px solid var(--ab-blue);border-bottom:2px solid var(--ab-blue);transform:rotate(45deg)} @media(max-width:580px){#allnight-blue-detail .ab-spotlight .ab-spot-list{grid-template-columns:1fr;gap:7px}} /* Convenience feature list: text turns signature blue on hover. */ #allnight-blue-detail .ab-spot-list li{transition:color .2s ease} /* Only the feature name itself reacts: hovering the empty part of a row does nothing. */ @media(hover:hover){#allnight-blue-detail .ab-spot-seek:hover{color:var(--ab-blue)}} /* Items that need a server change: amber check instead of blue, matching the "서버 수정" tag color. */ #allnight-blue-detail .ab-spot-list li.is-server::before{background:#fff1d6} #allnight-blue-detail .ab-spot-list li.is-server::after{border-color:#c98a1b} /* "편의 기능" title row: legend for the amber check sits at the right end. */ #allnight-blue-detail .ab-spot-head{display:flex;align-items:center;justify-content:space-between;gap:12px} #allnight-blue-detail .ab-spot-legend{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;font-size:12px;font-weight:500;color:#936112} #allnight-blue-detail .ab-spot-legend-mark{position:relative;width:16px;height:16px;border-radius:50%;background:#fff1d6} #allnight-blue-detail .ab-spot-legend-mark::after{content:"";position:absolute;left:5.5px;top:3px;width:4px;height:7px;border-right:2px solid #c98a1b;border-bottom:2px solid #c98a1b;transform:rotate(45deg)} #allnight-blue-detail .ab-spot-head, #allnight-blue-detail .ab-spotlight .ab-spot-list{width:100%} #allnight-blue-detail .ab-spot-legend{align-self:flex-end;position:relative;top:10px} /* Checkmarks centered on their circles. The box is centered, then lifted slightly because the checkmark's visual weight sits in its lower corner. */ #allnight-blue-detail .ab-viewer-features li::after, #allnight-blue-detail .ab-plain-features li::after, #allnight-blue-detail .ab-spot-list li::after, #allnight-blue-detail .ab-spot-legend-mark::after{width:4.5px;height:7.5px;border-right-width:2px;border-bottom-width:2px;transform:translate(-50%,-62%) rotate(45deg)} #allnight-blue-detail .ab-viewer-features li::after, #allnight-blue-detail .ab-plain-features li::after{left:8.5px;top:10.5px} #allnight-blue-detail .ab-spot-list li::after{left:8px;top:11px} #allnight-blue-detail .ab-spot-legend-mark::after{left:8px;top:8px} #allnight-blue-detail .ab-spot-list li{font-weight:600} #allnight-blue-detail .ab-spot-legend{color:#3d4a5c} /* "서버 수정" badge sits on the same line, before the feature title. */ #allnight-blue-detail .ab-feature:not(.ab-spotlight) .ab-copy{flex-direction:row;align-items:center;flex-wrap:wrap;gap:6px 8px} #allnight-blue-detail .ab-feature:not(.ab-spotlight) .ab-meta{width:auto;margin-bottom:0} #allnight-blue-detail .ab-requirement[data-kind='server']{color:#192432} #allnight-blue-detail .ab-requirement[data-kind='server']{font-weight:600} #allnight-blue-detail .ab-feature:not(.ab-spotlight) h3{font-size:16px} @media(max-width:580px){#allnight-blue-detail .ab-feature:not(.ab-spotlight) h3{font-size:15px}} /* More room between the launcher preview and the key specs row. */ #allnight-blue-detail .ab-specs{margin-top:48px} @media(max-width:580px){#allnight-blue-detail .ab-specs{margin-top:32px}} /* Key specs as four tinted tiles with an icon, instead of a thin divided row. */ #allnight-blue-detail .ab-specs{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding:0;border:0} #allnight-blue-detail .ab-specs .ab-spec{display:flex;flex-direction:column;gap:4px;padding:22px 20px;border:1px solid #e2e9fa;border-radius:12px;background:#f5f8ff} #allnight-blue-detail .ab-specs .ab-spec-icon{display:grid;place-items:center;width:40px;height:40px;margin-bottom:10px;border-radius:50%;background:#315dea;color:#fff} #allnight-blue-detail .ab-specs .ab-spec strong{font-size:20px;line-height:1.35;letter-spacing:-.6px;font-weight:700} #allnight-blue-detail .ab-specs .ab-spec span:not(.ab-spec-icon):not(.ab-spec-emphasis){font-size:12px;line-height:1.6;color:var(--ab-muted);word-break:keep-all} @media(max-width:760px){#allnight-blue-detail .ab-specs{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}} @media(max-width:580px){#allnight-blue-detail .ab-specs{gap:10px}#allnight-blue-detail .ab-specs .ab-spec{padding:18px 16px}#allnight-blue-detail .ab-specs .ab-spec-icon{width:36px;height:36px;margin-bottom:8px}#allnight-blue-detail .ab-specs .ab-spec strong{font-size:17px}} /* Spec tiles: centered content; same hover as the feature cards. */ #allnight-blue-detail .ab-specs .ab-spec{align-items:center;text-align:center;transition:border-color .25s ease,box-shadow .25s ease} @media(hover:hover){#allnight-blue-detail .ab-specs .ab-spec:hover{border-color:#9fb6f5;box-shadow:0 12px 28px -12px rgba(49,93,234,.28)}} /* Spec icons: bare signature-blue symbol, no circle. */ #allnight-blue-detail .ab-specs .ab-spec-icon{width:auto;height:auto;background:none;border-radius:0;color:#315dea;margin-bottom:8px} #allnight-blue-detail .ab-specs .ab-spec-icon svg{width:30px;height:30px;stroke-width:1.8} @media(max-width:580px){#allnight-blue-detail .ab-specs .ab-spec-icon{width:auto;height:auto}#allnight-blue-detail .ab-specs .ab-spec-icon svg{width:26px;height:26px}} /* Heading above the four spec tiles, same style as the resource viewer title. */ #allnight-blue-detail .ab-specs-head{margin-top:64px} #allnight-blue-detail .ab-specs-head h2{font-size:30px;line-height:1.35;font-weight:700;letter-spacing:-1px;word-break:keep-all} #allnight-blue-detail .ab-specs-head+.ab-specs{margin-top:44px} @media(max-width:760px){#allnight-blue-detail .ab-specs-head h2{font-size:26px}} @media(max-width:580px){#allnight-blue-detail .ab-specs-head{margin-top:40px}#allnight-blue-detail .ab-specs-head h2{font-size:23px}#allnight-blue-detail .ab-specs-head+.ab-specs{margin-top:32px}} /* "편의 기능" chapters: each item jumps to its moment in the shared video. */ #allnight-blue-detail .ab-spot-seek{all:unset;box-sizing:border-box;display:inline;cursor:pointer;border-radius:4px;transition:color .25s ease} #allnight-blue-detail .ab-spot-seek:focus-visible{outline:2px solid var(--ab-blue);outline-offset:2px} /* Chapter chips under the video player, on the same blue as the title bar; the playing chapter turns white. */ .site-video-chapters{display:flex;flex-wrap:wrap;gap:6px;padding:12px 14px 14px;background:#315dea;counter-reset:chapter} .site-video-chapters[hidden]{display:none} .site-video-chapter{display:inline-flex;align-items:center;gap:7px;padding:5px 11px 5px 6px;border:1px solid rgba(255,255,255,.2);border-radius:8px;background:rgba(255,255,255,.1);color:#e8eeff;font:inherit;font-size:12px;font-weight:500;line-height:1.4;letter-spacing:-.2px;cursor:pointer;word-break:keep-all;transition:background-color .2s ease,border-color .2s ease,color .2s ease} .site-video-chapter::before{counter-increment:chapter;content:counter(chapter,decimal-leading-zero);display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:18px;border-radius:5px;background:rgba(255,255,255,.16);color:#fff;font-size:10px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:0;transition:background-color .2s ease,color .2s ease} @media(hover:hover){.site-video-chapter:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.36);color:#fff}} .site-video-chapter[aria-current]{background:#fff;border-color:#fff;color:#1f45c4;box-shadow:0 2px 8px rgba(10,30,100,.25)} .site-video-chapter[aria-current]::before{background:#315dea;color:#fff} .site-video-chapter:focus-visible{outline:2px solid #fff;outline-offset:2px} /* Server-side features use the same amber as the "서버 수정" marks in the feature list. */ .site-video-chapter.is-server{color:#ffe9c2;border-color:rgba(255,208,120,.35)} .site-video-chapter.is-server::before{background:rgba(255,196,90,.3);color:#ffe2a8} .site-video-chapter.is-server[aria-current]{background:#fff;border-color:#fff;color:#9a6210} .site-video-chapter.is-server[aria-current]::before{background:#d9921c;color:#fff} /* Wide screens: chapters stand in a column right of the player, straight on the backdrop. Keep 216px in sync with CHAPTER_COLUMN in site.js. */ @media(min-width:1000px){ .site-video-dialog.has-chapters{overflow:visible;transform:translateX(-108px)} .site-video-dialog.has-chapters .site-media-toolbar{border-radius:15px 15px 0 0} .site-video-dialog.has-chapters video{border-radius:0 0 15px 15px} .site-video-dialog.has-chapters .site-video-chapters{position:absolute;top:0;bottom:0;left:calc(100% + 16px);width:200px;flex-direction:column;flex-wrap:nowrap;gap:6px;padding:0 4px 0 0;background:none;overflow-y:auto;scrollbar-width:thin} .site-video-dialog.has-chapters .site-video-chapter{flex-shrink:0;width:100%;padding:7px 12px 7px 7px;border-color:#e1e7ef;background:#fff;color:#2a3a52;text-align:left;box-shadow:0 2px 8px rgba(17,24,39,.08)} .site-video-dialog.has-chapters .site-video-chapter::before{flex-shrink:0;background:#eef3ff;color:#315dea} .site-video-dialog.has-chapters .site-video-chapter:hover{border-color:#adc0fb;background:#fff;color:#315dea} .site-video-dialog.has-chapters .site-video-chapter[aria-current]{border-color:#315dea;background:#315dea;color:#fff;box-shadow:0 4px 14px rgba(49,93,234,.3)} .site-video-dialog.has-chapters .site-video-chapter[aria-current]::before{background:rgba(255,255,255,.2);color:#fff} .site-video-dialog.has-chapters .site-video-chapter.is-server::before{background:#fff1d6;color:#b07410} .site-video-dialog.has-chapters .site-video-chapter.is-server:hover{border-color:#f0c878;color:#9a6210} .site-video-dialog.has-chapters .site-video-chapter.is-server[aria-current]{border-color:#d9921c;background:#d9921c;color:#fff;box-shadow:0 4px 14px rgba(217,146,28,.3)} .site-video-dialog.has-chapters .site-video-chapter.is-server[aria-current]::before{background:rgba(255,255,255,.22);color:#fff} .site-video-dialog.has-chapters .site-video-chapter:focus-visible{outline-color:#315dea} } /* Focus returned from a closed dialog stays put but is not ringed. */ .site-focus-restored:focus-visible{outline:none!important} /* Card preview follows the hovered feature: its first frame fades in under the play button, and the item stays marked. */ #allnight-blue-detail .ab-feature .site-video-preview video{transition:opacity .25s ease} #allnight-blue-detail .ab-feature .site-video-preview.is-loading video{opacity:.35} #allnight-blue-detail .ab-spot-list li:has(.is-previewing){color:var(--ab-blue)} /* Standard panel: no surrounding card, so the convenience feature card uses the full content width. */ #allnight-blue-detail #abd-standard.ab-extra-wrap{padding:0;border:0;border-radius:0;background:none} #allnight-blue-detail #abd-standard .ab-tier-close{margin-top:44px} /* A larger convenience feature card: wider video column and roomier list. */ /* The list column is wide enough for the longest feature name on one line; the video takes the rest. */ #allnight-blue-detail #abd-standard .ab-feature.ab-spotlight{grid-template-columns:minmax(0,1fr) clamp(440px,44%,490px)} #allnight-blue-detail #abd-standard .ab-spotlight .ab-media{padding:0;background:none;align-self:start} #allnight-blue-detail #abd-standard .ab-feature.ab-spotlight .ab-copy{padding:36px 36px 36px 32px} #allnight-blue-detail #abd-standard .ab-spotlight h3{font-size:28px} #allnight-blue-detail #abd-standard .ab-spotlight .ab-spot-list{gap:11px 18px} /* Columns hug their longest name, so the column gap is the visible space between the two lists. */ @media(min-width:581px){#allnight-blue-detail #abd-standard .ab-spotlight .ab-spot-list{grid-template-columns:repeat(2,minmax(0,max-content));column-gap:72px}} /* Just above the one-column breakpoint the list column is narrowest: a smaller gap keeps every name on one line. */ @media(min-width:1001px) and (max-width:1199px){#allnight-blue-detail #abd-standard .ab-spotlight .ab-spot-list{column-gap:48px}} #allnight-blue-detail #abd-standard .ab-spot-list li{font-size:14px} @media(max-width:1000px){#allnight-blue-detail #abd-standard .ab-feature.ab-spotlight{grid-template-columns:1fr}#allnight-blue-detail #abd-standard .ab-feature.ab-spotlight .ab-copy{padding:22px}#allnight-blue-detail #abd-standard .ab-spotlight .ab-media{padding:0}} /* Features whose clip is not recorded yet: listed, but not clickable. */ #allnight-blue-detail .ab-spot-list li.is-pending{cursor:default} @media(hover:hover){#allnight-blue-detail .ab-spot-list li.is-pending:hover{color:#3d4a5c}} /* The convenience feature card sits directly on the page: no outline, and no hover outline or shadow. */ #allnight-blue-detail #abd-standard .ab-feature.ab-spotlight, #allnight-blue-detail #abd-standard .ab-feature.ab-spotlight:hover{border:0;box-shadow:none} /* Without the "편의 기능" title the head keeps only the server legend, at the right end. */ #allnight-blue-detail #abd-standard .ab-spot-head{justify-content:space-between} /* Convenience card: the list starts level with the top of the video, and the video carries its own rounded corners (the card is taller than the video, so the card's rounding only ever reached the video's top-left corner). */ #allnight-blue-detail #abd-standard .ab-feature.ab-spotlight{border-radius:0;overflow:visible} #allnight-blue-detail #abd-standard .ab-feature.ab-spotlight .ab-copy{justify-content:flex-start;padding-top:0} #allnight-blue-detail #abd-standard .ab-spotlight .site-video-preview{border-radius:var(--ab-radius)} @media(max-width:1000px){#allnight-blue-detail #abd-standard .ab-feature.ab-spotlight .ab-copy{padding-top:22px}} /* Side-by-side layout: the video's top lines up with the "서버 수정" legend. */ @media(min-width:1001px){#allnight-blue-detail #abd-standard .ab-spotlight .ab-media{margin-top:12px}} /* No rule between the legend and the list; "그 외 기능" follows the convenience card more closely. */ #allnight-blue-detail #abd-standard .ab-spotlight .ab-spot-list{margin-top:34px;padding-top:0;border-top:0} #allnight-blue-detail #abd-standard .ab-plain-title{margin-top:12px;padding-top:20px} /* Side-by-side layout: the "서버 수정" line sits on the video's top edge and the list fills the video's height below it. The copy's bottom padding moves to the card, so the space before "그 외 기능" stays the same. */ @media(min-width:1001px){ #allnight-blue-detail #abd-standard .ab-feature.ab-spotlight{align-items:start;padding-bottom:36px} #allnight-blue-detail #abd-standard .ab-feature.ab-spotlight .ab-copy{padding-bottom:0} #allnight-blue-detail #abd-standard .ab-spotlight .ab-media{align-self:start;margin-top:0} #allnight-blue-detail #abd-standard .ab-spotlight :is(.ab-spot-hint,.ab-spot-legend){top:0} #allnight-blue-detail #abd-standard .ab-spotlight .ab-spot-list{margin-top:24px} } /* Hint opposite the "서버 수정" legend: the list items play their clips. Sits on the legend's line. */ #allnight-blue-detail .ab-spot-hint{position:relative;top:10px;display:inline-flex;align-items:center;gap:6px;min-width:0;font-size:12px;font-weight:500;color:#657181;word-break:keep-all} #allnight-blue-detail .ab-spot-hint-icon{position:relative;flex-shrink:0;width:16px;height:16px;border-radius:50%;background:#e3ebff} #allnight-blue-detail .ab-spot-hint-icon::after{content:"";position:absolute;left:6px;top:4.5px;border-style:solid;border-width:3.5px 0 3.5px 5.5px;border-color:transparent transparent transparent var(--ab-blue)} /* Optional one-line note under an "그 외 기능" item, quieter than the name. */ #allnight-blue-detail .ab-plain-desc{display:block;margin-top:2px;font-size:12px;font-weight:400;line-height:1.5;color:var(--ab-muted);word-break:keep-all} /* Checkmarks: one centred SVG tick inside each circle, in every checked list. The earlier rotated-border ticks sat on half pixels, so some looked off-centre at normal size. */ #allnight-blue-detail :is(.ab-viewer-features li,.ab-plain-features li,.ab-spot-list li)::after, #allnight-blue-detail .ab-spot-legend-mark::after{content:none} #allnight-blue-detail :is(.ab-viewer-features li,.ab-plain-features li,.ab-spot-list li)::before{background:#e3ebff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.6 8.2 6.9 10.5 11.4 5.7' fill='none' stroke='%23315dea' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% 100% no-repeat} #allnight-blue-detail .ab-spot-list li.is-server::before, #allnight-blue-detail .ab-spot-legend-mark{background:#fff1d6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.6 8.2 6.9 10.5 11.4 5.7' fill='none' stroke='%23c98a1b' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% 100% no-repeat} /* "그 외 기능" in columns: every cell is as tall as a name plus a note, so rows keep one rhythm whether or not an item has a note. One column on phones needs no padding-out. */ @media(min-width:581px){ #allnight-blue-detail #abd-standard .ab-plain-features{gap:22px 28px} #allnight-blue-detail #abd-standard .ab-plain-features li:has(.ab-plain-desc){min-height:41px} } /* A little more room between the "그 외 기능" title and its list. */ #allnight-blue-detail #abd-standard .ab-plain-title+.ab-plain-features{margin-top:20px} /* Previous / next feature: two buttons floating on the backdrop just below the popup, centred. The popup is lifted by half their height (+ gap) so popup and buttons stay centred together; keep 12px in sync with NAV_GAP in site.js. */ .site-video-dialog.has-nav{overflow:visible;transform:translateY(calc(var(--video-nav-height,50px) / -2 - 6px))} .site-video-dialog.has-nav .site-media-toolbar{border-radius:16px 16px 0 0} .site-video-dialog.has-nav video{border-radius:0 0 16px 16px} .site-video-nav{position:absolute;top:calc(100% + 12px);left:0;right:0;display:flex;justify-content:center;gap:16px} .site-video-nav[hidden]{display:none} /* Both buttons share one width (fits the longest feature name) so the pair stays symmetric. */ .site-video-step{position:relative;display:flex;flex-direction:column;min-width:0;width:min(250px,calc(50% - 8px));padding:7px 16px 7px 32px;border:1px solid #fff;border-radius:10px;background:#fff;color:#192432;font:inherit;text-align:left;cursor:pointer;box-shadow:0 6px 20px rgba(17,24,39,.16);transition:border-color .2s ease,color .2s ease,background-color .2s ease} .site-video-step[data-step="1"]{align-items:flex-end;padding:7px 32px 7px 16px;text-align:right} .site-video-step::before{content:"";position:absolute;top:50%;left:14px;width:7px;height:7px;border-left:2px solid #315dea;border-bottom:2px solid #315dea;transform:translateY(-50%) rotate(45deg)} .site-video-step[data-step="1"]::before{left:auto;right:14px;transform:translateY(-50%) rotate(-135deg)} .site-video-step-dir{font-size:11px;line-height:1.4;color:#657181} .site-video-step-name{max-width:100%;overflow:hidden;font-size:14px;font-weight:600;line-height:1.45;text-overflow:ellipsis;white-space:nowrap} @media(hover:hover){.site-video-step:hover{border-color:#adc0fb;background:#f5f8ff;color:#315dea}} .site-video-step:focus-visible{outline:2px solid #fff;outline-offset:2px} @media(max-width:580px){.site-video-step{padding-left:28px}.site-video-step[data-step="1"]{padding:7px 28px 7px 12px}.site-video-step-name{font-size:13px}} /* The four highlight cards share the Standard button's neutral surface and outline. */ #allnight-blue-detail .ab-specs .ab-spec{background:#f7f8fa;border-color:#e5e8ee} /* "주요 기능" heads the Standard panel in the same style as "그 외 기능", without the rule above it. */ #allnight-blue-detail #abd-standard .ab-main-title{margin:28px 0 18px;padding-top:0;border-top:0} /* Standard panel headings: larger titles, a tighter gap under "주요 기능", and no rule above "그 외 기능" (spacing alone separates the two lists). */ #allnight-blue-detail #abd-standard .ab-plain-title{font-size:22px;letter-spacing:-.6px} #allnight-blue-detail #abd-standard .ab-main-title{margin-bottom:6px} #allnight-blue-detail #abd-standard .ab-plain-title:not(.ab-main-title){margin-top:16px;padding-top:0;border-top:0} @media(max-width:580px){#allnight-blue-detail #abd-standard .ab-plain-title{font-size:20px}#allnight-blue-detail #abd-standard .ab-plain-title:not(.ab-main-title){margin-top:14px}} /* Symbols in front of the Standard panel headings, in the site's blue line-icon style. */ #allnight-blue-detail #abd-standard .ab-plain-title{display:flex;align-items:center;gap:10px} #allnight-blue-detail .ab-title-icon{display:grid;place-items:center;flex-shrink:0;width:34px;height:34px;border-radius:10px;background:#eef3ff;color:#315dea} #allnight-blue-detail .ab-title-icon svg{width:19px;height:19px} @media(max-width:580px){#allnight-blue-detail .ab-title-icon{width:30px;height:30px;border-radius:9px}#allnight-blue-detail .ab-title-icon svg{width:17px;height:17px}} /* More air in the Standard panel: well below the tier buttons, and between the two feature groups. */ #allnight-blue-detail #abd-standard .ab-main-title{margin-top:36px} #allnight-blue-detail #abd-standard .ab-plain-title:not(.ab-main-title){margin-top:36px} @media(max-width:580px){#allnight-blue-detail #abd-standard .ab-main-title{margin-top:28px}#allnight-blue-detail #abd-standard .ab-plain-title:not(.ab-main-title){margin-top:28px}} /* Section bands: WHY ALLNIGHT (white) / RESOURCE VIEWER (soft grey) / STANDARD & PREMIUM (white) / SIMPLE START (soft grey) / FAQ (white). Grey is painted edge to edge with a spread shadow clipped to the element's own height, so it never causes horizontal scrolling. */ /* The four WHY ALLNIGHT highlights sit on the page without cards. */ #allnight-blue-detail .ab-specs .ab-spec, #allnight-blue-detail .ab-specs .ab-spec:hover{padding:8px 12px;border:0;border-radius:0;background:none;box-shadow:none} #allnight-blue-detail .ab-viewer{margin-top:72px;padding-block:72px;background:var(--ab-soft);box-shadow:0 0 0 100vmax var(--ab-soft);clip-path:inset(0 -100vmax)} #allnight-blue-detail .ab-intro{padding-top:72px} /* SIMPLE START: no card, the same grey band (the #abd-price rule is overridden too). */ #allnight-blue-detail .ab-pricing,#allnight-blue-detail #abd-price{margin-top:72px;padding:64px 0;border:0;border-radius:0;background:var(--ab-soft);box-shadow:0 0 0 100vmax var(--ab-soft);clip-path:inset(0 -100vmax)} @media(max-width:760px){#allnight-blue-detail .ab-viewer{padding-block:56px}#allnight-blue-detail .ab-pricing,#allnight-blue-detail #abd-price{padding:52px 0}} @media(max-width:580px){ #allnight-blue-detail .ab-viewer{margin-top:48px;padding-block:44px} #allnight-blue-detail .ab-intro{padding-top:48px} #allnight-blue-detail .ab-pricing,#allnight-blue-detail #abd-price{margin-top:48px;padding:44px 0} } /* Premium panel: no surrounding card, same as Standard; its feature cards keep their own outlines. */ #allnight-blue-detail #abd-extra.ab-extra-wrap{margin-top:36px;padding:0;border:0;border-radius:0;background:none} #allnight-blue-detail #abd-extra .ab-tier-close{margin-top:44px} @media(max-width:580px){#allnight-blue-detail #abd-extra.ab-extra-wrap{margin-top:28px}} /* The sticky header is white from edge to edge. The page is capped at 1180px, so without this the full-width grey bands showed beside the header. No rule under the header (or above the footers). Painted with spread shadows (clipped to the header's height) so nothing adds horizontal scroll. */ #allnight-version-home .av-header{border-bottom-color:transparent;box-shadow:none} #allnight-version-home .av-header::before{content:"";position:absolute;left:0;right:0;z-index:-1;clip-path:inset(0 -100vmax);pointer-events:none} #allnight-version-home .av-header::before{top:0;bottom:0;background:#fff;box-shadow:0 0 0 100vmax #fff} #allnight-version-home .av-home-footer, #allnight-blue-detail .ab-footer{border-top:0} /* The header sticks to the top again; anchor jumps leave room for it. */ #allnight-version-home .av-header{position:sticky;top:0} html{scroll-padding-top:80px} @media(max-width:580px){html{scroll-padding-top:74px}} /* 주요 기능 list: a small dot instead of a checked circle, so the rows stay calm (server-side features are marked by an asterisk, below). "그 외 기능" keeps its ticks. */ #allnight-blue-detail .ab-spot-list li{padding-left:16px} #allnight-blue-detail .ab-spot-list li::before{top:calc(.8em - 2.5px);left:1.5px;width:5px;height:5px;border-radius:50%;background:#b3bcc9 none} #allnight-blue-detail .ab-spot-list li.is-server::before{background:#b3bcc9 none} #allnight-blue-detail .ab-spot-legend-mark{width:5px;height:5px;background:#6cc9a0 none} /* "서버 수정" badges on Premium cards follow the same green as the 주요 기능 dots. */ #allnight-blue-detail .ab-requirement[data-kind='server']{background:#e7f6ef} /* Server-side features: every dot is the same blue; a small asterisk at the top right of the name marks them instead, and the legend reads "* 서버 수정". The asterisk is decoration only, so it never enters the popup title or the previous / next names. */ #allnight-blue-detail .ab-spot-list li.is-server>:first-child::after{content:"*";position:relative;top:-.4em;margin-left:2px;font-size:1.05em;font-weight:700;line-height:0;color:#e5484d} #allnight-blue-detail .ab-spot-legend-mark{width:auto;height:auto;border-radius:0;background:none;font-size:16px;font-weight:700;line-height:1;color:#e5484d} #allnight-blue-detail .ab-spot-legend-mark::before{content:"*"} #allnight-blue-detail .ab-spot-legend{gap:3px} /* Hint icon: one SVG play triangle whose centroid sits on the circle's centre (the border-built triangle landed on half pixels and looked off-centre). */ #allnight-blue-detail .ab-spot-hint-icon{background:#e3ebff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.2 5.1v5.8l4.6-2.9z' fill='%23315dea' stroke='%23315dea' stroke-width='.8' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% 100% no-repeat} #allnight-blue-detail .ab-spot-hint-icon::after{content:none} /* "그 외 기능": server-side items get the same red asterisk, and the heading repeats the legend at its right end. */ #allnight-blue-detail .ab-plain-features li.is-server>span::after{content:"*";position:relative;top:-.4em;margin-left:2px;font-size:1.05em;font-weight:700;line-height:0;color:#e5484d} #allnight-blue-detail .ab-plain-title .ab-plain-legend{margin-left:auto;top:0;align-self:center;letter-spacing:0} /* Line the "그 외 기능" legend up with the 주요 기능 one, which sits inside the list column's right padding. */ #allnight-blue-detail #abd-standard .ab-plain-title:not(.ab-main-title){padding-right:36px} @media(max-width:1000px){#allnight-blue-detail #abd-standard .ab-plain-title:not(.ab-main-title){padding-right:22px}} /* 주요 기능 hover / previewed name: a softer blue than the brand blue, so the change is quiet. */ @media(hover:hover){#allnight-blue-detail .ab-spot-seek:hover{color:#5c78d6}} #allnight-blue-detail .ab-spot-list li:has(.is-previewing){color:#5c78d6} /* Main page: "SINCE 2016" story closing the page after the version cards, centred like the hero. */ #allnight-version-home .av-story{padding:44px 0 72px;text-align:center} #allnight-version-home .av-story h2{margin:10px 0 12px;font-size:clamp(20px,2.3vw,25px);line-height:1.35;letter-spacing:-1.2px;font-weight:700;word-break:keep-all} #allnight-version-home .av-story .av-copy{margin-inline:auto} @media(max-width:580px){#allnight-version-home .av-story{padding:32px 0 52px}#allnight-version-home .av-story h2{font-size:19px}} /* The story's closing promise: a notch smaller than the title, in blue. */ #allnight-version-home .av-story-promise{margin:0;font-size:clamp(14px,1.4vw,16px);line-height:1.5;font-weight:600;letter-spacing:-.4px;color:var(--av-blue);word-break:keep-all} @media(max-width:580px){#allnight-version-home .av-story-promise{font-size:14px}} /* Main page bands: hero (white) / version cards (soft grey, edge to edge) / SINCE 2016 (white). The cards are a shade lighter than the band, with a deeper outline. */ #allnight-version-home #site-home .av-versions{padding-block:64px;border-top:0;background:#f5f7fb;box-shadow:0 0 0 100vmax #f5f7fb;clip-path:inset(0 -100vmax)} #allnight-version-home #site-home .av-version, #allnight-version-home #site-home .av-version.av-sale{background:#f4f6f9} /* Outlined cards on the band, like the Standard button: a deeper grey outline; 2.0 keeps its blue one. */ #allnight-version-home #site-home .av-version:not(.av-sale){border-color:#cfd5df} @media(max-width:580px){#allnight-version-home #site-home .av-versions{padding-block:44px}} /* Softer page colour (all pages): an off-white base instead of pure white, a slightly deeper grey for the section bands so they still read, and pure white kept for cards and buttons so they lift off the base. Pop-ups and the launcher preview keep their own colours. */ html,body, #allnight-version-home, #allnight-blue-detail{background:#f9fafb} #allnight-blue-detail{--ab-soft:#eff2f6} #allnight-version-home .av-header{background:#f9fafb} #allnight-version-home .av-header::before{background:#f9fafb;box-shadow:0 0 0 100vmax #f9fafb} #allnight-version-home #site-home .av-versions{background:#eff2f6;box-shadow:0 0 0 100vmax #eff2f6} #allnight-blue-detail #abd-standard .ab-feature.ab-spotlight{background:none} /* A shade deeper than the page, with a slightly deeper outline. */ #allnight-blue-detail .ab-tier-standard{background:#f6f7f9;border-color:#cfd5df} #allnight-blue-detail #launcher-demo .ld-custom-guide .ld-custom-card{background:#f6f7f9;border-color:#cfd5df} #allnight-version-home .gd-toc a{background:#fff} /* Main page version cards carry the soft blue shadow at rest too; hovering deepens it a little. */ #allnight-version-home #site-home .av-version{box-shadow:0 12px 28px -12px rgba(49,93,234,.28)} @media(hover:hover){#allnight-version-home #site-home .av-version:hover{box-shadow:0 14px 32px -12px rgba(49,93,234,.36)}} /* Logo / artwork custom cards under the launcher: a soft resting shadow, warmer and a little deeper when hovered or selected (their highlight colour is gold). */ #allnight-blue-detail #launcher-demo .ld-custom-guide .ld-custom-card{box-shadow:0 10px 24px -12px rgba(25,36,50,.22)} /* The highlight states also come from launcher-demo.css (loaded later), so these selectors are one step more specific. */ #allnight-blue-detail #launcher-demo .ld-custom-guide .ld-custom-card[data-ld-highlight]:is(:hover,:focus-visible,[aria-pressed=true]), #allnight-blue-detail #launcher-demo[data-highlight=logo] .ld-custom-guide .ld-custom-card[data-ld-highlight=logo], #allnight-blue-detail #launcher-demo[data-highlight=art] .ld-custom-guide .ld-custom-card[data-ld-highlight=art]{box-shadow:0 12px 28px -12px rgba(165,123,41,.38)} /* Standard / Premium buttons: a soft resting shadow (neutral for Standard, blue for Premium), slightly deeper on hover, and no lift on hover. */ #allnight-blue-detail .ab-tier-standard{box-shadow:0 10px 24px -12px rgba(25,36,50,.22)} #allnight-blue-detail .ab-tier-premium{box-shadow:0 12px 28px -12px rgba(49,93,234,.28)} @media(hover:hover){ #allnight-blue-detail .ab-tier-standard:hover{box-shadow:0 12px 28px -12px rgba(25,36,50,.3)} #allnight-blue-detail .ab-tier-premium:hover{box-shadow:0 14px 32px -12px rgba(49,93,234,.36)} } /* The Standard panel contains its heading's top margin at all times (flow-root). Otherwise the margin collapsed through the panel normally but not while the open animation clipped it, so the content jumped up when the animation ended. The panel's own margin is dropped so the visible gap is still the heading's 36px (28px on phones). */ #allnight-blue-detail #abd-standard.ab-tier-panel{margin-top:0} #allnight-blue-detail #abd-standard.ab-tier-panel:not([hidden]){display:flow-root} /* Premium panel: one card per feature (see the grid rules below); every Premium feature is server-side, so each name carries the red asterisk. */ #allnight-blue-detail .ab-premium-media{margin:0} #allnight-blue-detail .ab-premium-media .site-video-preview{position:relative;display:block;width:100%;padding:0;border:0;border-radius:var(--ab-radius);line-height:0;background:#161b23;cursor:pointer;overflow:hidden;box-shadow:0 12px 28px -14px rgba(25,36,50,.35)} #allnight-blue-detail .ab-premium-media video{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;pointer-events:none;background:#161b23} #allnight-blue-detail .ab-premium-name{margin:0 0 12px;font-size:22px;line-height:1.4;font-weight:700;letter-spacing:-.7px;color:var(--ab-ink);word-break:keep-all} #allnight-blue-detail .ab-premium-name::after{content:"*";position:relative;top:-.4em;margin-left:3px;font-size:1em;font-weight:700;line-height:0;color:#e5484d} #allnight-blue-detail .ab-premium-copy p{margin:0;font-size:14px;line-height:1.85;color:var(--ab-muted);word-break:keep-all} @media(max-width:760px){ #allnight-blue-detail .ab-premium-name{margin-bottom:8px;font-size:19px} } /* Premium panel head: no title, only the "* 서버 수정" legend at the right. */ #allnight-blue-detail .ab-premium-head{display:flex;justify-content:flex-end;margin-bottom:4px} #allnight-blue-detail .ab-premium-head .ab-plain-legend{top:0} /* Video popup title bar in the colours of the tier button it was opened from, so Standard and Premium videos are told apart at a glance. Any other video (e.g. the Resource Viewer) looks Standard. */ .site-video-dialog[data-tier=standard] .site-media-toolbar{background:#f6f7f9;border-bottom:1px solid #cfd5df} .site-video-dialog[data-tier=standard] .site-media-toolbar h2{color:#192432} .site-video-dialog[data-tier=standard] .site-dialog-close{color:#40516c} .site-video-dialog[data-tier=premium] .site-media-toolbar{background:linear-gradient(180deg,#eaf0ff 0%,#f5f8ff 100%);border-bottom:1px solid #c9d6fb} .site-video-dialog[data-tier=premium] .site-media-toolbar h2{color:#315dea} .site-video-dialog[data-tier=premium] .site-dialog-close{color:#315dea} .site-video-dialog[data-tier] .site-dialog-close:is(:hover,:focus-visible){color:#192432} /* Premium features as a two-column card grid (one column on phones): video on top, name and description below, on the same surface as the tier buttons. */ #allnight-blue-detail .ab-premium-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px} #allnight-blue-detail .ab-premium-row{display:flex;flex-direction:column;border:1px solid #cfd5df;border-radius:var(--ab-radius);background:#f6f7f9;overflow:hidden;box-shadow:0 10px 24px -12px rgba(25,36,50,.22)} #allnight-blue-detail .ab-premium-media .site-video-preview{border-radius:0;box-shadow:none} #allnight-blue-detail .ab-premium-copy{padding:18px 20px 20px} #allnight-blue-detail .ab-premium-name{margin-bottom:8px;font-size:18px} #allnight-blue-detail .ab-premium-copy p{font-size:13px;line-height:1.8} @media(max-width:760px){#allnight-blue-detail .ab-premium-name{font-size:17px}} /* FAQ answers in the same blue as the SIMPLE START label. */ #allnight-blue-detail .ab-faq details p{color:var(--ab-blue)} /* Premium cards: the outline turns Premium blue on hover (or when the video inside is focused). */ #allnight-blue-detail .ab-premium-row{transition:border-color .25s ease,box-shadow .25s ease} @media(hover:hover){#allnight-blue-detail .ab-premium-row:hover{border-color:#8fa9f5;box-shadow:0 14px 30px -12px rgba(49,93,234,.3)}} #allnight-blue-detail .ab-premium-row:has(.site-video-preview:focus-visible){border-color:#8fa9f5} /* Soft shadow under the Resource Viewer video and the 주요 기능 preview, so they lift off the page like the cards do. */ #allnight-blue-detail .ab-viewer-media, #allnight-blue-detail #abd-standard .ab-spotlight .site-video-preview{box-shadow:0 18px 38px -14px rgba(25,36,50,.55),0 2px 6px rgba(25,36,50,.12)} /* No light outline around the Resource Viewer video: on the grey band it read as a white line. The shadow now marks its edge. */ #allnight-blue-detail .ab-viewer-media{border:0} /* Eight Premium features: four columns on wide screens (4 + 4), two on tablets, one on phones. Cards are narrower, so the copy is a little tighter. */ #allnight-blue-detail .ab-premium-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px} #allnight-blue-detail .ab-premium-copy{padding:16px 16px 18px} #allnight-blue-detail .ab-premium-name{font-size:16px;letter-spacing:-.5px} @media(max-width:1000px){#allnight-blue-detail .ab-premium-list{grid-template-columns:repeat(2,minmax(0,1fr))}#allnight-blue-detail .ab-premium-name{font-size:17px}} @media(max-width:580px){#allnight-blue-detail .ab-premium-list{grid-template-columns:1fr;gap:16px}} /* A feature whose video is not recorded yet: same 4:3 frame, with a quiet note instead of a player. */ #allnight-blue-detail .ab-premium-pending{display:grid;place-items:center;aspect-ratio:4/3;background:#e6eaf0;color:#8a95a6;font-size:13px;font-weight:600;letter-spacing:-.2px} /* Premium: no per-feature asterisk; one note above the cards says every Premium feature is server-side. */ #allnight-blue-detail .ab-premium-name::after{content:none} #allnight-blue-detail .ab-premium-head{justify-content:flex-start;margin-bottom:16px} #allnight-blue-detail .ab-premium-note{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:13px;font-weight:500;line-height:1.5;color:#3d4a5c;word-break:keep-all} #allnight-blue-detail .ab-premium-note::before{content:"i";display:grid;place-items:center;flex-shrink:0;width:16px;height:16px;border-radius:50%;background:#e3ebff;color:#315dea;font:700 11px/1 Georgia,serif} /* Premium note as a notice box across the grid, marked with the same red asterisk Standard uses for server-side features. */ #allnight-blue-detail .ab-premium-head{display:block;margin-bottom:18px} #allnight-blue-detail .ab-premium-note{display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;padding:13px 18px;border:1px solid #c9d6fb;border-radius:10px;background:linear-gradient(180deg,#eaf0ff 0%,#f5f8ff 100%);font-size:15px;font-weight:600;letter-spacing:-.3px;color:#192432} #allnight-blue-detail .ab-premium-note::before{content:"*";display:block;width:auto;height:auto;border-radius:0;background:none;font:700 20px/1 Pretendard,'Malgun Gothic',sans-serif;color:#e5484d;position:relative;top:3px} @media(max-width:580px){#allnight-blue-detail .ab-premium-note{font-size:14px;padding:12px 14px}} /* Premium note without the box: just the red asterisk and the bold line. */ #allnight-blue-detail .ab-premium-note{padding:0;border:0;border-radius:0;background:none} @media(max-width:580px){#allnight-blue-detail .ab-premium-note{padding:0}} /* Premium note: smaller, regular-weight text; the red asterisk still draws the eye. */ #allnight-blue-detail .ab-premium-note{gap:6px;font-size:13px;font-weight:400;letter-spacing:0;color:#3d4a5c} #allnight-blue-detail .ab-premium-note::before{font-size:16px;top:2px} @media(max-width:580px){#allnight-blue-detail .ab-premium-note{font-size:13px}} /* The open tier button is filled, like a selected tab: Standard in slate grey-blue, Premium in blue, white text. Its round arrow badge stays white so the "접기" direction still reads. */ #allnight-blue-detail .ab-tier{transition:background-color .25s ease,border-color .25s ease,color .25s ease,box-shadow .25s ease} #allnight-blue-detail .ab-tier-standard[aria-expanded='true']{background:#4a5870;border-color:#4a5870;color:#fff} #allnight-blue-detail .ab-tier-premium[aria-expanded='true']{background:#315dea;border-color:#315dea;color:#fff} #allnight-blue-detail .ab-tier[aria-expanded='true'] strong{color:#fff} #allnight-blue-detail .ab-tier[aria-expanded='true'] small, #allnight-blue-detail .ab-tier[aria-expanded='true'] .ab-tier-hint{color:rgba(255,255,255,.78)} #allnight-blue-detail .ab-tier[aria-expanded='true'] .ab-tier-icon{border-color:#fff} @media(hover:hover){ #allnight-blue-detail .ab-tier-standard[aria-expanded='true']:hover{border-color:#4a5870} #allnight-blue-detail .ab-tier-premium[aria-expanded='true']:hover{border-color:#315dea} } #allnight-blue-detail .ab-tier-standard[aria-expanded='true'] .ab-tier-icon{color:#4a5870} #allnight-blue-detail .ab-tier-premium[aria-expanded='true'] .ab-tier-icon{color:#315dea} /* Heading symbols (주요 기능 / 그 외 기능) without the rounded tile behind them. */ #allnight-blue-detail .ab-title-icon{width:auto;height:auto;border-radius:0;background:none} #allnight-blue-detail .ab-title-icon svg{width:22px;height:22px} @media(max-width:580px){#allnight-blue-detail .ab-title-icon{width:auto;height:auto}#allnight-blue-detail .ab-title-icon svg{width:20px;height:20px}} /* Premium card details as short bullet lines with the same small grey dot as the 주요 기능 list. */ #allnight-blue-detail .ab-premium-points{display:grid;gap:4px;margin:0;padding:0;list-style:none} #allnight-blue-detail .ab-premium-points li{position:relative;padding-left:13px;font-size:13px;line-height:1.7;color:var(--ab-muted);word-break:keep-all} #allnight-blue-detail .ab-premium-points li::before{content:"";position:absolute;left:1px;top:calc(.85em - 2px);width:4px;height:4px;border-radius:50%;background:#b3bcc9} /* Price block: the "스탠다드" label and the Premium note were 11px muted grey and hard to read. */ #allnight-blue-detail .ab-price-side>span{font-size:14px;font-weight:600;color:#3d4a5c} #allnight-blue-detail .ab-price-side small{font-size:13px;font-weight:500;color:#3d4a5c;margin-top:12px} /* SIMPLE START note ("프리미엄 기능은 개별 판매하지 않습니다.") stands out a little more. */ #allnight-blue-detail .ab-pricing p{font-size:13px;font-weight:600;color:#3d4a5c} /* Supporting lines in bold: hero copy, version card copy, highlight card captions, tier button subtitles and the footer tagline. */ #allnight-version-home .av-copy, #allnight-version-home .av-version p, #allnight-blue-detail .ab-specs .ab-spec span:not(.ab-spec-icon):not(.ab-spec-emphasis), #allnight-blue-detail .ab-tier small, #allnight-version-home .av-home-footer span:first-of-type, #allnight-blue-detail .ab-footer span:first-of-type{font-weight:600} /* "그 외 기능": feature names one step larger, their notes in bold. */ #allnight-blue-detail .ab-plain-features li{font-size:14px} #allnight-blue-detail .ab-plain-desc{font-size:12.5px;font-weight:600} #allnight-blue-detail .ab-plain-desc{color:#8a95a6} /* Bolded captions read a touch heavy, so lighten them: WHY ALLNIGHT card lines. */ #allnight-blue-detail .ab-specs .ab-spec span:not(.ab-spec-icon):not(.ab-spec-emphasis){color:#8a95a6} /* Same lightening for the pricing notes and the tier button subtitles (the filled open state keeps its white). */ #allnight-blue-detail .ab-pricing p, #allnight-blue-detail .ab-price-side small, #allnight-blue-detail .ab-tier small{color:#8a95a6} /* Slimmer header: shorter bar, slightly smaller logo and contact button. Touch devices keep the 44px tap target from the rule above. */ #allnight-version-home .av-header{min-height:52px} #allnight-version-home .av-logo img{width:150px} #allnight-version-home .av-nav .av-contact{min-height:34px;padding-block:6px} @media(max-width:580px){ #allnight-version-home .av-header{min-height:48px} #allnight-version-home .av-logo img{width:132px} } /* ===== Guide page: each big section is an expand / collapse button (several may be open). ===== */ #allnight-version-home .gd-acc{margin-top:12px} #allnight-version-home .gd-acc-toggle{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;min-height:76px;padding:18px 22px;border:1px solid #cfd5df;border-radius:12px;background:#f6f7f9;color:#192432;text-align:left;font:inherit;cursor:pointer;box-shadow:0 10px 24px -12px rgba(25,36,50,.22);transition:background-color .25s ease,border-color .25s ease,color .25s ease,box-shadow .25s ease} #allnight-version-home .gd-acc-copy strong{display:block;font-size:18px;line-height:1.4;font-weight:650;letter-spacing:-.5px} #allnight-version-home .gd-acc-copy small{display:block;margin-top:2px;font-size:12px;font-weight:600;color:#8a95a6} #allnight-version-home .gd-acc-icon{position:relative;flex-shrink:0;width:32px;height:32px;border-radius:50%;background:#fff;border:1px solid #e5e8ee;transition:transform .3s cubic-bezier(.22,1,.36,1),border-color .25s ease} #allnight-version-home .gd-acc-icon::before{content:"";position:absolute;left:50%;top:45%;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translate(-50%,-50%) rotate(45deg)} @media(hover:hover){#allnight-version-home .gd-acc-toggle:hover{border-color:#aeb6c4;box-shadow:0 12px 28px -12px rgba(25,36,50,.3)}} #allnight-version-home .gd-acc-toggle:focus-visible{outline:2px solid var(--av-blue);outline-offset:3px} #allnight-version-home .gd-acc-toggle[aria-expanded="true"]{background:#4a5870;border-color:#4a5870;color:#fff} #allnight-version-home .gd-acc-toggle[aria-expanded="true"] small{color:rgba(255,255,255,.78)} #allnight-version-home .gd-acc-toggle[aria-expanded="true"] .gd-acc-icon{border-color:#fff;color:#4a5870;transform:rotate(180deg)} #allnight-version-home .gd-acc-panel{padding-top:18px} #allnight-version-home .gd-acc-panel[hidden]{display:none} @media(max-width:580px){ #allnight-version-home .gd-acc-toggle{min-height:66px;padding:14px 16px} #allnight-version-home .gd-acc-copy strong{font-size:16px} } /* Guide DB reference: grouped table names, each opening its own description. */ #allnight-version-home .gd-db-group+.gd-db-group{margin-top:26px} #allnight-version-home .gd-db-group h3{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-size:15px;font-weight:700;letter-spacing:-.4px} #allnight-version-home .gd-db-count{font-size:12px;font-weight:600;color:#8a95a6} #allnight-version-home .gd-db-list{display:grid;gap:6px;margin:0;padding:0;list-style:none} #allnight-version-home .gd-db-item{border:1px solid var(--av-line);border-radius:9px;background:#fff;overflow:hidden} #allnight-version-home .gd-db-item summary{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;padding:11px 14px;cursor:pointer;list-style:none} #allnight-version-home .gd-db-item summary::-webkit-details-marker{display:none} #allnight-version-home .gd-db-item code{font:13px/1.5 Consolas,'D2Coding','Malgun Gothic',monospace;color:#192432} #allnight-version-home .gd-db-label{font-size:12px;font-weight:600;color:#8a95a6} #allnight-version-home .gd-db-item p{margin:0;padding:0 14px 14px;font-size:13px;line-height:1.75;color:var(--av-muted)} @media(hover:hover){#allnight-version-home .gd-db-item summary:hover code{color:var(--av-blue)}} #allnight-version-home .gd-db-item[open]{border-color:#c9d6fb} #allnight-version-home .gd-db-reset{margin-top:28px;padding:18px 20px;border:1px solid #f0d8a8;border-radius:11px;background:#fff8e9} #allnight-version-home .gd-db-reset h3{margin:0 0 6px;font-size:15px;font-weight:700;color:#8a5a12} #allnight-version-home .gd-db-reset p{margin:0;font-size:13px;line-height:1.75;color:#8a6524} /* Guide buttons say 펼치기 / 접기 next to the arrow, like the tier buttons on the 2.0 page. */ #allnight-version-home .gd-acc-hint{margin-left:auto;font-size:12px;font-weight:500;color:#8a95a6;white-space:nowrap} #allnight-version-home .gd-acc-toggle[aria-expanded="true"] .gd-acc-hint{color:rgba(255,255,255,.78)} #allnight-version-home .gd-acc-hint-close, #allnight-version-home .gd-acc-toggle[aria-expanded="true"] .gd-acc-hint-open{display:none} #allnight-version-home .gd-acc-toggle[aria-expanded="true"] .gd-acc-hint-close{display:inline} @media(max-width:480px){#allnight-version-home .gd-acc-hint{display:none}} /* Guide video cards lift off the page like the other cards. */ #allnight-version-home .gd-video{box-shadow:0 12px 28px -14px rgba(25,36,50,.32)} /* Open section: more air before the next section's button than between items inside it, so the button below clearly belongs to the next section. */ #allnight-version-home .gd-acc-panel{padding-bottom:30px} #allnight-version-home .gd-acc-panel>:last-child{margin-bottom:0} /* Guide videos keep their own shape (they are not all 16:9), so no pillarboxing. The width / height attributes on each