:root{
  --ink:#1E2A22;
  --paper:#EEF3EA;
  --card:#FFFFFF;
  --success:#2F9E68;
  --success-bg:#E3F5EC;
  --danger:#E4483A;
  --danger-bg:#FDEAE8;
  --line:#C9D3C6;
  --muted:#6B776C;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* 라운드별 강조색 (기본값 = 연습 라운드) */
  --accent:#F2B705;
  --accent-dark:#8A6600;
}
body.theme-coral{
  --accent:#FF5D4A;
  --accent-dark:#B5301F;
}
*{box-sizing:border-box;}
body{
  margin:0;
  min-height:100vh;
  background:
    repeating-linear-gradient(135deg, rgba(0,0,0,0.015) 0 2px, transparent 2px 40px),
    var(--paper);
  color:var(--ink);
  font-family:'Pretendard','Apple SD Gothic Neo','Malgun Gothic',-apple-system,BlinkMacSystemFont,sans-serif;
  display:flex;
  justify-content:center;
  padding:32px 16px 80px;
}
.app{width:100%; max-width:480px;}
.hidden{display:none !important;}
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin:0 4px 14px;
  font-size:12px;
}
.home-link{color:var(--muted); text-decoration:none; font-weight:700;}
.home-link:hover{color:var(--ink);}
.student-tag{font-family:var(--mono); color:var(--muted);}

.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.14em;
  color:var(--accent-dark);
  text-transform:uppercase;
  margin:0 0 4px 4px;
}
.eyebrow.flush{margin-left:0;}
h1{
  font-size:26px;
  font-weight:800;
  letter-spacing:-0.01em;
  margin:0 0 4px 4px;
}
.sub{
  font-size:14px;
  color:var(--muted);
  margin:0 0 20px 4px;
}
.stub{
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:var(--ink);
  color:var(--paper);
  border-radius:10px;
  padding:10px 16px;
  font-family:var(--mono);
  font-size:13px;
  margin-bottom:18px;
}
.stub b{color:var(--accent);}

/* 영수증 카드 */
.receipt{
  background:var(--card);
  border-radius:14px 14px 0 0;
  padding:28px 26px 22px;
  margin-bottom:-1px; /* 지그재그와의 서브픽셀 틈 방지 */
  position:relative;
}
.zigzag{
  height:14px;
  background-color:var(--card);
  background-image:
    linear-gradient(-45deg, var(--paper) 7px, transparent 0),
    linear-gradient(45deg, var(--paper) 7px, transparent 0);
  background-position:bottom left;
  background-size:14px 14px;
  background-repeat:repeat-x;
  margin-bottom:18px;
}
.qnum{
  font-family:var(--mono);
  font-size:12px;
  color:var(--muted);
  letter-spacing:0.06em;
}
.meaning{
  font-size:22px;
  font-weight:800;
  margin:6px 0 18px;
  line-height:1.4;
}
.phrase{
  font-family:var(--mono);
  font-size:17px;
  background:var(--paper);
  border:1px dashed var(--line);
  border-radius:8px;
  padding:14px 16px;
  margin-bottom:6px;
  line-height:1.6;
}
.blank{
  display:inline-block;
  min-width:74px;
  border-bottom:2px solid var(--ink);
  text-align:center;
  font-weight:800;
  color:var(--accent-dark);
}
.barcode{
  height:26px;
  margin:18px 0 22px;
  background-image:repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 5px, var(--ink) 5px 6px, transparent 6px 9px, var(--ink) 9px 12px, transparent 12px 14px);
  opacity:0.55;
}

/* 피드백 */
.feedback{
  margin-top:16px;
  padding:12px 14px;
  border-radius:8px;
  font-size:14px;
  font-weight:700;
  display:none;
}
.feedback.show{display:block;}
.feedback.ok{background:var(--success-bg); color:var(--success);}
.feedback.no{background:var(--danger-bg); color:var(--danger);}

/* 버튼 */
.next-wrap{padding:0;}
.next-btn{
  width:100%;
  padding:14px;
  font-size:16px;
  font-weight:800;
  border:none;
  border-radius:10px;
  background:var(--ink);
  color:var(--paper);
  cursor:pointer;
  margin-top:4px;
}
.next-btn:hover{background:#0f1710;}
.restart-btn{
  width:100%;
  padding:14px;
  font-size:16px;
  font-weight:800;
  border:2px solid var(--ink);
  border-radius:10px;
  background:transparent;
  color:var(--ink);
  cursor:pointer;
  margin-top:22px;
}
.restart-btn:hover{background:var(--ink); color:var(--paper);}

/* 랭킹 */
.rank-list{list-style:none; margin:0; padding:0; text-align:left;}
.rank-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-bottom:1px dashed var(--line);
  font-size:14px;
}
.rank-row.me{background:var(--paper); border-radius:8px; font-weight:800;}
.rank-no{width:28px; text-align:center; font-family:var(--mono); color:var(--muted);}
.rank-name{flex:1;}
.rank-name small{color:var(--muted); font-size:12px;}
.rank-pts{font-family:var(--mono); font-weight:800; color:var(--accent-dark);}
.rank-empty{font-size:14px; color:var(--muted); padding:16px; text-align:center;}

/* 결과 화면 */
.result{
  background:var(--card);
  border-radius:14px;
  padding:30px 26px;
  text-align:center;
}
.result h2{font-size:20px; margin:0 0 6px;}
.score-big{
  font-family:var(--mono);
  font-size:44px;
  font-weight:800;
  color:var(--accent-dark);
  margin:12px 0 4px;
}
.score-unit{font-size:20px; color:var(--muted); font-weight:700;}
.score-label{font-size:13px; color:var(--muted); margin-bottom:22px;}
.review-title{
  text-align:left;
  font-size:14px;
  font-weight:800;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--muted);
  margin:20px 0 10px;
  border-top:1px dashed var(--line);
  padding-top:18px;
}
.review-item{
  text-align:left;
  border:1px dashed var(--danger);
  background:var(--danger-bg);
  border-radius:8px;
  padding:12px 14px;
  margin-bottom:8px;
}
.review-item .kr{font-size:14px; font-weight:800; margin-bottom:4px;}
.review-item .en{font-family:var(--mono); font-size:14px; color:var(--success);}
.review-item .yours{font-size:12px; color:var(--danger); margin-top:2px;}
.review-empty{
  font-size:14px;
  color:var(--success);
  font-weight:700;
  background:var(--success-bg);
  border-radius:8px;
  padding:16px;
  margin-top:20px;
}