/* ========================================================================== 탈모.xyz — 알록달록 둥근 UI 글꼴: 천리마체 Round (LB=본문, B=제목). 자간은 기본이 넓어 좁혀 쓴다. 테마: , 글꼴: ========================================================================== */ /* ---------------- 글꼴 ---------------- 천리마체에는 한자가 없어 일본어는 시스템 글꼴로 넘긴다(unicode-range로 차단). ------------------------------------- */ @font-face { font-family: 'ChonRiMa'; src: url('/assets/fonts/chonrima-round-lb.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0020-007E, U+00A0-00FF, U+2010-2027, U+2030-205E, U+20A0-20BF, U+2190-2193, U+25A0-25FF, U+3000-303F, U+3130-318F, U+AC00-D7A3, U+FF01-FF5E; } @font-face { font-family: 'ChonRiMa'; src: url('/assets/fonts/chonrima-round-b.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0020-007E, U+00A0-00FF, U+2010-2027, U+2030-205E, U+20A0-20BF, U+2190-2193, U+25A0-25FF, U+3000-303F, U+3130-318F, U+AC00-D7A3, U+FF01-FF5E; } :root { /* ---- 라이트 ---- */ --bg: #FFFBF2; --surface: #FFFFFF; --surface-2: #F6F1E6; --border: #EDE2CE; --border-strong: #DFCFB2; --ink: #2C2A26; --ink-2: #6E6862; --ink-3: #9A938B; --green: #16B364; --green-d: #0E8F4E; --green-soft: #DFF5E8; --yellow: #FFC93C; --yellow-d: #E0A400; --yellow-soft: #FFF3D4; --sky: #35B3EF; --sky-d: #1D93CC; --sky-soft: #DDF1FC; --pink: #FF7EA0; --pink-d: #E85C81; --pink-soft: #FFE3EA; --purple: #9B7BF0; --purple-soft: #EDE6FF; --orange: #FF8A3D; --orange-d: #E86F20; --red: #EF4E4E; --red-soft: #FFE4E4; --gold: #B8860B; --accent: var(--green); --accent-d: var(--green-d); --accent-soft: var(--green-soft); --shadow: 0 2px 0 var(--border), 0 8px 20px rgba(44, 42, 38, 0.06); --shadow-pop: 0 3px 0 var(--border-strong), 0 16px 34px rgba(44, 42, 38, 0.13); --r-xl: 28px; --r-lg: 22px; --r-md: 16px; --r-sm: 12px; --font: 'ChonRiMa', -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Hiragino Sans", "Yu Gothic UI", "Noto Sans KR", sans-serif; color-scheme: light; } [data-theme="dark"] { --bg: #16151A; --surface: #1F1E25; --surface-2: #292731; --border: #33303C; --border-strong: #46424F; --ink: #F0EDE6; --ink-2: #A9A3B0; --ink-3: #77717F; --green: #35D48A; --green-d: #24B573; --green-soft: rgba(53, 212, 138, 0.16); --yellow: #FFD35C; --yellow-d: #E5B33B; --yellow-soft: rgba(255, 211, 92, 0.15); --sky: #5AC8FF; --sky-d: #38A9E5; --sky-soft: rgba(90, 200, 255, 0.15); --pink: #FF93B0; --pink-d: #E8718F; --pink-soft: rgba(255, 147, 176, 0.15); --purple: #B49BFF; --purple-soft: rgba(180, 155, 255, 0.15); --orange: #FF9F5C; --orange-d: #E8823C; --red: #FF7070; --red-soft: rgba(255, 112, 112, 0.16); --gold: #E0B44A; --shadow: 0 2px 0 rgba(0, 0, 0, 0.35), 0 8px 20px rgba(0, 0, 0, 0.32); --shadow-pop: 0 3px 0 rgba(0, 0, 0, 0.4), 0 16px 34px rgba(0, 0, 0, 0.45); color-scheme: dark; } /* JS 미동작 환경 폴백 */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bg: #16151A; --surface: #1F1E25; --surface-2: #292731; --border: #33303C; --border-strong: #46424F; --ink: #F0EDE6; --ink-2: #A9A3B0; --ink-3: #77717F; --green: #35D48A; --green-d: #24B573; --green-soft: rgba(53, 212, 138, 0.16); --yellow: #FFD35C; --yellow-d: #E5B33B; --yellow-soft: rgba(255, 211, 92, 0.15); --sky: #5AC8FF; --sky-d: #38A9E5; --sky-soft: rgba(90, 200, 255, 0.15); --pink: #FF93B0; --pink-d: #E8718F; --pink-soft: rgba(255, 147, 176, 0.15); --purple: #B49BFF; --purple-soft: rgba(180, 155, 255, 0.15); --orange: #FF9F5C; --orange-d: #E8823C; --red: #FF7070; --red-soft: rgba(255, 112, 112, 0.16); --gold: #E0B44A; --shadow: 0 2px 0 rgba(0,0,0,0.35), 0 8px 20px rgba(0,0,0,0.32); --shadow-pop: 0 3px 0 rgba(0,0,0,0.4), 0 16px 34px rgba(0,0,0,0.45); color-scheme: dark; } } /* 일본어: 한자가 없는 글꼴이라 시스템 글꼴로 통일하고 자간도 되돌린다 */ [data-font="system"] body, [data-font="system"] .logo, [data-font="system"] .btn { font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic UI", "Noto Sans JP", sans-serif; letter-spacing: 0; } /* ---------------- 기본 ---------------- */ * { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font); /* 천리마체는 기본 자간이 넓어 좁혀 쓴다 */ letter-spacing: -0.035em; word-spacing: -0.04em; color: var(--ink); background-color: var(--bg); min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; line-height: 1.6; } img { max-width: 100%; } a { color: inherit; text-decoration: none; } button { font-family: inherit; letter-spacing: inherit; cursor: pointer; color: inherit; } input { font-family: inherit; letter-spacing: inherit; } button, a, input, select { touch-action: manipulation; } :focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; border-radius: 6px; } /* 영문은 좁힌 자간을 쓰지 않는다 (한글에 맞춘 값이라 영문엔 너무 붙는다) */ html[lang="en"] body { letter-spacing: normal; word-spacing: normal; } .lat { letter-spacing: normal; } /* 숫자 묶음: 이 글꼴은 쉼표도 반각 폭 중앙에 놓여 "2, 564"처럼 벌어져 보인다 */ .stat-chip b, .board-lv, #rateText, .cost-row b, .lv-badge { letter-spacing: -0.09em; } .wrap { width: min(1020px, 100% - 32px); margin-inline: auto; } /* ---------------- 헤더 ---------------- */ .site-head { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 2px solid var(--border); } .head-in { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; } .logo { display: inline-flex; align-items: center; } .logo img { height: 38px; width: auto; display: block; } /* 어두운 화면에서는 검은 로고가 묻히므로 흑백을 뒤집는다 */ [data-theme="dark"] .logo img { filter: invert(1); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .logo img { filter: invert(1); } } /* 천리마체의 마침표·라틴 글자는 한글 폭에 맞춰 사이드베어링이 넓다. 로고의 ".xyz"만 시스템 산세리프로 찍어 도메인처럼 붙여 보이게 한다. */ .tld { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-weight: 800; letter-spacing: -0.02em; margin-left: -0.02em; } .head-right { display: flex; align-items: center; gap: 7px; } .icon-btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--border); background: var(--surface); border-radius: 14px; font-size: 1.05rem; flex-shrink: 0; transition: transform 0.1s, border-color 0.15s; } .icon-btn:hover { border-color: var(--border-strong); } .icon-btn:active { transform: translateY(2px); } .lang-sel { appearance: none; border: 2px solid var(--border); background-color: var(--surface); color: var(--ink); border-radius: 14px; height: 40px; padding: 0 28px 0 12px; font-family: inherit; letter-spacing: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239A938B' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; } .lang-sel:hover { border-color: var(--border-strong); } .auth-area { display: flex; align-items: center; gap: 7px; } .auth-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 2px solid var(--border); border-radius: 999px; height: 40px; padding: 0 14px 0 5px; font-size: 0.87rem; font-weight: 700; max-width: 175px; transition: border-color 0.15s; } .auth-chip b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; } .auth-chip:hover { border-color: var(--green); } .auth-chip-face { width: 28px; height: 28px; border-radius: 50%; background: var(--yellow); color: #6B4A00; font-size: 0.85rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } /* ---------------- 버튼 (통통한 젤리) ---------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: 1rem; white-space: nowrap; color: #fff; border: 0; border-radius: 16px; padding: 0 22px; min-height: 46px; user-select: none; -webkit-user-select: none; transition: transform 0.08s, box-shadow 0.08s, filter 0.15s; } .btn:hover:not(:disabled) { filter: brightness(1.05); } .btn:active:not(:disabled) { transform: translateY(3px); } .btn:disabled { opacity: 0.45; cursor: not-allowed; } .btn-primary { background: var(--green); box-shadow: 0 4px 0 var(--green-d); } .btn-primary:active:not(:disabled) { box-shadow: 0 1px 0 var(--green-d); } .btn-coral { background: var(--orange); box-shadow: 0 4px 0 var(--orange-d); } .btn-coral:active:not(:disabled) { box-shadow: 0 1px 0 var(--orange-d); } .btn-yellow { background: var(--yellow); color: #6B4A00; box-shadow: 0 4px 0 var(--yellow-d); } .btn-yellow:active:not(:disabled) { box-shadow: 0 1px 0 var(--yellow-d); } .btn-mint { background: var(--sky); box-shadow: 0 4px 0 var(--sky-d); } .btn-mint:active:not(:disabled) { box-shadow: 0 1px 0 var(--sky-d); } .btn-ghost { background: var(--surface); color: var(--ink-2); border: 2px solid var(--border); box-shadow: none; } .btn-ghost:hover:not(:disabled) { border-color: var(--border-strong); color: var(--ink); filter: none; } .btn-ghost:active:not(:disabled) { transform: translateY(2px); } .btn-sm { min-height: 40px; padding: 0 16px; font-size: 0.87rem; border-radius: 14px; } /* 헤더 줄에서는 두께 그림자가 4px 더 커 보여 언어선택·테마단추와 높이가 어긋난다. 작은 버튼은 평평하게 두고 눌림만 남긴다. */ .btn-sm, .btn-sm:active:not(:disabled) { box-shadow: none; } .btn-sm:active:not(:disabled) { transform: translateY(2px); } .btn-lg { min-height: 56px; padding: 0 34px; font-size: 1.15rem; border-radius: 18px; } /* ---------------- 메인 섹션 ---------------- */ main { flex: 1; } .section-title { font-size: 1.35rem; font-weight: 700; margin: 30px 0 14px; display: flex; align-items: center; gap: 9px; } .section-title::before { content: ''; width: 8px; height: 22px; border-radius: 4px; background: var(--green); } .section-title .count { font-style: normal; font-size: 0.8rem; font-weight: 700; color: var(--ink-3); background: var(--surface-2); border-radius: 999px; padding: 3px 10px; } /* 메인 게임 목록 */ .game-grid { margin-bottom: 60px; } .game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 14px; } .gcard { background: var(--surface); border: 2px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); transition: transform 0.14s ease, border-color 0.14s, box-shadow 0.14s; } .gcard:hover { transform: translateY(-3px); border-color: var(--green); box-shadow: var(--shadow-pop); } .gcard-thumb { position: relative; aspect-ratio: 4 / 3; background: linear-gradient(160deg, var(--sky-soft), var(--purple-soft)); display: flex; align-items: center; justify-content: center; } .thumb-art { font-size: 3.1rem; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.18)); } .thumb-star { position: absolute; top: 10px; right: 12px; font-size: 1rem; color: var(--yellow); } .gcard-body { padding: 11px 13px 14px; } .gcard-body h3 { font-size: 1rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gcard-body p { font-size: 0.79rem; color: var(--ink-3); margin-top: 1px; } .board-rank.top { color: var(--yellow-d); } /* 포털: 왼쪽 게임 목록 + 오른쪽 랭킹 */ .game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 14px; } .gcard { background: var(--surface); border: 2px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); transition: transform 0.14s ease, border-color 0.14s, box-shadow 0.14s; } .gcard:hover { transform: translateY(-3px); border-color: var(--green); box-shadow: var(--shadow-pop); } .gcard-thumb { position: relative; aspect-ratio: 4 / 3; background: linear-gradient(160deg, var(--sky-soft), var(--purple-soft)); display: flex; align-items: center; justify-content: center; } .thumb-art { font-size: 3.1rem; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.18)); } .thumb-star { position: absolute; top: 10px; right: 12px; font-size: 1rem; color: var(--yellow); } .gcard-body { padding: 11px 13px 14px; } .gcard-body h3 { font-size: 1rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gcard-body p { font-size: 0.79rem; color: var(--ink-3); margin-top: 1px; } .board-rank.top { color: var(--yellow-d); } /* 강화 단계 미리보기 */ /* 지금 내가 서 있는 단계 */ /* ---------------- 푸터 ---------------- */ .site-foot { border-top: 2px solid var(--border); padding: 26px 0 34px; text-align: center; color: var(--ink-3); font-size: 0.83rem; } .foot-copy { font-weight: 700; color: var(--ink-2); } .foot-rights { margin-top: 2px; font-size: 0.78rem; } /* 단추가 아니라 밑줄 걸린 글 링크 */ .foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin-top: 10px; } .foot-links a { display: inline-flex; align-items: center; gap: 5px; font-size: 0.8rem; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--border-strong); transition: color 0.15s, text-decoration-color 0.15s; } .foot-links a:hover { color: var(--green-d); text-decoration-color: currentColor; } .gh-mark { width: 14px; height: 14px; flex-shrink: 0; } /* ---------------- 인증 / 프로필 ---------------- */ .auth-card { background: var(--surface); border: 2px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow); max-width: 420px; margin: 40px auto 60px; padding: 32px 28px; } .auth-card h1 { font-size: 1.5rem; font-weight: 700; text-align: center; margin-bottom: 22px; } .field { margin-bottom: 15px; } .field label { display: block; font-size: 0.86rem; font-weight: 700; margin-bottom: 6px; } .field input { width: 100%; border: 2px solid var(--border); border-radius: var(--r-sm); background: var(--bg); padding: 0 14px; min-height: 48px; font-size: 1rem; color: var(--ink); transition: border-color 0.15s, background-color 0.15s; } .field input:focus { outline: none; border-color: var(--green); background: var(--surface); } .field input:disabled { opacity: 0.5; } .field .hint { font-size: 0.76rem; color: var(--ink-3); margin-top: 5px; } .form-err, .form-ok { display: none; border-radius: var(--r-sm); padding: 11px 14px; font-size: 0.86rem; font-weight: 700; margin-bottom: 15px; } .form-err { background: var(--red-soft); color: var(--red); } .form-ok { background: var(--green-soft); color: var(--green-d); } .form-err.show, .form-ok.show { display: block; } .auth-card .btn { width: 100%; margin-top: 6px; } .auth-alt { text-align: center; margin-top: 16px; font-size: 0.87rem; color: var(--ink-2); } .auth-alt a { color: var(--green-d); font-weight: 700; } .auth-alt a:hover { text-decoration: underline; } .profile-grid { max-width: 540px; margin: 40px auto 60px; display: grid; gap: 14px; } .pcard { background: var(--surface); border: 2px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 22px 24px; } .pcard h2 { font-size: 1.1rem; font-weight: 700; margin-bottom: 10px; } .prow { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 2px dotted var(--border); font-size: 0.94rem; } .prow:last-child { border-bottom: 0; padding-bottom: 0; } .prow .k { color: var(--ink-2); font-size: 0.86rem; } .prow b { font-weight: 700; } .nick-note { font-size: 0.86rem; font-weight: 700; border-radius: var(--r-sm); padding: 10px 14px; margin-bottom: 13px; } .nick-note.free { background: var(--yellow-soft); color: var(--yellow-d); } .nick-note.ready { background: var(--green-soft); color: var(--green-d); } .nick-note.wait { background: var(--surface-2); color: var(--ink-2); } /* ---------------- 게임 페이지 ---------------- */ .game-layout { display: grid; grid-template-columns: 1fr 300px; gap: 14px; margin: 22px 0 60px; align-items: start; } .stage-card { background: var(--surface); border: 2px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow); padding: 20px 20px 22px; } .stage-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .stage-title { font-size: 1.3rem; font-weight: 700; } .mode-tabs { display: inline-flex; background: var(--surface-2); border-radius: 15px; padding: 4px; gap: 3px; } .mode-tab { border: 0; background: transparent; font-size: 0.88rem; font-weight: 700; color: var(--ink-2); border-radius: 11px; padding: 8px 18px; min-height: 36px; transition: background-color 0.15s, color 0.15s, box-shadow 0.15s; } .mode-tab.mode-on { background: var(--green); color: #fff; box-shadow: 0 2px 0 var(--green-d); } #boardEasy.mode-on, #boardHard.mode-on { background: var(--sky); box-shadow: 0 2px 0 var(--sky-d); } .rule-text { font-size: 0.8rem; color: var(--ink-3); margin-top: 7px; } #stage { position: relative; margin: 14px 0; border-radius: var(--r-lg); background: linear-gradient(180deg, var(--sky-soft), var(--surface) 80%); border: 2px solid var(--border); padding: 24px 14px 22px; text-align: center; overflow: hidden; } .lv-badge { font-size: 2.5rem; font-weight: 700; color: var(--green-d); line-height: 1; } #pillWrap { height: 168px; display: flex; align-items: center; justify-content: center; margin: 12px 0 8px; } #pillImg { max-height: 140px; max-width: 220px; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.2)); } .pill-ph { width: 150px; height: 78px; border-radius: 999px; background: linear-gradient(90deg, hsl(var(--h, 150) 72% 58%) 50%, var(--surface) 50%); border: 4px solid var(--border-strong); box-shadow: inset 0 -8px 0 rgba(0, 0, 0, 0.08), 0 8px 14px rgba(0, 0, 0, 0.14); display: flex; align-items: center; justify-content: center; transform: rotate(-12deg); } .pill-ph b { font-size: 1.45rem; font-weight: 700; color: rgba(255, 255, 255, 0.95); text-shadow: 0 2px 3px rgba(0, 0, 0, 0.3); transform: rotate(12deg); } .pill-name { font-size: 1.2rem; font-weight: 700; margin-bottom: 12px; } .rate-row { display: flex; align-items: center; gap: 10px; max-width: 380px; margin: 0 auto 6px; font-size: 0.84rem; } .rate-row .k { color: var(--ink-3); white-space: nowrap; } .rate-track { flex: 1; height: 12px; border-radius: 999px; background: var(--surface-2); overflow: hidden; } .rate-fill { height: 100%; border-radius: 999px; background: var(--green); transition: width 0.3s ease; } .rate-fill.rate-max { background: linear-gradient(90deg, var(--yellow), var(--orange)); } #rateText { font-weight: 700; min-width: 46px; text-align: right; font-variant-numeric: tabular-nums; } .cost-row { display: flex; justify-content: center; gap: 18px; font-size: 0.84rem; color: var(--ink-3); margin-bottom: 2px; } .cost-row .money b { font-variant-numeric: tabular-nums; letter-spacing: -0.09em; } #costText { color: var(--ink-2); } #sellText { color: var(--gold); } .cost-row.cost-short #costText { color: var(--red); } .gold-warn { min-height: 1.2em; font-size: 0.78rem; font-weight: 700; color: var(--red); } /* 상점·조합소·가방으로 가는 줄 (원작의 좌우 상단 버튼 자리) */ .tool-row { display: flex; gap: 7px; margin-top: 10px; flex-wrap: wrap; } .tool-btn { display: inline-flex; align-items: center; gap: 5px; border: 2px solid var(--border); background: var(--surface); border-radius: 999px; padding: 6px 14px; min-height: 36px; font-size: 0.82rem; font-weight: 700; color: var(--ink-2); transition: border-color 0.15s, color 0.15s, transform 0.1s; } .tool-btn:hover { border-color: var(--green); color: var(--green-d); } .tool-btn:active { transform: translateY(2px); } /* 파괴 직후에만 나오는 살리기 / 줍기 줄 */ .action-row.dimmed { display: none; } .break-row { display: none; flex-direction: column; align-items: center; gap: 10px; margin: 14px auto 4px; } .break-row.show { display: flex; } .break-msg { font-size: 0.88rem; font-weight: 700; color: var(--red); } .break-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; } /* 다음 재료 예고 (원작 TIP) */ .tip-box { min-height: 1.2em; font-size: 0.78rem; font-weight: 700; color: var(--sky-d); } #btnPick { animation: pickPulse 1.1s ease-in-out infinite; } @keyframes pickPulse { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } /* 상점 / 조합소 / 가방 창 */ .modal { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 18px; background: rgba(20, 18, 16, 0.5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .modal.open { display: flex; } .modal-box { background: var(--surface); border: 2px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-pop); width: min(460px, 100%); max-height: 82vh; display: flex; flex-direction: column; overflow: hidden; } .modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px 12px; border-bottom: 2px solid var(--border); } .modal-head h2 { font-size: 1.15rem; font-weight: 700; } .modal-x { width: 34px; height: 34px; flex-shrink: 0; border: 2px solid var(--border); background: var(--surface); border-radius: 12px; color: var(--ink-2); font-size: 0.9rem; } .modal-x:hover { border-color: var(--border-strong); color: var(--ink); } .modal-body { padding: 10px 18px 18px; overflow-y: auto; } .modal-empty { color: var(--ink-3); font-size: 0.86rem; text-align: center; padding: 18px 0; } .trade-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 2px dotted var(--border); } .trade-row:last-child { border-bottom: 0; } .trade-info { min-width: 0; } .trade-info b { display: block; font-size: 0.92rem; font-weight: 700; } .trade-info span { display: block; font-size: 0.76rem; color: var(--ink-3); margin-top: 1px; } .trade-row .btn { flex-shrink: 0; } .bag-count { font-size: 0.95rem; font-weight: 700; color: var(--green-d); font-variant-numeric: tabular-nums; flex-shrink: 0; } .log-guard { color: var(--sky-d); font-weight: 700; } .log-shard { color: var(--purple); font-weight: 700; } /* 파괴 순간 튀는 파편 */ .shard { position: absolute; border-radius: 2px; background: var(--red); pointer-events: none; z-index: 6; animation: shardFly 0.85s cubic-bezier(0.15, 0.6, 0.4, 1) forwards; } .shard:nth-child(3n) { background: var(--orange); } .shard:nth-child(3n+1) { background: var(--ink-3); } @keyframes shardFly { from { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 1; } to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot)) scale(0.35); opacity: 0; } } .broke { animation: brokeOut 0.45s ease-in forwards; } @keyframes brokeOut { 0% { transform: scale(1); opacity: 1; } 35% { transform: scale(1.18); opacity: 0.85; } 100% { transform: scale(0.2) rotate(14deg); opacity: 0; } } .action-row { display: flex; gap: 10px; justify-content: center; max-width: 420px; margin: 16px auto 4px; } #btnEnhance { flex: 1.7; } #btnSell { flex: 1; } .stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; } .stat-chip { background: var(--bg); border: 2px solid var(--border); border-radius: var(--r-md); padding: 10px 8px; text-align: center; } .stat-chip .k { display: block; font-size: 0.7rem; font-weight: 700; color: var(--ink-3); margin-bottom: 1px; } .stat-chip b { font-size: 0.97rem; font-variant-numeric: tabular-nums; } .sound-btn { position: absolute; top: 10px; right: 10px; z-index: 6; border: 2px solid var(--border); background: var(--surface); border-radius: 999px; padding: 4px 12px; min-height: 32px; font-size: 0.75rem; color: var(--ink-2); font-weight: 700; } .sound-btn:hover { border-color: var(--border-strong); } .log-panel { margin-top: 14px; background: var(--bg); border: 2px solid var(--border); border-radius: var(--r-md); padding: 10px 14px; min-height: 148px; max-height: 220px; overflow-y: auto; } .log-panel ul { list-style: none; } .log-panel li { font-size: 0.84rem; color: var(--ink-2); padding: 6px 0; border-bottom: 2px dotted var(--border); animation: logIn 0.22s ease-out; } .log-panel li:last-child { border-bottom: 0; } .log-ok { color: var(--green-d); font-weight: 700; } .log-fail { color: var(--yellow-d); } .log-destroy { color: var(--red); font-weight: 700; } .log-sell { color: var(--gold); } .log-best { color: var(--sky-d); font-weight: 700; } @keyframes logIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } } .board-card { background: var(--surface); border: 2px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 20px; } .board-card h2 { font-size: 1.1rem; font-weight: 700; margin-bottom: 11px; } .board-card ol { min-height: 148px; } .board-tabs { margin-bottom: 10px; } .board-card ol { list-style: none; } .board-card li { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 2px dotted var(--border); font-size: 0.89rem; } .board-card li:last-child { border-bottom: 0; } .board-rank { width: 28px; text-align: center; font-weight: 700; font-size: 0.84rem; color: var(--ink-3); flex-shrink: 0; font-variant-numeric: tabular-nums; } .board-nick { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .board-lv { color: var(--green-d); font-weight: 700; font-variant-numeric: tabular-nums; } .board-empty { color: var(--ink-3); font-size: 0.85rem; justify-content: center; } .board-note { font-size: 0.78rem; color: var(--ink-3); margin-top: 9px; text-align: center; } /* ---------------- 게임 연출 ---------------- */ .shaking { animation: shake 0.1s linear infinite; } @keyframes shake { 0% { transform: translate(1.5px, -1px) rotate(-1.5deg); } 50% { transform: translate(-1.5px, 1px) rotate(1.5deg); } 100% { transform: translate(1px, 1.5px) rotate(0deg); } } .pop { animation: pop 0.45s cubic-bezier(0.2, 2.2, 0.4, 1); } @keyframes pop { 0% { transform: scale(0.85); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } } .flash-success { animation: flashOk 0.5s; } @keyframes flashOk { 0% { box-shadow: inset 0 0 0 200px var(--green-soft); } 100% { box-shadow: inset 0 0 0 200px transparent; } } .flash-fail { animation: flashNo 0.5s; } @keyframes flashNo { 0% { box-shadow: inset 0 0 0 200px var(--yellow-soft); } 100% { box-shadow: inset 0 0 0 200px transparent; } } .flash-destroy { animation: flashBoom 0.6s; } @keyframes flashBoom { 0% { box-shadow: inset 0 0 0 200px var(--red-soft); transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } 100% { box-shadow: inset 0 0 0 200px transparent; transform: translateX(0); } } .confetti { position: absolute; top: -12px; width: 9px; height: 13px; border-radius: 3px; animation: confettiFall 1.35s ease-in forwards; pointer-events: none; z-index: 5; } @keyframes confettiFall { to { transform: translateY(360px) rotate(560deg); opacity: 0; } } /* ---------------- 404 ---------------- */ .nf-card { text-align: center; margin: 70px auto 80px; max-width: 420px; } .nf-code { font-size: 4.5rem; font-weight: 700; color: var(--ink-3); line-height: 1.1; } .nf-card h1 { font-size: 1.6rem; font-weight: 700; margin: 10px 0 6px; } .nf-card p { color: var(--ink-2); margin-bottom: 22px; } /* ---------------- 반응형 ---------------- */ @media (max-width: 900px) { .game-layout { grid-template-columns: 1fr; } } @media (max-width: 640px) { .wrap { width: calc(100% - 24px); } .head-in { padding: 9px 0; } .logo img { height: 32px; } .head-right { gap: 5px; } .auth-chip { max-width: 116px; padding-right: 10px; } .section-title { font-size: 1.2rem; margin-top: 22px; } .game-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; } .thumb-art { font-size: 2.5rem; } .stage-card { padding: 15px 13px 17px; } #stage { padding: 20px 10px 18px; } .stats-row { grid-template-columns: repeat(2, 1fr); } .action-row { max-width: none; } .auth-card { margin-top: 24px; padding: 26px 18px; } .profile-grid { margin-top: 24px; } } @media (max-width: 480px) { /* 좁은 화면에서는 보조 버튼을 숨긴다 (로그인은 가입 페이지에서, 로그아웃은 내 정보에서) */ .auth-area .btn-ghost { display: none; } .lang-sel { padding: 0 24px 0 10px; font-size: 0.8rem; } } /* ---------------- 접근성 ---------------- */ @media (prefers-reduced-motion: reduce) { .shaking, .pop, .confetti, .flash-success, .flash-fail, .flash-destroy, .shard, .broke, #btnPick { animation: none !important; } .btn, .icon-btn, .gcard { transition: none; } } /* ---------------- 관리자 화면 ---------------- */ .admin-note { font-size: 0.85rem; color: var(--ink-2); margin-bottom: 14px; } .admin-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; } .admin-search { flex: 1; min-width: 220px; border: 2px solid var(--border); border-radius: var(--r-sm); background: var(--bg); color: var(--ink); padding: 0 14px; min-height: 42px; font-size: 0.9rem; } .admin-search:focus { outline: none; border-color: var(--green); background: var(--surface); } .admin-check { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 700; color: var(--ink-2); } /* 표가 넓어 좁은 화면에서는 가로로 민다 */ .admin-wrap { background: var(--surface); border: 2px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow-x: auto; margin-bottom: 60px; } .admin-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; } .admin-table th, .admin-table td { padding: 10px 12px; text-align: left; white-space: nowrap; border-bottom: 2px dotted var(--border); } .admin-table th { font-size: 0.76rem; font-weight: 700; color: var(--ink-3); background: var(--surface-2); position: sticky; top: 0; } .admin-table tr:last-child td { border-bottom: 0; } .admin-table .num, .admin-table .ip { font-variant-numeric: tabular-nums; letter-spacing: -0.05em; } .admin-table .ip { font-size: 0.8rem; color: var(--ink-2); } .admin-tag { margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: var(--green-soft); color: var(--green-d); font-size: 0.68rem; font-weight: 700; } .ip-dup { margin-left: 5px; padding: 2px 6px; border-radius: 999px; background: var(--red-soft); color: var(--red); font-size: 0.68rem; font-weight: 700; } .state-bad { color: var(--red); font-weight: 700; } .acts { display: flex; gap: 5px; } .admin-btn { border: 2px solid var(--border); background: var(--surface); color: var(--ink-2); border-radius: 999px; padding: 4px 11px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; } .admin-btn:hover { border-color: var(--border-strong); color: var(--ink); } .admin-btn.danger { color: var(--red); border-color: var(--red-soft); } .admin-btn.danger:hover { border-color: var(--red); } /* ---------------- 탈모찾기 ---------------- */ .find-stage { position: relative; margin: 14px 0 0; border-radius: var(--r-lg); background: linear-gradient(180deg, var(--surface-2), var(--surface) 80%); border: 2px solid var(--border); padding: 16px 12px 18px; text-align: center; overflow: hidden; } .find-hud { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .find-stat { display: inline-flex; align-items: baseline; gap: 6px; background: var(--bg); border: 2px solid var(--border); border-radius: 999px; padding: 5px 14px; font-size: 0.8rem; } .find-stat .k { color: var(--ink-3); font-size: 0.72rem; font-weight: 700; } .find-stat b { font-variant-numeric: tabular-nums; letter-spacing: -0.06em; } /* 하드는 16칸이라 좁은 화면에서 가로로 민다 */ .find-grid-wrap { overflow-x: auto; padding-bottom: 4px; } .find-grid { display: grid; grid-template-columns: repeat(var(--cols), 34px); gap: 3px; justify-content: center; margin: 0 auto; width: max-content; } .find-grid.big { grid-template-columns: repeat(var(--cols), 28px); } .cell { width: 34px; height: 34px; border: 2px solid var(--border-strong); background: var(--surface); border-radius: 8px; font-size: 0.95rem; font-weight: 700; line-height: 1; padding: 0; display: flex; align-items: center; justify-content: center; transition: background-color 0.1s, transform 0.06s; -webkit-user-select: none; user-select: none; } .find-grid.big .cell { width: 28px; height: 28px; font-size: 0.85rem; border-radius: 6px; } .cell:active { transform: scale(0.94); } .cell.open { background: var(--bg); border-color: var(--border); cursor: default; } .cell.flag { background: var(--sky-soft); border-color: var(--sky); } /* 광량 — 숫자가 클수록 눈부시게 */ .cell.l1 { color: #6E8BD8; } .cell.l2 { color: var(--sky-d); } .cell.l3 { color: var(--green-d); } .cell.l4 { color: var(--yellow-d); } .cell.l5 { color: var(--orange-d); } .cell.l6 { color: var(--pink-d); } .cell.l7 { color: var(--red); } .cell.l8 { color: var(--ink); background: var(--yellow); text-shadow: 0 0 6px rgba(255, 255, 255, 0.9); } /* 지뢰 칸만 흰 바탕 — 검은 스토리 공이 또렷하게 보이도록 (다크에서도 흰색 고정) */ .cell.story { background: #fff; border-color: var(--red); } .cell.story.boom { background: #fff; border-color: var(--red); box-shadow: 0 0 0 2px var(--red) inset; } .story-mark { width: 84%; height: auto; display: block; } .find-msg { min-height: 1.4em; margin-top: 10px; font-size: 0.9rem; font-weight: 700; } .find-msg.good { color: var(--green-d); } .find-msg.bad { color: var(--red); } .find-btns { display: flex; gap: 10px; justify-content: center; margin-top: 10px; } #flagBtn { opacity: 0.55; } #flagBtn.on { opacity: 1; } /* 눈뽕 */ .flash-white { animation: eyeBurn 0.55s; } @keyframes eyeBurn { 0% { box-shadow: inset 0 0 0 400px rgba(255, 255, 255, 0.92); } 100% { box-shadow: inset 0 0 0 400px transparent; } } @media (max-width: 640px) { .find-grid { grid-template-columns: repeat(var(--cols), 32px); } .find-grid.big { grid-template-columns: repeat(var(--cols), 26px); } .cell { width: 32px; height: 32px; } .find-grid.big .cell { width: 26px; height: 26px; } } @media (prefers-reduced-motion: reduce) { .flash-white { animation: none !important; } } .thumb-find { background: linear-gradient(160deg, var(--yellow-soft), var(--orange)); } /* 관리 화면 탭 */ .admin-tabs { margin-bottom: 14px; } .admin-select { flex: 0 0 auto; width: auto; padding-right: 30px; cursor: pointer; } .admin-table .score-val { font-weight: 700; } .admin-table .raw { color: var(--ink-2); font-size: 0.78rem; } /* ── 머리칼 먹기 ── */ .grow-grid { display: grid; grid-template-columns: repeat(var(--cols, 15), 1fr); gap: 2px; width: 100%; max-width: 460px; margin: 0 auto; padding: 3px; background: var(--border); border: 2px solid var(--border); border-radius: 14px; touch-action: none; } /* 빈 칸에도 바탕을 깔고 2px 틈으로 격자선을 낸다 */ .gcell { aspect-ratio: 1 / 1; border-radius: 3px; background: var(--surface); } .gcell.alt { background: var(--surface-2); } .gcell.g-body { background: var(--ink); border-radius: 4px; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.18); } .gcell.g-head { position: relative; background: var(--yellow); border-radius: 7px; overflow: hidden; box-shadow: 0 0 0 2px var(--yellow-d, var(--orange)); } .g-face { width: 100%; height: 100%; object-fit: contain; display: block; } /* 머리칼 한 가닥 */ .gcell.g-food { position: relative; } .g-food::before { content: ''; position: absolute; inset: 14%; border: 3px solid var(--ink); border-color: var(--ink) transparent transparent var(--ink); border-radius: 50% 0 50% 0; transform: rotate(12deg); } @keyframes talmo-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } } .shake { animation: talmo-shake 0.42s ease; } /* 방향 단추 — 손가락으로도 하게 */ .pad { display: grid; grid-template-columns: repeat(3, 46px); grid-template-rows: repeat(2, 46px); gap: 6px; justify-content: center; margin: 14px auto 4px; } .pad-btn { border: 2px solid var(--border); background: var(--surface); color: var(--ink-2); border-radius: 12px; font-size: 0.9rem; cursor: pointer; box-shadow: 0 2px 0 var(--border); user-select: none; } .pad-btn:active { transform: translateY(2px); box-shadow: none; } .pad-up { grid-column: 2; grid-row: 1; } .pad-left { grid-column: 1; grid-row: 2; } .pad-down { grid-column: 2; grid-row: 2; } .pad-right { grid-column: 3; grid-row: 2; } .thumb-grow { background: linear-gradient(160deg, var(--green-soft), var(--green)); } /* 관리 화면 — 머리칸 눌러 정렬 */ .admin-table th.sortable { cursor: pointer; user-select: none; white-space: nowrap; } .admin-table th.sortable:hover { color: var(--ink); } .admin-table th.sortable::after { content: '↕'; margin-left: 4px; opacity: 0.28; font-size: 0.75em; } .admin-table th.sort-asc::after { content: '↑'; opacity: 1; color: var(--green); } .admin-table th.sort-desc::after { content: '↓'; opacity: 1; color: var(--green); } /* ── AI가 알아서 만든 오락 표시 ── */ .ai-badge { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: flex; align-items: center; cursor: default; outline: none; } .ai-badge-mark { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px 6px 7px; border-radius: 999px; border: 2px solid var(--border); background: var(--surface); box-shadow: 0 3px 0 var(--border), 0 6px 14px rgba(0, 0, 0, 0.12); font-size: 0.76rem; font-weight: 700; color: var(--ink-2); line-height: 1; } .ai-badge-i { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 50%; border: 2px solid currentColor; font-size: 0.66rem; font-style: italic; font-weight: 700; } .ai-badge-ai { letter-spacing: 0.04em; } .ai-badge-tip { position: absolute; right: 0; bottom: calc(100% + 9px); width: max-content; max-width: min(74vw, 260px); padding: 8px 11px; border-radius: 10px; background: var(--ink); color: var(--surface); font-size: 0.78rem; line-height: 1.4; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s; pointer-events: none; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2); } .ai-badge-tip::after { content: ''; position: absolute; right: 18px; top: 100%; border: 6px solid transparent; border-top-color: var(--ink); } .ai-badge:hover .ai-badge-tip, .ai-badge:focus .ai-badge-tip, .ai-badge:focus-visible .ai-badge-tip { opacity: 1; visibility: visible; transform: translateY(0); } .ai-badge:hover .ai-badge-mark, .ai-badge:focus .ai-badge-mark { color: var(--ink); border-color: var(--border-strong); } /* 첫 화면 카드에도 같은 표시를 작게 */ .gcard-thumb .ai-tag { position: absolute; left: 10px; bottom: 9px; display: inline-flex; align-items: center; gap: 3px; padding: 3px 7px 3px 4px; border-radius: 999px; background: rgba(0, 0, 0, 0.42); color: #fff; font-size: 0.62rem; font-weight: 700; line-height: 1; letter-spacing: 0.03em; } .gcard-thumb .ai-tag i { display: inline-flex; align-items: center; justify-content: center; width: 12px; height: 12px; border: 1.5px solid currentColor; border-radius: 50%; font-size: 0.52rem; font-style: italic; } @media (max-width: 560px) { .ai-badge { right: 10px; bottom: 10px; } } /* ── 머리숱 합치기 ── */ .merge-grid { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 8px; width: 100%; max-width: 420px; margin: 0 auto; padding: 8px; background: var(--border); border: 2px solid var(--border); border-radius: 14px; } .mcell { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--surface-2); font-weight: 800; font-size: clamp(0.85rem, 4.4vw, 1.5rem); font-variant-numeric: tabular-nums; letter-spacing: -0.06em; color: var(--ink); } .mcell.tiny { font-size: clamp(0.6rem, 3vw, 1rem); } .mcell.pop { animation: talmo-pop 0.16s ease; } @keyframes talmo-pop { from { transform: scale(0.6); } to { transform: scale(1); } } .mcell.t1 { background: #FFF3D4; color: #6E6862; } .mcell.t2 { background: #FFE3A8; color: #6E6862; } .mcell.t3 { background: #FFC93C; color: #4A3E1F; } .mcell.t4 { background: #FF8A3D; color: #fff; } .mcell.t5 { background: #FF6B4A; color: #fff; } .mcell.t6 { background: #EF4E4E; color: #fff; } .mcell.t7 { background: #E0489B; color: #fff; } .mcell.t8 { background: #9B5BE0; color: #fff; } .mcell.t9 { background: #5B7BE0; color: #fff; } .mcell.t10 { background: #16B364; color: #fff; } .mcell.t11 { background: #0E8F4E; color: #fff; box-shadow: 0 0 0 3px var(--yellow) inset; } /* ── 탈모약 짝 맞추기 ── */ .pair-grid { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: 8px; width: 100%; max-width: 420px; margin: 0 auto; } .pair-grid.big { gap: 6px; max-width: 460px; } .pcard { aspect-ratio: 1 / 1; border: 2px solid var(--border); border-radius: 11px; background: var(--surface-2); cursor: pointer; box-shadow: 0 2px 0 var(--border); display: flex; align-items: center; justify-content: center; padding: 0; transition: background 0.12s ease, border-color 0.12s ease; } .pcard::before { content: ''; width: 42%; height: 42%; border-radius: 50%; border: 3px dashed var(--border-strong); opacity: 0.5; } .pcard.up::before, .pcard.done::before { display: none; } .pcard-face { font-size: clamp(1.1rem, 5.5vw, 1.9rem); line-height: 1; } .pcard.up { background: var(--surface); border-color: var(--green); } .pcard.done { background: var(--green-soft); border-color: var(--green); box-shadow: none; cursor: default; opacity: 0.72; } .pcard:active:not(.done) { transform: translateY(2px); box-shadow: none; } /* ── 가발 순서 ── */ .wig-pads { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; width: 100%; max-width: 330px; margin: 0 auto; } .wig-pads.six { grid-template-columns: repeat(3, 1fr); max-width: 420px; } .wig-pads.locked { pointer-events: none; } .wig { aspect-ratio: 1 / 1; border: 3px solid var(--border); border-radius: 16px; background: var(--surface-2); font-size: clamp(1.6rem, 8vw, 2.6rem); line-height: 1; cursor: pointer; opacity: 0.5; transition: opacity 0.09s ease, transform 0.09s ease; box-shadow: 0 3px 0 var(--border); } .wig:active { transform: translateY(2px); box-shadow: none; } .wig.lit { opacity: 1; transform: scale(1.05); border-color: var(--yellow); box-shadow: 0 0 0 4px var(--yellow-soft), 0 3px 0 var(--yellow-d); } .wig-pads.shake { animation: talmo-shake 0.42s ease; } .thumb-merge { background: linear-gradient(160deg, var(--yellow-soft), var(--red)); } .thumb-pair { background: linear-gradient(160deg, var(--green-soft), var(--mint, #5BC8E0)); } .thumb-echo { background: linear-gradient(160deg, #E7DBFF, #9B5BE0); } /* ── 칸 눌러 푸는 판 공통 ── */ .lights-grid, .flood-grid, .slide-grid { display: grid; grid-template-columns: repeat(var(--cols, 5), 1fr); width: 100%; margin: 0 auto; } /* 정수리 반사 끄기 */ .lights-grid { gap: 7px; max-width: 380px; } .lcell { aspect-ratio: 1 / 1; border: 2px solid var(--border); border-radius: 10px; background: var(--surface-2); cursor: pointer; box-shadow: 0 2px 0 var(--border); padding: 0; transition: background 0.1s ease, box-shadow 0.1s ease; } .lcell.on { background: var(--yellow); border-color: var(--yellow-d); box-shadow: 0 0 0 3px var(--yellow-soft), 0 2px 0 var(--yellow-d); } .lcell:active { transform: translateY(2px); } /* 가발 색 맞추기 */ .flood-grid { gap: 2px; max-width: 400px; padding: 4px; background: var(--border); border-radius: 12px; } .fcell { aspect-ratio: 1 / 1; border: 0; border-radius: 3px; padding: 0; cursor: pointer; } .pal { display: flex; gap: 9px; justify-content: center; margin: 14px 0 4px; flex-wrap: wrap; } .pal-btn { width: 42px; height: 42px; border: 3px solid var(--border); border-radius: 12px; cursor: pointer; box-shadow: 0 3px 0 var(--border); padding: 0; } .pal-btn:active { transform: translateY(2px); box-shadow: none; } .pal-btn.now { border-color: var(--ink); box-shadow: 0 0 0 3px var(--yellow-soft), 0 3px 0 var(--border-strong); } .c0 { background: #EF4E4E; } .c1 { background: #FFC93C; } .c2 { background: #16B364; } .c3 { background: #4A90E0; } .c4 { background: #9B5BE0; } .c5 { background: #FF8A3D; } /* 가르마 맞추기 */ .slide-grid { gap: 7px; max-width: 340px; } .scell { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; border: 2px solid var(--border); border-radius: 11px; background: var(--surface); box-shadow: 0 2px 0 var(--border); cursor: pointer; font-weight: 800; font-size: clamp(1rem, 6vw, 1.7rem); font-variant-numeric: tabular-nums; color: var(--ink); padding: 0; } .scell.fit { background: var(--green-soft); border-color: var(--green); color: var(--green-d); } .scell.hole { background: transparent; border-style: dashed; box-shadow: none; cursor: default; } .scell:active:not(.hole) { transform: translateY(2px); box-shadow: none; } .thumb-lights { background: linear-gradient(160deg, var(--yellow-soft), var(--yellow-d)); } .thumb-flood { background: linear-gradient(160deg, #FFD8D8, #4A90E0); } .thumb-slide { background: linear-gradient(160deg, var(--surface-2), var(--ink-2)); } /* ── 머리카락 잇기 ── */ .pipe-grid { display: grid; grid-template-columns: repeat(var(--cols, 5), 1fr); gap: 3px; width: 100%; max-width: 380px; margin: 0 auto; padding: 5px; background: var(--border); border-radius: 12px; } .pcell { aspect-ratio: 1 / 1; background: var(--surface-2); border: 0; border-radius: 5px; padding: 0; cursor: pointer; position: relative; } .pipe-box { position: absolute; inset: 0; } .pipe-box .arm { position: absolute; background: var(--ink-2); border-radius: 2px; } .pipe-box .a0 { left: 44%; right: 44%; top: 0; bottom: 50%; } .pipe-box .a1 { top: 44%; bottom: 44%; right: 0; left: 50%; } .pipe-box .a2 { left: 44%; right: 44%; bottom: 0; top: 50%; } .pipe-box .a3 { top: 44%; bottom: 44%; left: 0; right: 50%; } .pipe-box .hub { position: absolute; left: 34%; right: 34%; top: 34%; bottom: 34%; border-radius: 50%; background: var(--ink-2); } .pipe-box .hub.root { background: var(--orange); box-shadow: 0 0 0 3px var(--yellow-soft); } .pipe-box.lit .arm, .pipe-box.lit .hub { background: var(--green); } .pipe-box.lit .hub.root { background: var(--orange); } .pcell:active { transform: scale(0.94); } /* ── 머리카락 정렬 ── */ .sort-grid { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: 12px; width: 100%; max-width: 420px; margin: 0 auto; justify-items: center; } .tube { display: flex; flex-direction: column; gap: 3px; width: 100%; max-width: 64px; padding: 6px 5px; border: 3px solid var(--border); border-radius: 6px 6px 18px 18px; background: var(--surface-2); cursor: pointer; } .tube.picked { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); } .hair { height: 22px; border-radius: 5px; background: transparent; } .hair.empty { background: transparent; } .hair.up { transform: translateY(-5px); } .hair.h0 { background: #EF4E4E; } .hair.h1 { background: #FFC93C; } .hair.h2 { background: #16B364; } .hair.h3 { background: #4A90E0; } .hair.h4 { background: #9B5BE0; } .hair.h5 { background: #FF8A3D; } /* ── 빗질하기 ── */ .maze-grid { display: grid; grid-template-columns: repeat(var(--cols, 11), 1fr); gap: 0; width: 100%; max-width: 420px; margin: 0 auto; border: 3px solid var(--ink); border-radius: 8px; overflow: hidden; background: var(--surface); } .mzcell { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; font-size: clamp(0.4rem, 2.2vw, 0.9rem); line-height: 1; } .mzcell.wall { background: var(--ink); } .mzcell.goal { background: var(--green-soft); } .mzcell.me { background: var(--yellow-soft); } .thumb-pipe { background: linear-gradient(160deg, var(--green-soft), var(--orange)); } .thumb-sort { background: linear-gradient(160deg, #FFE3F1, #9B5BE0); } .thumb-maze { background: linear-gradient(160deg, var(--surface-2), var(--green-d)); } /* ── 스토리 잡기 ── */ .mole-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 10px; width: 100%; max-width: 360px; margin: 0 auto; } .hole { aspect-ratio: 1 / 1; border: 3px solid var(--border); border-radius: 50%; background: var(--surface-2); cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.14); font-size: 1.5rem; } .hole.up { background: var(--yellow-soft); border-color: var(--yellow-d); } .hole.hit { background: var(--red-soft); border-color: var(--red); } .mole-face { width: 78%; height: 78%; object-fit: contain; } .hole:active { transform: scale(0.95); } /* ── 탈모약 받기 ── */ .catch-grid { display: grid; grid-template-columns: repeat(var(--cols, 7), 1fr); gap: 2px; width: 100%; max-width: 380px; margin: 0 auto; padding: 4px; background: var(--surface-2); border: 2px solid var(--border); border-radius: 12px; } .ccell { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; border-radius: 4px; font-size: clamp(0.6rem, 3vw, 1.1rem); line-height: 1; } .ccell.hand { background: var(--yellow-soft); border-radius: 6px; } .ccell.bad { background: transparent; } .drop-face { width: 86%; height: 86%; object-fit: contain; } .pad.lr { grid-template-columns: repeat(2, 64px); grid-template-rows: 46px; } /* ── 머리숱 알아맞히기 ── */ .guess-log { list-style: none; width: 100%; max-width: 300px; margin: 0 auto; min-height: 60px; display: flex; flex-direction: column; gap: 5px; } .guess-log li { display: flex; justify-content: space-between; align-items: center; padding: 6px 12px; border-radius: 9px; background: var(--surface-2); font-variant-numeric: tabular-nums; } .gnum { font-weight: 700; letter-spacing: 0.14em; } .gres { font-size: 0.85rem; color: var(--ink-2); } .gres.all { color: var(--green); } .slot-row { display: flex; gap: 8px; justify-content: center; margin: 14px 0 10px; } .slot { width: 46px; height: 54px; display: flex; align-items: center; justify-content: center; border: 3px solid var(--border); border-radius: 10px; background: var(--surface); font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; } .slot.empty { border-style: dashed; color: var(--ink-2); } .numpad { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; width: 100%; max-width: 320px; margin: 0 auto 4px; } .numpad.wide { grid-template-columns: repeat(3, 1fr); max-width: 240px; } .numkey { padding: 12px 0; border: 2px solid var(--border); border-radius: 10px; background: var(--surface); font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; box-shadow: 0 2px 0 var(--border); } .numkey:disabled { opacity: 0.3; cursor: default; box-shadow: none; } .numkey:active:not(:disabled) { transform: translateY(2px); box-shadow: none; } .numkey.go { background: var(--green-soft); border-color: var(--green); color: var(--green-d); } /* 마지막 키가 줄 왼쪽에 혼자 떨어지지 않게 남은 칸을 다 차지한다 */ .numkey.wide { grid-column: 1 / -1; } .numpad.wide .numkey.go { grid-column: 1 / -1; } /* ── 약값 계산 ── */ .math-quiz { text-align: center; padding: 18px 0 6px; } .quiz { font-size: clamp(1.5rem, 8vw, 2.4rem); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; } .quiz-ans { margin-top: 10px; font-size: clamp(1.5rem, 8vw, 2.4rem); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--green); min-height: 1.2em; } .quiz-ans.empty { color: var(--ink-2); opacity: 0.4; } .thumb-mole { background: linear-gradient(160deg, #FFE0C2, var(--orange-d)); } .thumb-catch { background: linear-gradient(160deg, var(--green-soft), var(--yellow-d)); } .thumb-guess { background: linear-gradient(160deg, #DDE7FF, #4A90E0); } .thumb-math { background: linear-gradient(160deg, var(--surface-2), var(--red)); } .quiz.long { font-size: clamp(0.95rem, 4.4vw, 1.45rem); letter-spacing: -0.01em; } /* ── 수식 (교과서 꼴) ── */ .quiz.expr { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 6px; font-size: clamp(1.15rem, 5.5vw, 1.9rem); line-height: 1.15; } .quiz.expr .op { margin: 0 2px; } .quiz.expr .ask { margin-left: 14px; } /* 분수 — 가로줄 긋고 위아래로 */ .frac { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; margin: 0 3px; } .frac-n { border-bottom: 2px solid currentColor; padding: 0 0.4em 0.12em; } .frac-d { padding: 0.12em 0.4em 0; } /* lim 아래에 x→k */ .lim { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; line-height: 1; } .lim-b { font-size: 0.5em; margin-top: 1px; } /* ── 그래프 문제 ── */ .quiz.graph { flex-direction: column; gap: 8px; } .gph { width: 100%; max-width: 320px; height: auto; } .gph-grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 3; } .gph-axis { stroke: var(--ink-2); stroke-width: 1.5; } .gph-seg { stroke: var(--green); stroke-width: 3; stroke-linecap: round; } .gph-dot { fill: var(--ink); } .gph-open { fill: var(--surface); stroke: var(--ink); stroke-width: 2; } .gph-lab { fill: var(--ink-2); font-size: 11px; text-anchor: middle; } .gph-ylab { text-anchor: end; } .gph-ask { font-size: 0.8em; margin-top: 2px; } .gph-mark { stroke: var(--orange); stroke-width: 2; stroke-dasharray: 5 3; } .gph-ask { display: flex; align-items: center; justify-content: center; gap: 4px; } /* ── 첫 화면 갈래 ── */ .section-title.cat { margin-top: 8px; } .section-title.cat + .game-grid { margin-bottom: 34px; } /* ── 컴퓨터대국 판 ── */ .gomoku-grid, .othello-grid, .baduk-grid, .chess-grid { display: grid; grid-template-columns: repeat(var(--cols, 8), 1fr); width: 100%; margin: 0 auto; } /* 오목 — 줄 위에 놓는다 */ .gomoku-grid { gap: 0; max-width: 560px; padding: 14px; background: #E3B96B; border-radius: 10px; } .ocell { aspect-ratio: 1 / 1; border: 0; padding: 0; cursor: pointer; position: relative; background: transparent; } .gomoku-grid .ocell::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid rgba(60, 40, 10, 0.55); } .gomoku-grid .ocell::after { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px solid rgba(60, 40, 10, 0.55); } .ocell.me > i, .ocell.ai > i { display: none; } .ocell.me, .ocell.ai { z-index: 1; } .ocell.me::before, .ocell.ai::before, .ocell.me::after, .ocell.ai::after { border: 0; } .ocell.me { background: radial-gradient(circle at 34% 30%, #6a6a6a, #111 62%); border-radius: 50%; } .ocell.ai { background: radial-gradient(circle at 34% 30%, #fff, #cfcfcf 62%); border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25); } .ocell.last { box-shadow: 0 0 0 2px var(--orange); } .ocell.reply { box-shadow: 0 0 0 2px var(--red); } /* 오셀로 */ .othello-grid { gap: 2px; max-width: 460px; padding: 6px; background: #1F7A4C; border-radius: 10px; } .ocell.dark { background: #2E9C63; border-radius: 3px; } .ocell.dark.me { background: radial-gradient(circle at 34% 30%, #6a6a6a, #111 62%); border-radius: 50%; } .ocell.dark.ai { background: radial-gradient(circle at 34% 30%, #fff, #d8d8d8 62%); border-radius: 50%; } .ocell.can::after { content: ''; position: absolute; inset: 34%; border-radius: 50%; background: rgba(255, 255, 255, 0.4); } /* 바둑 */ .baduk-grid { gap: 0; max-width: 560px; padding: 16px; background: #E3B96B; border-radius: 10px; } .bcell { aspect-ratio: 1 / 1; border: 0; padding: 0; cursor: pointer; position: relative; background: transparent; } .bcell::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid rgba(60, 40, 10, 0.6); } .bcell::after { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px solid rgba(60, 40, 10, 0.6); } .bcell.l::before { left: 50%; } .bcell.r::before { right: 50%; } .bcell.t::after { top: 50%; } .bcell.b::after { bottom: 50%; } .bcell.star > span { position: absolute; left: 40%; right: 40%; top: 40%; bottom: 40%; background: rgba(60,40,10,0.85); border-radius: 50%; } .bcell.me, .bcell.ai { z-index: 1; } .bcell.me::before, .bcell.ai::before, .bcell.me::after, .bcell.ai::after { border: 0; } .bcell.me { background: radial-gradient(circle at 34% 30%, #6a6a6a, #111 62%); border-radius: 50%; } .bcell.ai { background: radial-gradient(circle at 34% 30%, #fff, #cfcfcf 62%); border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25); } .bcell.reply { box-shadow: 0 0 0 2px var(--red); } /* 체스 */ .chess-grid { gap: 0; max-width: 480px; border: 3px solid var(--ink); border-radius: 8px; overflow: hidden; } .chcell { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; border: 0; padding: 0; cursor: pointer; background: #F0D9B5; font-size: clamp(1.1rem, 5.5vw, 2rem); line-height: 1; color: #111; } .chcell.dark { background: #B58863; } .chcell.sel { box-shadow: inset 0 0 0 3px var(--green); } .chcell.reply { box-shadow: inset 0 0 0 3px var(--orange); } .chcell.can::after { content: ''; width: 26%; height: 26%; border-radius: 50%; background: rgba(0, 0, 0, 0.28); } .chcell.take { box-shadow: inset 0 0 0 3px var(--red); } .find-stat.wide { min-width: 0; } .thumb-gomoku { background: linear-gradient(160deg, #F4DFB8, #8B6B3A); } .thumb-othello { background: linear-gradient(160deg, #6FD9A3, #14663E); } .thumb-baduk { background: linear-gradient(160deg, #F4DFB8, #4A3520); } .thumb-chess { background: linear-gradient(160deg, #F0D9B5, #6B4327); } /* ── 스도쿠 ── */ .sudoku-grid { display: grid; grid-template-columns: repeat(9, 1fr); gap: 1px; width: 100%; max-width: 420px; margin: 0 auto; background: var(--border); border: 3px solid var(--ink); border-radius: 6px; overflow: hidden; } .sdcell { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; border: 0; padding: 0; cursor: pointer; background: var(--surface); font-size: clamp(0.75rem, 3.6vw, 1.2rem); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--green-d); } .sdcell.given { background: var(--surface-2); color: var(--ink); font-weight: 800; cursor: default; } .sdcell.pick { background: var(--yellow-soft); box-shadow: inset 0 0 0 2px var(--yellow-d); } .sdcell.bx { border-right: 2px solid var(--ink); } .sdcell.by { border-bottom: 2px solid var(--ink); } /* ── 낱말 찾기 ── */ .word-grid { display: grid; grid-template-columns: repeat(var(--cols, 8), 1fr); gap: 2px; width: 100%; max-width: 420px; margin: 0 auto; } .wdcell { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 4px; padding: 0; cursor: pointer; background: var(--surface-2); font-size: clamp(0.7rem, 3.4vw, 1.05rem); font-weight: 700; } .wdcell.found { background: var(--green-soft); color: var(--green-d); } .wdcell.pick { background: var(--yellow); } .word-list { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 14px 0 4px; } .wd-item { padding: 4px 10px; border-radius: 999px; background: var(--surface-2); border: 2px solid var(--border); font-size: 0.82rem; font-weight: 700; } .wd-item.done { background: var(--green-soft); border-color: var(--green); color: var(--green-d); text-decoration: line-through; opacity: 0.7; } /* ── 다른 칸 찾기 ── */ .odd-grid { display: grid; grid-template-columns: repeat(var(--cols, 2), 1fr); gap: 6px; width: 100%; max-width: 380px; margin: 0 auto; } .odcell { aspect-ratio: 1 / 1; border: 0; border-radius: 10px; padding: 0; cursor: pointer; } .odcell:active { transform: scale(0.96); } /* ── 배치 기억 ── */ .recall-grid { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: 8px; width: 100%; max-width: 380px; margin: 0 auto; } .rccell { aspect-ratio: 1 / 1; border: 2px solid var(--border); border-radius: 12px; background: var(--surface-2); padding: 0; cursor: pointer; box-shadow: 0 2px 0 var(--border); transition: background 0.1s ease; } .rccell.lit { background: var(--yellow); border-color: var(--yellow-d); } .rccell.hit { background: var(--green-soft); border-color: var(--green); } .rccell.bad { background: var(--red-soft); border-color: var(--red); } .thumb-sudoku { background: linear-gradient(160deg, var(--surface-2), #4A90E0); } .thumb-word { background: linear-gradient(160deg, #FFE9C7, var(--orange-d)); } .thumb-odd { background: linear-gradient(160deg, #D8F0E0, #16B364); } .thumb-recall { background: linear-gradient(160deg, var(--yellow-soft), #9B5BE0); } /* ── 가발 저울 ── */ .scale-grid { display: grid; grid-template-columns: repeat(var(--cols, 6), 1fr); gap: 8px; width: 100%; max-width: 380px; margin: 0 auto; } .scwig { aspect-ratio: 1 / 1; border: 2px solid var(--border); border-radius: 12px; background: var(--surface-2); cursor: pointer; padding: 0; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-2); box-shadow: 0 2px 0 var(--border); } .scwig.left { background: var(--yellow-soft); border-color: var(--yellow-d); color: var(--ink); } .scwig.right { background: var(--green-soft); border-color: var(--green); color: var(--green-d); } .scwig.pickable { border-style: dashed; } .sc-panel { margin: 12px 0 4px; } .sc-log { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; font-size: 0.8rem; color: var(--ink-2); font-variant-numeric: tabular-nums; } .sc-row { padding: 3px 8px; background: var(--surface-2); border-radius: 6px; } .sc-pad { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; } .sc-btn { padding: 9px 16px; font-size: 0.88rem; } /* ── 가발 쌓기 ── */ .stack-grid { display: grid; grid-template-columns: repeat(var(--cols, 10), 1fr); gap: 2px; width: 100%; max-width: 360px; margin: 0 auto; padding: 5px; background: var(--surface-2); border: 2px solid var(--border); border-radius: 10px; cursor: pointer; } .stcell { aspect-ratio: 1 / 1; border-radius: 3px; background: transparent; } .stcell.on { background: var(--ink); } .stcell.moving { background: var(--orange); } /* ── 높냐 낮냐 ── */ .highlow-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; width: 100%; max-width: 320px; margin: 0 auto; } .hlcard { aspect-ratio: 3 / 4; display: flex; align-items: center; justify-content: center; border: 3px solid var(--border); border-radius: 14px; background: var(--surface); font-size: clamp(1.4rem, 8vw, 2.4rem); font-weight: 800; color: var(--ink); padding: 0; } .hlcard.red { color: var(--red); } .hlcard.past { opacity: 0.55; transform: scale(0.92); } .hlcard.blank { color: var(--ink-2); border-style: dashed; } .hl-pad { display: flex; gap: 12px; justify-content: center; margin: 16px 0 4px; } .hl-btn { padding: 12px 24px; font-size: 1rem; } /* ── 발판 뛰기 ── */ .jump-grid { display: grid; grid-template-columns: repeat(var(--cols, 9), 1fr); gap: 1px; width: 100%; max-width: 320px; margin: 0 auto; background: var(--surface-2); border: 2px solid var(--border); border-radius: 10px; padding: 4px; cursor: pointer; } .jpcell { aspect-ratio: 1 / 1; border-radius: 2px; display: flex; align-items: center; justify-content: center; font-size: clamp(0.5rem, 2.4vw, 0.9rem); } .jpcell.plat { background: var(--green); } .jpcell.me { background: var(--yellow-soft); border-radius: 50%; } .pad.lr3 { grid-template-columns: repeat(3, 56px); grid-template-rows: 46px; } /* ── 탈모 퍼뜨리기 ── */ .spread-grid { display: grid; grid-template-columns: repeat(var(--cols, 8), 1fr); gap: 2px; width: 100%; max-width: 400px; margin: 0 auto; } .spcell { aspect-ratio: 1 / 1; border: 0; border-radius: 3px; padding: 0; cursor: pointer; background: var(--surface-2); } .spcell.v1 { background: #FFE0B2; } .spcell.v2 { background: #FFB74D; } .spcell.v3 { background: #FF8A3D; } .spcell.v4 { background: #EF4E4E; } .spcell.v5 { background: #8B1A1A; } .spcell.guard { box-shadow: inset 0 0 0 2px #4A90E0; } .sp-panel { margin: 14px 0 4px; } .sp-up { display: inline-flex; align-items: center; gap: 7px; margin: 0 4px 6px 0; padding: 7px 12px; border: 2px solid var(--border); border-radius: 999px; background: var(--surface); cursor: pointer; font-size: 0.82rem; font-weight: 700; } .sp-up:disabled { opacity: 0.4; cursor: default; } .sp-up.wait { background: var(--surface-2); } .sp-up b { color: var(--orange-d); } .sp-nm { color: var(--ink); } .sp-note { font-size: 0.78rem; color: var(--ink-2); margin-top: 4px; } /* ── 탈모맨 ── */ .hang-grid { display: grid; grid-template-columns: repeat(var(--cols, 6), 1fr); gap: 6px; width: 100%; max-width: 380px; margin: 0 auto; } .hgkey { aspect-ratio: 1 / 1; border: 2px solid var(--border); border-radius: 10px; background: var(--surface); cursor: pointer; padding: 0; font-size: clamp(0.8rem, 4vw, 1.2rem); font-weight: 700; box-shadow: 0 2px 0 var(--border); } .hgkey.ok { background: var(--green-soft); border-color: var(--green); color: var(--green-d); } .hgkey.no { background: var(--red-soft); border-color: var(--red); opacity: 0.5; } .hgkey:disabled { cursor: default; box-shadow: none; } .hg-box { margin: 4px 0 14px; text-align: center; } .hg-hair { display: flex; gap: 4px; justify-content: center; margin-bottom: 10px; } .hg-strand { width: 5px; height: 22px; border-radius: 3px; background: var(--ink); } .hg-strand.gone { background: var(--border); opacity: 0.4; height: 8px; align-self: flex-end; } .hg-word { display: flex; gap: 8px; justify-content: center; } .hg-syl { min-width: 44px; height: 52px; display: flex; align-items: center; justify-content: center; border-bottom: 3px solid var(--ink-2); font-size: 1.5rem; font-weight: 800; } .hg-syl.on { border-bottom-color: var(--green); color: var(--green-d); } .thumb-scale { background: linear-gradient(160deg, var(--surface-2), var(--yellow-d)); } .thumb-stack { background: linear-gradient(160deg, #E7DBFF, var(--ink-2)); } .thumb-highlow { background: linear-gradient(160deg, #FFF, var(--red)); } .thumb-jump { background: linear-gradient(160deg, var(--green-soft), var(--green-d)); } .thumb-spread { background: linear-gradient(160deg, #FFD8B0, #8B1A1A); } .thumb-hang { background: linear-gradient(160deg, var(--surface-2), var(--ink)); } /* 높냐 낮냐 — 아직 안 나온 끗수 세기 (이지) */ .hl-count { margin: 14px auto 0; max-width: 460px; text-align: center; } .hl-count-k { display: block; font-size: 12px; color: var(--ink-3); margin-bottom: 6px; } .hl-count-row { display: grid; grid-template-columns: repeat(13, 1fr); gap: 3px; } .hl-tick { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 0; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); line-height: 1.1; } .hl-tick b { font-size: 11px; font-weight: 700; color: var(--ink-3); } .hl-tick i { font-size: 13px; font-style: normal; font-weight: 700; color: var(--ink); } .hl-tick.gone { opacity: .35; } .hl-tick.gone i { color: var(--ink-3); } .hl-tick.now { border-color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); } @media (max-width: 460px) { .hl-tick b { font-size: 9px; } .hl-tick i { font-size: 11px; } } /* 놀이법 — 한 줄 설명만으로는 뭘 하는 놀이인지 알기 어렵다 */ .game-how { margin: 8px 0 2px; } .game-how > summary { display: inline-flex; align-items: center; gap: 5px; list-style: none; cursor: pointer; user-select: none; font-size: 12px; font-weight: 700; color: var(--ink-2); padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); } .game-how > summary::-webkit-details-marker { display: none; } .game-how > summary::before { content: '▸'; font-size: 10px; transition: transform .15s; } .game-how[open] > summary::before { transform: rotate(90deg); } .game-how > summary:hover { border-color: var(--border-strong); color: var(--ink); } .game-how > p { margin: 8px 0 0; padding: 10px 12px; font-size: 13px; line-height: 1.7; color: var(--ink-2); border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); } /* 놀이줄 오른쪽에 붙는 출처 */ .rule-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .rule-row .rule-text { margin: 0; } .rule-src { margin: 0; margin-left: auto; text-align: right; font-size: 11px; color: var(--ink-3); line-height: 1.5; } @media (max-width: 560px) { .rule-src { margin-left: 0; text-align: left; } } /* 정적분 기호 — 적분 구간을 위아래에 */ .intg { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; line-height: 1; margin-right: 2px; } .intg-s { font-size: 1.5em; line-height: 0.8; } .intg-t, .intg-b { font-size: 0.45em; } .quiz.expr .paren { margin: 0 1px; } .quiz.expr .dx { margin-left: 3px; font-style: italic; } /* 무엇을 구하라는 물음은 줄을 바꿔 식과 떼어 놓는다 — 붙여 두면 어디까지가 식인지 알아보기 어렵다 */ .quiz.expr .ask { flex-basis: 100%; margin: 10px 0 0; color: var(--ink-2); } /* 그래프 문제에 붙는 셈법 안내 */ .gph-note { margin-top: 4px; font-size: 12px; font-weight: 600; line-height: 1.5; color: var(--ink-3); }