/* Dictionary meaning pill and centered detail popup */

/* ---- 단어 곁의 transient 뜻 필 ----
   상세 단어창과 Reader 레이아웃은 그대로 두고, 탭 직후의 기다림과 대표 뜻만
   fixed overlay로 보여 줍니다. PDF/EPUB의 확대 레이어 밖이라 필 자체는 커지지
   않습니다. 위치는 scripts/dictionary/dictionary.js가 실제 선택 rect로 정합니다. */
#word-peek{--word-safe-top:env(safe-area-inset-top,0px);position:fixed; z-index:78; isolation:isolate; display:flex; align-items:stretch; min-height:44px;
  max-width:calc(100vw - 32px); overflow:hidden; border:1px solid var(--sentence-glass-line);
  border-radius:999px; background:var(--sentence-glass-solid); color:var(--sentence-glass-ink);
  box-shadow:var(--sentence-glass-shadow-pill),inset 0 -1px 0 rgba(0,0,0,.05);
  animation:word-peek-in 120ms cubic-bezier(.2,.7,.25,1);}
#word-peek[hidden]{display:none;}
#word-peek::before{content:""; position:absolute; z-index:-1; inset:0; pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(145deg,rgba(255,255,255,.30) 0%,rgba(255,255,255,.07) 44%,rgba(255,255,255,.16) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42);}
body.dark #word-peek::before{
  background:linear-gradient(145deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,.025) 46%,rgba(255,255,255,.07) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);}
#word-peek .word-peek-spinner{flex:0 0 auto; align-self:center; width:13px; height:13px;
  margin:0 0 0 15px; border:1.5px solid var(--sentence-glass-spinner);
  border-top-color:var(--sentence-glass-spinner-on); border-radius:50%;
  animation:sentence-spin .82s linear infinite;}
#word-peek:not(.loading) .word-peek-spinner{display:none;}
#word-peek-meaning{display:block; min-width:0; max-width:min(280px,calc(100vw - 92px));
  padding:11px 14px 10px 16px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font:600 14px/22px var(--ui); pointer-events:none;}
#word-peek.loading #word-peek-meaning{padding-left:9px;}
#word-peek .word-peek-actions{position:relative; isolation:isolate; flex:0 0 88px;
  display:flex; align-items:stretch; min-height:44px;}
#word-peek .word-peek-actions::before{content:""; position:absolute; z-index:-1; inset:5px;
  border:1px solid var(--sentence-glass-line); border-radius:999px;
  background:var(--sentence-glass-action);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 1px 3px rgba(24,28,30,.10);}
#word-peek .word-peek-action{position:relative; flex:0 0 44px; width:44px; min-height:44px; padding:0; border:0;
  display:flex; align-items:center; justify-content:center;
  background:transparent; color:var(--sentence-glass-secondary); cursor:pointer;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;}
#word-peek-more::after{content:""; position:absolute; left:0; top:11px; bottom:11px; width:1px;
  background:var(--sentence-glass-line-soft);}
