@charset "utf-8";
/* 용어사전 시안 3 — 첫 화면(무대) 서식.
   목록 화면에서 시안 3 를 골랐을 때만 읽힙니다.
   원본 : _시안3/intro3.template.html 의 <style> 블록 */

/* ============================================================
   용어사전 시안 3 — 밝은 판
   ------------------------------------------------------------
   짜임새도 모션도 시안 2 그대로입니다. 색만 바꿉니다.
     · 바탕   : 미색(#f2f4f7) — 다음사전(dic.daum.net)의 바탕값을 그대로 썼습니다.
     · 검색창 : 흰 둥근 판 + 얕은 그림자. 손을 얹으면 그림자가 진해지고,
                글을 쓰면 더 깊어집니다(다음사전과 같은 세 단계).
     · 카드   : 남색 면 대신 흰 면 + 그림자. 띠 카드도, 목록 카드도 같습니다.
     · 포인트 : 퀵바의 하늘색(#689ee5).

   하늘색은 면으로 쓸 때와 글씨로 쓸 때가 다릅니다.
   #689ee5 위에 흰 글씨를 올리면 대비가 2.8:1 밖에 안 나와 읽힐 수 없어서,
   면에는 진한 남색 글씨(5.1:1)를 올리고, 글씨로 쓸 때는 한 단계 진한
   하늘색(#2f6ec4, 4.6:1)을 따로 둡니다. 다음사전도 같은 식으로 두 값을
   나눠 쓰고 있습니다(면 #5B92FE / 글씨 #4881F7).

   아래 규칙은 전부 .s3-page · .s3-list 안에서만 듣습니다.
   시안 1·시안 2·상세 화면은 한 줄도 바뀌지 않습니다.
   ============================================================ */

body.s3-page{margin:0; background:#fff;
  font-family:var(--kr); color:var(--text); word-break:keep-all; -webkit-font-smoothing:antialiased;

  --s3-bg:#f2f4f7;              /* 바탕 미색 */
  --s3-point:#689ee5;           /* 포인트 — 면 */
  --s3-point-ink:#11213c;       /* 포인트 면 위의 글씨 */
  --s3-point-soft:#7fb0ea;      /* 포인트 면 — 손 얼음 */
  --s3-point-text:#2f6ec4;      /* 포인트 — 글씨 */
  --s3-point-12:rgba(104,158,229,.12);
  --s3-sh:0 2px 11px rgba(0,0,0,.05);
  --s3-sh-on:0 8px 24px rgba(0,0,0,.10);}

/* ── 머리글 ─────────────────────────────
   시안 2 는 어두운 첫 화면 위라 바탕을 지울 수 있었습니다.
   여기는 밝은 바탕이라 흰 로고·흰 메뉴가 사라집니다.
   그래서 처음부터 끝까지 본사이트 그대로 남색 머리글을 둡니다. */
