/* emulog 계정 화면 — 포털 팔레트(portal/assets/brand.css)와 같은 값. 390px 폭에서도 한 줄 흐름으로 읽힌다.
 * 제목 글꼴 Neo둥근모는 16px 비트맵 설계라 16의 배수 크기로만 쓴다(포털 /assets/fonts/neodgm.woff2, 같은 origin). */
@font-face{font-family:"NeoDunggeunmo";src:url("/assets/fonts/neodgm.woff2") format("woff2");font-display:swap}
:root{
  --night:#0a0d1c;--night2:#10152b;--panel2:#161c38;--line:#232b4d;--line-strong:#2f3a66;
  --input-line:#6070a8;   /* 입력칸 테두리: 카드 배경 대비 3.8:1·밤 배경 대비 4.0:1(WCAG 1.4.11 비텍스트 3:1). --line-strong 은 1.65:1 이라 입력칸에 쓰지 않는다 */
  --term:#1635c8;--phos:#eef1ff;--phos2:#c8d1f5;--dimt:#9aa6c8;--cyan:#62edff;--link:#9ec0ff;
  --c-ready:#e05aa8;--c-db:#e0b94a;--c-font:#5b8cff;--c-ez:#8bd14f;
  --ok:#8bd14f;--warn:#e0b94a;--err:#ff7a90;
  --px:"NeoDunggeunmo","Neo둥근모",ui-monospace,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;background:var(--night);color:var(--phos);font:16px/1.6 var(--sans)}
a{color:var(--link)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

.acc-top{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:18px 16px 14px;border-bottom:2px solid #1a2146}
.acc-top::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,var(--c-ready) 0 25%,var(--c-db) 25% 50%,var(--c-font) 50% 75%,var(--c-ez) 75% 100%)}
.acc-brand{font-family:var(--px);font-size:32px;line-height:1;color:var(--phos);text-decoration:none;-webkit-font-smoothing:none}
.acc-brand span{margin-left:8px;font-size:16px;color:var(--cyan)}
.acc-env{font:12px/1 var(--sans);padding:4px 6px;border:2px solid var(--warn);color:var(--warn)}

/* 한국어는 낱말 가운데서 끊지 않는다(keep-all). 긴 아이디·이메일이 넘치지 않게 그 밖에서는 어디서든 줄을 바꾼다 */
.acc-main{max-width:28rem;margin:0 auto;padding:32px 16px 48px;word-break:keep-all;overflow-wrap:anywhere}
.acc-card{background:var(--night2);border:2px solid var(--line);padding:24px 20px}
.acc-card h1{margin:0 0 16px;font-family:var(--px);font-weight:400;font-size:32px;line-height:1.25;word-break:keep-all;-webkit-font-smoothing:none}
/* 섹션 제목: 픽셀 글꼴이 16px 비트맵이라 크기를 키우지 않고 앞의 시안 막대로 본문·레이블과 위계를 준다 */
.acc-card h2{display:flex;align-items:center;gap:10px;margin:24px 0 8px;font-family:var(--px);font-weight:400;font-size:16px;-webkit-font-smoothing:none}
.acc-card h2::before{content:"";flex:none;width:6px;height:16px;background:var(--cyan)}
.acc-note{color:var(--dimt);margin:0 0 12px}

.acc-field{display:block;margin:0 0 16px}
.acc-field>span{display:block;margin:0 0 6px;color:var(--phos2);font-size:14px}
.acc-field input{width:100%;min-height:44px;padding:10px 12px;background:var(--night);color:var(--phos);
  border:2px solid var(--input-line);border-radius:0;font:16px var(--sans)}
.acc-field input:focus{border-color:var(--cyan);outline:none}
.acc-hint{margin:6px 0 0;color:var(--dimt);font-size:13px}

.acc-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 18px;
  background:var(--term);color:var(--phos);border:2px solid var(--term);font:600 16px var(--sans);cursor:pointer;text-decoration:none}
.acc-btn:hover{border-color:var(--cyan)}
.acc-btn.secondary{background:transparent;border-color:var(--line-strong)}
.acc-btn[disabled]{opacity:.5;cursor:not-allowed}

