@charset "utf-8";
/* ============================================================
   센텀구강내과 용어사전 (glossary)
   톤앤매너 : 기존 센텀구강내과 web.css 에서 그대로 가져온 값만 사용
     - 서체   : NotoB / NotoM / NotoR / NotoDL (본사이트 로컬 @font-face 와 동일)
                stolzl (Typekit) 은 영문·숫자에만
     - 색      : #1e2a4d 네이비 — 기존 PC 헤더(.header-wrap 활성 배경)와 같은 값입니다.
                제목·활성 필터·버튼을 이 한 가지 색으로만 강조합니다.
                #689ee5 브랜드 블루는 검색창 포커스와 본문 링크에만 남깁니다.
   보조 회색은 흰 바탕에서 읽히는 명도(대비 4.5:1 이상)까지 올려 두었습니다.
   ============================================================ */

/* ---- 서체 ----
   본사이트 web.css 가 NotoB/NotoM/NotoR/NotoL/NotoDL 을 이미 선언하므로
   여기서는 다시 선언하지 않는다. 영문·숫자용 stolzl 은 Typekit 에서 온다. */

:root{
  --navy:#1e2a4d;        /* 포인트 — 기존 PC 헤더와 같은 값 */
  --navy-2:#2c3a63;
  --blue:#689ee5;        /* 검색창 포커스·본문 링크 전용 */
  --blue-weak:#eef4fc;
  --text:#2f333c;
  --text-2:#5a6070;
  --muted:#767c8a;       /* 흰 바탕 대비 4.6:1 */
  --faint:#949aa8;       /* 영문 보조줄 — 예전 #bebebe 는 읽히지 않았습니다 */
  --line:#e6e9ef;
  --line-2:#dde2eb;
  --bg:#ffffff;
  --bg-sunken:#f5f7fa;
  --card:#eff2f8;        /* 카드 바탕 — 흰 페이지에서 덩어리가 보이게 */
  --card-on:#e5ebf6;
  --radius:12px;
  --radius-sm:8px;
  --kr:'NotoR', 'Noto Sans KR', sans-serif;
  --kr-m:'NotoM', 'Noto Sans KR', sans-serif;
  --kr-b:'NotoB', 'Noto Sans KR', sans-serif;
  --kr-l:'NotoDL', 'Noto Sans KR', sans-serif;
  --en:'stolzl', 'NotoR', sans-serif;
  --w:1280px;            /* 본사이트 컨테이너 폭과 동일 */
}

/* reset.css + web.css 다음에 읽힌다.
   전역 선택자는 쓰지 않고 .glossary 안으로만 적용해 헤더·푸터를 건드리지 않는다. */
.glossary{font-family:var(--kr); color:var(--text); background:var(--bg);
  font-size:16px; line-height:1.75; word-break:keep-all; -webkit-font-smoothing:antialiased;}
.glossary a{color:inherit; text-decoration:none;}
.glossary img{max-width:100%;}
.glossary button{font-family:inherit; cursor:pointer;}
.glossary .wrap{max-width:var(--w); margin:0 auto; padding:0 24px;}

/* 푸터 위 '장비 소개' 슬라이드(.equip-wrap)는 용어사전에서만 내립니다.
   화면 폭의 35%를 차지하는 홍보 덩어리라, 용어를 찾다가 내려온 사람에게는
   본문과 푸터 사이를 가로막는 벽이 됩니다.
   전역 선택자를 쓰지 않으려고 '용어사전 본문 뒤에 오는 것' 으로만 집습니다.
   이 파일은 용어사전 화면에서만 읽히므로 다른 페이지의 장비 띠는 그대로입니다.
   (휴대폰 푸터에는 원래부터 주석 처리되어 있어 해당 사항이 없습니다.) */
.glossary ~ .equip-wrap{display:none;}
/* 본사이트 퀵바는 화면 오른쪽에 고정(right:20px, 폭 90px)되어 본문 위를 덮는다.
   덮이는 만큼 본문 좌·우를 함께 들여서, 배너 검색창과 본문의 가운데가
   어긋나지 않게 한다.
   덮이는 양은 화면이 1280px(본문 최대 폭) 아래로 내려가면 더는 늘지 않는다.
   본문이 화면 폭을 그대로 쓰기 시작해, 퀵바와 겹치는 길이가 110px 로 고정되기
   때문이다. 그래서 들여쓰는 값도 134px(110 + 여유 24)에서 멈춰 세운다.
   이 마개가 없으면 1100px 화면에서 좌·우가 각각 250px 넘게 들어가
   카드가 190px 대로 눌린다.
   넓은 화면(약 1548px 이상)에서는 겹치지 않으므로 기본 24px 로 돌아간다. */
@media (min-width:1025px){
  .glossary .wrap{padding-left :calc(24px + clamp(0px, 774px - 50vw, 134px));
                  padding-right:calc(24px + clamp(0px, 774px - 50vw, 134px));}
}
/* 641~1024px 은 PC 판이 좁은 창에 뜬 경우다(적응형이라 화면 폭과 무관하게
   PC 판이 내려온다). 이 구간에는 위 들여쓰기가 걸리지 않아 퀵바가 오른쪽
   카드를 그대로 덮는다. 덮이는 110px 만 오른쪽에 돌려준다.
   왼쪽은 건드리지 않는다 — 좁은 화면에서 양쪽을 다 들이면 카드가 또 눌린다. */
