* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #fef8f2;
  --surface: #fff5ee;
  --card: #ffffff;
  --text: #3a2015;
  --sub: #8c6555;
  --hint: #b89080;
  --pink: #ffb0b0;
  --pinkd: #e87070;
  --mint: #8de0c0;
  --mintd: #3dba8c;
  --blue: #a0c0f0;
  --blued: #5090d0;
  --border: #f0ddd4;
  --sh: rgba(160,80,40,.10);
  --shh: rgba(160,80,40,.18);
  --r: 22px;
  --rl: 30px;
  --rs: 14px;
}
[data-theme=dark] {
  --bg: #18142a;
  --surface: #201c35;
  --card: #28243e;
  --text: #ede8ff;
  --sub: #a090cc;
  --hint: #706090;
  --pink: #d080a0;
  --pinkd: #e898b8;
  --mint: #50a888;
  --mintd: #70d4a8;
  --blue: #5080b8;
  --blued: #78a8e0;
  --border: #302850;
  --sh: rgba(0,0,0,.25);
  --shh: rgba(0,0,0,.40);
}

body {
  font-family: 'Noto Sans KR', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100dvh;
  margin: 0;
  display: flex;
  flex-direction: column;
  transition: background .5s, color .5s, border-color .5s;
}

/* ── SCROLL ── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* ── LAYOUT ── */
.app { 
   width: 100%; 
   max-width: 768px; 
   margin: 0 auto; 
   padding: 0 18px 90px; 
   flex: 1;
}

/* ── HEADER ── */
header { display: flex; align-items: center; justify-content: space-between; padding: 22px 0 14px; }
.logo { font-family: 'Noto Serif JP', serif; font-size: 21px; font-weight: 700; cursor:pointer;}
.logo em { color: var(--pinkd); font-style: normal; }
.hbtns { display: flex; gap: 8px; align-items:center; }
.user-info { font-size: 13px; color: var(--sub); font-weight: 500; display:none; max-width:120px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.icbtn {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1.5px solid var(--border); background: var(--card);
  cursor: pointer; font-size: 17px; display: flex; align-items: center; justify-content: center;
  color: var(--sub); transition: all .2s;
}
.icbtn:hover { background: var(--surface); transform: scale(1.06); }
.textbtn {
  padding: 6px 12px; border-radius: 20px;
  border: 1.5px solid var(--border); background: var(--card);
  cursor: pointer; font-size: 13px; display: none; align-items: center; justify-content: center;
  color: var(--sub); transition: all .2s; font-family: 'Noto Sans KR', sans-serif; font-weight:500;
}
.textbtn:hover { background: var(--surface); color: var(--pinkd); border-color: var(--pinkd); }

/* ── VIEWS ── */
.view { display: none; }
.view.active { display: block; animation: fade-in 0.3s ease; }
@keyframes fade-in { from { opacity: 0; transform:translateY(10px); } to { opacity: 1; transform:translateY(0); } }

/* ── AUTH VIEW ── */
.auth-box {
  background: var(--card); border-radius: var(--rl);
  padding: 30px 24px; border: 1.5px solid var(--border);
  box-shadow: 0 10px 40px var(--sh); text-align: center; margin-top: 20px;
}
.auth-title { font-family: 'Noto Serif JP', serif; font-size: 24px; font-weight: 700; margin-bottom: 24px; }
.auth-input {
  width: 100%; padding: 14px 16px; border-radius: var(--rs);
  border: 1.5px solid var(--border); background: var(--surface);
  color: var(--text); font-family: 'Noto Sans KR', sans-serif;
  font-size: 15px; outline: none; transition: all .2s; margin-bottom: 12px;
}
.auth-input:focus { border-color: var(--blued); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 22%, transparent); }
.auth-btn {
  width: 100%; padding: 16px; border-radius: var(--rs); border: none;
  background: linear-gradient(130deg, var(--blued), var(--blue));
  color: #fff; font-family: 'Noto Sans KR', sans-serif;
  font-size: 16px; font-weight: 600; cursor: pointer;
  box-shadow: 0 6px 20px var(--shh); transition: all .25s; margin-bottom: 16px;
}
.auth-btn:hover { transform: translateY(-2px); filter:brightness(1.05); }
.auth-switch {
  font-size: 13px; color: var(--sub); cursor: pointer; font-weight: 500; text-decoration: underline;
}
.auth-divider {
  display:flex; align-items:center; text-align:center; color:var(--hint); font-size:12px; margin: 24px 0;
}
.auth-divider::before, .auth-divider::after {
  content:''; flex:1; border-bottom:1px solid var(--border);
}
.auth-divider::before { margin-right:10px; }
.auth-divider::after { margin-left:10px; }

