.personal-voca { box-sizing:border-box; width:100%; max-width:1040px; margin:0 auto; padding:24px 20px 40px; color:#203044; font-family:inherit; }
.personal-voca * { box-sizing:border-box; }
.personal-voca button { font:inherit; cursor:pointer; }
.personal-voca button:disabled { cursor:default; opacity:.55; }
.personal-voca button:focus-visible { outline:3px solid #7599bd; outline-offset:3px; }
.pv-header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px; }
.pv-eyebrow { color:#617489; font-size:14px; margin:0 0 4px; font-weight:650; }
.pv-header h1 { font-size:30px; letter-spacing:-1px; margin:0; }
.pv-link { border:0; background:transparent; color:#45627f; padding:10px 0; min-height:44px; }
.pv-launch { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; min-height:45vh; text-align:center; }
.pv-start-counts { margin:0; color:#536a80; font-size:20px; line-height:1.6; word-break:keep-all; }
.pv-start-total { margin:0; color:#203044; font-size:36px; line-height:1.2; font-weight:750; letter-spacing:-1px; }
.pv-primary,.pv-secondary { border-radius:14px; min-height:54px; padding:14px 24px; font-weight:650!important; line-height:1.4; border:1px solid #2d4d69; }
.pv-primary { background:#2d4d69; color:#fff; }
.pv-secondary { background:#fff; color:#2d4d69; border-color:#cad7e2; }
.pv-launch>.pv-primary { width:100%; max-width:440px; min-height:74px; font-size:24px; }
.pv-muted,.pv-next { color:#657589; font-size:16px; line-height:1.6; }
.pv-alert { background:#fff1eb; border:1px solid #f0c9b9; border-radius:10px; color:#843d26; padding:10px 14px; font-size:15px; line-height:1.5; margin:0; }
.pv-alert button { background:#fff; border:1px solid #dabcae; border-radius:6px; padding:7px 10px; color:#843d26; }
.pv-status,.pv-loading { font-size:15px; color:#55728b; padding:6px 0; margin:0; }
.pv-study-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; color:#6a7b8e; font-size:15px; flex:0 0 auto; }
.pv-study-toolbar .pv-link { padding:8px 4px; font-size:16px; }
.pv-progress-count { color:#2d4d69; font-size:20px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.pv-card { width:100%; min-height:0; margin:0; border:1px solid #dce5ee; background:#fff; border-radius:18px; overflow:hidden; }
.pv-face { height:100%; min-height:0; padding:28px 30px; overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.pv-front { display:grid; place-items:center; text-align:center; }
.pv-word { border:0; background:none; color:inherit; padding:4px 0; font:650 28px/1.35 Arial,sans-serif!important; text-align:left; border-radius:3px; overflow-wrap:anywhere; max-width:100%; }
@media(hover:hover) and (pointer:fine) { .pv-word:hover { text-decoration:underline; text-underline-offset:5px; } }
.pv-word.speaking { color:#28749e; text-decoration:underline; text-underline-offset:5px; }
.pv-word.pv-headword { font-size:clamp(52px,12vw,96px)!important; font-weight:650!important; letter-spacing:-1px; line-height:1.18!important; text-align:center; }
.pv-back-headword .pv-word { font-size:36px!important; color:#61778c; }
.pv-main-meaning { font-size:38px; line-height:1.4; font-weight:700; letter-spacing:-.5px; padding:10px 0 20px; border-bottom:1px solid #e6ecf1; margin-bottom:20px; word-break:keep-all; overflow-wrap:anywhere; }
.pv-relation { display:grid; grid-template-columns:62px minmax(0,1fr); gap:16px; margin:18px 0 0; }
.pv-relation h3 { font-size:17px; color:#6c7e91; line-height:1.6; margin:8px 0 0; font-weight:650; }
.pv-entry { font-size:24px; line-height:1.6; margin:0 0 10px; overflow-wrap:anywhere; }
.pv-word-list { margin-right:10px; }
.pv-separator { color:#91a0ac; }
.pv-gloss { color:#54677a; word-break:keep-all; overflow-wrap:anywhere; }
.pv-antonyms .pv-word { color:#9b514b; }
.pv-flip-controls { flex:0 0 auto; text-align:center; }
.pv-flip-controls .pv-primary { width:100%; min-height:62px; font-size:22px; }
.pv-grades { flex:0 0 auto; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; width:100%; margin:0; }
.pv-grade { background:#fff; border:1px solid #d6e0e9; border-radius:12px; padding:12px 4px; min-height:76px; text-align:center; }
.pv-grade strong { display:block; font-size:19px; white-space:nowrap; }
.pv-grade span { display:block; margin-top:4px; font-size:15px; color:#687c8f; }
.pv-grade-again strong { color:#a6443b; }.pv-grade-hard strong { color:#996924; }.pv-grade-good strong { color:#367262; }.pv-grade-easy strong { color:#396b99; }
.pv-grade-again:hover { background:#fff3f1; }.pv-grade-hard:hover { background:#fff8ec; }.pv-grade-good:hover { background:#f0f9f5; }.pv-grade-easy:hover { background:#f0f6fe; }
.pv-complete { text-align:center; background:#fff; border:1px solid #dce5ee; border-radius:18px; padding:42px 24px; }
.pv-complete h2 { font-size:26px; margin:0; }.pv-complete p { font-size:17px; color:#64768b; line-height:1.7; margin:16px 0; }.pv-complete button { margin:10px 4px 0; }
/* 화면 높이는 카드에 배정하고, 긴 뒷면만 카드 안에서 스크롤한다. */
.personal-voca.pv-studying { display:flex; flex-direction:column; gap:10px; max-width:none; margin:0; height:100vh; height:100dvh; min-height:0; padding:max(4px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); }
.pv-studying .pv-header { display:none; }.pv-studying .pv-card { flex:1 1 0; }.pv-studying>.pv-alert { flex:0 1 auto; max-height:22dvh; overflow:auto; }
body.pv-studying:has(#personalVoca.active) { display:block; overflow:hidden; background:#fff; }
body.pv-studying:has(#personalVoca.active) .app { max-width:none; width:100%; height:100vh; height:100dvh; min-height:0; padding:0; }
body.pv-studying:has(#personalVoca.active) .topbar { display:none; }
body.pv-studying #personalVoca.active { height:100%; min-height:0; }
@media(max-width:650px) {
  .personal-voca { padding:22px 16px 30px; }.pv-header h1 { font-size:28px; }.pv-face { padding:20px 18px; }
  .pv-word { font-size:25px!important; }.pv-word.pv-headword { font-size:clamp(50px,14vw,76px)!important; }.pv-back-headword .pv-word { font-size:32px!important; }
  .pv-main-meaning { font-size:32px; margin-bottom:18px; padding-bottom:18px; }.pv-relation { grid-template-columns:48px minmax(0,1fr); gap:10px; margin-top:16px; }.pv-relation h3 { font-size:16px; }.pv-entry { font-size:22px; }
  .pv-grades { gap:6px; }.pv-grade strong { font-size:17px; }.pv-grade span { font-size:14px; }
}
@media(max-height:500px) and (orientation:landscape) {
  .personal-voca.pv-studying { gap:5px; padding-top:env(safe-area-inset-top); padding-bottom:max(5px,env(safe-area-inset-bottom)); }
  .pv-study-toolbar .pv-link { min-height:36px; padding:4px; }.pv-grade { min-height:55px; padding:5px 4px; }.pv-grade strong { font-size:17px; }.pv-grade span { font-size:13px; margin-top:1px; }.pv-flip-controls .pv-primary { min-height:48px; padding:8px 16px; }
}