/* ==========================================================================
   재미판 — 글 페이지 (소개 · 정책 · 문의 · 공략과 이야기)
   site.css 의 색·글꼴 토큰을 그대로 쓴다. 게임 페이지에서는 불러오지 않는다.
   ========================================================================== */

.hp-doc {
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 20px 8px;
}
.hp-doc--wide { max-width: 1120px; }

/* 길잡이 (재미판 › 공략과 이야기) */
.hp-doc .hp-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 8px;
  margin: -6px 0 12px;
  padding: 0;
  list-style: none;
}
.hp-doc .hp-crumb li { margin: 0; color: var(--t3); font-size: 14px; line-height: 1.55; }
.hp-doc .hp-crumb a:not(.hp-btn):not(.hp-card):not(.hp-play) { display: inline-block; padding: 7px 0; color: var(--t2); text-decoration: none; }
.hp-doc .hp-crumb a:not(.hp-btn):not(.hp-card):not(.hp-play):hover { color: var(--t1); text-decoration: underline; text-underline-offset: 3px; }
.hp-doc .hp-crumb li + li::before { content: "›"; margin-right: 8px; opacity: .55; }

.hp-doc h1 {
  margin: 0 0 14px;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(30px, 5.4vw, 46px);
  line-height: 1.16;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.hp-doc .hp-doc__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}
.hp-doc .hp-doc__meta li { margin: 0; color: var(--t3); font-size: 14px; line-height: 1.55; }
.hp-doc .hp-doc__meta li + li::before { content: "·"; margin-right: 10px; }
.hp-doc p.hp-doc__lead {
  margin: 0 0 30px;
  color: var(--t1);
  font-size: 18px;
  line-height: 1.78;
}

.hp-doc h2 {
  margin: 46px 0 12px;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.02em;
  scroll-margin-top: calc(var(--bar-h) + 14px);
}
.hp-doc h3 {
  margin: 30px 0 8px;
  font-size: 18px;
  font-weight: 750;
  letter-spacing: -.01em;
  scroll-margin-top: calc(var(--bar-h) + 14px);
}
.hp-doc p, .hp-doc li, .hp-doc dd, .hp-doc dt {
  color: var(--t2);
  font-size: 16.5px;
  line-height: 1.82;
}
.hp-doc p { margin: 0 0 14px; }
.hp-doc ul, .hp-doc ol { margin: 0 0 16px; padding-left: 1.35em; }
.hp-doc li { margin: 6px 0; }
.hp-doc li > ul, .hp-doc li > ol { margin: 6px 0 4px; }
.hp-doc .hp-cards { margin: 0; padding: 0; }
.hp-doc .hp-cards > li { margin: 0; }
.hp-doc { font-variant-emoji: text; }
.hp-doc strong { color: var(--t1); font-weight: 700; }
.hp-doc em { font-style: normal; color: var(--brand-hi); }
.hp-doc a:not(.hp-btn):not(.hp-card):not(.hp-play) {
  color: var(--brand-hi);
  text-decoration: underline;
  text-decoration-color: rgba(255, 226, 122, .45);
  text-underline-offset: 3px;
}
.hp-doc a:not(.hp-btn):not(.hp-card):not(.hp-play):hover { text-decoration-color: currentColor; }
.hp-doc hr { margin: 40px 0; border: 0; border-top: 1px solid var(--line); }
.hp-doc dl { margin: 0 0 16px; }
.hp-doc dt { margin-top: 14px; color: var(--t1); font-weight: 700; }
.hp-doc dd { margin: 2px 0 0; }
.hp-doc small, .hp-doc p.hp-doc__date { color: var(--t3); font-size: 14px; }
.nb { white-space: nowrap; }

/* 표 */
.hp-table {
  margin: 0 0 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.hp-table table { width: 100%; min-width: 440px; border-collapse: collapse; font-size: 15px; }
.hp-table th, .hp-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  color: var(--t2);
  line-height: 1.6;
}
.hp-table th { background: var(--s1); color: var(--t1); font-weight: 700; white-space: nowrap; }
.hp-table tr:last-child td { border-bottom: 0; }
.hp-table td strong { color: var(--t1); }
@media (max-width: 560px) {
  .hp-table table { min-width: 0; font-size: 14px; }
  .hp-table th, .hp-table td { padding: 9px 10px; line-height: 1.55; }
  .hp-table th { white-space: normal; }
}
@media (max-width: 360px) {
  .hp-table table { font-size: 13px; }
  .hp-table th, .hp-table td { padding: 8px 7px; }
}

/* 알림 상자 */
.hp-note {
  margin: 0 0 18px;
  padding: 14px 18px;
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--s1);
}
.hp-note > :last-child { margin-bottom: 0; }
.hp-note--info { border-left-color: var(--info); }
.hp-note--good { border-left-color: var(--good); }
.hp-note__t { display: block; margin-bottom: 2px; color: var(--t1); font-weight: 750; }

