:root{color-scheme:dark;--bg: #0b101b;--white: #f0f3fa;--muted: #a6a9b3;--line: rgb(196 207 227 / .22);--accent: #adbedb;--tint: 32, 47, 77;--dock-height: 250px;--sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;--serif: "Noto Serif KR", "Nanum Myeongjo", "AppleMyungjo", serif;background:var(--bg)}*{box-sizing:border-box}html{scroll-padding-bottom:calc(var(--dock-height) + 20px)}body{margin:0;background:var(--bg);color:var(--white);font:16px/1.6 var(--sans);word-break:keep-all;-webkit-text-size-adjust:100%;padding-bottom:var(--dock-height)}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}a,button{-webkit-tap-highlight-color:transparent}:where(a,button):focus-visible{outline:2px solid #fff;outline-offset:4px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.experience{position:relative;min-height:100svh;overflow:hidden;isolation:isolate;padding-bottom:20px}.scene{position:absolute;inset:0 0 auto;height:100svh;min-height:640px;z-index:-2;overflow:hidden}.scene-haze{position:absolute;inset:0;background:radial-gradient(ellipse at 55% 30%,rgb(var(--tint) / .75),transparent 76%);transition:background .8s}.portrait-wrap{position:absolute;inset:0 0 0 33%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 24%);mask-image:linear-gradient(90deg,transparent,#000 24%)}.portrait-wrap img,.portrait-wrap video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 24%;filter:saturate(.84)}.portrait-wrap picture{position:absolute;inset:0}.portrait-wrap video{opacity:0}.portrait-wrap video.on{opacity:1}.scene-shade{position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 0%,rgb(11 16 27 / .98) 22%,rgb(11 16 27 / .8) 35%,rgb(11 16 27 / .18) 59%,rgb(11 16 27 / .02) 80%),linear-gradient(0deg,var(--bg) 0%,rgb(11 16 27 / .93) 10%,rgb(11 16 27 / .47) 26%,transparent 51%),linear-gradient(180deg,rgb(5 10 20 / .5),transparent 21%)}.top{position:relative;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:16px;height:72px;margin:0 5.5%}.brand{font-family:var(--serif);font-size:18px;font-weight:500;letter-spacing:.02em;color:var(--white)}.brand span{color:var(--accent);margin-right:4px}.top-nav{display:flex;align-items:center;gap:8px;min-width:0}.top-link,.top-member{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border:1px solid rgb(220 230 247 / .28);border-radius:999px;font-size:13px;color:#d6dbe7;background:#0a0f1a4d;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.top-account{position:relative;min-width:0}.top-member{gap:6px;max-width:42vw;cursor:pointer;list-style:none}.top-member::-webkit-details-marker{display:none}.top-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.top-caret{font-size:10px;color:var(--muted);transition:transform .2s}.top-account[open] .top-caret{transform:rotate(180deg)}.top-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:6;display:grid;min-width:188px;padding:6px;border:1px solid rgb(220 230 247 / .2);border-radius:12px;background:#0e1421f5;box-shadow:0 12px 32px #00000073;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.top-menu-item{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:8px;font-size:14px;color:#d6dbe7;text-align:left;white-space:nowrap}.top-menu-item:hover{background:rgb(var(--tint) / .35);color:var(--white)}.top-link:hover,.top-member:hover,.top-account[open] .top-member{border-color:var(--accent);color:var(--white)}.profile{position:relative;z-index:2;width:380px;margin:72px 0 0 7%}.character.swap-in{animation:reveal .5s ease-out}.kicker{display:flex;align-items:center;gap:12px;margin:0;font-family:var(--serif);font-size:23px;font-weight:500;line-height:1.6;color:color-mix(in srgb,var(--accent) 78%,#fff)}.kicker>span:first-child{font-size:29px}.fine-line{flex:1;min-width:10px;max-width:45px;height:1px;background:linear-gradient(90deg,var(--accent),transparent);opacity:.5}.name-line{display:flex;align-items:baseline;gap:22px}.name-line h1{margin:0;font-family:var(--serif);font-size:58px;font-weight:500;letter-spacing:7px;line-height:1.5}.roman{font-family:Georgia,serif;font-size:14px;letter-spacing:5px;color:var(--accent)}.number{margin-left:auto;font-family:Georgia,serif;font-size:45px;color:#dddde21f}.traits{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0}.traits span{padding:6px 12px;border:1px solid var(--line);border-radius:2px;background:rgb(var(--tint) / .16);font-size:13px;color:#d3d2d4}.tabs{display:flex;gap:25px;margin-top:28px;border-bottom:1px solid var(--line)}.tabs button{position:relative;padding:0 0 12px;font-size:14px;color:#989ca9}.tabs button:before{content:"";position:absolute;inset:-12px -10px 0}.tabs button[aria-selected=true]{color:var(--accent)}.tabs button[aria-selected=true]:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent)}.panel{min-height:110px;padding-top:16px}.panel>p{margin:0;font-size:14px;line-height:1.9;color:#b8bdc9}.panel.greeting>p:first-child{font-family:var(--serif);font-size:17px;line-height:1.85;color:#edf0f9}.likes{display:flex;flex-wrap:wrap;gap:4px 12px;margin:10px 0 0;padding:0;list-style:none;font-size:12px;line-height:1.6;color:var(--accent)}.likes li{white-space:nowrap}.likes[hidden],.panel-note[hidden]{display:none}.panel-note{margin:10px 0 0!important;font-size:12px!important;color:#999fad!important}.art-caption{position:absolute;top:clamp(96px,calc(100svh - 620px),39%);right:4%;z-index:1;display:flex;align-items:center;gap:13px;margin:0;writing-mode:vertical-rl;font-family:Georgia,serif;font-size:11px;letter-spacing:3px;color:var(--accent);text-shadow:0 1px 7px #000}.art-caption span:first-child{font-size:22px;writing-mode:horizontal-tb}.art-caption i{width:1px;height:85px;background:linear-gradient(var(--accent),transparent);opacity:.5}.dock{position:fixed;inset:auto 0 0;z-index:5;display:grid;grid-template-columns:minmax(0,640px) minmax(260px,340px);gap:36px;justify-content:space-between;max-height:70dvh;overflow-y:auto;overscroll-behavior:contain;padding:18px 7% calc(18px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgb(11 16 27 / .92),var(--bg) 45%);border-top:1px solid var(--line);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.roster-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin:0 0 14px;font-size:14px;line-height:1.5;color:#c5ccdc}.roster-head>span:last-child{font-family:Georgia,serif;font-size:12px;letter-spacing:2px;white-space:nowrap}.roster-head b{font-weight:400;color:var(--accent)}.roster{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.pick{position:relative;display:block;height:111px;overflow:hidden;background:#1e2330;border:1px solid #565664;filter:saturate(.5);transition:transform .25s,border-color .25s,filter .25s}.pick:before{content:"";position:absolute;inset:4px;z-index:1;border:1px solid rgb(255 255 255 / .12);pointer-events:none}.pick:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 40%,#05080fe6)}.pick img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 20%;opacity:.66;transition:opacity .25s}.pick-name{position:absolute;left:0;right:0;bottom:9px;z-index:1;text-align:center;font-size:14px;letter-spacing:1px;text-shadow:0 1px 4px #000}.pick-mark{position:absolute;top:4px;left:50%;z-index:2;display:none;transform:translate(-50%);font-size:13px;color:var(--accent);text-shadow:0 0 8px #161319}.pick[aria-checked=true]{border-color:var(--accent);filter:none;transform:translateY(-5px);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 16%,transparent),0 0 22px color-mix(in srgb,var(--accent) 16%,transparent)}.pick[aria-checked=true] img,.pick:hover img{opacity:1}.pick[aria-checked=true] .pick-mark{display:block}.pick[aria-checked=true] .pick-name{color:var(--accent)}.pick:hover{filter:none;border-color:var(--accent);transform:translateY(-5px)}.key-hint{display:flex;align-items:center;gap:6px;margin:12px 0 0;font-size:11px;color:#8f94a3}.key-step{display:inline-grid;place-items:center;width:28px;height:28px;border:1px solid #3b4252;border-radius:4px;font-size:13px;color:#c5ccdc;transition:border-color .2s,color .2s}.key-step:hover{border-color:var(--accent);color:var(--accent)}.key-step:last-of-type{margin-right:4px}.start-area{align-self:center;display:grid;justify-items:center;gap:10px;text-align:center}.start{position:relative;display:flex;align-items:center;justify-content:center;gap:16px;width:100%;height:62px;background:linear-gradient(110deg,color-mix(in srgb,var(--accent) 65%,#fff),var(--accent));color:#101727;border:1px solid var(--accent);box-shadow:0 0 38px color-mix(in srgb,var(--accent) 18%,transparent);font-size:17px;font-weight:700;transition:filter .2s,transform .2s}.start:after{content:"";position:absolute;inset:5px;border:1px solid rgb(23 34 60 / .2);pointer-events:none}.start:hover{filter:brightness(1.1);transform:translateY(-2px)}.start-star{font-size:24px}.start-arrow{margin-left:6px;font-size:22px;font-weight:400}.start-note{margin:0;font-size:12px;color:#9ba1b0}.adult{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:32px;font-size:13px;color:#b9bfcc;border-bottom:1px solid rgb(185 191 204 / .4)}.adult:before{content:"";position:absolute;inset:-6px -12px}.adult:hover{color:var(--white)}.adult-badge{display:inline-grid;place-items:center;min-width:22px;height:18px;padding:0 5px;border-radius:4px;background:#a8332a;color:#fff;font-size:11px;font-weight:700}.sulsa-foot{position:relative;z-index:1;margin:0 7%;padding:20px 0 28px;border-top:1px solid rgb(196 207 227 / .12);font-size:11px;line-height:1.7;color:#7d8494}.sulsa-foot nav{display:flex;flex-wrap:wrap;gap:6px 14px;margin-bottom:8px}.sulsa-foot a{color:#9aa1b1}.sulsa-foot p{margin:0}@keyframes reveal{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@media(min-width:1450px){.profile{width:400px;margin-top:90px}.dock{grid-template-columns:minmax(0,680px) minmax(280px,360px)}.pick{height:123px}}@media(min-width:760px)and (max-height:850px){.profile{margin-top:40px}.name-line h1{font-size:52px}.tabs{margin-top:20px}.panel{min-height:100px}.pick{height:93px}}@media(min-width:760px)and (max-height:720px){.art-caption{display:none}}@media(min-width:760px)and (max-width:1100px){.profile{width:330px;margin-left:5%}.portrait-wrap{left:26%}.art-caption{display:none}.dock{grid-template-columns:minmax(0,1fr) 270px;gap:28px;padding-left:5%;padding-right:5%}.roster{gap:10px}.pick{height:100px}.start{font-size:15px}}@media(max-width:759px),(max-height:559px){:root{--dock-height: 210px}.scene{min-height:0;height:clamp(440px,76svh,620px)}.portrait-wrap{inset:0;-webkit-mask-image:none;mask-image:none}.portrait-wrap img,.portrait-wrap video{object-position:50% 13%;filter:saturate(.87)}.scene-shade{background:linear-gradient(180deg,rgb(5 10 20 / .68),transparent 130px,rgb(11 16 27 / .2) 220px,rgb(11 16 27 / .92) 360px,var(--bg) 490px),linear-gradient(90deg,rgb(11 16 27 / .2),transparent 85%)}.top{height:60px;margin:0 18px}.brand{font-size:16px}.profile{width:auto;margin:0 22px;padding-top:clamp(84px,calc(100svh - 540px - env(safe-area-inset-bottom)),240px)}.kicker{font-size:19px;gap:9px;text-shadow:0 2px 14px var(--bg)}.kicker>span:first-child{font-size:24px}.name-line{gap:16px}.name-line h1{font-size:40px;letter-spacing:5px;line-height:1.45;text-shadow:0 2px 20px rgb(19 23 37 / .35)}.roman{font-size:12px;letter-spacing:4px}.number{font-size:34px;color:#e0dbd333}.traits{display:none}.tabs{margin-top:10px}.tabs button{font-size:14px;padding-bottom:10px}.panel{min-height:72px;padding-top:10px}.panel>p{font-size:14px;line-height:1.65}.panel.greeting>p:first-child{font-size:15px;line-height:1.75}.art-caption,.key-hint{display:none}.dock{display:block;padding:12px 22px calc(12px + env(safe-area-inset-bottom))}.roster-head{margin-bottom:12px;font-size:13px;gap:8px}.roster{gap:7px}.pick{height:72px}.pick:before{inset:3px}.pick-name{bottom:6px;font-size:13px}.pick[aria-checked=true],.pick:hover{transform:translateY(-3px)}.pick-mark,.pick[aria-checked=true] .pick-mark{display:none}.start-area{margin-top:14px;gap:6px}.start{height:52px;gap:12px;font-size:16px}.start-star{font-size:21px}.start-arrow{margin-left:0}.start-note{font-size:11px}.sulsa-foot{margin:0 22px}}@media(max-width:360px){.profile{margin:0 18px}.dock{padding-left:18px;padding-right:18px}.name-line h1{font-size:36px}.roster{gap:5px}.pick{height:66px}}@media(max-height:559px){:root{--dock-height: 0px}body{padding-bottom:100px}.scene{height:100svh}.profile{padding-top:30svh;max-width:640px}.dock{position:static;max-height:none;margin-top:18px;background:none;border-top:0;backdrop-filter:none;-webkit-backdrop-filter:none}.start-area{position:fixed;inset:auto 0 0;z-index:5;display:grid;grid-template-columns:auto auto;justify-content:center;align-items:center;column-gap:16px;row-gap:4px;margin:0;padding:10px max(22px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left));background:linear-gradient(180deg,rgb(11 16 27 / .7),var(--bg) 45%);border-top:1px solid var(--line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}.start{width:min(420px,60vw);height:48px}.adult{grid-column:2;grid-row:1}.start-note{grid-column:1 / -1;grid-row:2;font-size:11px;line-height:1.5}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.portrait-wrap video{display:none}}