/* 영어 훈련 앱 — live-copilot 다크 테마 승계.
 *
 * 세 서체가 각각 다른 일을 한다. 이 구분이 곧 정보 구조다:
 *   Space Grotesk … 라벨·수치 (시스템이 말하는 것)
 *   Inter         … 한국어 (지시·설명)
 *   JetBrains Mono… 영어 (훈련 대상 그 자체). 등폭이라 a/the, until/by 차이가 눈에 보인다.
 *
 * 두 강조색도 각각 뜻이 있다:
 *   coral … 체크(아직 내 것이 아님)
 *   teal  … 클리어
 * 날짜별 색(--day)은 이 둘과 별개로, 교수님 방법의 "다음날엔 다른 색깔로 체크"를 옮긴 것.
 */

:root{
  --ink:#0E1417;
  --panel:#151E22;
  --panel-2:#1A252A;
  --line:#243238;
  --line-soft:#1c282d;
  --text:#E7EEEF;
  --muted:#7E9095;
  --faint:#516065;
  --coral:#FF7A52;
  --coral-dim:#3a2018;
  --teal:#57C9BD;
  --teal-dim:#16312f;
  --day:#FF7A52;              /* 오늘의 체크 색. JS가 덮어쓴다 */
  --radius:14px;
  --tap:44px;                 /* 최소 터치 타깃 */
}

*{box-sizing:border-box;}
/* 브라우저 기본 [hidden]{display:none} 은 우선순위가 가장 낮아서, .stage{display:flex} 같은
   클래스 규칙 하나에 조용히 무시된다. 화면 전환을 전부 hidden 으로 하고 있으므로 못 박아 둔다. */
[hidden]{display:none !important;}
html,body{margin:0;padding:0;}
/* 본문이 가로로 넘치는 일은 없어야 한다 — 폰에서 좌우로 흔들리면 훈련에 집중이 안 된다.
   넘칠 수 있는 것(긴 영어 문장, 표)은 자기 컨테이너 안에서 스크롤한다. */
html,body{max-width:100%;overflow-x:hidden;}
html{-webkit-text-size-adjust:100%;}
body{
  background:var(--ink);
  color:var(--text);
  font-family:"Inter",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100dvh;
  font-size:16px;
  line-height:1.6;
}
::selection{background:var(--teal-dim);color:var(--text);}

/* ── 셸: 모바일 세로 기준. 훈련은 폰에서, 소리 내어 하게 된다. ── */
.shell{
  max-width:760px;margin:0 auto;
  padding:14px 16px calc(84px + env(safe-area-inset-bottom));
  min-height:100dvh;
}
.shell.flush{padding-left:0;padding-right:0;}

/* ── 상단 바 ── */
.top{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:4px 0 16px;
}
.mark{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;}
.mark .tick{
  width:30px;height:30px;border-radius:9px;flex:none;
  border:1px solid var(--line);background:var(--panel);
  display:grid;place-items:center;
  font-family:"Space Grotesk",sans-serif;font-size:15px;color:var(--day);
}
.mark b{font-family:"Space Grotesk",sans-serif;font-size:15px;font-weight:600;letter-spacing:-.01em;}
.mark span{display:block;font-size:10.5px;color:var(--faint);letter-spacing:.06em;margin-top:-2px;}

