/* 더함 단어장 — 스타일 (브랜드: 네이비 #2a3f73 / 오렌지 #e2832f) */
:root{
  --navy:#2a3f73; --navy-deep:#1c2b51; --navy-soft:#e9eef9;
  --orange:#e2832f; --orange-soft:#fcecd8; --orange-deep:#993c1d;
  --ink:#1f2933; --sub:#5b6573; --hint:#94a0ae;
  --line:#eef1f5; --line2:#e2e7ee; --bg:#f4f6fa; --card:#fff;
  --green:#1d9e75; --green-soft:#e1f5ee;
  --radius:12px; --radius-sm:8px;
  --safe-top:env(safe-area-inset-top); --safe-bottom:env(safe-area-inset-bottom);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
[hidden]{display:none !important;}
html,body{height:100%;}
body{
  font-family:'Noto Sans KR',-apple-system,sans-serif;
  color:var(--ink); background:var(--bg);
  overflow:hidden; -webkit-font-smoothing:antialiased;
}

/* 화면 전환 */
.screen{position:fixed; inset:0; display:none; flex-direction:column; background:var(--bg);}
.screen.active{display:flex;}
.content{flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:14px 16px calc(24px + var(--safe-bottom));}

/* 상단바 */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--navy); color:#fff; padding:calc(11px + var(--safe-top)) 14px 11px;
  flex:none;
}
.topbar-brand{display:flex; align-items:center; gap:8px; font-size:15px; font-weight:500;}
.topbar-brand i{font-size:20px;}
.topbar-user{display:flex; align-items:center; gap:6px; background:none; border:none; color:#cdd6ee; font-size:12px; font-family:inherit;}
.topbar-user i{font-size:22px; color:var(--orange);}
.topbar-back{background:none; border:none; color:#fff; font-size:22px; display:flex; padding:2px;}
.topbar-title{flex:1; text-align:center; line-height:1.25;}
.topbar-title p{font-size:15px; font-weight:500;}
.topbar-title span{font-size:11px; color:#cdd6ee;}
.topbar > span:last-child{min-width:24px;}

/* 버튼 */
.btn-primary{
  background:var(--navy); color:#fff; border:none; border-radius:var(--radius-sm);
  font-family:inherit; font-size:15px; font-weight:500; padding:13px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:7px; transition:transform .08s;
}
.btn-primary:active{transform:scale(.98);}
.btn-ghost{
  background:var(--card); color:var(--navy); border:1px solid var(--line2); border-radius:var(--radius-sm);
  font-family:inherit; font-size:15px; font-weight:500; padding:13px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:7px;
}
.btn-ghost:disabled{color:var(--hint); background:var(--bg);}

/* ===== 로그인 ===== */
#screen-login{justify-content:center; align-items:center; background:var(--card);}
.login-wrap{width:100%; max-width:340px; padding:24px;}
.login-logo{text-align:center; margin-bottom:32px;}
.login-mark-img{width:96px; height:96px; margin:0 auto 14px; display:block; object-fit:contain;}
.login-mark{
  width:64px; height:64px; margin:0 auto 14px; border:3px solid var(--navy); border-radius:14px;
  display:flex; align-items:center; justify-content:center; position:relative; color:var(--navy);
}
.login-mark i{font-size:32px;}
.login-mark .plus{position:absolute; top:-6px; right:-6px; color:var(--orange); font-weight:900; font-size:20px;}
.login-logo h1{font-size:22px; font-weight:900; color:var(--navy); letter-spacing:-.5px;}
.slogan{font-size:12px; color:var(--navy); font-weight:700; margin-top:5px; opacity:.85;}
.plus{color:var(--orange); font-weight:900; margin:0 2px;}
.login-form{display:flex; flex-direction:column; gap:14px;}
.login-form label{display:flex; flex-direction:column; gap:6px;}
.login-form label span{font-size:13px; color:var(--sub); font-weight:500;}
.login-form input{
  font-family:inherit; font-size:16px; padding:12px 14px; border:1px solid var(--line2);
  border-radius:var(--radius-sm); background:var(--card); color:var(--ink);
}
.login-form input:focus{outline:none; border-color:var(--navy);}
#login-btn{margin-top:6px;}
.login-error{color:#c0392b; font-size:13px; text-align:center; line-height:1.5;}

/* ===== 홈: 단어장 목록 ===== */
.list-caption{font-size:13px; color:var(--sub); margin:4px 2px 10px;}
.deck-list{display:flex; flex-direction:column; gap:10px;}
.deck-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px; cursor:pointer; transition:transform .08s;
}
.deck-card:active{transform:scale(.99);}
.deck-card-top{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:10px; gap:10px;}
.deck-card-name{font-size:15px; font-weight:500;}
.deck-card-sub{font-size:12px; color:var(--sub); margin-top:3px;}
.deck-badge{
  font-size:11px; font-weight:500; padding:3px 9px; border-radius:var(--radius-sm); white-space:nowrap;
  background:var(--orange-soft); color:var(--orange-deep);
}
.deck-badge.muted{background:var(--bg); color:var(--hint);}
.progress-track{height:7px; background:var(--bg); border-radius:99px; overflow:hidden; margin-bottom:6px;}
.progress-fill{height:100%; background:var(--navy); border-radius:99px; transition:width .3s;}
.progress-label{font-size:11px; color:var(--hint);}

/* 빈 상태 */
.empty-state{text-align:center; color:var(--hint); padding:60px 20px;}
.empty-state i{font-size:40px; opacity:.5;}
.empty-state p{margin-top:14px; font-size:14px; line-height:1.6;}

/* ===== 단어장 상세 ===== */
.search-box{
  display:flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:9px 12px; margin-bottom:12px;
}
.search-box i{font-size:17px; color:var(--hint);}
.search-box input{flex:1; border:none; background:none; font-family:inherit; font-size:14px; color:var(--ink);}
.search-box input:focus{outline:none;}
.mode-row{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px;}
.mode-btn{font-size:13.5px; padding:12px;}
.mode-btn i{font-size:17px;}

.vsection{margin-bottom:14px;}
.vsection-hdr{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--navy-soft); color:var(--navy-deep); border:1px solid #d6e0f3;
  border-radius:var(--radius-sm); padding:6px 11px; margin-bottom:8px;
}
.vsection-hdr .name{font-size:12.5px; font-weight:700;}
.vsection-hdr .cnt{font-size:11px; color:#5a6aa5;}
.word-row{
  display:flex; align-items:center; gap:10px; padding:11px 13px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm);
  margin-bottom:6px; cursor:pointer;
}
.word-row .w{font-weight:500; font-size:14px; min-width:38%; word-break:break-word;}
.word-row .m{flex:1; font-size:12.5px; color:var(--sub);}
.word-row .pos{font-size:9.5px; color:var(--orange-deep); background:var(--orange-soft); padding:2px 6px; border-radius:4px; white-space:nowrap;}
.word-row .spk{font-size:16px; color:var(--navy); flex:none;}
.word-row.hidden-row{display:none;}

/* ===== 플래시카드 ===== */
.flash-bar{height:5px; background:var(--line); flex:none;}
#flash-bar-fill{height:100%; width:0; background:var(--orange); transition:width .3s;}
.flash-progress{font-size:13px; font-weight:500; color:#fff;}
.flash-content{display:flex; flex-direction:column; justify-content:center; gap:18px;}
.flash-card{
  background:var(--card); border:1px solid var(--line2); border-radius:16px;
  padding:30px 22px; text-align:center; min-height:240px; position:relative;
  display:flex; flex-direction:column; justify-content:center; cursor:pointer;
}
.flash-pos{position:absolute; top:14px; left:16px; background:var(--navy-soft); color:#0c447c; font-size:10.5px; font-weight:500; padding:2px 8px; border-radius:var(--radius-sm);}
.flash-level{position:absolute; top:14px; right:16px; color:var(--orange); font-size:11px; font-weight:500;}
.flash-word-row{display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:6px;}
#flash-word{font-size:30px; font-weight:500; word-break:break-word;}
.flash-tts{background:none; border:none; color:var(--navy); font-size:24px; display:flex;}
.flash-pron{font-size:13px; color:var(--hint);}
.flash-back{border-top:1px dashed var(--line2); padding-top:16px; margin-top:16px;}
#flash-meaning{font-size:21px; font-weight:500; color:var(--navy); margin-bottom:10px; line-height:1.4;}
.flash-example{font-size:13px; color:var(--sub); line-height:1.6;}
.flash-hint{font-size:11px; color:var(--hint); margin-top:16px;}
.flash-actions{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.flash-actions i{font-size:17px;}
.flash-done{text-align:center; color:var(--sub); display:flex; flex-direction:column; gap:12px; align-items:center;}
.flash-done > i{font-size:44px; color:var(--green);}
.flash-done p{font-size:16px; font-weight:500; color:var(--ink); margin-bottom:6px;}
.flash-done button{width:100%; max-width:240px;}

/* 로딩 */
.loading{position:fixed; inset:0; background:rgba(244,246,250,.7); display:flex; align-items:center; justify-content:center; z-index:50;}
.spinner{width:34px; height:34px; border:3px solid var(--line2); border-top-color:var(--navy); border-radius:50%; animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important;}}