/* 우리말 곳간 공통 스타일. 휴대폰 화면 기준이며, 넓은 화면에서는 가운데에 최대 560px로 둔다. */
@import url('account-menu.css');
:root{
  --ink:#33394A;
  --ink-soft:#5B6175;
  --paper:#FBF8F1;
  --paper-alt:#F1E9D8;
  --paper-card:#FFFDF8;
  --red:#C96E52;
  --red-soft:#FBE8E1;
  --jade:#3E7A5A;
  --jade-soft:#E9F1EC;
  --gold:#A8791F;
  --gold-soft:#F5EAC9;
  --line:#DCD3BE;
  --sky:#AFC9DE;
  --sky-soft:#EAF1F7;
  /* 연한 바탕 위 글자·눌린 칸용 진한 색(WCAG 대비 4.5:1 이상) */
  --gold-ink:#7D5A14;
  --jade-ink:#33664B;
  --sky-ink:#3E6C93;
  --red-deep:#A4513A;
  --tap:44px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{-webkit-text-size-adjust:100%;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Sans KR', sans-serif;
  font-size:17px;
  line-height:1.6;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  word-break:keep-all;
}
.serif{font-family:'Noto Serif KR', serif;}
a{color:inherit;}
button{font:inherit; color:inherit;}
[hidden]{display:none !important;}

.page{max-width:560px; margin:0 auto; padding:16px 16px 48px;}

/* ---------- 머리글 ---------- */
.site-header{background:var(--paper-card); border-bottom:1px solid var(--line);}
.site-header-inner{
  max-width:560px; margin:0 auto; padding:6px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:56px;
}
.logo{font-family:'Noto Serif KR', serif; font-weight:700; font-size:20px; text-decoration:none; color:var(--ink);}

/* ---------- 버튼 ---------- */
.btn{
  display:flex; align-items:center; justify-content:center; gap:6px;
  min-height:var(--tap); width:100%; padding:10px 16px;
  border:1.5px solid var(--ink); border-radius:12px;
  background:var(--ink); color:var(--paper-card);
  font-size:17px; font-weight:600; text-align:center; text-decoration:none; cursor:pointer;
}
.btn:disabled{opacity:0.45; cursor:default;}
.btn.secondary{background:transparent; color:var(--ink);}
.btn.small{width:auto; min-height:var(--tap); padding:6px 14px; font-size:15px; border-radius:999px;}
.btn + .btn{margin-top:10px;}
.link-btn{
  border:none; background:none; cursor:pointer; min-height:var(--tap); padding:0 6px;
  font-size:15px; color:var(--ink-soft); text-decoration:underline; text-underline-offset:3px;
}

/* ---------- 카드, 칩, 진행 막대 ---------- */
.card{background:var(--paper-card); border:1px solid var(--line); border-radius:14px; padding:16px;}
.label{font-size:15px; color:var(--ink-soft); margin:20px 2px 8px;}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin:8px 0;}
.chip{
  min-height:var(--tap); min-width:var(--tap); padding:6px 14px;
  border:1px solid var(--line); border-radius:999px; background:var(--paper-card);
  font-size:15px; cursor:pointer;
}
.chip.on{background:var(--ink); border-color:var(--ink); color:var(--paper-card);}
.bar{height:8px; border-radius:4px; background:var(--paper-alt); overflow:hidden;}
.bar > i{display:block; height:100%; background:var(--jade); border-radius:4px;}
.tag{display:inline-block; font-size:14px; padding:2px 10px; border-radius:999px; background:var(--gold-soft); color:var(--gold-ink);}
.tag.jade{background:var(--jade-soft); color:var(--jade-ink);}
.tag.plain{background:var(--paper-alt); color:var(--ink-soft);}
.muted{color:var(--ink-soft);}
/* 화면에는 안 보이고 스크린리더만 읽는 글(채점 결과 알림 등) */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}
.empty{text-align:center; padding:48px 16px; color:var(--ink-soft);}
.empty .serif{display:block; font-size:20px; color:var(--ink); margin-bottom:8px;}

/* ---------- 토스트 ---------- */
.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  background:var(--ink); color:var(--paper-card); padding:10px 18px; border-radius:999px;
  font-size:15px; z-index:10;
}

/* ---------- 바닥글 ---------- */
.site-footer{text-align:center; padding:24px 16px 40px; font-size:14px; color:var(--ink-soft);}
.site-footer nav{display:flex; gap:4px 16px; justify-content:center; flex-wrap:wrap;}
.site-footer a{display:inline-flex; align-items:center; min-height:var(--tap); text-underline-offset:3px;}