:root{--바탕:#14110e;--판:#1c1813;--판2:#252019;--테:#3a332a;--글:#ece4d6;--흐린:#9b9184;
  --금:#c9a227;--밝금:#ffe9a8;--붉:#8d2f28}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--바탕)}
body{margin:0;background:var(--바탕);color:var(--글);
  font-family:"Pretendard","Malgun Gothic","맑은 고딕",system-ui,sans-serif;
  font-size:16px;line-height:1.85;word-break:keep-all;
  padding:0 0 env(safe-area-inset-bottom)}
a{color:var(--금);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,.서체{font-family:"Noto Serif KR","Batang","바탕",serif}
h1{font-size:2.4rem;letter-spacing:2px;margin:.2em 0 .1em;color:var(--금);line-height:1.25}
h1 .한자{font-size:1.4rem;color:var(--흐린);letter-spacing:1px;margin-left:.35em}
h2{font-size:1.28rem;color:var(--금);margin:38px 0 12px;padding-bottom:8px;
  border-bottom:1px solid var(--테);letter-spacing:1px}
h2 .셈,h2 .한자{font-size:13px;font-weight:400;color:var(--흐린);margin-left:8px;letter-spacing:0}
h3{font-size:1.08rem;color:var(--글);margin:22px 0 8px}
p{margin:0 0 14px}
code{font-family:Consolas,monospace;font-size:.92em;color:var(--밝금);background:var(--판);padding:1px 5px;border-radius:4px}
blockquote{margin:0 0 16px;padding:12px 16px;background:var(--판);border-left:3px solid var(--테);color:var(--흐린);border-radius:0 8px 8px 0}
ul,ol{padding-left:1.4em;margin:0 0 14px}
li{margin:3px 0}
.속{max-width:760px;margin:0 auto;padding:0 16px;
  padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
.넓게 .속{max-width:1180px}

/* 머리띠 · 바닥 */
.머리띠{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px max(16px,env(safe-area-inset-right)) 12px max(16px,env(safe-area-inset-left));
  border-bottom:1px solid var(--테);background:rgba(20,17,14,.92);position:sticky;top:0;z-index:5;
  backdrop-filter:blur(4px)}
.머리띠 .집{font-weight:700;letter-spacing:3px;color:var(--글);font-size:15px;white-space:nowrap;flex:0 0 auto}
.머리띠 .집 b{color:var(--금)}
.머리띠 .차림{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;align-items:center}
.머리띠 .차림 a{color:var(--글)}
.머리띠 .놀기{background:var(--금);color:#221c0c;border-radius:8px;padding:6px 14px;font-weight:700}
.머리띠 .놀기:hover{text-decoration:none;background:#e0b62e}
.머리띠 .말고리{border:1px solid rgba(201,162,39,.45);border-radius:8px;padding:5px 11px;color:var(--글)}
.머리띠 .말고리:hover{text-decoration:none;border-color:var(--금)}
.바닥{margin:64px 0 0;padding:20px 16px 36px;border-top:1px solid var(--테);
  font-size:13px;color:var(--흐린);line-height:1.9;text-align:center}
.바닥 a{color:var(--흐린)}
.바닥 p{margin:6px 0 0}
.바닥 .안내{margin-top:6px}

/* 읽는 쪽 */
.길{font-size:13px;color:var(--흐린);padding:18px 0 6px}
.길 a{color:var(--흐린)}
.자{color:var(--흐린);font-size:14px;margin:0 0 14px}
.한줄{font-size:1.12rem;font-weight:700;color:var(--밝금);margin:0 0 22px;
  padding:14px 16px;background:var(--판);border-left:3px solid var(--금);
  border-radius:0 8px 8px 0;line-height:1.6}
.곁말{color:var(--흐린);font-size:14px}
.더{margin-top:26px;font-size:14px}
.칸들{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 6px}
.칸{background:var(--판);border:1px solid var(--테);border-radius:8px;padding:6px 12px;font-size:14px}
.칸 b{color:var(--금);font-variant-numeric:tabular-nums}
.칸.붉{border-color:#5a2a26;color:#e39b95}
dl.재주{margin:0 0 18px}
dl.재주 dt{color:var(--금);font-weight:700;margin-top:12px}
dl.재주 dd{margin:2px 0 0;color:var(--흐린);font-size:14.5px}
.무리{display:flex;flex-wrap:wrap;gap:7px}
.쪽지{display:inline-block;background:var(--판);border:1px solid var(--테);
  border-radius:7px;padding:5px 11px;font-size:14px;color:var(--글)}
a.쪽지:hover{border-color:var(--금);color:var(--금);text-decoration:none}
.쪽지 .뭇{color:var(--흐린);font-size:12px;margin-left:5px}
.쪽지.숙{border-color:#5a2a26}
.쪽지.금{border-color:var(--금);color:var(--밝금)}
.쪽지.옥{border-color:#3f6b5a}
/* 계열 여섯 — 빛은 카드틀.css 의 칩 빛을 굽는 때 읽어 --계 로 넘긴다 */
.계열점{display:inline-block;width:.72em;height:.72em;border-radius:50%;background:var(--계);margin-right:.45em;vertical-align:.02em;box-shadow:0 0 0 2px rgba(255,255,255,.14)}
.계열마디 h2{border-bottom-color:var(--계)}
.칸.계열{border-color:var(--계)}
.칸.계열 i{display:inline-block;width:.72em;height:.72em;border-radius:50%;background:var(--계);margin-right:.4em;vertical-align:-.05em}
.계열표{border-collapse:collapse;width:100%;font-size:14.5px;margin:0 0 8px}
.계열표 th,.계열표 td{border:1px solid var(--테);padding:7px 10px;text-align:left;vertical-align:top}
.계열표 th{background:var(--판);color:var(--금)}
.계열표 td:nth-child(n+3),.계열표 th:nth-child(n+3){text-align:center;font-variant-numeric:tabular-nums}
.계열표 td:first-child{white-space:nowrap}
/* 고유 강화 — 판의 강화 마디 빛(분홍)을 잇는다 */
.강화줄{margin:0 0 16px;padding:10px 14px;border:1px solid #6a3a4c;border-left:3px solid #c77d98;border-radius:0 8px 8px 0;background:#231a1d;font-size:14.5px}
.강화줄 b{color:#f3c6d6}
.말.군사{border-left-color:var(--금)}
.강화줄 .곁{color:var(--흐린);font-size:13px}
.세력{margin:26px 0 0}
.세력 h2{margin-bottom:10px}
.찾기{width:100%;padding:11px 14px;font-size:16px;border-radius:9px;
  background:var(--판);border:1px solid var(--테);color:var(--글);margin:0 0 8px;font-family:inherit}
.없음{color:var(--흐린);padding:20px 0}
.낱머리{display:flex;gap:20px;align-items:flex-start;margin:8px 0 18px}
.낱머리 h1{margin:.1em 0 .3em}
.낱그림{width:160px;height:160px;border-radius:10px;border:1px solid var(--테);flex:0 0 auto;object-fit:cover}
.낱머리작{display:flex;gap:16px;align-items:flex-start}
/* 실제 카드 — 사전의 카드 한 장 문을 찍은 투명 그림(2026-09-27 · 「카드로 보기」 링크 자리) */
.카드그림{width:200px;height:auto;flex:0 0 auto;display:block;filter:drop-shadow(0 8px 18px rgba(0,0,0,.55))}
.낱머리작 .카드그림{width:150px}
.낱그림작{width:96px;height:96px;border-radius:8px;border:1px solid var(--테);flex:0 0 auto;object-fit:cover}
.낙관큰{width:160px;height:160px;border-radius:10px;border:1px solid var(--테);background:var(--판);
  display:grid;place-items:center;font-family:"Noto Serif KR",serif;font-size:72px;color:var(--흐린);flex:0 0 auto}
.갈래표{font-size:12px;letter-spacing:3px;color:var(--금);margin:6px 0 0}
.조건{font-size:1.1rem;line-height:1.8}
.조건 .사람{padding:2px 8px;border:1px solid var(--테);border-radius:6px;background:var(--판);color:var(--글)}
.조건 .사람.주역{border-color:var(--금);color:var(--밝금)}
.조건 .짓{color:var(--금)}
.사람없음{color:var(--흐린)}
.말{border-left:2px solid var(--테);padding:2px 0 2px 15px;margin:0 0 15px}
.말 .자리{font-size:12.5px;color:var(--흐린);letter-spacing:1px}
.말 p{margin:2px 0 0;font-family:"Noto Serif KR",serif;font-size:1.04rem;color:#f3ead9;line-height:1.7}
.맺음{font-size:1.04rem;line-height:1.9}
.갈래판{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:18px 0}
.갈래{display:flex;flex-direction:column;gap:4px;background:var(--판);border:1px solid var(--테);
  border-radius:12px;padding:16px 18px;color:var(--글)}
.갈래:hover{border-color:var(--금);text-decoration:none}
.갈래 b{font-family:"Noto Serif KR",serif;font-size:1.3rem;color:var(--금);letter-spacing:2px}
.갈래 .셈{font-size:1.6rem;color:var(--글);font-variant-numeric:tabular-nums;font-family:"Noto Serif KR",serif}
.갈래 .한줄{font-size:13.5px;font-weight:400;color:var(--흐린);background:none;border:0;padding:0;margin:0;line-height:1.5}
.차례{list-style:none;padding:0;margin:0 0 20px;counter-reset:n}
.차례 li{counter-increment:n;margin:0 0 10px}
.차례 a{display:grid;grid-template-columns:2.2em 1fr;gap:6px 10px;align-items:baseline;
  background:var(--판);border:1px solid var(--테);border-radius:10px;padding:12px 16px;color:var(--글)}
.차례 a::before{content:counter(n);font-family:"Noto Serif KR",serif;color:var(--금);font-size:1.3rem;grid-row:1/3}
.차례 a b{font-family:"Noto Serif KR",serif;font-size:1.12rem;color:var(--금)}
.차례 a span{grid-column:2;font-size:14px;color:var(--흐린)}
.차례 a:hover{border-color:var(--금);text-decoration:none}
.읽기 h2{margin-top:44px}
.읽기 table{border-collapse:collapse;width:100%;font-size:14.5px;margin:0 0 16px}
.읽기 th,.읽기 td{border:1px solid var(--테);padding:7px 10px;text-align:left;vertical-align:top}
.읽기 th{background:var(--판);color:var(--금);font-weight:700}
.표틀{overflow-x:auto;margin:0 0 16px}
.앞뒤{display:flex;justify-content:space-between;gap:16px;margin:44px 0 0;padding-top:16px;border-top:1px solid var(--테);font-size:14.5px}

/* 홍보 한 쪽 */
.머리판{position:relative;min-height:560px;overflow:hidden;display:flex;align-items:center;background:var(--바탕)}
.머리그림{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 40%}
.머리판 .덮개{position:absolute;inset:0;background:
  linear-gradient(100deg,rgba(16,12,7,.93) 0%,rgba(16,12,7,.80) 33%,rgba(16,12,7,.30) 58%,rgba(16,12,7,.16) 78%,rgba(16,12,7,.34) 100%),
  linear-gradient(180deg,rgba(0,0,0,.42) 0%,transparent 15%,transparent 86%,rgba(0,0,0,.30) 100%)}
.머리글{position:relative;padding-top:64px;padding-bottom:64px;width:100%}
.머리글 .한{font-size:26px;letter-spacing:16px;color:var(--금);opacity:.72;margin-bottom:14px;font-weight:600}
.큰제목{font-family:"Pretendard","Malgun Gothic","맑은 고딕",system-ui,sans-serif;font-size:clamp(56px,9vw,96px);line-height:1;letter-spacing:6px;
  font-weight:800;color:var(--글);margin:0;text-shadow:0 4px 30px rgba(0,0,0,.75)}
.큰제목 b{color:var(--금)}
.부제{margin:20px 0 0;font-size:17px;color:var(--흐린);letter-spacing:1px;line-height:1.7}
.머리글 .줄{width:96px;height:2px;background:var(--금);opacity:.65;margin:26px 0}
.첫말{max-width:640px;font-size:19px;line-height:1.75;color:var(--글);text-wrap:pretty;margin:0}
.첫말 b{color:var(--밝금)}
.단추줄{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin-top:34px}
.단추{display:inline-block;border:1px solid var(--테);border-radius:8px;padding:10px 18px;
  color:var(--글);background:rgba(37,32,25,.82);font-size:15px;white-space:nowrap}
.단추:hover{border-color:var(--금);text-decoration:none}
.단추.금{background:var(--금);color:#221c0c;border-color:var(--금);padding:14px 34px;font-size:18px;font-weight:700;letter-spacing:1px}
.단추.금:hover{background:#e0b62e}
.셈띠{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding:34px 16px;border-bottom:1px solid var(--테)}
.셈띠 div{display:flex;flex-direction:column;align-items:center;gap:6px}
.셈띠 b{font-family:"Noto Serif KR",serif;font-size:40px;color:var(--금);font-variant-numeric:tabular-nums;line-height:1.1}
.셈띠 span{font-size:14px;color:var(--흐린);letter-spacing:1px}
/* ⚠ 마디 이름을 「.칸」 으로 두었더니 사전 낱쪽의 칩(「.칸」)이 이 여백을 함께 받아
   세로로 늘어났다(사용자 지적 · 2026-09-06). 마디는 「.마디」 다. */
.마디{padding-top:72px}
.마디 h2{font-size:34px;letter-spacing:2px;border:0;padding:0;margin:0 0 10px}
.마디 .곁{font-size:17px;color:var(--흐린);margin:0 0 28px}
.마디.둘{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:start}
.마디.둘 p{font-size:16px;color:#cfc6b6;text-wrap:pretty}
.셋{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.판자{background:#1e1a15;border:1px solid var(--테);border-radius:13px;padding:20px;display:flex;flex-direction:column;gap:14px}
.판자 h3{margin:0;font-size:24px;letter-spacing:2px;color:var(--글)}
.판자 h3 span{font-size:15px;color:var(--흐린);letter-spacing:1px;margin-left:8px}
.판자 p{margin:0;font-size:15px;line-height:1.8;color:#cfc6b6;text-wrap:pretty}
.장면{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;border:1px solid var(--테);background:#1e1a15}
.장면.빈{display:grid;place-items:center;border-style:dashed;color:#5b544a;font-size:13px}
.마디.둘 .장면{margin-top:8px}
.승작마디 .장면{aspect-ratio:auto;margin-top:0}
.고사판자 .표{font-size:12px;letter-spacing:3px;color:var(--금);margin-bottom:-6px}
/* 문항 — 그림 칸을 넓게(글 5 · 그림 7) */
.마디.둘.문항마디{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center}
.문항마디 .장면{margin-top:0;aspect-ratio:auto}   /* 문항 창만 잘라 찍은 3:2 — 16:9 로 자르면 보기가 잘린다 */
.점들{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:9px}
.점들 li{margin:0;padding:10px 14px;background:var(--판);border:1px solid var(--테);border-radius:9px;font-size:15px;color:#cfc6b6;line-height:1.6}
.점들 b{color:var(--밝금)}
/* 카드 여섯 — 사전의 카드 한 장 문으로 찍은 투명 그림 */
.카드여섯{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}
.카드칸{display:flex;flex-direction:column;gap:8px;color:var(--글)}
.카드칸 img{width:100%;height:auto;display:block;filter:drop-shadow(0 8px 18px rgba(0,0,0,.55));transition:transform .2s ease}
a.카드칸:hover{text-decoration:none}
a.카드칸:hover img{transform:translateY(-5px)}
.카드칸 .장면.빈{aspect-ratio:2/3}
.카드칸 b{font-family:"Noto Serif KR","Batang","바탕",serif;font-size:18px;color:var(--금);letter-spacing:2px;margin-top:4px}
.카드칸 b small{font-size:14px;color:var(--흐린);margin-left:6px;letter-spacing:0}
.카드칸 span{font-size:13.5px;color:#cfc6b6;line-height:1.6;text-wrap:pretty}
/* 승작 — 넓은 그림 한 장 밑에 짧은 글 셋 */
.승작마디 .머리줄{margin-bottom:22px}
.글셋{margin-top:22px;gap:20px}
.글셋 p{margin:0;font-size:15px;line-height:1.75;color:#cfc6b6;text-wrap:pretty;padding:14px 16px;background:#1e1a15;border:1px solid var(--테);border-radius:10px}
.글셋 b{color:var(--밝금)}
.고사판자 h3{font-size:22px;letter-spacing:0;line-height:1.35}
.인용{border-left:3px solid var(--금);background:var(--판2);padding:14px 16px;border-radius:0 8px 8px 0;font-size:14.5px;line-height:1.7;color:var(--글)}
.인용 b{color:var(--밝금)}
.머리줄{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px}
.머리줄 .곁{margin:0}
.여섯{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}
.얼굴{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--글)}
.얼굴:hover{text-decoration:none;color:var(--금)}
.얼굴 img{width:100%;aspect-ratio:320/344;object-fit:cover;object-position:top;border-radius:8px;border:1px solid var(--테);display:block}
.얼굴 span{font-family:"Noto Serif KR",serif;font-size:17px;letter-spacing:2px}
.얼굴 small{font-size:12px;color:var(--흐린);letter-spacing:0}
.셋.세로{gap:18px}
.숏츠{position:relative;display:block;aspect-ratio:9/16;border-radius:10px;border:1px solid var(--테);overflow:hidden;background:#1e1a15;color:var(--글)}
.숏츠 img{width:100%;height:100%;object-fit:cover;display:block}
.숏츠 span{position:absolute;left:14px;bottom:14px;font-family:"Noto Serif KR",serif;font-size:18px;text-shadow:0 2px 10px rgba(0,0,0,.8)}
.띠{margin-top:84px;flex-direction:row;align-items:center;justify-content:space-between;gap:32px;padding:32px 36px}
.띠 h2{font-size:24px;margin:0 0 8px}
.띠 p{margin:0;font-size:15px;color:var(--흐린)}
.폰마디{padding-top:24px}
.폰마디 .장면{aspect-ratio:auto}

@media (max-width:900px){
  .셋,.마디.둘,.마디.둘.문항마디{grid-template-columns:1fr}
  .카드여섯{grid-template-columns:repeat(3,minmax(0,1fr))}
  .여섯{grid-template-columns:repeat(3,minmax(0,1fr))}
  .셋.세로{grid-template-columns:repeat(3,minmax(0,1fr))}
  .머리줄{flex-direction:column;align-items:flex-start}
  .띠{flex-direction:column;align-items:flex-start}
  .셈띠{display:flex;flex-wrap:wrap;justify-content:center;gap:18px 0}   /* 다섯이라 셋 · 둘 — 아랫줄 둘을 가운데로 */
  .셈띠 div{flex:0 0 33.333%}
  .셈띠 b{font-size:28px}
}
@media (max-width:600px){
  body{font-size:15.5px}
  h1{font-size:1.85rem}
  h1 .한자{display:block;margin:2px 0 0;font-size:1.05rem}
  .마디 h2{font-size:26px}
  .머리판{min-height:0}
  .머리글{padding-top:40px;padding-bottom:40px}
  .머리글 .한{font-size:15px;letter-spacing:9px}
  .첫말{font-size:16px}
  .단추.금{padding:14px 26px}
  .낱머리{flex-direction:column}
  .머리띠 .차림{font-size:13px;gap:4px 12px}
  .카드여섯{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
}