/* GENERATED by expansion/en/build/fork_wordpractice_shell.mjs from site/wordpractice/wordpractice.css. DO NOT EDIT BY HAND. */
.wp-ov{
  position:fixed;
  inset:0;
  z-index:60;
  display:none;
  background:color-mix(in srgb,var(--ink) 45%,transparent);
}
.wp-ov.open{display:block}
body.wp-scroll-lock{
  position:fixed;
  left:0;
  right:0;
  width:100%;
  overflow:hidden;
}
.wp-panel{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(560px,calc(100% - 24px));
  /* max-height 2줄 겹침: svh(툴바 보이는 상태 기준)로 실제 보이는 영역 안에 가둔다.
     svh 미지원 브라우저는 앞줄 vh를 그대로 쓴다. */
  max-height:92vh;
  max-height:92svh;
  overflow-y:auto;
  overscroll-behavior:contain;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:10px;
  padding:16px;
  z-index:61;
  box-shadow:0 10px 40px color-mix(in srgb,var(--ink) 25%,transparent);
}
.wp-panel button{
  font-family:inherit;
  color:inherit;
  background:none;
  border:none;
  cursor:pointer;
}
.wp-panel button:focus-visible,
.wp-card:focus-visible{
  outline:2px solid var(--verm);
  outline-offset:2px;
}
.wp-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
.wp-top h2{font-size:16.5px}
/* 폰 가로에서만 나타나는 필터 서랍 토글 — 세로에선 존재하지 않는 버튼이다. */
.wp-panel .wp-optstoggle{
  display:none;
  margin-left:auto;
  font-size:12.5px;
  padding:4px 11px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--sub);
  background:var(--paper);
  cursor:pointer;
}
.wp-panel .wp-optstoggle[aria-expanded="true"]{
  border-color:var(--indigo);
  color:var(--indigo);
}
.wp-opts{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:6px;
}
.wp-dir-row{align-items:center}
.wp-mode-row{align-items:center}
/* 필터 그룹 행(§D): 짧은 라벨 + 칩 행 단위로 시각적 구분. 라벨은 고정폭 좌측 열로
   모든 행의 칩 시작점을 정렬(그룹 경계가 눈에 보이게). */
.wp-frow{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-bottom:7px;
}
.wp-frow-label{
  flex:0 0 42px;
  padding-top:6px;
  font-size:11px;
  font-weight:700;
  line-height:1.3;
  color:var(--sub);
  text-align:right;
  white-space:nowrap;
}
.wp-frow .wp-opts{
  flex:1 1 auto;
  min-width:0;
  margin-bottom:0;
}
/* 칩 대비 강화(§D): off = 무채·저채도 테두리만, on = --ok 틴트+굵은 테두리
   (학습판 .fc-known.on 선례). --ok 미정의 페이지 대비 폴백값 병기. */
