/* ========================================================================= v2 스킨 — 시안(tools/pc-design.html)을 실제 화면에 입힌다. ⚠️ 로컬 전용. index.html 머리에서 imuoim.com이 아닐 때만 에 .v2를 붙인다. 프로덕션에서는 이 파일이 내려받아지긴 해도 걸리는 규칙이 하나도 없다. 컨셉 '대결장' — 같은 힌트를 보고 둘이 겨루는 게임이라 화면 자체를 무대로 만든다. 어두운 바탕에 출제 이미지가 조명을 받고, 게임 화면은 좌우로 갈라 상대와 나를 마주 세운다. 색은 셋뿐이다. 이 규칙이 이 스킨의 전부다. 연두(--lime) 나 파랑(--ai) AI. 다른 데는 한 번도 쓰지 않는다 — 한 번이라도 쓰면 신호가 죽는다. 빨강(--danger) 오답. 경고·삭제에도 쓰지 않는다. 기존 스타일시트를 지우지 않고 덮는다. html.v2가 붙어 있으므로 선택자 하나가 기본 규칙보다 클래스 하나만큼 무겁다 — 원본이 .a .b 꼴이면 여기서도 그만큼 적어야 이긴다. ========================================================================= */ /* ── 토큰 ────────────────────────────────────────────────────────── 기존 시트가 색을 대부분 변수로 쓰고 있어서, 변수만 뒤집어도 화면 절반이 따라온다. --cream/--paper/--ink는 이름만 밝을 뿐 '바탕/면/글자'라는 역할이라 그대로 재정의한다. */ html.v2{ /* 명도 단계 — 전부 #0e0e0e 언저리에 몰려 있으면 층이 안 생겨서 화면이 평평한 '검은 벽'이 된다. 바탕은 더 내리고 위로 올라갈수록 뚜렷하게 밝힌다. stage 바닥(페이지) stage-2 면(카드·말풍선) stage-3 그 위에 올라가는 칸(입력·칩·트랙) edge 선. 지금 값(#2c2c29)은 어두운 면 위에서 거의 안 보였다. */ --stage:#0a0a09; --stage-2:#171715; --stage-3:#232320; --edge:#36352f; --dim:#8e8e85; /* AI 전용 색 — 라임(75°)의 반대편 차가운 쪽(197°)이라 나란히 두면 바로 갈린다. 네온으로 튀지 않게 채도를 낮췄다. */ --ai:#79c7de; --black:#0e0e0e; /* 헤더·검은 버튼 바탕 */ --ink:#faf9f4; /* 본문 글자 */ --cream:#0e0e0e; /* 페이지 바탕 */ --paper:#141413; /* 카드·본문 면 */ --line:#2c2c29; --line-dark:#2c2c29; --gray:#7c7c76; --lime-soft:#232a10; /* 연두 계열의 '옅은 면' — 밝은 판에서 쓰던 자리 */ --danger-bg:#2a1a1d; --blue-soft:#16222e; --radius:3px; /* 둥근 모서리를 걷는다. 무대는 각진 편이 단단해 보인다 */ } /* 바탕에 아주 옅은 빛 하나. 완전히 평평한 검정은 '꺼진 화면'처럼 보인다 — 위쪽에서 조명이 떨어지는 정도만 깔아두면 같은 어둡기에서도 공간감이 생긴다. 눈에 띄면 실패다. 5% 이하로만 쓴다. */ html.v2 body{color:var(--ink);letter-spacing:-.015em; background: radial-gradient(1400px 620px at 50% -14%, rgba(200,242,39,.045), transparent 62%), var(--stage); background-attachment:fixed} /* 면은 바탕보다 확실히 밝고, 선이 보여야 '칸'으로 읽힌다 */ html.v2 .card,html.v2 .card.key{background:var(--stage-2);border:1px solid var(--edge)} /* 무대는 바탕 그대로 쓴다. 가운데 흰 기둥(.wrap의 그림자 테두리)이 서면 '모바일 사이트를 데스크톱에 띄운 것'으로 보인다. */ html.v2 .wrap{background:transparent;box-shadow:none;max-width:100%} html.v2 main{padding:0 clamp(16px,4vw,40px) 90px;width:100%;max-width:var(--maxw);margin:0 auto} html.v2{--maxw:720px} html.v2 .card,html.v2 .mode,html.v2 .mode-card,html.v2 .past-chips button{ background:var(--stage-2);border-color:var(--edge)} /* 둥근 모서리를 걷는다. 무대는 각진 편이 단단해 보이고, 카드가 알약처럼 보이면 '앱 화면'이 되지 '무대'가 안 된다. */ html.v2 .card,html.v2 .mode-card,html.v2 .past-chips button{border-radius:3px} html.v2 .btn{border-radius:3px} /* ── 헤더 ─────────────────────────────────────────────────────── */ /* width:100%가 없으면 안 된다 — .wrap이 세로 flex라 헤더는 원래 늘어나 있는데, 가로 margin:auto를 주는 순간 stretch가 풀려 글자 폭만큼으로 쪼그라든다. */ html.v2 header{background:var(--stage);border-bottom:1px solid var(--edge);height:64px; width:100%;max-width:var(--maxw);margin:0 auto;padding:0 clamp(16px,4vw,40px)} html.v2 .logo img{width:24px;height:24px;border-radius:6px} html.v2 .logo-sub{color:var(--dim)} html.v2 .hdr-accent{display:none} /* 라임 띠는 헤더 밑선과 역할이 겹친다 */ html.v2 .hdr-progress{background:var(--stage-3)} html.v2 .hdr-progress i{background:var(--lime)} html.v2 .auth-chip{background:var(--stage-2);border-color:var(--edge)} html.v2 .auth-menu{background:var(--stage-2);border-color:var(--edge);color:var(--ink)} html.v2 footer{background:var(--stage);border-top:1px solid var(--edge);color:var(--dim)} html.v2 footer b{color:var(--ink)} /* ══════════════════════════════════════════════════════════════════ 홈 ══════════════════════════════════════════════════════════════════ */ /* 히어로 — 오늘 문제를 크게 흐려 배경에 깐다. '뭔가 있다'는 궁금증만 주고 정답은 안 샌다. 원래 있던 .hero-bg를 그대로 쓰고 테두리·각만 시안에 맞춘다. */ html.v2 .today{border-radius:0;border:1px solid var(--edge);background:var(--stage); padding:clamp(22px,3vh,34px) clamp(20px,2.6vw,36px);margin-top:20px} html.v2 .today .hero-bg::after{ background:linear-gradient(160deg,rgba(14,14,14,.6),rgba(14,14,14,.93) 62%,rgba(14,14,14,.99))} html.v2 .today .date{display:flex;align-items:center;gap:11px;letter-spacing:.14em} html.v2 .today .date::before{content:'';width:24px;height:1px;background:var(--lime)} html.v2 .today h1{font-size:clamp(24px,3vw,44px);letter-spacing:-.04em;line-height:1.15;margin-top:16px} html.v2 .today .sub{max-width:42ch;line-height:1.7;font-size:14px} html.v2 .today .cta{border-radius:3px;box-shadow:none;font-weight:900} html.v2 .today .meta b{color:var(--ink)} /* 판세 — 한 줄 스트립을 시안의 '숫자 두 개 + 막대' 판으로 다시 짠다. 마크업 순서는 AI라벨·AI수치·막대·인간수치·인간라벨. 자리만 바꿔 끼운다. */ html.v2 .vs-strip{display:grid;grid-template-columns:1fr 1fr; grid-template-areas:'na nh' 'la lh' 'bar bar'; gap:0 16px;align-items:end;background:none;border:none;padding:0;border-radius:0} html.v2 .vs-strip .who:first-child{grid-area:la;text-align:left} html.v2 .vs-strip .who:last-child{grid-area:lh;text-align:right} html.v2 .vs-strip .who{letter-spacing:.1em;margin-top:5px;color:var(--dim)} html.v2 .vs-strip .rate{font-family:'NeoDunggeunmoPro-Regular','NeoDunggeunmo Pro',monospace; font-weight:400;letter-spacing:0;font-size:clamp(30px,3vw,44px);line-height:1;min-width:0} html.v2 .vs-strip .rate.ai{grid-area:na;text-align:left;color:var(--ai)} html.v2 .vs-strip .rate.hu{grid-area:nh;text-align:right;color:var(--lime)} html.v2 .vs-strip.pending .rate{color:var(--dim)} /* 막대는 원래 '라임 트랙 위에 검은 i가 왼쪽부터 채워지는' 구조다. 트랙을 라임(인간), 채워지는 쪽을 파랑(AI)으로 두면 그대로 판세 막대가 된다. */ html.v2 .vs-strip .bar{grid-area:bar;height:5px;border-radius:0;margin-top:14px;background:var(--lime)} html.v2 .vs-strip .bar i{background:var(--ai)} html.v2 .vs-caption,html.v2 .streak{text-align:left;color:var(--dim);font-size:12px;line-height:1.6} html.v2 .streak b{color:var(--ink)} /* 무한모드 배너 */ html.v2 .inf-banner{background:var(--stage);border:1px solid var(--edge);border-radius:0; box-shadow:none;padding:18px 4px 0;border-left:none;border-right:none;border-bottom:none; border-top:1px solid var(--edge);margin-top:22px} html.v2 .ib-col b{color:var(--ink)} html.v2 .ib-col p{color:var(--dim)} /* 섹션 머리 — 부제는 제목 바로 옆에 붙인다. 양끝 정렬로 두면 1520px 화면에서 둘이 1.4m쯤 떨어져 한 쌍으로 안 읽힌다. */ html.v2 .sec-h{justify-content:flex-start;gap:12px;align-items:baseline} html.v2 .sec-h b{font-size:13px;letter-spacing:.1em;font-weight:800} html.v2 .sec-h span{font-size:11.5px;color:var(--dim)} /* 검은 버튼은 무대와 같은 색이라 사라진다. 한 단계 밝은 면에 테두리를 준다 */ html.v2 .btn-black{background:var(--stage-3);color:var(--ink);border:1px solid var(--edge)} /* 모드 타일 — 시안의 '경계선을 타일이 직접 그리는 띠'. 칸 사이 gap으로 나누면 빈 칸이 배경색 덩어리로 드러난다(심리전은 칸이 남는다). 타일이 그리면 빈 자리는 그냥 아무것도 없다. 이웃한 선이 두 겹이 되지 않게 오른쪽·아래로 1px씩 당겨 겹친다. */ html.v2 .modes{display:grid;grid-template-columns:repeat(2,1fr);gap:0} html.v2 .mode{display:block;background:var(--stage);border:1px solid var(--edge);border-radius:0; margin:0 -1px -1px 0;padding:0;box-shadow:none;transition:background .16s} html.v2 .mode:not(:disabled):hover{background:var(--stage-2)} html.v2 .mode:not(:disabled):active{transform:none;border-color:var(--edge);background:var(--stage-3)} /* aspect-ratio를 풀어야 한다 — 남겨두면 높이를 정한 순간 폭이 그 비율로 계산돼 타일은 288px인데 그림 칸만 81px로 쪼그라들고, 이모지 두 개가 줄바꿈된다. */ html.v2 .mode .thumb{height:clamp(48px,6vh,62px);width:auto;aspect-ratio:auto; border:none;border-radius:0; background:none;display:flex;align-items:flex-end;justify-content:flex-start; padding:14px 13px 0;font-size:clamp(20px,2.6vh,26px);overflow:visible} html.v2 .mode .thumb.txt.cho{font-size:clamp(17px,2.2vh,22px)} html.v2 .mode b{padding:11px 13px 0;font-size:13px} html.v2 .mode p{padding:3px 13px 13px;font-size:11px;color:var(--dim);margin-top:0} html.v2 .mode .m-tag{top:9px;right:9px;border-radius:2px;font-size:8.5px;letter-spacing:.1em} html.v2 .mode:disabled .m-tag{background:var(--stage-3);color:var(--dim)} html.v2 .soon-modes>summary{border-color:var(--edge);color:var(--dim);background:none} html.v2 .practice{background:var(--stage-2);border:1px solid var(--edge);border-radius:0; box-shadow:none;color:var(--ink)} html.v2 .past-note{color:var(--dim)} html.v2 .past-note a{color:var(--lime)} /* 모드 타일 미리보기 이미지는 v2에서 안 쓴다. 실제 문제 사진을 걸면 모드를 고르기도 전에 그 문제의 정답이 새어나간다. 대신 .thumb에 이미 들어 있는 이모지 글자를 그대로 보여준다. */ html.v2 .mode .thumb>.mp-img, html.v2 .mode .thumb>.mp-cv, html.v2 .mode .thumb>img, html.v2 .mode .thumb.mp-quote>*{display:none} html.v2 .mode .thumb.mp-grid>i{display:none} html.v2 .mode .thumb:not(.txt)::before{content:'🖼';font-size:inherit} html.v2 .mode[data-mode="photo"] .thumb::before{content:'🔍'} html.v2 .mode[data-mode="mosaic"] .thumb::before{content:'▨'} html.v2 .mode[data-mode="grid"] .thumb::before{content:'🧩'} html.v2 .mode[onclick*="balance"] .thumb::before{content:'⚖️'} html.v2 .mode[onclick*="fake"] .thumb::before{content:'🤥'} /* ══════════════════════════════════════════════════════════════════ 게임 — 출제 영역 ══════════════════════════════════════════════════════════════════ */ html.v2 .hintPane{background:transparent;border-bottom:1px solid var(--edge);box-shadow:none} html.v2 .chatPane{background:transparent} html.v2 .composePane{background:var(--stage);border-top:1px solid var(--edge)} /* 출제 이미지의 바탕은 흰색이다. 실루엣·그림 모드는 알파 PNG라 검은 무대에 그대로 올리면 형체가 아예 안 보인다. 사진도 흰 바탕 위가 '전시대에 올린' 느낌이라 어두운 무대와 대비된다. */ html.v2 canvas.pix, html.v2 .hint-img, html.v2 .zoom-wrap, html.v2 .sil-wrap, html.v2 .grid-wrap, html.v2 .draw-wrap, html.v2 .draw-answer, html.v2 .big-hint{background:#fff;border-radius:0;border:1px solid var(--edge); box-shadow:0 30px 70px -30px rgba(200,242,39,.18)} /* 이모지·초성도 같은 흰 판 위에 올린다. 출제된 것은 전부 같은 자리에 같은 방식으로 놓여야 '무대'가 된다 — 모드마다 판 색이 다르면 화면이 매번 다른 사이트처럼 보인다. */ html.v2 .big-hint{color:#0e0e0e} html.v2 .big-hint.cho{color:#0e0e0e} html.v2 .q-top b{font-size:16px;font-weight:900} html.v2 .q-stage{color:var(--dim)} html.v2 .q-steps i{background:var(--stage-3)} html.v2 .q-steps i.done{background:var(--lime-deep)} html.v2 .q-steps i.now{background:var(--lime)} html.v2 .photo-hint{background:var(--stage-2);border-color:var(--edge);color:var(--ink)} html.v2 .hint-btn{border-radius:3px} html.v2 .hint-warn{color:var(--dim)} html.v2 .img-credit,html.v2 .img-credit a{color:var(--dim)} /* 말풍선 — 상대는 파랑 선, 나는 연두 선. 채우지 않고 옆선만 준다. 면을 통째로 칠하면 무대에서 말풍선이 이미지보다 튄다. */ html.v2 .msg .bub{background:var(--stage-2);border:none;border-left:2px solid var(--ai); border-radius:3px;color:var(--ink)} html.v2 .msg.me .bub{background:var(--stage-2);border-left:none;border-right:2px solid var(--lime)} html.v2 .msg.me .bub.miss{background:var(--stage-2);border-right-color:var(--danger);color:var(--danger)} html.v2 .msg .ava{background:var(--stage-3)} html.v2 .msg .ava svg{color:var(--ai)} html.v2 .msg.me .ava{background:var(--lime)} html.v2 .msg .who{color:var(--ai)} /* AI가 먼저 알아본 순간의 카운트다운. 원래는 호박색(amber)이었는데, 이 스킨은 색이 셋뿐이다 — 이건 AI가 벌인 일이니 AI 색으로 말한다. 빨강을 쓰면 '내 오답'이라는 빨강의 뜻이 흐려진다. */ /* AI가 생각하는 중 — 점 세 개. 설명 없이 같은 말을 하고, 시선을 안 뺏는다 */ html.v2 .msg .typing{min-width:0} html.v2 .mur.dots{display:inline-flex;align-items:center;gap:5px;height:14px} html.v2 .mur.dots i{width:5px;height:5px;border-radius:50%;background:var(--ai); animation:v2blink 1.2s infinite} html.v2 .mur.dots i:nth-child(2){animation-delay:.2s} html.v2 .mur.dots i:nth-child(3){animation-delay:.4s} @keyframes v2blink{0%,60%,100%{opacity:.22}30%{opacity:1}} /* 말풍선이 튀어 들어올 때 8px 아래에서 올라오는데, 그동안 문서가 그만큼 길어져 하단 스크롤바가 잠깐 나타났다 사라진다. 대화판 안에서만 넘치게 가둔다. */ html.v2 .chatPane{overflow-x:hidden} html.v2 body.playing .chatframe{overflow:hidden} html.v2 .msg.locked .bub{background:var(--stage-3);border-left-color:var(--ai)} html.v2 .cdwrap{border-top:1px dashed var(--edge)} html.v2 .cdtxt{color:var(--ai)} html.v2 .cdbar{background:var(--stage-3)} html.v2 .cdbar i{background:var(--ai)} html.v2 .stagediv{color:var(--dim)} html.v2 .stagediv::before,html.v2 .stagediv::after{background:var(--edge)} html.v2 .sysline{color:var(--dim)} html.v2 .gw.hid{background:var(--stage-3);color:var(--dim)} /* 입력 — 밑줄만으로는 어두운 바탕에서 안 보인다. 면을 깔고 테두리를 준다 */ html.v2 .input-row{background:var(--stage-2);border:1.5px solid var(--edge);border-radius:4px; padding:5px 5px 5px 16px;box-shadow:none} html.v2 .input-row:focus-within{border-color:var(--lime)} html.v2 .input-row input{background:none;border:none;color:var(--ink);font-size:17px;font-weight:700} html.v2 .input-row input::placeholder{color:#55554e} html.v2 .input-row button{background:var(--lime);border-radius:3px} html.v2 .answer-actions .give-up, html.v2 .answer-actions .scroll-top-btn{color:var(--dim);border-color:var(--edge);background:none} /* 남은 기회는 하트로. 자리 머리맡에 두면 'AI도 목숨이 있나'로 읽히는데 실제로 줄어드는 건 나뿐이라, 답을 치는 손이 보는 자리 한 곳에만 둔다. 글자 ♥는 기기마다 모양·색이 달라서 도형을 마스크로 직접 그린다. */ html.v2{--heart:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21.6 2.7 12.3a6 6 0 0 1 8.5-8.5l.8.8.8-.8a6 6 0 0 1 8.5 8.5z'/%3E%3C/svg%3E")} html.v2 .live-board{background:none;border:none;padding:0;margin-top:10px} html.v2 .live-cell{color:var(--dim);font-size:11.5px;font-weight:700} html.v2 .live-cell b.num{color:var(--lime);font-size:13px} html.v2 .v2-hearts{display:inline-flex;gap:5px;color:var(--lime);margin-left:7px;vertical-align:-1px} html.v2 .v2-hearts i{width:13px;height:12px;background:currentColor; -webkit-mask:var(--heart) center/contain no-repeat;mask:var(--heart) center/contain no-repeat} html.v2 .v2-hearts i.used{background:var(--stage-3)} /* 하트가 곧 숫자다 — 옆에 남은 숫자를 또 쓰면 같은 말을 두 번 한다 */ html.v2 .live-cell:has(.v2-hearts) b.num{display:none} html.v2 .buzz-alert{border-radius:3px} html.v2 .wrong-chips .lbl{color:var(--dim)} html.v2 .ai-feed{background:var(--stage-2);border-color:var(--edge)} html.v2 .ai-feed .ai-face{background:var(--stage-3)} html.v2 .ai-feed .ai-face svg{color:var(--ai)} html.v2 .ai-murmur{color:var(--dim)} html.v2 .howto{background:var(--stage-2);border-color:var(--edge);color:var(--dim)} html.v2 .howto b{color:var(--lime)} /* ══════════════════════════════════════════════════════════════════ 결과 ══════════════════════════════════════════════════════════════════ */ html.v2 .verdict{background:none;border:none} html.v2 .verdict h2{font-size:clamp(30px,4vw,52px);line-height:1.05} html.v2 .verdict.win h2{color:var(--lime)} html.v2 .verdict.lose h2{color:var(--ai)} html.v2 .v-badge{border-radius:2px;letter-spacing:.12em} html.v2 .qr-thumb,html.v2 .qr-shot{border-radius:0;border-color:var(--edge);background:#fff} html.v2 .big-score{background:var(--stage-2);border-color:var(--edge);border-radius:0} /* 최종 결과 — 시안처럼 '판정 배지 → 칭호 → 한 줄' 순서로 세운다. 화면의 주인공은 승패 문장이 아니라 칭호다. 공유 카드에 찍히는 것도 그 말이라, 여기서 한 번 읽고 나가야 이미지가 '내 결과'로 이어진다. */ html.v2 .final-hero h2{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.12em; padding:6px 13px;border-radius:2px;border:1px solid currentColor;line-height:1} html.v2 .final-hero h2.won{color:var(--lime)} html.v2 .final-hero h2.lost{color:var(--ai)} html.v2 .f-title{display:block;margin-top:16px} html.v2 .f-title b{display:block; font-family:'NeoDunggeunmoPro-Regular','NeoDunggeunmo Pro','Pretendard Variable',monospace; font-weight:400;letter-spacing:0;font-size:clamp(30px,4.4vw,58px);line-height:1.05} html.v2 .f-title span{display:block;font-size:13.5px;color:var(--dim);margin-top:10px} html.v2 .final-hero p{color:var(--dim);font-size:12.5px;margin-top:6px} html.v2 .grid-record{font-size:17px;letter-spacing:3px;margin-top:18px} /* 누가 먼저 알아봤나 — 이 게임의 승부는 점수가 아니라 '몇 번째 힌트에서 알아봤나'다. 가로축이 힌트 단계이고, 왼쪽에 찍힌 쪽이 먼저 알아본 것이다. */ html.v2 .f-lanes{display:block;margin-top:26px;border-top:1px solid var(--edge);padding-top:18px} html.v2 .f-lanes .h{display:flex;align-items:baseline;gap:12px;margin-bottom:12px} html.v2 .f-lanes .h b{font-size:12.5px;letter-spacing:.1em;font-weight:800} html.v2 .f-lanes .h span{font-size:11px;color:var(--dim)} html.v2 .f-lanes .lane{display:grid;grid-template-columns:16px minmax(0,1fr) 76px; align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--edge)} html.v2 .f-lanes .no{font-size:12px;color:var(--dim);font-weight:800} html.v2 .f-lanes .track{position:relative;height:26px;background:var(--stage-2);display:block} html.v2 .f-lanes .seg{position:absolute;inset:0;display:flex} html.v2 .f-lanes .seg i{flex:1;border-right:1px solid var(--stage)} html.v2 .f-lanes .fill{position:absolute;left:0;top:0;bottom:0;background:rgba(200,242,39,.15)} /* 진 라운드는 'AI가 가져간 구간'이다. 빨강은 내 오답에만 쓴다 — 색이 두 가지 뜻을 겸하는 순간 신호가 흐려진다. */ html.v2 .f-lanes .fill.lose{background:rgba(121,199,222,.16)} html.v2 .f-lanes .pin{position:absolute;top:50%;transform:translate(-50%,-50%); font-size:9.5px;font-weight:900;padding:4px 6px;border-radius:2px;white-space:nowrap} html.v2 .f-lanes .pin.me{background:var(--lime);color:#0e0e0e} html.v2 .f-lanes .pin.ai{background:var(--ai);color:#0e0e0e} html.v2 .f-lanes .res{font-size:12px;font-weight:800;text-align:right;color:var(--lime)} html.v2 .f-lanes .res.lose{color:var(--ai)} html.v2 .f-lanes .res.tie{color:var(--dim)} @media(max-width:600px){ html.v2 .f-lanes .lane{grid-template-columns:14px minmax(0,1fr) 62px;gap:8px} html.v2 .f-lanes .res{font-size:11px} } html.v2 .card.key{background:var(--stage-2);border:1px solid var(--edge)} html.v2 .card h3{color:var(--dim)} html.v2 .fv-side{background:var(--stage);border:1px solid var(--edge);border-radius:3px} html.v2 .fv-side span,html.v2 .fv-side em{color:var(--dim)} /* 이긴 쪽을 색으로 말한다. AI가 이긴 판을 라임으로 칠하면 라임의 뜻이 무너진다 — 라임은 언제나 '나'다. */ html.v2 #fvUser.win{background:rgba(200,242,39,.09);border-color:var(--lime)} html.v2 #fvUser.win b{color:var(--lime)} html.v2 #fvAi.win{background:rgba(121,199,222,.09);border-color:var(--ai)} html.v2 #fvAi.win b{color:var(--ai)} html.v2 .fv-caption{color:var(--dim)} html.v2 .stat-cell{background:var(--stage);border:1px solid var(--edge);border-radius:3px} html.v2 .stat-cell span{color:var(--dim)} html.v2 .btn-ghost{background:var(--stage-2);border:1px solid var(--edge);color:var(--ink)} html.v2 .linklike{color:var(--dim)} html.v2 .final-share .btn{border-radius:3px} /* 진 라운드는 'AI의 영역'이다. 빨강은 내 오답에만 쓴다 — 색이 두 뜻을 겸하면 신호가 흐려진다 */ html.v2 .lane .fill.lose,html.v2 .lane-lose{background:rgba(121,199,222,.16)} /* ══════════════════════════════════════════════════════════════════ 심리전 (js/psy-modes.js가 그리는 화면) ══════════════════════════════════════════════════════════════════ */ /* ── 심리전 시작 안내 ───────────────────────────────── 형광펜(box-shadow inset)은 밝은 종이 위에서만 통한다. 어두운 판에서는 라임 띠가 글자 아래쪽을 덮어 오히려 글씨를 못 읽게 만든다 — 밑줄로 바꾼다. */ html.v2 .bintro{background:var(--stage-2);border-color:var(--edge);border-radius:3px} html.v2 .bintro::after{display:none} html.v2 .bintro .lead{color:#a8a8a0} html.v2 .bintro .lead b{color:var(--lime);box-shadow:none; border-bottom:2px solid var(--lime);padding-bottom:1px} html.v2 .bintro .fs{border-top-color:var(--edge)} /* 번호 동그라미가 var(--black)이라 카드 위에서 사라진다 */ html.v2 .bintro .fs .no{background:var(--lime);color:#0e0e0e} html.v2 .bintro .fs .tx em{color:var(--dim)} html.v2 .bintro .wincond b{color:var(--lime)} /* 규칙 알약 — 연한 라임 판에 짙은 올리브 글씨였다. 판이 어두워지면 글자가 묻힌다 */ html.v2 .bintro .wincond .pill{background:var(--stage-2);border-color:var(--lime); color:var(--lime);border-radius:3px} html.v2 .scr-title b{font-size:clamp(20px,2.2vw,28px)} html.v2 .scr-title p{color:var(--dim)} html.v2 .bq{font-size:clamp(19px,2.1vw,26px);font-weight:900;letter-spacing:-.03em} html.v2 .bsub{color:var(--dim)} html.v2 .pick{background:var(--stage-2);border:1px solid var(--edge);border-radius:0;box-shadow:none} html.v2 .pick:hover{border-color:var(--lime);background:var(--stage-3)} html.v2 .pcredit,html.v2 .pcredits,html.v2 .pcredits a{color:var(--dim)} /* 진행 칸 — .now가 var(--black)이라 어두운 무대에서는 배경과 같은 색이 된다. '지금 몇 번째인가'가 이 화면에서 유일한 위치 정보라 이게 안 보이면 안 된다. */ html.v2 .bsteps i{background:var(--stage-3);border-radius:0} html.v2 .bsteps i.done{background:var(--lime-deep)} html.v2 .bsteps i.now{background:var(--lime)} /* 내 선택 — 원래는 연한 라임 판에 짙은 초록 글씨였다. 판이 어두워지면 글자가 그대로 묻힌다. */ html.v2 .mypick{background:var(--stage-2);border:1px solid var(--edge);border-radius:3px} html.v2 .mypick .sq{border-radius:2px} html.v2 .mypick .tx em{color:var(--lime)} html.v2 .mypick .tx b{color:var(--ink)} html.v2 .guess-q{color:var(--dim);border-bottom-color:var(--edge)} html.v2 .guess-big{color:var(--lime)} html.v2 .guess-cap{color:var(--ink)} html.v2 .guess-other{color:var(--dim)} html.v2 .guess-other b{color:var(--ink)} html.v2 .bslider-ends{color:var(--dim)} /* 버튼이 폭을 나눠 먹으면 '10% 25% 50%…'가 아니라 다섯 칸짜리 표로 보인다 */ html.v2 .bquick{justify-content:center;flex-wrap:wrap} html.v2 .bquick button{flex:0 0 auto;padding:8px 14px} /* 슬라이더 — 채워진 쪽을 라임으로. '내가 찍은 값'이라는 표시다. --v는 paintGuess/paintKnow가 밀어 넣는다(js/psy-modes.js). */ html.v2 .bal-slider{-webkit-appearance:none;appearance:none;height:6px;border-radius:3px; margin:22px 0 4px; background:linear-gradient(to right,var(--lime) var(--v,50%),var(--stage-3) var(--v,50%))} html.v2 .bal-slider::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px; border-radius:50%;background:var(--lime);border:3px solid var(--stage); box-shadow:0 0 0 1px var(--lime)} html.v2 .bal-slider::-moz-range-thumb{width:26px;height:26px;border-radius:50%; background:var(--lime);border:3px solid var(--stage);box-shadow:0 0 0 1px var(--lime)} html.v2 .bquick button{border-color:var(--edge);color:var(--dim);border-radius:3px} html.v2 .bquick button:hover{color:var(--lime);border-color:var(--lime)} /* ══ 심리전 결과 (시안 레이아웃) ═══════════════════════════════ 두 선택지를 사진째로 갈라 놓는다. 이 게임의 결과는 숫자가 아니라 '그림 두 장이 몇 대 몇으로 갈렸나'라서, 갈라진 모습 자체가 결과다. */ html.v2 .pv-kicker{font-size:11.5px;letter-spacing:.14em;color:var(--dim);font-weight:800; text-align:center;padding-top:14px} html.v2 .pv-verdict{text-align:center;margin:14px 0 20px} html.v2 .pv-verdict b{display:block;font-size:clamp(22px,2.8vw,36px);font-weight:900; letter-spacing:-.035em;line-height:1.15} html.v2 .pv-verdict.win b{color:var(--lime)} html.v2 .pv-verdict.lose b{color:var(--ai)} html.v2 .pv-verdict.draw b{color:var(--ink)} html.v2 .pv-verdict small{display:block;font-size:12.5px;color:var(--dim);margin-top:9px} html.v2 .pv-split{display:grid;grid-template-columns:1fr 1fr;gap:12px} html.v2 .pv-half{position:relative;border:1px solid var(--edge);overflow:hidden; background:var(--stage-2)} html.v2 .pv-half.mine{border-color:var(--lime)} html.v2 .pv-half .ph{display:flex;align-items:center;justify-content:center; aspect-ratio:1.6;overflow:hidden;background:var(--stage-3);font-size:44px} html.v2 .pv-half .ph img{width:100%;height:100%;object-fit:cover;filter:brightness(.62)} html.v2 .pv-half.mine .ph img{filter:brightness(.95)} html.v2 .pv-half .rt{position:absolute;left:0;right:0;bottom:0;padding:14px 15px; background:linear-gradient(transparent,rgba(10,10,9,.94) 45%)} html.v2 .pv-half .pc{display:block;font-size:clamp(26px,3vw,38px);line-height:1;color:var(--dim)} html.v2 .pv-half.mine .pc{color:var(--lime)} html.v2 .pv-half b{display:block;font-size:14px;font-weight:800;margin-top:5px;color:var(--ink)} html.v2 .pv-half .tag{position:absolute;top:11px;left:11px;z-index:2;font-size:9.5px; font-weight:900;letter-spacing:.08em;background:var(--lime);color:#0e0e0e; padding:3px 8px;border-radius:2px} html.v2 .pv-cmp{margin-top:22px;border-top:1px solid var(--edge);padding-top:18px} html.v2 .pv-cmp .dt{display:flex;align-items:baseline;gap:10px;font-size:11.5px; letter-spacing:.11em;font-weight:900;color:var(--dim);margin-bottom:16px} html.v2 .pv-cmp .dt span{letter-spacing:0;font-weight:700;color:var(--ink)} html.v2 .pv-errwrap{position:relative} html.v2 .pv-errwrap .actualline{position:absolute;top:-4px;bottom:20px;width:1px; background:var(--ink);opacity:.55;z-index:2} html.v2 .pv-err{margin-bottom:14px} html.v2 .pv-err .top{display:flex;justify-content:space-between;font-size:12.5px; font-weight:800;margin-bottom:6px} html.v2 .pv-err .top em{font-style:normal;font-weight:700;color:var(--dim)} html.v2 .pv-err .track{display:block;height:10px;background:var(--stage-3)} html.v2 .pv-err .track i{display:block;height:100%} html.v2 .pv-err.me .top b{color:var(--lime)} html.v2 .pv-err.me .track i{background:var(--lime)} html.v2 .pv-err.ai .top b{color:var(--ai)} html.v2 .pv-err.ai .track i{background:var(--ai)} html.v2 .pv-axis{display:flex;justify-content:space-between;font-size:10.5px; color:var(--dim);font-weight:700} html.v2 .pv-why{font-size:13px;line-height:1.75;color:#a8a8a0;margin-top:18px; padding-left:14px;border-left:1px solid var(--edge)} html.v2 .pv-why b{display:block;color:var(--ai);font-weight:800;margin-bottom:5px;font-size:13px} html.v2 .pv-why .blind{display:block;margin-top:9px;padding-top:9px; border-top:1px dashed var(--edge);font-size:11.5px;color:var(--dim);line-height:1.6} @media(max-width:640px){ html.v2 .pv-split{grid-template-columns:1fr} html.v2 .pv-half .ph{aspect-ratio:2.2} } /* ══ 거짓말 모드 (시안 레이아웃) ═══════════════════════════════ 세 문장을 나란히 세운다. 세로로 쌓으면 '읽을 목록'이 되는데, 이 게임은 셋을 왕복하며 견주는 게임이라 한눈에 들어와야 한다. */ html.v2 .lie-h{font-size:clamp(19px,2.2vw,28px);font-weight:900;letter-spacing:-.03em; text-align:center;line-height:1.35;margin:14px 0 18px} html.v2 .lie-topic{position:relative;width:100%;max-width:520px;margin:0 auto 20px; aspect-ratio:2.4;overflow:hidden;border:1px solid var(--edge);background:#fff} html.v2 .lie-topic img{width:100%;height:100%;object-fit:cover;display:block} html.v2 .lie-topic .cr{position:absolute;right:8px;bottom:7px;font-size:10px; color:#fff;background:rgba(10,10,9,.6);padding:2px 7px;border-radius:2px} html.v2 .lie-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px; align-items:start} html.v2 .lie-card{position:relative;text-align:left;border:1px solid var(--edge); background:var(--stage-2);padding:22px 18px;border-radius:3px; transition:border-color .16s,background .16s} html.v2 .lie-card:not(:disabled):hover{border-color:var(--lime);background:var(--stage-3)} html.v2 .lie-card .no{display:block;font-size:11px;color:var(--dim);font-weight:800; letter-spacing:.1em} html.v2 .lie-card p{font-size:14px;line-height:1.7;margin-top:12px;color:var(--ink)} html.v2 .lie-card .note{display:block;margin-top:12px;padding-top:11px; border-top:1px dashed var(--edge);font-size:12.5px;line-height:1.65;color:var(--dim)} /* 공개 뒤에만 색이 붙는다. 고른 카드는 테두리를 굵게 해 '내가 고른 것'을 남긴다 */ html.v2 .lie-card.truth{border-color:var(--edge)} html.v2 .lie-card.lie{border-color:var(--danger)} html.v2 .lie-card.picked{box-shadow:inset 0 0 0 1px currentColor} html.v2 .lie-card.truth::after,html.v2 .lie-card.lie::after{position:absolute;top:14px;right:14px; font-size:10px;font-weight:900;padding:3px 8px;border-radius:2px} html.v2 .lie-card.truth::after{content:'사실';background:var(--stage-3);color:var(--dim)} html.v2 .lie-card.lie::after{content:'거짓말';background:var(--danger);color:#fff} html.v2 .lie-foot{text-align:center;font-size:12.5px;color:var(--dim);margin-top:18px} @media(max-width:760px){ html.v2 .lie-cards{grid-template-columns:1fr} html.v2 .lie-topic{aspect-ratio:2.8} } /* 승패 배너 — 라임 판을 통째로 깔면 그 위의 크림 글자가 사라진다. 면 대신 테두리와 글자색으로 말한다. 이 화면에서 제일 큰 글자라 색만으로 충분하다. */ html.v2 .bverdict{background:none!important;border:1px solid currentColor;border-radius:3px; box-shadow:none!important;padding:20px 18px} html.v2 .bverdict::after{display:none} html.v2 .bverdict.win{color:var(--lime)} html.v2 .bverdict.lose{color:var(--ai)} html.v2 .bverdict.draw{color:var(--dim)} html.v2 .bverdict small{color:var(--dim);font-weight:700} html.v2 .actual-hero{background:var(--stage-2);border:1px solid var(--edge);border-radius:3px; padding:18px 14px} html.v2 .actual-hero .lb{color:var(--dim)} html.v2 .actual-hero .major .sq{border-radius:2px} html.v2 .actual-hero .major .pc{color:var(--lime);border-left-color:var(--edge)} html.v2 .actual-hero .sidecall.hit{background:none;border:1px solid var(--lime);color:var(--lime); border-radius:2px} html.v2 .actual-hero .sidecall.miss{background:none;border:1px solid var(--edge);color:var(--dim); border-radius:2px} /* 실제 비율 띠 — 내가 고른 쪽이 라임, 나머지는 그냥 어두운 칸 */ html.v2 .bsplit{background:var(--stage-3);border-color:var(--edge);border-radius:2px} html.v2 .bsplit .me{background:var(--lime);color:#0e0e0e} html.v2 .bsplit .rest{background:var(--stage-3);color:var(--dim)} /* 오차 막대 — 나는 라임, AI는 파랑. 원래는 회색과 연한 파랑이라 둘 다 안 보였다 */ html.v2 .errline .track{background:var(--stage-3);border-color:var(--edge);border-radius:2px} html.v2 .errline.me .bar{background:var(--lime)} html.v2 .errline.ai .bar{background:var(--ai)} html.v2 .errline.me .top b{color:var(--lime)} html.v2 .errline.ai .top b{color:var(--ai)} html.v2 .errline.me .top b::before{background:var(--lime)} html.v2 .errline.ai .top b::before{background:var(--ai)} /* 빨강은 '내 오답'에만. AI 줄이 빨간 글씨로 '더 정확'이라고 말하면 신호가 뒤집힌다 */ html.v2 .errline.me.win .top .err{color:var(--lime)} html.v2 .errline.me.lose .top .err{color:var(--danger)} html.v2 .errline.ai .top .err{color:var(--ai)} /* 실제 값 세로선 — var(--black)이라 무대에서 배경과 같은 색이 된다 */ html.v2 .errwrap .actualline{background:var(--ink);opacity:.55} html.v2 .errwrap .actualline::after{color:var(--ink);background:var(--stage)} html.v2 .baxis{color:var(--dim)} html.v2 .bwhy{background:none;border-left:1px solid var(--edge);border-radius:0;color:#a8a8a0} html.v2 .bwhy b{color:var(--ai)} html.v2 .bwhy .blind{color:var(--dim)} html.v2 .stmt{background:var(--stage-2);border-color:var(--edge);border-radius:0} html.v2 .stmt:hover{border-color:var(--lime)} html.v2 .bcmt{border-top-color:var(--edge)} /* 댓글 접기 버튼 — 면도 글자도 어두워 '눌러야 하는 것'으로 안 보였다 */ html.v2 .bcmt-toggle{background:var(--stage-2);border:1px solid var(--edge); border-radius:3px;color:var(--ink)} html.v2 .bcmt-toggle:hover{border-color:var(--lime);color:var(--lime)} html.v2 .bcmt-toggle i{color:var(--dim)} /* ── 게임 시작 전 화면(setup) ────────────────────────── 여기가 '게임 방법'을 실제로 읽는 자리다. 규칙은 about과 같은 모양(.how-rules)을 쓰고, 위쪽 VS 머리와 힌트 예시는 그 앞의 인사말 정도로 눌러 둔다. */ html.v2 .vs-hero{background:none;border:none;border-top:1px solid var(--edge); border-bottom:1px solid var(--edge);border-radius:0;box-shadow:none;padding:18px 0} html.v2 .vs-side b{color:var(--ink)} html.v2 .vs-mid span{color:var(--dim)} html.v2 .vs-mid em{color:#a8a8a0;font-style:normal} html.v2 .mode-example{background:var(--stage-2);border:1px solid var(--edge);border-radius:3px} html.v2 .me-label{color:var(--dim)} html.v2 .me-label i{color:var(--dim)} html.v2 .me-dot{background:var(--stage-3)} html.v2 .me-dot.on{background:var(--lime)} /* 힌트 예시 판도 출제 영역과 같은 흰 바탕 위에 올린다 */ html.v2 .me-crop,html.v2 .me-mosaic canvas,html.v2 .me-grid, html.v2 .me-body img,html.v2 .me-body canvas{background:#fff;border-color:var(--edge); border-radius:0} html.v2 .me-body{color:var(--ink)} /* ══════════════════════════════════════════════════════════════════ 라임 면 위의 글자 — 이 스킨에서 가장 많이 깨진 곳 원래 시트는 라임 버튼에 글자색을 안 적었다. --ink(짙은 회색)를 물려받아 저절로 맞았기 때문이다. --ink를 크림으로 뒤집는 순간 라임 위에 크림 글자가 놓여 버튼 글씨가 통째로 사라진다("게임 시작", "한 판 더", "다음 문제" 전부). 그래서 라임이 깔리는 면을 한곳에 모아 글자색을 무대색으로 못 박는다. ══════════════════════════════════════════════════════════════════ */ html.v2 .btn-lime, html.v2 .today .cta, html.v2 .auth-chip.login, html.v2 .hint-btn, html.v2 .verdict.win .v-badge, html.v2 .rank-tabs .rt.sel, html.v2 .input-row button, html.v2 .m-tag.new, html.v2 .ib-tag, html.v2 .msg.me .ava{color:#0e0e0e} /* 아이콘 색은 !important가 필요하다 — 마크업에 style="color:var(--lime)"가 박혀 있어서 인라인 스타일이 어떤 선택자보다 무겁다. 라임 버튼 위의 라임 화살표는 안 보인다. */ html.v2 .btn-lime svg, html.v2 .today .cta svg, html.v2 .hint-btn svg, html.v2 .input-row button svg, html.v2 .msg.me .ava svg{color:#0e0e0e!important} /* AI 얼굴 아이콘은 AI 색으로 — 이 스킨에서 라임은 언제나 '나'다. ⚠️ .avatar를 한꺼번에 파랗게 칠하면 결과 화면의 '나' 얼굴까지 파래진다. 둘을 갈라 준다. */ html.v2 .ai-feed .ai-face svg, html.v2 #cmpAi .avatar svg{color:var(--ai)!important} html.v2 #cmpUser .avatar svg{color:var(--lime)!important} html.v2 .avatar{background:var(--stage-3);border-color:var(--edge)} html.v2 .avatar[style]{background:var(--stage-3)!important} html.v2 #cmpUser.cmp-cell.win{background:rgba(200,242,39,.08);border-color:var(--lime)} html.v2 #cmpAi.cmp-cell.win{background:rgba(121,199,222,.09);border-color:var(--ai)} html.v2 .cmp-cell .tag{color:var(--dim)} html.v2 .btn-lime b,html.v2 .btn-lime span, html.v2 .today .cta span{color:inherit} /* 로그인 칩은 라임 알약이다. 위에서 .auth-chip 전체를 어둡게 덮는 바람에 이 변형까지 같이 잡아먹혔다 — 다시 세워 준다. */ html.v2 .auth-chip.login{background:var(--lime);border-color:var(--lime)} /* 버튼 테두리가 var(--black)이라 무대와 같은 색이 된다. 면으로만 구분한다 */ html.v2 .btn{border-color:transparent;box-shadow:none;border-radius:3px} html.v2 .btn-lime{border-color:var(--lime)} html.v2 .hint-btn{border-color:var(--lime);border-radius:3px;box-shadow:none} html.v2 .hint-btn:disabled{background:var(--stage-2);color:var(--dim);border-color:var(--edge)} html.v2 .today .cta{border-radius:3px;box-shadow:none} html.v2 .today.done .cta{background:transparent;color:var(--lime);border-color:var(--lime)} html.v2 .today.done .cta svg{color:var(--lime)} html.v2 .kakao-btn{color:#191919;border-color:#FEE500} html.v2 .kakao-btn svg path{fill:#191919} /* 아이콘 판 — 라임 정사각형에 이모지를 얹던 자리. 무대에서는 라임 덩어리가 버튼보다 튀어서 '누르는 것'과 '그림'이 뒤바뀐다. */ html.v2 .mode-icon{background:var(--stage-3);border-radius:3px} html.v2 .mode-icon svg{color:var(--lime)} /* 난이도 탭 — .sel이 var(--black) 면에 var(--paper) 글자라 무대에서 통째로 사라졌다 */ html.v2 .rank-tabs{border-color:var(--edge)} html.v2 .rank-tabs .rt{background:var(--stage-2);border-color:var(--edge); color:var(--dim);border-radius:3px} html.v2 .rank-tabs .rt.sel{background:var(--lime);border-color:var(--lime)} /* 랭킹 표 — 시안대로 네 칸(순위·이름·라운드·점수)짜리 줄로 세운다. 알약 카드를 늘어놓으면 '목록'으로 읽히지 '순위표'로 안 읽힌다. */ html.v2 .rank-list{border-top:1px solid var(--edge);margin-top:20px} html.v2 .rank-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto 56px; align-items:center;gap:14px;padding:14px 6px;border:none;border-bottom:1px solid var(--edge); border-radius:0;background:none;box-shadow:none;margin:0} html.v2 .rank-row .rk{width:auto;text-align:left;font-size:17px;color:var(--dim); font-family:'NeoDunggeunmoPro-Regular','NeoDunggeunmo Pro',monospace;font-weight:400} html.v2 .rank-row.top .rk{color:var(--lime)} html.v2 .rank-row .nm{font-size:14.5px;font-weight:800;color:var(--ink)} html.v2 .rank-row .rd{font-size:12px;color:var(--dim)} html.v2 .rank-row .sc{font-size:19px;text-align:right;color:var(--ink); font-family:'NeoDunggeunmoPro-Regular','NeoDunggeunmo Pro',monospace;font-weight:400} html.v2 .rank-row .sc em{display:none} /* '승'은 표 머리가 아니라 잔글씨라 지운다 */ /* 내 줄만 면을 깔아 눈에 띄게 — 순위표에서 제일 먼저 찾는 게 자기 이름이다 */ html.v2 .rank-row.me{background:var(--stage-2);border-bottom-color:var(--lime)} html.v2 .rank-row.me .nm::after{content:'나';margin-left:8px;font-size:10px;font-weight:900; background:var(--lime);color:#0e0e0e;padding:2px 6px;border-radius:2px} html.v2 .rank-empty{color:var(--dim);text-align:center;padding:40px 0} /* 페이지 머리 — 가운데 정렬 작은 제목 대신 시안의 왼쪽 큰 제목으로 */ html.v2 .page-title{text-align:left;padding:30px 0 2px} html.v2 .page-title b{display:block;font-size:clamp(24px,2.8vw,36px);font-weight:900; letter-spacing:-.035em} html.v2 .page-title p{color:var(--dim);margin-top:10px} /* 하드코딩된 짙은 회색 글자들(#444·#555) — 밝은 종이 위를 전제로 한 값이다 */ html.v2 .rule{color:#a8a8a0} html.v2 .rule b{color:var(--ink)} html.v2 .receipt-row span{color:var(--dim)} html.v2 .opt-label{color:var(--dim)} /* 문제 수·난이도 고르는 알약. 고른 것만 라임이 깔린다 */ html.v2 .opt{background:var(--stage-2);border-color:var(--edge);color:var(--dim);border-radius:3px} html.v2 .opt.sel{background:var(--lime);border-color:var(--lime)} html.v2 .opt.sel b,html.v2 .opt.sel span{color:#0e0e0e} /* 입력줄 — 바깥 상자에 테두리를 줬는데 안쪽 input이 자기 테두리(2px)를 그대로 갖고 있어 테두리가 두 겹이 됐다. 상자가 테두리를 맡고 input은 알맹이만 맡는다. */ html.v2 .input-row{gap:6px} html.v2 .input-row input{border:none;background:none;border-radius:0; padding:12px 0;box-shadow:none} html.v2 .input-row input:focus{outline:none;box-shadow:none} html.v2 body.stage .input-row input{box-shadow:none} html.v2 .input-row button{border:none;width:auto;padding:0 22px;align-self:stretch; border-radius:3px} /* ══════════════════════════════════════════════════════════════════ PC — 여기서부터가 시안의 배치다 ══════════════════════════════════════════════════════════════════ */ @media(min-width:1000px){ html.v2{--maxw:1520px} /* 읽는 화면(설정·카테고리·랭킹·아카이브)은 넓힐 이유가 없다. 글줄이 화면 끝까지 가면 눈이 줄을 따라가지 못한다. */ html.v2 main{max-width:1520px} /* :not(#id)로 묶지 않는다 — :not 안의 아이디가 그대로 무게로 잡혀서(아이디 4개) 정작 개별 화면을 따로 조정하려 할 때 아무 규칙도 이기지 못한다. */ html.v2 #scr-setup,html.v2 #scr-silcat,html.v2 #scr-regioncat,html.v2 #scr-infcat, html.v2 #scr-rank,html.v2 #scr-ugc,html.v2 #scr-result{max-width:820px;margin:0 auto} /* 심리전은 더 좁게. 슬라이더가 820px로 늘어나면 1%를 8px 거리로 조준해야 해서 손이 미끄러진다 — 값을 고르는 화면은 폭이 좁을수록 정확해진다. */ html.v2 #scr-balance,html.v2 #scr-fake,html.v2 #scr-know{max-width:620px;margin:0 auto} /* ── 홈 : 히어로 + 판세 두 기둥 ───────────────────────── 기둥 안에서는 원래 세로 흐름 그대로다. 칸마다 grid-row를 주면 줄 높이가 그 줄의 가장 큰 것에 맞춰져 작은 것 옆이 통째로 빈다. */ html.v2 body.at-home #scr-home{display:grid; grid-template-columns:minmax(0,1fr) 360px; grid-template-areas:'hero side' 'rest rest'; column-gap:clamp(32px,4vw,72px);align-items:start} html.v2 body.at-home .home-hero{grid-area:hero} html.v2 body.at-home .home-side{grid-area:side; border-left:1px solid var(--edge);padding-left:clamp(22px,2.4vw,40px); margin-top:20px} html.v2 body.at-home .home-rest{grid-area:rest;margin-top:clamp(24px,3vh,40px); border-top:1px solid var(--edge);padding-top:clamp(16px,2vh,24px)} html.v2 body.at-home .today{margin-top:20px} html.v2 body.at-home .today .cta{width:auto;align-self:flex-start;padding:16px 32px} html.v2 body.at-home .today{display:flex;flex-direction:column;align-items:flex-start} html.v2 body.at-home .today>*{width:100%} html.v2 body.at-home .today .cta{width:auto} /* 한 줄에 다섯. 지금 맞히기 모드가 정확히 다섯이라 띠가 딱 맞아떨어진다. 여섯 번째가 생기면 다음 줄로 접히고, 타일이 선을 직접 그리므로 빈 칸은 그냥 없다. 칸 수를 고정하는 이유는 무리마다 타일 크기를 같게 하기 위해서다 — auto-fit으로 두면 심리전(3개)만 타일이 두 배로 커져 따로 노는 표가 된다. */ html.v2 body.at-home .modes{grid-template-columns:repeat(5,1fr)} /* ── 게임 : AI · 출제 · 나 ─────────────────────────────── 왼쪽이 상대, 오른쪽이 나. 카톡이 내 말풍선을 오른쪽에 두는 것과 같은 방향이라 손이 안 헷갈린다. 대화판(.chatPane)은 한 덩어리인 채로 3열 그리드가 되고, 가운데 칸은 비워 그 자리에 힌트판을 겹쳐 놓는다. 말풍선을 두 컨테이너로 쪼개지 않는 이유는 시간 순서 때문이다 — 쪼개면 'AI 말 전부, 그다음 내 말 전부'가 되어 주고받은 순서가 사라진다. 한 흐름이어야 좁은 화면에서도 그대로 접힌다. */ html.v2 body.playing .chatframe{display:grid; --stagew:clamp(280px,38vh,420px); grid-template-columns:minmax(200px,1fr) var(--stagew) minmax(200px,1fr); grid-template-rows:minmax(0,1fr) auto; column-gap:clamp(20px,3vw,56px)} html.v2 body.playing .hintPane{grid-column:2;grid-row:1;min-height:0; border:none;padding:8px 0 12px; display:flex;flex-direction:column;align-items:center;justify-content:center} html.v2 body.playing .hintPane>*{max-width:100%} /* 힌트판을 가운데 정렬로 세우면 자식들이 '내용 크기'로 쪼그라든다 — 단계 게이지는 폭이 곧 정보라(5칸 중 3칸) 20px로 접히면 아무 말도 못 한다. */ html.v2 body.playing .hintPane .q-steps{width:var(--stagew);max-width:100%} html.v2 body.playing .hintPane .hint-btn{width:var(--stagew);max-width:100%} /* 오른쪽 기둥 끝에 붙은 내 말풍선이 화면 가장자리에 닿아 잘려 보인다 */ html.v2 body.playing .chatPane{padding-right:2px} /* 같은 칸에 겹쳐 깐다. 가운데 열은 비어 있어 겹쳐도 부딪히지 않는다. 겹친 층이 클릭을 가로채지 않게 말풍선만 살려 둔다. */ html.v2 body.playing .chatPane{grid-column:1 / -1;grid-row:1;min-height:0; display:grid; grid-template-columns:minmax(200px,1fr) var(--stagew) minmax(200px,1fr); column-gap:clamp(20px,3vw,56px);row-gap:9px;align-content:start; /* ⚠️ align-items가 없으면 기본값 stretch다. 같은 줄에 놓인 AI 말풍선이 두 줄짜리면 내 한 줄짜리 오답까지 그 높이로 늘어나, 글자 하나에 세로로 긴 빈 상자가 붙는다. */ align-items:start; padding:26px 0 8px;pointer-events:none} html.v2 body.playing .chatPane>*{pointer-events:auto} /* AI는 왼쪽 끝, 나는 오른쪽 끝. 카톡이 내 말풍선을 오른쪽에 두는 것과 같은 방향이라 손이 안 헷갈린다 — 가운데로 몰아봤더니 두 사람 말이 이미지에 달라붙어 더 어지러웠다. */ /* width:max-content가 없으면 말풍선이 세로로 길쭉한 상자가 된다. 그리드 칸에서 justify-self를 주면 폭이 fit-content가 되는데, 안쪽 .line이 flex-wrap:wrap이라 글자 덩어리가 min-content(한글은 한 글자)까지 쪼그라들 수 있다. 그러면 '파아니' 같은 짧은 오답이 네 줄짜리 세로 상자로 그려진다. 한글은 단어 중간에서도 줄이 갈라지므로 keep-all로 막아준다. */ html.v2 body.playing .msg{width:max-content;max-width:100%;align-self:auto} html.v2 body.playing .msg .bub{word-break:keep-all;overflow-wrap:anywhere} html.v2 body.playing .msg.ai{grid-column:1;justify-self:start} html.v2 body.playing .msg.me{grid-column:3;justify-self:end} /* 가운데 칸을 가로지르는 것은 하나도 없어야 한다 — 겹쳐 놓은 층이라 1/-1로 펼치면 그 줄이 출제 이미지 위를 그대로 지나간다(선이 사진을 관통했다). · 단계 구분선: 감춘다. 같은 말을 게이지와 'N단계 / M단계'가 이미 하고 있고, 무엇보다 이 배치에서는 이미지가 바뀌는 걸 눈으로 본다. · 시스템 한 줄: 내용이 전부 AI 이야기라('AI도 같은 힌트를 봅니다', 'AI도 끝까지 못 알아봤어요') AI 자리에 둔다. */ html.v2 body.playing .stagediv{display:none} /* align-self:center는 flex 기준이라 grid에서는 폭을 안 줄인다 — 그대로 두면 안내 한 줄이 열 전체를 차지하는 빈 알약이 된다. */ html.v2 body.playing .sysline{grid-column:1;justify-self:start;align-self:auto; text-align:left;width:auto;max-width:100%} html.v2 body.playing .composePane{grid-column:1 / -1;grid-row:2; max-width:760px;margin:0 auto;width:100%;background:none;border-top:none} /* 출제 이미지는 무대의 주인공이다. 모바일 244px의 '보이는 크기'를 60cm 거리로 옮기면 이 언저리다. */ html.v2 body.playing .hintPane .hint-img{max-height:var(--stagew);width:auto} html.v2 body.playing .hintPane .zoom-wrap, html.v2 body.playing .hintPane .sil-wrap{width:var(--stagew);height:var(--stagew)} html.v2 body.playing .hintPane .grid-wrap, html.v2 body.playing .hintPane .draw-wrap{width:var(--stagew);height:var(--stagew)} /* .pix-wrap.big의 width:256px이 더 무거워서 그게 실제 크기를 잡는다. 원래 설계 의도(높이로 잡고 폭은 auto)로 돌려야 세로로 긴 사진이 안 찌그러진다. */ html.v2 body.playing .hintPane .pix-wrap canvas.pix, html.v2 body.playing .hintPane .pix-wrap.big canvas.pix{ width:auto;max-width:100%;height:var(--stagew);max-height:none} html.v2 body.playing .hintPane .big-hint{font-size:clamp(46px,7dvh,76px)} html.v2 body.playing .ad-side{display:none} /* ── 결과 : 성적표 + 공유 두 기둥 ─────────────────────── 공유 버튼이 스크롤 아래에 묻히지 않게 오른쪽 기둥으로 뺀다. */ html.v2 body.at-final #scr-final{display:grid; grid-template-columns:minmax(0,1fr) 320px; column-gap:clamp(32px,4vw,72px);align-items:start;max-width:1180px;margin:0 auto} html.v2 body.at-final #scr-final>*{grid-column:1} /* 껍데기의 display:contents를 여기서만 되돌린다 — 되돌려야 한 칸으로 묶여 옮겨진다. 공유 버튼이 스크롤 한참 아래에 묻히는 게 이 화면의 오래된 문제였다. grid-row를 1부터 억지로 잡아주지 않으면 DOM 순서를 따라 성적표 밑줄까지 내려간다. */ html.v2 body.at-final #scr-final .final-share{grid-column:2;grid-row:1 / span 99; display:flex;flex-direction:column;gap:10px;position:sticky;top:84px} html.v2 body.at-final #scr-final .final-share>*{margin-top:0} html.v2 body.at-final #scr-final .final-share .btn{width:100%} html.v2 body.at-final #scr-final .final-share>div{display:flex;gap:8px} html.v2 body.at-final .final-hero{text-align:left;padding:26px 0 4px} html.v2 body.at-final .grid-record{justify-content:flex-start} } /* ══════════════════════════════════════════════════════════════════ 별도 페이지 — 게임 방법 · 정답 아카이브 · 약관 · 문의 이 페이지들은 index.html의 시트를 안 쓰고 각자