@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;600;900&family=Gowun+Batang:wght@400;700&family=Ma+Shan+Zheng&family=Noto+Serif+JP:wght@400&family=Noto+Serif+SC:wght@400&family=Noto+Serif+TC:wght@400&display=swap'); :root { --ink: #2b2724; --ink-soft: #4a443d; --ink-read: #3a352f; /* 보조 텍스트 가독용 — ink-soft보다 진함 (고연령 사용자 대비) */ --paper: #e8ddc7; --paper-deep: #ddcfb2; --line: #6b5d48; --red: #9e2b25; --red-deep: #7a1f1a; --blue: #1f4e5f; --blue-deep: #15323d; --gold: #b08d57; --glow: rgba(176,141,87,0.55); /* 모달(규칙·About) 문장형 텍스트의 한자 자형 — 언어별로 갈림(아래 html[lang]). 보드·기물·기보는 한국 장기 정체성이라 Noto Serif KR 고정, 여기서 안 건드림. */ --cjk-font: 'Noto Serif KR'; } /* 언어별 CJK 자형 — 은 setLang()이 갱신. 문장형 모달에만 쓰임. ko/en/de/fr은 기본값(KR) 사용: 라틴이 주이고 한자 섞이면 KR 자형이어도 무방. */ html[lang="ja"] { --cjk-font: 'Noto Serif JP'; } html[lang="zh-Hans"] { --cjk-font: 'Noto Serif SC'; } html[lang="zh-Hant"] { --cjk-font: 'Noto Serif TC'; } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { background: #d8c9ab; font-family: 'Gowun Batang', serif; color: var(--ink); min-height: 100vh; padding: 18px; } .wrap { width: 100%; max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; } .game-area { display: flex; flex-direction: row; gap: 20px; align-items: flex-start; } .board-col { flex: 2.7 1 0; min-width: 0; position: relative; } .side-panel { flex: 1 1 0; min-width: 232px; /* 버튼 3개가 한 줄 유지되는 하한 (루미: 폭 +20~30px) */ display: flex; flex-direction: column; gap: 12px; /* 사이드 패널 UI 텍스트 — 언어별 한자 자형(--cjk-font, html[lang] 기준). 단, 잡은 기물 한자(.cap-chip)·기보 행마기호(.mv-piece)는 아래에서 KR 고정. */ font-family: 'Gowun Batang', var(--cjk-font), serif; } /* 좁은 화면(모바일/좁은 iframe): 세로로 접기 + 순서 재배치 */ @media (max-width: 720px) { .game-area { flex-direction: column; align-items: stretch; } .board-col, .side-panel { flex: 1 1 auto; } /* 사이드 패널 내부 순서: 상태 → 버튼 → 항복확인 → 잡은기물 → 기보 */ .side-panel { display: flex; flex-direction: column; } .lang-toggle-wrap { order: -1; } /* 설정버튼은 타이틀바에 있으므로 side-panel엔 없음 */ .status { order: 1; } .controls { order: 2; } .resign-confirm { order: 3; } .captured-bar { order: 4; } .movelog-wrap { order: 5; } } .title-bar { text-align: center; position: relative; } .title-bar h1 { font-family: 'Noto Serif KR', serif; font-weight: 900; font-size: 1.5rem; letter-spacing: 0.3em; color: var(--ink); text-indent: 0.3em; } .title-bar .sub { font-size: 0.72rem; letter-spacing: 0.4em; color: var(--ink-soft); margin-top: 2px; text-indent: 0.4em; } /* 대국 시계 (timeMode != none일 때만 표시) */ .clock-bar { display: flex; gap: 8px; } .clock-bar .clock { flex: 1; text-align: center; font-family: 'Gowun Batang', serif; font-size: 0.84rem; letter-spacing: 0.04em; padding: 7px 6px; background: rgba(43,39,36,0.04); border: 1px solid rgba(107,93,72,0.3); border-radius: 2px; color: var(--ink-soft); font-variant-numeric: tabular-nums; transition: background 0.2s, color 0.2s, border-color 0.2s; } .clock-bar .clock.active { background: rgba(176,141,87,0.18); border-color: var(--gold); color: var(--ink); font-weight: 700; } .clock-bar .clock.low { color: var(--red); } .clock-bar .clock.active.low { background: rgba(158,43,37,0.1); border-color: var(--red); color: var(--red-deep); } .status { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 18px 15px; background: rgba(43,39,36,0.04); border: 1px solid rgba(107,93,72,0.3); /* ★ 상단에 얇은 먹색 강조선 — 기보창과 시각적 무게를 분리 (루미 제안) */ border-top: 3px solid var(--ink-soft); border-radius: 2px; font-size: 0.86rem; min-height: 64px; } /* 차례에 따라 상단선 색 (초=청록 / 한=인주) — 누구 차례인지 색으로도 */ .status.turn-r { border-top-color: var(--blue); } .status.turn-b { border-top-color: var(--red); } /* ★ 차례 줄: 우측 패널에서 가장 큰 정보 — 0.5초 안에 누구 차례인지. */ .status .turn-line { white-space: nowrap; font-size: 1.6rem; font-weight: 800; line-height: 1.1; color: var(--ink); } .status .turn-line b { font-weight: 800; } /* ★ 관점 줄: "당신이 둘 차례" / "상대가 생각 중" — 차례 줄 바로 아래, 또렷한 안내. */ .status .turn-persp { font-size: 1.08rem; font-weight: 600; line-height: 1.3; letter-spacing: 0.01em; color: var(--ink); } .status .turn-persp:empty { display: none; } /* 문구 없으면 자리 안 차지 */ /* 내 차례면 강조색(청록 깊은 톤), 상대(AI) 차례면 차분하게 */ .status .turn-persp.mine { color: var(--blue-deep); } .status .turn-persp.theirs { color: var(--ink-soft); font-weight: 500; } /* AI 생각 중 점 세 개 — 수묵 점이 천천히 차오름 (스피너 대신, 루미 제안) */ .status .ai-dots { display: inline-block; margin-left: 2px; } .status .ai-dots i { font-style: normal; opacity: 0.25; animation: aiDot 1.4s ease-in-out infinite; } .status .ai-dots i:nth-child(2) { animation-delay: 0.25s; } .status .ai-dots i:nth-child(3) { animation-delay: 0.5s; } @keyframes aiDot { 0%, 60%, 100% { opacity: 0.2; } 30% { opacity: 0.85; } } .status .turn-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 9px; vertical-align: 1px; box-shadow: 0 0 0 2px rgba(0,0,0,0.08); } .turn-r .turn-dot { background: var(--blue); } .turn-b .turn-dot { background: var(--red); } /* 보조 줄: 기물을 골라 두세요 등 — 작고 차분하게 (계층 맨 아래) */ .status .msg { color: var(--ink-read); font-size: 0.9rem; } /* ── AI 생각 중 연출 (루미 톤: 보이지 않는 기객, 옅은 먹 번짐 + 느린 호흡) ── 번쩍임 없이, 보드 위에 아주 옅은 먹빛 베일이 느리게 숨쉬듯. */ .board-frame.ai-thinking::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 3; background: radial-gradient(ellipse at center, rgba(43,39,36,0.05), transparent 70%); animation: aiBreath 3.2s ease-in-out infinite; } @keyframes aiBreath { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.7; } } /* 보드: 9열 x 10행, 교차점에 기물. 높이는 JS가 폭 기준으로 고정. */ .board-frame { position: relative; width: 100%; flex: 0 0 auto; overflow: hidden; background: #d8c9ab; border: 1px solid #5a4a32; border-radius: 4px; box-shadow: 0 14px 36px rgba(43,39,36,0.33), 0 0 0 7px #cdb88f, 0 0 0 8px #5a4a32; --pad: 6%; touch-action: manipulation; } /* 배경 그림 전용 레이어 — 진영(flipped)에 따라 정방향/180도 배경 이미지 교체 */ .board-frame::before { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: 3px; background: linear-gradient(rgba(248,240,224,0.06), rgba(248,240,224,0.06)), url('assets/board/board-bg.png'); background-size: cover; background-position: center; z-index: 0; } .board-frame.flipped::before { background: linear-gradient(rgba(248,240,224,0.06), rgba(248,240,224,0.06)), url('assets/board/board-bg-flip.png'); background-size: cover; background-position: center; } svg.grid { position: absolute; overflow: visible; z-index: 1; } .grid line { stroke: rgba(60,45,28,0.09); stroke-width: 1.2; stroke-linecap: round; } .grid .palace { stroke: rgba(60,45,28,0.12); stroke-width: 1.2; } .pieces { position: absolute; z-index: 1; } /* 마지막 둔 수 하이라이트 (출발/도착 교차점) */ .last-mark { position: absolute; width: 9.5%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 4px; background: rgba(120,160,90,0.36); box-shadow: inset 0 0 0 2px rgba(90,130,60,0.65); pointer-events: none; z-index: 0; } .piece { position: absolute; width: 15%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Noto Serif KR', serif; font-weight: 900; font-size: clamp(13px, 4vw, 25px); cursor: pointer; user-select: none; transition: top 0.32s cubic-bezier(.34,1.3,.5,1), left 0.32s cubic-bezier(.34,1.3,.5,1), transform 0.18s, box-shadow 0.18s; z-index: 2; } .piece-img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; filter: drop-shadow(0 3px 4px rgba(43,39,36,0.35)); } .piece.sel { z-index: 5; } .piece.sel .piece-img { filter: drop-shadow(0 0 6px var(--gold)) drop-shadow(0 0 10px var(--glow)) drop-shadow(0 3px 4px rgba(43,39,36,0.4)); } /* 선택 기물 링 — 기물 바깥에 은은한 청록 링. 금빛 glow와 겹쳐 "선택됨"을 또렷하게. */ .piece.sel::after { content: ''; position: absolute; inset: -18%; border-radius: 50%; border: 2px solid rgba(31,78,95,0.45); box-shadow: 0 0 8px rgba(31,78,95,0.3); pointer-events: none; animation: selRing 1.8s ease-in-out infinite; } @keyframes selRing { 0%,100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } } /* 장군당한 궁(K) — 붉은 링 + 약한 금빛 glow, 아주 은은한 pulse */ .piece.in-check { z-index: 4; } .piece.in-check .piece-img { filter: drop-shadow(0 0 4px rgba(158,43,37,0.9)) drop-shadow(0 0 9px rgba(158,43,37,0.55)) drop-shadow(0 0 13px var(--glow)) drop-shadow(0 3px 4px rgba(43,39,36,0.4)); animation: checkPulse 1.6s ease-in-out infinite; } /* sel + in-check 동시: 선택 glow에 붉은 링을 얹어 둘 다 보이게 */ .piece.in-check.sel .piece-img { filter: drop-shadow(0 0 5px rgba(158,43,37,0.95)) drop-shadow(0 0 10px rgba(158,43,37,0.6)) drop-shadow(0 0 12px var(--glow)) drop-shadow(0 3px 4px rgba(43,39,36,0.4)); } @keyframes checkPulse { 0%,100% { opacity: 0.92; } 50% { opacity: 1; } } .piece:hover { transform: translate(-50%, -52%); } /* 합법수 표시 — 히트박스(투명) + 시각 표시 */ /* 이동점 CSS 변수 — 테마별로 :root 또는 .board-frame.bg-* 에서 재정의 가능 */ :root { --move-dot-color: rgba(176,141,87,0.88); /* 고금색 — 산수화 기본 */ --move-dot-outline: rgba(248,240,224,0.55); /* 한지빛 외곽 — 배경 분리 */ --move-dot-glow: rgba(176,141,87,0.45); --cap-dot-color: rgba(176,141,87,0.90); /* 잡기 링 */ --cap-dot-glow: rgba(176,141,87,0.55); --cap-dot-inset: rgba(176,141,87,0.22); } /* 심플 배경: 외곽선 더 진하게 (밝은 배경에서 금색 점 분리) */ .board-frame.bg-simple { --move-dot-outline: rgba(160,130,70,0.7); } .dot { position: absolute; width: 8.2%; aspect-ratio: 1; transform: translate(-50%, -50%); z-index: 3; cursor: pointer; display: flex; align-items: center; justify-content: center; } /* 이동 가능: 50% 채워진 점 + 밝은 외곽선으로 배경과 분리 */ .dot::after { content: ''; width: 50%; aspect-ratio: 1; border-radius: 50%; background: var(--move-dot-color); border: 2px solid rgba(255,255,255,0.75); box-shadow: 0 0 6px var(--move-dot-glow); animation: pulse 1.3s ease-in-out infinite; } /* 잡기 가능: 링 유지 — 적 기물 위에 강조 */ .dot.capture::after { width: 96%; background: transparent; border: 3.5px solid var(--cap-dot-color); box-shadow: 0 0 14px var(--cap-dot-glow), inset 0 0 8px var(--cap-dot-inset); } @keyframes pulse { 0%,100%{opacity:0.82; transform: scale(0.94);} 50%{opacity:1; transform: scale(1.06);} } /* ★ [D] 상(象) 멱 막힘 표식 (튜토리얼 전용) — 길을 가로막은 돌 위에 붉은 금지 표식. 설계: 금지 표지(⊘)처럼 보여야 함. 잡기 링(고금색 ◎)과 "색"이 아니라 "형태"로 구분. → 사선이 주인공: 링 위로 굵고 진하게 올라와 1~2초 안에 "막힘"이 즉시 읽히게. 한자(백자 기물)는 살림 — X(╳) 대신 ⊘로 한자 가독성 보존. */ .block-mark { position: absolute; width: 15%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; z-index: 4; /* 기물(2)보다 위, 막힘을 덮어 보이게 */ pointer-events: none; /* 아래 기물 클릭 방해 안 함 */ border: 5px solid rgba(158,43,37,0.9); /* 링 두께 2배(2.5→5) */ box-shadow: 0 0 9px rgba(158,43,37,0.55), inset 0 0 6px rgba(158,43,37,0.25); animation: blockPulse 1.5s ease-in-out infinite; } /* 사선(╱) — 막힘(통행 금지)의 주인공. 링보다 굵고 완전 인주색, 링 위로 올라옴. */ .block-mark::after { content: ''; position: absolute; left: 50%; top: 50%; width: 132%; height: 7.5px; /* 두께 3배(2.5→7.5), 링 밖으로 살짝 넘침 */ background: var(--red); /* 완전 인주색(#9e2b25) */ border-radius: 4px; transform: translate(-50%, -50%) rotate(-45deg); box-shadow: 0 0 5px rgba(158,43,37,0.6), 0 0 0 1.5px rgba(248,240,224,0.45); /* 한지빛 얇은 테두리 — 한자 위에서도 사선이 또렷 */ z-index: 1; /* ::after는 같은 요소 내 링보다 위 */ } @keyframes blockPulse { 0%,100%{opacity:0.78;} 50%{opacity:1;} } /* 잡기 연출: 먹 번짐 */ .ink-splat { position: absolute; width: 14%; aspect-ratio: 1; transform: translate(-50%,-50%) scale(0.2); border-radius: 50%; background: radial-gradient(circle, rgba(43,39,36,0.85), rgba(43,39,36,0.35) 45%, transparent 72%); pointer-events: none; z-index: 4; animation: splat 0.6s ease-out forwards; } @keyframes splat { 0% { transform: translate(-50%,-50%) scale(0.2); opacity: 0; } 35% { opacity: 0.9; } 100% { transform: translate(-50%,-50%) scale(1.8); opacity: 0; } } /* 장군 선언 — 궁에서 붉은 파동이 한 번 퍼짐 (일회성, doMove에서만 생성) */ .check-burst { position: absolute; width: 12%; aspect-ratio: 1; transform: translate(-50%,-50%) scale(0.3); border-radius: 50%; border: 4px solid rgba(158,43,37,0.9); box-shadow: 0 0 18px rgba(158,43,37,0.8), 0 0 36px var(--glow), inset 0 0 16px rgba(158,43,37,0.45); pointer-events: none; z-index: 6; animation: checkBurst 0.9s cubic-bezier(.2,.7,.3,1) forwards; } @keyframes checkBurst { 0% { transform: translate(-50%,-50%) scale(0.3); opacity: 0; border-width: 5px; } 16% { opacity: 1; } 100% { transform: translate(-50%,-50%) scale(4.6); opacity: 0; border-width: 1px; } } /* 장군 선언 — 보드 중앙 글자. 시작 안개(mist)와 같은 결, 더 짧고(0.85s) 옅은 적먹 섞음 */ .check-announce { position: absolute; inset: 0; z-index: 9; border-radius: 3px; pointer-events: none; display: flex; align-items: center; justify-content: center; opacity: 0; background: radial-gradient(110% 80% at 50% 45%, rgba(158,43,37,0.16), rgba(158,43,37,0) 55%), radial-gradient(120% 80% at 35% 30%, rgba(248,244,236,0.82), rgba(248,244,236,0) 62%), linear-gradient(rgba(244,236,228,0.7), rgba(238,228,216,0.7)); backdrop-filter: blur(4px); animation: checkMist 0.85s ease-out forwards; } .check-announce-text { font-family: 'Noto Serif KR', serif; font-weight: 900; font-size: clamp(2rem, 8vw, 3.6rem); letter-spacing: 0.3em; text-indent: 0.3em; color: var(--red-deep); text-shadow: 0 2px 10px rgba(158,43,37,0.4), 0 0 20px var(--glow); opacity: 0; animation: checkMistText 0.85s ease-out forwards; } @keyframes checkMist { 0% { opacity: 1; backdrop-filter: blur(4px); } 100% { opacity: 0; backdrop-filter: blur(0px); } } @keyframes checkMistText { 0% { opacity: 0; transform: scale(1.25); letter-spacing: 0.5em; } 28% { opacity: 1; transform: scale(1); letter-spacing: 0.3em; } 65% { opacity: 1; } 100% { opacity: 0; transform: scale(0.96); } } .controls { display: flex; gap: 10px; } button { flex: 1; font-family: 'Gowun Batang', serif; font-size: 0.86rem; padding: 9px; background: rgba(43,39,36,0.05); border: 1px solid var(--line); border-radius: 2px; color: var(--ink); cursor: pointer; letter-spacing: 0.1em; transition: background 0.15s, transform 0.1s; } button:hover { background: rgba(176,141,87,0.18); } button:active { transform: translateY(1px); } /* ── 하단 컨트롤 3개: 사용 빈도에 따라 시각 무게 차등 (루미 제안) ── 무르기=강조 / 처음부터=보통 / 돌 던지기=옅게+위험색 */ .controls button { font-size: 0.96rem; padding: 11px 6px; letter-spacing: 0.04em; white-space: nowrap; transition: background 0.15s, transform 0.1s, border-color 0.15s, opacity 0.15s; } .controls button:hover { background: rgba(176,141,87,0.22); border-color: var(--gold); } /* 무르기: 가장 자주 — 강조 (굵게 + 또렷한 배경/테두리) */ #undoBtn { font-weight: 700; background: rgba(43,39,36,0.09); border-color: var(--line); color: var(--ink); } /* 처음부터: 가끔 — 보통 톤 */ #resetBtn { font-weight: 600; background: rgba(43,39,36,0.05); color: var(--ink-soft); } /* 돌 던지기: 특수·위험 동작 — 옅게 두되 인주빛으로 구분. 호버 때 또렷해짐. */ #resignBtn { font-weight: 400; background: transparent; color: var(--red-deep); border-color: rgba(122,31,26,0.35); opacity: 0.8; } #resignBtn:hover { background: rgba(158,43,37,0.12); border-color: var(--red); opacity: 1; } .captured-bar { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; background: rgba(43,39,36,0.05); border: 1px solid rgba(107,93,72,0.25); border-radius: 2px; } .captured-bar .side-cap { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; min-height: 26px; } .cap-label { font-size: 0.78rem; color: var(--ink-read); letter-spacing: 0.05em; margin-right: 4px; white-space: nowrap; align-self: center; } .cap-chip { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: 'Noto Serif KR', serif; font-weight: 900; font-size: 12px; background: radial-gradient(circle at 34% 30%, rgba(255,255,255,0.4), transparent 55%), #e7cfa6; border: 1px solid rgba(43,39,36,0.5); box-shadow: 0 1px 2px rgba(43,39,36,0.3); opacity: 0.55; } .cap-chip.r { color: var(--blue-deep); } .cap-chip.b { color: var(--red-deep); } /* 기보 */ .movelog-wrap { background: rgba(43,39,36,0.05); border: 1px solid rgba(107,93,72,0.25); border-radius: 2px; display: flex; flex-direction: column; min-height: 0; } .movelog-title { font-family: 'Gowun Batang', var(--cjk-font), serif; font-size: 0.86rem; letter-spacing: 0.2em; color: var(--ink-read); padding: 8px 12px 6px; border-bottom: 1px solid rgba(107,93,72,0.2); text-indent: 0.2em; } .movelog { list-style: none; margin: 0; padding: 6px 8px; max-height: 305px; overflow-y: auto; font-size: 0.88rem; color: var(--ink); counter-reset: mv; } .movelog li { display: flex; align-items: baseline; gap: 6px; padding: 3px 6px; border-radius: 2px; } .movelog li:nth-child(odd) { background: rgba(176,141,87,0.07); } .movelog li .num { flex: 0 0 24px; color: var(--ink-soft); font-size: 0.72rem; text-align: right; } .movelog li .mv-cell { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .movelog li .mv-r { color: var(--blue-deep); } .movelog li .mv-b { color: var(--red-deep); } .movelog li .mv-piece { font-family: 'Noto Serif KR', serif; font-weight: 700; margin-right: 1px; } .movelog .empty { color: var(--ink-read); font-size: 0.86rem; padding: 8px 6px; } @media (max-width: 760px) { .movelog { max-height: 150px; } } .win-overlay { position: absolute; inset: 0; background: rgba(43,39,36,0.78); display: none; align-items: center; justify-content: center; flex-direction: column; border-radius: 3px; z-index: 10; color: var(--paper); text-align: center; backdrop-filter: blur(2px); } .win-overlay.show { display: flex; animation: fadein 0.4s; } @keyframes fadein { from{opacity:0;} to{opacity:1;} } /* 대국 시작 — 수묵 안개가 걷히는 연출 */ .mist-overlay { position: absolute; inset: 0; z-index: 8; border-radius: 3px; pointer-events: none; display: flex; align-items: center; justify-content: center; opacity: 0; background: radial-gradient(120% 80% at 30% 20%, rgba(248,244,236,0.95), rgba(248,244,236,0) 60%), radial-gradient(120% 80% at 75% 70%, rgba(244,238,228,0.92), rgba(244,238,228,0) 62%), linear-gradient(rgba(246,240,230,0.9), rgba(240,232,218,0.9)); backdrop-filter: blur(7px); } .mist-overlay.run { animation: mistClear 1.5s ease-out forwards; } .mist-text { font-family: 'Noto Serif KR', serif; font-weight: 900; font-size: clamp(1.4rem, 5vw, 2.4rem); letter-spacing: 0.35em; text-indent: 0.35em; color: var(--ink); opacity: 0; } .mist-overlay.run .mist-text { animation: mistText 1.5s ease-out forwards; } @keyframes mistClear { 0% { opacity: 1; backdrop-filter: blur(7px); } 100% { opacity: 0; backdrop-filter: blur(0px); } } @keyframes mistText { 0% { opacity: 0; transform: translateY(6px); letter-spacing: 0.55em; } 35% { opacity: 1; } 70% { opacity: 1; transform: translateY(0); letter-spacing: 0.35em; } 100% { opacity: 0; } } .win-overlay .win-faction { font-family: 'Noto Serif KR', serif; font-weight: 700; font-size: 1rem; letter-spacing: 0.15em; margin-bottom: 6px; opacity: 0.95; } .win-overlay .win-faction.chu { color: #7fd4cf; } .win-overlay .win-faction.han { color: #f0918a; } .win-overlay .win-faction.draw { color: #d8cdb2; } .win-overlay h2 { font-family: 'Noto Serif KR'; font-size: 2.1rem; letter-spacing: 0.25em; margin-bottom: 8px; text-indent: 0.25em; } .win-overlay h2.win { color: #f5ecdb; } .win-overlay h2.lose { color: #c9bfae; } .win-overlay h2.draw { color: #e8dcc0; } /* [6-2 UI] 무승부 점수 보조 줄. 어두운 오버레이(rgba 43,39,36) 위라 밝은 종이톤 사용 — 루미가 제안한 --ink-read는 밝은 배경용 어두운 색이라 이 맥락엔 안 맞음. 위계: title(2.1rem) 아래, winHint(0.85/opacity .85)보다 또렷하게 — 무승부 승부를 가르는 핵심 정보라 너무 흐리면 안 됨(고연령 대비). 빈 텍스트면 margin도 0이 되게 :empty 처리. ★ 두 줄 구성: ws-row(점수, 한자 병기) / ws-lead(격차, 한자 없이 — "한 5.5점 우세"). 한자 반복 제거 + 격차를 독립 줄로 올려 교육 효과("빅장은 점수로 가린다") 강조. */ .win-overlay .win-score { font-family: 'Noto Serif KR', serif; margin-bottom: 8px; } .win-overlay .win-score:empty { margin: 0; } .win-overlay .win-score .ws-row { display: block; font-size: 0.96rem; line-height: 1.5; letter-spacing: 0.02em; color: #ece1c8; opacity: 0.94; } .win-overlay .win-score .ws-lead { display: block; font-size: 0.80rem; line-height: 1.5; letter-spacing: 0.02em; color: #ddd0b4; opacity: 0.85; margin-top: 3px; } .win-overlay p { font-size: 0.85rem; opacity: 0.85; } /* 상차림 선택 오버레이 — viewport 기준 중앙 (모바일 보드 높이 0 문제 해결) */ .setup-overlay { position: fixed; inset: 0; background: rgba(43,39,36,0.78); display: none; align-items: center; justify-content: center; z-index: 200; backdrop-filter: blur(3px); padding: 16px; overflow-y: auto; /* 패널이 viewport보다 길 때 overlay 자체가 스크롤 */ } .setup-overlay.show { display: flex; animation: fadein 0.35s; } .setup-panel { width: 100%; max-width: 500px; max-height: calc(100vh - 32px); /* overlay padding(16px×2) 제외 */ overflow-y: auto; background: linear-gradient(160deg, var(--paper), var(--paper-deep)); border: 2px solid var(--gold); border-radius: 5px; padding: 30px 28px; box-shadow: 0 16px 40px rgba(0,0,0,0.5); } /* 가로 모드: 뷰포트 높이가 짧으므로 패널 padding 축소 + 제목 margin 축소 */ @media (orientation: landscape) and (max-height: 680px) { .setup-panel { padding: 18px 22px; } .setup-title { font-size: 1.1rem; margin-bottom: 14px; } .mode-grid { gap: 6px; } .mode-card { padding: 9px 14px; } .level-play { margin-bottom: 10px; } .level-grid { gap: 7px; } .level-card { padding: 10px 14px; } .level-note { margin-top: 10px; } .faction-grid { gap: 9px; } .faction-card { padding: 14px 10px 12px; } .setup-grid { gap: 9px; } .setup-card { padding: 9px 10px 8px; } .setup-skip { margin-top: 12px; padding: 9px; } } .setup-title { text-align: center; font-family: 'Noto Serif KR', serif; font-size: 1.32rem; color: var(--ink); margin-bottom: 24px; letter-spacing: 0.05em; } .setup-title b { font-size: 1.42rem; } .setup-title.r b { color: var(--blue-deep); } .setup-title.b b { color: var(--red-deep); } .setup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; } .setup-card { background: rgba(255,255,255,0.4); border: 1.5px solid var(--line); border-radius: 4px; padding: 13px 12px 11px; cursor: pointer; transition: transform 0.12s, box-shadow 0.15s, border-color 0.15s; text-align: center; } .setup-card:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 6px 16px rgba(176,141,87,0.45); } .setup-card .mini { display: flex; justify-content: center; align-items: center; gap: 4px; margin-bottom: 6px; } .setup-card .mini .cell { /* 카드 폭에 비례하되 하한·상한만 고정 (자동 반응형) */ width: clamp(40px, 25%, 80px); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; } .setup-card .mini .cell img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(43,39,36,0.3)); } .setup-card .name { font-family: 'Gowun Batang', serif; font-size: 1.02rem; color: var(--ink); letter-spacing: 0.04em; font-weight: 700; } .setup-skip { width: 100%; margin-top: 18px; font-family: 'Gowun Batang', serif; font-size: 0.9rem; padding: 12px; background: rgba(43,39,36,0.08); border: 1px dashed var(--line); border-radius: 3px; color: var(--ink-soft); cursor: pointer; letter-spacing: 0.05em; } .setup-skip:hover { background: rgba(176,141,87,0.18); } /* 진영 선택 */ .faction-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; } .faction-card { background: rgba(255,255,255,0.4); border: 1.5px solid var(--line); border-radius: 4px; padding: 20px 14px 16px; cursor: pointer; transition: transform 0.12s, box-shadow 0.15s, border-color 0.15s; text-align: center; } .faction-card:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 6px 16px rgba(176,141,87,0.45); } .faction-card .fc-piece { width: clamp(56px, 40%, 92px); aspect-ratio: 1; margin: 0 auto 10px; } .faction-card .fc-piece img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(43,39,36,0.32)); } .faction-card .fc-name { font-family: 'Noto Serif KR', serif; font-weight: 900; font-size: 1.15rem; letter-spacing: 0.04em; } .faction-card.chu .fc-name { color: var(--blue-deep); } .faction-card.han .fc-name { color: var(--red-deep); } .faction-card .fc-sub { display: block; font-size: 0.76rem; color: var(--ink-soft); margin-top: 3px; font-weight: 400; letter-spacing: 0.02em; } .faction-note { margin-top: 16px; text-align: center; font-size: 0.76rem; color: var(--ink-soft); letter-spacing: 0.02em; line-height: 1.5; } /* 모드 메뉴 (대국 방식 선택 현관) */ .mode-grid { display: flex; flex-direction: column; gap: 10px; } .mode-card { display: flex; align-items: center; gap: 14px; background: rgba(255,255,255,0.4); border: 1.5px solid var(--line); border-radius: 4px; padding: 14px 18px; cursor: pointer; transition: transform 0.12s, box-shadow 0.15s, border-color 0.15s, background 0.15s; text-align: left; } .mode-card:hover { transform: translateY(-2px); border-color: var(--gold); box-shadow: 0 6px 16px rgba(176,141,87,0.45); } .mode-card.mode-coming { opacity: 0.5; cursor: default; } .mode-card.mode-coming:hover { transform: none; border-color: var(--line); box-shadow: none; } .mode-icon { font-family: 'Ma Shan Zheng', 'Noto Serif KR', serif; font-size: 1.45rem; line-height: 1; flex-shrink: 0; width: 1.8rem; text-align: center; color: var(--ink-soft); } .mode-text { flex: 1; display: flex; flex-direction: column; gap: 2px; } .mode-name { font-family: 'Noto Serif KR', serif; font-weight: 800; font-size: 1.05rem; color: var(--ink); letter-spacing: 0.04em; } .mode-sub { font-size: 0.78rem; color: var(--ink-soft); letter-spacing: 0.01em; line-height: 1.4; } /* 강도 서브패널 — 모드 카드와 동일 스크롤 영역 안 */ .level-sub-panel { } /* 강도 선택 (작은 현관 — "오늘은 어떻게 두실까요?") */ .level-play { text-align: center; margin-bottom: 18px; } .level-play-label { display: inline-block; font-family: 'Gowun Batang', serif; font-size: 0.92rem; letter-spacing: 0.06em; color: var(--ink-soft); padding: 6px 18px; border: 1px solid var(--line); border-radius: 3px; background: rgba(255,255,255,0.28); } .level-grid { display: flex; flex-direction: column; gap: 11px; } .level-card { display: flex; align-items: center; gap: 15px; background: rgba(255,255,255,0.4); border: 1.5px solid var(--line); border-radius: 4px; padding: 15px 18px; cursor: pointer; transition: transform 0.12s, box-shadow 0.15s, border-color 0.15s, background 0.15s; text-align: left; } .level-card:hover { transform: translateY(-2px); border-color: var(--gold); box-shadow: 0 6px 16px rgba(176,141,87,0.45); } .level-card.current { border-color: var(--gold); border-width: 2px; background: rgba(176,141,87,0.16); /* 클릭 순간 "선택되었습니다" 찰나의 피드백 — 금빛이 한 번 차오르고 가라앉음 */ animation: levelPick 0.42s ease-out; } @keyframes levelPick { 0% { transform: translateY(0); box-shadow: 0 0 0 rgba(176,141,87,0); } 40% { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(176,141,87,0.55); } 100% { transform: translateY(0); box-shadow: 0 3px 10px rgba(176,141,87,0.30); } } .level-card .lv-emoji { font-size: 1.7rem; line-height: 1; flex-shrink: 0; width: 1.9rem; text-align: center; } .level-card .lv-text { flex: 1; } .level-card .lv-name { font-family: 'Noto Serif KR', serif; font-weight: 800; font-size: 1.08rem; color: var(--ink); letter-spacing: 0.04em; } .level-card .lv-sub { font-size: 0.8rem; color: var(--ink-soft); margin-top: 3px; line-height: 1.45; letter-spacing: 0.01em; } .level-note { margin-top: 16px; text-align: center; font-size: 0.76rem; color: var(--ink-soft); letter-spacing: 0.02em; line-height: 1.5; } /* 튜토리얼 intro phase — 보드 클릭 차단 시각화 (설명 읽는 단계) */ .board-frame.tut-intro::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 3; background: rgba(43,39,36,0.12); border-radius: 3px; } .board-frame.tut-intro .piece { cursor: default; } /* 튜토리얼 ──────────────────────────────────────────── */ /* 기물 선택 오버레이 — board-frame 위 fixed */ .tutorial-piece-overlay { position: fixed; inset: 0; background: rgba(43,39,36,0.82); display: flex; align-items: center; justify-content: center; z-index: 210; backdrop-filter: blur(3px); padding: 16px; } .tutorial-piece-panel { width: 100%; max-width: 420px; background: linear-gradient(160deg, var(--paper), var(--paper-deep)); border: 2px solid var(--gold); border-radius: 5px; padding: 28px 24px; box-shadow: 0 16px 40px rgba(0,0,0,0.5); } .tutorial-piece-title { text-align: center; font-family: 'Noto Serif KR', serif; font-size: 1.1rem; color: var(--ink); margin-bottom: 20px; letter-spacing: 0.04em; } .tutorial-piece-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; } /* 패널이 좁아질 때(모바일 세로 등) 3열로 전환 — 4번째 카드 잘림 방지 */ @media (max-width: 360px) { .tutorial-piece-grid { grid-template-columns: repeat(3, 1fr); } } .tut-piece-card { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; /* 위 기준 정렬: 이미지가 텍스트 양에 밀리지 않게 */ gap: 4px; background: rgba(255,255,255,0.4); border: 1.5px solid var(--line); border-radius: 4px; padding: 10px 6px 8px; cursor: pointer; transition: transform 0.12s, border-color 0.15s, box-shadow 0.15s; text-align: center; min-width: 0; /* grid 셀이 콘텐츠 폭에 밀려 overflow되는 것 방지 */ } /* 그리드 셀: 같은 행 카드가 같은 높이가 되도록 stretch. 카드 내부에서 보조 줄 공간을 예약하므로 장·졸(보조 있음)과 나머지(보조 없음)의 박스 높이가 일치한다. */ .tutorial-piece-grid { align-items: stretch; } .tut-piece-card:hover { transform: translateY(-2px); border-color: var(--gold); box-shadow: 0 5px 14px rgba(176,141,87,0.4); } .tut-piece-card.tut-coming { opacity: 0.45; cursor: default; } .tut-piece-card.tut-coming:hover { transform: none; border-color: var(--line); box-shadow: none; } .tut-piece-img { width: min(72px, 100%); aspect-ratio: 1 / 1; /* 정사각 유지. 높이는 너비 따라 자동 → 카드 폭이 좁아지면(모바일) 이미지도 축소. height를 카드 높이(100%)에 묶지 않아 순환 의존 없음. */ height: auto; margin: 0 auto 4px; flex-shrink: 0; } .tut-piece-img img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(43,39,36,0.28)); } .tut-piece-name { font-size: 0.7rem; color: var(--ink-soft); letter-spacing: 0.01em; line-height: 1.3; } /* 기물 선택 카드 보조 라벨 — 진영별 다른 글자(장 楚·漢, 졸 兵). 작지만 읽히는 보조 정보(고연령 대비로 너무 흐리지 않게). ★ 모든 카드가 보조 줄 높이를 동일하게 차지(빈 placeholder 포함) → 7개 카드 높이·이미지 정렬 통일, 넘침 없음. */ .tut-piece-sub { font-size: 0.64rem; color: var(--ink-soft); opacity: 0.82; letter-spacing: 0.04em; line-height: 1.2; margin-top: 2px; min-height: 1.2em; /* 보조 줄 영역 높이 고정 — 빈 placeholder도 동일 높이 차지 */ } .tut-piece-sub.is-empty { visibility: hidden; } /* 보조 글자 없는 카드: 공간은 유지, 글자만 숨김 */ /* 튜토리얼 사이드 패널 */ .tutorial-side-panel { display: flex; flex-direction: column; gap: 14px; padding: 14px 0 0; } .tut-desc { /* 튜토리얼 설명문 — 7개 언어 확장 대비 다국어 한자 자형 폴백. 기물 한자(.tut-piece-sub)·기보(.tut-moves-left)는 KR 고정, 여기 영향 없음. */ font-family: 'Gowun Batang', var(--cjk-font), serif; font-size: 0.9rem; color: var(--ink-read); line-height: 1.7; letter-spacing: 0.02em; } .tut-buttons { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; } .tut-btn { width: 100%; font-family: 'Gowun Batang', serif; font-size: 0.9rem; padding: 10px; border-radius: 3px; cursor: pointer; letter-spacing: 0.04em; transition: background 0.15s, border-color 0.15s; } .tut-next-piece { background: rgba(176,141,87,0.12); border: 1.5px solid var(--gold); color: var(--ink); } .tut-next-piece:hover { background: rgba(176,141,87,0.25); } .tut-reset { background: rgba(176,141,87,0.15); border: 1.5px solid var(--gold); color: var(--ink); } .tut-reset:hover { background: rgba(176,141,87,0.3); } .tut-moves-left { font-family: 'Noto Serif KR', serif; font-size: 1.05rem; font-weight: 700; color: var(--ink); text-align: center; padding: 10px 0 4px; letter-spacing: 0.06em; } .tut-result { padding: 14px 0 8px; text-align: center; } .tut-result-title { font-family: 'Noto Serif KR', serif; font-size: 1.3rem; font-weight: 900; letter-spacing: 0.1em; margin-bottom: 6px; } .tut-result-success .tut-result-title { color: var(--blue-deep); } .tut-result-fail .tut-result-title { color: var(--ink-soft); } .tut-result-msg { font-family: 'Gowun Batang', var(--cjk-font), serif; font-size: 0.88rem; color: var(--ink-soft); line-height: 1.6; } .tut-exit { background: rgba(43,39,36,0.07); border: 1px dashed var(--line); color: var(--ink-soft); } .tut-exit:hover { background: rgba(43,39,36,0.14); } .tut-btn-primary { background: rgba(31,78,95,0.10); border: 1.5px solid var(--blue); color: var(--blue-deep); font-weight: 600; } .tut-btn-primary:hover { background: rgba(31,78,95,0.20); } /* 설정 버튼 — 타이틀바 우측 */ .settings-btn { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid rgba(107,93,72,0.14); border-radius: 50%; cursor: pointer; color: var(--ink-soft); font-size: 1rem; opacity: 0.75; transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s; flex: none; padding: 0; letter-spacing: 0; } .settings-btn:hover { background: rgba(176,141,87,0.15); border-color: var(--gold); color: var(--ink); opacity: 1; } /* 전역 button:active의 transform 간섭 차단 — top:50%+translateY(-50%) 와 충돌 방지 */ .settings-btn:active { transform: translateY(-50%); } /* 설정 드롭다운 */ .settings-dropdown { position: absolute; top: calc(100% + 6px); right: 0; background: linear-gradient(160deg, var(--paper), var(--paper-deep)); border: 1.5px solid var(--gold); border-radius: 4px; padding: 10px 0; min-width: 160px; box-shadow: 0 8px 24px rgba(43,39,36,0.28); z-index: 300; display: none; animation: fadein 0.18s; } .settings-dropdown.open { display: block; } .settings-section-label { font-family: 'Gowun Batang', var(--cjk-font), serif; font-size: 0.7rem; color: var(--ink-soft); letter-spacing: 0.08em; padding: 4px 16px 6px; border-bottom: 1px solid rgba(107,93,72,0.2); margin-bottom: 4px; } .lang-btn { display: block; width: 100%; font-family: 'Gowun Batang', var(--cjk-font), serif; font-size: 0.84rem; padding: 8px 16px; background: transparent; border: none; border-radius: 0; color: var(--ink-soft); cursor: pointer; letter-spacing: 0.04em; text-align: left; transition: background 0.12s, color 0.12s; flex: none; } .lang-btn:hover { background: rgba(176,141,87,0.15); color: var(--ink); } .lang-btn.active { color: var(--ink); font-weight: 700; background: rgba(176,141,87,0.12); } .lang-btn.active::before { content: '✓ '; color: var(--gold); } /* 드롭다운 열려있을 때 바깥 클릭 닫기용 오버레이 */ .settings-backdrop { display: none; position: fixed; inset: 0; z-index: 299; } .settings-backdrop.open { display: block; } /* 설정 드롭다운 구분선 */ .settings-divider { height: 1px; background: rgba(107,93,72,0.2); margin: 6px 0; } /* 설정 하단 About / Credits 링크 (드롭다운 안의 작은 버튼) */ .settings-about-link { display: block; width: 100%; font-family: 'Gowun Batang', var(--cjk-font), serif; font-size: 0.78rem; padding: 7px 16px; background: transparent; border: none; color: var(--ink-soft); cursor: pointer; letter-spacing: 0.04em; text-align: center; opacity: 0.82; transition: background 0.12s, color 0.12s, opacity 0.12s; } .settings-about-link:hover { background: rgba(176,141,87,0.12); color: var(--ink); opacity: 1; } /* About 오버레이 — 규칙 오버레이(.rules-*) 스타일 재사용, 번호 없는 섹션만 보정 */ .about-section { padding-left: 0; /* 번호(.rules-num)가 없으므로 왼쪽 여백 제거 */ } .about-section .rules-section-body { white-space: pre-line; /* 본문 \n 줄바꿈 살림(크레딧 2줄) */ } .about-link { display: inline-block; margin-top: 8px; font-size: 0.84rem; color: var(--blue); text-decoration: none; border-bottom: 1px solid rgba(31,78,95,0.4); transition: color 0.12s, border-color 0.12s; } .about-link:hover { color: var(--blue-deep); border-bottom-color: var(--blue-deep); } /* 장기판 배경 테마 — board-frame에 클래스로 전환 */ /* 기본(산수화)은 기존 ::before 그대로 */ .board-frame.bg-simple::before { background: #ece8df; } .board-frame.bg-simple.flipped::before { background: #ece8df; } /* 원목 — 무방향 텍스처, 정방향/뒤집기 동일 이미지 고정 */ .board-frame.bg-wood::before, .board-frame.bg-wood.flipped::before { background: linear-gradient(rgba(248,240,224,0.04), rgba(248,240,224,0.04)), url('assets/board/board-bg-wood.png'); background-size: cover; background-position: center; } .board-frame.bg-wood { --move-dot-color: rgba(74,52,32,0.85); --move-dot-outline: rgba(248,240,224,0.7); --move-dot-glow: rgba(74,52,32,0.4); } /* 십장생 — 장식 테두리, flip 없이 한 장 고정 (판 뒤집혀도 테두리는 그대로) */ .board-frame.bg-sipjangsaeng::before, .board-frame.bg-sipjangsaeng.flipped::before { background: linear-gradient(rgba(248,240,224,0.05), rgba(248,240,224,0.05)), url('assets/board/board-bg-sipjangsaeng.png'); background-size: cover; background-position: center; } /* 한지 — 질감 있는 미니멀 배경 (심플의 상위호환). 무방향이라 flip 동일 고정 */ .board-frame.bg-paper::before, .board-frame.bg-paper.flipped::before { background: url('assets/board/board-bg-paper.png'); background-size: cover; background-position: center; } /* 항복 확인 */ .resign-confirm { display: none; flex-direction: column; gap: 8px; padding: 11px 12px; background: rgba(158,43,37,0.06); border: 1px solid rgba(158,43,37,0.35); border-radius: 2px; } .resign-confirm.show { display: flex; animation: fadein 0.2s; } .resign-confirm .rc-text { font-size: 0.84rem; color: var(--red-deep); text-align: center; letter-spacing: 0.02em; } .resign-confirm .rc-buttons { display: flex; gap: 8px; } .resign-confirm button { flex: 1; font-family: 'Gowun Batang', serif; font-size: 0.84rem; padding: 8px; border-radius: 2px; cursor: pointer; letter-spacing: 0.05em; transition: background 0.15s; } .resign-confirm .rc-yes { background: rgba(158,43,37,0.85); color: #f3ead9; border: 1px solid var(--red-deep); } .resign-confirm .rc-yes:hover { background: var(--red-deep); } .resign-confirm .rc-no { background: rgba(43,39,36,0.05); color: var(--ink); border: 1px solid var(--line); } .resign-confirm .rc-no:hover { background: rgba(176,141,87,0.18); } /* ── 장기 규칙 오버레이 ────────────────────────────────── */ .rules-overlay { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: 24px; } .rules-backdrop { position: absolute; inset: 0; background: rgba(43,39,36,0.5); backdrop-filter: blur(2px); animation: fadein 0.2s; } .rules-panel { position: relative; z-index: 1; width: min(560px, 100%); max-height: min(80vh, 720px); display: flex; flex-direction: column; /* 문장형 모달(규칙·About) 폰트 체인: 라틴·한글은 Gowun Batang, 그 폰트에 없는 한자 글리프는 언어별 CJK 폰트로 폴백(--cjk-font, 위 html[lang]). 보드·기물·기보는 여기 영향 없음(별도 스코프). */ font-family: 'Gowun Batang', var(--cjk-font), serif; background: linear-gradient(160deg, var(--paper), var(--paper-deep)); border: 1.5px solid var(--gold); border-radius: 8px; box-shadow: 0 18px 48px rgba(43,39,36,0.4); animation: fadein 0.22s; overflow: hidden; } .rules-head { flex: 0 0 auto; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); } .rules-head-text { min-width: 0; } .rules-title { margin: 0; font-size: 1.25rem; font-weight: 700; color: var(--ink); letter-spacing: 0.02em; } .rules-subtitle { margin: 4px 0 0; font-size: 0.82rem; line-height: 1.4; color: var(--ink-soft); font-weight: 400; } .rules-close { flex: 0 0 auto; background: none; border: none; font-size: 1.2rem; line-height: 1; color: var(--ink-soft); cursor: pointer; padding: 4px 8px; border-radius: 4px; transition: background 0.15s, color 0.15s; } .rules-close:hover { background: rgba(176,141,87,0.18); color: var(--ink); } .rules-body { flex: 1 1 auto; overflow-y: auto; padding: 8px 20px 20px; } .rules-section { position: relative; padding: 16px 0 14px 34px; border-bottom: 1px solid rgba(107,93,72,0.18); } .rules-section:last-child { border-bottom: none; } .rules-num { position: absolute; left: 0; top: 17px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; color: var(--paper); background: var(--gold); border-radius: 50%; } .rules-section-title { margin: 0 0 6px; font-size: 1.02rem; font-weight: 700; color: var(--ink); } .rules-section-body { margin: 0; font-size: 0.93rem; line-height: 1.62; color: var(--ink-read); } .rules-section-ex { margin: 8px 0 0; padding-left: 10px; border-left: 2px solid var(--gold); } .rules-ex-label { display: block; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em; color: var(--gold); margin-bottom: 2px; } .rules-ex-text { margin: 0; font-size: 0.84rem; line-height: 1.5; color: var(--ink-soft); font-style: italic; } @media (max-width: 480px) { .rules-overlay { padding: 12px; } .rules-panel { max-height: 88vh; } .rules-head { padding: 13px 16px; } .rules-title { font-size: 1.12rem; } .rules-body { padding: 6px 16px 16px; } .rules-section { padding-left: 30px; } .about-section { padding-left: 0; } }