:root{
  --bg:#0b0c10;
  --panel:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.12);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.62);
  --danger:#ff5d5d;
  --shadow:0 16px 50px rgba(0,0,0,.35);
  --radius:18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(1100px 600px at 10% 10%, rgba(120,80,255,.22), transparent 60%),
    radial-gradient(900px 500px at 90% 0%, rgba(0,255,198,.14), transparent 55%),
    radial-gradient(900px 600px at 90% 90%, rgba(255,168,76,.12), transparent 55%),
    var(--bg);
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Apple SD Gothic Neo, "Noto Sans KR", "Malgun Gothic", sans-serif;
}

.app-shell{min-height:100%; padding:18px; max-width:1200px; margin:0 auto;}
.hidden{display:none}
.muted{color:var(--muted)}

.topbar{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:14px 16px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  position:sticky; top:12px; z-index:10;
  backdrop-filter:blur(14px);
}
.brand{display:flex; align-items:center; gap:12px}
.logo-dot{
  width:12px; height:12px; border-radius:999px;
  background:linear-gradient(135deg, rgba(120,80,255,1), rgba(0,255,198,1));
  box-shadow:0 0 20px rgba(120,80,255,.45);
}
.brand-title{font-weight:800}
.brand-sub{font-size:12px; color:var(--muted); margin-top:2px}

.btn{
  border:1px solid var(--border);
  background:rgba(255,255,255,.08);
  color:var(--text);
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
}
.btn:hover{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.18)}
.btn.primary{
  border-color:rgba(0,255,198,.28);
  background:linear-gradient(135deg, rgba(0,255,198,.18), rgba(120,80,255,.14));
}
.btn-danger{
  border:1px solid rgba(255,93,93,.35);
  background:rgba(255,93,93,.12);
  color:rgba(255,255,255,.9);
  padding:9px 12px;
  border-radius:12px;
  cursor:pointer;
}
.btn-danger:hover{background:rgba(255,93,93,.18)}

.page{padding:10px 2px 40px}
.page-head{
  display:flex; justify-content:space-between; align-items:flex-start; gap:12px;
  margin:16px 0 14px;
}
.page-head-actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap}

.card{
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
  border-radius:var(--radius);
  padding:14px;
  box-shadow:var(--shadow);
}

/* =========================
   Practice “Table” layout
   ========================= */

.table-wrap{overflow:visible}
.tbl{
  width:100%;
  border-collapse:separate;
  border-spacing:0; /* row 사이 간격 */
}

/* ✅ table 레이아웃을 끄고(블록화) row 간격을 gap으로 제어 */
.tbl{ display:block; }
.tbl thead{ display:none; }
.tbl tbody{
  display:flex;
  flex-direction:column;
  gap:1px;           /* 여기로 행 간격 조절 */
}
.tbl tr{ display:grid; }  /* 너가 이미 쓰는 grid 유지 */

.tbl tbody{
  display:flex;
  flex-direction:column;
  gap:1px 14px;          /* ← 여기 값으로 행 간격 조절 */
}

/* 헤더는 숨기고 row마다 카드처럼 보이게 */
.tbl thead{display:none}

/* row 카드 */
.tbl tr{
  display:grid;

  grid-template-areas:
    "no ko result last5 count day del"
    ".  en en     en    en   en  en";

grid-template-columns:
36px /* no */
1fr /* ko (남는 폭 전부) */
140px /* 결과: 210px → 140px */
110px /* 최종5회: 140px → 110px */
56px /* 횟수: 70px → 56px */
108px /* 리뷰데이: 120px → 108px */
72px; /* 삭제: 84px → 72px */


gap: 1px 10px; /* 14px → 10px (원하면 8px까지) */



  align-items:start;

  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  border-radius:16px;
  padding:2px;
}

/* td 기본 밑줄 제거 */
.tbl td{
  border:0;
  padding:0;
  margin:0;
  vertical-align:top;
}