#word-peek .word-peek-action:hover{color:var(--sentence-glass-ink);}
#word-peek .word-peek-action:active{opacity:.68;}
#word-peek .word-peek-action:focus-visible{outline:2px solid var(--blue); outline-offset:-3px; border-radius:50%;}
#word-peek .word-peek-action:disabled{cursor:default; opacity:.52;}
#word-peek .word-peek-action:disabled{background:transparent; transform:none;}
#word-peek .word-peek-action svg{display:block; width:17px; height:17px;}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  #word-peek{background:var(--sentence-glass-pill); backdrop-filter:blur(19px) saturate(122%);
    -webkit-backdrop-filter:blur(19px) saturate(122%);}
}
@keyframes word-peek-in{from{opacity:0; transform:translateY(3px) scale(.97)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){
  #word-peek{animation:word-peek-fade var(--sentence-transition) linear;}
  @keyframes word-peek-fade{from{opacity:0}to{opacity:1}}
}

  #word-modal-scrim{display:none; position:fixed; inset:0; z-index:80;
    background:var(--sentence-glass-scrim); touch-action:none;
    -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;}
  #word-modal-scrim.on{display:block;}
  #panel{position:fixed; z-index:90; left:50%; top:50%; width:min(520px,calc(100vw - 32px));
    max-height:min(76vh,760px); overflow-y:auto; display:none; transform:translate(-50%,-50%);
    overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
    border:1px solid var(--sentence-glass-line); border-radius:22px;
    /* The dialog receives programmatic focus for accessibility. Its native focus
       outline can wrap the whole card on iPad; buttons keep their own focus ring. */
    outline:none;
    background:var(--sentence-glass-solid); color:var(--sentence-glass-ink);
    box-shadow:var(--sentence-glass-shadow);
    animation:word-detail-in var(--sentence-transition) cubic-bezier(.2,.7,.25,1);}
  #panel.on{display:block;}
  @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    #panel{background:var(--sentence-glass-surface); backdrop-filter:blur(18px) saturate(112%);
      -webkit-backdrop-filter:blur(18px) saturate(112%);}
  }
  @keyframes word-detail-in{from{opacity:0; transform:translate(-50%,-48%) scale(.985)}
    to{opacity:1; transform:translate(-50%,-50%)}}
  #panel .inner{padding:22px 22px 36px;}
  #p-top{display:flex; align-items:flex-start; gap:10px; padding-bottom:12px; border-bottom:1px solid var(--divider);}
  #p-head{min-width:0; flex:1; display:flex; align-items:center; gap:8px; margin-bottom:4px;}
  /* 표제어는 제목이지 입력칸이 아닙니다 — 테두리와 배경을 두면 "여기를 고치세요"로
     읽힙니다. 고치는 길은 없습니다(scripts/dictionary/dictionary.js). */
  #p-word{min-width:0; flex:1; overflow-wrap:anywhere; font-size:31px; font-weight:600;
    letter-spacing:-.9px; color:var(--ink);}
  #p-speak{flex-shrink:0; width:34px; height:34px; border-radius:50%; border:1px solid var(--speak-line);
    background:var(--speak-bg); cursor:pointer; display:flex; align-items:center; justify-content:center;
    color:var(--blue); transition:.15s; touch-action:manipulation; -webkit-tap-highlight-color:transparent;}
  #p-speak:hover{background:var(--sky);}
  #p-speak.playing{background:var(--blue); color:var(--on-color); border-color:var(--blue);}
  /* ── 낱말 하나를 화면에서 어떻게 다룰지 ──
     "모르는 정도" 아래 한 줄에 단추 둘이 섭니다 — 왼쪽은 단어장에서 빼기,
     오른쪽은 본문 색칠. 같은 일의 두 갈래라 높이·모서리·테두리·글자를 하나로
     둡니다(`.p-tool`). 다른 것은 색뿐입니다: 색칠은 켜고 끄는 것이라 켜졌을
     때만 파랑이 옅게 들고, 빼기는 한 번 누르면 이 낱말이 단어장에서 사라지는,
     되돌리려면 다시 찾아 눌러야 하는 일입니다. 그래서 옅은 벽돌빛을 입힙니다 —
     쨍한 빨강이 아니라 창의 다른 곳에서 이미 쓰는 `--danger` 한 벌입니다. */
  /* 팝업 폭 안에서 이 두 단추가 한 줄에 다 서지 못하면 글자를 줄이는 대신
     줄을 바꿉니다. 넘쳐서 창에 가로 스크롤을 만드는 것보다 낫습니다. */
  #p-word-tools{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; margin-bottom:9px;}
  .p-tool{flex:0 0 auto; display:inline-flex; align-items:center; gap:5px; height:30px; padding:0 12px;
    border:1px solid var(--mark-line); border-radius:9px; background:var(--mark-bg); color:var(--soft2);
    cursor:pointer; font:600 11px var(--ui); white-space:nowrap; transition:.16s;}
  .p-tool:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}
  /* 크기·높이·모서리·글자는 `.p-tool` 그대로고, 색만 다릅니다. */
  #p-know{border-color:var(--danger); background:var(--danger-tint); color:var(--danger);}
  #p-know .ck{width:13px; height:13px; flex:none; color:var(--danger);}
  /* 짚었을 때 — 어두운 화면에서는 바탕이 더 짙어질 자리가 없어서, 테두리를 안쪽으로
     한 겹 더 그어 두 테마 모두에서 손끝이 닿은 것이 보이게 합니다(자리는 그대로). */
  #p-know:hover{background:var(--danger-bg-hover); box-shadow:inset 0 0 0 1px var(--danger);}
  #p-mark.on{border-color:var(--blue-ring); background:var(--mark-on); color:var(--mark-on-ink);}
  /* 원형이 따로 있을 때만 뜨는 한 줄 — "spared에서 찾음". */
  #p-clicked{display:none; margin:7px 0 0; font-size:11.5px; color:var(--soft2);}
  #p-clicked.on{display:block;}
  /* AI 가 말하는 자리는 모두 같은 색을 씁니다 — 여기, 기다리는 동안의 오로라,
     그리고 문장 해석 카드. 값은 base.css 의 `--ai-*` 하나뿐입니다. */
  #p-ai{display:none; position:relative; background:var(--ai-panel); border:1px solid var(--ai-line);
    border-radius:12px; padding:12px 13px; margin:13px 0 10px;}
  #p-ai.on{display:block;}
  #p-ai .cap{display:flex; align-items:center; gap:6px; font-size:10px; font-weight:700;
    letter-spacing:.06em; color:var(--ai-key); margin-bottom:5px;}
  #p-ai .cap .dot{width:5px; height:5px; border-radius:50%; background:var(--ai-key);}
  /* 담겼다는 표시. 확인 배지처럼 눈을 끌면 뜻보다 먼저 읽힙니다 — 옅은 하늘색
     바탕에 파란 글자 하나, 그림자 없이. 카드의 오른쪽 위 모서리에 답니다. */
  #p-ai-saved{position:absolute; top:9px; right:10px; padding:2px 7px; border-radius:9px;
    background:var(--sky); color:var(--brand-strong); font-size:9.5px; font-weight:600;
    letter-spacing:0; white-space:nowrap;}
  /* 그 자리에 지우기 단추가 이미 서 있으면 그 왼쪽으로 비켜섭니다. 단추는 이
     배지보다 앞에 있으므로(`~`) 있는지 없는지를 CSS 가 그대로 읽습니다. */
  #p-meaning-del:not([hidden]) ~ .cap #p-ai-saved{right:38px;}
  #p-ai-saved[hidden]{display:none;}
  #p-ai .m{font-size:18px; font-weight:700; color:var(--ai-ink); line-height:1.4;}
  #p-ai .pos{font-size:11.5px; color:var(--soft); font-style:italic; margin-left:6px; font-weight:400;}
  /* 이 문장에서 어떻게 쓰였나 — 뜻 아래 한 줄. */
  #p-ai .note{font-size:12px; color:var(--ai-note); line-height:1.55; margin-top:6px;}
  /* 뜻은 읽는 글자입니다. 고치는 칸이 아닙니다 — 바꾸고 싶으면 × 로 지우고
     ＋ 로 새로 적습니다. 그래야 뜻에 필요한 손짓이 셋으로 남습니다. */
  #p-ai .mk{display:inline;}
  /* 지우는 단추는 뜻 칸 안에만 있습니다. 칩 안에는 두지 않습니다 — 손가락 하나
     넓이에서 "고르기"와 "지우기"가 겹치면 둘 다 못 믿게 됩니다. */
  #p-meaning-del{position:absolute; top:7px; right:7px; width:26px; height:26px; border:none; border-radius:50%;
    background:transparent; color:var(--ai-quiet); font:400 17px/1 var(--ui); cursor:pointer;}
  #p-meaning-del:hover{background:var(--danger-bg); color:var(--danger);}
  #p-meaning-del[hidden]{display:none;}
  #p-ai .cap{padding-right:26px;}
  /* ══ 오로라 ══════════════════════════════════════════════
     AI 를 기다리는 동안 뜨는 장치. 낱말 하나든 문장 하나든 같은 것을 씁니다 —
     기다림의 모양이 자리마다 다르면 "무엇을 기다리는지"가 아니라 "여기가 어디인지"를
     먼저 읽게 됩니다.

     색은 흰색과 파랑 둘뿐입니다. 이 앱의 색이 그 둘이라, 기다리는 동안만 다른
     색을 쓰면 그 몇 초 동안 잠깐 다른 앱이 됩니다.

     옅은 파랑을 바탕에 깔고, 그 위로 흰빛 덩어리와 짙은 파란빛 덩어리가 서로
     다른 자리에서 번집니다. 통째로 천천히 밀리고 부풀며 섞이는데, 흐림(blur)이
     경계를 지워서 덩어리가 아니라 한 장의 움직이는 빛으로 보입니다.
     선도 점도 없습니다 — 빛 하나면 "기다리는 중"은 다 전해집니다. */
  .aurora{position:relative; height:46px; border-radius:12px; overflow:hidden;
    background:var(--aurora-bed);}
  /* 파란 덩어리와 흰 덩어리를 번갈아 놓습니다. 한쪽으로 몰아 두면 빛이 밀려
     나가는 동안 한쪽 절반이 통째로 비어 보입니다. */
  .aurora .glow{position:absolute; inset:-45%; will-change:transform;
    background:var(--aurora-glow);
    filter:blur(13px);
    animation:aurora-drift 5.6s ease-in-out infinite alternate;}
  @keyframes aurora-drift{
    0%  {transform:translate3d(-5%,-3%,0) scale(1.04) rotate(-1.5deg);}
    50% {transform:translate3d(2%, 4%,0) scale(1.14) rotate(1deg);}
    100%{transform:translate3d(6%,-2%,0) scale(1.07) rotate(-.5deg);}
  }
  /* 움직임을 줄여 달라고 설정한 사람에게는 흐르지 않고 숨만 쉽니다. */
  @media (prefers-reduced-motion:reduce){
    .aurora .glow{animation:aurora-breathe 2.4s ease-in-out infinite; filter:blur(16px);}
  }
  @keyframes aurora-breathe{0%,100%{opacity:.45} 50%{opacity:.9}}

  /* 뜻이 아직 정해지지 않았을 때. 칸은 그 자리에 그대로 서 있고 안내 한 줄만
     듭니다 — 상태마다 칸이 나타났다 사라지면 아래 것들이 함께 출렁이고, 무엇을
     기다렸는지도 화면에 남지 않습니다. */
  #p-ai.wait .m{display:none;}
  #p-ai.wait .note{margin-top:0; color:var(--soft);}
  #p-ai .wind{display:none; margin:2px 0 0;}
  #p-ai.load .wind{display:block;}
  /* 기다리는 동안에는 뜻도 아랫줄도 감춥니다. 특히 "다시 물어보기" 로 들어온 경우
     앞서 받은 설명이 그대로 남아 있으면, 새 답이 온 것처럼 보입니다. */
  #p-ai.load .m, #p-ai.load .note{display:none!important;}
  #p-aibtn{display:flex; align-items:center; justify-content:center; gap:7px; width:100%;
    border:1px dashed var(--ai-line); background:var(--ai-bg2); color:var(--ai-key); border-radius:12px;
    padding:11px; font-size:13.5px; font-weight:600; font-family:var(--ui); cursor:pointer;
    margin-bottom:12px;}
  #p-aibtn:hover{background:var(--sky); border-style:solid;}
  #p-aibtn:disabled{opacity:.6; cursor:default;}
  #p-aibtn .sp{font-size:15px;}
  /* 기본은 보통 흐름의 위 여백입니다 — 바로 위 형제가 아무것도 안 그려질 때
     (quota·offline: 단추가 숨습니다) 이 여백이 그 위의 낱말 칸과 부딪히지
     않게. 단추가 실제로 있을 때만(.tight, scripts/dictionary/dictionary.js)
     그 아래로 바짝 당깁니다. */
  #p-aihint{font-size:11px; color:var(--soft2); text-align:center; margin:8px 0 12px;}
  #p-aihint.tight{margin-top:-8px;}
  /* ── 문장 해석 ──
     낱말 창은 본문 옆의 보조 칸이지만, 문장 해석은 지금 읽던 한 문장에 대한
     답이라 화면 한가운데에 뜹니다. 문장 선택의 파랑은 뒤에 남지만, 답 자체는
     색보다 재질이 먼저 보이는 중립 유리입니다. */
  #sentence-modal{position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center;
    padding:20px;}
  #sentence-modal[hidden]{display:none;}
  #sentence-scrim{position:absolute; inset:0; background:var(--sentence-glass-scrim); touch-action:none;}
  #p-sentence{position:relative; width:min(520px,100%); max-height:76vh; overflow-y:auto;
    padding:20px 22px 22px; border:1px solid var(--sentence-glass-line); border-radius:22px;
    background:var(--sentence-glass-solid); box-shadow:var(--sentence-glass-shadow);
    color:var(--sentence-glass-ink); animation:sentence-modal-in var(--sentence-transition) cubic-bezier(.2,.7,.25,1);}
  @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    #p-sentence{background:var(--sentence-glass-surface); backdrop-filter:blur(18px) saturate(112%);
      -webkit-backdrop-filter:blur(18px) saturate(112%);}
  }
  #ps-head{display:none;}
  #ps-grabber{display:none;}
  #ps-source{margin:0;}
  #ps-en{font-family:var(--serif); font-size:14.5px; line-height:1.62;
    color:var(--sentence-glass-secondary); padding:0 0 11px;
    border-bottom:1px solid var(--sentence-glass-line-soft); margin-bottom:12px;
    overflow-wrap:anywhere;}
  #ps-ko{font-size:16px; font-weight:650; line-height:1.65; color:var(--sentence-glass-ink);}
  #ps-foot{margin-top:10px; color:var(--sentence-glass-muted); text-align:center;
    font-size:11px; line-height:1.45;}
  /* 문장 설명 요청이 실패했을 때만 뜨는 다시 시도 단추입니다. */
  #ps-retry{display:block; margin:10px auto 0; padding:8px 16px; border-radius:12px;
    border:1px solid var(--sentence-glass-line-soft); background:var(--sentence-glass-action);
    color:var(--sentence-glass-secondary);
    font:600 12px var(--ui); cursor:pointer;}
  #ps-retry:hover{background:var(--sentence-glass-action-hover);}
  #ps-retry[hidden]{display:none;}
  /* 좁은 화면의 문장 결과는 Reader를 밀지 않는 독립 overlay입니다. 분기값은
     sentence.js 한 곳에서 계산해 body 표로 전달하므로 CSS에 폭/높이 기준을
     복제하지 않습니다. */
  body.sentence-compact #sentence-modal{align-items:flex-end; justify-content:center; padding:0;}
  body.sentence-compact #sentence-scrim{background:var(--sentence-glass-scrim);}
  body.sentence-compact #p-sentence{display:flex; flex-direction:column;
    width:min(calc(100% - 20px),520px); max-height:min(60svh,calc(100svh - env(safe-area-inset-top) - 14px));
    margin:0 10px calc(env(safe-area-inset-bottom) + 8px); padding:16px 18px 18px;
    border-radius:26px; background:var(--sentence-glass-solid);
    overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
    transform-origin:bottom center; animation:sentence-sheet-in var(--sentence-transition) cubic-bezier(.2,.75,.25,1);}
  @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    body.sentence-compact #p-sentence{background:var(--sentence-glass-sheet);}
  }
  body.sentence-compact.sentence-low-viewport #p-sentence{max-height:calc(100svh - env(safe-area-inset-top) - 10px);
    width:min(calc(100% - 20px),480px);}
  body.sentence-compact #ps-head{order:0; position:sticky; top:-16px; z-index:2;
    display:flex; justify-content:center; margin:-16px -18px 0; padding:9px 18px 7px;
    background:var(--sentence-glass-solid); touch-action:none;}
  @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    body.sentence-compact #ps-head{background:var(--sentence-glass-sheet);}
  }
  body.sentence-compact #ps-grabber{display:block; width:34px; height:4px; border-radius:3px;
    background:var(--sentence-glass-muted); opacity:.34;}
  body.sentence-compact #ps-source{order:1;}
  body.sentence-compact #ps-en{padding:8px 0 10px; margin:0; border-bottom:0;}
  body.sentence-compact #ps-ko{order:2; font-size:17px; line-height:1.65; padding:11px 0 14px;
    border-top:1px solid var(--sentence-glass-line-soft);}
  body.sentence-compact #ps-foot{order:4;}
  body.sentence-compact #ps-retry{order:5;}
  @keyframes sentence-sheet-in{from{opacity:0; transform:translateY(18px) scale(.96)}
    to{opacity:1; transform:none}}
  @keyframes sentence-modal-in{from{opacity:0; transform:translateY(7px) scale(.985)}
    to{opacity:1; transform:none}}
  @media (prefers-reduced-motion:reduce){
    #p-sentence,body.sentence-compact #p-sentence{animation:sentence-surface-fade var(--sentence-transition) linear;}
    @keyframes sentence-surface-fade{from{opacity:0}to{opacity:1}}
    @keyframes sentence-sheet-in{from{opacity:0}to{opacity:1}}
  }
  .p-sec{font-size:10.5px; font-weight:600; color:var(--soft2); letter-spacing:.06em; margin:15px 0 7px;}
  /* 머리글 오른쪽 끝에 그 칸의 유일한 단추가 붙습니다 — 저장된 뜻의 ＋, 모르는 정도의 색칠. */
  .p-sec-row{display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:26px;}
  #p-alt-sec{display:none; letter-spacing:0; font-weight:500;}
  #p-alt-sec.on{display:block;}
  #p-add-sense{flex:0 0 auto; width:26px; height:26px; border:1px solid var(--line); border-radius:50%;
    background:var(--paper2); color:var(--soft); font:400 14px/1 var(--ui); cursor:pointer;}
  #p-add-sense:hover{border-color:var(--blue); color:var(--blue); background:var(--sky);}
  #p-sense-add{margin-top:8px;}
  #p-sense-add[hidden]{display:none;}
  /* 이 칸의 글자는 16px 밑으로 내려가면 안 됩니다. iOS Safari 는 글자가 그보다
     작은 칸에 손이 닿으면 읽으라고 화면 전체를 당겨 키웁니다 — 낱말 창만이 아니라
     읽던 쪽까지 함께 커지고, 손가락으로 되돌리기가 쉽지 않습니다. 막는 길은 두
     가지인데, viewport 에 확대 금지를 적는 쪽은 원본 종이를 손으로 키워 보는 길까지
     같이 막습니다. 그래서 이 칸의 글자만 16px 로 둡니다. */
  #p-sense-input{width:100%; box-sizing:border-box; border:1px solid var(--blue); border-radius:12px;
    padding:9px 11px; background:var(--field); color:var(--ink); font:400 16px var(--ui); outline:none;
    box-shadow:0 0 0 2px var(--blue-ring);}
  #p-alts{display:none; flex-wrap:wrap; gap:7px;}
  #p-alts.on{display:flex;}
  #p-saved-senses{display:none; flex-wrap:wrap; gap:6px;}
  #p-saved-senses.on{display:flex;}
  /* 칩은 고르는 것 하나만 합니다. 저장된 뜻은 모두 같은 파란 무리로 보이고, 지금
     보고 있는 하나만 그 안에서 꽉 찬 색과 ✓ 로 앞자리에 섭니다. */
  .saved-sense{border:1px solid var(--blue-ring); border-radius:14px; padding:5px 10px; background:var(--sky);
    color:var(--blue); font:600 12px var(--ui); cursor:pointer;}
  .saved-sense.on{border-color:var(--blue); background:var(--blue); color:var(--on-color); cursor:default;}
  .saved-sense:not(.on):hover{border-color:var(--blue); background:var(--chip-hit);}
  .saved-sense .sense-tick{margin-right:4px; font-size:10px;}
  /* 첫 칩에는 × 가 없습니다 — 지금 보는 뜻을 지우는 문은 메인 뜻 칸에 이미 있습니다.
     두 번째 칩부터만 정리할 길을 답니다. */
  .saved-sense .sense-remove{display:inline-block; margin:-2px -3px -2px 5px; padding:2px 4px;
    color:var(--blue); opacity:.5; font:700 13px/1 var(--ui); vertical-align:-1px;}
  .saved-sense:hover .sense-remove{opacity:1; color:var(--danger);}
  .kochip{border:none; background:var(--chipbg); color:var(--chiptx); border-radius:16px; padding:7px 13px;
    font-size:13px; cursor:pointer; font-family:var(--ui);}
  .kochip:hover{background:var(--chip-hover);}
  .kochip.on{background:var(--blue); color:var(--on-color);}
  .kochip .pos{opacity:.65; font-style:italic; margin-right:4px; font-size:11px;}
  #p-defs{font-size:13.5px; line-height:1.6; color:var(--ink-body);}
  #p-defs .pos{color:var(--blue); font-style:italic; margin-right:5px;}
  #p-defs div{margin-bottom:7px;}
  #p-ex{font-size:13.5px; font-family:var(--serif); font-style:italic; color:var(--ex-ink); line-height:1.65;
    border-left:3px solid var(--sky2); padding-left:11px;}
  #p-status{display:flex; gap:8px; margin-top:6px;}
  .stbtn{flex:1; border:1.5px solid var(--line); background:var(--stbtn-bg); border-radius:12px; padding:9px 0;
    font-size:13px; cursor:pointer; font-weight:600; color:var(--soft); font-family:var(--ui);}
  .stbtn[data-s="1"].on{background:var(--s1); border-color:var(--s1-line); color:var(--s1-ink);}
  .stbtn[data-s="2"].on{background:var(--s2); border-color:var(--s2-line); color:var(--s2-ink);}
  .stbtn[data-s="3"].on{background:var(--s3); border-color:var(--s3-line); color:var(--s3-ink);}
  /* 빼기 단추는 창 맨 아래의 큰 단추가 아니라 "모르는 정도" 줄로 올라갔습니다 —
     위의 `.p-tool` 을 봐 주세요. 긴 낱말 창에서 끝까지 내려야 보이던 자리였습니다. */

  /* 시트와 상관없는 좁은 화면 규칙. 단어창의 경계가 넓어져도 이쪽은 폰 기준
     그대로입니다 — 읽는 쪽 여백은 아이패드 세로에서 좁힐 이유가 없습니다.
     단어장 규칙은 styles/responsive.css 한 곳에만 둡니다(예전에는 같은 줄이
     두 파일에 있었고, 한쪽만 고치면 조용히 어긋났습니다). */
  @media (max-width:760px){
    .page{padding:26px 22px;}
  }
  @media (prefers-reduced-motion:reduce){
    #panel{animation:word-detail-fade var(--sentence-transition) linear;}
    @keyframes word-detail-fade{from{opacity:0}to{opacity:1}}
  }

