/*
 * 2026-10 디자인 改編 (3rd): 예전 모습을 거의 그대로 두고 손볼 곳만.
 * 켜 둔 것: rd-name, rd-head, rd-progress
 * 꺼 둔 것(2nd 案): rd-searchicon, rd-chips, rd-letters — 지나치게 現代的이어서
 *
 * paper.css 위에 덧씌우는 層. 각 덩어리는 <html>의 rd-* 클래스가 있을 때만 作動한다.
 * 스위치: index.html 의 <html class="..."> 에서 이름을 빼면 그 部分만 예전 모습.
 * 確認用: 주소 뒤에 ?design=old 를 붙이면 改編 前 모습.
 *
 * 柱 높이는 --head-h 로 바꾼다. app.js 가 이 값을 읽어 쪽을 나누므로 height 를 직접 쓰지 않는다.
 */

/* "/" 단축키 안내는 searchicon 스위치가 켜졌을 때만 */
.find__key { display: none; }


/* ==================================================================
   name — 찾기欄 안내문에 辭典 이름 (app.js 가 rd-name 을 보고 넣는다)
   ================================================================== */


/* ==================================================================
   searchicon — 찾기欄: 돋보기와 "/" 단축키 안내 (꺼 둠)
   ================================================================== */

html.rd-searchicon .find input {
  padding-left: 2.1rem;
  padding-right: 2.1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Ccircle cx='6' cy='6' r='4.4' fill='none' stroke='%238a857b' stroke-width='1.4'/%3E%3Cpath d='M9.3 9.3L12.6 12.6' stroke='%238a857b' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: .85rem 52%;
  background-size: 14px 14px;
}
html.rd-searchicon:root[data-cols='1'] .find input { padding-left: 2rem; padding-right: .9rem; background-position: .75rem 52%; }

/* 데스크톱에서만 "/" 안내. 글자를 넣거나 欄이 잡히면 감춘다 */
@media (hover: hover) and (pointer: fine) {
  html.rd-searchicon .find__key {
    display: grid;
    place-items: center;
    position: absolute;
    top: 50%;
    right: .55rem;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: -.625rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    font: 500 .72rem/1 var(--font-latin), serif;
    color: var(--color-muted-3);
    pointer-events: none;
    transition: opacity .15s ease;
  }
  html.rd-searchicon .find input:focus ~ .find__key,
  html.rd-searchicon .find input:not(:placeholder-shown) ~ .find__key { opacity: 0; }
}


/* ==================================================================
   head — 柱: 위 도구와 本文 양쪽에서 떨어뜨림 (罫線 없음). 아래 넘김 띠는 畫面 아래 끝에서 들어 올림
   ================================================================== */

html.rd-head { --head-h: 32px; }
html.rd-head .top { padding-bottom: 16px; }
/* 넘김 띠: 本文과의 사이는 조금 좁히고, 畫面 끝과의 사이는 넓힌다.
   紙面 높이는 app.js 가 이 띠 높이를 빼서 다시 잰다 */
/* 아래 띠의 가운데가 畫面 아래 끝에서 떨어진 거리를, 위 찾기欄의 가운데가 위 끝에서 떨어진 거리와 맞춘다 */
html.rd-head .statusbar { padding-top: 20px; padding-bottom: 23px; }
@media (max-width: 480px) { html.rd-head .statusbar { padding-top: 14px; padding-bottom: 17px; } }
html.rd-head .page__head {
  align-items: flex-start;
  padding-inline: 2px;
}


/* ==================================================================
   chips — 分野 標識: 테두리 대신 옅은 바탕 (꺼 둠)
   ================================================================== */

html.rd-chips .lbl {
  border-color: transparent;
  background: color-mix(in srgb, var(--color-accent) 13%, transparent);
  border-radius: 5px;
}


/* ==================================================================
   letters — 字母 갈피: 옅은 바탕의 작은 네모 (꺼 둠)
   ================================================================== */

html.rd-letters .blk--letter .blk__in { padding: 14px 0 6px; gap: .6em; }
html.rd-letters .letter {
  display: grid;
  place-items: center;
  min-width: 1.7rem;
  height: 1.7rem;
  padding: 0 .35rem;
  border-radius: 6px;
  background: color-mix(in srgb, var(--color-accent) 13%, transparent);
  font-size: 13px;
  font-variant: normal;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-accent-ink);
}


/* ==================================================================
   progress — 쪽 넘김 막대: 읽은 만큼 조금 짙게
   ================================================================== */