/* areas */
.td-no{grid-area:no; text-align:right; font-weight:800; opacity:.85; padding-top:10px;}
.td-ko{grid-area:ko;}
.td-en{grid-area:en;}
.td-result{
  grid-area:result;
  display:flex;
  flex-direction:column;
  align-items:center;   /* 라벨과 버튼을 가로 가운데 */
  gap:6px;
}
.td-history{grid-area:last5;}
.td-count{grid-area:count;}
.td-day{grid-area:day;}
.td-del{grid-area:del; display:flex; align-items:center; justify-content:center; padding-top:18px;}

/* inputs */
.cell-input{
  width:100%;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
  color:var(--text);
  padding:10px 12px;
  border-radius:12px;
  outline:none;
}
.cell-input:focus{border-color:rgba(120,80,255,.35)}

.english-wrap{position:relative}
.english-wrap .cell-input{
  color:transparent;
  text-shadow:0 0 12px rgba(255,255,255,.18);
  caret-color:rgba(255,255,255,.9);
}
.english-wrap:focus-within .cell-input,
.english-wrap:hover .cell-input{
  color:var(--text);
  text-shadow:none;
}

/* 결과(O/X/△) 버튼 크기 줄이기 */
.chip{
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.05);
  color: var(--text);

  /* ↓↓↓ 여기부터 크기 조절 */
  padding: 6px 8px;     /* 기존보다 작게 */
  font-size: 13px;      /* 글자도 살짝 작게 */
  line-height: 1;
  min-width: 34px;      /* 동그라미 최소 가로 */
  height: 34px;         /* 동그라미 세로 */
  border-radius: 999px;
  /* ↑↑↑ 여기까지 */

  cursor: pointer;
}

.chip:hover{background:rgba(255,255,255,.10)}

/* 라벨들(컬럼명) */
.td-result::before,
.td-history::before,
.td-count::before,
.td-day::before{
  display:block;
  font-size:12px;
  color:var(--muted);
  margin-bottom:6px;
  text-align:center;
}
.td-result::before{content:"결과";}
.td-history::before{content:"최종 5회";}
.td-count::before{content:"횟수";}
.td-day::before{content:"리뷰데이";}

/* 값(텍스트) 정렬 */
.td-history, .td-count, .td-day{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding-top:2px;
}
.td-history{font-weight:400}
.td-count{font-weight:400; font-size:18px}
.td-day{font-weight:400}

/* 모바일: 오른쪽 정보는 아래로 내려서 보기 좋게 */
@media (max-width: 920px){
  .tbl tr{
    grid-template-columns: 28px 1fr;
    grid-template-areas:
      "no ko"
      ".  en"
      ".  result"
      ".  last5"
      ".  count"
      ".  day"
      ".  del";
  }
  .td-del{justify-content:flex-start; padding-top:0}
}

/* auth inputs */
.authbox{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.auth-input{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.92);
  padding:10px 10px;
  border-radius:12px;
  outline:none;
}

/* === [FIX] 결과(ㅇ x △) 때문에 줄 높이가 커지는 문제 해결 === */
/* styles.css 맨 아래에 그대로 붙여넣기 */

.tbl tr > td.td-result::before{
  margin-bottom: 2px !important;  /* 라벨-버튼 간격 축소 */
  line-height: 1.1 !important;
  font-size: 12px !important;
}

.tbl tr > td.td-result{
  align-items: center !important;
}

/* 버튼(ㅇ x △)을 "진짜로" 작게: 원형 크기 고정 */
.tbl tr > td.td-result .chip{
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  line-height: 1 !important;      /* ← 34px 금지 */
  font-size: 12px !important;

  display: inline-flex !important; /* ← 가운데 정렬 확실히 */
  align-items: center !important;
  justify-content: center !important;
}


/* (선택) 버튼 사이 간격도 조금 줄이고 싶으면 */
.tbl .td-result{
  gap: 6px !important;
}

.chip-row{
  display:flex;
  justify-content:center;
  gap:8px;
}