/* ── 하단 탭 (모바일 우선) ── */
.tabs{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:grid;grid-template-columns:repeat(4,1fr);
  background:color-mix(in srgb, var(--ink) 92%, transparent);
  backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.tabs a{
  min-height:var(--tap);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  text-decoration:none;color:var(--faint);
  font-size:10.5px;letter-spacing:.04em;
  font-family:"Space Grotesk",sans-serif;font-weight:500;
  padding:9px 4px;
}
.tabs a .g{font-size:16px;line-height:1;}
.tabs a[aria-current="page"]{color:var(--text);}
.tabs a[aria-current="page"] .g{color:var(--day);}

/* ── 타이포 ── */
h1{font-family:"Space Grotesk",sans-serif;font-size:20px;font-weight:600;margin:0 0 4px;letter-spacing:-.015em;}
h2{font-family:"Space Grotesk",sans-serif;font-size:14px;font-weight:600;margin:0 0 10px;letter-spacing:-.005em;}
.eyebrow{
  font-family:"Space Grotesk",sans-serif;font-size:10px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--faint);
  margin:0 0 8px;
}
.muted{color:var(--muted);}
.faint{color:var(--faint);}
.small{font-size:12.5px;}
/* 등폭이라 a/the, until/by 같은 차이가 눈에 보인다. 긴 문장은 반드시 줄바꿈시킨다. */
.en{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:14px;letter-spacing:-.01em;
    line-height:1.55;overflow-wrap:anywhere;}

/* ── 패널 ── */
.panel{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px;margin-bottom:12px;
}
.panel.tight{padding:13px 14px;}
.panel.plain{background:none;border-color:var(--line-soft);}

/* ── 폼 ── */
label.field{display:block;margin-bottom:12px;}
label.field > span{
  display:block;font-family:"Space Grotesk",sans-serif;font-size:10px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--faint);margin-bottom:6px;
}
textarea,input[type=text],input[type=email],input[type=password]{
  width:100%;background:var(--panel-2);color:var(--text);
  border:1px solid var(--line);border-radius:11px;
  padding:12px 13px;font-family:inherit;font-size:16px; /* 16px 미만이면 iOS가 확대한다 */
  line-height:1.55;outline:none;resize:vertical;
}
textarea.en,input.en{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:16px;}
textarea:focus,input:focus{border-color:var(--teal);}
::placeholder{color:var(--faint);}

button{
  font-family:"Space Grotesk",sans-serif;font-size:14px;font-weight:600;
  border-radius:11px;padding:12px 18px;min-height:var(--tap);
  border:1px solid var(--line);background:var(--panel-2);color:var(--text);
  cursor:pointer;letter-spacing:.01em;
}
button:hover:not(:disabled){border-color:var(--faint);}
button:disabled{opacity:.42;cursor:default;}
button.primary{background:var(--teal);border-color:var(--teal);color:#08201e;}
button.primary:hover:not(:disabled){background:#6ad6ca;border-color:#6ad6ca;}
button.ghost{background:none;}
button.wide{width:100%;}
button.sm{font-size:12.5px;padding:8px 12px;min-height:36px;border-radius:9px;}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}

.row{display:flex;gap:9px;flex-wrap:wrap;}
.row.end{justify-content:flex-end;}
.spread{display:flex;align-items:center;justify-content:space-between;gap:12px;}

/* ── 체크 원장 ─────────────────────────────────────────────
 * 이 앱의 서명. 진행률 막대가 아니라 '작대기'인 이유:
 * 막대는 몇 %인지만 말하고, 원장은 "이 카드를 오늘 몇 번 틀렸는지"를 말한다.
 * 교수님이 A4에 체크를 층층이 쌓던 그 정보가 여기 그대로 남는다.
 */
.ledger{
  display:flex;align-items:flex-end;gap:7px;flex-wrap:wrap;
  padding:12px 14px;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);
  margin-bottom:12px;min-height:56px;
}
.ledger .grp{display:flex;align-items:flex-end;gap:2px;position:relative;padding:2px 1px;}
.ledger .st{
  width:2px;height:15px;border-radius:1px;
  background:var(--day);
  transform-origin:bottom;
  animation:stroke .18s ease-out;
}
@keyframes stroke{from{transform:scaleY(0);opacity:0;}to{transform:scaleY(1);opacity:1;}}
.ledger .grp.none .st{background:var(--faint);height:9px;opacity:.5;}
.ledger .grp.done{opacity:.4;}
.ledger .grp.done::after{
  content:"";position:absolute;left:-1px;right:-1px;top:50%;
  height:1px;background:var(--teal);
}
.ledger .grp.now{padding-bottom:0;}
.ledger .grp.now::before{
  content:"";position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;background:var(--text);
}
.ledger .tally{
  margin-left:auto;text-align:right;
  font-family:"Space Grotesk",sans-serif;line-height:1.15;
}
.ledger .tally b{display:block;font-size:21px;font-weight:600;}
.ledger .tally span{font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--faint);}

