.account-entry{border:1px solid rgba(169,180,194,.32);border-radius:999px;padding:var(--space-text) var(--space-group);min-height:44px;background:rgba(237,224,194,.035);color:#EDE0C2;font:500 12px/1.4 'IBM Plex Sans KR',sans-serif;cursor:pointer}
.player-heading .account-entry{margin-left:auto}
.account-save{margin:0;padding:var(--space-control) var(--space-group);border:1px solid #FFB65C;border-radius:9px;background:transparent;color:#FFB65C;font:500 14px/1.5 'IBM Plex Sans KR',sans-serif;cursor:pointer}
.account-dialog{--account-gutter:var(--gutter-desktop);--account-line:rgba(169,180,194,.18);box-sizing:border-box;position:fixed;inset:var(--account-viewport-top,0) 0 auto auto;width:min(720px,60vw);max-width:none;height:var(--account-viewport-height,100dvh);max-height:none;margin:0;padding:0;border:0;border-left:1px solid var(--account-line);border-radius:0;background:#0E1A2B;color:#EDE0C2;box-shadow:-24px 0 100px rgba(0,0,0,.3);font:400 14px/1.7 'IBM Plex Sans KR',sans-serif;overflow:hidden;overscroll-behavior:contain;word-break:keep-all;overflow-wrap:anywhere;color-scheme:dark}
.account-dialog[open]{display:flex;flex-direction:column;animation:account-arrive .24s ease-out}
.account-dialog::backdrop{background:rgba(3,8,15,.55);backdrop-filter:blur(5px)}
.account-dialog[hidden],.account-dialog [hidden]{display:none!important}
.account-dialog *{box-sizing:border-box}
.account-header{flex:none;display:flex;align-items:center;justify-content:space-between;gap:var(--space-group);padding:var(--space-section) var(--account-gutter) var(--space-5)}
.account-eyebrow{display:block;color:#B9AB91;font-size:10px;line-height:1.6;font-weight:500;letter-spacing:.16em}
.account-dialog h2{margin:var(--space-text) 0 0;font:600 25px/1.4 'IBM Plex Sans KR',sans-serif;letter-spacing:-.04em}
.account-dialog h3{margin:0 0 var(--space-text);font:600 18px/1.5 'IBM Plex Sans KR',sans-serif;letter-spacing:-.035em}
.account-dialog button,.account-dialog input,.account-dialog select{font:inherit}
.account-dialog button{min-height:44px;padding:var(--space-control) var(--space-group);border:1px solid var(--account-line);border-radius:10px;background:transparent;color:#EDE0C2;cursor:pointer;transition:background .15s,border-color .15s}
.account-dialog button:hover{background:rgba(237,224,194,.06);border-color:rgba(237,224,194,.36)}
.account-dialog button:disabled{opacity:.55;cursor:wait}
.account-dialog button:focus-visible,.account-dialog a:focus-visible,.account-dialog input:focus-visible,.account-dialog select:focus-visible,.account-entry:focus-visible,.account-save:focus-visible{outline:3px solid #FFB65C;outline-offset:4px}
.account-dialog .account-close{width:44px;padding:0;border:1px solid var(--account-line);border-radius:50%;font:300 28px/1 Arial,sans-serif;color:#BCC3CC}
.account-dialog .account-primary{background:#FFB65C;border-color:#FFB65C;color:#251D15;font-weight:600}
.account-dialog .account-primary:hover{background:#FFC47A;border-color:#FFC47A}
.account-dialog .account-danger{color:#CAA6A0}
.account-navigation{flex:none;display:flex;flex-direction:column;gap:var(--space-group);padding:0 var(--account-gutter)}
.account-dialog .account-identity{display:flex;align-items:center;gap:var(--space-control);width:100%;margin:0;padding:0;text-align:left;border:0;border-radius:10px}
.account-avatar{display:grid;place-items:center;width:52px;height:52px;flex:none;border:1px solid rgba(255,182,92,.24);border-radius:18px;background:#1F2A37;color:#FFB65C;font:32px/1 Georgia,serif}
.account-identity-copy{display:grid;gap:3px}
.account-identity-copy strong{font-size:17px;font-weight:500}
.account-identity-copy small{color:#A9B4C2;font-size:12px;font-weight:400}
.account-identity-arrow{margin-left:auto;padding-right:var(--space-text);color:#9CAABB;font-size:20px}
.account-tabs{display:flex;gap:var(--space-7);border-bottom:1px solid var(--account-line)}
.account-dialog .account-tabs button{position:relative;flex:1;min-height:50px;padding:var(--space-control) 0 var(--space-group);border:0;border-radius:0;background:none;color:#9EABBD;font-size:14px}
.account-dialog .account-tabs button[aria-current=true]{color:#FFCB87;font-weight:600}
.account-tabs button[aria-current=true]::after{content:'';position:absolute;inset:auto 0 -1px;height:2px;border-radius:2px;background:#FFB65C}
.account-body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable;padding:var(--space-section) var(--account-gutter) var(--space-page);scroll-padding:var(--space-section)}
.account-body p{margin:0 0 var(--space-group)}
.account-content,.account-broadcast,.account-management{display:flex;flex-direction:column;gap:var(--space-group)}
.account-content:empty,.account-list:empty{display:none}
.account-content>:not(.account-welcome),.account-dialog .account-broadcast>*,.account-dialog .account-profile-form>*{margin:0}
.account-content>.account-welcome{align-self:center;width:100%}

.account-subtle{color:#A9B4C2;font-size:12px;line-height:1.8;white-space:pre-line}
.account-status{margin:0!important;min-height:0;color:#FFCB87;font-size:13px}
.account-status:not(:empty){padding:var(--space-group) 0 var(--space-1)}
.account-actions{display:flex;flex-wrap:wrap;gap:var(--space-control);margin:0}
.account-welcome{max-width:420px;margin:var(--space-control) auto 0;text-align:center}
.account-welcome-art{position:relative;isolation:isolate;width:270px;height:148px;margin:8px auto 38px;transform:rotate(-5deg);border:1px solid #D9C9A9;border-radius:3px;background:#EDE0C2;color:#534832;text-align:left;box-shadow:0 16px 38px rgba(0,0,0,.16)}
.account-welcome-art::before{content:'';position:absolute;z-index:-1;inset:0;transform:rotate(9deg) translate(3px,1px);border:1px solid #89919A;border-radius:3px;background:#A1A6A6;opacity:.55}
.account-welcome-art::after{content:'';position:absolute;left:22px;bottom:26px;width:126px;height:1px;background:#B5A88D;box-shadow:0 -14px #B5A88D}
.account-postcard-address{position:absolute;left:20px;top:23px;font:10px/1.5 'IBM Plex Sans KR',sans-serif;letter-spacing:.03em}
.account-postcard-line{position:absolute;left:20px;top:63px;font:12px/1.8 Hahmlet,serif}
.account-stamp{position:absolute;right:16px;top:15px;display:flex;align-items:center;flex-direction:column;width:64px;height:82px;padding:6px 0;border:3px dotted #BAAC8F;background:#31414D;color:#F1E5C9;text-align:center}
.account-stamp span,.account-stamp small{font:6px/1.5 'IBM Plex Sans KR',sans-serif;letter-spacing:.06em}
.account-stamp strong{font:38px/1.25 Georgia,serif;font-weight:400}
.account-welcome>.account-eyebrow{color:#BDAC90;font-size:11px;letter-spacing:.09em}
.account-welcome h3{margin:var(--space-control) 0 var(--space-control);font:500 29px/1.5 'IBM Plex Sans KR',sans-serif;letter-spacing:-.05em;white-space:pre-line}
.account-welcome>.account-subtle{font-size:13px}
.account-login-actions{display:grid;gap:var(--space-control);width:min(100%,336px);margin:var(--space-7) auto var(--space-5)}
.account-login-actions>.account-subtle{margin:0}
.account-dialog .account-provider{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:46px;min-height:46px;padding:0 12px;border-radius:8px;font:500 14px/20px Arial,'IBM Plex Sans KR',sans-serif}
.account-dialog .account-provider-google{border:1px solid #747775;background:#FFF;color:#1F1F1F}
.account-provider-google img{display:block;width:20px;height:20px;object-fit:contain;flex:none}
.account-dialog .account-provider-google:hover{background:#F2F2F2;border-color:#747775}
.account-dialog .account-provider-kakao{border:0;background:#FEE500;color:rgba(0,0,0,.85)}
.account-provider-kakao img{display:block;width:224px;height:46px;max-width:100%;object-fit:contain;flex:none}
.account-dialog .account-provider-kakao:hover{background:#FEE500}
/* Naver BI: #03A94D, the official N at 16px (minimum for a full button), label smaller than the logo, 8px apart. The label is HTML text like Google's so all three read at one size. */
.account-dialog .account-provider-naver{gap:8px;border:0;background:#03A94D;color:#FFF}
.account-provider-naver img{display:block;width:16px;height:16px;flex:none}
.account-dialog .account-provider-naver:hover{background:#03A94D}
.account-dialog .account-provider:disabled{opacity:1;cursor:wait}
.account-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.account-welcome .account-login-note{margin:var(--space-section) auto 0;padding-top:var(--space-section);border-top:1px solid var(--account-line);max-width:336px;color:#8F9DAE;font-size:11px}
.account-section-heading{display:flex;justify-content:space-between;align-items:center;gap:var(--space-control);margin:0}
.account-section-heading>div{display:flex;align-items:center;gap:var(--space-control);flex-wrap:wrap}
.account-section-heading h3{margin:0}
.account-count{color:#9EABBD;font-size:11px;white-space:nowrap;font-variant-numeric:tabular-nums}
.account-dialog .account-text-action{padding:0 1px;border:0;color:#C6BBA7;font-size:11px;line-height:1.6;text-align:right;background:none}
.account-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:246px;margin:0;padding:var(--space-page) var(--space-5);border:1px dashed rgba(169,180,194,.24);border-radius:14px;text-align:center;background:rgba(237,224,194,.018)}
.account-empty-mark{display:grid;place-items:center;width:54px;height:54px;margin-bottom:var(--space-5);border:1px solid rgba(255,182,92,.18);border-radius:50%;color:#D2BE9D;font:25px/1 Georgia,serif}
.account-empty h3{font-size:15px;font-weight:500}
.account-empty p{max-width:310px;margin:0;color:#9BA9BA}
.account-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-group)}
.account-list .account-row{display:block;width:100%;padding:var(--space-section) var(--space-section);text-align:left;border:1px solid #E1D4B7;border-radius:9px;background:#EDE0C2;color:#2B302F;box-shadow:0 5px 13px rgba(0,0,0,.07)}
.account-list .account-row:hover{border-color:#FFB65C;background:#F5EAD2}
.account-card-meta{display:flex;align-items:center;justify-content:space-between;gap:var(--space-control);margin-bottom:var(--space-control);color:#73664E;font-size:10px}
.account-card-meta small{font:inherit}
.account-card-meta>span:last-child{padding:2px 7px;border:1px solid #C6B898;border-radius:4px;font-size:9px}
.account-row strong{display:block;font:500 15px/1.8 Hahmlet,serif;white-space:pre-wrap;word-break:normal}
.account-card-reply{display:-webkit-box;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-top:var(--space-control);padding-top:var(--space-control);border-top:1px solid #D5C6A7;color:#74694F;font-size:12px;line-height:1.8;white-space:pre-wrap}
.account-card-open{display:block;margin-top:var(--space-group);color:#666247;font-size:10px;text-align:right}
.account-dialog .account-load-more{display:block;width:100%;margin:0;color:#C7C4B8;font-size:12px}
.account-dialog .account-back{margin:0;padding:0;border:0;color:#B5C0CF;font-size:12px}
.account-letter{margin:0;background:#EDE0C2;color:#2B302F;padding:var(--space-7);border-radius:6px;white-space:pre-wrap;word-break:normal;overflow-wrap:anywhere;font-family:Hahmlet,serif;font-size:15px;line-height:1.9}
.account-letter blockquote{margin:var(--space-section) 0 0;padding-top:var(--space-section);border-top:1px solid #C9BBA0;font-size:16px;line-height:1.9}
.account-letter small{display:block;margin-bottom:var(--space-5);color:#73664E;font:11px/1.7 'IBM Plex Sans KR',sans-serif}
.account-profile-form{display:flex;flex-direction:column;gap:var(--space-group);margin:0}
.account-field{display:grid;gap:var(--space-text);margin:0;font-size:13px}
.account-field>span,.account-avatars legend{font-weight:500;color:#DCCFB4}
.account-field input,.account-field select{width:100%;box-sizing:border-box;min-height:48px;padding:var(--space-control) var(--space-control);border:1px solid #485665;border-radius:9px;background:#152337;color:#EDE0C2;font-size:16px;line-height:1.5}
.account-field input::placeholder{color:#8291A5;font-size:13px}
.account-profile-form>.account-subtle{font-size:11px}
.account-avatars{border:0;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:var(--space-text)}
.account-avatars legend{margin-bottom:var(--space-control);font-size:13px}
.account-avatars label{position:relative;min-width:0;cursor:pointer}
.account-avatars input{position:absolute;width:1px;height:1px;margin:0;opacity:0}
.account-avatar-choice{display:flex;align-items:center;flex-direction:column;justify-content:center;gap:var(--space-text);min-height:78px;border:1px solid #3A485A;border-radius:12px;background:#152337;color:#A7B4C7;font-size:10px}
.account-avatar-mark{font:28px/1.25 Georgia,serif}
.account-avatars input:checked+.account-avatar-choice{border-color:#FFB65C;background:#2B2D30;color:#FFCB87}
.account-avatars input:focus-visible+.account-avatar-choice{outline:3px solid #FFB65C;outline-offset:3px}
.account-dialog .account-profile-save{min-width:152px;margin:0;align-self:flex-start;font-size:13px}
.account-management{margin:0;padding-top:var(--space-control);border-top:1px solid var(--account-line)}
.account-management .account-actions{margin:0;gap:var(--space-section)}
.account-management button{padding:0;border:0;font-size:11px;color:#AFB8C6;background:none}
.account-management>.account-subtle{margin:0;color:#8594A7;font-size:11px}
.account-signed-in{display:grid;gap:2px;margin:0;font-size:13px;line-height:1.5}
.account-signed-in span{color:#8594A7;font-size:11px}
.account-signed-in strong{font-weight:500;overflow-wrap:anywhere}
.account-import-row{display:flex;align-items:flex-start;gap:var(--space-control);padding:var(--space-group) 0;border-bottom:1px solid var(--account-line);cursor:pointer}
.account-import-row input{margin-top:var(--space-1);min-width:20px;min-height:20px;accent-color:#FFB65C}
.account-import-row span{white-space:pre-wrap}
.account-import-row:last-of-type{margin-bottom:var(--space-5)}
.account-broadcast>.account-actions{align-items:center;gap:var(--space-control);margin:0;padding:var(--space-5);border:1px solid var(--account-line);border-radius:12px;background:#142134}
.account-broadcast>.account-actions>span{display:block;flex-basis:100%;font-size:13px}
.account-broadcast>.account-actions button{font-size:12px}
.account-broadcast>.account-actions p{flex-basis:100%;margin:0}
.account-dialog a{color:#FFCB87}
.account-playback{flex:none;display:grid;grid-template-columns:minmax(0,1fr) 44px auto;align-items:center;gap:var(--space-control);width:100%;max-width:none;margin:0;padding:var(--space-group) var(--account-gutter) max(var(--space-group),env(safe-area-inset-bottom));border-top:1px solid var(--account-line);background:#101D2F;text-align:left}
.account-playback-info{display:grid;gap:1px;min-width:0}
.account-playback-info small{color:#FFCB87;font-size:9px;font-weight:500;letter-spacing:.02em}
.account-playback-info strong{overflow:hidden;font-size:12px;font-weight:500;white-space:nowrap;text-overflow:ellipsis}
.account-playback-info>span{overflow:hidden;color:#8E9DB0;font-size:10px;white-space:nowrap;text-overflow:ellipsis}
.account-dialog .account-playback-toggle{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #55616C;border-radius:50%;background:#EDE0C2;color:#0E1A2B}
.account-dialog .account-playback-toggle:hover{background:#F5EAD2}
.account-playback-icon{display:block;width:0;height:0;margin-left:3px;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:9px solid #172333}
.account-playback-toggle[data-playing=true] .account-playback-icon{width:10px;height:13px;margin-left:0;border:0;border-left:3px solid #172333;border-right:3px solid #172333}
.account-dialog .account-playback-return{padding:var(--space-text) 0 var(--space-text) var(--space-1);border:0;border-radius:4px;color:#BCC4D0;font-size:10px;white-space:nowrap}
@keyframes account-arrive{from{opacity:.75;transform:translateX(24px)}to{opacity:1;transform:translateX(0)}}
@media(max-width:1000px){.account-dialog{--account-gutter:var(--space-section);width:min(720px,72vw)}.account-section-heading{align-items:flex-start}.account-section-heading>div{gap:var(--space-text)}}
@media(max-width:640px){.account-dialog{--account-gutter:var(--space-5);width:100%;height:var(--account-viewport-height,100dvh);border:0;border-radius:0}.account-header{padding-top:max(var(--space-5),env(safe-area-inset-top))}.account-dialog h2{font-size:23px}.account-avatar{width:46px;height:46px;border-radius:15px;font-size:28px}.account-identity-copy strong{font-size:16px}.account-identity-copy small{font-size:11px}.account-tabs{gap:var(--space-section)}.account-dialog .account-tabs button{min-height:46px;padding-bottom:var(--space-control);font-size:13px}.account-body{scrollbar-gutter:auto}.account-welcome{margin-top:var(--space-control)}.account-welcome-art{width:244px;height:140px;margin-bottom:34px}.account-welcome h3{font-size:27px}.account-section-heading{gap:var(--space-text)}.account-section-heading h3{font-size:16px}.account-section-heading>div{display:grid;gap:3px}.account-dialog .account-text-action{max-width:92px;padding-top:2px;min-height:44px;font-size:10px}.account-empty{min-height:230px}.account-list .account-row{padding:var(--space-5)}.account-letter{padding:var(--space-section)}.account-avatars{gap:var(--space-text);grid-template-columns:repeat(3,1fr)}.account-avatar-choice{min-height:74px;flex-direction:row;gap:var(--space-text);font-size:11px}.account-dialog .account-profile-save{width:100%}.account-playback{grid-template-columns:minmax(0,1fr) 44px auto;gap:var(--space-control);padding:var(--space-group) var(--account-gutter) max(var(--space-group),env(safe-area-inset-bottom))}.account-playback-return{font-size:9px!important}.player-heading .account-entry{padding:var(--space-text) var(--space-control);font-size:11px}}
@media(max-height:600px){.account-header{padding-top:var(--space-control);padding-bottom:var(--space-control)}.account-header .account-eyebrow{display:none}.account-avatar{width:38px;height:38px;border-radius:12px;font-size:23px}.account-identity-copy small{display:none}.account-playback{padding-top:var(--space-text);padding-bottom:max(var(--space-text),env(safe-area-inset-bottom))}.account-welcome-art{margin-top:0;margin-bottom:24px}.account-playback-info>span{display:none}}
@media(max-width:1000px) and (pointer:coarse){.account-dialog{width:100%;border:0;border-radius:0}}
@media(max-width:640px) and (max-height:720px){.account-welcome{margin-top:0}.account-welcome-art{height:120px;margin-top:0;margin-bottom:25px}.account-welcome-art::after{bottom:18px;box-shadow:0 -12px #B5A88D}.account-welcome h3{margin-top:var(--space-control);margin-bottom:var(--space-control);font-size:25px}.account-login-actions{margin-top:var(--space-section);margin-bottom:var(--space-control)}}
@media(prefers-reduced-motion:reduce){.account-dialog[open]{animation:none}.account-dialog button{transition:none}.account-dialog::backdrop{backdrop-filter:none}}