/* 낱말 카드(cards.html)와 유형별 카드(practice.html)가 함께 쓰는 화면 스타일 */
@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;
  --shadow: 0 1px 0 rgba(51,57,74,0.06);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Sans KR', sans-serif;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
.serif{font-family:'Noto Serif KR', serif;}

/* subtle paper texture */
body::before{
  content:"";
  position:fixed; inset:0;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(35,40,58,0.02) 0%, transparent 40%),
    radial-gradient(circle at 80% 60%, rgba(35,40,58,0.025) 0%, transparent 45%);
  pointer-events:none;
  z-index:0;
}

.wrap{max-width:1080px; margin:0 auto; padding:0 20px; position:relative; z-index:1;}

/* ---------- Header ---------- */
header{
  background:var(--ink);
  color:var(--paper);
  padding:52px 0 40px;
  position:relative;
  /* 가로로 넘치는 것만 자른다(세로로는 내 메뉴 목록이 머리글 아래로 펼쳐진다). */
  overflow-x:clip;
  overflow-y:visible;
  z-index:5;
}
header::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:6px;
  background:repeating-linear-gradient(90deg, var(--red) 0 28px, transparent 28px 40px);
  opacity:0.85;
}
.eyebrow{
  font-size:12.5px; letter-spacing:0.18em; text-transform:uppercase;
  color:#D9C9A3; margin-bottom:14px; font-weight:500;
}
h1{
  font-size:clamp(32px,5vw,48px);
  font-weight:900;
  letter-spacing:-0.01em;
  line-height:1.15;
  margin-bottom:12px;
}
h1 .gold-line{color:#E3C27A;}
h1 .sky-line{color:#E6A794;}
.subtitle{
  font-size:15.5px; color:#C7CBDA; max-width:520px; line-height:1.6; margin-bottom:28px;
}
.stats-row{display:flex; gap:28px; flex-wrap:wrap;}
.stat{border-left:2px solid rgba(255,255,255,0.18); padding-left:12px;}
.stat b{display:block; font-family:'Noto Serif KR',serif; font-size:24px; font-weight:700;}
.stat span{font-size:13px; color:#A9AEC2;}

/* ---------- Auth ---------- */
.auth-box{position:absolute; top:20px; right:20px; z-index:2; display:flex; align-items:center; gap:10px;}

/* ---------- Controls ---------- */
.controls{
  background:var(--paper-card);
  border:1px solid var(--line);
  border-radius:2px;
  margin-top:-28px;
  padding:20px 22px;
  position:relative; z-index:2;
  box-shadow:0 8px 24px rgba(35,40,58,0.10);
}
.search-box{
  display:flex; align-items:center; gap:10px;
  border:1.5px solid var(--ink); background:#fff;
  padding:11px 14px; margin-bottom:16px;
}
.search-box:focus-within{outline:3px solid var(--sky-ink); outline-offset:2px;}
/* 16px보다 작으면 iOS 사파리가 입력란을 누를 때 화면을 확대한다. 초점 표시는 위 상자 테두리가 맡는다. */
.search-box input{
  border:none; outline:none; flex:1; min-width:0; font-size:17px;
  font-family:'IBM Plex Sans KR',sans-serif; background:transparent; color:var(--ink);
}
.search-box svg{flex-shrink:0; opacity:0.55;}

.chip-row{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:10px;}
.chip-label{font-size:13px; color:var(--ink-soft); width:52px; flex-shrink:0; font-weight:600; letter-spacing:0.02em;}
.chip{
  border:1px solid var(--line); background:#fff; color:var(--ink-soft);
  font-size:14px; min-height:var(--tap); padding:6px 14px; border-radius:100px; cursor:pointer;
  font-family:'IBM Plex Sans KR',sans-serif; transition:all .15s ease; font-weight:500;
}
.chip:hover{border-color:var(--ink);}
.chip.active{background:var(--sky-soft); border-color:var(--sky-ink); color:var(--sky-ink);}

.mode-toggle{display:flex; gap:0; border:1px solid var(--ink); width:fit-content;}
.mode-toggle-row{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-top:16px;}
.reset-memo-btn{
  border:none; background:none; color:var(--ink-soft); font-size:14px; min-height:var(--tap); cursor:pointer;
  font-family:'IBM Plex Sans KR',sans-serif; text-decoration:underline; text-underline-offset:2px;
}
.reset-memo-btn:hover{color:var(--red);}
.mode-toggle button{
  border:none; background:#fff; color:var(--ink); min-height:var(--tap); padding:9px 20px; font-size:15px;
  font-family:'IBM Plex Sans KR',sans-serif; font-weight:600; cursor:pointer; letter-spacing:0.01em;
}
.mode-toggle button.active{background:var(--ink); color:var(--paper);}
.mode-toggle button:not(:last-child){border-right:1px solid var(--ink);}

.result-count{font-size:14px; color:var(--ink-soft); margin-top:14px;}

/* ---------- Card grid ---------- */
main{padding:36px 0 80px;}
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(210px,1fr));
  gap:14px;
}
.wcard{
  background:var(--paper-card);
  border:1px solid var(--line);
  position:relative;
  min-height:150px;
  cursor:pointer;
  perspective:800px;
}
.wcard .corner{position:absolute; width:10px; height:10px; opacity:0.55;}
.wcard .corner.tl{top:-1px; left:-1px; border-top:2px solid var(--ink); border-left:2px solid var(--ink);}
.wcard .corner.br{bottom:-1px; right:-1px; border-bottom:2px solid var(--ink); border-right:2px solid var(--ink);}
/* 낱말 카드: 뒤집는 카드 아래에 "외웠어요"와 "자세히" 줄을 둔다(카드 버튼 안에 버튼을 넣지 않도록). */
.wcard-cell{display:flex; flex-direction:column;}
.wcard-cell .wcard{flex:1;}
.wcard-actions{
  display:flex; justify-content:space-between; align-items:center;
  border:1px solid var(--line); border-top:none; background:var(--paper-card);
}
.mem-toggle{
  display:inline-flex; align-items:center; gap:6px; min-height:var(--tap); padding:0 12px;
  border:none; background:none; cursor:pointer; font-size:14px; color:var(--ink-soft);
  font-family:'IBM Plex Sans KR',sans-serif;
}
.mem-toggle .dot{
  width:20px; height:20px; border-radius:50%; border:1.5px solid var(--ink-soft);
  display:inline-flex; align-items:center; justify-content:center; font-size:12px; color:transparent;
}
.mem-toggle[aria-pressed="true"]{color:var(--jade-ink); font-weight:600;}
.mem-toggle[aria-pressed="true"] .dot{background:var(--jade); border-color:var(--jade); color:#fff;}
.detail-link{display:inline-flex; align-items:center; min-height:var(--tap); padding:0 12px; font-size:14px; color:var(--ink-soft); text-underline-offset:3px;}
.mem-toggle:focus-visible, .detail-link:focus-visible{outline:3px solid var(--sky-ink); outline-offset:-3px;}
.wcard.memorized .wcard-face.front{background:var(--paper-alt);}
.wcard.memorized .word-display{color:var(--ink-soft);}
.wcard-inner{
  position:relative; display:grid; width:100%; height:100%; min-height:150px;
  transition:transform .5s cubic-bezier(.4,.2,.2,1);
  transform-style:preserve-3d;
}
.wcard.flipped .wcard-inner{transform:rotateY(180deg);}
.wcard:focus-visible{outline:3px solid var(--sky-ink); outline-offset:3px;}
.wcard-face{
  position:relative; grid-area:1 / 1; min-width:0; overflow-wrap:anywhere; backface-visibility:hidden;
  padding:18px 16px; display:flex; flex-direction:column;
}
.wcard-face.front{justify-content:space-between;}
.wcard-face.back{
  transform:rotateY(180deg);
  background:var(--ink); color:var(--paper);
  justify-content:center;
}
.tagrow{display:flex; gap:6px; flex-wrap:wrap;}
.tag{
  font-size:12px; padding:3px 8px; border-radius:2px; font-weight:600; letter-spacing:0.01em;
}
.tag.origin-한자어{background:var(--gold-soft); color:var(--gold-ink);}
.tag.origin-순우리말{background:var(--jade-soft); color:var(--jade-ink);}
.tag.pos-tag{background:var(--red-soft); color:var(--red-deep);}
.tag.pos-phrase{background:var(--sky-soft); color:var(--sky-ink);}
.tag.aired-tag{background:var(--ink); color:var(--paper);}
.word-display{
  font-family:'Noto Serif KR',serif; font-weight:700; font-size:21px; line-height:1.35;
  margin-top:12px; word-break:keep-all;
}
.syll-dots{display:flex; gap:4px; margin-top:10px;}
.syll-dots i{width:5px; height:5px; border-radius:50%; background:var(--line); display:block;}
.flip-hint{font-size:13px; color:var(--ink-soft); margin-top:auto; padding-top:8px;}
.meaning-text{font-size:15px; line-height:1.6; font-family:'IBM Plex Sans KR',sans-serif; word-break:keep-all;}
.back-pos{font-size:13px; color:#B9A98C; margin-top:12px; letter-spacing:0.03em;}

.empty-state{
  grid-column:1/-1; text-align:center; padding:60px 20px; color:var(--ink-soft);
}
.empty-state .serif{font-size:20px; display:block; margin-bottom:8px; color:var(--ink);}

/* ---------- Quiz mode ---------- */
.quiz-wrap{display:flex; flex-direction:column; align-items:center; padding:40px 0;}
.quiz-progress{font-size:14px; color:var(--ink-soft); margin-bottom:20px; letter-spacing:0.05em;}
.quiz-card{
  width:100%; max-width:420px; min-height:300px;
  background:var(--paper-card); border:1.5px solid var(--ink);
  padding:36px 28px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; cursor:pointer; position:relative;
}
.quiz-card .corner{position:absolute; width:14px; height:14px;}
.quiz-card .corner.tl{top:-1.5px; left:-1.5px; border-top:2.5px solid var(--red); border-left:2.5px solid var(--red);}
.quiz-card .corner.br{bottom:-1.5px; right:-1.5px; border-bottom:2.5px solid var(--red); border-right:2.5px solid var(--red);}
.quiz-tags{display:flex; gap:6px; justify-content:center; margin-bottom:18px;}
.quiz-slot{min-height:46px; display:flex; align-items:center; justify-content:center; margin-bottom:20px;}
.quiz-slot .dots{display:flex; flex-wrap:wrap; justify-content:center; gap:14px;}
.quiz-slot .dots i{width:10px; height:10px; border-radius:50%; background:var(--line); display:block;}
.quiz-slot .letters{font-family:'Noto Serif KR',serif; font-weight:800; font-size:27px; letter-spacing:0.08em; color:var(--ink); word-break:keep-all;}
.quiz-slot .letters.hint{color:var(--red);}
.quiz-meaning{font-size:15.5px; line-height:1.7; color:var(--ink-soft); font-weight:500; word-break:keep-all;}
.quiz-tap{
  min-height:var(--tap); padding:0 14px; margin-bottom:10px; border:none; background:none; cursor:pointer;
  font-size:14px; color:var(--ink-soft); text-decoration:underline; text-underline-offset:3px;
  font-family:'IBM Plex Sans KR',sans-serif;
}
.quiz-hint-row{width:100%; display:flex; justify-content:center; margin-top:22px;}
.quiz-memo-row{width:100%; display:flex; justify-content:center; gap:10px; margin-top:16px;}
.quiz-memo-btn{
  border:1.5px solid var(--line); background:#fff; min-height:var(--tap); padding:9px 20px; border-radius:100px;
  font-size:15px; font-weight:600; cursor:pointer; font-family:'IBM Plex Sans KR',sans-serif;
}
.quiz-memo-btn.yes{border-color:var(--jade); color:var(--jade-ink);}
.quiz-memo-btn.yes:hover{background:var(--jade-soft);}
.quiz-memo-btn.no{color:var(--ink-soft);}
.quiz-memo-btn.no:hover{background:var(--paper-alt);}
.quiz-hint-btn{
  border:1px solid var(--gold); background:var(--gold-soft); color:var(--gold-ink);
  min-height:var(--tap); padding:7px 18px; border-radius:100px; font-size:14px; font-weight:600; cursor:pointer;
  font-family:'IBM Plex Sans KR',sans-serif;
}
.quiz-hint-btn:hover{opacity:0.85;}
.quiz-hint-btn:disabled{opacity:0.35; cursor:default;}
.quiz-controls{display:flex; gap:10px; margin-top:24px;}
.quiz-controls button{
  border:1.5px solid var(--ink); background:#fff; color:var(--ink);
  min-height:var(--tap); padding:10px 22px; font-size:15px; font-weight:600; cursor:pointer;
  font-family:'IBM Plex Sans KR',sans-serif;
}
.quiz-controls button.primary{background:var(--ink); color:var(--paper);}
.quiz-controls button:hover{opacity:0.85;}

footer{
  text-align:center; padding:28px 20px 40px; font-size:14px; color:var(--ink-soft);
}
.footer-nav{margin-top:8px; display:flex; gap:4px 14px; justify-content:center; flex-wrap:wrap;}
.footer-nav a{display:inline-flex; align-items:center; min-height:var(--tap); color:var(--ink-soft); text-decoration:underline; text-underline-offset:2px;}
.home-link{position:absolute; top:22px; left:24px; z-index:2; color:#fff; opacity:.85; font-size:14px; text-decoration:none;}
.home-link:hover{opacity:1; text-decoration:underline;}

.load-retry{display:block; margin:16px auto 0; min-height:44px; padding:8px 20px; font:inherit; cursor:pointer;}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .wcard-inner, .chip{transition:none;}
}

@media(max-width:640px){
  header{padding:36px 0 32px;}
  .grid{grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:10px;}
  .word-display{font-size:18px;}
  .chip-label{width:auto; margin-right:2px;}
  .stats-row{gap:18px;}
  .auth-box{position:static; margin:0 0 16px; justify-content:flex-end;}
  .home-link{position:static; display:inline-block; margin:0 0 8px 20px;}
}