/* ── 드릴 ── */
.stage{min-height:min(58dvh,420px);display:flex;flex-direction:column;}
.ask{
  flex:1;display:flex;flex-direction:column;justify-content:center;
  padding:22px 2px 18px;
}
.ask .ko{font-size:21px;line-height:1.5;font-weight:500;letter-spacing:-.01em;}
.ask .ctx{margin-top:10px;font-size:13px;color:var(--muted);}
.ask .badge{
  display:inline-block;margin-bottom:12px;
  font-family:"Space Grotesk",sans-serif;font-size:9.5px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--day);border:1px solid currentColor;border-radius:999px;padding:3px 9px;
}

/* 인출 시간 표시. 카운트다운이 아니라 눈금 — 시험이 아니라 박자로 느끼게 하려는 것.
   4초를 넘기면 색이 넘어가지만 답을 막지는 않는다. */
.meter{height:2px;background:var(--line);border-radius:2px;overflow:hidden;margin:0 0 10px;}
.meter i{display:block;height:100%;width:0;background:var(--teal);transition:width .1s linear;}
.meter.over i{background:var(--coral);}

/* ── 판정 ── */
.verdict{border-radius:var(--radius);border:1px solid var(--line);overflow:hidden;margin-bottom:12px;}
.verdict .hd{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 15px;font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:14px;
}
.verdict .hd .t{font-size:12px;font-weight:500;font-variant-numeric:tabular-nums;}
.verdict.pass .hd{background:var(--teal-dim);color:var(--teal);}
.verdict.check .hd{background:var(--coral-dim);color:var(--coral);}
.verdict .bd{padding:14px 15px;background:var(--panel);}
.verdict .fb{font-size:13.5px;line-height:1.65;color:var(--text);white-space:pre-wrap;}

.answers{margin-top:14px;display:flex;flex-direction:column;gap:1px;
  background:var(--line-soft);border-radius:11px;overflow:hidden;}
.answers .a{background:var(--panel-2);padding:11px 13px;}
.answers .a .k{
  font-family:"Space Grotesk",sans-serif;font-size:9.5px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--faint);margin-bottom:5px;
}
.answers .a.mine .k{color:var(--muted);}
.answers .a .n{margin-top:5px;font-size:12px;color:var(--muted);line-height:1.55;}