@media (max-width:1024px) and (min-width:641px){
  .glossary:not(.is-m) .wrap{padding-right:134px;}
}

/* ── 상단 배너 ──────────────────────────────────────────────
      web.css 의 .community-header-wrap 과 '같은 값'을 씁니다.
        높이 400px · padding-top 20.83% · 오버레이 rgba(0,0,0,.3)
      제목 크기·검색창 크기는 상세 페이지 기준으로 세 화면을 통일했습니다
      (원장님 확인 2026-09-14). 영문 한 줄(SEOUL CENTUM DENTAL CLINIC)은
      마크업에서 아예 뺐습니다.
      ⚠ 높이와 오버레이는 임의로 바꾸지 마십시오. 기존 서브페이지와
      나란히 놓았을 때 배너 크기가 달라 보입니다.
      하위 메뉴줄이 없는 자리를 검색창이 대신 씁니다. */
.glossary-top-wrap{width:100%; height:400px; padding-top:20.83%;
  background-size:cover; background-repeat:no-repeat; background-position:center center;
  background-image:url('/images/web/community/community_top_back.jpg');}
.glossary-top-wrap .content-wrap{width:100%; height:100%; display:flex;
  justify-content:center; align-items:center; flex-direction:column;
  background-color:rgba(0,0,0,.3);
  /* 헤더(position:fixed · 65px)가 배너 위를 덮습니다. 기존 서브페이지는
     배너 안 내용이 짧아 부딪히지 않지만, 여기는 검색창까지 들어가 내용이
     길어 제목 첫 줄이 헤더에 가립니다. 배너 높이(400px)는 그대로 두고
     내용만 헤더 아래 보이는 구간(335px)의 한가운데로 내립니다.
     전역 box-sizing:border-box 라 이 padding 이 높이를 늘리지 않습니다. */
  padding-top:65px;}
.glossary-top-wrap .content-wrap h1,
.glossary-top-wrap .content-wrap .h1line{font-size:40px; font-family:var(--kr-b); color:#fff;
  text-align:center; letter-spacing:-1px; line-height:1.25;}
.glossary-top-wrap .content-wrap .text3{font-size:15px; font-family:var(--kr-l);
  color:rgba(255,255,255,.78); text-align:center; margin-top:18px; line-height:1.8;}



/* ── 배너 안 대형 검색창 ──────────────────────────────────
      사진 위에 올라가므로 흰 판으로 띄운다.
      포인트 블루는 '포커스 링' 한 곳에만 나온다. */
.glossary-top-wrap .search-zone{width:100%; max-width:720px; padding:0 24px; margin:26px auto 0;}
.glossary-top-wrap .gl-search{height:58px; background:#fff; border-color:#fff;
  box-shadow:0 10px 34px rgba(0,0,0,.22);}
.glossary-top-wrap .gl-search:focus-within{border-color:#fff;
  box-shadow:0 10px 34px rgba(0,0,0,.22), 0 0 0 4px rgba(104,158,229,.55);}