/* 최종 5회 기호 크기/정렬 통일 */
.history-marks{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:center;
  line-height:1;
  font-family: "Noto Sans Symbols 2","Segoe UI Symbol","Apple Symbols","Noto Sans KR",system-ui,sans-serif;
}

.history-marks .mark{
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:16px;   /* 세 기호 크기 통일 */
  line-height:1;
}

/* x가 아래로 처져 보이는 것 보정 */
.history-marks .mark-x{
  transform: translateY(-1px);
}

/* 최종 5회( td-history 텍스트 )의 기호 크기/베이스라인 보정 */
.td-history{
  font-family: "Noto Sans Symbols 2","Segoe UI Symbol","Apple Symbols","Noto Sans KR",system-ui,sans-serif;
  line-height: 1;         /* 베이스라인 흔들림 줄이기 */
}

.td-history{
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* '최종 5회' 라벨 밑에 있는 실제 값(ㅇ x △) */
.td-history{
  /* 이미 flex column이라 값은 두 번째 줄인데,
     textContent 자체를 가운데 정렬하고 간격 줄이려면 아래도 OK */
  text-align:center;
  letter-spacing: 0.02em;
  font-size:16px;         /* 여기서 전체 크기 통일 */
}

/* 횟수/리뷰데이 값만 위로 당기기 */
.td-count .td-value,
.td-day .td-value{
  display:inline-block;
  transform: translateY(-4px); /* ← 2~6px 사이로 취향 조절 */
  line-height:1;
}

/* 최종 5회 라벨(컬럼명) 위치를 다른 컬럼과 동일하게 */
.tbl tr > td.td-history::before{
  margin-bottom: 2px !important;  /* 기존 6px을 덮어씀 */
  line-height: 1.1 !important;
  font-size: 12px !important;
}

/* 연습 페이지 제목 + 버튼 한 줄에 배치 */
.practice-title-row{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:nowrap;   /* 줄바꿈 금지 */
}

.practice-title{
  margin:0;           /* h1 기본 margin 제거 */
  white-space:nowrap; /* 제목 줄바꿈 방지 */
}

/* 버튼도 줄바꿈 안 나게 */
.practice-title-row #gotoDashboard{
  white-space:nowrap;
}

/* =========================
   Dashboard KPI 강조 스타일
   ========================= */

/* 누계 목표 문장(#todayTargetText)은 확실히 존재 */
#todayTargetText{
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(0,255,198,.10), rgba(255,255,255,.04));
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
  font-weight: 700;
  letter-spacing: .2px;
  color: rgba(255,255,255,.92);
}

/* #todayTargetText 안의 숫자가 더 눈에 띄도록(숫자만 딱 골라내기 어렵기 때문에 전체 대비를 올림) */
#todayTargetText{
  font-size: 15px;
  line-height: 1.25;
}

/* 대시보드 카드 안 “기간/일일/현재/목표/달성률” 한 줄(텍스트 덩어리)을 더 읽기 좋게 */
.card .dash-inline,
.card .dash-summary,
#dashSummary,
#dashStats,
#dashStatsLine{
  /* 혹시 이런 id/class가 있으면 자동 적용 */
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;

  margin: 10px 0 12px;
  padding: 10px 12px;

  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

/* 위의 selector가 안 맞는 경우를 대비해서:
   대시보드 카드 내부에서 "기간:" 같은 텍스트가 들어간 줄이 p/span으로 있을 때를 넓게 커버 */
.card p, .card .muted{
  /* 기존 디자인을 크게 깨지 않게 기본 가독성만 소폭 개선 */
  letter-spacing: .15px;
}

/* KPI 칩 스타일(HTML/JS가 추후에 span으로 감싸면 더 예쁘게 보이도록 준비용) */
.kpi-chip{
  display:inline-flex;
  align-items:baseline;
  gap:6px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.86);
  font-weight: 700;
}
.kpi-chip b{
  font-size: 16px;
  color: rgba(255,255,255,.96);
}