.acc-msg{margin:0 0 16px;padding:10px 12px;border:2px solid var(--line-strong)}
.acc-msg.err{border-color:var(--err);color:#ffd0d8}
.acc-msg.ok{border-color:var(--ok)}
.acc-codes{font:16px/1.8 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em;columns:2;padding:12px;
  background:var(--night);border:2px dashed var(--cyan)}

.acc-foot{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;padding:24px 16px 32px;color:var(--dimt);font-size:14px}
.acc-foot a{color:var(--dimt)}

/* 건너뛰기·머리 */
.acc-skip{position:absolute;left:-999px;top:0;padding:8px 12px;background:var(--term);color:var(--phos);z-index:10}
.acc-skip:focus{left:8px;top:8px}
/* 상단바(로그인 상태): 표시 이름 · 내 계정 · 로그아웃. 넓은 폭에서는 오른쪽에 한 줄로, 좁은 폭(≤640px)에서는 로고 아래 한 줄을 통째로 쓴다
 * (이름은 남는 폭에서 말줄임, 링크 둘은 오른쪽에 붙어 긴 닉네임이어도 3줄로 늘지 않는다) */
.acc-user{margin-left:auto;display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-end;gap:2px 14px;min-width:0;max-width:100%}
.acc-me{color:var(--phos);font-size:14px;font-weight:600;flex:0 1 auto;min-width:0;max-width:24rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acc-toplink{display:inline-flex;align-items:center;flex:none;min-height:32px;padding:0 2px;font-size:14px;color:var(--link);text-decoration:underline;white-space:nowrap}
.acc-topform{margin:0;display:flex;flex-wrap:wrap;align-items:center;flex:none}
.acc-topform .acc-msg{flex-basis:100%;margin:6px 0 0;font-size:13px}
@media (max-width:640px){
  .acc-user{flex:1 1 100%;margin-left:0;justify-content:flex-start;border-top:1px solid var(--line);padding-top:6px}
  .acc-me{flex:1 1 0;max-width:none}
}
/* 상단바 홈·로그인: 홈은 항상, 로그인은 비로그인일 때만. 로그인한 상태에서는 아래 .acc-user 가 이어서 붙는다 */
.acc-nav{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
.acc-nav+.acc-user{margin-left:0;flex:0 1 auto}
.acc-home,.acc-login{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;font-size:14px;font-weight:600;
  color:var(--phos);text-decoration:none;white-space:nowrap;border:2px solid var(--line-strong)}
.acc-login{background:var(--term);border-color:var(--term)}
.acc-home:hover,.acc-login:hover{border-color:var(--cyan)}
@media (max-width:640px){.acc-nav+.acc-user{margin-left:0}}
/* 좁은 화면: 로고와 홈·로그인을 한 줄에 둔다(둘째 줄로 내려가 우측에 붙지 않게). 스테이징 배지는 로고 아래로 */
@media (max-width:480px){.acc-top{gap:6px 8px;padding:16px 12px 12px}.acc-brand{font-size:24px}.acc-brand span{margin-left:6px;font-size:14px}
  .acc-nav{gap:6px}.acc-home,.acc-login{min-height:34px;padding:0 10px;font-size:13px;gap:4px}.acc-env{order:3}}
.acc-main:focus{outline:none}
.acc-stack{display:grid;gap:16px}
.acc-card.danger{border-color:#5a2433}

/* 입력·오류 */
.acc-err{display:block;margin:6px 0 0;color:var(--err);font-size:14px}
.acc-err:empty{display:none}
.acc-field input[aria-invalid="true"]{border-color:var(--err)}
.acc-check{display:flex;gap:10px;align-items:flex-start;margin:0 0 12px;color:var(--phos2);font-size:15px}
.acc-check input{width:22px;height:22px;margin:2px 0 0;flex:none;accent-color:var(--term)}
.acc-msg.warn{border-color:var(--warn)}
.acc-msg:focus{outline:2px solid var(--cyan);outline-offset:2px}

/* 버튼 */
.acc-btn.wide{width:100%}
.acc-btn.small{min-height:36px;padding:6px 12px;font-size:14px}
.acc-btn.danger{background:transparent;border-color:var(--err);color:#ffd0d8}
.acc-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.acc-link{background:none;border:0;padding:0;color:var(--link);font:inherit;text-decoration:underline;cursor:pointer}
.acc-inline{margin-left:8px;font-size:14px}
.acc-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:12px 0 0}
.acc-row form{margin:0}
.acc-links{display:flex;flex-wrap:wrap;gap:8px 18px;margin:20px 0 8px;font-size:15px}

/* 소셜 로그인 버튼 */
.acc-or{display:flex;align-items:center;gap:12px;margin:20px 0 14px;color:var(--dimt);font-size:14px}
.acc-or::before,.acc-or::after{content:"";flex:1;border-top:2px solid var(--line)}
.acc-social{display:grid;gap:10px}
/* 구글 지침의 기본은 Roboto Medium 14px/20px. Roboto 는 CSP(font-src 'self')와 외부 요청 없음 원칙 때문에 불러오지 않고
 * 시스템 글꼴로 대체한다(결정, 2026-09-29). 크기·굵기·줄 높이는 지침 값을 따른다. */
.acc-sbtn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:0 12px;border-radius:4px;
  text-decoration:none;font:500 14px/20px Roboto,var(--sans)}
.acc-sbtn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
button.acc-sbtn{width:100%;cursor:pointer}
.acc-social form{margin:0}
.acc-sbtn-google{background:#131314;border:1px solid #8e918f;color:#e3e3e3}
.acc-sbtn-google:hover{background:#1f1f21}
/* 카카오 지침: 컨테이너 #FEE500, 심볼·레이블 검정(레이블 85%), 모서리 12px, 문구 '카카오 로그인' */
.acc-sbtn-kakao{background:#fee500;border:1px solid #fee500;color:rgba(0,0,0,.85);border-radius:12px}
.acc-sbtn-kakao:hover{background:#f5dc00}
/* 네이버 지침: 초록 #03C75A, 흰 'N' 로고·흰 글씨, 문구 '네이버 로그인' */
.acc-sbtn-naver{background:#03c75a;border:1px solid #03c75a;color:#fff}
.acc-sbtn-naver:hover{background:#02b350}
.acc-slogo{flex:none}
/* 로그인 수단 목록의 공급자 표지: 브랜드 바탕색 정사각 칩(어두운 카드 위에서도 카카오 검은 말풍선·네이버 흰 N 이 보이게) */
.acc-mlogo{display:inline-flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;border-radius:6px}
.acc-mlogo-google{background:#131314;border:1px solid #8e918f}
.acc-mlogo-kakao{background:#fee500;border-radius:8px}
.acc-mlogo-naver{background:#03c75a}

/* 목록 */
.acc-list{margin:0 0 16px;padding-left:1.2em}
.acc-list li{margin:0 0 8px}
.acc-svc{list-style:none;padding:0}
.dot{display:inline-block;width:10px;height:10px;margin-right:8px;vertical-align:middle}
.dot.ready{background:var(--c-ready)}.dot.db{background:var(--c-db)}.dot.font{background:var(--c-font)}
.acc-dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0 0 16px}
.acc-dl dt{color:var(--dimt)}.acc-dl dd{margin:0;word-break:break-all}
.acc-methods,.acc-devices{list-style:none;margin:0;padding:0}
.acc-methods li,.acc-devices li{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:12px 0;border-top:2px solid var(--line)}
.acc-methods li:first-child,.acc-devices li:first-child{border-top:0}
.acc-mname{display:flex;align-items:center;gap:8px;flex:1 1 8rem}
.acc-mstate{color:var(--dimt);font-size:14px}
.acc-methods form,.acc-devices form{margin:0}
.acc-devices li>div{flex:1 1 12rem;min-width:0;overflow-wrap:anywhere}
.acc-devices small{display:block}
.acc-codes li{list-style:none}

@media (max-width:420px){.acc-card{padding:20px 14px}.acc-codes{columns:1}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.acc-card>h2:first-child{margin-top:0}
/* 버튼 바로 앞의 안내 문구(비밀번호 칸 대신 들어가는 소셜 재인증 안내)는 버튼과 붙지 않게 */
.acc-card form>.acc-hint{margin:0 0 12px}