.glossary-top-wrap .search-hint{margin-top:18px;}
.glossary-top-wrap .search-hint .label{color:rgba(255,255,255,.7);}
.glossary-top-wrap .chip{background:transparent; border-color:rgba(255,255,255,.45); color:#fff;}
.glossary-top-wrap .chip:hover{background:#fff; border-color:#fff; color:var(--navy);}

/* 배너 바로 아래 : 결과 줄 + 빵부스러기 */
.glossary .below-top{padding:22px 0 0;}
.glossary .below-top .crumb{padding:0;}
.glossary .below-top .result-line{margin:10px 0 0; text-align:left;}

@media (max-width:900px){
  .glossary-top-wrap{height:400px;}
  .glossary-top-wrap .content-wrap h1,
  .glossary-top-wrap .content-wrap .h1line{font-size:30px;}
  .glossary-top-wrap .search-zone{margin-top:22px;}
}

/* ===== 상세·404 : 사진 배너를 쓰지 않습니다 =====
      목록에서 용어를 눌러 들어온 사람은 '그 용어의 설명'을 보러 온 것입니다.
      400px 짜리 사진 배너가 앞을 막으면 정작 읽을 내용이 한 화면 아래로
      내려갑니다. 배너를 빼고, 고정 헤더(PC 65px)에 가리지 않을 만큼만 비웁니다.
      ⚠ 목록(glossary-top-wrap)의 배너 높이는 그대로입니다. 여기서 바꾼 것은
        상세·404 두 화면뿐입니다. */
.glossary.plain{padding-top:65px;}
.glossary.is-m.plain{padding-top:55px;}   /* 휴대폰 머리는 55px */

/* 배너 자리를 대신하는 얇은 줄 — 빵부스러기와 작은 검색칸만 둡니다. */
.topbar{border-bottom:1px solid var(--line); background:var(--bg-sunken);}
.topbar .wrap{display:flex; align-items:center; gap:20px; min-height:58px;}
.topbar .crumb{padding:0; flex:1 1 auto; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.gl-mini{flex:0 0 auto; width:250px; height:38px; border-radius:999px; border-width:1px;}
.gl-mini .ico{width:38px; height:36px;}
.gl-mini .ico svg{width:16px; height:16px;}
.gl-mini input{height:36px; font-size:14px; padding-right:14px;}
@media (max-width:640px){
  .topbar .wrap{flex-wrap:wrap; gap:0; padding-top:12px; padding-bottom:12px; min-height:0;}
  .topbar .crumb{flex:1 1 100%;}
  .gl-mini{flex:1 1 100%; width:auto; margin-top:10px;}
}

/* ── 빵부스러기 ── */
.crumb{padding:22px 0 0; font-family:var(--kr-l); font-size:13px; color:var(--muted);}
.crumb a:hover{color:var(--navy);}
.crumb span{margin:0 7px; color:var(--faint);}
.crumb strong{font-family:var(--kr); font-weight:normal; color:var(--text-2);}

/* ============================================================
   1. 히어로 + 대형 검색창
   ============================================================ */
.hero{padding:0; text-align:center;}   /* 제목·검색은 배너로 올라갔다 */
.hero h1{margin:0; font-family:var(--kr-b); font-size:40px; line-height:1.3;
  letter-spacing:-1px; color:var(--navy);}
.hero .lead{margin:16px 0 0; font-family:var(--kr-l); font-size:17px; color:var(--text-2);}
.hero .rule{max-width:var(--w); margin:40px auto 0; border-top:1px solid var(--line);}

.search-zone{max-width:860px; margin:0 auto; padding:36px 0 0;}
.gl-search{position:relative; display:flex; align-items:center;
  border:1.5px solid var(--line-2); border-radius:14px; background:#fff;
  transition:border-color .18s, box-shadow .18s;}
.gl-search:focus-within{border-color:var(--blue); box-shadow:0 0 0 4px rgba(104,158,229,.14);}
.gl-search .ico{flex:none; width:60px; height:68px; display:flex; align-items:center; justify-content:center;}
.gl-search .ico svg{width:21px; height:21px; stroke:var(--muted);}
.gl-search:focus-within .ico svg{stroke:var(--blue);}
.gl-search input{flex:1; height:68px; border:0; outline:0; background:transparent;
  font-family:var(--kr); font-size:18px; color:var(--text); padding:0 8px 0 0;}
.gl-search input::placeholder{color:var(--faint); font-family:var(--kr-l);}
.gl-search .clear{flex:none; margin-right:14px; width:26px; height:26px; border:0; border-radius:50%;
  background:var(--line); color:var(--muted); font-size:13px; line-height:26px; display:none;}
.gl-search.has-value .clear{display:block;}

.search-hint{margin:16px 0 0; display:flex; flex-wrap:wrap; gap:8px; justify-content:center; align-items:center;}
.search-hint .label{font-family:var(--kr-l); font-size:13px; color:var(--muted); margin-right:2px;}
.chip{display:inline-block; padding:6px 13px; border:1px solid var(--line-2); border-radius:999px;
  font-family:var(--kr-l); font-size:13px; color:var(--text-2); background:#fff; transition:.15s;}
.chip:hover{border-color:var(--navy); color:var(--navy);}

/* ── 검색 자동완성 목록 ──────────────────────────────────
      입력창 바로 아래에 후보를 띄웁니다. 초성(ㅌㄱㅈ)도 받습니다.
      띄우는 말은 '이 사전에 실린 용어' 입니다 — 포털의 연관검색어처럼
      다른 사람이 친 검색어 통계가 아닙니다(그 기록을 모으지 않습니다).
      감싸는 상자(.gl-search / .s2-search)가 position:relative 라
      그 아래에 붙습니다. */
.gl-sug{position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:30;
  display:none; padding:6px; text-align:left;
  background:#fff; border-radius:14px; box-shadow:0 18px 44px rgba(16,24,44,.24);}
.gl-sug.on{display:block;}
.gl-sug .it{padding:10px 14px 11px; border-radius:10px; cursor:pointer; overflow:hidden;}
.gl-sug .it.on{background:var(--blue-weak);}
.gl-sug .it .k{float:right; margin:2px 0 0 10px; padding:2px 8px; border-radius:999px;
  background:var(--bg-sunken); font-family:var(--kr-l); font-size:11px; color:var(--muted);}
.gl-sug .it .n{display:block; font-family:var(--kr); font-size:15.5px; color:var(--text);
  line-height:1.5; letter-spacing:-0.3px;}
/* 친 글자(초성이면 그 자리 글자)만 진하게 — 왜 걸렸는지가 한눈에 보입니다. */
.gl-sug .it .n b{font-family:var(--kr-b); font-weight:normal; color:var(--navy);}
.gl-sug .it .w{display:block; margin:1px 0 0; font-family:var(--kr-l); font-size:12.5px;
  color:var(--muted); line-height:1.5;}
.gl-sug .it .w b{font-family:var(--kr); font-weight:normal; color:var(--text-2);}
.gl-sug .all{margin:4px 0 0; padding:11px 14px; border-top:1px solid var(--line);
  font-family:var(--kr-l); font-size:13px; color:var(--muted); cursor:pointer;}
.gl-sug .all:hover{color:var(--navy);}
.gl-sug .all b{font-family:var(--kr-m); font-weight:normal; color:var(--navy);}

/* 검색 결과 요약 줄 */
.result-line{margin:34px 0 0; font-family:var(--kr-l); font-size:14px; color:var(--muted); text-align:center;}
.result-line b{font-family:var(--kr-m); color:var(--navy); font-weight:normal;}

/* ============================================================
   2. 필터 (분류 / 초성)
   ============================================================ */
.filters{margin:44px 0 0; padding:0 0 4px;}
.filter-row{display:flex; flex-wrap:wrap; gap:8px; justify-content:center;}
.filter-row + .filter-row{margin-top:12px;}
.fbtn{padding:9px 18px; border:1px solid var(--line-2); border-radius:999px; background:#fff;
  font-family:var(--kr-l); font-size:14px; color:var(--text-2); transition:.15s;}
.fbtn:hover{border-color:var(--faint); color:var(--navy);}
.fbtn.on{background:var(--navy); border-color:var(--navy); color:#fff; font-family:var(--kr-m);}
.fbtn .n{font-family:var(--en); font-size:12px; margin-left:6px; color:var(--faint);}
.fbtn.on .n{color:rgba(255,255,255,.6);}
.fbtn.off{color:var(--faint); border-color:var(--line); cursor:default;}

.initials{margin:12px 0 0; display:flex; flex-wrap:wrap; gap:6px; justify-content:center;}
.ibtn{width:38px; height:38px; border:1px solid var(--line-2); border-radius:50%; background:#fff;
  font-family:var(--kr-l); font-size:14px; color:var(--text-2); transition:.15s;}
.ibtn:hover{border-color:var(--faint); color:var(--navy);}
.ibtn.on{background:var(--navy); border-color:var(--navy); color:#fff; font-family:var(--kr-m);}
.ibtn.off{color:#d8d8d8; border-color:#f4f4f4; cursor:default;}

.filters-sep{max-width:var(--w); margin:40px auto 0; border-top:1px solid var(--line);}

/* ============================================================
   3. 카드 그리드
   ============================================================ */
.grid-head{margin:44px 0 20px; display:flex; align-items:baseline; justify-content:space-between;}
.grid-head h2{margin:0; font-family:var(--kr-b); font-size:22px; color:var(--navy); letter-spacing:-0.5px;}
.grid-head .cnt{font-family:var(--kr-l); font-size:13px; color:var(--muted);}

.cards{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}

/* 카드는 포인트 컬러(#1e2a4d) 면으로 세웁니다.
   흰 페이지 위에 남색 덩어리가 놓이므로 카드 경계가 멀리서도 바로 보입니다.
   대신 글자는 전부 밝은 쪽으로 뒤집어야 합니다. 제목(흰색) → 설명(밝은 회청)
   → 영문·보조(한 단계 어두운 회청) 순으로 명도를 내려, 흰 카드였을 때와
   '무엇부터 읽히는지'의 차례가 같게 맞췄습니다.
   보조 글자색은 남색 바탕 대비 5:1 이상이 나오는 값만 골랐습니다. */
.card{display:flex; flex-direction:column; border:0; border-radius:var(--radius);
  background:var(--navy); padding:24px 22px 26px;
  transition:background-color .18s, box-shadow .18s, transform .18s;}
.card:hover{background:var(--navy-2); box-shadow:0 10px 28px rgba(30,42,77,.28); transform:translateY(-2px);}

/* 일러스트 자리 — 마크업에서는 빼 두었습니다. 그림을 넣기로 하면
   카드 맨 앞에 <span class="thumb"><img …></span> 한 줄만 되살리면 됩니다. */
.card .thumb{width:100%; aspect-ratio:16/9; border-radius:var(--radius-sm); overflow:hidden;
  background:rgba(255,255,255,.10); margin:0 0 16px;}
.card .thumb img{width:100%; height:100%; object-fit:cover;}

.card .cat{display:inline-block; font-family:var(--kr-l); font-size:12px; color:#dbe3f2;
  background:rgba(255,255,255,.13); border:0; border-radius:999px; padding:4px 11px; margin:0 0 12px;
  /* .card 가 flex 세로줄이라 inline-block 이라도 폭이 카드 전체로 늘어납니다.
     그대로 두면 테두리가 입력칸처럼 보입니다. 글자 폭에만 맞춥니다. */
  align-self:flex-start;}
.card h3{margin:0; font-family:var(--kr-b); font-size:18.5px; color:#ffffff;
  letter-spacing:-0.4px; line-height:1.45;}
.card .en{margin:6px 0 0; font-family:var(--en); font-size:12px; color:#9aa8c4; letter-spacing:.2px;
  /* 영문명은 긴 것이 58자까지 있어 한 줄인 카드와 두 줄인 카드가 섞입니다.
     그대로 두면 줄마다 카드 키가 달라져 격자가 어긋나 보이므로,
     늘 두 줄 자리를 잡아 두고 그 안에서 끝냅니다. */
  line-height:1.5; min-height:36px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.card .sum{margin:13px 0 0; font-family:var(--kr); font-size:14px; line-height:1.72; color:#c5cee0;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
/* 제목이 두 줄인 카드가 섞여도 설명 첫 줄의 높이는 같아지게 아래로 붙입니다. */
.card .sum{margin-top:auto; padding-top:13px;}

/* 검색해서 들어왔는데 제목에 그 말이 없을 때만 한 줄 붙습니다(평소엔 없음). */
.card .also{margin:12px 0 0; font-family:var(--kr-l); font-size:12.5px; color:#9aa8c4;}

.more-row{margin:40px 0 0; text-align:center;}
/* 목록에서는 button, 없는 주소 화면에서는 a 로 쓰입니다.
   a 는 기본이 inline 이라 세로 안쪽 여백이 줄 높이에 안 잡혀
   윗 문장 위로 올라탑니다. 그래서 여기서 못박아 둡니다. */
.btn-more{display:inline-block; padding:14px 40px; border:1px solid var(--navy);
  border-radius:999px; background:#fff; line-height:1;
  font-family:var(--kr-m); font-size:15px; color:var(--navy); transition:.15s;}
.btn-more:hover{background:var(--navy); color:#fff;}

/* 결과 없음 */
.empty{padding:80px 0; text-align:center;}
.empty .t{font-family:var(--kr-m); font-size:18px; color:var(--navy);}
.empty .d{margin:10px 0 0; font-family:var(--kr-l); font-size:14px; color:var(--muted);}
.empty .btn-more{margin:24px 0 0;}

/* ============================================================
   4. 전체 목록 (초성별) — 색인용, 기본 접힘
   ============================================================ */
.allterms{margin:70px 0 0; border-top:1px solid var(--line); padding:0;}
.allterms > summary{list-style:none; cursor:pointer; padding:28px 0; display:flex;
  align-items:center; justify-content:space-between;}
.allterms > summary::-webkit-details-marker{display:none;}
.allterms > summary .t{font-family:var(--kr-m); font-size:17px; color:var(--navy);}
.allterms > summary .t span{font-family:var(--kr-l); font-size:13px; color:var(--muted); margin-left:8px;}
.allterms > summary .arw{font-family:var(--en); font-size:12px; color:var(--muted);}
.allterms[open] > summary .arw{transform:rotate(180deg);}
.allterms .body{padding:4px 0 40px;}
.ini-block{padding:18px 0; border-top:1px solid var(--line);}
.ini-block .k{font-family:var(--kr-b); font-size:16px; color:var(--navy); margin:0 0 10px;}
.ini-block ul{margin:0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:8px 20px;}
.ini-block li a{font-family:var(--kr-l); font-size:14.5px; color:var(--text-2); line-height:1.9;}
.ini-block li a:hover{color:var(--navy); text-decoration:underline; text-underline-offset:3px;}

/* ============================================================
   5. 안내 / CTA
   ============================================================ */
.notice{margin:0 0 80px; background:var(--bg-sunken); border-radius:var(--radius); padding:30px 32px;}
.notice .t{font-family:var(--kr-m); font-size:15px; color:var(--navy);}
.notice p{margin:10px 0 0; font-family:var(--kr-l); font-size:13.5px; line-height:1.8; color:var(--text-2);}

.cta{margin:0 0 90px; border:1px solid var(--line); border-radius:var(--radius);
  padding:36px 40px; display:flex; align-items:center; justify-content:space-between; gap:24px;}
.cta .t{font-family:var(--kr-m); font-size:19px; color:var(--navy); letter-spacing:-0.4px;}
.cta .d{margin:8px 0 0; font-family:var(--kr-l); font-size:14px; color:var(--text-2);}
.cta .go{flex:none; padding:14px 30px; border-radius:999px; background:var(--navy); color:#fff;
  font-family:var(--kr-m); font-size:15px;}
.cta .go:hover{background:var(--navy-2);}

/* ============================================================
   6. 상세 페이지
   ============================================================ */
.detail-head{padding:34px 0 30px; border-bottom:1px solid var(--line);}
.detail-head .cat{display:inline-block; font-family:var(--kr-l); font-size:12.5px; color:#fff;
  background:var(--navy); border-radius:999px; padding:5px 13px;}
.detail-head h1{margin:14px 0 0; font-family:var(--kr-b); font-size:36px; line-height:1.35;
  letter-spacing:-1px; color:var(--navy);}
.detail-head .en{margin:8px 0 0; font-family:var(--en); font-size:15px; color:var(--muted); letter-spacing:.3px;}
.detail-head .phrases{margin:20px 0 0; display:flex; flex-wrap:wrap; gap:7px; align-items:center;}
.detail-head .phrases .label{font-family:var(--kr-l); font-size:12.5px; color:var(--muted); margin-right:3px;}
.detail-head .phrases .chip{font-size:12.5px; padding:5px 11px;}

.detail-body{display:grid; grid-template-columns:minmax(0,1fr) 244px; gap:60px; padding:44px 0 0; align-items:start;}

.summary-box{border-left:3px solid var(--navy); background:var(--card);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0; padding:22px 26px; margin:0 0 40px;}
.summary-box .t{font-family:var(--kr-m); font-size:13px; color:var(--navy); margin:0 0 8px; letter-spacing:.3px;}
.summary-box p{margin:0; font-family:var(--kr); font-size:16px; line-height:1.85; color:var(--text);}

.article h2{margin:52px 0 18px; font-family:var(--kr-b); font-size:24px; color:var(--navy);
  letter-spacing:-0.6px; line-height:1.45; padding:0 0 14px; border-bottom:1px solid var(--line);}
.article h2:first-child{margin-top:0;}
/* 목차에서 눌러 건너뛸 때 제목이 고정 머리글 밑에 가려지지 않도록
   미리 자리를 비워 둡니다. 목차가 붙어 있는 자리(top:95px)와 같은 값입니다. */
.article h2[id]{scroll-margin-top:95px;}
.article h3{margin:34px 0 12px; font-family:var(--kr-m); font-size:18px; color:var(--navy);}
.article p{margin:0 0 18px; font-size:16px; line-height:1.9;}
.article ul{margin:0 0 20px; padding:0 0 0 2px; list-style:none;}
.article ul li{position:relative; padding:0 0 0 16px; margin:0 0 9px; line-height:1.85;}
.article ul li::before{content:''; position:absolute; left:2px; top:12px; width:4px; height:4px;
  border-radius:50%; background:var(--faint);}
.article ul li strong{font-family:var(--kr-m); font-weight:normal; color:var(--navy);}
.article a{color:var(--blue); text-decoration:underline; text-underline-offset:3px;}
.article sup{font-family:var(--en); font-size:11px; color:var(--blue); vertical-align:super;}
.article sup a{text-decoration:none;}

/* 표는 min-width 520px 이라 좁은 화면에서 칸보다 넓습니다.
   그 넓이가 바깥으로 새어 나가 페이지를 벌리지 않도록, 표 상자와 본문 칸의
   최소폭을 0 으로 묶어 둡니다. 넘치는 표는 이 상자 안에서만 옆으로 밀립니다. */
.article{min-width:0;}
.tbl-wrap{overflow-x:auto; min-width:0; max-width:100%; margin:0 0 26px;}
.article table{width:100%; border-collapse:collapse; font-size:14.5px; min-width:520px;}
.article table th{font-family:var(--kr-m); font-weight:normal; color:var(--navy); text-align:left;
  background:var(--bg-sunken); padding:13px 16px; border-bottom:1px solid var(--line-2); white-space:nowrap;}
.article table td{padding:14px 16px; border-bottom:1px solid var(--line); line-height:1.7;
  font-family:var(--kr-l); color:var(--text-2); vertical-align:top;}
.article table tr:last-child td{border-bottom:1px solid var(--line-2);}

/* 일러스트 자리 (지금은 숨김, 추후 figure 로 교체) */
.figure-slot{margin:0 0 30px; border:1px dashed var(--line-2); border-radius:var(--radius-sm);
  background:var(--bg-sunken); padding:44px 0; text-align:center;
  font-family:var(--kr-l); font-size:13px; color:var(--faint);}

/* 근거·참고문헌 */
.evidence{margin:56px 0 0; padding:22px 26px; background:var(--bg-sunken); border-radius:var(--radius-sm);}
.evidence .t{font-family:var(--kr-m); font-size:13px; color:var(--navy); margin:0 0 6px;}
.evidence p{margin:0; font-family:var(--kr-l); font-size:13.5px; line-height:1.75; color:var(--text-2);}

.refs{margin:18px 0 0; border:1px solid var(--line); border-radius:var(--radius-sm);}
.refs > summary{list-style:none; cursor:pointer; padding:17px 22px; display:flex;
  align-items:center; justify-content:space-between; font-family:var(--kr-m); font-size:14px; color:var(--navy);}
.refs > summary::-webkit-details-marker{display:none;}
.refs > summary .arw{font-family:var(--en); font-size:11px; color:var(--muted);}
.refs[open] > summary{border-bottom:1px solid var(--line);}
.refs ol{margin:0; padding:18px 24px 20px 40px; list-style:decimal;}
.refs ol li{font-family:var(--kr-l); font-size:13px; line-height:1.85; color:var(--text-2); margin:0 0 9px;}
.refs ol li a{color:var(--muted); text-decoration:none;}

/* 관련 용어 */
.related{margin:56px 0 0;}
.related .t{font-family:var(--kr-b); font-size:19px; color:var(--navy); margin:0 0 18px;}
.related .list{display:grid; grid-template-columns:repeat(2,1fr); gap:12px;}
.rcard{border:0; border-radius:var(--radius-sm); background:var(--card); padding:18px 20px;
  transition:background-color .18s;}
.rcard:hover{background:var(--card-on);}
.rcard .n{font-family:var(--kr-m); font-size:15.5px; color:var(--navy);}
.rcard .e{margin:3px 0 0; font-family:var(--en); font-size:11.5px; color:var(--faint);}

/* 저자·검토 */
.byline{margin:48px 0 0; border-top:1px solid var(--line); padding:26px 0 0; display:flex; gap:26px; flex-wrap:wrap;}
.byline .col .k{font-family:var(--kr-l); font-size:12px; color:var(--muted);}
.byline .col .v{margin:5px 0 0; font-family:var(--kr-m); font-size:14.5px; color:var(--navy);}
.byline .col .s{margin:3px 0 0; font-family:var(--kr-l); font-size:12.5px; color:var(--text-2); line-height:1.6;}

.disclaimer{margin:26px 0 0; padding:18px 22px; border:1px solid var(--line); border-radius:var(--radius-sm);
  font-family:var(--kr-l); font-size:13px; line-height:1.8; color:var(--muted);}

.detail-foot{margin:50px 0 90px; display:flex; justify-content:space-between; gap:12px;}
.detail-foot a{flex:1; border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px 20px;}
.detail-foot a:hover{border-color:var(--faint);}
.detail-foot .k{font-family:var(--kr-l); font-size:12px; color:var(--muted);}
.detail-foot .v{margin:4px 0 0; font-family:var(--kr-m); font-size:15px; color:var(--navy);}
.detail-foot .nx{text-align:right;}

/* 목차 (우측 고정) */
.toc{position:sticky; top:95px;}   /* 고정 헤더 65px + 여백 */
.toc .t{font-family:var(--kr-m); font-size:12.5px; color:var(--muted); letter-spacing:.4px;
  padding:0 0 12px; border-bottom:1px solid var(--line);}
.toc ul{margin:14px 0 0; padding:0; list-style:none;}
.toc li a{display:block; padding:7px 0 7px 12px; border-left:2px solid transparent;
  font-family:var(--kr-l); font-size:13.5px; line-height:1.55; color:var(--text-2); transition:.15s;}
.toc li a:hover{color:var(--navy);}
.toc li a.on{border-left-color:var(--navy); color:var(--navy); font-family:var(--kr-m);}
.toc .side-cta{margin:26px 0 0; padding:18px; background:var(--bg-sunken); border-radius:var(--radius-sm);}
.toc .side-cta .d{font-family:var(--kr-l); font-size:12.5px; line-height:1.65; color:var(--text-2);}
.toc .side-cta a{display:block; margin:12px 0 0; text-align:center; padding:11px 0; border-radius:6px;
  background:var(--navy); color:#fff; font-family:var(--kr-m); font-size:13.5px;}

/* ============================================================
   첫 방문 모션
   ------------------------------------------------------------
   이번 방문에 목록을 처음 열 때만 <html> 에 .gl-motion 이 붙습니다.
   붙지 않으면 아래 규칙이 하나도 걸리지 않아 화면은 지금 그대로입니다.
   그래서 자바스크립트가 꺼져 있어도, 모션을 줄여 달라는 기기 설정이어도
   제목·검색창·카드가 사라져 보이는 일은 없습니다.
   fill-mode 는 backwards 만 씁니다. forwards 로 두면 끝난 뒤에도 마지막
   프레임이 남아 카드에 손을 얹었을 때의 살짝 떠오름(.18s)을 덮어씁니다.
   ============================================================ */
.gl-motion .glossary-top-wrap h1,
.gl-motion .glossary-top-wrap .gl-search,
.gl-motion .glossary-top-wrap .search-hint{
  animation:gl-rise .62s cubic-bezier(.22,.7,.25,1) backwards;}
.gl-motion .glossary-top-wrap h1{animation-delay:.06s;}
.gl-motion .glossary-top-wrap .gl-search{animation-delay:.18s;}
.gl-motion .glossary-top-wrap .search-hint{animation-delay:.30s;}
@keyframes gl-rise{from{opacity:0; transform:translateY(18px);}
                   to  {opacity:1; transform:none;}}

/* 카드는 스크롤이 그 줄에 닿을 때 차례로 올라옵니다.
   .pre 를 붙이는 것도, .in 으로 바꾸는 것도 스크립트가 합니다.
   차례(animation-delay)는 같은 줄에 함께 들어온 카드끼리만 매깁니다. */
.card.pre{opacity:0;}
.card.in{animation:gl-rise-card .5s cubic-bezier(.22,.7,.25,1) backwards;}
@keyframes gl-rise-card{from{opacity:0; transform:translateY(14px);}
                        to  {opacity:1; transform:none;}}

/* 기기 설정이 모션을 줄여 달라고 하면 전부 끕니다.
   스크립트에서도 한 번 거르지만, 설정이 도중에 바뀌는 경우까지 받칩니다. */
@media (prefers-reduced-motion: reduce){
  .gl-motion .glossary-top-wrap h1,
  .gl-motion .glossary-top-wrap .gl-search,
  .gl-motion .glossary-top-wrap .search-hint,
  .card.in{animation:none;}
  .card.pre{opacity:1;}
}

/* ============================================================
   반응형 — 모바일은 본사이트 mobile.css 와 같은 640 기준
   ============================================================ */
/* 1025~1320px : 퀵바를 피한 좌우 여백이 가장 두꺼워지는 구간입니다.
   여기서 4열을 고집하면 카드가 180px 대로 줄어 제목이 세 줄로 깨집니다. */
@media (max-width:1320px) and (min-width:1025px){
  .cards{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:1024px){
  .cards{grid-template-columns:repeat(2,1fr);}
  .detail-body{grid-template-columns:minmax(0,1fr); gap:0;}
  .toc{position:static; margin:0 0 34px; order:-1; border:1px solid var(--line);
    border-radius:var(--radius-sm); padding:18px 20px;}
  .toc .t{border-bottom:0; padding:0 0 8px;}
  /* 칩이 여러 줄로 접힐 때 세로 간격이 0 이면 줄끼리 맞닿습니다. */
  .toc ul{display:flex; flex-wrap:wrap; gap:8px 6px;}
  .toc li a{border-left:0; padding:5px 10px; background:var(--bg-sunken); border-radius:999px; font-size:13px;}
  .toc li a.on{background:var(--navy); color:#fff;}
  .toc .side-cta{display:none;}
  .ini-block ul{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:640px){
  body{font-size:15px;}
  .wrap{padding:0 18px;}
  .hero{padding:34px 0 0;}
  .hero h1{font-size:26px; letter-spacing:-0.8px;}
  .hero .lead{font-size:14.5px; margin-top:12px;}
  .hero .rule{margin-top:26px;}
  .search-zone{padding-top:24px;}
  .gl-search .ico{width:48px; height:56px;}
  .gl-search input{height:56px; font-size:16px;}
  .filters{margin-top:30px;}
  .fbtn{padding:8px 14px; font-size:13px;}
  .ibtn{width:34px; height:34px; font-size:13px;}
  .cards{grid-template-columns:1fr; gap:14px;}
  .card{padding:22px 20px;}
  /* 한 줄에 카드가 하나뿐이면 줄을 맞출 상대가 없습니다. 영문 두 줄 자리는 비웁니다. */
  .card .en{min-height:0;}
  .grid-head h2{font-size:19px;}
  .ini-block ul{grid-template-columns:repeat(2,1fr);}
  .detail-head h1{font-size:26px;}
  .article h2{font-size:20px; margin-top:40px;}
  .related .list{grid-template-columns:1fr;}
  .cta{flex-direction:column; align-items:flex-start; padding:26px 22px;}
  .cta .go{width:100%; text-align:center;}
  .detail-foot{flex-direction:column;}
  .detail-foot .nx{text-align:left;}
}

/* ===== 휴대폰 껍데기를 쓸 때 =====
      기존 사이트는 반응형이 아니라 User-Agent 로 판을 갈라 씁니다
      (서블릿이 iPhone·iPod·Android·iPad·Tablet 을 보고 web / mobile 폴더를 고름).
      용어사전도 같은 규칙을 따라가므로, 휴대폰에서는
        머리 = mobile/new_header.jsp (.header · position:fixed · 높이 55px · 폭 100%)
        판   = mobile.css
      가 붙습니다. PC 판 머리는 65px 고정폭이라 배너가 내용을 내려 주는
      값이 서로 다릅니다. 그 차이 하나만 여기서 바로잡습니다.
      칸 수·글자 크기 같은 나머지는 위의 폭 기준 규칙이 이미 처리합니다. */
.glossary.is-m .glossary-top-wrap .content-wrap{padding-top:55px;}
.glossary.is-m .toc{top:85px;}          /* 55px + 여백 (1025px 이상에서만 sticky) */

/* 휴대폰 머리가 사진 배너 위에 투명하게 얹히므로, 배너를 화면 맨 위부터
      시작시켜 PC 와 같은 모양을 냅니다. mobile.css 는 본문 여백을
      페이지마다 각자 주는 방식이라 공통 위쪽 여백이 없습니다. */
.glossary.is-m{padding-top:0;}

/* 용어 상세와 '없는 용어' 화면에는 사진 배너가 없습니다. 첫 화면이 흰
      바탕인데, 기존 휴대폰 머리글은 맨 위에서 '바탕 없음 + 흰 로고' 로
      시작합니다(mobile.css 의 .header — 1px 만 내려가면 .active 가 붙어
      흰 바탕·검은 로고로 바뀝니다). 그래서 들어오자마자 머리글이
      통째로 보이지 않습니다. 이 두 화면에서만 처음부터 '내려간 뒤의
      모습'(흰 바탕·검은 로고)으로 고정합니다. 스크롤해도 같은 모습이라
      바뀌는 느낌이 없고, 목록 화면(사진 배너 위)은 지금 그대로입니다. */
body.gl-m-plain .header{background-color:#fff;}
body.gl-m-plain .header .header-logo{background-image:url('../images/mobile/header/header_logo_black.png');}
body.gl-m-plain .header .menu-btn{background-image:url('../images/mobile/header/menu_black.png');}

/* 부드러운 스크롤(Lenis)이 켜졌을 때만 걸리는 규칙입니다.
   Lenis 가 <html> 에 lenis · lenis-smooth 를 붙여 줍니다.
   시안 1 에서는 이 클래스가 붙지 않으므로 아무 일도 하지 않습니다. */
html.lenis{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto;}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain;}
.lenis.lenis-stopped{overflow:hidden;}