html.rd-progress .slider {
  background: linear-gradient(var(--color-rule), var(--color-rule)) 0 0 / var(--p, 0%) 100% no-repeat,
              var(--color-border);
}
html.rd-progress .slider::-moz-range-track { background: transparent; }
html.rd-progress .slider::-moz-range-progress { height: 3px; border-radius: var(--pill); background: var(--color-rule); }
html.rd-progress .statusbar__folio { font-variant-numeric: tabular-nums; }
html.rd-progress .statusbar b { color: var(--color-text); }


/* ==================================================================
   shaken — 寫硏 書體 (TypeSquare): 品詞·分野 標識과 뜻풀이 속 漢字·가나를 石井明朝 オールド R 로.
   블로그(b.halv.kr)와 같은 글꼴. 한글·라틴 文字는 그대로.
   ================================================================== */

html.rd-shaken {
  --font-hanja: var(--font-latin), "IshiiMincho Old R", 'Zen Old Mincho', 'Shippori Mincho B1', var(--font-body);
}
/* 뜻풀이 속 漢字·가나(.hj)는 本文 글꼴을 물려받아 漢字가 Zen Old Mincho, 가나가 부크크 고딕으로 나오던 것을 石井明朝로 */
html.rd-shaken .hj { font-family: var(--font-hanja); }
/* 글자 목록: 화면 밖에 두되 display:none 은 쓰지 않는다 (TypeSquare 가 읽어야 하므로) */
.ts-glyphs {
  position: absolute;
  left: -99999px;
  top: 0;
  width: 1px;            /* 일본어 뜻풀이로 글자가 늘어 한 줄로 두면 화면 안까지 뻗으므로 좁은 기둥으로 접는다 */
  overflow: hidden;
  pointer-events: none;
}


/* ==================================================================
   unbatang · undotum — 한글을 은글꼴로 (블로그 b.halv.kr 과 같은 글꼴·같은 값)
   뜻풀이 같은 本文 한글은 은바탕(明朝), 檢索欄·찾은 目錄·分野 標識처럼 UI 에 가까운 곳은 은돋움.
   은바탕은 한글을 0.05em, 은돋움은 0.07em 올려 두었으므로 漢字(.hj)를 내리지 않는다.
   라틴 文字는 어디서나 Newsreader 그대로 (사전 表記의 區別符號 때문에).
   ================================================================== */

html.rd-unbatang {
  --font-body: var(--font-latin), 'UnBatang', 'BookkGothic', 'Zen Old Mincho', 'Shippori Mincho B1',
               'Noto Serif KR', 'Apple SD Gothic Neo', 'Malgun Gothic', serif;
}
html.rd-unbatang .hj { top: 0; }
/* 뜻 번호(①②…)는 올라간 은바탕 한글보다 처져 보이므로 가운데를 맞춰 올린다 */
html.rd-unbatang .num { vertical-align: .12em; }
html.rd-undotum {
  --rd-gothic: var(--font-latin), 'UnDotum', 'IshiiGothic R', 'BookkGothic', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
}
html.rd-undotum #dictSel,
html.rd-undotum :is(.find input, .results) { font-family: var(--rd-gothic); }
/* 分野 標識(지리·인명…)은 은돋움을 첫 글꼴로 해서 테두리 안 높이를 은돋움에 맞추고, 위아래 여백을 같게 해 가운데에 둔다 */
/* 테두리 안에 숨 쉴 자리를 두되 줄은 벌리지 않는다: inline-block 에 위아래 여백을 주고
   같은 만큼 음의 margin 으로 줄 상자에서 빼 준다. text-indent 는 덩이의 내어쓰기(-9px)를 물려받지 않게 0. */
html.rd-undotum .lbl {
  font-family: 'UnDotum', 'IshiiGothic R', var(--rd-gothic);
  display: inline-block; text-indent: 0;
  line-height: 1; padding: .14em .32em .16em;
  margin-top: -.15em; margin-bottom: -.15em;
}
html.rd-undotum :is(.results, .lbl) .hj { font-family: inherit; top: 0; }


/* ==================================================================
   langsw — 뜻풀이 언어 한/日 (한 번에 하나만 보인다)
   日 이면 뜻풀이·주석을 石井明朝로 짜고, 일본어 줄바꿈(어디서나 끊되 금칙은 지킴)을 쓴다.
   일본어가 아직 없는 뜻은 한국어를 흐리게 보인다 (.is-ko).
   ================================================================== */