.google-btn {
  width: 100%; padding: 14px; border-radius: var(--rs);
  border: 1.5px solid var(--border); background: var(--card);
  color: var(--text); font-family: 'Noto Sans KR', sans-serif;
  font-size: 15px; font-weight: 500; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: all .2s;
}
.google-btn:hover { background: var(--surface); border-color: var(--sub); }
.google-btn img { width: 18px; height: 18px; }

/* ── STATS ── */
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.scard {
  background: var(--card); border-radius: var(--r);
  padding: 18px 20px; border: 1.5px solid var(--border);
  box-shadow: 0 4px 18px var(--sh); transition: background .5s, border-color .5s;
}
.snum { font-family: 'Noto Serif JP', serif; font-size: 38px; font-weight: 700; line-height: 1; margin-bottom: 3px; }
.slabel { font-size: 12px; color: var(--sub); font-weight: 500; }
.scard:nth-child(1) .snum { color: var(--pinkd); }
.scard:nth-child(2) .snum { color: var(--mintd); }

/* ── SECTION TITLE ── */
.stitle { font-size: 12px; font-weight: 600; color: var(--sub); text-transform: uppercase; letter-spacing: .09em; margin-bottom: 10px; display:flex; justify-content:space-between; align-items:center; }
.stitle-action { color: var(--blued); cursor:pointer; text-transform:none; letter-spacing:0;}