/* 차례 */
.hp-toc {
  margin: 0 0 8px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: rgba(31, 34, 72, .6);
}
.hp-toc strong { display: block; margin-bottom: 6px; font-size: 14px; color: var(--t3); font-weight: 650; }
.hp-doc .hp-toc ol { margin: 0; padding-left: 1.3em; columns: 2; column-gap: 28px; }
.hp-doc .hp-toc li { margin: 0; font-size: 15.5px; line-height: 1.6; break-inside: avoid; }
/* 줄 전체가 눌리도록 링크를 줄 너비로 넓힌다 (손가락으로 누르기 쉽게) */
.hp-doc .hp-toc a:not(.hp-btn):not(.hp-card):not(.hp-play) { display: block; padding: 4px 0; color: var(--t1); text-decoration-color: var(--line-2); }
.hp-doc .hp-toc a:not(.hp-btn):not(.hp-card):not(.hp-play):hover { color: var(--brand-hi); text-decoration-color: currentColor; }
@media (max-width: 560px) { .hp-doc .hp-toc ol { columns: 1; } .hp-doc .hp-toc a:not(.hp-btn):not(.hp-card):not(.hp-play) { padding: 6px 0; } }

/* 그림 */
.hp-fig {
  display: grid;
  justify-items: center;
  gap: 14px;
  margin: 20px 0 22px;
  padding: 20px 16px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--s1);
  overflow-x: auto;
}
.hp-fig figcaption {
  max-width: 36em;
  color: var(--t3);
  font-size: 14px;
  line-height: 1.65;
  text-align: center;
}
.hp-fig figcaption strong { color: var(--t2); }
.hp-fig__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 18px 28px;
}
.hp-fig__cell { display: grid; justify-items: center; gap: 8px; }
.hp-fig__cell, .hp-fig__row { max-width: 100%; min-width: 0; }
.hp-fig__cell > span:not(.pc) { color: var(--t3); font-size: 13.5px; font-weight: 650; text-align: center; }
.hp-fig__arrow { align-self: center; color: var(--t3); font-size: 22px; font-weight: 800; }
@media (max-width: 560px) {
  .hp-fig__row:has(> .hp-fig__arrow) { flex-direction: column; align-items: center; }
  .hp-fig__row:has(> .hp-fig__arrow) > .hp-fig__arrow { transform: rotate(90deg); }
}