/* Compact detail grows from the selected word; content never scales. */
#panel.anchored{transform:none;max-height:none;max-width:calc(100vw - 32px);border-radius:24px;animation:none;
  background:var(--sentence-glass-solid);overflow-y:auto;scrollbar-width:thin;}
#panel.anchored.morphing{overflow:hidden;}
#panel.anchored.morphing .inner{opacity:0;}
#panel .inner{padding:14px 16px 18px;display:flex;flex-direction:column;gap:10px;}
#panel #p-top{padding:0;border:0;position:static;background:transparent;}
#panel #p-head{margin:0;gap:8px;}
#panel #p-word{font-size:24px;letter-spacing:-.4px;}
#panel #p-ai{margin:0;padding:12px;border-radius:16px;}
#panel #p-ai .cap{font-size:10px;margin-bottom:5px;}
#panel #p-ai .mk{font-size:19px;line-height:1.4;}
#panel #p-ai-saved{font-size:10px;}
#panel #p-status-label{display:none;}
#panel #p-status{order:2;display:flex;gap:8px;margin:0;}
#panel .stbtn{flex:1;min-height:36px;padding:4px;font-size:16px;border-radius:12px;}
#panel #p-top,#panel #p-clicked,#panel #p-ai,#panel #p-aibtn,#panel #p-aihint{order:0;}
#panel #p-en-section{order:3;}
#panel #p-ex-fold{order:4;}
#panel #p-sense-add,#panel #p-alt-sec,#panel #p-alts{order:5;}
#panel #p-tools-fold{order:6;}
#panel details{font:13px/1.5 var(--ui);}
#panel summary{cursor:pointer;color:var(--sentence-glass-secondary);padding:5px 0;}
#panel .p-sec{margin:0 0 5px;}
#panel #p-saved-senses{margin:10px 0 0;gap:7px;}
#panel .saved-sense{display:inline-flex;align-items:center;gap:7px;min-height:30px;max-width:100%;padding:4px 9px;border:1px solid var(--sentence-glass-line);border-radius:11px;background:linear-gradient(155deg,color-mix(in srgb,var(--sentence-glass-ink) 11%,transparent),color-mix(in srgb,var(--sentence-glass-action) 88%,transparent));color:var(--sentence-glass-ink);font:500 12px/1.25 var(--ui);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--sentence-glass-ink) 19%,transparent),0 2px 8px color-mix(in srgb,#000 9%,transparent);backdrop-filter:blur(12px) saturate(135%);-webkit-backdrop-filter:blur(12px) saturate(135%);cursor:pointer;}
#panel .saved-sense:not(.on):hover{border-color:color-mix(in srgb,var(--sentence-glass-ink) 32%,var(--sentence-glass-line));background:linear-gradient(155deg,color-mix(in srgb,var(--sentence-glass-ink) 17%,transparent),color-mix(in srgb,var(--sentence-glass-action) 92%,transparent));}
#panel .saved-sense .sense-remove{margin:0;padding:0 1px;color:var(--sentence-glass-secondary);opacity:.85;font:400 15px/1 var(--ui);}
#panel .saved-sense:hover .sense-remove{color:var(--sentence-glass-ink);}
#panel #p-defs{font-size:14px;line-height:1.55;margin:0;}
#panel #p-ex{font-size:15px;line-height:1.6;margin:5px 0 0;}
#panel #p-word-tools{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 0;}
#panel #p-word-tools button{position:static;width:auto;height:auto;min-height:36px;padding:6px 10px;border:1px solid var(--sentence-glass-line);border-radius:10px;background:transparent;color:inherit;font:12px var(--ui);}
#panel #p-en-retry{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--sentence-glass-line);border-radius:50%;background:transparent;color:var(--sentence-glass-secondary);padding:0;cursor:pointer;}
#panel [hidden]{display:none!important;}