/* ── MODE TABS ── */
.tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  background: var(--surface); border-radius: var(--r); padding: 6px;
  border: 1.5px solid var(--border); margin-bottom: 18px;
}
.tab {
  padding: 13px 8px; border-radius: calc(var(--r) - 6px); border: none;
  background: transparent; cursor: pointer; font-family: 'Noto Sans KR', sans-serif;
  font-size: 14px; font-weight: 500; color: var(--sub);
  transition: all .25s; display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.tab .te { font-size: 20px; }
.tab.on { background: var(--card); color: var(--text); box-shadow: 0 3px 10px var(--sh); }


/* ── BUTTONS ── */
.btnstart {
  width: 100%; padding: 18px; border-radius: var(--rl); border: none;
  background: linear-gradient(130deg, var(--pink), var(--blue));
  color: #fff; font-family: 'Noto Sans KR', sans-serif;
  font-size: 17px; font-weight: 600; cursor: pointer;
  box-shadow: 0 6px 24px var(--shh); transition: all .25s;
  letter-spacing: .02em; margin-bottom: 10px;
}
.btnstart:hover { transform: translateY(-2px); box-shadow: 0 10px 30px var(--shh); }
.btnstart:active { transform: none; }
.btnstart:disabled { background:var(--border); color:var(--sub); cursor:not-allowed; transform:none; box-shadow:none;}

.btnmgr {
  width: 100%; padding: 13px; border-radius: var(--r);
  border: 1.5px solid var(--border); background: var(--card);
  color: var(--sub); font-family: 'Noto Sans KR', sans-serif;
  font-size: 14px; font-weight: 500; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: all .2s; margin-bottom: 26px;
}
.btnmgr:hover { background: var(--surface); color: var(--text); }

/* ── FOLDER / WORD LIST ── */
.wlhdr { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; margin-top:20px;}
.witem {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; background: var(--card);
  border-radius: var(--rs); border: 1.5px solid var(--border);
  margin-bottom: 8px; transition: background .5s, border-color .5s, transform .2s, box-shadow .2s;
  cursor:pointer;
}
.witem:hover { transform: translateY(-2px); box-shadow: 0 4px 12px var(--sh); border-color:var(--pinkd);}
.folder-icon { font-size:28px; min-width: 40px; text-align:center;}
.folder-title { font-size:16px; font-weight:600; color:var(--text); margin-bottom:4px;}
.folder-sub { font-size:12px; color:var(--sub);}
.folder-arrow { color:var(--border); font-size:20px; font-weight:300;}
.witem:hover .folder-arrow { color:var(--pinkd); }

.wkanji { font-family: 'Noto Serif JP', serif; font-size: 24px; font-weight: 700; min-width: 52px; color: var(--text); }
.wmeta { flex: 1; min-width: 0; }
.wreading { font-size: 12px; color: var(--sub); margin-bottom: 2px; }
.wmeaning { font-size: 14px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wbadge { font-size: 15px; flex-shrink: 0; }
.wdrag { cursor: grab; font-size: 18px; color: var(--hint); transition: color .2s; padding: 0 4px; touch-action: none; }
.wdrag:hover { color: var(--pinkd); }
.wactions { display: flex; gap: 6px; flex-shrink: 0; }
.wabtn {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid var(--border); background: var(--surface);
  cursor: pointer; font-size: 13px; display: flex; align-items: center; justify-content: center;
  transition: all .2s;
}
.wabtn:hover { background: var(--border); }


/* ── FOLDER CREATE MODAL ── */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:900; 
  display:none; align-items:center; justify-content:center;
  backdrop-filter: blur(3px);
}
.modal-overlay.active { display:flex; animation: fade-in 0.2s;}
.modal {
  background:var(--card); border-radius:var(--r); padding:24px;
  width:90%; max-width:360px; border:1.5px solid var(--border);
  box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}
.modal-title { font-size:18px; font-weight:600; margin-bottom:16px; color:var(--text);}
.modal-actions { display:flex; gap:10px; margin-top:20px;}
.modal-btn {
  flex:1; padding:12px; border-radius:var(--rs); border:1.5px solid var(--border);
  background:var(--surface); cursor:pointer; font-family:'Noto Sans KR', sans-serif;
  font-weight:500; transition:all .2s; color:var(--text);
}
.modal-btn.primary { background:var(--pinkd); color:#fff; border-color:var(--pinkd); font-weight:600;}
.modal-btn:hover { filter:brightness(0.95); }


/* ── STUDY HEADER ── */
.shdr { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.backbtn {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1.5px solid var(--border); background: var(--card);
  cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center;
  color: var(--sub); flex-shrink: 0; transition: all .2s;
}
.backbtn:hover { background: var(--surface); }
.pinfo { flex: 1; }
.ptxt { font-size: 12px; color: var(--sub); margin-bottom: 5px; font-weight: 500; }
.ptrack { height: 6px; background: var(--border); border-radius: 10px; overflow: hidden; }
.pfill { height: 100%; background: linear-gradient(to right, var(--pinkd), var(--blued)); border-radius: 10px; transition: width .4s ease; }

/* ── ROUND BADGE ── */
.rbadge {
  display: inline-block; padding: 4px 14px; border-radius: 20px;
  background: color-mix(in srgb, var(--pink) 25%, transparent);
  color: var(--pinkd); font-size: 12px; font-weight: 600; margin-bottom: 14px;
}

/* ── FLASH CARD ── */
.cscene { min-height: 300px; margin-bottom: 14px; }

.flashcard {
  background: var(--card); border-radius: var(--rl);
  border: 1.5px solid var(--border);
  box-shadow: 0 10px 40px var(--sh);
  padding: 38px 30px 28px; text-align: center;
  position: relative; overflow: hidden;
  animation: cEnter .4s cubic-bezier(.34,1.56,.64,1) both;
  transition: background .5s, border-color .5s;
}
.flashcard::before {
  content: ''; position: absolute; top: 0; right: 0;
  width: 110px; height: 110px;
  background: radial-gradient(circle, var(--pink) 0%, transparent 70%);
  opacity: .18; border-radius: 0 var(--rl) 0 110px; pointer-events: none;
}
.flashcard::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 80px; height: 80px;
  background: radial-gradient(circle, var(--blue) 0%, transparent 70%);
  opacity: .18; border-radius: 0 80px 0 var(--rl); pointer-events: none;
}

@keyframes cEnter {
  from { opacity: 0; transform: translateY(28px) scale(.95); }
  to { opacity: 1; transform: none; }
}
@keyframes swR { to { opacity: 0; transform: translateX(130%) rotate(14deg); } }
@keyframes swL { to { opacity: 0; transform: translateX(-130%) rotate(-14deg); } }
.swr { animation: swR .32s ease-in both !important; }
.swl { animation: swL .32s ease-in both !important; }

.cidx { font-size: 11px; color: var(--hint); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 14px; }
.ckanji { font-family: 'Noto Serif JP', serif; font-size: 76px; font-weight: 700; line-height: 1.1; color: var(--text); margin-bottom: 28px; }

/* ── HINT REVEALS ── */
.hreveal {
  overflow: hidden; max-height: 0;
  transition: max-height .4s cubic-bezier(.4,0,.2,1), opacity .3s ease, margin .3s;
  opacity: 0; margin-bottom: 0;
}
.hreveal.open { max-height: 70px; opacity: 1; margin-bottom: 10px; }

.hira-text { font-family: 'Noto Serif JP', serif; font-size: 26px; color: var(--blued); padding: 8px 0; }
.mean-text { font-size: 20px; color: var(--mintd); font-weight: 600; padding: 8px 0; }

.hbtns2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.hbtn {
  padding: 10px 12px; border-radius: var(--rs);
  border: 1.5px solid var(--border); background: var(--surface);
  color: var(--sub); font-family: 'Noto Sans KR', sans-serif;
  font-size: 13px; font-weight: 500; cursor: pointer; transition: all .2s;
}
.hbtn.revealed { border-color: var(--blued); color: var(--text); background: color-mix(in srgb, var(--blue) 15%, var(--card)); }
.hbtn:hover { transform: scale(1.02); }

/* ── ANSWER BUTTONS ── */
.ansbts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.ansbtn {
  padding: 17px 10px; border-radius: var(--r); border: none;
  cursor: pointer; font-family: 'Noto Sans KR', sans-serif;
  font-size: 15px; font-weight: 600; transition: all .25s;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  box-shadow: 0 5px 18px var(--sh); color: #fff;
}
.ansbtn .ae { font-size: 22px; }
.ansstudy { background: linear-gradient(135deg, #ff9090, #ffb5b5); }
.ansknow { background: linear-gradient(135deg, #50c898, #7eddb5); }
.ansbtn:hover { transform: translateY(-3px) scale(1.02); }
.ansbtn:active { transform: none; }

.swhint { display: flex; justify-content: space-between; padding: 0 4px; margin-bottom: 6px; color: var(--hint); font-size: 11px; }

/* ── MANAGE VIEW ── */
.impzone {
  border: 2px dashed var(--border); border-radius: var(--r);
  padding: 28px 20px; text-align: center; margin-bottom: 18px;
  background: var(--surface); cursor: pointer; transition: all .2s; position: relative;
}
.impzone.dov { border-color: var(--pinkd); background: color-mix(in srgb, var(--pink) 12%, var(--surface)); }
.impzone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.impicon { font-size: 34px; margin-bottom: 6px; }
.implabel { font-size: 15px; font-weight: 500; color: var(--sub); margin-bottom: 3px; }
.impsub { font-size: 12px; color: var(--hint); }

.addform {
  background: var(--card); border-radius: var(--r);
  border: 1.5px solid var(--border); padding: 20px; margin-bottom: 20px;
  transition: background .5s, border-color .5s;
}
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.frow.full { grid-template-columns: 1fr; }
.finp {
  width: 100%; padding: 12px 14px; border-radius: var(--rs);
  border: 1.5px solid var(--border); background: var(--surface);
  color: var(--text); font-family: 'Noto Sans KR', sans-serif;
  font-size: 15px; outline: none; transition: all .2s;
}
.finp:focus { border-color: var(--pinkd); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pink) 22%, transparent); }
.finp::placeholder { color: var(--hint); }

.addbtn {
  width: 100%; padding: 13px; border-radius: var(--rs); border: none;
  background: var(--pinkd); color: #fff; font-family: 'Noto Sans KR', sans-serif;
  font-size: 15px; font-weight: 600; cursor: pointer; transition: all .2s;
}
.addbtn:hover { filter: brightness(1.08); transform: translateY(-1px); }

.resetbtn {
  width: 100%; padding: 11px; border-radius: var(--rs);
  border: 1.5px solid var(--border); background: transparent;
  color: var(--hint); font-family: 'Noto Sans KR', sans-serif;
  font-size: 13px; cursor: pointer; transition: all .2s; margin-bottom: 14px;
}
.resetbtn:hover { background: var(--surface); color: var(--sub); }

/* ── COMPLETE VIEW ── */
.compscr { text-align: center; padding: 50px 20px 30px; }
.compemoji { font-size: 80px; margin-bottom: 18px; animation: bounce .8s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes bounce { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
.comptitle { font-family: 'Noto Serif JP', serif; font-size: 28px; font-weight: 700; margin-bottom: 8px; }
.compsub { font-size: 15px; color: var(--sub); margin-bottom: 36px; }
.compstats { display: flex; gap: 14px; justify-content: center; margin-bottom: 36px; }
.cs { background: var(--card); border: 1.5px solid var(--border); border-radius: var(--r); padding: 18px 22px; min-width: 100px; }
.csnum { font-family: 'Noto Serif JP', serif; font-size: 36px; font-weight: 700; color: var(--pinkd); margin-bottom: 2px; }
.cslabel { font-size: 12px; color: var(--sub); font-weight: 500; }

/* ── TOAST ── */
.toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--text); color: var(--card);
  padding: 11px 22px; border-radius: 40px;
  font-size: 14px; font-weight: 500; z-index: 1000;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
  white-space: nowrap; pointer-events: none;
}
.toast.show { transform: translateX(-50%) translateY(0); }

/* ── EMPTY STATE ── */
.empty { text-align: center; padding: 36px 20px; color: var(--hint); }
.empty .ee { font-size: 44px; margin-bottom: 10px; }
.empty p { font-size: 14px; }

/* ── LOADER ── */
.loading-overlay {
  position:fixed; inset:0; background:var(--bg); z-index:1001; 
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.spinner {
  width:40px; height:40px; border:4px solid var(--border);
  border-top:4px solid var(--pinkd); border-radius:50%;
  animation:spin 1s linear infinite; margin-bottom:16px;
}
@keyframes spin { 0% { transform:rotate(0deg); } 100% { transform:rotate(360deg); } }
.loading-text { font-size:14px; color:var(--text); font-weight:500; font-family:'Noto Sans KR', sans-serif;}

/* ── DIVIDER ── */
.div { height: 1px; background: var(--border); margin: 14px 0; }