/* * 색은 전부 토큰으로만 쓴다. 새 색을 직접 박아 넣으면 한쪽 테마에서 깨진다. * * 테마는 로 정해지고, js/theme.js 가 head 에서 * 먼저 찍어 준다. 그래서 여기서는 prefers-color-scheme 을 보지 않아도 되고 * 라이트 팔레트를 두 번 적을 일도 없다. * * --on-fill 은 색이 칠해진 칸(채점 결과 · 선택된 칩 · 토스트) 위의 글자색이다. * 다크에서는 밝은 칸 위라 어둡고, 라이트에서는 짙은 칸 위라 밝다. */ :root { --app-bg: #0d0d0f; --app-card-bg: #1c1c1e; --app-border: #3a3a3c; --app-text: #f2f2f2; --app-text-muted: #9a9aa0; --ok: #7ad17f; --warn: #ffd84a; --absent: #d3d6da; --on-fill: #16161a; /* 노랑만 두 테마가 같은 색이라 그 위 글자색도 테마를 타지 않는다 */ --on-warn: #16161a; --app-sunken-bg: #121214; --app-hover-bg: #2c2c2e; --tile-edge: #5a5a5e; --scrim: rgba(0, 0, 0, .6); --app-text-body: #d0d0d4; --app-text-faint: #8e8e93; --state-danger: #ff8a80; } :root[data-theme="light"] { --app-bg: #e8e8ec; --app-card-bg: #ffffff; --app-border: #d3d6da; --app-text: #1a1a1c; --app-text-muted: #5f5f64; --ok: #42803d; --warn: #ffd84a; --absent: #6b6f71; --on-fill: #ffffff; --app-sunken-bg: #f4f4f6; --app-hover-bg: #e0e0e4; --tile-edge: #878a8c; --scrim: rgba(0, 0, 0, .35); --app-text-body: #3a3a3e; --app-text-faint: #6b6b70; --state-danger: #c0392b; } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; background: var(--app-bg); color: var(--app-text); font-family: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif; -webkit-text-size-adjust: 100%; overscroll-behavior: none; } button { font: inherit; color: inherit; cursor: pointer; } .app { display: flex; flex-direction: column; height: 100dvh; max-width: 520px; margin: 0 auto; background: var(--app-card-bg); } /* ── 상단 ─────────────────────────────────────────── */ .topbar { display: grid; grid-template-columns: 88px 1fr 88px; align-items: center; padding: 14px 10px 6px; } .topbar h1 { margin: 0; font-size: 21px; font-weight: 800; text-align: center; letter-spacing: -0.4px; } .icon { width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; font-size: 22px; line-height: 1; color: var(--app-text-muted); } .icon:active { background: var(--app-hover-bg); } .side { display: flex; } .side.end { justify-content: flex-end; } .lengths { display: flex; justify-content: center; gap: 6px; padding: 10px 8px 4px; } .lengths button { border: 1px solid var(--app-border); background: transparent; color: var(--app-text-muted); border-radius: 999px; padding: 6px 11px; font-size: 13px; font-weight: 600; white-space: nowrap; } .lengths button[aria-pressed="true"] { background: var(--app-text); border-color: var(--app-text); color: var(--on-fill); } /* ── 시계 ─────────────────────────────────────────── */ .statusbar { display: flex; justify-content: center; align-items: center; min-height: 22px; padding: 2px 10px 0; } .timer { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; /* 숫자가 바뀌어도 폭이 흔들리지 않게 */ letter-spacing: .3px; color: var(--app-text-muted); } /* 아직 첫 자모를 치기 전 — 시계가 안 가고 있다는 걸 옅게 알린다 */ .timer.idle { opacity: .45; } .timer .penalty { color: var(--warn); } /* ── 보드 ─────────────────────────────────────────── */ .board-wrap { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 8px 24px; /* 타일이 최소 크기까지 줄고도 안 들어가는 극단적인 경우에만 잘라낸다. 이게 없으면 넘친 만큼 위아래로 삐져나와 칩과 자판을 덮는다. */ overflow: hidden; } .board { /* --cols 는 JS 가 인라인으로 넣는다. 커스텀 속성은 '선언된 자리'에서 치환되므로 var(--cols) 를 참조하는 --tile 도 반드시 여기 있어야 한다. :root 에 두면 --cols 가 없어 통째로 무효가 된다. grid-template-columns 도 JS 가 넣는다. repeat() 의 반복 횟수에는 var() 를 못 쓴다. */ --gap: 8px; /* JS 가 실제 남은 공간을 재서 --tile 을 인라인으로 덮어쓴다. 아래 값은 그 전에 잠깐 쓰이는 가로 기준 어림값이다. */ --tile: min(62px, calc((min(472px, 100vw - 48px) - (var(--cols) - 1) * var(--gap)) / var(--cols))); display: grid; gap: var(--gap); } .tile { width: var(--tile); height: var(--tile); display: flex; align-items: center; justify-content: center; border: 2px solid var(--app-border); border-radius: 14px; font-size: calc(var(--tile) * 0.46); font-weight: 700; user-select: none; transition: transform .12s ease, background-color .12s, border-color .12s; } .tile.filled { border-color: var(--tile-edge); transform: scale(1.04); } .tile.ok, .tile.warn, .tile.off { border-color: transparent; color: var(--on-fill); } .tile.warn { color: var(--on-warn); } .tile.ok { background: var(--ok); } .tile.warn { background: var(--warn); } .tile.off { background: var(--absent); } @keyframes flip { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } } .tile.reveal { animation: flip .5s ease forwards; } @keyframes shake { 0%,100% { transform: translateX(0); } 20%,60% { transform: translateX(-6px); } 40%,80% { transform: translateX(6px); } } .board.shake { animation: shake .4s; } /* ── 토스트 ───────────────────────────────────────── */ .toast { position: fixed; left: 50%; top: 22%; transform: translateX(-50%); background: var(--app-text); color: var(--on-fill); padding: 10px 18px; border-radius: 8px; font-size: 14px; font-weight: 700; opacity: 0; pointer-events: none; transition: opacity .18s; z-index: 20; } .toast.show { opacity: 1; } /* ── 자판 ─────────────────────────────────────────── */ .bottom { background: var(--app-bg); padding: 14px 6px calc(10px + env(safe-area-inset-bottom)); } .keyboard { display: flex; flex-direction: column; gap: 8px; } .krow { display: flex; justify-content: center; gap: 6px; } .key { flex: 1 1 0; max-width: 46px; height: 46px; border: 0; border-radius: 8px; background: var(--app-border); color: var(--app-text); font-size: 17px; font-weight: 700; display: flex; align-items: center; justify-content: center; transition: background-color .15s, color .15s; } .key:active { filter: brightness(1.3); } .key.ok { background: var(--ok); color: var(--on-fill); } .key.warn { background: var(--warn); color: var(--on-warn); } .key.off { background: var(--absent); color: var(--on-fill); } .actions { display: flex; gap: 6px; align-items: stretch; margin: 14px 6px 0; } .hint-btn { flex: 0 0 auto; padding: 16px 14px; border: 1px solid var(--app-border); border-radius: 12px; background: var(--app-sunken-bg); color: var(--app-text-muted); font-size: 14px; font-weight: 700; } .hint-btn[disabled] { opacity: .45; } .hint-cost { text-align: center; } .hint-jamo { text-align: center; letter-spacing: 2px; color: var(--app-text-muted); font-size: 15px; margin-bottom: 4px; } .submit { display: block; flex: 1; min-width: 0; margin: 0; padding: 16px; border: 0; border-radius: 12px; background: var(--app-hover-bg); color: var(--app-text-muted); font-size: 15px; font-weight: 600; } .submit.ready { background: var(--ok); color: var(--on-fill); } /* ── 시트(규칙·결과) ──────────────────────────────── */ .sheet { position: fixed; inset: 0; background: var(--scrim); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 30; } .sheet[hidden] { display: none; } .sheet-card { position: relative; width: 100%; max-width: 400px; max-height: 80dvh; overflow-y: auto; scrollbar-width: none; background: var(--app-card-bg); border: 1px solid var(--app-border); border-radius: 18px; padding: 26px 22px 22px; } .sheet-card::-webkit-scrollbar, .ranking-scroll::-webkit-scrollbar { display: none; } .sheet-close { position: absolute; top: 8px; right: 10px; border: 0; background: transparent; color: var(--app-text-muted); font-size: 26px; line-height: 1; } .sheet-body h2 { margin: 0 0 14px; font-size: 20px; text-align: center; } .sheet-body p { margin: 8px 0; font-size: 14px; line-height: 1.6; color: var(--app-text-body); } .sheet-body ol { margin: 8px 0; padding-left: 20px; font-size: 14px; line-height: 1.75; color: var(--app-text-body); } .sheet-body .answer { text-align: center; font-size: 30px; font-weight: 800; margin: 6px 0 16px; } .sheet-body .grid { text-align: center; font-size: 20px; line-height: 1.3; margin: 12px 0; } .sheet-body .hint { text-align: center; font-size: 12.5px; line-height: 1.6; color: var(--app-text-faint); margin: 14px 0 0; } .sheet-actions { display: flex; gap: 8px; margin-top: 16px; } .sheet-actions button { flex: 1; padding: 13px 6px; border: 0; border-radius: 10px; background: var(--app-border); color: var(--app-text); font-size: 14px; font-weight: 700; white-space: nowrap; } .sheet-actions button.primary { background: var(--ok); color: var(--on-fill); } /* 직접 출제 */ .compose-input { width: 100%; margin: 14px 0 10px; padding: 13px 14px; border: 1px solid var(--app-border); border-radius: 10px; background: var(--app-sunken-bg); color: var(--app-text); font-size: 18px; font-weight: 700; text-align: center; } .compose-input:focus { outline: none; border-color: var(--ok); } .compose-status { text-align: center; font-size: 13px; font-weight: 600; color: var(--app-text-muted); margin: 0; min-height: 20px; } .compose-status.good { color: var(--ok); } .compose-status.bad { color: var(--state-danger); } .compose-link { width: 100%; margin-top: 12px; padding: 10px 12px; border: 1px solid var(--app-border); border-radius: 8px; background: var(--app-sunken-bg); color: var(--app-text-muted); font-size: 12px; } .compose-link[hidden] { display: none; } .sheet-actions button:disabled { opacity: .4; cursor: default; } .score-summary { display: flex; align-items: baseline; justify-content: center; gap: 14px; margin: 12px 0; } .score-summary b { color: var(--ok); font-size: 24px; } .score-summary span { color: var(--app-text-muted); font-size: 13px; } .score-submit { margin: 12px 0 4px; } .score-submit input { width: 62%; padding: 11px 12px; border: 1px solid var(--app-border); border-radius: 9px; background: var(--app-sunken-bg); color: var(--app-text); font-size: 14px; } .score-submit button { width: 35%; margin-left: 3%; padding: 11px 4px; border: 0; border-radius: 9px; background: var(--ok); color: var(--on-fill); font-size: 13px; font-weight: 700; } .score-submit p { min-height: 18px; margin: 5px 0 0; text-align: center; color: var(--app-text-muted); font-size: 12px; } .rank-tabs { display: flex; gap: 6px; margin: 4px 0 12px; } .rank-tabs button { flex: 1; padding: 9px 4px; border: 1px solid var(--app-border); border-radius: 8px; background: transparent; color: var(--app-text-muted); font-size: 13px; font-weight: 700; } .rank-tabs button.selected { background: var(--app-text); color: var(--on-fill); } /* 두 번째 줄(순위 방식)은 기간 탭보다 한 단 낮게 보이도록 작고 옅게 */ .rank-modes { display: flex; gap: 6px; margin: 0 0 10px; } .rank-modes button { flex: 1; padding: 7px 3px; border: 1px solid transparent; border-radius: 8px; background: var(--app-sunken-bg); color: var(--app-text-muted); font-size: 12px; font-weight: 600; } .rank-modes button.selected { border-color: var(--app-border); background: var(--app-hover-bg); color: var(--app-text); } .rank-caption { margin: 0 0 8px !important; text-align: center; color: var(--app-text-muted) !important; font-size: 12px !important; } .ranking-list { display: flex; flex-direction: column; gap: 6px; } .ranking-scroll { max-height: 52dvh; overflow-y: auto; scrollbar-width: none; padding-right: 2px; } .ranking-loading { margin: 10px 0 0 !important; text-align: center; color: var(--app-text-muted) !important; font-size: 12px !important; } .ranking-loading[hidden] { display: none; } .ranking-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto; gap: 7px; align-items: center; padding: 10px 8px; border-radius: 8px; background: var(--app-sunken-bg); font-size: 13px; } .rank-number { color: var(--app-text-muted); text-align: center; } .rank-score { color: var(--ok); font-weight: 800; } .rank-time { min-width: 56px; color: var(--app-text-muted); font-size: 12px; text-align: right; } /* 누적 순위는 두 줄. 승률·평균은 닉네임 아래로 흘린다. */ .ranking-row.has-sub { row-gap: 2px; } .rank-sub { grid-column: 2 / -1; color: var(--app-text-faint); font-size: 11px; font-variant-numeric: tabular-nums; } .empty-rank { text-align: center; color: var(--app-text-muted) !important; } .legend { display: flex; gap: 6px; justify-content: center; margin: 10px 0 4px; } .legend span { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-weight: 700; color: var(--on-fill); } /* ── 설정(규칙 시트 안) ───────────────────────────── */ .setting-title { margin: 20px 0 8px; font-size: 13px; font-weight: 700; color: var(--app-text-muted); } .theme-tabs { display: flex; gap: 6px; } .theme-tabs button { flex: 1; padding: 10px 0; border: 1px solid var(--app-border); border-radius: 9px; background: var(--app-sunken-bg); color: var(--app-text-muted); font-size: 13px; font-weight: 600; } .theme-tabs button[aria-pressed="true"] { background: var(--app-text); border-color: var(--app-text); color: var(--on-fill); } .source-note { font-size: 12px !important; color: var(--app-text-faint) !important; text-align: center; margin-top: 16px !important; }