/* 선으로 그린 그림 (.hp-draw): 글 안에 넣는 작은 SVG. 글자는 본문 글꼴을 따른다 */
.hp-draw { display: block; width: 100%; max-width: 380px; height: auto; overflow: visible; }
.hp-draw text { fill: var(--t2); font: 600 14px var(--f-ui); }
.hp-draw text.k { fill: var(--brand-hi); font-weight: 750; }
.hp-draw text.w { fill: #ff8fa0; font-weight: 650; }

/* 막대 그림 (.hp-bars): 값 몇 개를 나란히 견준다. 막대마다 --h 로 높이를 준다. .out 은 빼는 값 */
.hp-bars { display: flex; align-items: flex-end; justify-content: center; gap: 8px; width: 100%; max-width: 300px; padding: 22px 6px 0; border-bottom: 2px solid var(--line-2); }
.hp-bars > i {
  position: relative;
  flex: 1 1 0;
  max-width: 36px;
  min-width: 0;
  height: var(--h);
  display: grid;
  align-items: end;
  justify-items: center;
  padding-bottom: 6px;
  border-radius: 7px 7px 0 0;
  background: var(--brand);
  color: #2a2000;
  font: 800 12.5px/1 var(--f-ui);
  font-variant-numeric: tabular-nums;
}
.hp-bars > i.out { background: transparent; box-shadow: inset 0 0 0 2px var(--t3); color: var(--t2); }
.hp-bars > i.out::before { content: "빼요"; position: absolute; left: 50%; bottom: calc(100% + 5px); transform: translateX(-50%); color: var(--t3); font-weight: 650; font-size: 12px; white-space: nowrap; }
@media (max-width: 360px) { .hp-bars { gap: 5px; } .hp-bars > i { font-size: 11.5px; } }

/* --------------------------------------------------------------------------
   작은 판 그림 (.gd) — 칸 하나가 <i>. --cols 로 가로 칸 수, --c 로 칸 크기
   칸 종류: o 열린 칸 · x 닫힌 칸 · m 지뢰(또는 나쁜 자리) · s 안전(또는 좋은 자리) · q 살펴볼 칸 · h 강조 · e 빈 바탕
   -------------------------------------------------------------------------- */
.gd {
  --cols: 5;
  --c: 36px;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, var(--c)));
  max-width: 100%;
  gap: 2px;
  padding: 6px;
  border-radius: 12px;
  background: var(--bg-deep);
  font: 800 calc(var(--c) * .5)/1 var(--f-ui);
  font-variant-numeric: tabular-nums;
}
.gd > i {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  background: var(--s2);
  color: var(--t1);
  font-style: normal;
}
.gd > i.o { background: #23264d; }
.gd > i.x { background: linear-gradient(#3d427b, #33386b); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .13), inset 0 -2px 0 rgba(0, 0, 0, .24); }
.gd > i.e { background: transparent; }
.gd > i.m { box-shadow: inset 0 0 0 2px var(--bad); }
.gd > i.s { box-shadow: inset 0 0 0 2px var(--good); }
.gd > i.q { box-shadow: inset 0 0 0 2px var(--brand); }
.gd > i.h { background: rgba(255, 210, 63, .2); }
.gd > i.x.m { background: linear-gradient(#5a2f52, #4c2848); }
.gd > i.x.s { background: linear-gradient(#27514f, #214644); }
.gd > i.m::after, .gd > i.s::after { font-size: calc(var(--c) * .42); }
.gd > i.m:empty::after { content: "✕"; color: var(--bad); }
.gd > i.s:empty::after { content: "✓"; color: var(--good); }
.gd .n1 { color: #6cc6ff; } .gd .n2 { color: #4fe0a1; } .gd .n3 { color: #ff7d8d; } .gd .n4 { color: #b79bff; }
.gd .n5 { color: #ffb05c; } .gd .n6 { color: #5fd8d8; } .gd .n7 { color: #f5f3ff; } .gd .n8 { color: #bdbbe2; }
.gd > i.f::before { content: ""; position: absolute; left: 40%; top: 22%; width: 2px; height: 58%; border-radius: 1px; background: #f5f3ff; }
.gd > i.f::after { content: ""; position: absolute; left: calc(40% + 2px); top: 22%; border-left: calc(var(--c) * .3) solid var(--brand); border-top: calc(var(--c) * .14) solid transparent; border-bottom: calc(var(--c) * .14) solid transparent; }
.gd > i.bm { background: #ff5d73; }
.gd > i.bm::after { content: ""; width: 46%; height: 46%; border-radius: 50%; background: #1c1d3d; box-shadow: 0 0 0 2px rgba(28, 29, 61, .35); }
.gd.wall-l { border-left: 5px solid var(--t3); border-top-left-radius: 3px; border-bottom-left-radius: 3px; }
.gd.wall-t { border-top: 5px solid var(--t3); border-top-left-radius: 3px; border-top-right-radius: 3px; }
.gd.wall-r { border-right: 5px solid var(--t3); border-top-right-radius: 3px; border-bottom-right-radius: 3px; }
.gd.wall-b { border-bottom: 5px solid var(--t3); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; }
.gd--sm { --c: 28px; }
.gd--lg { --c: 44px; }
@media (max-width: 480px) { .gd { --c: 31px; } .gd--sm { --c: 24px; } .gd--lg { --c: 36px; } }
@media (max-width: 350px) { .gd { --c: 27px; } .gd--sm { --c: 21px; } .gd--lg { --c: 31px; } }

/* 바둑판 무늬 (가로 칸 수가 홀수일 때: 짝수 번째 칸이 어두운 칸) · 8칸짜리는 gd--check8 */
.gd--check > i, .gd--check8 > i { background: #c9b79a; color: #1c1d3d; border-radius: 0; font-size: calc(var(--c) * .72); }
.gd--check > i:nth-child(even),
.gd--check8 > i:nth-child(16n+2), .gd--check8 > i:nth-child(16n+4), .gd--check8 > i:nth-child(16n+6), .gd--check8 > i:nth-child(16n+8),
.gd--check8 > i:nth-child(16n+9), .gd--check8 > i:nth-child(16n+11), .gd--check8 > i:nth-child(16n+13), .gd--check8 > i:nth-child(16n+15) { background: #8a6f55; }
.gd--check, .gd--check8 { gap: 0; padding: 5px; }
.gd--check > i.to::before, .gd--check8 > i.to::before { content: ""; width: 30%; height: 30%; border-radius: 50%; background: rgba(28, 29, 61, .86); box-shadow: 0 0 0 1.5px rgba(255, 253, 245, .75); }
.gd--check > i.hit, .gd--check8 > i.hit { box-shadow: inset 0 0 0 3px #c21730, inset 0 0 0 4.5px rgba(255, 253, 245, .9); }
.gd--check > i.h, .gd--check8 > i.h { box-shadow: inset 0 0 0 100px rgba(255, 210, 63, .42); }
/* 못 가는 칸 · 고른 칸: 밝은 칸과 어두운 칸 어디서나 보이게 진한 색과 밝은 고리를 함께 쓴다 */
.gd--check > i.m, .gd--check8 > i.m { box-shadow: none; }
.gd--check > i.m:empty::after, .gd--check8 > i.m:empty::after {
  content: "✕"; display: grid; place-items: center; width: 58%; height: 58%; border-radius: 50%;
  background: #7a0c1c; color: #fffdf5; font-size: calc(var(--c) * .34); font-weight: 800; line-height: 1;
  box-shadow: 0 0 0 1.5px rgba(255, 253, 245, .8);
}
.gd--check > i.q, .gd--check8 > i.q { box-shadow: inset 0 0 0 2.5px #1c1d3d, inset 0 0 0 5px #ffd23f; }
.gd--check > i.w, .gd--check8 > i.w { color: #fffdf5; text-shadow: 0 1px 0 #1c1d3d, 0 -1px 0 #1c1d3d, 1px 0 0 #1c1d3d, -1px 0 0 #1c1d3d; }

/* 체스 기물 (재미판 체스의 기물 그림): <b class="cp cp-k"></b> 검은 기물 · <b class="cp cp-k w"></b> 흰 기물. k 킹 · q 퀸 · r 룩 · b 비숍 · n 나이트 · p 폰 */
.gd b.cp {
  display: block;
  height: 86%;
  aspect-ratio: 64 / 100;
  background: #1c1d3d;
  -webkit-mask: var(--m) center / contain no-repeat;
  mask: var(--m) center / contain no-repeat;
  filter: drop-shadow(0 0 .7px rgba(255, 255, 255, .6));
}
.gd b.cp.w { background: #fffdf5; filter: drop-shadow(0 0 .7px #1c1d3d) drop-shadow(0 1px .5px rgba(28, 29, 61, .9)); }
.gd b.cp-k { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='18 0 64 100'%3E%3Cpath d='M50 95L50 95L76.8 95Q79 95 79 93L79 91.6Q79 89.2 76.4 88.7L75.4 88.5Q77.2 87.4 76.4 85.6Q75.6 84.3 73 83.4C66.2 80.8 61.4 70.2 60.6 56.4Q60.5 54.7 62.6 54.3L68.2 53.4Q70.4 53 69.8 51.3Q69.2 50.1 66.8 49.8L64 49.5Q65.6 48.5 64.8 47Q64.1 46 61.8 45.8C65.6 41.2 68.8 34.6 69.8 28.4Q70.4 26.9 68.6 26.2C66.8 21.4 61.4 18.4 55.6 18.1Q53.4 18 53.4 16.4L53.4 12.6L58.2 12.6Q59.4 12.6 59.4 11.4L59.4 8.6Q59.4 7.4 58.2 7.4L53.4 7.4L53.4 3.2Q53.4 2 52.2 2L50 2L47.8 2Q46.6 2 46.6 3.2L46.6 7.4L41.8 7.4Q40.6 7.4 40.6 8.6L40.6 11.4Q40.6 12.6 41.8 12.6L46.6 12.6L46.6 16.4Q46.6 18 44.4 18.1C38.6 18.4 33.2 21.4 31.4 26.2Q29.6 26.9 30.2 28.4C31.2 34.6 34.4 41.2 38.2 45.8Q35.9 46 35.2 47Q34.4 48.5 36 49.5L33.2 49.8Q30.8 50.1 30.2 51.3Q29.6 53 31.8 53.4L37.4 54.3Q39.5 54.7 39.4 56.4C38.6 70.2 33.8 80.8 27 83.4Q24.4 84.3 23.6 85.6Q22.8 87.4 24.6 88.5L23.6 88.7Q21 89.2 21 91.6L21 93Q21 95 23.2 95L50 95Z'/%3E%3C/svg%3E"); }
.gd b.cp-q { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='18 0 64 100'%3E%3Cpath d='M50 95L50 95L75.8 95Q78 95 78 93L78 91.6Q78 89.2 75.4 88.7L74.4 88.5Q76.2 87.4 75.4 85.6Q74.6 84.3 72 83.5C65.4 81 60.8 70.8 60 58Q59.9 56.3 62 55.9L67.4 55Q69.6 54.6 69 52.9Q68.5 51.7 66.2 51.4L63.4 51.1Q65 50.1 64.2 48.6Q63.5 47.6 61.2 47.4C65.6 42.2 69.2 34 70.4 27.2Q71 25.6 72.6 25.2Q72.9 22.6 71.6 19.2Q71 17.8 70.2 19.2L67.6 22.6L65.2 17.4Q64.6 16 63.8 17.4L61.6 21.8L59.2 16.8Q58.6 15.4 57.8 16.8L55.8 21C55 19.8 54 19 52.8 18.8L52.8 17.5A4.8 4.8 0 0 0 50 8.8A4.8 4.8 0 0 0 47.2 17.5L47.2 18.8C46 19 45 19.8 44.2 21L42.2 16.8Q41.4 15.4 40.8 16.8L38.4 21.8L36.2 17.4Q35.4 16 34.8 17.4L32.4 22.6L29.8 19.2Q29 17.8 28.4 19.2Q27.1 22.6 27.4 25.2Q29 25.6 29.6 27.2C30.8 34 34.4 42.2 38.8 47.4Q36.5 47.6 35.8 48.6Q35 50.1 36.6 51.1L33.8 51.4Q31.5 51.7 31 52.9Q30.4 54.6 32.6 55L38 55.9Q40.1 56.3 40 58C39.2 70.8 34.6 81 28 83.5Q25.4 84.3 24.6 85.6Q23.8 87.4 25.6 88.5L24.6 88.7Q22 89.2 22 91.6L22 93Q22 95 24.2 95L50 95Z'/%3E%3C/svg%3E"); }
.gd b.cp-r { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='18 0 64 100'%3E%3Cpath d='M50 95L50 95L75.3 95Q77.5 95 77.5 93L77.5 91.6Q77.5 89.2 74.9 88.7L73.9 88.5Q75.7 87.4 74.9 85.6Q74.1 84.3 71.5 83.6C68.4 81.4 66.2 76.4 66.2 70L65.2 52.6Q65.1 51.2 66.8 50.8L69.6 50.2Q71 49.8 70.4 48.4Q69.8 47.3 68.2 47C69.6 44.8 71.8 41.8 72.4 38.2L72.4 25.6L64.2 25.6L64.2 30.6L55.4 30.6L55.4 25.6L50 25.6L44.6 25.6L44.6 30.6L35.8 30.6L35.8 25.6L27.6 25.6L27.6 38.2C28.2 41.8 30.4 44.8 31.8 47Q30.2 47.3 29.6 48.4Q29 49.8 30.4 50.2L33.2 50.8Q34.9 51.2 34.8 52.6L33.8 70C33.8 76.4 31.6 81.4 28.5 83.6Q25.9 84.3 25.1 85.6Q24.3 87.4 26.1 88.5L25.1 88.7Q22.5 89.2 22.5 91.6L22.5 93Q22.5 95 24.7 95L50 95Z'/%3E%3C/svg%3E"); }
.gd b.cp-b { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='18 0 64 100'%3E%3Cpath d='M50 95L50 95L73.8 95Q76 95 76 93L76 91.6Q76 89.2 73.4 88.7L72.4 88.5Q74.2 87.4 73.4 85.6Q72.6 84.3 70 83.7C64.4 81.4 60.4 73.6 59.6 63.4Q59.5 61.8 61.4 61.4L66.4 60.6Q68.2 60.2 67.8 58.8Q67.4 57.7 65.4 57.4L62.4 57.1Q63.8 56.2 63.2 54.8Q62.6 53.8 60.6 53.6L58.2 53.4C62.6 50.4 65.4 45.6 65.4 40C65.4 32.2 59.6 25.4 53.4 21.6Q54.4 20.8 53.2 20.4L53.2 20.5A5.2 5.2 0 0 0 50 11.2A5.2 5.2 0 0 0 46.8 20.5L46.8 20.4Q45.6 20.8 46.6 21.6C40.4 25.4 34.6 32.2 34.6 40C34.6 45.6 37.4 50.4 41.8 53.4L39.4 53.6Q37.4 53.8 36.8 54.8Q36.2 56.2 37.6 57.1L34.6 57.4Q32.6 57.7 32.2 58.8Q31.8 60.2 33.6 60.6L38.6 61.4Q40.5 61.8 40.4 63.4C39.6 73.6 35.6 81.4 30 83.7Q27.4 84.3 26.6 85.6Q25.8 87.4 27.6 88.5L26.6 88.7Q24 89.2 24 91.6L24 93Q24 95 26.2 95L50 95Z'/%3E%3C/svg%3E"); }
.gd b.cp-n { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='18 0 64 100'%3E%3Cpath d='M50 95L26.6 95Q24.5 95 24.5 93L24.5 91.6Q24.5 89.2 27.1 88.7L28.2 88.5Q26.4 87.4 27.2 85.6Q28 84.2 31 83.8C29.8 80.6 27.6 76.6 27 72C26.4 67.4 28.6 63.2 32.6 60C30 59.4 27.2 59.6 24.4 59.8C21 60 17.4 59.4 15.4 57.2C13.6 55.4 13.2 53.2 13.8 51.4C14.4 49.6 13.6 47.6 13.8 45.8C14 43.6 15.6 42 17.8 40.8C21.4 38.8 24.6 35.6 27.6 32.2C31 28.4 34.4 24.6 37.8 21.2C39.2 19.8 40.4 18.8 41.8 18.2L40.6 11.6Q40.4 9.6 42 10.4L47.2 14.6Q48.2 15.2 48.8 14.2L51.4 8.6Q52.2 7 53.2 8.6L56 16C63.8 19.2 70.2 25.8 73.2 34.4C76.2 42.8 76.8 52 75.4 60.8C74.4 67.8 72.4 75.4 69 83.8Q72 84.2 72.8 85.6Q73.6 87.4 71.8 88.5L72.9 88.7Q75.5 89.2 75.5 91.6L75.5 93Q75.5 95 73.4 95Z'/%3E%3C/svg%3E"); }
.gd b.cp-p { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='18 0 64 100'%3E%3Cpath d='M50 95L50 95L72.3 95Q74.5 95 74.5 93L74.5 91.6Q74.5 89.2 71.9 88.7L70.9 88.5Q72.7 87.4 71.9 85.6Q71.1 84.3 68.5 83.8C62.4 81.6 59.6 75.2 59.4 66.6Q59.4 64.6 61.4 64L65.8 63.2Q67.4 62.9 67.4 61.7Q67.4 60.4 65.6 60.1L59.8 59.6Q58.4 59.3 58.4 58.2L58.4 55.99A12.6 12.6 0 0 0 50 34A12.6 12.6 0 0 0 41.6 55.99L41.6 58.2Q41.6 59.3 40.2 59.6L34.4 60.1Q32.6 60.4 32.6 61.7Q32.6 62.9 34.2 63.2L38.6 64Q40.6 64.6 40.6 66.6C40.4 75.2 37.6 81.6 31.5 83.8Q28.9 84.3 28.1 85.6Q27.3 87.4 29.1 88.5L28.1 88.7Q25.5 89.2 25.5 91.6L25.5 93Q25.5 95 27.7 95L50 95Z'/%3E%3C/svg%3E"); }

/* 줄 위에 돌을 놓는 판 (오목 · 장기): 칸 가운데가 교차점 */
.gd--line { gap: 0; padding: 6px; background: #d9a760; }
.gd--line > i { background: transparent; border-radius: 0; }
.gd--line > i::before, .gd--line > i::after { content: ""; position: absolute; background: rgba(60, 38, 12, .7); }
.gd--line > i::before { left: 0; right: 0; top: 50%; height: 1px; }
.gd--line > i::after { top: 0; bottom: 0; left: 50%; width: 1px; }
.gd--line > i.l::before { left: 50%; } .gd--line > i.r::before { right: 50%; }
.gd--line > i.t::after { top: 50%; } .gd--line > i.b::after { bottom: 50%; }
.gd--line > i > b {
  position: relative;
  z-index: 1;
  width: 84%;
  height: 84%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font: 800 calc(var(--c) * .42)/1 var(--f-ui);
}
.gd--line b.bk { background: radial-gradient(circle at 35% 30%, #5a5a66, #101018 70%); color: #fff; box-shadow: 0 2px 3px rgba(0, 0, 0, .4); }
.gd--line b.wh { background: radial-gradient(circle at 35% 30%, #fff, #d6d6de 75%); color: #1c1d3d; box-shadow: 0 2px 3px rgba(0, 0, 0, .35); }
.gd--line b.no { background: none; color: #7a0c1c; font-size: calc(var(--c) * .6); }
.gd--line b.go { background: rgba(79, 224, 161, .28); box-shadow: inset 0 0 0 2px #084a30; color: #063d27; }
.gd--line b.cho, .gd--line b.han { background: #f6ead0; border-radius: 26%; box-shadow: 0 2px 3px rgba(0, 0, 0, .35), inset 0 0 0 2px currentColor; font-family: "Noto Serif KR", "Nanum Myeongjo", "Batang", serif; }
.gd--line b.cho { color: #1b7a4b; } .gd--line b.han { color: #c0263a; }
.gd--line b.dot { width: 30%; height: 30%; background: rgba(28, 29, 61, .75); }
.gd--line > i.m { box-shadow: inset 0 0 0 2.5px #7a0c1c; }
.gd--line > i.s { box-shadow: inset 0 0 0 2.5px #084a30; }

.gd--line > i.dx, .gd--line > i.d-tl, .gd--line > i.d-tr, .gd--line > i.d-bl, .gd--line > i.d-br { --dl: rgba(60, 38, 12, .7); background-repeat: no-repeat; }
.gd--line > i.dx {
  background-image: linear-gradient(to bottom right, transparent calc(50% - .6px), var(--dl) calc(50% - .6px), var(--dl) calc(50% + .6px), transparent calc(50% + .6px)),
    linear-gradient(to bottom left, transparent calc(50% - .6px), var(--dl) calc(50% - .6px), var(--dl) calc(50% + .6px), transparent calc(50% + .6px));
}
.gd--line > i.d-br, .gd--line > i.d-tl { background-image: linear-gradient(to bottom left, transparent calc(50% - .6px), var(--dl) calc(50% - .6px), var(--dl) calc(50% + .6px), transparent calc(50% + .6px)); background-size: 50% 50%; }
.gd--line > i.d-bl, .gd--line > i.d-tr { background-image: linear-gradient(to bottom right, transparent calc(50% - .6px), var(--dl) calc(50% - .6px), var(--dl) calc(50% + .6px), transparent calc(50% + .6px)); background-size: 50% 50%; }
.gd--line > i.d-br { background-position: 100% 100%; } .gd--line > i.d-tl { background-position: 0 0; }
.gd--line > i.d-bl { background-position: 0 100%; } .gd--line > i.d-tr { background-position: 100% 0; }

/* 2048 타일 */
.gd--2048 { gap: 6px; padding: 8px; background: #2a2d5c; }
.gd--2048 > i { border-radius: 8px; background: #353a6d; font-size: calc(var(--c) * .38); color: #2a2000; }
.gd--2048 > i.t2 { background: #f1ead9; } .gd--2048 > i.t4 { background: #f0dcb0; } .gd--2048 > i.t8 { background: #ffb26b; }
.gd--2048 > i.t16 { background: #ff9156; } .gd--2048 > i.t32 { background: #ff7359; color: #fff; } .gd--2048 > i.t64 { background: #f4523c; color: #fff; }
.gd--2048 > i.t128 { background: #f2d264; } .gd--2048 > i.t256 { background: #f2cc48; } .gd--2048 > i.t512 { background: #f1c62d; }
.gd--2048 > i.t1024 { background: #f0bf14; font-size: calc(var(--c) * .3); } .gd--2048 > i.t2048 { background: #ffd23f; font-size: calc(var(--c) * .3); box-shadow: 0 0 0 2px #fff6c9; }

/* 스도쿠: 굵은 칸 구분선은 칸에 sr(오른쪽) · sb(아래쪽)를 붙인다 */
.gd--sudoku { gap: 1px; padding: 4px; background: #474c86; }
.gd--sudoku > i { border-radius: 0; background: #1f2248; font-weight: 700; }
.gd--sudoku > i.g { color: var(--t3); font-weight: 600; }
/* 박스를 가르는 굵은 선은 칸 안쪽 테두리로 그린다 (바깥 여백으로 그리면 그 칸만 작아진다) */
.gd--sudoku > i.sr { border-right: 2px solid #474c86; } .gd--sudoku > i.sb { border-bottom: 2px solid #474c86; }
.gd--sudoku > i.c { font-size: calc(var(--c) * .26); font-weight: 600; color: var(--t3); letter-spacing: .04em; line-height: 1.25; white-space: pre-line; text-align: center; }

/* 카드 무늬: <i class="su su-s"></i> 스페이드 · su-h 하트 · su-d 다이아몬드 · su-c 클로버
   기기 글꼴마다 ♠ ♥ ♦ ♣ 의 크기와 굵기가 달라서, 글꼴 대신 게임 카드와 같은 그림을 쓴다. 색은 글자색을 따른다 */
.su {
  display: inline-block;
  width: .84em;
  height: .84em;
  margin: 0 .05em 0 .03em;
  vertical-align: -.07em;
  background: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat;
  mask: var(--m) center / contain no-repeat;
}
.su-s { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 4C58 22 94 38 94 62c0 13-10 22-22 22-8 0-15-4-19-10 1 9 5 16 13 22H34c8-6 12-13 13-22-4 6-11 10-19 10C16 84 6 75 6 62 6 38 42 22 50 4z'/%3E%3C/svg%3E"); }
.su-h { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 90C22 68 4 50 4 31 4 16 15 6 29 6c9 0 17 5 21 13 4-8 12-13 21-13 14 0 25 10 25 25 0 19-18 37-46 59z'/%3E%3C/svg%3E"); }
.su-d { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 3C60 20 75 37 92 50 75 63 60 80 50 97 40 80 25 63 8 50 25 37 40 20 50 3z'/%3E%3C/svg%3E"); }
.su-c { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='29' r='19'/%3E%3Ccircle cx='28' cy='58' r='19'/%3E%3Ccircle cx='72' cy='58' r='19'/%3E%3Ccircle cx='50' cy='52' r='12'/%3E%3Cpath d='M45 58c0 16-4 27-13 36h36c-9-9-13-20-13-36z'/%3E%3C/svg%3E"); }
.hp-doc p .su-h, .hp-doc p .su-d, .hp-doc li .su-h, .hp-doc li .su-d, .hp-doc td .su-h, .hp-doc td .su-d,
.hp-fig figcaption .su-h, .hp-fig figcaption .su-d, .hp-fig__cell > span:not(.pc) .su-h, .hp-fig__cell > span:not(.pc) .su-d { background: #ff8fa0; }

/* 윈도우 고대비 모드: 그림(판 · 기물 · 카드 무늬)은 색을 바꾸지 않는다. 바꾸면 배경색 그림이 모두 사라진다 */
@media (forced-colors: active) {
  .hp-fig { forced-color-adjust: none; }
  /* 본문 속 무늬는 시스템 글자색으로 그린다 (그림 안의 무늬는 그림과 함께 제 색을 지킨다) */
  .hp-doc .su:not(.hp-fig *) { forced-color-adjust: none; background: CanvasText; }
}

/* 카드 */
.pc-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 8px; }
.pc-col { display: grid; justify-items: center; }
.pc-col > .pc + .pc { margin-top: -30px; }
.pc {
  position: relative;
  width: 46px;
  height: 62px;
  padding: 5px 6px;
  border-radius: 7px;
  background: #fbfaf5;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(28, 29, 61, .18);
  color: #1c1d3d;
  font: 800 15px/1.05 var(--f-ui);
  text-align: left;
  white-space: nowrap;
}
.pc.r { color: #d92b45; }
.pc .su { width: .9em; height: .9em; margin: 0 .06em 0 0; vertical-align: -.09em; }
.pc.dn { background: repeating-linear-gradient(45deg, #4f7bff 0 5px, #3d63d9 5px 10px); box-shadow: 0 2px 4px rgba(0, 0, 0, .35), inset 0 0 0 3px #fbfaf5; color: transparent; }
.pc.em { background: transparent; box-shadow: inset 0 0 0 2px var(--line-2); color: var(--t3); font-weight: 650; font-size: 12px; display: grid; place-items: center; white-space: normal; text-align: center; }
.pc.hl { box-shadow: 0 2px 4px rgba(0, 0, 0, .35), 0 0 0 3px var(--brand); }
.pc.ok { box-shadow: 0 2px 4px rgba(0, 0, 0, .35), 0 0 0 3px var(--good); }
.pc.no { box-shadow: 0 2px 4px rgba(0, 0, 0, .35), 0 0 0 3px var(--bad); }
@media (max-width: 480px) { .pc { width: 40px; height: 54px; font-size: 13.5px; } .pc-col > .pc + .pc { margin-top: -26px; } }

/* --------------------------------------------------------------------------
   게임으로 가는 버튼 · 글 카드
   -------------------------------------------------------------------------- */
.hp-play {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 34px 0 8px;
  padding: 16px 18px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, rgba(255, 210, 63, .13), rgba(255, 210, 63, .03));
  color: var(--t1);
  text-decoration: none;
  transition: transform .18s var(--ease-out), border-color .18s;
}
.hp-play:hover { transform: translateY(-2px); border-color: var(--brand); }
.hp-play__art { flex: none; width: 96px; aspect-ratio: 16 / 11; border-radius: 12px; overflow: hidden; background: var(--s2); }
.hp-play__art svg { width: 100%; height: 100%; }
.hp-play__txt { min-width: 0; display: grid; gap: 2px; }
.hp-play__txt b { font-size: 17px; font-weight: 750; }
.hp-play__txt span { color: var(--t2); font-size: 14.5px; line-height: 1.5; }
.hp-play__go { margin-left: auto; flex: none; padding: 9px 16px; border-radius: 999px; background: var(--brand); color: var(--on-brand); font-weight: 750; font-size: 15px; white-space: nowrap; }
@media (max-width: 480px) { .hp-play { flex-wrap: wrap; } .hp-play__art { width: 76px; } .hp-play__go { margin-left: 0; width: 100%; text-align: center; } }

.hp-doc__more { margin: 54px 0 0; padding-top: 28px; border-top: 1px solid var(--line); }
.hp-doc .hp-ad { padding-left: 0; padding-right: 0; }
.hp-doc__more h2 { margin-top: 0; }

/* 모음 페이지 머리 */
.hp-hub { padding: 14px 0 30px; }
.hp-hub h1 { margin-bottom: 10px; }
.hp-hub p { max-width: 38em; margin: 0; color: var(--t2); font-size: 17px; line-height: 1.75; }

/* 정책 문서: 번호 붙은 조항 */
.hp-doc--legal h2 { font-size: 21px; margin-top: 38px; }
.hp-doc--legal p, .hp-doc--legal li { font-size: 16px; }

@media (max-width: 560px) {
  .hp-doc { padding-top: 20px; }
  .hp-doc h2 { font-size: 22px; margin-top: 40px; }
  .hp-doc p.hp-doc__lead { font-size: 17px; }
  .hp-doc p, .hp-doc li, .hp-doc dd, .hp-doc dt { font-size: 16px; }
}