#panel .inner{transition:opacity .1s ease;}
#p-ex-preview{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font:italic 14px/1.55 var(--ui);color:var(--ink-body);margin-top:4px;}
#p-ex-fold[open] #p-ex-preview{display:none;}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  #panel.anchored{background:var(--sentence-glass-pill);backdrop-filter:blur(19px) saturate(122%);-webkit-backdrop-filter:blur(19px) saturate(122%);}
}
@media(prefers-reduced-motion:reduce){#panel .inner{transition:none;}}

/* Quiet vocabulary controls: meaning first, frequent actions within reach. */
#panel #p-actions{display:flex;align-items:center;flex:none;border:1px solid var(--sentence-glass-line);border-radius:22px;overflow:hidden;background:var(--sentence-glass-action);}
#panel #p-actions button{height:40px;border:0;background:transparent;color:var(--sentence-glass-ink);cursor:pointer;}
#panel #p-know{padding:0 13px;font:12px var(--ui);border-radius:0;}
#panel #p-speak{width:40px;border-radius:0;border-left:1px solid var(--sentence-glass-line);display:grid;place-items:center;}
#panel #p-actions button:hover{background:var(--sentence-glass-line);box-shadow:none;}
#panel #p-know:hover{color:var(--danger);}
#panel #p-ai{background:transparent;border:0;border-radius:0;padding:8px 0 12px;border-bottom:1px solid var(--sentence-glass-line);}
#panel #p-ai .cap{color:var(--sentence-glass-secondary);font-weight:400;letter-spacing:0;}
#panel #p-ai .dot{display:none;}
#panel #p-ai .mk{color:var(--sentence-glass-ink);font-size:20px;font-weight:600;}
#panel #p-ai-saved{background:none;color:var(--sentence-glass-secondary);padding:0;font-weight:400;}
#panel .aurora{background:var(--sentence-glass-action);border:1px solid var(--sentence-glass-line);}
#panel .aurora .glow{background:radial-gradient(ellipse at 30% 45%,color-mix(in srgb,var(--sentence-glass-ink) 12%,transparent),transparent 60%),radial-gradient(ellipse at 75% 60%,color-mix(in srgb,var(--sentence-glass-ink) 7%,transparent),transparent 65%);}
#panel .stbtn{font-size:11px;letter-spacing:2px;font-weight:400;background:var(--sentence-glass-action);color:var(--sentence-glass-secondary);border:1px solid var(--sentence-glass-line);}
#panel .stbtn.on{background:color-mix(in srgb,var(--sentence-glass-ink) 12%,transparent);border-color:color-mix(in srgb,var(--sentence-glass-ink) 30%,transparent);color:var(--sentence-glass-ink);}
#panel #p-highlight-row{order:2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:3px 0 8px;font:12px var(--ui);color:var(--sentence-glass-secondary);}
#p-highlight-row small{display:block;font-size:10px;margin-top:3px;opacity:.8;}
#panel #p-mark{display:flex;align-items:center;gap:9px;min-height:44px;min-width:76px;justify-content:flex-end;flex:none;padding:0;border:0;background:none;color:var(--sentence-glass-secondary);font:11px var(--ui);cursor:pointer;}
#p-mark i{display:block;box-sizing:border-box;width:42px;height:26px;border-radius:16px;background:var(--sentence-glass-line);padding:3px;}
#p-mark i::after{content:'';display:block;width:20px;height:20px;border-radius:50%;background:var(--sentence-glass-secondary);transition:transform .15s;}
#panel #p-mark.on i{background:color-mix(in srgb,var(--sentence-glass-ink) 25%,transparent);}
#p-mark.on i::after{transform:translateX(16px);background:var(--sentence-glass-ink);}
/* Keep scrolling inside the glass surface without a protruding scroll indicator. */
#panel,#panel.anchored{scrollbar-width:none;overscroll-behavior:contain;}
#panel::-webkit-scrollbar{display:none;width:0;height:0;}
/* A restrained hint of the matching reading highlight, only for the selected level. */
#panel .stbtn[data-s="1"].on{color:var(--s1-ink);background:color-mix(in srgb,var(--s1) 36%,var(--sentence-glass-solid));border-color:color-mix(in srgb,var(--s1-line) 55%,var(--sentence-glass-line));}
#panel .stbtn[data-s="2"].on{color:var(--s2-ink);background:color-mix(in srgb,var(--s2) 36%,var(--sentence-glass-solid));border-color:color-mix(in srgb,var(--s2-line) 55%,var(--sentence-glass-line));}
#panel .stbtn[data-s="3"].on{color:var(--s3-ink);background:color-mix(in srgb,var(--s3) 36%,var(--sentence-glass-solid));border-color:color-mix(in srgb,var(--s3-line) 55%,var(--sentence-glass-line));}

#panel #p-head{align-items:center;min-height:40px;}
#panel #p-word{font-size:23px;line-height:1.2;letter-spacing:-.35px;}
#panel #p-actions button{height:36px;}
#panel #p-speak{width:38px;}
body.dark #panel .stbtn[data-s="1"].on{color:var(--s1);}
body.dark #panel .stbtn[data-s="2"].on{color:var(--s2);}
body.dark #panel .stbtn[data-s="3"].on{color:var(--s3);}
.p-dict-source{display:block;margin-top:10px;font:10px/1.5 var(--ui);color:var(--sentence-glass-secondary);}
.p-dict-source a{color:inherit;text-decoration:none;}