/* Vocabulary, sync, notifications, and shared components */

  #v-vocab{max-width:980px; margin:0 auto; padding:30px 26px 90px;}
  #v-vocab .head{display:flex; align-items:center; gap:12px; margin-bottom:22px; flex-wrap:wrap;}
  #v-vocab h1{font-size:24px; font-weight:500; letter-spacing:-.5px;}
  #v-vocab .cnt{color:var(--soft); font-size:14px;}
  #vsearch{margin-left:auto; border:1px solid var(--line); border-radius:20px; padding:9px 16px; font-size:16px;
    width:200px; background:var(--field); font-family:var(--ui); outline:none;}
  #vsearch:focus{border-color:var(--blue);}
  /* 내보내기는 가끔 한 번 누르는 단추입니다. 예전에는 화면 폭을 다 차지하는 파란
     단추였는데(좁은 화면에서는 검색칸 아래 한 줄을 통째로), 그 자리는 단어를
     보여 주는 데 씁니다. 단어창의 `.p-tool` 과 같은 문법을 그대로 씁니다. */

  /* ---- 단어장 ----
     접혀 있을 때 한 줄에 있는 것은 [단어] [뜻] [★] 셋뿐입니다. 같은 표제어의
     뜻이 여럿이면 단어를 반복하지 않고 뜻 칸 안에서만 아래로 이어 붙어, 표가
     주던 "단어 ↔ 뜻" 가로 대응은 남고 가로 스크롤만 사라집니다.
     칸 폭은 clamp 하나로 잡습니다 — 고정 px 는 좁은 화면에서 다시 표를 밀어냅니다. */
  #vtablewrap{border-top:1px solid var(--td-line);}
  .vgroup{border-bottom:1px solid var(--td-line);}
  .vrow{display:grid; grid-template-columns:minmax(0,clamp(92px,22%,168px)) minmax(0,1fr) auto;
    align-items:start; column-gap:14px; padding:9px 4px; cursor:pointer;}
  @media (hover:hover){ .vrow:hover{background:var(--paper2); border-radius:10px;} }
  /* 표제어는 영어라 하이픈으로 끊습니다. `anywhere` 만 두면 좁은 화면에서
     "conspicuou / s" 처럼 글자 하나가 다음 줄에 홀로 떨어집니다. */
  .vword{font:700 15.5px/1.6 var(--serif); color:var(--ink); overflow-wrap:anywhere;
    -webkit-hyphens:auto; hyphens:auto; -webkit-user-select:none; user-select:none;}
  .vword:focus-visible{outline:2px solid var(--blue); outline-offset:3px; border-radius:5px;}
  .vsenses{min-width:0;}
  .vsense + .vsense{margin-top:3px;}
  .vko{font:400 14px/1.6 var(--ui); color:var(--soft); overflow-wrap:anywhere;}
  .vgroup:not(.open) .vko:empty::before{content:'뜻 없음'; color:var(--soft2);}
  /* 펼치면 그 자리에서 고칩니다. 종이 위에 칸 하나가 떠오르는 것으로 "여기는
     고치는 곳"이라고 말합니다 — 접혀 있을 때는 읽는 글자일 뿐입니다. */
  /* 넓은 화면이라고 칸을 끝까지 벌리지 않습니다 — "모호한" 세 글자를 받는 칸이
     700px 일 이유가 없고, 예문 한 줄이 90자면 눈이 되돌아올 곳을 잃습니다. */
  .vgroup.open .vko{color:var(--ink); background:var(--field); border-radius:7px; max-width:26em;
    box-shadow:inset 0 0 0 1px var(--field-line); padding:3px 8px; margin:-3px -8px 0; outline:none;}
  .vgroup.open .vko:focus{background:var(--sky);}
  .vmore{margin:7px 0 10px; padding-left:11px; max-width:42em;
    border-left:2px solid var(--divider); cursor:auto;}
  .vex{font:italic 13px/1.65 var(--ui); color:var(--ex-ink); overflow-wrap:anywhere;}
  .vmeta{margin-top:4px; font:500 11.5px/1.55 var(--ui); color:var(--soft2); overflow-wrap:anywhere;}
  .rowdel{margin-top:7px; border:none; background:none; padding:3px 0; color:var(--rowdel);
    cursor:pointer; font:600 11.5px var(--ui);}
  .rowdel:hover{color:var(--danger-strong);}
  /* 26px 짜리 칩은 손가락이 잘 못 맞힙니다. 보이지 않는 여유를 둘러 44px 로 넓힙니다 —
     칩 자체를 키우면 훑는 줄이 그만큼 두꺼워집니다. */
  .chip{position:relative; display:inline-flex; align-items:center; justify-content:center;
    min-width:46px; min-height:26px; border:none; border-radius:9px; padding:3px 9px;
    font:700 12px var(--ui); cursor:pointer; white-space:nowrap;}
  .chip::after{content:''; position:absolute; inset:-9px -3px;}
  .chip:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}
  .chip.s1{background:var(--s1); color:var(--s1-ink);}
  .chip.s2{background:var(--s2); color:var(--s2-ink);}
  .chip.s3{background:var(--s3); color:var(--s3-ink);}
  #vempty{text-align:center; color:var(--soft); padding:70px 0 40px; font-size:14.5px; line-height:1.8;}

  /* ---- 설정 시트 ----
     탭 두 개(일반 · 다른 기기와 연결하기)를 두르고, 동기화 화면은 그 안의 한
     칸으로 들어옵니다. 아래 `.sm-*` 는 전부 그 칸 안에서 쓰이는 이름입니다. */
  #settings-modal{position:fixed; inset:0; z-index:160; background:var(--scrim); display:none;
    align-items:center; justify-content:center; padding:20px;}
  #settings-modal.on{display:flex;}
  #set-card{background:var(--sheet); border-radius:22px; padding:30px 28px; width:100%; max-width:400px;
    box-shadow:var(--shadow); max-height:88vh; overflow-y:auto;}
  #set-card h2{font-family:var(--display); font-size:22px; font-weight:600; letter-spacing:-.5px; margin-bottom:14px;}
  #set-card .desc{font-size:13.5px; color:var(--soft); line-height:1.6; margin-bottom:18px;}
  .set-tabs{display:flex; gap:4px; padding:4px; margin-bottom:20px; border-radius:14px; background:var(--tabs-bed);}
  .set-tab{flex:1; min-width:0; border:none; background:none; border-radius:11px; padding:9px 6px;
    font:600 12.5px var(--ui); color:var(--soft); cursor:pointer; transition:.15s;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .set-tab:hover{color:var(--blue);}
  .set-tab.on{background:var(--tab-on); color:var(--ink); box-shadow:var(--shadow-tab);}
  #set-card .set-panel{display:none;} #set-card .set-panel.on{display:block;}
  .set-row{display:flex; align-items:center; gap:14px; padding:4px 0 14px;}
  .set-label{flex:1; min-width:0;}
  .set-label b{display:block; font-size:14px; font-weight:600; color:var(--ink);}
  .set-label span{display:block; margin-top:4px; font-size:11.5px; line-height:1.5; color:var(--soft);}
  .set-seg{display:flex; flex-shrink:0; gap:3px; padding:3px; border-radius:12px; border:1px solid var(--field-line);
    background:var(--field-soft);}
  .set-seg button{border:none; background:none; border-radius:9px; padding:7px 11px; cursor:pointer;
    font:600 12px var(--ui); color:var(--soft); transition:.15s; white-space:nowrap;}
  .set-seg button:hover{color:var(--blue);}
  .set-seg button.on{background:var(--blue); color:var(--on-color);}
  .sm-account{margin:0 0 13px; color:var(--soft); font-size:11px; line-height:1.4;}
  .sm-account b{display:block; overflow-wrap:anywhere; color:var(--ink); font-size:12px;}
  .sm-account span{display:block; margin-top:2px;}
  #sm-email, #sm-password-email, #sm-password{width:100%; border:1px solid var(--line); border-radius:12px; padding:12px 14px; font-size:15px;
    font-family:var(--ui); outline:none; margin-bottom:12px; background:var(--field);}
  #sm-email:focus, #sm-password-email:focus, #sm-password:focus{border-color:var(--blue);}
  /* input 은 글자색을 물려받지 않습니다(브라우저 기본값이 이깁니다). 어두운
     화면에서만 잉크색을 줘야 검은 글자가 검은 칸에 깔리지 않습니다. */
  body.dark #vsearch, body.dark #sm-email, body.dark #sm-password-email, body.dark #sm-password{color:var(--ink);}
  .sm-btn{width:100%; border:none; border-radius:12px; padding:13px; font-size:15px; font-weight:600;
    font-family:var(--ui); cursor:pointer; margin-bottom:10px;}
  .sm-btn.primary{background:var(--blue); color:var(--on-color);}
  .sm-btn.primary:hover{background:var(--blue-deep);}
  .sm-btn.ghost{background:var(--ghost-btn); color:var(--ink);}
  /* 계정 지우기. 되돌릴 수 없는 일이라 큰 버튼으로 두지 않지만, 숨기지도
     않습니다 — 나갈 문이 어디 있는지는 보여야 합니다. */
  .sm-linkish{display:block; width:100%; border:none; background:none; padding:6px 0 0;
    font:12.5px var(--ui); color:var(--soft2); cursor:pointer; text-decoration:underline;
    text-underline-offset:3px;}
  .sm-linkish:hover{color:var(--danger);}
  .sm-linkish.neutral:hover{color:var(--blue);}
  .sm-mini{border:1px solid var(--line); background:none; border-radius:14px; padding:4px 10px;
    font-size:11.5px; cursor:pointer; color:var(--soft); font-family:var(--ui);}
  .sm-mini:hover{background:var(--sky); color:var(--blue);}
  #sm-status{font-size:13px; color:var(--soft); text-align:center; min-height:18px; margin-top:4px;}
  #sm-codewrap{display:none; margin-top:14px; padding-top:14px; border-top:1px dashed var(--line);}
  #sm-code{width:100%; border:1px solid var(--line); border-radius:12px; padding:13px 14px; font-size:23px;
    letter-spacing:11px; text-indent:11px; text-align:center; font-family:var(--ui); outline:none;
    margin-bottom:10px; color:var(--ink); font-weight:600;}
  #sm-code::placeholder{color:var(--placeholder); font-weight:400;}
  #sm-code:focus{border-color:var(--blue);}
  #sm-codewrap .hint{font-size:12.5px; color:var(--soft); margin-bottom:8px; text-align:center;}
  .sm-vault{border:1px solid var(--ai-line); border-radius:18px; padding:18px; margin:20px 0 18px;
    background:linear-gradient(145deg,var(--ai-bg1),var(--ai-bg2));}
  .sm-vault.locked{border-color:var(--vault-locked-line); background:var(--vault-locked); color:var(--soft);}
  .sm-vault-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; color:var(--ai-key);}
  .sm-vault-head b{display:block; margin-top:2px; font-size:15px; letter-spacing:-.2px;}
  .sm-vault-kicker{display:block; font:700 9.5px var(--ui); letter-spacing:.12em; opacity:.72;}
  .sm-vault.locked .sm-vault-head{color:var(--soft);}
  .sm-info{border:1px solid currentColor; border-radius:50%; width:18px; height:18px; padding:0; background:none;
    color:inherit; font:700 11px var(--ui); cursor:pointer;}
  .sm-vault p{margin:13px 0 12px; font-size:11.5px; line-height:1.55; color:var(--soft);}
  .sm-vault-info{margin:13px 0 0; padding:10px 11px; border-radius:10px; background:var(--vault-note);
    color:var(--soft); font-size:11px; line-height:1.55;}
  .sm-secret{display:flex; align-items:center; gap:8px; min-height:46px; border:1px solid var(--ai-line); border-radius:12px; padding:0 11px; background:var(--vault-field);}
  .sm-vault.locked .sm-secret{border-color:var(--vault-locked-field-line); background:var(--vault-locked-field);}
  .sm-secret input,.sm-secret span{flex:1; min-width:0; border:0; outline:0; background:transparent; padding:11px 0; font:13px var(--ui); color:var(--ink);}
  .sm-secret button{border:0; background:none; color:var(--soft); cursor:pointer; padding:5px 2px; font:600 11px var(--ui);}
  .sm-secret button:disabled{opacity:.35; cursor:default;}
  .sm-vault-actions{display:flex; justify-content:flex-end; margin-top:11px;}
  .sm-vault .sm-mini.primary{border-color:var(--blue); background:var(--blue); color:var(--on-color); padding:7px 12px;}
  .sm-vault .sm-mini.primary:hover{background:var(--blue-deep);}
  .sm-vault-error{margin-top:8px; color:var(--error-ink); font-size:11.5px;}
  .sm-reset{border:0; background:none; padding:4px 0; color:var(--soft2); font:11px var(--ui); cursor:pointer; text-decoration:underline; text-underline-offset:3px;}
  .sm-reset-confirm{margin-top:14px; padding-top:13px; border-top:1px solid var(--vault-locked-line);}
  .sm-reset-confirm b{display:block; color:var(--ink); font-size:12px;}
  .sm-reset-confirm span{display:block; margin:4px 0 9px; color:var(--soft); font-size:11px; line-height:1.45;}
  .sm-reset-confirm input{box-sizing:border-box; width:100%; border:1px solid var(--vault-locked-field-line); border-radius:9px; padding:9px 10px; background:var(--field); color:var(--ink); font:12px var(--ui); outline:none;}
  .sm-reset-confirm input:focus{border-color:var(--blue);}
  .sm-reset-confirm>div{display:flex; align-items:center; justify-content:space-between; margin-top:8px;}
  .sm-delete-confirm{margin-top:14px;padding:14px;border:1px solid color-mix(in srgb,var(--red) 35%,transparent);border-radius:12px;background:color-mix(in srgb,var(--red) 6%,transparent);}
  .sm-delete-confirm b,.sm-delete-confirm span{display:block;}
  .sm-delete-confirm b{font-size:13px;color:var(--ink);}
  .sm-delete-confirm span{margin:5px 0 10px;font-size:11px;line-height:1.5;color:var(--soft);}
  .sm-delete-confirm input{box-sizing:border-box;width:100%;padding:10px 11px;border:1px solid var(--vault-locked-field-line);border-radius:9px;background:var(--paper);color:var(--ink);font:600 12px var(--ui);letter-spacing:.08em;outline:none;}
  .sm-delete-confirm input:focus{border-color:var(--red);}
  .sm-delete-confirm>div{display:flex;justify-content:flex-end;gap:8px;margin-top:9px;}
  .sm-mini.danger{border-color:var(--danger-line); color:var(--danger);}
  .sm-mini.danger:hover{background:var(--danger-tint2);}
  .sm-recovery-key{margin:12px 0 9px; padding:11px 12px; border:1px dashed var(--ai-line); border-radius:11px;
    background:var(--vault-key); color:var(--ink); font:600 11px/1.55 var(--mono);
    overflow-wrap:anywhere; user-select:all;}
  .sm-recovery-actions{display:grid; grid-template-columns:repeat(3,1fr); gap:6px;}
  .sm-recovery-actions button,.sm-device-move button,.sm-saved{border:1px solid var(--line); border-radius:10px;
    padding:8px 6px; background:var(--vault-btn); color:var(--ink); font:600 10.5px var(--ui); cursor:pointer;}
  .sm-saved{width:100%; margin-top:7px; border-color:var(--blue); color:var(--blue);}
  .sm-device-move{display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:14px; padding-top:13px;
    border-top:1px solid rgba(115,145,155,.18);}
  .sm-device-move b,.sm-device-move span,.sm-device-move small{grid-column:1/-1;}
  .sm-device-move b{font-size:12px; color:var(--ink);}
  .sm-device-move span,.sm-device-move small{font-size:10.5px; line-height:1.45; color:var(--soft);}
  .sm-device-move button:disabled{cursor:not-allowed; opacity:.45;}
  .sm-device-move input{min-width:0; border:1px solid var(--line); border-radius:10px; padding:8px 9px;
    background:var(--vault-btn); color:var(--ink); font:600 13px var(--ui); letter-spacing:.14em; text-align:center; outline:none;}
  .sm-pair-start{grid-column:1/-1; border-color:var(--blue)!important; color:var(--blue)!important;}
  .sm-pair-box{grid-column:1/-1; display:flex; flex-direction:column; align-items:center; gap:7px;
    padding:11px; border-radius:12px; background:var(--vault-btn);}
  .sm-pair-box img{width:150px; height:150px; image-rendering:pixelated; border-radius:7px;}
  .sm-pair-box b{font:700 20px var(--ui); letter-spacing:.22em; color:var(--ink);}
  .sm-pair-box span{text-align:center;}
  /* 평소에는 거의 쓰지 않는 기기 연결·자료 옮기기를 접어 둡니다. 동기화의
     핵심 상태와 복구키가 첫 화면에서 밀려나는 일을 막습니다. */
  .sm-fold{margin-top:12px; padding-top:11px; border-top:1px solid rgba(115,145,155,.18);}
  .sm-fold summary{display:flex; align-items:center; justify-content:space-between; gap:10px; cursor:pointer;
    list-style:none; color:var(--ink);}
  .sm-fold summary::-webkit-details-marker{display:none;}
  .sm-fold summary::after{content:'›'; order:3; color:var(--soft2); font:20px/1 var(--ui); transition:transform .16s;}
  .sm-fold[open] summary::after{transform:rotate(90deg);}
  .sm-fold summary b{font-size:12px;}
  .sm-fold summary span{margin-left:auto; color:var(--soft); font-size:10.5px;}
  .sm-fold .sm-device-move{margin-top:10px; padding-top:0; border-top:0;}
  #set-close{float:right; border:none; background:var(--quiet); width:30px; height:30px; border-radius:50%;
    font-size:14px; cursor:pointer; color:var(--quiet-ink);}

  @media (max-width:760px){
    #settings-modal{align-items:flex-start; overflow-y:auto; padding:12px;}
    #set-card{box-sizing:border-box; margin:auto 0; padding:21px 18px; border-radius:19px; max-width:430px;}
    #set-card h2{font-size:19px; margin-bottom:11px;}
    #set-card .desc{font-size:12.5px; line-height:1.5; margin-bottom:13px;}
    .set-tabs{margin-bottom:16px;}
    .set-tab{font-size:11.5px; padding:8px 5px;}
    /* 좁은 화면에서는 설명과 선택 단추가 한 줄에 못 삽니다. 단추를 아래로
       내리고 폭을 채웁니다 — 반쯤 잘린 "한국어"보다 낫습니다. */
    .set-row{flex-direction:column; align-items:stretch; gap:10px;}
    .set-seg button{flex:1; padding:9px 8px;}
    .sm-account{margin-bottom:10px; font-size:10px;}
    .sm-account b{font-size:11px;}
    .sm-vault{margin:12px 0 13px; padding:14px; border-radius:15px;}
    .sm-vault-head b{font-size:13.5px;}
    .sm-vault-kicker{font-size:8.5px;}
    .sm-vault p{margin:9px 0 9px; font-size:10.5px; line-height:1.45;}
    .sm-recovery-key{margin:9px 0 7px; padding:9px 10px; font-size:10px; line-height:1.45;}
    .sm-recovery-actions button,.sm-device-move button,.sm-saved{padding:7px 4px; font-size:10px;}
    .sm-fold{margin-top:10px; padding-top:9px;}
    .sm-fold summary b{font-size:11.5px;}
    .sm-fold .sm-device-move{margin-top:8px;}
    .sm-device-move{gap:6px;}
    .sm-device-move span,.sm-device-move small{font-size:10px; line-height:1.35;}
    .sm-btn{padding:11px; font-size:14px; margin-bottom:8px;}
  }

  /* iOS WKWebView는 16px보다 작은 편집 칸에 초점을 주면 화면을 자동 확대합니다.
     native shell의 실제 텍스트 입력만 올려 Reader의 수동 확대는 그대로 둡니다. */
  html.native-shell #sm-email,
  html.native-shell #sm-password-email,
  html.native-shell #sm-password,
  html.native-shell .sm-secret input,
  html.native-shell .sm-reset-confirm input,
  html.native-shell .sm-delete-confirm input,
  html.native-shell .sm-device-move input,
  html.native-shell #am-text,
  html.native-shell #am-url,
  html.native-shell #ed-title{font-size:16px;}

  #minitoast{position:fixed; left:50%; transform:translateX(-50%); bottom:22px; z-index:140;
    background:var(--minitoast-bg); color:var(--minitoast-ink); font-size:11.5px; letter-spacing:.2px;
    padding:5px 13px; border-radius:20px; opacity:0; pointer-events:none;
    transition:opacity .35s; backdrop-filter:blur(4px); white-space:nowrap;}
  #minitoast.on{opacity:1;}
  /* 글자색은 `--on-color`(늘 흰색)가 아니라 `--toast-ink` 입니다 — 어두운 화면에서는
     이 판이 밝은 종이색으로 뒤집히므로, 흰 글자를 박아 두면 그때만 읽히지 않습니다. */
  #toast{position:fixed; bottom:28px; left:50%; transform:translateX(-50%); background:var(--toast-bg); color:var(--toast-ink);
    padding:11px 22px; border-radius:24px; font-size:13.5px; opacity:0; pointer-events:none; transition:.25s; z-index:150;}
  #toast.on{opacity:.95;}
  #drop-overlay{position:fixed; inset:0; z-index:120; background:var(--drop-veil); display:none;
    align-items:center; justify-content:center; font-size:22px; color:var(--blue-deep); font-weight:500;
    border:4px dashed var(--blue); border-radius:20px;}
  #drop-overlay.on{display:flex;}