/* ── 오류 태그 ── */
.tag{
  display:inline-flex;align-items:center;gap:6px;
  font-family:"Space Grotesk",sans-serif;font-size:11px;font-weight:600;
  border:1px solid var(--line);border-radius:999px;padding:4px 10px;
  color:var(--text);background:var(--panel-2);text-decoration:none;
}
.tag .dot{width:5px;height:5px;border-radius:50%;background:var(--coral);flex:none;}
.tag.f-grammar     .dot{background:#FF7A52;}
.tag.f-structure   .dot{background:#F2C14E;}
.tag.f-lexis       .dot{background:#6BA8F5;}
.tag.f-naturalness .dot{background:#B79AE6;}
.tag.f-register    .dot{background:#57C9BD;}
.tag.f-mechanics   .dot{background:#7E9095;}

.issue{border-left:2px solid var(--line);padding:2px 0 2px 12px;margin:12px 0;}
.issue .sp{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:13px;line-height:1.6;}
.issue .sp del{color:var(--coral);text-decoration-color:color-mix(in srgb,var(--coral) 50%,transparent);}
.issue .sp ins{color:var(--teal);text-decoration:none;}
.issue .why{font-size:12.5px;color:var(--muted);margin-top:5px;}

/* ── 통계 ── */
.bars{display:flex;flex-direction:column;gap:9px;}
.bar{display:grid;grid-template-columns:96px 1fr 34px;align-items:center;gap:10px;
  text-decoration:none;color:inherit;}
.bar:hover .nm{color:var(--text);}
.bar .nm{font-size:12.5px;color:var(--muted);text-align:right;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bar .tr{height:8px;background:var(--panel-2);border-radius:4px;overflow:hidden;}
.bar .tr i{display:block;height:100%;border-radius:4px;background:var(--coral);}
.bar .vl{font-family:"Space Grotesk",sans-serif;font-size:12px;font-variant-numeric:tabular-nums;color:var(--text);}
.bar .vl .d{font-size:10px;margin-left:2px;}
.bar .vl .d.dn{color:var(--teal);}
.bar .vl .d.up{color:var(--coral);}

.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:1px;
  background:var(--line-soft);border-radius:var(--radius);overflow:hidden;margin-bottom:12px;}
.fig{background:var(--panel);padding:14px 12px;}
.fig b{display:block;font-family:"Space Grotesk",sans-serif;font-size:24px;font-weight:600;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1;}
.fig span{display:block;font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint);margin-top:4px;font-family:"Space Grotesk",sans-serif;}
.fig.on b{color:var(--day);}

/* 60일 스트릭 — 날짜별 색이 그대로 찍힌다 */
.streak{display:flex;gap:3px;flex-wrap:wrap;}
.streak i{width:11px;height:11px;border-radius:3px;background:var(--panel-2);display:block;}

/* ── 목록 ── */
.list{display:flex;flex-direction:column;gap:1px;background:var(--line-soft);
  border-radius:var(--radius);overflow:hidden;}
.item{display:block;background:var(--panel);padding:13px 15px;text-decoration:none;color:inherit;}
.item:hover{background:var(--panel-2);}
.item .ko{font-size:14px;line-height:1.5;}
.item .my{margin-top:5px;font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:12px;color:var(--muted);line-height:1.5;}
.item .mt{margin-top:8px;display:flex;gap:6px;flex-wrap:wrap;align-items:center;}

/* ── 상태 ── */
.empty{text-align:center;padding:44px 20px;color:var(--faint);font-size:13.5px;line-height:1.8;}
.err{background:var(--coral-dim);border:1px solid var(--coral);color:var(--coral);
  border-radius:11px;padding:11px 13px;font-size:13px;margin-bottom:12px;}
.wait{display:inline-flex;gap:4px;align-items:center;}
.wait i{width:5px;height:5px;border-radius:50%;background:var(--muted);animation:bob 1s infinite;}
.wait i:nth-child(2){animation-delay:.15s;}
.wait i:nth-child(3){animation-delay:.3s;}
@keyframes bob{0%,100%{opacity:.25;}50%{opacity:1;}}

.sheet{animation:rise .22s cubic-bezier(.2,.8,.3,1);}
@keyframes rise{from{transform:translateY(14px);opacity:0;}to{transform:none;opacity:1;}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;}
}

/* ── 데스크탑 ── */
@media (min-width:760px){
  .shell{padding:22px 24px 40px;}
  .tabs{
    position:static;grid-template-columns:none;display:flex;gap:4px;
    background:none;border:none;backdrop-filter:none;margin-bottom:18px;padding:0;
  }
  .tabs a{flex-direction:row;gap:7px;padding:8px 13px;border-radius:10px;
    border:1px solid transparent;font-size:12.5px;min-height:0;}
  .tabs a[aria-current="page"]{border-color:var(--line);background:var(--panel);}
  .ask .ko{font-size:25px;}
  .bar{grid-template-columns:130px 1fr 46px;}
}