/* 2026-11-04 신누리님: nahato agent 로그인 기본 화면을 공식 브랜드의 화이트 디자인으로 변경합니다.
   현행 form·input·submit·오류 표시를 그대로 사용하고 로그인 화면에만 스타일을 한정합니다. */
@font-face{font-family:'Nahato Noto Sans JP';src:url('./fonts/NotoSansJP.ttf') format('truetype');font-weight:100 900;font-display:swap}
@font-face{font-family:'Nahato Heebo';src:url('./fonts/Heebo.ttf') format('truetype');font-weight:100 900;font-display:swap}
:root{--nahato-primary:#EB5628;--nahato-accent:#F39800}
body:has(#login-username){margin:0!important;background:#fff!important;color:#20201e!important;color-scheme:light;font-family:'Nahato Noto Sans JP','Yu Gothic','Malgun Gothic',sans-serif!important}
body:has(#login-username) #app{min-height:100dvh;background:#fff!important}
/* :has 限定のためログイン後のアプリや他のフォームには影響しません。 */
body:has(#login-username) div:has(> form #login-username){position:relative;isolation:isolate;min-height:100dvh!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;padding:64px 5vw!important;background:#fff!important;color:#20201e!important;overflow:hidden}
body:has(#login-username) div:has(> form #login-username)::before{content:'ドラマを\a起こせ。';white-space:pre;box-sizing:border-box;position:absolute;inset:0 47% 0 0;z-index:-1;display:flex;align-items:center;padding:30px 4.5vw 65px;font-family:'Nahato Noto Sans JP',sans-serif;font-size:clamp(65px,7.5vw,130px);font-weight:900;line-height:1.28;letter-spacing:-.06em;color:#20201e;background-image:url('./assets/logo-transparent.png'),linear-gradient(var(--nahato-primary),var(--nahato-primary)),radial-gradient(ellipse at 0 100%,#f9e7d4,transparent 65%);background-size:190px auto,110px 9px,100% 100%;background-position:4.5vw 42px,4.5vw calc(50% + 133px),center;background-repeat:no-repeat;background-color:#f6f5f0}
body:has(#login-username) div:has(> form #login-username)::after{content:'IはWE  /  モテてなんぼ  /  勝負しようぜ';position:absolute;left:4.5vw;bottom:43px;font-size:11px;letter-spacing:.07em;color:#898980}
body:has(#login-username) form:has(#login-username){width:360px!important;max-width:calc(47vw - 10vw)!important;flex-shrink:0;position:relative;margin:0 0 0 58%!important;padding:0!important;background:transparent!important;font-family:'Nahato Noto Sans JP','Yu Gothic','Malgun Gothic',sans-serif!important;color:#252521!important}
body:has(#login-username) form:has(#login-username)>div:first-child{display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;gap:16px!important;margin:0 0 34px!important}
body:has(#login-username) form:has(#login-username)>div:first-child img{content:url('./assets/logo-transparent.png');display:block!important;width:190px!important;max-width:100%!important;height:auto!important;filter:none!important;object-fit:contain;object-position:left center}
body:has(#login-username) form:has(#login-username)>div:first-child span{display:block;color:#24241f!important;font-size:22px!important;font-weight:700!important;letter-spacing:-.04em}
body:has(#login-username) form:has(#login-username)>div:first-child::after{content:'YOUR NEXT DRAMA STARTS HERE.';font:500 10px/1.5 'Nahato Heebo',sans-serif;letter-spacing:.15em;color:#a0a096;margin-top:-7px}
body:has(#login-username) label[for=login-username],body:has(#login-username) label[for=login-password]{position:static!important;display:block!important;width:auto!important;height:auto!important;padding:0!important;margin:17px 0 8px!important;clip:auto!important;clip-path:none!important;overflow:visible!important;white-space:normal!important;font-size:11px!important;font-weight:600!important;color:#65655c!important}
body:has(#login-username) #login-username,body:has(#login-username) #login-password{box-sizing:border-box!important;display:block!important;width:100%!important;height:52px!important;margin:0!important;padding:0 16px!important;background:#fafaf7!important;color:#25251f!important;border:1px solid #e1e1d8!important;border-radius:7px!important;font-size:13px!important;box-shadow:none!important;transition:border-color .2s,box-shadow .2s}
body:has(#login-username) #login-username::placeholder,body:has(#login-username) #login-password::placeholder{color:#b7b7ac!important;opacity:1}
body:has(#login-username) #login-username:focus,body:has(#login-username) #login-password:focus{outline:none!important;border-color:var(--nahato-primary)!important;box-shadow:0 0 0 3px #eb562815!important}
body:has(#login-username) form:has(#login-username) button[type=submit]{box-sizing:border-box!important;width:100%!important;min-height:52px!important;margin-top:27px!important;padding:13px 20px!important;border:1px solid var(--nahato-primary)!important;border-radius:7px!important;background:var(--nahato-primary)!important;color:#fff!important;font-size:13px!important;font-weight:700!important;letter-spacing:.05em;transition:background .2s,box-shadow .2s}
body:has(#login-username) form:has(#login-username) button[type=submit]:hover:not(:disabled){background:#d94a20!important;box-shadow:0 5px 15px #eb562825}
body:has(#login-username) form:has(#login-username) button[type=submit]:disabled{opacity:.45!important;cursor:not-allowed!important}
body:has(#login-username) form:has(#login-username) button[type=submit]:focus-visible{outline:3px solid #f39800!important;outline-offset:4px}
body:has(#login-username) form:has(#login-username) [role=alert],body:has(#login-username) form:has(#login-username) .text-red-400{color:#b94132!important;font-size:12px!important}
@media(min-width:1800px){body:has(#login-username) form:has(#login-username){width:400px!important}body:has(#login-username) div:has(> form #login-username)::before{font-size:140px}}
@media(max-width:900px){body:has(#login-username) div:has(> form #login-username)::before{font-size:8vw;background-size:145px auto,70px 6px,100% 100%;background-position:4.5vw 35px,4.5vw calc(50% + 95px),center}body:has(#login-username) div:has(> form #login-username)::after{font-size:8px;letter-spacing:0}body:has(#login-username) form:has(#login-username){margin-left:56%!important;max-width:calc(47vw - 8vw)!important}body:has(#login-username) form:has(#login-username)>div:first-child span{font-size:19px!important}}
@media(max-width:640px){body:has(#login-username) div:has(> form #login-username){min-height:100dvh!important;padding:55px 25px 65px!important;align-items:center!important;justify-content:center!important}body:has(#login-username) div:has(> form #login-username)::before{content:'';inset:0 0 auto;height:7px;padding:0;display:block;background:linear-gradient(90deg,#eb5628,#f39800)}body:has(#login-username) div:has(> form #login-username)::after{content:'ドラマを起こせ。';bottom:25px;left:0;width:100%;text-align:center;font-size:10px;color:#aaa99e;letter-spacing:.1em}body:has(#login-username) form:has(#login-username){margin:0!important;max-width:100%!important;width:360px!important}body:has(#login-username) form:has(#login-username)>div:first-child{margin-bottom:30px!important}body:has(#login-username) form:has(#login-username)>div:first-child img{width:200px!important}body:has(#login-username) form:has(#login-username)>div:first-child span{font-size:23px!important}}
@media(prefers-reduced-motion:reduce){body:has(#login-username) *{transition:none!important}}

/* 2026-11-04 신누리님: 배경 사각형이 없는 공식 투명 로고와 불꽃 모션을 요청하셨습니다.
   애니메이션은 장식용 pseudo element에만 적용하며 폼·입력·인증 상태는 움직이지 않습니다. */
body:has(#login-username) div:has(> form #login-username)::before{align-items:flex-end;padding-bottom:130px;font-size:clamp(64px,6.5vw,112px);line-height:1.16;background-image:url('./assets/logo-transparent.png'),radial-gradient(ellipse at 42% 30%,#fff3df 0,transparent 52%),linear-gradient(#fcfcfa,#fcfcfa);background-size:170px auto,100% 100%,100% 100%;background-position:4.5vw 48px,center,center;background-color:#fff;animation:nahatoAmbient 9s ease-in-out infinite alternate}
body:has(#login-username)::before{content:'';position:fixed;z-index:2;pointer-events:none;left:calc(26.5vw - 10vw);top:11vh;width:20vw;height:39vh;background:url('./assets/icon.png') center/contain no-repeat;filter:drop-shadow(0 24px 25px #ed7c2820);transform-origin:50% 75%;animation:nahatoFlame 6s ease-in-out infinite}
body:has(#login-username)::after{content:'';position:fixed;z-index:1;pointer-events:none;left:9.5vw;top:calc(30.5vh - 17vw);width:34vw;height:34vw;box-sizing:border-box;border:1px solid #e5ac7847;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 70%,#f3980010 85%,transparent 100%);box-shadow:0 0 0 30px #f3980005,0 0 0 70px #f3980003;animation:nahatoOrbit 26s linear infinite}
body:has(#login-username) #app>div{position:relative}
body:has(#login-username) #app>div::before{content:'';position:fixed;z-index:3;pointer-events:none;left:calc(26.5vw - 3px);top:calc(30.5vh - 17vw - 3px);width:6px;height:6px;border-radius:50%;background:#f39800;box-shadow:0 0 14px 4px #f3980030;transform-origin:3px calc(17vw + 3px);animation:nahatoOrbit 26s linear infinite}
body:has(#login-username) #app>div::after{content:'NAHATO / IGNITE THE NEXT';position:fixed;z-index:3;pointer-events:none;top:calc(30.5vh + 17vw + 18px);left:0;width:53vw;text-align:center;color:#b5a68d;letter-spacing:.23em;font:500 8px 'Nahato Heebo',sans-serif;animation:nahatoCaption 6s ease-in-out infinite}
@keyframes nahatoFlame{0%,100%{transform:translateY(0) rotate(-3deg) scale(.98);filter:drop-shadow(0 24px 25px #ed7c2820)}50%{transform:translateY(-14px) rotate(3deg) scale(1.025);filter:drop-shadow(0 38px 30px #ed7c2830)}}
@keyframes nahatoOrbit{to{transform:rotate(360deg)}}
@keyframes nahatoAmbient{from{background-position:4.5vw 48px,0% 0%,center}to{background-position:4.5vw 48px,20% 10%,center}}
@keyframes nahatoCaption{0%,100%{opacity:.6}50%{opacity:1}}
@media(min-width:1800px){body:has(#login-username) div:has(> form #login-username)::before{font-size:112px}}
@media(max-width:900px) and (min-width:641px){body:has(#login-username) div:has(> form #login-username)::before{font-size:6.5vw;padding-bottom:145px;background-size:145px auto,100% 100%,100% 100%}body:has(#login-username)::before{width:25vw;left:14vw}body:has(#login-username) #app>div::after{font-size:6px}}
@media(max-height:720px) and (min-width:641px){body:has(#login-username) div:has(> form #login-username)::before{font-size:6vw;padding-bottom:75px}body:has(#login-username)::before{top:9vh;height:34vh}body:has(#login-username)::after{top:calc(26vh - 14vw);left:12.5vw;width:28vw;height:28vw}body:has(#login-username) #app>div::before{top:calc(26vh - 14vw - 3px);transform-origin:3px calc(14vw + 3px)}body:has(#login-username) #app>div::after{top:calc(26vh + 14vw + 10px)}}
@media(max-width:640px){body:has(#login-username)::before,body:has(#login-username)::after,body:has(#login-username) #app>div::before,body:has(#login-username) #app>div::after{content:none}body:has(#login-username) div:has(> form #login-username)::before{padding:0;background:linear-gradient(90deg,#eb5628,#f39800,#eb5628);background-size:200% 100%;animation:nahatoMobileGlow 8s ease-in-out infinite alternate}body:has(#login-username) div:has(> form #login-username)::after{content:'ドラマを起こせ。'}}
@keyframes nahatoMobileGlow{from{background-position:0% 0}to{background-position:100% 0}}
@media(prefers-reduced-motion:reduce){body:has(#login-username)::before,body:has(#login-username)::after,body:has(#login-username) #app>div::before,body:has(#login-username) #app>div::after,body:has(#login-username) div:has(> form #login-username)::before{animation:none!important}}

/* 2026-11-04 신누리님: 로고 중복과 중심축 불일치, 오른쪽 폼의 좌측 치우침을 수정합니다.
   오른쪽 47% 영역의 중앙을 실제 grid로 보장하고 모바일에서는 로고 한 개를 폼에 표시합니다. */
body:has(#login-username){--nahato-orbit-radius:min(15.7vw,24vh,250px);--nahato-visual-y:34vh}
body:has(#login-username) div:has(> form #login-username){display:grid!important;grid-template-columns:53vw 47vw;align-items:center!important;padding:0!important}
body:has(#login-username) form:has(#login-username){grid-column:2;justify-self:center;align-self:center;width:360px!important;max-width:calc(47vw - 80px)!important;margin:0!important}
body:has(#login-username) form:has(#login-username)>div:first-child img{display:none!important}
body:has(#login-username) form:has(#login-username)>div:first-child{gap:17px!important;margin-bottom:35px!important}
body:has(#login-username) form:has(#login-username)>div:first-child span{font-family:'Nahato Heebo','Nahato Noto Sans JP',sans-serif!important;font-size:27px!important;letter-spacing:-.035em;font-weight:600!important}
body:has(#login-username) div:has(> form #login-username)::before{align-items:flex-end;justify-content:center;text-align:center;padding:0 25px 16vh;font-size:clamp(64px,5.2vw,100px);line-height:1.17;background-size:170px auto,100% 100%,100% 100%}
body:has(#login-username) div:has(> form #login-username)::after{left:0;width:53vw;text-align:center;bottom:36px;font-size:9px;letter-spacing:.06em}
body:has(#login-username)::before{left:calc(26.5vw - min(9vw,15vh,140px));top:calc(var(--nahato-visual-y) - min(9vw,15vh,140px));width:min(18vw,30vh,280px);height:min(18vw,30vh,280px)}
body:has(#login-username)::after{left:calc(26.5vw - var(--nahato-orbit-radius));top:calc(var(--nahato-visual-y) - var(--nahato-orbit-radius));width:calc(var(--nahato-orbit-radius) + var(--nahato-orbit-radius));height:calc(var(--nahato-orbit-radius) + var(--nahato-orbit-radius))}
body:has(#login-username) #app>div::before{left:calc(26.5vw - 3px);top:calc(var(--nahato-visual-y) - var(--nahato-orbit-radius) - 3px);transform-origin:3px calc(var(--nahato-orbit-radius) + 3px)}
body:has(#login-username) #app>div::after{top:calc(var(--nahato-visual-y) + var(--nahato-orbit-radius) + 22px)}
@media(min-width:1800px){body:has(#login-username) form:has(#login-username){width:400px!important}}
@media(max-width:900px) and (min-width:641px){body:has(#login-username) form:has(#login-username){max-width:calc(47vw - 55px)!important}body:has(#login-username) form:has(#login-username)>div:first-child span{font-size:23px!important}body:has(#login-username) div:has(> form #login-username)::before{font-size:6.5vw}body:has(#login-username) div:has(> form #login-username)::after{font-size:8px}}
@media(max-height:720px) and (min-width:641px){body:has(#login-username){--nahato-orbit-radius:min(14vw,20vh,190px);--nahato-visual-y:30vh}body:has(#login-username) div:has(> form #login-username)::before{font-size:clamp(50px,5vw,80px);padding-bottom:12vh}body:has(#login-username)::before{left:calc(26.5vw - min(8vw,12vh,100px));top:calc(var(--nahato-visual-y) - min(8vw,12vh,100px));width:min(16vw,24vh,200px);height:min(16vw,24vh,200px)}body:has(#login-username) #app>div::after{top:calc(var(--nahato-visual-y) + var(--nahato-orbit-radius) + 15px)}}
@media(max-width:640px){body:has(#login-username) div:has(> form #login-username){display:flex!important;padding:55px 25px 65px!important}body:has(#login-username) form:has(#login-username){width:360px!important;max-width:100%!important;margin:0!important;grid-column:auto}body:has(#login-username) form:has(#login-username)>div:first-child img{display:block!important;width:190px!important}body:has(#login-username) form:has(#login-username)>div:first-child span{font-size:25px!important}body:has(#login-username) div:has(> form #login-username)::before{padding:0;font-size:0;background-size:200% 100%}body:has(#login-username) div:has(> form #login-username)::after{width:100%;bottom:25px}}

/* 2026-11-04 한윤태님: 캐치카피를 왼쪽 중앙에 한 줄로 표시하고 주황 밑줄을 유지합니다. */
body:has(#login-username) div:has(> form #login-username)::before{content:'ドラマを起こせ。';white-space:nowrap;font-size:clamp(28px,4.1vw,78px);padding-bottom:16vh;background-image:url('./assets/logo-transparent.png'),linear-gradient(#eb5628,#eb5628),radial-gradient(ellipse at 42% 30%,#fff3df 0,transparent 52%),linear-gradient(#fcfcfa,#fcfcfa);background-size:170px auto,80px 5px,100% 100%,100% 100%;background-position:4.5vw 48px,center calc(100% - 16vh + 13px),center,center}
@keyframes nahatoAmbient{from{background-position:4.5vw 48px,center calc(100% - 16vh + 13px),0% 0%,center}to{background-position:4.5vw 48px,center calc(100% - 16vh + 13px),20% 10%,center}}
@media(max-height:720px) and (min-width:641px){body:has(#login-username) div:has(> form #login-username)::before{padding-bottom:12vh;background-position:4.5vw 48px,center calc(100% - 12vh + 13px),center,center;animation:none}}
@media(max-width:640px){body:has(#login-username) div:has(> form #login-username)::before{content:'';padding:0;font-size:0;background:linear-gradient(90deg,#eb5628,#f39800,#eb5628);background-size:200% 100%;animation:nahatoMobileGlow 8s ease-in-out infinite alternate}body:has(#login-username) div:has(> form #login-username)::after{white-space:nowrap;font-size:clamp(11px,2.8vw,15px)}}
@media(prefers-reduced-motion:reduce){body:has(#login-username) div:has(> form #login-username)::before{animation:none!important}}

/* 2026-11-04 한윤태님: 오른쪽 폼에 둥근 인상의 영문·일본어 서체를 적용합니다. */
@font-face{font-family:'Nahato Nunito';src:url('./fonts/Nunito.ttf') format('truetype');font-weight:200 900;font-display:swap}
@font-face{font-family:'Nahato Rounded JP';src:url('./fonts/MPLUSRounded1c-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
body:has(#login-username) form:has(#login-username){font-family:'Nahato Nunito','Nahato Rounded JP','Nahato Noto Sans JP',sans-serif!important}
body:has(#login-username) form:has(#login-username)>div:first-child span{font-family:'Nahato Nunito','Nahato Rounded JP',sans-serif!important;font-size:28px!important;font-weight:700!important;letter-spacing:.01em}
body:has(#login-username) form:has(#login-username)>div:first-child::after{font-family:'Nahato Nunito','Nahato Rounded JP',sans-serif!important;font-size:10px;font-weight:600;letter-spacing:.14em}
body:has(#login-username) form:has(#login-username) label{font-family:'Nahato Nunito','Nahato Rounded JP',sans-serif!important;font-weight:700!important;letter-spacing:.09em}
body:has(#login-username) #login-username,body:has(#login-username) #login-password{font-family:'Nahato Nunito','Nahato Rounded JP',sans-serif!important;font-weight:600;letter-spacing:.035em}
body:has(#login-username) form:has(#login-username) button[type=submit]{font-family:'Nahato Nunito','Nahato Rounded JP',sans-serif!important;font-weight:700!important;letter-spacing:.12em}

/* 2026-11-04 신누리님: 불꽃·궤적·작은 캡션 묶음을 아래로 내려 카피와 간격을 줄입니다. */
body:has(#login-username){--nahato-visual-y:40vh}
@media(max-height:720px) and (min-width:641px){body:has(#login-username){--nahato-visual-y:34vh}}

/* 2026-11-04 김윤기님: 화이트·제공 영상으로 복원하며 크기 전환 프레임을 트리밍한 영상을 사용합니다.
   video는 폼 밖의 장식 요소이며 인증 script setup과 기존 입력·SSO 동작은 유지합니다. */
body:has(#login-username)::before,body:has(#login-username)::after,body:has(#login-username) #app>div::before{content:none!important}
body:has(#login-username) .nahato-login-visual{position:absolute;z-index:1;pointer-events:none;left:calc(26.5vw - min(16.5vw,23vh,250px));top:calc(40vh - min(20vw,27.5vh,300px));width:min(33vw,46vh,500px);height:min(40vw,55vh,600px);display:flex;align-items:center;justify-content:center}
body:has(#login-username) .nahato-login-video{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;mask-image:linear-gradient(to bottom,transparent 0,#000 5%,#000 95%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 5%,#000 95%,transparent 100%)}
body:has(#login-username) #app>div::after{top:calc(40vh + min(20vw,27.5vh,300px) + 12px);animation:none}
body:has(#login-username) form:has(#login-username){z-index:2}
@media(max-height:720px) and (min-width:641px){body:has(#login-username) .nahato-login-visual{top:calc(34vh - min(16vw,22vh,200px));left:calc(26.5vw - min(13.2vw,18.4vh,167px));width:min(26.4vw,36.8vh,334px);height:min(32vw,44vh,400px)}body:has(#login-username) #app>div::after{top:calc(34vh + min(16vw,22vh,200px) + 8px)}}
@media(max-width:640px){body:has(#login-username) .nahato-login-visual{display:none}body:has(#login-username) #app>div::after{content:none!important}}
@media(prefers-reduced-motion:reduce){body:has(#login-username) .nahato-login-video{display:none}body:has(#login-username) .nahato-login-visual{background:url('./assets/icon.png') center/contain no-repeat}}

/* 2026-11-04 신누리님: 짧은 주황 밑줄과 NAHATO / IGNITE THE NEXT 문구를 제거합니다.
   로그인 장식 요소만 바꾸며 불꽃·카피 본문·인증 폼은 그대로 둡니다. */
body:has(#login-username) #app>div::after{content:none!important;display:none!important;animation:none!important}
@media(min-width:641px){
body:has(#login-username) div:has(> form #login-username)::before{background-image:url('./assets/logo-transparent.png'),radial-gradient(ellipse at 42% 30%,#fff3df 0,transparent 52%),linear-gradient(#fcfcfa,#fcfcfa)!important;background-size:170px auto,100% 100%,100% 100%!important;background-position:4.5vw 48px,center,center!important}
}