/* 누계 목표 라인에서 핵심 단어(목표/현재) 느낌을 주고 싶으면:
   추후 <span class="kpi-chip">로 감쌀 때 최적 */

.dash-kpi{
  margin-top: 14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.kpi-row{
  display:flex;
  align-items:baseline;
  gap:12px;
}

.kpi-row .k{
  width: 160px;
  color: var(--muted);
  font-size: 13px;
}

.kpi-row .v{
  font-weight: 800;
  letter-spacing: .2px;
}

.dash-greenbox{
  margin-top:12px;
  border-radius:16px;
  border:1px solid rgba(0,255,198,.18);
  background:linear-gradient(180deg, rgba(0,255,198,.10), rgba(0,0,0,.08));
  box-shadow:0 10px 30px rgba(0,0,0,.22);
  padding:14px 14px 12px;
}

.dash-todaytext{
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.10);
  color:rgba(255,255,255,.92);
  font-weight:700;
}

/* (선택) KPI 글자 톤 조금 더 정리 */
.dash-kpi .k{ color: rgba(255,255,255,.72); }
.dash-kpi .v{ color: rgba(255,255,255,.92); font-weight:800; font-size:18px; }

/* KPI 값(오른쪽 숫자) 볼드 제거 */
.dash-kpi .v,
.dash-kpi #kpiDuration,
.dash-kpi #kpiDaily,
.dash-kpi #kpiCumTarget,
.dash-kpi #kpiDone,
.dash-kpi #kpiPercent{
  font-weight: 400 !important; /* 400=normal */
}

/* 한글/영어 입력칸을 한 줄 높이로 */
.tbl .td-ko textarea.cell-input,
.tbl .td-en textarea.cell-input{
  height: 44px;          /* 한 줄 느낌 (원하면 40~52px로 조절) */
  padding: 10px 12px;
  line-height: 22px;  
}

.tbl{
  width: 100%;
  table-layout: fixed;
}

/* === RIGHT COLUMNS SQUEEZE (paste at VERY BOTTOM) === */
/* === RIGHT COLUMNS SQUEEZE (PC only) === */
@media (min-width: 921px){
  .tbl tbody{ gap: 8px !important; }

  .tbl tr{
    grid-template-columns:
      36px   /* no */
      1fr    /* ko */
      110px  /* 결과 */
      88px   /* 최종5회 */
      44px   /* 횟수 */
      84px   /* 리뷰데이 */
      64px   /* 삭제 */
      !important;

    column-gap: 6px !important;
  }

  .td-del{ padding-top: 6px !important; }

  .tbl .chip-row{ gap: 4px !important; }
  .tbl tr > td.td-result{ gap: 4px !important; }
  .tbl tr > td.td-result::before{ margin-bottom: 1px !important; }
  .tbl tr > td.td-result .chip{
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    padding: 0 !important;
    font-size: 12px !important;
  }

  .td-history, .td-count, .td-day{
    white-space: nowrap !important;
    overflow: hidden !important;
  }
}

/* 삭제칸 위 padding 줄여서 공간 덜 먹게 */
.td-del{ padding-top: 6px !important; }

/* 결과(O/X/△) 더 촘촘하게 */
.tbl .chip-row{ gap: 4px !important; }
.tbl tr > td.td-result{ gap: 4px !important; }
.tbl tr > td.td-result::before{ margin-bottom: 1px !important; }
.tbl tr > td.td-result .chip{
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  padding: 0 !important;
  font-size: 12px !important;
}

/* 텍스트가 폭을 강제로 못 늘리게 */
.td-history, .td-count, .td-day{
  white-space: nowrap !important;
  overflow: hidden !important;
}

/* sticky 버튼(하단 고정)이 마지막 입력칸을 가리지 않게 아래 여백 확보 */
.table-wrap{
  padding-bottom: 10px; /* sticky 버튼 높이 + 여유 */
}