.wp-panel .wp-chip{
  font-size:13px;
  padding:4px 11px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--sub);
  background:transparent;
}
.wp-chip.on,
.wp-chip[aria-pressed="true"]{
  border-color:var(--ok,#2f7d4f);
  color:var(--ok,#2f7d4f);
  font-weight:700;
  background:color-mix(in srgb,var(--ok,#2f7d4f) 12%,var(--panel));
}
.wp-chip:active{transform:scale(.96)}
.wp-panel .wp-shuffle{
  margin-left:auto;
  font-size:13px;
  padding:4px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--sub);
  background:var(--paper);
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.wp-shuffle:hover{
  border-color:var(--indigo);
  color:var(--indigo);
}
.wp-shuffle:active{transform:scale(.94)}
.wp-shuffle:disabled{
  opacity:.4;
  cursor:default;
}
.wp-shuffle:disabled:hover{
  border-color:var(--line);
  color:var(--sub);
}
.wp-close{
  min-width:44px;
  min-height:44px;
  font-size:22px;
  line-height:1;
  color:var(--sub);
  padding:2px 8px;
  border-radius:6px;
  background:var(--panel);
}
.wp-close:hover{color:var(--verm)}
.wp-card{
  position:relative;
  margin:12px 0;
  border:1.5px solid var(--line);
  border-radius:8px;
  background:var(--paper);
  min-height:240px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px 18px 18px; /* 상단 여백 = 우상단 외움? 버튼 영역(긴 단어 줄바꿈과 겹침 방지) */
  cursor:pointer;
}
.wp-card:hover{border-color:var(--indigo)}
.wp-card.wp-empty{cursor:default}
/* .wp-panel button 리셋(border:none, 명시도 0,1,1)을 이기도록 .wp-panel 프리픽스(0,2,0) */
.wp-panel .wp-known{
  position:absolute;
  top:8px;
  right:8px;
  z-index:2;
  font-size:12px;
  line-height:1.5;
  padding:3px 10px;
  border:1px dashed var(--line);
  border-radius:999px;
  color:var(--sub);
  background:var(--panel);
  cursor:pointer;
}
.wp-panel .wp-known:hover{
  border-color:var(--ok,#2f7d4f);
  color:var(--ok,#2f7d4f);
}
.wp-panel .wp-known.on{
  border:1px solid var(--ok,#2f7d4f);
  color:var(--ok,#2f7d4f);
  font-weight:700;
  background:color-mix(in srgb,var(--ok,#2f7d4f) 12%,var(--panel));
}
.wp-cycle-end{
  font-size:22px;
  font-weight:700;
  color:var(--ink);
}
.wp-front-kana{
  font-family:var(--kana-font);
  font-size:clamp(42px,12vw,76px);
  line-height:1.15;
  overflow-wrap:anywhere;
  word-break:keep-all;
}
.wp-front-meaning{
  max-width:100%;
  color:var(--indigo);
  font-size:clamp(24px,6vw,36px);
  font-weight:700;
  line-height:1.25;
  overflow-wrap:anywhere;
}
.wp-front-ko{
  margin-top:7px;
  color:var(--ink);
  font-size:20px;
  font-weight:700;
  line-height:1.3;
  overflow-wrap:anywhere;
}
.wp-tap{
  font-size:13px;
  color:var(--sub);
  margin-top:14px;
}
.wp-back-kana{
  font-family:var(--kana-font);
  font-size:clamp(34px,9vw,58px);
  line-height:1.16;
  color:var(--verm);
  overflow-wrap:anywhere;
  word-break:keep-all;
}
.wp-back-pron{
  font-size:19px;
  font-weight:700;
  margin-top:6px;
  line-height:1.45;
  overflow-wrap:anywhere;
}
.wp-back-pron .wp-mean-inline{
  color:var(--ink);
  font-weight:600;
}
.wp-back-origin{
  margin-top:5px;
  font-family:var(--kana-font);
  color:var(--sub);
  font-size:17px;
  line-height:1.35;
  overflow-wrap:anywhere;
}
.wp-badges{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:5px;
  margin-top:10px;
}
.wp-badge{
  font-size:12px;
  line-height:1.6;
  white-space:nowrap;
  padding:1px 8px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--sub);
  background:var(--panel);
}
.wp-sens{
  width:100%;
  margin-top:10px;
  padding-top:8px;
  border-top:1px dashed var(--line);
  text-align:left;
}
.wp-sen-none{
  width:100%;
  margin-top:10px;
  padding-top:8px;
  border-top:1px dashed var(--line);
  font-size:13px;
  color:var(--sub);
  text-align:center;
}
.wp-sen{padding:4px 0}
.wp-sen + .wp-sen{border-top:1px solid color-mix(in srgb,var(--line) 55%,transparent)}
.wp-sen [lang="ja"]{
  display:block;
  color:var(--ink);
  font-family:var(--kana-font);
  font-size:18px;
  line-height:1.4;
  overflow-wrap:anywhere;
}
/* 예문 = 일본어 텍스트 + 끝의 🔊 버튼 한 줄(flex). ja는 늘어나고 버튼은 끝 고정. */
.wp-sen-ja-row{
  display:flex;
  align-items:flex-start;
  gap:6px;
}
.wp-sen-ja-row [lang="ja"]{flex:1 1 auto;min-width:0}
/* 발음 재생(🔊) 버튼 — .wp-panel button 리셋(border:none)을 이기려 .wp-panel 프리픽스. */
/* .wp-snd-ext = 학습판(가나 시트)에 꽂힌 같은 버튼(WordPracticeTTS.buttonHTML) — 패널 밖이라 별도 선택자. */
.wp-panel .wp-snd,.wp-snd.wp-snd-ext{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  font-size:14px;
  line-height:1;
  padding:3px 8px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--sub);
  background:var(--panel);
  cursor:pointer;
}
.wp-panel .wp-snd:hover,.wp-snd.wp-snd-ext:hover{
  border-color:var(--indigo);
  color:var(--indigo);
}
.wp-panel .wp-snd:active,.wp-snd.wp-snd-ext:active{transform:scale(.92)}
/* 스피커 아이콘(한자판 글리프 계승) — 텍스트 대신 SVG. currentColor로 상태색 상속. */
.wp-panel .wp-snd svg,.wp-snd.wp-snd-ext svg{display:block;width:15px;height:15px}
/* 단어(앞/뒷면)용 = 큰 가나 아래 중앙 단독 배치 */
.wp-snd-word{
  margin-top:10px;
  padding:5px 13px;
}
.wp-panel .wp-snd-word svg{width:17px;height:17px}
/* 가나 시트의 예시 단어 옆 버튼 — 손가락 탭 대상이라 단어 카드 스피커만큼 키운다. */
.wp-snd.wp-snd-ext{padding:7px 13px}
.wp-snd.wp-snd-ext svg{width:17px;height:17px}
.wp-panel .wp-snd.speaking,.wp-snd.wp-snd-ext.speaking{
  border-color:var(--verm);
  color:var(--verm);
}
@keyframes wpSndPulse{0%,100%{transform:none}50%{transform:scale(1.14)}}
@media (prefers-reduced-motion:no-preference){
  .wp-panel .wp-snd.speaking,.wp-snd.wp-snd-ext.speaking{animation:wpSndPulse .8s ease-in-out infinite}
}
/* 실제 표기 토글 — 실제 표기 줄 아래의 학습용 가나 읽기 줄. lang="ja"라 위 .wp-sen [lang="ja"](18px)를
   이기도록 같은 접두로 특정성을 올린다. */
.wp-sen .wp-sen-kana{
  font-family:var(--kana-font);
  font-size:13.5px;
  line-height:1.45;
  color:var(--sub);
  overflow-wrap:anywhere;
}
.wp-sen-sub{
  color:var(--sub);
  font-size:13px;
  line-height:1.45;
  overflow-wrap:anywhere;
}
.wp-actions{
  display:flex;
  gap:8px;
  justify-content:center;
  align-items:center;
}
/* .wp-panel 프리픽스(0,2,0) 필수 — .wp-panel button 리셋(background:none·border:none·
   color:inherit, 0,1,1)이 프리픽스 없는 .wp-next/.wp-prev(0,1,0)를 이겨서 주황 배경과
   테두리가 사라진다. .wp-known(위)·.wp-snd와 같은 이유·같은 처방. */
.wp-panel .wp-next{
  background:var(--verm);
  color:var(--paper);
  font-weight:700;
  font-size:15.5px;
  padding:10px 28px;
  border-radius:8px;
}
.wp-panel .wp-prev{
  font-size:14px;
  padding:10px 16px;
  border:1px solid var(--line);
  border-radius:8px;
  color:var(--sub);
}
.wp-panel .wp-prev:disabled{
  opacity:.4;
  cursor:default;
}
.wp-panel .wp-prev:not(:disabled):hover{
  border-color:var(--indigo);
  color:var(--indigo);
}
.wp-count{
  font-size:13px;
  color:var(--sub);
  text-align:center;
  margin-top:8px;
  font-variant-numeric:tabular-nums;
}
.wp-exch{
  cursor:pointer;
  border-bottom:1px dotted var(--line);
}
.wp-exch:hover{
  color:var(--indigo);
  border-bottom-color:var(--indigo);
}
.wp-ex-tip{
  position:fixed;
  z-index:80;
  transform:translate(-50%,-100%);
  background:var(--ink);
  color:var(--paper);
  font-size:12px;
  padding:4px 9px;
  border-radius:6px;
  pointer-events:none;
  opacity:0;
  transition:opacity .12s;
  white-space:nowrap;
  box-shadow:0 3px 12px color-mix(in srgb,var(--ink) 30%,transparent);
}
.wp-ex-tip.show{opacity:1}
.wp-toast{
  position:absolute;
  right:16px;
  bottom:14px;
  opacity:0;
  pointer-events:none;
  color:var(--indigo);
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:999px;
  padding:4px 10px;
  font-size:12px;
  transform:translateY(6px);
  transition:opacity .16s,transform .16s;
}
.wp-toast.show{
  opacity:1;
  transform:none;
}
@keyframes wpShuf{
  0%,100%{transform:none}
  18%{transform:translateX(-6px)}
  36%{transform:translateX(5px)}
  54%{transform:translateX(-4px)}
  72%{transform:translateX(3px)}
}
.wp-card.wp-shuffled{animation:wpShuf .36s ease}
@media (max-width:520px){
  .wp-panel{padding:14px}
  .wp-frow-label{flex-basis:36px;font-size:10.5px}
  .wp-card{min-height:220px;padding:38px 14px 16px}
  .wp-actions{justify-content:stretch}
  .wp-prev,.wp-next{flex:1}
}
/* ── 폰 가로(landscape) 대응 ──
   조건 = 가로 + 뷰포트 높이 520px 이하. 통상적인 데스크톱·아이패드 가로(768px)·모든
   세로는 걸리지 않는다. 다만 기기를 구분하는 조건은 아니라서 창을 520px 미만으로 줄인
   데스크톱·분할화면도 걸린다 — 그 높이에선 전체화면이 오히려 나으므로 그대로 둔다.
   단어 연습은 필터가 5행이라 가로에서 화면 대부분을 먹는다 — 기본 접힘이 특히 중요하다. */
@media (orientation:landscape) and (max-height:520px){
  /* 전체화면 + flex column — 헤더와 액션을 고정하고 카드만 스크롤시킨다.
     inset:0이 아니라 top:0+height:100svh인 이유: fixed의 inset:0은 iOS에서
     큰 뷰포트(ICB) 기준이라 하단이 툴바 밑으로 잘려 도달 불가가 된다. */
  .wp-panel{
    top:0;
    left:0;
    right:0;
    bottom:auto;
    transform:none;
    width:auto;
    max-width:none;
    height:100svh;
    max-height:100svh;
    border-radius:0;
    border-width:0;
    padding:8px 13px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }
  .wp-top{margin-bottom:6px}
  .wp-panel .wp-optstoggle{display:inline-flex}
  .wp-panel:not(.opts-open) .wp-frow{display:none}
  /* min-height:0 없으면 flex 기본 min-height:auto 탓에 카드가 줄지 않고 패널을 밀어낸다.
     safe center = 내용이 넘칠 때 중앙정렬로 윗부분이 스크롤 불가가 되는 것을 막는다. */
  .wp-card{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    justify-content:safe center;
    margin:6px 0;
    padding:34px 12px 12px;
  }
  /* 가로에선 높이가 희소 자원 — 글리프 기준을 vw가 아니라 svh로 잡는다
     (vw 기준이면 가로 폭 844px 탓에 항상 최댓값으로 커진다). */
  .wp-front-kana{font-size:clamp(34px,13svh,76px)}
  .wp-front-meaning{font-size:clamp(20px,7svh,36px)}
  .wp-front-ko{margin-top:4px;font-size:17px}
  .wp-back-kana{font-size:clamp(26px,10svh,58px)}
  .wp-back-origin{font-size:15px}
  .wp-tap{margin-top:7px}
  .wp-badges{margin-top:6px}
  .wp-sens,.wp-sen-none{margin-top:6px;padding-top:6px}
  .wp-count{margin-top:4px}
}

/* 2026-09 다듬기 — 열 때만 짧은 페이드(닫기는 즉시) */
@media (prefers-reduced-motion:no-preference){
  .wp-ov.open{animation:wp-ov-in .18s ease-out}
}
@keyframes wp-ov-in{from{opacity:0}}

/* ── 문장 읽기(2026-09-28) — 앞면 가나 문장, 뒷면 어절 버튼 + 뜻 + 풀이 칸 ── */
.wp-front-sen{
  max-width:100%;
  font-family:var(--kana-font);
  font-size:clamp(23px,6.2vw,31px);
  line-height:1.6;
  color:var(--ink);
  overflow-wrap:anywhere;
}
.wp-back-sen{
  max-width:100%;
  font-family:var(--kana-font);
  font-size:clamp(21px,5.6vw,27px);
  line-height:1.75;
  color:var(--ink);
  overflow-wrap:anywhere;
}
/* 실제 표기 토글: 위 = 실제 표기(크게), 아래 = 어절 풀이 가나 줄(읽기 줄) */
.wp-back-real{
  max-width:100%;
  font-family:var(--kana-font);
  font-size:clamp(21px,5.6vw,27px);
  line-height:1.6;
  color:var(--ink);
  overflow-wrap:anywhere;
}
.wp-back-sen.wp-back-sen-sub{
  margin-top:4px;
  font-size:clamp(15px,4.2vw,19px);
  line-height:1.7;
  color:var(--sub);
}
/* .wp-panel button 리셋(border:none, 0,1,1)을 이기려 .wp-panel 프리픽스 */
.wp-panel .wp-chunk{
  font-family:var(--kana-font);
  font-size:inherit;
  line-height:inherit;
  padding:0 2px;
  border-bottom:1.5px dotted var(--sub);
  border-radius:3px;
}
.wp-panel .wp-chunk:hover{
  color:var(--indigo);
  border-bottom-color:var(--indigo);
}
.wp-panel .wp-chunk[aria-pressed="true"]{
  border-bottom-style:solid;
  border-bottom-color:var(--indigo);
  background:color-mix(in srgb,var(--indigo) 14%,transparent);
}
.wp-target,
.wp-panel .wp-chunk.wp-target{
  color:var(--indigo);
  font-weight:700;
}
.wp-sen-r{
  margin-top:8px;
  font-size:14px;
  color:var(--sub);
  overflow-wrap:anywhere;
}
.wp-sen-ko{
  margin-top:3px;
  font-size:17px;
  font-weight:700;
  line-height:1.4;
  color:var(--ink);
  overflow-wrap:anywhere;
  word-break:keep-all;
}
.wp-gloss{
  width:100%;
  min-height:2.8em;
  margin-top:12px;
  padding-top:9px;
  border-top:1px dashed var(--line);
  font-size:14px;
  line-height:1.6;
  color:var(--ink);
  text-align:left;
  overflow-wrap:anywhere;
  word-break:keep-all;
}
.wp-gloss [lang="ja"]{font-family:var(--kana-font)}
.wp-gloss b{color:var(--indigo)}
.wp-gloss-src{font-size:16px}
.wp-gloss-eq,.wp-gloss-plus{margin:0 6px;color:var(--sub)}
.wp-gloss-r,.wp-gloss-hint{font-size:13px;color:var(--sub)}
/* 일반 모드 한 바퀴 완료 · 빈 필터 복구 */
.wp-end-sub{margin-top:6px;font-size:14px;color:var(--sub)}
.wp-end-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin-top:16px;
}
.wp-panel .wp-end-btn{
  font-size:13.5px;
  padding:7px 14px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--ink);
  background:var(--panel);
}
.wp-panel .wp-end-btn:hover{
  border-color:var(--indigo);
  color:var(--indigo);
}
.wp-panel .wp-chip:disabled{opacity:.4;cursor:default}
@media (orientation:landscape) and (max-height:520px){
  .wp-front-sen{font-size:clamp(18px,7svh,30px)}
  .wp-back-sen{font-size:clamp(17px,6svh,26px);line-height:1.6}
  .wp-back-real{font-size:clamp(17px,6svh,26px);line-height:1.5}
  .wp-gloss{margin-top:6px;padding-top:6px}
}