.header-wrap .header-top-wrap{background-color:#1e2a4d !important; border-bottom:0 !important;}

/* ── 첫 화면 (한 화면 꽉) ─────────────────────────────────
   무대(.s3-stage)는 '첫 화면 한 장 + 붙잡혀 있는 동안 내려갈 거리' 만큼
   높습니다. 그 안에서 첫 화면이 화면 맨 위에 붙어 있으므로, 내려가는
   동안에도 제목과 검색창은 제자리에 그대로 남습니다.
   svh 는 주소창이 보일 때의 화면 높이입니다. dvh 를 쓰면 주소창이 접힐
   때마다 붙잡혀 있는 첫 화면의 키가 바뀌어 화면이 출렁입니다. */
.s3-stage{position:relative; height:180vh; height:180svh;}
.s3{position:sticky; top:0; height:100vh; height:100svh;
  display:flex; flex-direction:column;
  background:var(--s3-bg);}

/* 가운데 — 제목과 검색창만 */
.s3-mid{flex:1; min-height:0;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding:65px 24px 0;   /* 머리글 높이만큼 내려 옵니다 */
  text-align:center;}
.s3-mid h1{margin:0; font-family:var(--kr-b); font-size:44px; line-height:1.3;
  letter-spacing:-1.4px; color:var(--navy);}
.s3-mid .s3-sub{margin:14px 0 0; font-family:var(--kr-l); font-size:15.5px; color:var(--muted);
  letter-spacing:-0.2px;}

/* 검색창 — 다음사전 방식.
   테두리 선 없이 그림자로만 띄우고, 손·입력에 따라 그림자가 세 단계로 깊어집니다. */
.s3-search{position:relative; width:100%; max-width:660px; margin:40px 0 0;}
/* 돋보기가 입력창 흰 바탕에 덮이지 않게 쌓임 순서를 잡습니다.
   본사이트 web.css 가 input 에 position:relative 를 걸어 두어서, 그냥 두면
   나중에 그려지는 입력창이 먼저 그려진 아이콘을 가립니다(둘 다 z-index 없음). */
.s3-search .ico{position:absolute; left:25px; top:0; height:66px; width:24px; z-index:2;
  display:flex; align-items:center; pointer-events:none;}
.s3-search .ico svg{width:24px; height:24px; stroke:rgba(0,0,0,.32); transition:stroke .15s;}
.s3-search:focus-within .ico svg{stroke:var(--s3-point-text);}
.s3-search input{position:relative; z-index:1;
  width:100%; height:66px; border:0; border-radius:999px; background:#fff;
  padding:0 58px 0 64px; font-family:var(--kr); font-size:17px; color:var(--text);
  box-shadow:var(--s3-sh); outline:0; transition:box-shadow .3s;}
.s3-search input::placeholder{color:rgba(0,0,0,.32);}
.s3-search:hover input{box-shadow:0 1px 6px rgba(0,0,0,.16);}
.s3-search input:focus{box-shadow:0 4px 32px rgba(0,0,0,.16);}
/* 지우기 단추 — 목록 스크립트가 sbox 에 has-value 를 붙였을 때만 보입니다. */
.s3-search .clear{position:absolute; right:22px; top:20px; z-index:2;
  width:26px; height:26px; border:0; border-radius:50%; display:none;
  background:rgba(0,0,0,.05); color:rgba(0,0,0,.44); font-size:13px; line-height:26px; cursor:pointer;}
.s3-search .clear:hover{background:rgba(0,0,0,.10);}
.s3-search.has-value .clear{display:block;}

/* 첫 화면의 예시 말 — 목록 스크립트가 찾는 이름(.search-hint)을 함께 씁니다. */
.s3 .search-hint{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px;
  margin:22px 0 0;}
.s3 .search-hint .label{font-family:var(--kr-l); font-size:13px; color:var(--faint); margin-right:4px;}
.s3 .search-hint .chip{border:0; background:#fff; color:var(--text-2);
  border-radius:999px; padding:8px 16px; font-family:var(--kr); font-size:13.5px;
  box-shadow:var(--s3-sh); cursor:pointer; transition:.15s;}
.s3 .search-hint .chip:hover{color:var(--s3-point-text); box-shadow:0 1px 6px rgba(0,0,0,.16);}

/* ── 아래로 내려가는 안내 ─────────────────── */
/* 안내 단추와 띠는 한 묶음으로 첫 화면 바닥에 붙습니다. 휴대폰에서는
   이 묶음만 흐름에서 빼내 바닥에 띄우고, 제목과 검색창은 화면 한가운데에
   놓습니다(아래 '손안에 들어오는 폭'). PC 는 지금 그대로입니다. */
.s3-bottom{flex:0 0 auto;}
.s3-down{flex:0 0 auto; padding:0 0 20px; text-align:center;}
.s3-down button{border:0; background:transparent; cursor:pointer; padding:6px 10px;
  font-family:var(--kr-l); font-size:12.5px; color:var(--muted); letter-spacing:-0.2px;
  transition:color .15s;}
.s3-down button:hover{color:var(--s3-point-text);}
.s3-down .arw{display:block; margin:4px auto 0; width:16px; height:16px;
  animation:s3-bob 1.9s ease-in-out infinite;}
@keyframes s3-bob{0%,100%{transform:translateY(0);} 50%{transform:translateY(5px);}}

/* ── 아래쪽 흐르는 띠 ──────────────────────
   오른쪽에서 왼쪽으로, 아주 천천히 지나갑니다(한 바퀴 2분·2분 45초).
   같은 묶음을 두 번 이어 붙이고 정확히 절반만 밀기 때문에 이음매가 없습니다.
   손을 얹으면 멈춥니다. */
/* overflow:hidden 은 보기용이 아니라 폭 때문입니다. 띠는 같은 묶음을 두 번
   이어 붙여 12,000px 쯤 됩니다. 가려 두지 않으면 그 폭이 문서 폭이 되어
   화면이 옆으로 밀립니다(손가락으로 쓸면 흰 여백이 끌려 나옵니다). */
/* ── 띠와 목록 머리를 같은 자리에 겹칩니다 ─────────────────
   격자 한 칸에 둘을 포개 두어, 띠가 옅어지면 바로 그 자리에서 목록
   머리가 떠오릅니다. 칸 높이는 둘 중 큰 쪽에 맞춰지므로, 바꿔 끼우는
   동안 위쪽 제목과 검색창이 밀리지 않습니다. */
.s3-swap{flex:0 0 auto; display:grid; padding:0 0 40px;}
.s3-swap > *{grid-area:1 / 1; min-width:0;}
/* 띠와 목록 머리는 키가 다릅니다. 칸은 큰 쪽에 맞춰지므로 띠를 그냥 두면
   칸 위쪽에 붙고 그 아래가 빈 자리로 남습니다. 띠는 칸 바닥에 붙입니다. */
.s3-flow{align-self:end; opacity:1; visibility:visible; transition:opacity .9s ease, visibility 0s;}
/* 목록 머리는 옅어지기만 하는 것이 아니라 22px 아래에서 위로 떠오릅니다.
   첫 화면에 들어올 때 제목·검색창이 쓰는 움직임(s3-rise)과 같은 거리라,
   한 화면 안에서 결이 어긋나지 않습니다. 격자 한 칸에 포개져 있어
   옮겨 놓아도 옆 것들의 자리는 건드리지 않습니다. */
.s3-peek{opacity:0; visibility:hidden; transform:translateY(22px);
  transition:opacity .9s ease, transform .9s ease, visibility 0s linear .9s;}
.s3-swap.swapped .s3-flow{opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .9s ease, visibility 0s linear .9s;}
.s3-swap.swapped .s3-peek{opacity:1; visibility:visible; transform:none;
  transition:opacity .9s ease, transform .9s ease, visibility 0s;}
/* 다 옅어진 뒤에 띠를 멈춥니다. 옅어지는 중에 멈추면 얼어붙은 것처럼 보입니다. */
.s3-swap.rest .s3-track{animation-play-state:paused;}
/* 목록 머리 자리에는 첫 화면 바탕이 그대로 비쳐야 합니다. */
.glossary.s3-list.s3-peek{background:transparent; padding:0;}
.glossary.s3-list.s3-peek .below-top{padding-top:0;}

.s3-flow{position:relative; overflow:hidden;
   -webkit-mask-image:linear-gradient(90deg,
   transparent 0, #000 9%, #000 91%, transparent 100%);
   mask-image:linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);}
.s3-track{display:flex; gap:12px; width:max-content; will-change:transform;
  animation:s3-slide 120s linear infinite;}
.s3-track + .s3-track{margin-top:12px; animation-duration:165s;}
.s3-flow:hover .s3-track{animation-play-state:paused;}
@keyframes s3-slide{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* 띠 카드 — 흰 면 + 그림자. 이름표 정도로만 둡니다. */
.s3-card{flex:0 0 auto; max-width:330px; box-sizing:border-box; text-decoration:none;
  background:#fff; border:0; border-radius:12px; padding:13px 18px 14px;
  box-shadow:var(--s3-sh); transition:.18s;}
.s3-card:hover{box-shadow:var(--s3-sh-on); transform:translateY(-2px);}
.s3-card .t{margin:0; display:flex; align-items:center; gap:9px;
  white-space:nowrap; overflow:hidden;}
.s3-card .k{flex:0 0 auto; font-family:var(--kr-l); font-size:11px; color:var(--s3-point-text);
  background:var(--s3-point-12); border-radius:999px; padding:3px 9px;}
.s3-card .n{font-family:var(--kr-b); font-size:15.5px; color:var(--navy); letter-spacing:-0.4px;
  overflow:hidden; text-overflow:ellipsis;}
.s3-card .e{margin:4px 0 0; font-family:var(--en); font-size:11.5px; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

/* ── 첫 화면 아래 : 시안 1 의 본문 ──────────
   목록 화면에서 사진 배너만 걷어내고 그대로 가져옵니다.
   바탕도 첫 화면과 같은 미색으로 두어 한 장으로 읽히게 합니다.
   흰색은 카드·단추·안내판처럼 '집어야 하는 것' 에만 씁니다.
   그러면 흰 면 하나하나가 카드로 읽혀, 목록이 저절로 정돈됩니다. */
.glossary.s3-list{position:relative; background:var(--s3-bg);}
.glossary.s3-list .below-top{padding-top:80px;}  /* 무대를 걷어낼 때를 위해 남겨 둡니다 */
/* 무대가 끝나면 첫 화면이 올라가고 그 아래로 카드가 이어집니다.
   붙잡혀 있던 분류 단추 줄과 맞닿지 않도록 숨 쉴 자리를 둡니다. */
.glossary.s3-list > main.wrap{padding-top:30px;}

/* 분류·초성 단추 — 평상 상태는 시안 1 그대로(미색 위의 흰 알약),
   고른 단추만 포인트 면으로 세웁니다. */
.glossary.s3-list .fbtn.on,
.glossary.s3-list .ibtn.on{background:var(--s3-point); border-color:var(--s3-point);
  color:var(--s3-point-ink);}
.glossary.s3-list .fbtn.on .n{color:rgba(17,33,60,.55);}
.glossary.s3-list .fbtn:hover,
.glossary.s3-list .ibtn:hover{border-color:var(--s3-point); color:var(--s3-point-text);}
/* 해당 용어가 없는 단추(ㄹ·ㅁ·A~Z)는 눌러도 아무 일이 없습니다.
   위 호버 규칙이 기본 시트의 .ibtn.off 보다 세서, 손을 올리면
   눌릴 것처럼 켜지던 것을 여기서 되돌려 놓습니다. */
.glossary.s3-list .fbtn.off,
.glossary.s3-list .ibtn.off,
.glossary.s3-list .fbtn.off:hover,
.glossary.s3-list .ibtn.off:hover{color:#c3c9d4; border-color:#e3e7ee; cursor:default;}
.glossary.s3-list .fbtn.on:hover,
.glossary.s3-list .ibtn.on:hover{color:var(--s3-point-ink);}

/* 카드 — 남색 면을 흰 면 + 그림자로 바꿉니다.
   면이 바뀌었으니 안에 들어 있는 글자색도 모두 되돌려야 합니다.
   읽힐 차례(이름 → 풀이 → 영문·비슷한 말)는 그대로 두었습니다. */
.glossary.s3-list .card{background:#fff; box-shadow:var(--s3-sh);}
.glossary.s3-list .card:hover{background:#fff; box-shadow:var(--s3-sh-on); transform:translateY(-2px);}
.glossary.s3-list .card .cat{color:var(--s3-point-text); background:var(--s3-point-12);}
.glossary.s3-list .card h3{color:var(--navy);}
.glossary.s3-list .card .en{color:var(--muted);}
.glossary.s3-list .card .sum{color:var(--text-2);}
.glossary.s3-list .card .also{color:var(--muted);}
.glossary.s3-list .card .thumb{background:rgba(30,42,77,.06);}   /* 그림 자리(아직 비움) */

/* 더 보기 — 목록의 주역할이라 포인트 색으로 옷을 갈아입힙니다. */
.glossary.s3-list .btn-more{border-color:var(--s3-point); color:var(--s3-point-text);}
.glossary.s3-list .btn-more:hover{background:var(--s3-point); color:var(--s3-point-ink);}

/* 맺음 두 덩이 — 미색 바탕 위에서는 원래의 엷은 회색 면(#f5f7fa)이
   바탕과 구별되지 않습니다. 카드와 같은 흰 면으로 바꿉니다. */
.glossary.s3-list .notice{background:#fff; box-shadow:var(--s3-sh);}
.glossary.s3-list .cta{background:#fff; border-color:transparent; box-shadow:var(--s3-sh);}
.glossary.s3-list .cta .go{background:var(--s3-point); color:var(--s3-point-ink);}
.glossary.s3-list .cta .go:hover{background:var(--s3-point-soft); color:var(--s3-point-ink);}

/* 맨 끝 덩이(.cta)의 아래 여백 90px 은 본문 밖으로 빠져나가
   몸통 바탕색(흰색)을 드러냅니다. 푸터 바로 위에 흰 띠 한 줄로
   나타나므로, 여백을 본문 안으로 옮겨 담습니다. */
.glossary.s3-list .cta{margin-bottom:0;}
.glossary.s3-list{padding-bottom:90px;}

/* ── 들어올 때 한 번 (시안 2 와 같은 모션) ────── */
.s3-mid h1{animation:s3-rise .72s cubic-bezier(.22,.7,.25,1) .08s backwards;}
.s3-mid .s3-sub{animation:s3-rise .72s cubic-bezier(.22,.7,.25,1) .20s backwards;}
.s3-search{animation:s3-rise .72s cubic-bezier(.22,.7,.25,1) .32s backwards;}
.s3 .search-hint{animation:s3-rise .72s cubic-bezier(.22,.7,.25,1) .46s backwards;}
.s3-down, .s3-swap{animation:s3-fade 1.1s ease .7s backwards;}
@keyframes s3-rise{from{opacity:0; transform:translateY(22px);} to{opacity:1; transform:none;}}
@keyframes s3-fade{from{opacity:0;} to{opacity:1;}}

@media (prefers-reduced-motion: reduce){
  .s3-mid h1, .s3-mid .s3-sub, .s3-search, .s3 .search-hint, .s3-down, .s3-swap{animation:none;}
  .s3-track, .s3-down .arw{animation:none;}
  /* 바꿔 끼우기는 남기되 옅어지는 과정 없이 한 번에 넘깁니다. */
  .s3-flow, .s3-peek, .s3-swap.swapped .s3-flow, .s3-swap.swapped .s3-peek{transition:none;}
  .s3-peek{transform:none;}
}

/* ── 내려가면 띠는 지고, 목록은 떠오릅니다 ────────────────
   흐르는 띠는 첫 화면에서만 제 몫을 합니다. 목록을 읽기 시작한 뒤에도
   눈가에서 계속 움직이면 글에 집중하기 어렵습니다.

   숨기는 일은 전부 아래 스크립트가 합니다. 스크립트가 없거나 '움직임
   최소화' 설정이면 아무것도 숨기지 않습니다 — 숨겨 두고 못 켜서 영영
   안 보이는 쪽으로는 틀리지 않게 한 선택입니다. */
.glossary.s3-list .rv{opacity:0; transform:translateY(16px);
  transition:opacity .6s cubic-bezier(.22,.7,.25,1), transform .6s cubic-bezier(.22,.7,.25,1);}
.glossary.s3-list .rv.on{opacity:1; transform:none;}

/* 덩이째 떠오르므로, 카드가 하나씩 올라오던 시안 1 의 첫 방문 모션은
   여기서만 끕니다. 두 움직임이 겹치면 흐릿하게 번집니다. */
.glossary.s3-list .card.in{animation:none;}

/* 화면이 낮으면 띠를 한 줄로 줄입니다. */
@media (max-height:660px){
  #s3r2{display:none;}
  .s3-mid h1{font-size:34px;}
  .s3-search{margin-top:26px;}
}

/* ── 좁은 화면 ────────────────────────── */
@media (max-width:820px){
  .s3-mid h1{font-size:30px; letter-spacing:-1px;}
  .s3-search{margin-top:30px;}
  .s3-search input{height:58px; font-size:16px; padding-left:56px; padding-right:52px;}
  .s3-search .ico{height:58px; left:22px;}
  .s3-search .clear{top:16px; right:18px;}
  .s3-card{flex-basis:238px; width:238px;}
}
/* ── 휴대폰 껍데기 ────────────────────────────────────────────
   이 사이트는 반응형이 아니라 적응형입니다. 서버가 기기를 보고 PC 머리글
   (.header-wrap)과 휴대폰 머리글(.header) 중 하나만 실어 보냅니다.
   그래서 시안 한 벌로 두 판을 다 굽습니다 — 아래 규칙은 짝이 있는 판에서만
   켜지고, 고칠 곳은 여전히 한 곳으로 남습니다.

   휴대폰 머리글은 55px 입니다(PC 는 65px). 어느 판인지 가르는 데에
   스크립트가 붙이는 표 대신 형제 선택자를 쓴 것은, 글이 처음 그려지는
   순간부터 자리가 맞아야 하기 때문입니다. */
.header ~ .s3-stage .s3-mid{padding-top:55px;}

/* 시안 3 은 밝은 바탕이라 흰 로고·흰 햄버거가 사라집니다.
   mobile.css 에 이미 답이 있습니다 — 맨 위가 아닐 때 붙는 .active 가
   '흰 바탕·검은 로고' 입니다. 아래 스크립트가 그 표를 내내 붙여 둡니다.
   그림 주소를 우리가 새로 적지 않아도 되므로, 운영에 올릴 때와 검수본을
   파일로 열 때의 경로가 갈리지 않습니다.
   PC 판 머리글이 남색인 것과 다른데, 휴대폰 머리글에는 흰 메뉴 글씨가
   없어 어두운 바탕을 깔 이유가 없기 때문입니다. */
body.s3-page .header.active{box-shadow:0 1px 0 rgba(0,0,0,.06);}

/* ── 손안에 들어오는 폭 ───────────────────────────────────────
   640px 아래에서는 아래 목록이 glossary.css 에서 이미 한 줄로 접힙니다.
   여기서는 첫 화면만 그 폭에 맞춰 줄입니다. 제목은 두 줄로 나뉘어도
   읽히도록 어절 단위로만 끊기게 두었습니다(word-break:keep-all). */
@media (max-width:560px){
  .s3-mid{padding-left:18px; padding-right:18px;}
  .s3-mid h1{font-size:25px; letter-spacing:-0.9px;}
  .s3-mid .s3-sub{margin-top:10px; font-size:13.5px;}
  .s3-search{margin-top:24px;}
  .s3-search input{height:52px; font-size:15px; padding-left:46px; padding-right:42px;}
  .s3-search .ico{height:52px; left:17px; width:20px;}
  .s3-search .ico svg{width:20px; height:20px;}
  .s3-search .clear{top:13px; right:14px; width:24px; height:24px; line-height:24px;}
  /* 예시 말 — '이렇게 찾아보세요' 는 한 줄을 통째로 쓰게 두어, 뒤의
     단추들이 이름표에 끼어 어중간하게 잘리지 않게 합니다. */
  .s3 .search-hint{gap:6px; margin-top:16px;}
  .s3 .search-hint .label{width:100%; margin:0;}
  .s3 .search-hint .chip{padding:6px 12px; font-size:12.5px;}
  .s3-down{padding-bottom:14px;}
  .s3-down button{font-size:12px;}
  /* 띠 — 카드를 줄여 화면 안에 두 장 가까이 들어오게 합니다.
     한 장이 화면을 다 덮으면 '흘러간다' 는 느낌이 사라집니다. */
  .s3-card{flex-basis:186px; width:186px; padding:10px 13px 11px;}
  .s3-swap{padding-bottom:18px;}
  /* 휴대폰은 화면이 짧아 PC 와 같은 80% 를 붙잡아 두면 카드까지 두 화면
     가까이 내려가야 합니다. 붙잡는 거리를 60% 로 줄입니다. */
  .s3-stage{height:160vh; height:160svh;}
  /* ── 제목과 검색창을 화면 한가운데로 ─────────────────────
     안내 단추와 띠를 흐름에서 빼 화면 바닥에 붙입니다. 그러면 제목과
     검색창이 쓰는 자리가 화면 전체가 되어 한가운데에 놓입니다.
     아래 여백 130px 은 바닥에 붙은 묶음과 겹치지 않을 만큼만 비워 둔
     것입니다(키가 아주 낮은 화면은 맨 아래에서 다시 흐름에 맡깁니다).
     퀵바에 덮이던 단추 줄은 아래 '손안에서 보는 목록' 에서 함께
     다룹니다 — 이제 한 줄로 옆으로 밀리므로 오른쪽 끝만 비우면 됩니다. */
  .s3-bottom{position:absolute; left:0; right:0; bottom:0;}
  .s3-mid{padding-bottom:130px;}
  /* 첫 화면 안으로 옮겨 온 가로줄은 화면 맨 아래에 닿아 구실이 없습니다. */
  .s3-peek .filters-sep{display:none;}
  .glossary.s3-list .below-top{padding-top:46px;}  /* 무대를 걷어낼 때를 위해 남겨 둡니다 */
}

/* ── 손안에서 보는 목록 ───────────────────────────────────────
   분류와 초성 단추를 가운데로 모아 여러 줄로 쌓으면, 그것만으로 한 화면의
   3분의 1을 먹습니다. 한 줄로 두고 옆으로 미는 편이 훨씬 덜 먹고, 지금
   무엇을 고를 수 있는지도 한눈에 들어옵니다.
   첫 화면 안에 붙잡혀 있는 머리(.s3-peek)와 아래 목록에 똑같이 듭니다.
   오른쪽 여백 62px 은 퀵바 자리입니다. 끝까지 밀어도 마지막 단추가
   퀵바 뒤로 들어가지 않습니다. */
@media (max-width:640px){
  .glossary.s3-list .filter-row,
  .glossary.s3-list .initials{flex-wrap:nowrap; justify-content:flex-start;
    overflow-x:auto; overflow-y:hidden; padding-right:62px;
    scrollbar-width:none; -ms-overflow-style:none;}
  .glossary.s3-list .filter-row::-webkit-scrollbar,
  .glossary.s3-list .initials::-webkit-scrollbar{display:none;}
  .glossary.s3-list .fbtn,
  .glossary.s3-list .ibtn{flex:0 0 auto;}

  /* 카드 — 한 줄에 한 장씩 놓이므로 글이 길면 그대로 다 읽어야 합니다.
     영문 이름은 상세 화면에 그대로 있으니 목록에서는 덜어 내고,
     설명은 세 줄에서 두 줄로 줄입니다. */
  .glossary.s3-list .card .en{display:none;}
  .glossary.s3-list .card .sum{-webkit-line-clamp:2;}
}

/* 키가 낮은 화면(손전화를 가로로 눕힌 때, 창을 반만 쓰는 때)에서는
   한가운데로 내리면 제목이 바닥에 붙은 묶음과 맞닿습니다. 그때만 흐름에
   되돌립니다. 경계 660px 은 눈대중이 아니라 계산입니다 — 바닥 묶음이
   245px, 제목부터 예시 단추까지가 228px, 머리글이 55px 입니다. 남는 틈은
   (아래 여백 - (55 + 228 + 245 x 2 - 화면 높이)) / 2 이므로, 아래 여백
   130px 으로 버틸 수 있는 가장 낮은 화면은 643px 입니다(실측: 640px 에서
   1px 맞닿음, 661px 에서 9px 남음). 660px 부터 흐름에 맡깁니다. */
@media (max-width:560px) and (max-height:660px){
  .s3-bottom{position:static;}
  .s3-mid{padding-bottom:0;}
}