.langsw {
  display: flex; flex: none; align-items: center;
  height: 2rem; padding: 2px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--pill);
  background: color-mix(in srgb, var(--color-bg) 90%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.langsw button {
  -webkit-appearance: none; appearance: none;
  border: 0; margin: 0; cursor: pointer;
  height: 100%; min-width: 1.9rem; padding: 0 .5em;
  border-radius: var(--pill);
  background: none; color: var(--color-muted-3);
  font-family: 'UnDotum', 'IshiiGothic R', var(--rd-gothic, var(--font-body));
  font-size: var(--fs-ui); line-height: 1;
  transition: background-color .15s ease, color .15s ease;
}
.langsw button:hover { color: var(--color-text); }
.langsw button[aria-pressed='true'] { background: var(--color-bg-alt); color: var(--color-text); }
/* 넓은 화면: 오른쪽 아래에 띄운다 (블로그의 國漢文混用 단추 자리) */
@media (min-width: 600px) {
  .langsw {
    position: fixed;
    right: max(1.25rem, env(safe-area-inset-right));
    bottom: max(1.25rem, env(safe-area-inset-bottom));
  }
}
@media (max-width: 599.98px) {
  .langsw { height: 1.8rem; margin-left: 2px; }
  .langsw button { min-width: 1.7rem; font-size: .78rem; padding: 0 .4em; }
}

html[lang='ja'] :is(.gloss, .ex-g, .note):not(.is-ko),
html[lang='ja'] .etym {
  font-family: var(--font-latin), "IshiiMincho Old R", 'Zen Old Mincho', 'Shippori Mincho B1', var(--font-body);
  word-break: normal;
  line-break: strict;
}
html[lang='ja'] :is(.gloss, .ex-g, .note):not(.is-ko) .hj,
html[lang='ja'] .etym .hj { font-family: inherit; }
html[lang='ja'] .results__g { word-break: normal; }
.is-ko { color: var(--color-muted-3); }
.mark--tight { margin-right: 0; }
.opn { margin-left: -.4em; }
.nw { white-space: nowrap; }


/* ==================================================================
   좁은 화면(한 단): 찾기 칸과 쪽 막대가 주인이 되게
   · 위: 사전 고르개는 짧은 이름표로 줄이고, 찾기 칸을 누르면 이름표가 접혀 찾기 칸이 줄 전체를 쓴다.
   · 아래: ‹ › 단추는 감추고(밀어서 넘긴다) 쪽 번호 — 막대 — 한/日 순. 막대가 남는 자리를 다 쓴다.
   · 위아래 모두 지면 너비 안에 든다.
   ================================================================== */

.dictpick { position: relative; display: flex; flex: 0 1 auto; min-width: 0; }
.dictpick__label { display: none; }

:root[data-cols='1'] .dictpick {
  flex: 0 0 auto;
  max-width: 6.5rem;
  overflow: hidden;
  transition: max-width .22s ease, opacity .18s ease, margin .22s ease;
}
:root[data-cols='1'] .dictpick__label {
  display: block;
  height: 1.9rem; line-height: 1.9rem;
  padding: 0 1.5em 0 .8em;
  border-radius: var(--pill);
  background: var(--color-bg-alt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238a857b' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right .65em center / 9px 6px;
  font-family: var(--font-latin), serif;
  font-size: .8rem; color: var(--color-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
:root[data-cols='1'] .dictpick #dictSel {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
}
:root[data-cols='1'] .top__in:has(#q:focus) .dictpick {
  max-width: 0; opacity: 0; margin-right: -6px;
}

:root[data-cols='1'] .statusbar {
  left: calc(50% - var(--pw) / 2); right: auto; width: var(--pw);
  padding-left: 0; padding-right: 0;
  gap: 10px;
}
:root[data-cols='1'] .pager { display: none; }
:root[data-cols='1'] .statusbar__folio { min-width: 0; }
:root[data-cols='1'] .slider { flex: 1 1 auto; width: auto; min-width: 0; }
:root[data-cols='1'] .langsw { position: static; height: 1.8rem; padding: 2px; margin: 0; }
:root[data-cols='1'] .langsw button[aria-pressed='false'] { display: none; }
:root[data-cols='1'] .langsw button { min-width: 1.75rem; background: none; }

@media (prefers-reduced-motion: reduce) {
  :root[data-cols='1'] .dictpick { transition: none; }
}