/* RAINBOW POP! — 화면 * * 설계 규칙 세 가지. 이걸 안 지키면 아무리 예쁜 부품을 붙여도 웹페이지가 된다. * * ① **주 행동은 따뜻한 색.** 세상이 전부 파랑인데 시작 버튼까지 파랑이면 * 어디를 눌러야 하는지 눈이 못 찾는다. 산호색은 여기 말고 아무 데도 안 쓴다. * ② **간격과 둥글기는 계단으로.** 눈대중으로 12, 14, 18 을 섞으면 * 이유 없는 어긋남이 쌓여서 "아마추어" 로 읽힌다. * ③ **메뉴는 바닥에 붙인다.** 세로로 흩어 놓으면 화면이 비어 보인다. * 그림은 위, 손은 아래 — 엄지가 닿는 곳에 버튼이 있어야 한다. */ :root{ /* 둥글기 계단 */ --r-sm:14px; --r-md:22px; --r-lg:30px; --r-pill:999px; /* 간격 계단 */ --sp-1:6px; --sp-2:12px; --sp-3:18px; --sp-4:26px; --sp-5:38px; /* 주 행동 색. * * 처음엔 산호빨강이었는데 싸구려 플라스틱처럼 보였다. 원인 셋: * ① 빨강은 이 세상(파랑·분홍 파스텔)에 없는 색이라 이물감이 든다 * ② 밝은빨강 → 어두운빨강 그라데이션이 폭이 넓어 '고무' 로 읽힌다 * ③ 경고색이라 "누르면 안 될 것 같은" 느낌이 섞인다 * 민트로 바꿨다 — 물과 같은 계열이라 어울리고, 초록은 '가도 좋다' 다. * 색폭을 좁게 잡고 아래 굽만 진하게 둬서 사탕처럼 보이게 한다. */ /* UI 는 이 다섯 색만 쓴다. 배경·버튼·글자가 저마다 다른 채도를 쓰면 * 화면이 뿌옇고 흩어져 보인다. */ --hot:#0e9c7f; --hot-d:#07866f; --hot-l:#49c9aa; /* 주 행동 */ --ink-d:#163b4a; /* 글자 */ --warn:#c94545; /* 경고 — 여기만 */ --lift:0 10px 24px rgba(28,90,140,.18); --sky1:#eaf7ff; --sky2:#cfeaff; --ink:#17384f; --dim:#4e6b80; --blue:#1c7fd6; --blue-d:#1466ab; --line:#c5e2f7; /* --dim 은 12~14px 본문(놀이법·이야기)에 쓴다. 원래 #6d8ea6 이었는데 * 배경 --sky2 위에서 2.78:1 밖에 안 나왔다 — 작은 글자는 4.5:1 이 필요하다. * 색조는 그대로 두고 명도만 내렸다. 경고색도 같은 이유로 #ff6b6b → #c94545. */ --paper:#ffffff; --good:#3fbf5a; } *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent} html{height:100%;overscroll-behavior:none; /* 첫 칠. **단색과 무늬를 따로** 건다 — 사파리는 안전영역 띠 색을 고를 때 * 그라데이션이 아니라 단색 background-color 를 보고, 못 찾으면 흰색이 된다. */ background-color:#DAC4A5; background-image:linear-gradient(180deg,#DAC4A5 0%,#CBB391 100%)} body{height:100%;overscroll-behavior:none} body{ /* 바탕은 html 이 칠한다 — 여기서 또 칠하면 위쪽 안전영역이 어긋난다 */ background:transparent;color:var(--ink); font-family:"Pretendard","Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif; /* 귀여운 제목 글꼴 — 버튼·제목·알약에만 쓴다. * 본문까지 바꾸면 40~60대에게 읽기 나빠진다. 굵기가 하나뿐이라 굵게는 흉내내지 않는다. */ --font-cute:"Jua","Pretendard","Apple SD Gothic Neo",system-ui,sans-serif; /* ⚠ 여기 touch-action:none 을 두면 **자식이 pan-y 라도 못 굴러간다.** * 실제 손가락 판정은 눌린 요소부터 조상까지의 **교집합**이라, body 가 none 이면 * 덮개 화면이 pan-y 여도 끝이다 — 넘치는데 스크롤이 안 됐던 이유(2026-08-17). * 놀이 중 화면이 끌려가지 않게 막는 건 #stage 가 이미 맡고 있다. */ overflow:hidden;user-select:none;-webkit-user-select:none; -webkit-touch-callout:none;-webkit-text-size-adjust:100%; } #app{ position:relative;height:100%;max-width:560px;margin:0 auto; display:flex;flex-direction:column; /* 아이폰 아래쪽 홈 인디케이터가 화면을 덮는다. * viewport-fit=cover 로 화면 끝까지 쓰기로 했으면, 그만큼 **직접 비켜줘야** 한다. * 이걸 안 하면 물방울이 서 있는 바닥과 수면이 인디케이터에 가려 잘린다. */ padding-top:env(safe-area-inset-top, 0px); padding-bottom:env(safe-area-inset-bottom, 0px); background:linear-gradient(180deg,var(--sky1) 0%,var(--sky2) 100%); box-shadow:0 0 40px rgba(20,70,110,.14); } /* ── HUD ────────────────────────────────────────────── */ /* HUD 는 알약 세 개가 흩어져 떠 있으면 어수선하다. 한 판(板) 위에 얹는다. */ #hud{ flex:0 0 auto;margin:var(--sp-2) var(--sp-2) var(--sp-1); padding:9px 12px 11px; border-radius:20px; background:rgba(255,255,255,.88); box-shadow:0 5px 14px rgba(29,91,122,.14); transition:opacity .2s } #hud.hide{opacity:0;pointer-events:none} #hud .row{display:flex;align-items:center;gap:var(--sp-1);margin-bottom:var(--sp-2);font-size:12.5px;font-weight:700} /* HUD 알약 — 위가 밝고 아래가 어두운 그라데이션 + 안쪽 하이라이트로 도톰하게 */ /* 강조색(산호)은 **시작 버튼 하나에만** 쓴다. 여기저기 쓰면 강조가 아니게 된다. */ #stagenum{ background:linear-gradient(180deg,#fff,var(--sky1)); border:2px solid rgba(255,255,255,.9);border-radius:999px; padding:5px 13px;color:#105f89;font-weight:700;font-size:14px;flex:0 0 auto; box-shadow:0 3px 0 rgba(70,130,175,.22), 0 5px 10px rgba(40,110,160,.16), inset 0 1px 0 rgba(255,255,255,.95) } #leftbox{ flex:1 1 auto;text-align:center;white-space:nowrap; color:var(--blue-d);background:linear-gradient(180deg,#fff,var(--sky1)); border:2px solid rgba(255,255,255,.9);border-radius:999px;padding:5px 10px; box-shadow:0 3px 0 rgba(70,130,175,.22), 0 5px 10px rgba(40,110,160,.16), inset 0 1px 0 rgba(255,255,255,.95) } #leftbox b{color:#105f89;font-size:15px;font-weight:800;font-variant-numeric:tabular-nums} /* 게이지 — 홈이 파인 것처럼 안쪽에 그림자, 채워진 쪽은 위가 반짝이게 */ /* 게이지는 CSS 막대가 아니라 **물이 차오르는 유리관**이다. * 색 막대가 늘어나는 건 웹페이지 진행바지, 물 모으는 게임이 아니다. */ #gauge{display:block;width:100%;height:auto;margin:2px 2px 0} /* ── 무대 ───────────────────────────────────────────── */ #stage{flex:1 1 auto;position:relative;min-height:0;touch-action:none} #cv{display:block;width:100%;height:100%} /* 동그란 입체 버튼 */ #recenter,#mute{ width:34px;height:34px;border-radius:12px;flex:0 0 auto; background:radial-gradient(circle at 36% 28%,#fff,var(--sky1) 58%,#d6ecfb); border:2px solid rgba(255,255,255,.95); color:var(--blue-d);font-size:15px;line-height:1;cursor:pointer; display:grid;place-items:center;padding:0; box-shadow:0 3px 0 rgba(70,130,175,.26), inset 0 1px 0 rgba(255,255,255,.95); transition:transform .08s,box-shadow .08s } /* 필드 위에 떠 있던 버튼을 HUD 안으로 들였다. * 허공에 떠 있으면 임시로 붙여둔 디버그 컨트롤처럼 보이고, 숫자까지 가렸다. */ .tools{display:flex;gap:6px;flex:0 0 auto} #recenter:active,#mute:active{ transform:translateY(2px);box-shadow:0 1px 0 rgba(70,130,175,.26) } /* (예전에 필드 위에 띄웠던 #mute 규칙이 여기 남아 새 것을 덮고 있었다. * CSS 는 뒤가 이긴다 — 옮길 때는 옛 규칙을 반드시 지워야 한다.) */ #mute.off{color:#a8b8c4;opacity:.75} /* ── 덮개 화면 ──────────────────────────────────────── */ /* 덮개 화면 배경. * * 옅은 하늘색 한 겹은 싸구려로 보인다 — 빛도 없고 공기도 없어서 * 그냥 '칠한 벽' 이 된다. 세 가지를 겹친다. * ① 위에서 아래로 색이 도는 그라데이션 (연보라 → 하늘 → 옅은 청록) * ② 위쪽 한 점에서 퍼지는 빛 * ③ 아래쪽에 깔리는 따뜻한 기운 — 차가운 색만 있으면 서늘하고 심심하다 */ .ov{ display:none;position:absolute;inset:0;z-index:30; padding-bottom:calc(24px + env(safe-area-inset-bottom, 0px)); /* HUD(비치면 지저분하다) 위로 */ /* 덮개 화면도 첫 화면과 **같은 종이색**으로 간다(2026-08-17). * 예전엔 여기만 하늘빛 그라데이션이라, 성공 화면에 들어가면 위아래 안전영역만 * 무대 색(분홍)으로 남아 이가 나갔다. 색을 한 벌로 모으면 그 문제가 사라진다. * (멈춤 화면은 판이 비쳐야 하므로 아래에서 따로 반투명을 덮는다) */ background:linear-gradient(180deg,#DAC4A5 0%,#D3BC9B 46%,#CBB391 100%); padding:24px 20px;overflow-y:auto; } .ov.on{display:flex;flex-direction:column;justify-content:center;align-items:center} /* ⚠ 가운데 정렬(justify-content:center) 인 flex 는 **내용이 넘치면 위로도 흘러 나간다.** * 위로 나간 부분은 스크롤로 되돌아갈 수 없어서(scrollTop 은 0 보다 작아지지 않는다) * 「넘치는데 스크롤이 안 된다」가 된다 — 예전에 작은 기종에서 위가 잘렸던 것과 같은 함정. * 넘칠 때(.scrolls)만 위쪽 정렬로 바꿔 전부 손에 닿게 한다(2026-08-17). */ .ov.on.scrolls{justify-content:flex-start} /* 위쪽 정렬로 바뀌면 아래 여백이 사라져 마지막 버튼이 화면 끝에 붙는다 — 숨을 넣는다 */ .ov.on.scrolls > .card{margin-bottom:8px} .card{width:100%;max-width:400px;text-align:center} /* 오프닝만은 위/아래로 나눈다 — 그림은 위, 손은 아래 */ #title-screen.on{justify-content:space-between; padding:var(--sp-3) var(--sp-4) calc(var(--sp-5) + env(safe-area-inset-bottom, 0px))} /* ── 첫 화면 배경 ───────────────────────────────────── * 베이지와 브라운의 **중간**, 그리고 **그라데이션 없이 한 색**(사장님 지시 2026-08-17). * 손그림 로고·아이콘이 수채화 종이 결이라, 바탕도 한 장의 종이여야 그림이 된다. * 그라데이션을 걷으면 인쇄물처럼 차분해지는 대신 얹는 것들이 다 드러나므로, * 잉크와 흐린 글씨를 한 단계씩 진하게 맞췄다. * #D3BC9B 바탕 한 색 (갈색 글씨 #5C4636 과 4.8:1 — 본문 기준 4.5:1 을 넘긴다) * #8E7048 잉크 그려 넣은 물결·거품 * #5C4636 글씨 * #6B5238 흐린 글씨 (옅은 회갈색은 이 바탕에서 2.6:1 로 떨어졌다) * 놀이 화면은 그대로 하늘색이다 — 첫 화면만 종이로 간다. * 되돌리려면 이 블록을 지우면 .ov 의 하늘 그라데이션이 다시 보인다. */ #title-screen.on{ /* 한 색은 너무 납작해서 아주 옅게만 기울인다 — 위가 반 톤 밝고 아래가 반 톤 짙다. * 눈에 띄는 그라데이션이 아니라 종이에 빛이 스친 정도다(2026-08-17). */ background:linear-gradient(180deg,#DAC4A5 0%,#D3BC9B 46%,#CBB391 100%)} /* ① 손그림 거품 — 성기게 깔고, 로고가 앉는 가운데는 가면으로 비운다. * 촘촘하면 벽지가 되고, 가운데까지 채우면 로고와 다툰다. */ #title-screen.on::before{ content:"";position:absolute;inset:0;pointer-events:none;z-index:0; background-image:url("data:image/svg+xml;utf8,"); background-repeat:repeat;background-position:14px 30px;background-size:320px 320px; -webkit-mask-image:radial-gradient(76% 42% at 50% 34%, rgba(0,0,0,0) 0%, rgba(0,0,0,.45) 62%, rgba(0,0,0,1) 100%); mask-image:radial-gradient(76% 42% at 50% 34%, rgba(0,0,0,0) 0%, rgba(0,0,0,.45) 62%, rgba(0,0,0,1) 100%)} /* ② 아래쪽 손그림 물결. 빛·비네트 같은 그라데이션은 전부 걷었다. */ #title-screen.on::after{ content:"";position:absolute;inset:0;pointer-events:none;z-index:0; background-image:url("data:image/svg+xml;utf8,"); background-repeat:repeat-x;background-position:center bottom;background-size:400px 72px} /* 배경 그림은 z-index 0 에 있다 — .ov 가 제 배경을 칠하므로 -1 로 두면 그 뒤로 * 숨어 아무것도 안 보인다. 대신 내용은 반드시 그 위로 올린다. */ #title-screen .card{display:flex;flex-direction:column;height:100%;justify-content:space-between; position:relative;z-index:1} #title-screen #logo{margin-top:auto;margin-bottom:auto} #title-screen #menu{width:100%} .card h1{font-size:38px;font-weight:900;color:var(--ink-d);letter-spacing:.02em;margin-bottom:10px; text-shadow:0 2px 0 rgba(255,255,255,.9), 0 4px 10px rgba(40,110,160,.22)} .card .lead{font-size:15.5px;line-height:1.75;color:var(--ink-d);margin-bottom:18px;font-weight:600} .card .lead b{color:var(--hot-d)} .how{ text-align:left;max-width:320px;margin:0 auto 20px; background:linear-gradient(180deg,#fff,#f4fbff); border:2px solid rgba(255,255,255,.95);border-radius:26px; padding:16px 20px 16px 36px; box-shadow:0 5px 0 rgba(70,130,175,.20), 0 12px 24px rgba(40,110,160,.14), inset 0 2px 0 rgba(255,255,255,.95); } .how{padding:16px 20px} .how li{font-size:14.5px;line-height:1.7;font-weight:600;margin:9px 0;padding-left:4px} .how li::marker{color:var(--blue);font-weight:900} .how li b{color:var(--blue-d)} /* 알약 버튼 — 위가 밝고 아래가 어두운 몸통 + 안쪽 하이라이트. * 평평한 색 + 단색 그림자는 아무리 둥글려도 종이처럼 보인다. */ .go,.ghost{ display:block;width:100%;max-width:340px;margin:0 auto var(--sp-2);padding:18px; /* 17px 이면 WCAG '큰 글자'(18.66px 볼드)에 1.66px 모자라 4.5:1 이 걸린다. * 이 버튼은 그라데이션이라 4.5:1 을 맞추려면 색을 평평하게 눌러야 하고, * 그러면 사탕처럼 보이게 한 설계가 죽는다. 글자를 키워 3:1 기준으로 넘긴다. */ border-radius:999px;font:inherit;font-size:19px;font-weight:900;cursor:pointer; transition:transform .09s cubic-bezier(.2,1.3,.4,1),box-shadow .09s; position:relative;overflow:hidden; } .go{ /* 밝은 민트가 끝나는 지점을 44% → 30% 로 당겼다. 글자는 버튼 높이의 * 32~68% 구간에 앉으므로 그 밑이 전부 --hot 아래쪽이 되어 3.48:1 이 나온다. * 당겨 올린 밝은 부분은 아래 .go::before 유리반사(위 38%)가 덮어 안 보인다. */ background:linear-gradient(180deg,var(--hot-l) 0%,var(--hot) 30%,var(--hot-d) 100%); border:2px solid rgba(255,255,255,.75);color:#fff; text-shadow:0 1px 2px rgba(12,90,68,.38); box-shadow:0 6px 0 #056353, 0 14px 24px rgba(7,134,111,.26), inset 0 2px 0 rgba(255,255,255,.6), inset 0 -6px 12px rgba(4,80,66,.24) } /* 위쪽에 걸친 유리 반사 */ .go::before{ content:"";position:absolute;left:6%;right:6%;top:5px;height:38%; border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0)); pointer-events:none } .go small,.ghost small{display:block;font-size:12.5px;font-weight:700;opacity:.9;margin-top:3px;text-shadow:none; line-height:1.4;word-break:keep-all} .go:active{transform:translateY(5px); box-shadow:0 1px 0 #056353, inset 0 2px 0 rgba(255,255,255,.5)} .ghost{ background:linear-gradient(180deg,#ffffff 0%,#f2f9fe 46%,#dcebf7 100%); border:2px solid #ffffff;color:var(--ink-d); box-shadow:0 5px 0 #b9d3e6, 0 10px 18px rgba(40,110,160,.14), inset 0 2px 0 rgba(255,255,255,1), inset 0 -5px 10px rgba(60,130,180,.10) } .ghost:active{transform:translateY(4px); box-shadow:0 1px 0 #b9d3e6, inset 0 2px 0 rgba(255,255,255,.95)} .note{margin-top:12px;font-size:12px;color:var(--dim);font-weight:600} /* 광고 버튼은 다른 버튼과 떼어 놓는다. 놀던 손이 그대로 내려오다 광고를 눌러 버리면, 그건 원망을 산다. */ .adbtn{margin-top:22px} .adbtn::after{content:"";position:absolute;left:12%;right:12%;top:-12px;height:1px; background:rgba(70,130,175,.22)} /* 광고 버튼 아래 설명 — 두 줄로 끊어 읽기 좋게 */ .card .lead.sm{font-size:13px;line-height:1.65;color:var(--dim);font-weight:600; margin:-4px auto 16px;max-width:300px;word-break:keep-all} /* 광고를 본 뒤 무엇을 받았는지 알리는 띠 */ #rwd-note{word-break:keep-all} /* 물방울 장식 — 게임과 **같은 코드로** 그린다. * CSS 로 흉내 낸 광택 구슬은 손그림 파스텔과 나란히 두면 혼자 튄다. */ /* 결과 화면의 주인공은 커야 한다. * 132px 짜리 아이콘으로 두니 결과 화면이 아니라 로딩 화면처럼 보였다. */ .decor{width:120px;height:120px;display:block;margin:0 auto 12px;animation:bob 2.8s ease-in-out infinite} .decor.sm{width:150px;height:150px;margin-bottom:16px} @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}} @media (max-height:640px){ .decor{width:76px;height:76px;margin-bottom:8px} .decor.sm{width:64px;height:64px} .card h1{font-size:30px} .how{padding:10px 16px 10px 30px} .how li{line-height:1.7;font-size:13px} } /* ── 걸려 있는 효과 ─────────────────────────────────── */ /* 효과 배지와 아이템은 **무대 위에 떠 있다.** * HUD 안에 두면 하나 생길 때마다 HUD 가 자라서 게임 영역을 아래로 밀고, * 바닥이 잘린다. 겹쳐 띄우면 무대 크기가 절대 변하지 않는다. * 대신 게임을 가리지 않게 반투명으로, 위쪽 구석에만 둔다. */ /* top 은 HUD 카드 바닥에 맞춘 값이다 — 게이지 캔버스 높이(index.html 의 108)를 * 건드리면 여기도 같이 옮겨야 한다. 118 이던 시절 캔버스가 90 이었고, * 108 로 키운 뒤에도 118 을 두니 배지가 카드 바닥을 12.8px 파고들었다. * * **safe-area 를 반드시 더한다.** 담는 상자 #app 은 padding-top 으로 노치를 * 비켜서는데, 절대배치의 기준은 그 패딩 **바깥**(패딩 박스)이라 top 은 패딩을 * 안 따라온다. HUD 는 흐름 안이라 내려가고 배지만 제자리에 남는다. * 브라우저(inset 0)에서는 멀쩡하고 실기에서만 배지가 카드 밑으로 44px 깔린다 — * 「🔥 증발 중」이 안 보인다. 시뮬레이터·데스크톱으로는 절대 못 잡는 종류다. */ #fxbar{ position:absolute;left:12px;top:calc(134px + env(safe-area-inset-top, 0px));z-index:6; display:flex;flex-direction:column;gap:5px;align-items:flex-start; pointer-events:none } #fxbar .fx{background:rgba(255,255,255,.82)} #fxbar .fx{ display:flex;align-items:center;gap:4px; padding:2px 9px;border-radius:999px;font-size:11px;font-weight:800; background:var(--paper);border:2px solid var(--line);color:var(--blue-d); animation:pop .22s ease-out; } #fxbar .fx.ice{border-color:#a9e2f7;color:#2b90b8} #fxbar .fx.item{border-color:#f2d79a;color:#b3821d} #fxbar .fx.bad{border-color:#f5b3a4;color:#d8552c} #fxbar .fx b{font-variant-numeric:tabular-nums} @keyframes pop{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}} /* ── 타이틀의 종류 설명 ─────────────────────────────── */ .kinds{ max-width:320px;margin:0 auto 18px;display:grid;gap:7px; background:linear-gradient(180deg,#fff,#f4fbff); border:2px solid rgba(255,255,255,.95);border-radius:26px; padding:14px 16px;text-align:left; box-shadow:0 5px 0 rgba(70,130,175,.20), 0 12px 24px rgba(40,110,160,.14), inset 0 2px 0 rgba(255,255,255,.95); } .kt{display:grid;grid-template-columns:32px 1fr;align-items:center;gap:12px; font-size:13px;font-weight:600;color:var(--dim);min-height:32px} .kt b{color:var(--ink)} .kt.danger b{color:#d8552c} .kt i{ justify-self:center;width:24px;height:24px;border-radius:50% 50% 50% 50%/58% 58% 42% 42%; box-shadow:inset -3px -4px 7px rgba(10,60,110,.26), inset 2px 2px 4px rgba(255,255,255,.8), 0 2px 4px rgba(30,90,140,.18) } .k-rainbow{background:radial-gradient(circle at 34% 30%,#fff0f6,#ffc2dd 46%,#b9a8f0)} .k-gold{background:radial-gradient(circle at 34% 30%,#fff6d8,#ffd76b 46%,#e5a52c)} .k-ice{background:radial-gradient(circle at 34% 30%,#f0fbff,#b6e8ff 46%,#5fb8dd)} .k-item{background:radial-gradient(circle at 34% 30%,#fffdf2,#ffe9a6 46%,#e8bf55);border-radius:50%} .k-fire{background:radial-gradient(circle at 34% 30%,#fff0e6,#ffa878 46%,#e8623a); box-shadow:inset -2px -3px 5px rgba(120,40,10,.24),0 0 0 2px rgba(232,98,58,.32)} @media (max-height:700px){ .kinds{padding:9px 12px;gap:4px} .kt{font-size:11.5px} } /* ── 오프닝 ─────────────────────────────────────────── */ #logo{width:100%;max-width:400px;height:auto;display:block;margin:0 auto 6px} #menu{margin-top:2px} .row2{display:flex;gap:6px;max-width:340px;margin:var(--sp-2) auto 0} /* 알약에 그림을 얹는다 — 글자만 있으면 한눈에 안 들어온다(2026-08-17). 그림은 그록이 게임 세계에 맞춰 그린 것(art/ui-*.png). */ /* ── 알약 다섯 개(놀이법·도감·꾸미기·순위·소리) ────────────── * 그록 시방(2026-08-17): 흰 카드는 연한 배경에 묻힌다. * 바탕 #F0F9FF · 테두리 2px #B3E5FC · 그림자 0 4px 12px rgba(0,120,200,.12) * 그림도 수채화 일러스트에서 **두꺼운 외곽선의 납작한 3D** 로 갈아 끼웠다 — * 44px 로 줄면 수채화는 뭉개진다. */ .pill .pico{width:44px;height:44px;display:block;margin:0 auto 3px} .pill span{display:block;font-size:11.5px;line-height:1.15;font-weight:900; color:#5C4636;-webkit-text-stroke:2.5px rgba(255,252,244,.95);paint-order:stroke fill} /* 카드(테두리)를 걷어냈다 — 그림에 이미 짙은 외곽선이 있어서 * 상자를 한 겹 더 두르면 테두리가 두 번 겹쳐 답답하다(사장님 지시 2026-08-17). * 그림만 배경 위에 얹고, 눌린 느낌은 그림자와 내려앉기로만 준다. */ .pill{ flex:1;padding:4px 0 5px;border-radius:16px;font:inherit;font-size:14.5px;font-weight:800; background:none;border:0;color:#5C4636; cursor:pointer;transition:transform .09s,filter .09s; filter:drop-shadow(0 3px 3px rgba(120,95,65,.30)) } .pill:active{transform:translateY(3px);filter:drop-shadow(0 1px 2px rgba(20,80,120,.2))} /* 소리는 기본이 꺼짐이라, 알약 전체를 흐리면 그림이 「안 나온 것」처럼 보인다. * 글자만 흐리게 두고 **그림은 살린다**(2026-08-17). */ .pill.off{opacity:1} .pill.off span{opacity:.5} .pill.off .pico{opacity:.72;filter:grayscale(.45)} /* 꺼짐 표시 — 그림 위에 얇은 사선 하나 */ .pill.off{position:relative} .pill.off::after{content:"";position:absolute;left:50%;top:15px;width:36px;height:3px; border-radius:2px;background:#7E95A4;transform:translateX(-50%) rotate(-32deg); box-shadow:0 0 0 1.5px rgba(255,255,255,.9);pointer-events:none} .ghost.warn{border-color:#ffd2c4;color:#d8552c;box-shadow:0 5px 0 #f0b8a8,0 10px 18px rgba(200,100,70,.16)} .ht{font-size:24px;font-weight:900;color:var(--ink-d);margin-bottom:16px; text-shadow:0 2px 0 rgba(255,255,255,.9)} @media (max-height:700px){ #logo{margin-bottom:0} .row2{margin-top:6px} } /* 「새로운 곳」 알림 밑에 붙는 꾸미기 안내 */ .ev-streak-cap.deco-hint{margin-top:10px;padding:8px 12px;border-radius:12px; background:rgba(12,134,109,.10);color:var(--ink-d);font-weight:700;font-size:12.5px; display:inline-block} .ev-streak-cap.deco-hint b{color:#0c866d;font-weight:900} /* ── 판마다 보는 작은 순위표 ────────────────────────── 전체 순위표는 게임오버에서만 봤다. 판을 깰 때마다 「지금 몇 등」이 보이면 다음 판을 누를 이유가 하나 더 생긴다. */ .crank{max-width:340px;margin:0 auto;padding:12px 14px 11px;border-radius:17px; background:rgba(255,255,255,.72);border:2px solid rgba(255,255,255,.92); box-shadow:0 4px 12px rgba(60,120,160,.12)} .crank .ct{font-size:12px;font-weight:900;letter-spacing:.05em;color:var(--dim); text-align:center;margin:0 0 8px} .crank .cr{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:800; color:var(--ink-d);padding:5px 0;line-height:1.3} .crank .cr .rk{width:26px;text-align:center;font-weight:900;color:var(--ink-m);flex:0 0 auto;font-size:16px} .crank .cr .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .crank .cr .sc{font-weight:900;color:#0c866d;font-variant-numeric:tabular-nums;flex:0 0 auto;font-size:15.5px} .crank .cr.me{background:rgba(12,134,109,.12);border-radius:11px;padding:5px 8px;margin:2px -8px} .crank .cr.me .nm::after{content:" (나)";font-size:10.5px;color:#0c866d;font-weight:900} .crank .gap{text-align:center;color:var(--dim);font-weight:900;font-size:11px;line-height:1} .crank .none{font-size:12px;font-weight:700;color:var(--ink-m);text-align:center;margin:6px 0 0} /* 성공 화면에서 바로 이름 정하기 */ .crank .cname{display:flex;gap:6px;margin-top:9px} .crank .cname input{flex:1;min-width:0;font:inherit;font-size:14px;font-weight:700; padding:10px 12px;border-radius:12px;border:2px solid rgba(120,175,210,.5); background:#fff;color:var(--ink-d);text-align:center} .crank .cname input:focus{outline:none;border-color:#0c866d} .crank .cname button{flex:0 0 auto;font:inherit;font-size:14px;font-weight:900;color:#fff; padding:10px 16px;border-radius:12px;border:0;cursor:pointer; background:linear-gradient(180deg,#17a183,#0a7259);box-shadow:0 3px 0 #06614c} .crank .cname button:active{transform:translateY(2px);box-shadow:0 1px 0 #06614c} .crank .cname button:disabled{opacity:.6} /* ── 꾸미기 ─────────────────────────────────────────── */ /* 미리보기 — 지금 가진 소품으로 그 세계가 어떻게 보이는지 바로 확인한다. 판을 다 깨야 볼 수 있으면 꾸밀 이유가 없다. */ .deco-view{width:100%;max-width:340px;height:auto;display:block;margin:10px auto 0; border-radius:18px;border:3px solid #fff; box-shadow:0 6px 16px rgba(60,120,160,.22)} .deco-tabs{display:flex;gap:6px;justify-content:center;margin:10px 0 4px;flex-wrap:wrap} .deco-tab{padding:8px 14px;border-radius:999px;font:inherit;font-size:13px;font-weight:800; border:2px solid rgba(255,255,255,.9);background:rgba(255,255,255,.62);color:var(--ink-m);cursor:pointer} .deco-tab.on{background:linear-gradient(180deg,#4fc3a1,#0c866d);border-color:#0c866d;color:#fff; box-shadow:0 3px 0 rgba(10,110,80,.35)} .deco-tab.lock{opacity:.55} .deco-tab.lock::after{content:" 🔒";font-size:11px} /* 산 것은 또렷하게, 안 산 것도 **무엇인지는 보이게**. * 도감의 실루엣 규칙(brightness(0) opacity(.18))을 그대로 쓰니 * 뭘 파는지 알아볼 수가 없었다(2026-08-17). */ .deco-card.got{outline:2.5px solid rgba(12,134,109,.55);outline-offset:-2px; background:linear-gradient(180deg,#fff,#f2fbf7)} .deco-card.got em{color:#0c866d;font-weight:900} .deco-card.got canvas{filter:saturate(1.12) contrast(1.06)} .deco-card.dim canvas{filter:saturate(.35) brightness(.92) opacity(.62)} .deco-card.dim b{color:#8a97a0} .deco-card.lock canvas{filter:grayscale(1) brightness(.95) opacity(.4)} /* 코인은 그림으로 말한다 — 「물방울 코인 +32 · 판 클리어 5 · 연속…」 처럼 * 구구절절 적으면 아무도 안 읽고 화면만 먹는다(2026-08-17). */ .coin-got i{font-style:normal;font-variant-numeric:tabular-nums} .coin-got{display:inline-flex;align-items:center;gap:5px;color:#B87A05;font-weight:900; font-size:27px;font-variant-numeric:tabular-nums;vertical-align:middle; animation:coinpop .55s cubic-bezier(.3,1.6,.4,1) both} @keyframes coinpop{0%{transform:scale(.4);opacity:0}55%{transform:scale(1.18)}100%{transform:scale(1);opacity:1}} .cico{width:32px;height:32px;display:block;flex:0 0 auto} .cico.sm{width:15px;height:15px} #deco-coin .cico,.crank .cico{width:22px;height:22px} .dex-card em .cico{display:inline-block;vertical-align:-3px;margin-right:2px} #deco-coin{display:inline-flex;align-items:center;gap:3px;vertical-align:-5px} /* 성공 화면 무지개 */ /* 일러스트는 축하 한 조각일 뿐이다. 290px 은 화면의 절반을 먹어 * 순위표와 버튼을 밑으로 밀어냈다 → 150px 로 줄인다(2026-08-17). */ #clear-art{ width:100%;max-width:150px;height:auto;display:block;margin:0 auto 2px; filter:drop-shadow(0 8px 16px rgba(40,110,160,.22)); animation:rise .7s cubic-bezier(.2,1.4,.4,1) both } @keyframes rise{from{transform:translateY(26px) scale(.86);opacity:0}to{transform:none;opacity:1}} @media (max-height:700px){ #clear-art{max-width:118px} } /* ── 성공 화면 배치 ──────────────────────────────────── * 위에서 아래로: 그림(작게) → 제목 → 한 줄 요약 → **순위표(주인공)** → 버튼. * 간격을 하나로 통일해 층이 고르게 보이게 한다. */ #clear-screen .card{display:flex;flex-direction:column;align-items:center;gap:9px} #clear-screen .card > *{margin:0!important;width:100%;max-width:340px} /* 보조 버튼 두 개를 한 줄에. 둘은 같은 무게·같은 모양이어야 한다. */ #clear-screen .crow{display:flex;gap:8px} #clear-screen .crow > .ghost{flex:1;min-width:0;margin:0!important;max-width:none; font-size:14px;padding:12px 6px;border-radius:999px} #clear-screen #clear-art{max-width:150px} #clear-screen #clear-n{font-size:26px;line-height:1.25} #clear-screen #clear-sub{font-size:13.5px;line-height:1.55;margin:0!important} /* ★ 다음 스테이지로 — 화면을 지배하는 유일한 1차 행동(그록 검증 반영). * 맨 아래에 가장 크게. 상위 캐주얼 게임의 기본 문법이다. */ #clear-screen #next{ padding:21px 14px;font-size:22px;font-weight:900; border:3px solid #fff;border-radius:999px; box-shadow:0 6px 0 #06614C, 0 12px 22px rgba(6,80,60,.32), inset 0 2px 0 rgba(255,255,255,.55)} #clear-screen #next:active{transform:translateY(4px);box-shadow:0 1px 0 #06614C, 0 4px 10px rgba(6,80,60,.3)} /* 광고는 **3차**. 색을 죽이고 크기도 한 단계 작게 — * 노란 채움이 주 버튼을 이겼다(그록 지적). */ /* 광고 버튼 — 캐주얼 게임의 「덤」 버튼처럼 노란 캡슐로. 두툼한 아랫입술과 * 안쪽 하이라이트로 입체감을 준다. 초록 주 버튼과 색이 갈려 위계도 선다. */ #clear-screen #clear-ad{ position:relative;overflow:hidden;min-height:0;padding:12px 14px; border-radius:999px;border:2px solid rgba(255,255,255,.9); background:linear-gradient(180deg,#FFF8DC 0%,#F7EBAE 55%,#E8D98A 100%); color:#4A3A05;font-size:14.5px;font-weight:900;letter-spacing:-.01em; text-shadow:none; box-shadow:0 3px 0 #C9BA6C, 0 6px 12px rgba(150,135,60,.16), inset 0 1px 0 rgba(255,255,255,.8)} #clear-screen #clear-ad b{color:#2E2400} #clear-screen #clear-ad::before{ content:"";position:absolute;left:6%;right:6%;top:4px;height:34%;border-radius:999px; background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,0));pointer-events:none} /* 이따금 빛이 스쳐 지나간다 — 「받아 가는 것」이라는 신호 */ #clear-screen #clear-ad::after{ content:"";position:absolute;top:0;bottom:0;left:-40%;width:26%;pointer-events:none; background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent); animation:adshine 4.2s ease-in-out infinite} @keyframes adshine{0%,74%{left:-40%}90%,100%{left:120%}} #clear-screen #clear-ad:active{ transform:translateY(3px); box-shadow:0 1px 0 #C9BA6C, 0 2px 6px rgba(150,135,60,.16)} #clear-screen #clear-ad:disabled{filter:saturate(.6) brightness(1.02)} @media (prefers-reduced-motion:reduce){ #clear-screen #clear-ad::after{animation:none;display:none} } @media (max-height:700px){ #clear-screen .card{gap:7px} #clear-screen #clear-n{font-size:22px} #clear-screen #clear-sub{font-size:12.5px} } /* ── 판 시작 알림 ───────────────────────────────────── */ .ev{display:flex;flex-direction:column;align-items:center;gap:var(--sp-1)} .ev-kicker{ font-size:13px;font-weight:900;letter-spacing:.14em;color:#fff; background:var(--hot-d); /* 13px 흰 글자다. 그라데이션 위쪽이 2.1:1 이라 단색으로. */ padding:8px 20px;border-radius:999px;margin-bottom:var(--sp-2); box-shadow:none } .ev-kicker.warn{background:var(--warn);box-shadow:none} #ev-art{ width:190px;height:190px;display:block; filter:drop-shadow(0 10px 18px rgba(40,110,160,.24)); animation:evpop .5s cubic-bezier(.2,1.5,.4,1) both } @keyframes evpop{from{transform:scale(.4) rotate(-12deg);opacity:0}to{transform:none;opacity:1}} .ev-name{font-size:28px;font-weight:900;color:var(--ink-d);margin-top:var(--sp-1); text-shadow:0 2px 0 rgba(255,255,255,.9)} .ev-tell{font-size:15.5px;font-weight:700;color:var(--ink-d);opacity:.72;margin-bottom:var(--sp-4); max-width:290px;margin-left:auto;margin-right:auto;line-height:1.55;word-break:keep-all} .ev .go{margin-top:var(--sp-2)} #pause-art{width:120px;height:120px;display:block;margin-bottom:var(--sp-2); filter:drop-shadow(0 8px 14px rgba(40,110,160,.22))} #pause-screen .ghost{margin-top:var(--sp-1)} /* 잠깐 멈춤은 **게임을 가리지 않는다.** * 다른 덮개 화면(클리어·실패)은 장면이 끝난 것이라 통째로 덮어도 되지만, * 멈춤은 "잠깐 세워둔 것" 이다. 판이 그대로 비쳐야 돌아갈 자리가 보인다. * 배경을 지우고 반투명 유리 한 겹만 깐다. */ #pause-screen{ /* 살짝 눌러 주는 정도. 진하게 덮으면 판이 안 보여서 덮개 화면과 같아진다. */ /* 블러는 웹뷰에서 매 프레임 재합성이라 무겁다 — 반투명만으로 충분하다 */ background:rgba(30,80,110,.30); } /* 창은 **작아야** 한다. 화면을 꽉 채우면 게임이 안 보이고, * 게임이 안 보이면 반투명으로 만든 이유가 없다. */ #pause-screen .card{ display:block;min-height:0;height:auto;width:auto; max-width:290px; background:linear-gradient(180deg, rgba(255,255,255,.97), rgba(236,249,255,.95)); border:3px solid rgba(255,255,255,.95); border-radius:30px; padding:var(--sp-2) var(--sp-3) var(--sp-3); box-shadow:0 16px 36px rgba(20,70,100,.32), inset 0 2px 0 rgba(255,255,255,.9); } #pause-screen #pause-art{width:104px;height:104px;display:block;margin:0 auto} #pause-screen .ev-name{margin-top:0} #pause-screen .go{margin-top:var(--sp-2)} #pause-screen .ghost{margin-top:8px} .story{ max-width:320px;margin:0 auto var(--sp-3);font-size:14px;line-height:1.75; font-weight:600;color:var(--dim) } .story b{color:var(--blue-d)} /* ── 들고 있는 아이템 ───────────────────────────────── */ /* 아이템 자리 — 오른쪽 **중간**. * * 세 군데를 놓고 골랐다. * 위 구석 눈은 아래(내 물방울)를 쫓는데 너무 멀어서 안 보인다 * 아래 잘 보이지만 **내 물방울이 지나다니는 길**이라 잡는 걸 방해한다 * 오른쪽 중간 시야 안에 있고, 내 물방울은 바닥에만 있으니 겹치지 않는다. * 엄지를 뻗는 호(弧) 위이기도 하다. * 떨어지는 물방울이 뒤로 지나가도 보이게 반투명으로 둔다. */ #slots{ position:absolute;right:12px;top:50%;transform:translateY(-50%);z-index:6; display:flex;flex-direction:column;gap:10px;align-items:flex-end } #slots .slot{ width:58px;height:58px;border-radius:20px;padding:0;border:0;cursor:pointer; background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(222,238,250,.66)); box-shadow:0 4px 0 rgba(70,130,175,.20), 0 8px 14px rgba(40,110,160,.14), inset 0 2px 0 rgba(255,255,255,.85); display:grid;place-items:center;position:relative; animation:slotin .32s cubic-bezier(.2,1.5,.4,1) both } #slots .slot{flex-direction:column;gap:0} #slots .slot canvas{width:40px;height:40px;display:block;margin-top:2px} #slots .slot .slabel{ font-size:10px;font-weight:900;color:var(--blue-d);letter-spacing:-.02em; line-height:1;margin-top:-1px;text-shadow:0 1px 0 rgba(255,255,255,.9) } #slots .slot:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(70,130,175,.28)} @keyframes slotin{from{transform:scale(.4) rotate(-14deg);opacity:0}to{transform:none;opacity:1}} /* 쓸 수 있다는 걸 알리는 숨쉬기 */ #slots .slot::after{ content:"";position:absolute;inset:-4px;border-radius:22px;pointer-events:none; box-shadow:0 0 0 0 rgba(255,139,139,.55); animation:slotpulse 1.6s ease-out infinite } @keyframes slotpulse{0%{box-shadow:0 0 0 0 rgba(255,139,139,.55)}70%{box-shadow:0 0 0 10px rgba(255,139,139,0)}100%{box-shadow:0 0 0 0 rgba(255,139,139,0)}} /* 결과·알림 화면의 버튼은 **같은 자리**에 있어야 한다. * 화면마다 위아래로 흩어져 있으면 연달아 누를 때 손이 매번 다시 찾는다. */ /* 멈춤은 여기서 뺀다 — 화면을 꽉 채우는 카드는 판을 가린다. * (이 규칙이 파일 뒤쪽이라, 위에서 아무리 작게 잡아도 여기서 도로 커졌다.) */ #event-screen .card, #fail-screen .card, #clear-screen .card{ display:flex;flex-direction:column;align-items:center;justify-content:center; min-height:74vh } /* 넘치는 화면에서는 이 74vh 최소높이가 오히려 아래를 밀어낸다 — 풀어 준다 */ .ov.on.scrolls .card{min-height:0} #event-screen .go, #fail-screen .go, #clear-screen .go{margin-top:auto} /* ── 오프닝 영상 ────────────────────────────────────── */ #intro-screen{background:#0d2233;padding:0;z-index:40} #intro-screen.on{display:block} #intro-video{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;display:block;background:#0d2233; /* 사파리가 얹는 재생 버튼을 못 누르게 한다 — 터치는 아래 오프닝 화면이 받는다. 그래야 "재생 버튼이 뜬다" 가 아니라 "아무 데나 누르면 이어진다" 가 된다. */ pointer-events:none } /* 브라우저가 얹는 재생 버튼·컨트롤 일체를 숨긴다 */ #intro-video::-webkit-media-controls, #intro-video::-webkit-media-controls-panel, #intro-video::-webkit-media-controls-start-playback-button, #intro-video::-webkit-media-controls-overlay-play-button{ display:none !important;-webkit-appearance:none;opacity:0 } /* ── 오프닝 → 메인 넘어가기 ──────────────────────────── * 화면을 그냥 바꾸면 덜컥 갈린다. 나가는 것은 살짝 커지며 사라지고, * 들어오는 것은 아래에서 뾱 하고 올라온다 — 둘이 겹쳐야 한 동작으로 읽힌다. */ #intro-screen.leaving{ animation:ovOut .26s ease-in forwards;pointer-events:none } @keyframes ovOut{ from{opacity:1;transform:scale(1)} to{opacity:0;transform:scale(1.06)} } #title-screen.enter{ animation:titleIn .46s cubic-bezier(.18,.9,.24,1.06) } @keyframes titleIn{ 0%{opacity:0;transform:scale(.90) translateY(16px)} 55%{opacity:1;transform:scale(1.035) translateY(-4px)} 100%{opacity:1;transform:scale(1) translateY(0)} } #intro-skip{ position:absolute;right:16px;z-index:2; bottom:calc(20px + env(safe-area-inset-bottom, 0px)); padding:10px 18px;border-radius:999px;border:0;cursor:pointer; font:inherit;font-size:13px;font-weight:800;color:#163b4a; background:rgba(255,255,255,.86); box-shadow:0 3px 0 rgba(0,0,0,.18) } /* ── 순위표 ──────────────────────────────────────────── * 표는 **눈이 세로로 훑는** 물건이다. 등수·이름·기록의 세로줄이 * 맞아야 읽히므로 grid 로 칸을 고정한다. */ #board-screen .card{max-width:360px} /* 귀여운 시상대 그림 — omp 생성 */ #bd-podium{ /* 누끼를 따서 종이 위에 바로 앉는다 — 흰 카드 테두리와 그림자를 걷었다(2026-08-17) */ display:block;width:74%;max-width:248px;margin:0 auto 2px;border-radius:0; box-shadow:none } .bd-lead{font-size:14px;color:var(--ink-m);margin:-2px 0 12px;font-weight:700} .bd-list{ /* 접힌 상태에서는 높이를 재지 않는다 — 네 줄이라 저절로 짧다. * 펼치면(.open) 그때만 상자 안에서 굴러가게 한다. */ overflow:visible; background:linear-gradient(178deg,#FDF7EA,#F7EEDC); border:0;border-radius:20px; box-shadow:none; padding:7px;margin-bottom:12px;display:flex;flex-direction:column;gap:5px } .bd-list.open{max-height:42vh} /* 「더 보기」 — 목록 아래에 붙는 종이 조각 */ .bd-more-wrap{display:flex;justify-content:center;padding:4px 0 2px} .bd-more{ font:inherit;font-family:var(--font-cute);font-weight:400;font-size:14px; color:#5C4636;background:linear-gradient(178deg,#F6EAD2,#EFDFC0); border:0;border-radius:14px 17px 13px 17px;padding:8px 18px 9px;cursor:pointer; box-shadow:inset 0 0 0 1.5px rgba(163,140,103,.55)} .bd-more:active{transform:translateY(2px)} .bd-row{ display:grid;grid-template-columns:40px 1fr auto auto;align-items:center;gap:8px; padding:9px 11px;border-radius:16px;font-size:14px;font-weight:700;color:var(--ink-d); background:rgba(255,255,255,.5) } .bd-no{font-weight:900;color:#7ea6bd;text-align:center;font-size:15px} /* 1~3등은 메달 이모지 + 은은한 금빛 줄 */ .bd-row.top{background:linear-gradient(180deg,#fffdf4,#fff3d4);box-shadow:0 1px 0 rgba(200,165,70,.14)} .bd-row.top .bd-no{font-size:20px;line-height:1} .bd-name{text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .bd-stage{color:var(--blue-d);font-weight:900} .bd-stage b{font-size:16px} .bd-combo{color:#9bb0bd;font-size:12px;font-weight:700} /* 내 줄은 한눈에 — 물방울 민트 테마로 또렷하게 */ .bd-row.me{background:linear-gradient(180deg,#dcf6ee,#bcedd8);box-shadow:0 2px 0 rgba(20,150,110,.22);color:#0b6a52} .bd-row.me .bd-stage,.bd-row.me .bd-no{color:#0c866d} .bd-empty{padding:24px 12px;color:var(--ink-m);font-size:13.5px;line-height:1.7;font-weight:600;text-align:center} .bd-me{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;margin-bottom:8px} .bd-me label{font-size:13px;font-weight:800;color:var(--ink-m);white-space:nowrap} #bd-name{ width:100%;font:inherit;font-size:15px;font-weight:700;color:var(--ink-d); padding:9px 12px;border-radius:16px;border:2px solid rgba(150,200,230,.55); background:#fff;box-shadow:inset 0 2px 5px rgba(60,120,160,.10);outline:none } #bd-name:focus{border-color:var(--blue-d)} .bd-note{font-size:12.5px;color:var(--ink-m);font-weight:700;min-height:18px;margin-bottom:10px} /* 오프닝 — 소리 안내. 소리가 잠겨 있을 때만 뜬다. */ #intro-hint{ display:none;position:absolute;left:0;right:0;z-index:2; bottom:calc(76px + env(safe-area-inset-bottom, 0px)); text-align:center;font-size:13px;font-weight:800;color:#fff; text-shadow:0 2px 6px rgba(10,50,80,.55); animation:hintPulse 1.5s ease-in-out infinite;pointer-events:none } #intro-hint.on{display:block} @keyframes hintPulse{0%,100%{opacity:.55}50%{opacity:1}} /* ── 광고 자리 ───────────────────────────────────────── * 배너는 **자리를 항상 차지한다.** 광고가 붙었다 떨어졌다 하면서 높이가 * 흔들리면 게임판이 늘었다 줄었다 하고, 그러면 목표량·낙하속도가 다 어긋난다. * 안에 든 것만 바뀌고 틀은 고정이다. */ /* ── 오늘의 도전 + 7일 도장판 ────────────────────────── 돌아올 이유를 눈에 보이게 하는 판. 타이틀에서 한 번, 판이 끝날 때 한 줄. */ #today{margin:0 auto;max-width:340px;width:100%;padding:11px 13px 9px;border-radius:18px; background:rgba(255,255,255,.72);border:2px solid rgba(255,255,255,.9); box-shadow:0 6px 18px rgba(60,120,160,.10)} #today.done{background:rgba(224,248,240,.85);border-color:rgba(12,134,109,.35)} .today-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:7px} .today-head span{font-size:13.5px;font-weight:800;color:var(--ink-d);word-break:keep-all} .today-head b{font-size:12.5px;font-weight:900;color:#0c866d;white-space:nowrap} .today-bar{height:7px;border-radius:99px;background:rgba(120,175,210,.22);overflow:hidden} .today-bar i{display:block;height:100%;width:0;border-radius:99px; background:linear-gradient(90deg,#4fc3a1,#0c866d);transition:width .45s ease} .today-stamps{display:flex;gap:5px;justify-content:center;margin:9px 0 0} .today-stamps i{width:24px;height:24px;border-radius:9px;display:grid;place-items:center; background:rgba(120,175,210,.14);border:1.5px dashed rgba(120,175,210,.45); font-size:12px;font-weight:900;color:transparent} .today-stamps i.on{background:linear-gradient(180deg,#5ecfae,#0c866d);border:1.5px solid #0c866d; color:#fff;box-shadow:0 2px 5px rgba(12,134,109,.3)} .today-stamps i.today{outline:2.5px solid #ffd166;outline-offset:1.5px} .today-next{font-size:11.5px;font-weight:700;color:var(--ink-m);text-align:center;margin-top:6px;word-break:keep-all} .today-next b{color:#0c866d} /* 판이 끝난 화면에 붙는 「내일 오면」 한 줄 */ .tmr{font-size:12.5px;font-weight:700;color:var(--ink-m);text-align:center; margin:var(--sp-2) auto 0;max-width:320px;padding:9px 12px;border-radius:13px; background:rgba(255,255,255,.66);word-break:keep-all} .tmr b{color:#0c866d;font-weight:900} #adbar{ flex:0 0 auto;height:54px;margin:0 var(--sp-2) var(--sp-1); border-radius:16px; display:grid;place-items:center; background: repeating-linear-gradient(135deg, rgba(255,255,255,.55) 0 10px, rgba(214,236,251,.55) 10px 20px); border:2px dashed rgba(120,175,210,.45); box-shadow:inset 0 2px 6px rgba(60,120,160,.10) } #adbar .ad-tag{font-size:11.5px;font-weight:800;color:#7ea6bd;letter-spacing:.02em} /* 광고를 아직 안 붙였을 때 자리만 비워 두고 싶으면 이 클래스를 뗀다 */ #adbar:not(.on){opacity:.55} .ad-kicker{font-size:14px;font-weight:800;color:var(--ink-m);margin-bottom:var(--sp-2)} #ad-box{ width:100%;max-width:320px;aspect-ratio:3/4;margin:0 auto var(--sp-3); border-radius:26px;display:grid;place-content:center;gap:6px; background: repeating-linear-gradient(135deg, rgba(255,255,255,.7) 0 14px, rgba(214,236,251,.7) 14px 28px); border:3px dashed rgba(120,175,210,.5); box-shadow:inset 0 3px 10px rgba(60,120,160,.12) } #ad-box .ad-tag{font-size:16px;font-weight:900;color:#6d99b3} #ad-box .ad-sub{font-size:12px;font-weight:700;color:#8fb0c4} /* 애드몹 배너는 웹뷰 위에 **네이티브로** 뜬다. 실제로 광고가 붙으면 * 우리 자리표시가 그 뒤로 비쳐서 지저분하니 안쪽을 비운다. */ #adbar.live{background:none;border:none;box-shadow:none} #adbar.live .ad-tag{display:none} /* 네이티브 배너가 실제로 떴을 때만 — 덮개 화면 아래를 배너 높이만큼 비운다. * 게임판은 #adbar 가 이미 자리를 잡아 두어 영향이 없다. */ body.has-banner .ov{ padding-bottom:calc(54px + 24px + env(safe-area-inset-bottom, 0px)) } body.has-banner #title-screen.on{ padding-bottom:calc(54px + var(--sp-5) + env(safe-area-inset-bottom, 0px)) } /* ── 잠긴 화면 (11판부터) ───────────────────────────── 무엇을 사는지 세 줄로만 적는다. 「전체 해금」처럼 뭉뚱그리면 무엇을 사는지 모른 채 결제하게 된다. */ #shop-what{line-height:1.9} #shop-msg{min-height:1.4em;margin-top:10px;font-size:14px;opacity:.72} #shop-screen .ghost{margin-top:8px} /* 웹에서는 결제 단추를 아예 감춘다(.hide 는 #hud 전용이라 여기서 따로 준다) */ #shop-screen .hide{display:none} /* ── 움직임과 초점 ────────────────────────────────────── * 움직임에 예민한 사람은 시스템에서 '동작 줄이기'를 켠다. 그 신호를 무시하면 * 멀미가 나서 게임을 못 한다. 없애지 않고 즉시 끝나게 둔다 — 0 으로 두면 * animation-fill-mode:both 로 제자리를 잡는 것들이 사라진다. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* 키보드로 넘길 때 어디에 있는지 보이게. 마우스로 누를 때는 안 뜬다. */ :where(button, [role="button"], a, input, select):focus-visible { outline: 3px solid var(--hot-d); outline-offset: 2px; } /* ── 물방울 도감 ── * 카드가 순서대로 통통 떠오르고(--d 지연), 못 만난 건 실루엣. * 오늘의 물방울은 금테가 숨쉬듯 빛난다. 채움 막대는 열릴 때 차오른다. */ #dex-screen .card{max-width:420px} .dex-sub{margin:2px 0 6px;font-size:15px;color:var(--ink-soft,#5b6b76)} .dex-sub b{font-size:19px;color:var(--hot-d,#e2588a)} .dex-bar{height:12px;border-radius:99px;background:rgba(0,0,0,.08);overflow:hidden;margin:0 26px 4px} #dex-fill{display:block;height:100%;width:0;border-radius:99px; background:linear-gradient(90deg,#8fd8ff,#5cc9f2 55%,#ffd76b); transition:width .9s cubic-bezier(.22,.9,.25,1.05)} .dex-grid{max-height:56vh;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:2px 6px 8px} .dex-h{margin:12px 2px 7px;font-size:13.5px;font-weight:800;color:#7d8a94;text-align:left} .dex-row{display:grid;grid-template-columns:repeat(3,1fr);gap:11px} .dex-card{position:relative;border:0;background:#fff;border-radius:16px;padding:9px 3px 7px; text-align:center;box-shadow:0 3px 10px rgba(40,70,90,.10);cursor:pointer; opacity:0;transform:translateY(16px) scale(.85); animation:dexin .5s cubic-bezier(.2,.9,.3,1.35) forwards;animation-delay:var(--d,0ms)} @keyframes dexin{to{opacity:1;transform:translateY(0) scale(1)}} .dex-card canvas{width:64px;height:64px;display:block;margin:0 auto; animation:dexbob 3.2s ease-in-out infinite;animation-delay:var(--d,0ms)} @keyframes dexbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}} .dex-card b{display:block;font-size:12.5px;line-height:1.25;margin-top:3px;color:#33454f;word-break:keep-all} .dex-card em{display:block;font-style:normal;font-size:10.5px;color:#9aa7af;margin-top:1px;min-height:13px} .dex-card.dim canvas{filter:brightness(0) opacity(.18);animation:none} .dex-card.dim b{color:#b9b4a8} .dex-card.dim em{color:#e2a24a;font-weight:700} .dex-card.today{box-shadow:0 0 0 2.5px #ffd76b,0 6px 16px rgba(240,180,60,.35); animation:dexin .5s cubic-bezier(.2,.9,.3,1.35) forwards,todayglow 1.7s ease-in-out 1s infinite alternate} @keyframes todayglow{from{box-shadow:0 0 0 2.5px #ffd76b,0 6px 16px rgba(240,180,60,.3)} to{box-shadow:0 0 0 6px rgba(255,215,107,.28),0 6px 20px rgba(240,180,60,.5)}} .dex-badge{position:absolute;top:-8px;right:-5px;background:#ff8b4d;color:#fff; font-size:9px;font-weight:900;letter-spacing:.4px;padding:2.5px 7px;border-radius:9px; transform:rotate(8deg);box-shadow:0 2px 6px rgba(200,90,30,.4); animation:badgejump 2.2s ease-in-out infinite} @keyframes badgejump{0%,72%,100%{transform:rotate(8deg) translateY(0)} 80%{transform:rotate(4deg) translateY(-4px)}88%{transform:rotate(10deg) translateY(0)}} /* ⚠ 카드는 기본이 opacity:0 이고, 등장 애니메이션(dexin)의 forwards 로 보이게 된다. * 그래서 pop 으로 애니메이션을 **갈아 끼우면 forwards 가 사라져 카드가 통째로 없어졌다** * (2026-08-17 꾸미기에서 코인이 모자라 눌렀을 때 실제로 사라짐). * pop 에서도 보이는 상태를 못 박는다. */ .dex-card.pop{animation:dexpop .38s cubic-bezier(.3,1.6,.4,1);opacity:1} @keyframes dexpop{ 0%{opacity:1;transform:scale(1)} 40%{opacity:1;transform:scale(1.15) rotate(-3deg)} 70%{opacity:1;transform:scale(.96) rotate(1.5deg)} 100%{opacity:1;transform:scale(1)}} /* 만난 카드 위로 이따금 빛이 스치고 지나간다 */ .dex-card:not(.dim)::after{content:"";position:absolute;inset:0;border-radius:16px;pointer-events:none; background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.75) 50%,transparent 58%); background-size:260% 100%;background-position:120% 0;animation:dexshine 5.5s ease-in-out infinite; animation-delay:calc(var(--d,0ms) + 1.2s)} @keyframes dexshine{0%,74%{background-position:120% 0}86%{background-position:-30% 0}100%{background-position:-30% 0}} .dex-foot{min-height:34px;font-size:13px;color:#5b6b76;margin:8px 14px 4px;word-break:keep-all} /* 새로 만난 카드 — 지난번 도감 방문 이후 처음 보는 것 */ .dex-new{position:absolute;top:-8px;left:-5px;background:#5cc9f2;color:#fff; font-size:9px;font-weight:900;letter-spacing:.4px;padding:2.5px 7px;border-radius:9px; transform:rotate(-8deg);box-shadow:0 2px 6px rgba(40,120,170,.4); animation:badgejump 2.2s ease-in-out .4s infinite} /* ── 뽑기 화면의 7일 스트릭 라인 (듀오링고식) ── * 지난 날은 찬 물방울, 오늘은 두근두근 펄스, 앞날은 빈 원. * 3일째 자리엔 ×2 — 저기까지 가면 선물이 두 배라는 걸 그림으로 말한다. */ .ev-streak{display:flex;justify-content:center;gap:9px;margin:14px 0 4px;min-height:40px} .ev-streak:empty{display:none} .stk{position:relative;width:30px;height:30px;border-radius:50%; border:2.5px solid rgba(120,150,170,.35);background:transparent; opacity:0;animation:dexin .4s cubic-bezier(.2,.9,.3,1.35) forwards;animation-delay:var(--d,0ms)} .stk.fill{border-color:transparent; background:radial-gradient(circle at 34% 30%,#e3f9ff 0%,#5cc9f2 62%,#0e8fd8 100%); box-shadow:0 2px 6px rgba(14,110,180,.35)} .stk.now{animation:dexin .4s cubic-bezier(.2,.9,.3,1.35) forwards,stkpulse 1.4s ease-in-out .6s infinite} @keyframes stkpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.22); box-shadow:0 0 0 7px rgba(92,201,242,.25),0 2px 6px rgba(14,110,180,.35)}} .stk .x2{position:absolute;top:-11px;right:-9px;background:#ffd76b;color:#7a4c00; font-size:9px;font-weight:900;padding:1.5px 5px;border-radius:8px;transform:rotate(10deg); box-shadow:0 2px 5px rgba(180,130,20,.4)} .stk .dnum{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; font-size:10.5px;font-weight:800;color:#8898a5} .stk.fill .dnum{color:#fff;text-shadow:0 1px 2px rgba(0,60,110,.4)} .ev-streak-cap{font-size:12.5px;color:#5b6b76;margin:2px 0 0} /* 알약의 「유리판」 단장은 걷었다(2026-08-17). * 그림에 이미 손그림 잉크선이 있어서 판때기를 한 겹 더 두르면 테두리가 겹친다. * 위쪽 .pill 규칙 하나만 남기고, 여기서는 색만 조금씩 달리 준다. */ #help{color:#6B4E36} #dexbtn{color:#4E7052} #board{color:#8A6A2E} #sound{color:#5C5A52} /* 광고 혜택 버튼도 유리로 */ #title-screen .adbtn,#pause-screen .adbtn{background:rgba(255,255,255,.55);-webkit- border:1.5px solid rgba(255,255,255,.7);color:#3d7a96;text-shadow:none; box-shadow:0 4px 16px rgba(120,160,200,.14),inset 0 1px 0 rgba(255,255,255,.8)} /* 「오늘의 주인공 · ○○ ↻」 — 반투명 둥근 칩. 누르면 뽑기 다시 보기 */ #daily-note{display:inline-flex;align-items:center;justify-content:center;gap:6px; /* 위 광고 버튼과 **같은 폭·같은 높이**로. 길이도 높이도 제각각이면 줄이 안 맞는다. * 광고 버튼은 15px 글자에 위아래 9·10px 여백이라 38px 이다(2026-08-17). */ min-height:38px;padding:8px 16px;border-radius:22px 26px 20px 26px;width:100%;max-width:326px; line-height:1.15; /* 종이 바탕에 맞춰 따뜻하게 — 찬 흰 알약은 베이지 위에서 떠 보인다(2026-08-17) */ background:rgba(255,252,244,.72); border:1px solid rgba(190,163,126,.45);box-shadow:0 2px 10px rgba(150,120,85,.14); color:#5C4636;font-size:13px;font-weight:700;letter-spacing:-.3px;margin:6px auto 0} #daily-note:empty{display:none} #daily-note:active{transform:scale(.95)} /* ── 안전영역 — 위쪽 잘림 수정 ── * .ov 는 padding 축약형이 env 바닥 패딩을 덮어쓰고 있었다(축약형이 나중이라 이긴다). * 위아래 모두 노치·홈바 밖으로 밀어 준다. */ .ov{padding-top:calc(20px + env(safe-area-inset-top,0px)); padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))} #title-screen.on{padding-top:calc(var(--sp-3) + env(safe-area-inset-top,0px))} /* 광고가 없을 때 「광고 자리」 라벨은 숨긴다 — 높이는 난이도 보정 때문에 유지 */ #adbar .ad-tag{display:none} /* ── 타이틀 한 화면 정리 ── * 오늘의 주인공 칩까지 스크롤 없이 다 보이게: 로고를 줄이고, * 시작하기를 위로 올리고, 버튼 사이 세로 간격을 10px 하나로 통일한다. */ #title-screen .card{justify-content:center} #title-screen #logo{margin-top:0;margin-bottom:10px} #title-screen #menu{display:flex;flex-direction:column;gap:10px;align-items:center} /* margin:0 만 두면 max-width(340) 걸린 버튼이 넓은 기종에서 왼쪽에 붙는다 — * 430pt 기기에서 실제로 났던 사고. 가운데 정렬은 align-items:center 가 맡는다. */ #title-screen #menu .go,#title-screen #menu .ghost,#title-screen #menu .adbtn{margin:0;width:100%;max-width:326px} /* 손으로 그은 테두리. * CSS border 는 자로 그은 듯 매끈해서 손그림 결과와 안 맞는다. 둥근 네모의 둘레를 * 따라가되 ① 좌표를 조금씩 흔들고 ② 선을 군데군데 끊어 둔 SVG 를 깔았다. * 늘어나도 선 굵기가 안 변하게 vector-effect 를 걸었다. * * 함정 둘 — * · 색의 '#' 은 반드시 %23 으로. 그대로 두면 주소가 거기서 잘려 아무것도 안 나온다. * · 그림 하나를 세 버튼에 늘려 쓰면 모서리가 옆으로 퍼져 선이 채움 밖으로 튄다. * **버튼마다 제 비율로** 그린다. */ :root{ --ink-blue:url("data:image/svg+xml;utf8,"); --ink-pink:url("data:image/svg+xml;utf8,"); --ink-butter:url("data:image/svg+xml;utf8,"); } /* ── 첫 화면 버튼 ───────────────────────────────────── * 결은 「고양이와 스프」 — 광택 플라스틱이 아니라 **종이에 그린 것**. * ① 테두리는 CSS border 가 아니라 위의 손그림 SVG (흔들리고 군데군데 끊긴다) * ② 그 안쪽에 성긴 점선 한 줄 — 천에 박음질한 라벨처럼 아기자기하게 * ③ 종이결 무늬 한 겹, 아주 옅게 * ④ 광택 하이라이트 없음. 글자는 흰 외곽선 대신 제 색의 짙은 톤 * ⑤ 「계속하기」와 「처음부터」는 한 줄에 나란히 — 큰 버튼이 둘이면 주인이 흐려진다 * 크기는 한 번 줄였다(2026-08-17): 쓸데없이 컸다. */ #title-screen .row-go{display:flex;gap:8px;width:100%;max-width:326px;margin:0 auto} #title-screen .row-go #play{flex:1.85 1 0;min-width:0;margin:0} #title-screen .row-go #fresh{flex:1 1 0;min-width:0;margin:0} #title-screen #play, #title-screen #fresh, #title-screen #morning-ad{ position:relative;overflow:visible;border:0; font-weight:900;letter-spacing:-.02em;text-shadow:0 1px 0 rgba(255,255,255,.45); -webkit-text-stroke:0; transition:transform .1s, filter .1s} /* ① 손그림 테두리 + ② 박음질 점선 — 겹쳐 깐다 */ #title-screen #play::before, #title-screen #fresh::before, #title-screen #morning-ad::before{ content:"";position:absolute;inset:-2px;pointer-events:none;display:block; /* ⚠ .go::before 가 height:38% 를 물려준다. top·bottom 과 height 가 다 있으면 * height 가 이기므로, 테두리가 버튼 윗동강에만 그려진다. 반드시 풀어 준다. */ width:auto;height:auto;left:-2px;right:-2px;top:-2px;bottom:-2px; border-radius:0;background-color:transparent; background-repeat:no-repeat;background-size:100% 100%;z-index:2} #title-screen #play::before{background-image:var(--ink-blue)} #title-screen #fresh::before{background-image:var(--ink-pink)} #title-screen #morning-ad::before{background-image:var(--ink-butter)} /* ③ 종이결 — 글자 뒤로 */ #title-screen #play::after, #title-screen #fresh::after, #title-screen #morning-ad::after{ content:"";position:absolute;inset:0;pointer-events:none;opacity:.13;z-index:0; mix-blend-mode:multiply;border-radius:inherit; background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E")} #title-screen #play > *, #title-screen #fresh > *, #title-screen #morning-ad > *{position:relative;z-index:1} #title-screen #play:active, #title-screen #fresh:active, #title-screen #morning-ad:active{transform:translateY(3px)} /* 「계속하기」와 「처음부터」의 바탕은 **손으로 칠한 그림**이다(2026-08-17 지시). * CSS 그라데이션으로는 물감이 번진 결과 종이 질감이 안 나온다. * 9조각(border-image)으로 깔아 모서리는 그대로 두고 가운데만 늘린다 — * 통째로 늘리면 잉크선이 옆으로 퍼져 손으로 그은 티가 죽는다. */ #title-screen #play, #title-screen #fresh{ border:0;box-shadow:none; /* ⚠ 배경**색**도 반드시 지운다. 판 그림 가장자리에 투명한 줄이 있어서, * 밑에 깔린 흰색(.adbtn/.go 가 물려주는)이 그 틈으로 새어 나와 * 판 둘레에 허연 네모 테가 생긴다(2026-08-17). */ background-color:transparent; background-repeat:no-repeat;background-size:100% 100%;background-position:center} /* ⚠ 9조각(border-image)으로 깔아 봤더니 모서리 둥글기가 원본에서 훨씬 커서 * 조각이 눌리며 **네모난 각**이 생겼다. 그림을 버튼 비율에 맞춰 미리 눕혀 두고 * 통째로 늘리는 편이 깨끗하다(2026-08-17). */ /* 판에 이미 제 잉크선이 있으므로 SVG 테두리는 끈다 */ #title-screen #play::before, #title-screen #fresh::before{display:none} #title-screen #play{background-image:url("plates/btn-blue.png")} #title-screen #fresh{background-image:url("plates/btn-pink.png")} /* 눌리는 느낌은 그림자 대신 살짝 내려앉는 것으로만 */ #title-screen #play:active, #title-screen #fresh:active{transform:translateY(3px);filter:brightness(.96)} /* ★ 계속하기 — 1차 행동 */ #title-screen #play{ border-radius:0; padding:13px 10px 15px;font-size:18.5px; /* 칠은 plates/btn-blue.png 이 맡는다. 여기서 background 줄임말을 쓰면 * 뒤에 오는 이 줄이 앞서 건 background-image 를 지운다(2026-08-17). */ color:#1F4A5B; /* 아래입술(색 막대)은 손으로 칠한 판 밑으로 삐져나와 종이 느낌을 깬다 — * 눌리는 느낌은 살짝 내려앉는 것과 그림자 한 겹으로만 준다(2026-08-17). */ /* 그림자는 아예 뺐다. 8px 쯤 아래로 번지면서 다음 버튼과의 틈을 메워 * 줄 간격이 들쭉날쭉해 보였다. 잉크선이 있으니 그림자 없이도 떠 보인다. */ box-shadow:none} #title-screen #play:active{box-shadow:none} #title-screen #play small{display:block;color:#33637A;font-size:11.5px;margin-top:1px;font-weight:800} /* 처음부터 — 2차 */ #title-screen #fresh{ border-radius:0; padding:14px 6px 16px;font-size:15.5px; /* 칠은 plates/btn-pink.png 이 맡는다 */ color:#6B2F49; box-shadow:none} #title-screen #fresh:active{box-shadow:none} /* 광고 — 계속하기와 같은 **손으로 칠한 판**으로. 색은 로고 마지막 P 의 노랑(#F8E0A0). * 크기도 한 단계 키웠다 — 눌러 주길 바라는 버튼인데 너무 작아 눈에 안 들어왔다. * 다만 위계는 지킨다: 글자는 계속하기보다 작고 색도 덜 진하다(2026-08-17). */ #title-screen #morning-ad{ border:0;border-radius:0; padding:15px 12px 16px;font-size:15.5px; background-color:transparent; background-image:url("plates/btn-yellow.png"); background-repeat:no-repeat;background-size:100% 100%;background-position:center; color:#6B5322; box-shadow:none} #title-screen #morning-ad::before{display:none} #title-screen #morning-ad:active{box-shadow:none;transform:translateY(3px);filter:brightness(.97)} #title-screen #morning-ad b{color:#4A3708;font-weight:900} /* 광고 버튼은 이제 #menu 밖(맨 아래)에 있다 — 폭·여백을 따로 맞춰 준다. * ⚠ `.hide` 는 전역 규칙이 아니다(#hud 와 #shop-screen 전용). * 여기서 `.hide{display:none}` 을 새로 걸었더니 버튼이 통째로 사라졌다 — * 게임은 이 버튼을 늘 hide 클래스를 단 채로 두고 내용만 바꾼다. */ #title-screen #morning-ad{margin:10px auto 0;width:100%;max-width:326px;display:block} #title-screen .row2{margin:0 auto;width:100%;max-width:340px;flex:0 0 auto} #morning-tell{margin:0;font-size:12px;line-height:1} /* 빈 줄은 자리를 없앤다 — 높이 0 이어도 flex 틈이 하나 더 생긴다 */ #morning-tell:empty{display:none} #daily-note{margin:10px auto 0} #tiltmode{margin:6px 0 0;font-size:13.5px;line-height:1.35;font-weight:700} #tiltmode small{display:block;font-size:12px;font-weight:600;opacity:.82;margin-top:1px} /* ── 첫 화면은 한 화면에 다 들어온다 (2026-08-17) ── * 로고 높이를 JS(setLogo)가 「남는 자리」에 맞춰 정하므로 넘칠 일이 없다. */ #title-screen.on{overflow:hidden} #title-screen .card{height:100%;min-height:0;justify-content:center;gap:10px} #title-screen #logo{margin:0 auto;flex:0 0 auto} #title-screen #menu{margin:0;flex:0 0 auto} /* ⚠ margin:0 만 주면 가운데가 아니라 **왼쪽에 붙는다.** * .card 는 세로 flex 라 폭이 max-width 로 잘리는 순간 왼쪽 정렬이 되고, * 위 버튼들보다 6px 왼쪽으로 밀려 줄이 비뚤어 보였다(2026-08-17). */ #title-screen #daily-note{margin:0 auto;align-self:center;flex:0 0 auto} #title-screen #tiltmode{margin:0;flex:0 0 auto;color:#6B5238} #title-screen #morning-ad{flex:0 0 auto} #title-screen #morning-tell{flex:0 0 auto;color:#6B5238} /* ── 귀여운 제목 글꼴이 붙는 곳 ───────────────────────── * Jua(배달의민족 주아체) · SIL Open Font License 1.1 — 상업적 사용 자유. * 굵기가 400 하나뿐이라 font-weight 를 900 으로 두면 브라우저가 억지로 굵게 * 만들어 지저분해진다. 여기서는 굵기를 400 으로 되돌린다. */ #title-screen #play, #title-screen #fresh, #title-screen #morning-ad, #title-screen #play small, .pill span, .card h1, .ht, #clear-n, #fail-n, #ev-name, #clear-screen #next, #clear-screen #clear-ad, #clear-screen .crow > .ghost{ font-family:var(--font-cute);font-weight:400;letter-spacing:0} /* 글꼴이 바뀌면 글자가 조금 커 보인다 — 자리에 맞게 되잡는다 */ #title-screen #play{font-size:20px} #title-screen #fresh{font-size:17px} #title-screen #morning-ad{font-size:15px} .pill span{font-size:12.5px} /* ── 성공 화면 버튼 ─────────────────────────────────── * 바탕이 종이색으로 바뀌자 광택 버튼만 남아 겉돌았다 — 첫 화면과 같은 결로 맞춘다. * 테두리는 CSS border 가 아니라 흔들리고 끊긴 손그림 SVG 다(2026-08-17). * 위계는 그대로: 다음 스테이지로(풀빛, 가장 큼) > 이 판 다시·메인으로(크림) > 광고(버터). */ #clear-screen #next, #clear-screen #clear-ad, #clear-screen .crow > .ghost{ position:relative;overflow:visible;border:0; font-family:var(--font-cute);font-weight:400;letter-spacing:-.01em; text-shadow:0 1px 0 rgba(255,255,255,.45);-webkit-text-stroke:0; transition:transform .1s, box-shadow .1s} #clear-screen #next::before, #clear-screen #clear-ad::before, #clear-screen .crow > .ghost::before{ content:"";position:absolute;pointer-events:none;display:block; left:-2px;right:-2px;top:-2px;bottom:-2px;width:auto;height:auto; border-radius:0;background-color:transparent; background-repeat:no-repeat;background-size:100% 100%;z-index:2} #clear-screen #next > *, #clear-screen #clear-ad > *{position:relative;z-index:1} #clear-screen #next:active, #clear-screen #clear-ad:active, #clear-screen .crow > .ghost:active{transform:translateY(3px)} /* ★ 다음 스테이지로 — 화면을 지배하는 1차 행동 */ #clear-screen #next{ border-radius:26px 22px 27px 21px; padding:17px 14px;font-size:21px; background:linear-gradient(178deg,#CFE3B6 0%,#B7D69B 55%,#A6C889 100%); color:#31502A; box-shadow:0 5px 0 #86A96C, 0 9px 14px rgba(90,120,70,.22)} #clear-screen #next::before{background-image:url("data:image/svg+xml;utf8,")} #clear-screen #next:active{box-shadow:0 2px 0 #86A96C, 0 4px 8px rgba(90,120,70,.2)} /* 이 판 다시 · 메인으로 — 2차 */ #clear-screen .crow > .ghost{ border-radius:20px 23px 19px 23px; padding:11px 6px;font-size:15px; background:linear-gradient(178deg,#FBF2E0 0%,#F3E6CE 55%,#EBDCC0 100%); color:#5C4636; box-shadow:0 4px 0 #C9B492, 0 7px 11px rgba(150,125,90,.18)} #clear-screen .crow > .ghost::before{background-image:url("data:image/svg+xml;utf8,")} #clear-screen .crow > .ghost:active{box-shadow:0 1px 0 #C9B492, 0 3px 6px rgba(150,125,90,.16)} /* 광고 — 3차. 채도를 낮춰 주 버튼을 이기지 않게 한다. */ #clear-screen #clear-ad{ border-radius:19px 22px 18px 22px; padding:10px 12px;font-size:14px; background:linear-gradient(178deg,#FCF1D5 0%,#F5E6BB 55%,#EEDDA8 100%); color:#6B5322; box-shadow:0 3px 0 #D2BC86, 0 6px 9px rgba(150,125,70,.16)} #clear-screen #clear-ad::before{background-image:url("data:image/svg+xml;utf8,")} #clear-screen #clear-ad:active{box-shadow:0 1px 0 #D2BC86, 0 2px 5px rgba(150,125,70,.14)} #clear-screen #clear-ad b{color:#4A3708;font-weight:400} /* 광고 버튼 안의 남은 횟수 — 글자보다 한 단계 작고 옅게 */ #title-screen #morning-ad .cnt, #pause-screen .adbtn .cnt{font-style:normal;font-size:.86em;opacity:.72;font-weight:400} /* ── 덮개 화면 전부를 손그림 결로 ──────────────────────── * 놀이 중간에 뜨는 「새로 나와요」·「놀이법」·「도감」 같은 화면이 아직 * 광택 버튼과 흰 판때기였다. 첫 화면과 같은 문법으로 맞춘다(2026-08-17). * 버튼마다 그림을 따로 굽지 않고, 흔들리고 끊긴 **SVG 잉크선**을 색깔별로 * 넉 장 만들어 돌려 쓴다. 늘어나도 선 굵기는 그대로다. */ :root{ --ink-go:url("data:image/svg+xml;utf8,"); --ink-soft:url("data:image/svg+xml;utf8,"); --ink-warm:url("data:image/svg+xml;utf8,"); --ink-card:url("data:image/svg+xml;utf8,"); } /* 첫 화면과 성공 화면은 제 결이 따로 있으므로 건드리지 않는다 */ .ov:not(#title-screen):not(#clear-screen) .go, .ov:not(#title-screen):not(#clear-screen) .ghost, .ov:not(#title-screen):not(#clear-screen) .adbtn{ position:relative;overflow:visible;border:0; font-family:var(--font-cute);font-weight:400;letter-spacing:-.01em; text-shadow:0 1px 0 rgba(255,255,255,.4);-webkit-text-stroke:0; background-color:transparent; transition:transform .1s} .ov:not(#title-screen):not(#clear-screen) .go::before, .ov:not(#title-screen):not(#clear-screen) .ghost::before, .ov:not(#title-screen):not(#clear-screen) .adbtn::before{ content:"";position:absolute;pointer-events:none;display:block; left:-2px;right:-2px;top:-2px;bottom:-2px;width:auto;height:auto; border-radius:0;background-color:transparent; background-repeat:no-repeat;background-size:100% 100%;z-index:2} .ov:not(#title-screen):not(#clear-screen) .go > *, .ov:not(#title-screen):not(#clear-screen) .ghost > *{position:relative;z-index:1} .ov:not(#title-screen):not(#clear-screen) .go:active, .ov:not(#title-screen):not(#clear-screen) .ghost:active, .ov:not(#title-screen):not(#clear-screen) .adbtn:active{transform:translateY(3px)} /* 주 버튼 — 풀빛 종이 */ .ov:not(#title-screen):not(#clear-screen) .go{ border-radius:23px 19px 24px 18px;padding:14px 14px 15px;font-size:18px; background-image:linear-gradient(178deg,#CFE3B6 0%,#B7D69B 55%,#A6C889 100%); color:#31502A;box-shadow:none} .ov:not(#title-screen):not(#clear-screen) .go::before{background-image:var(--ink-go)} .ov:not(#title-screen):not(#clear-screen) .go small{color:#3E5F35;opacity:1;text-shadow:none} /* 보조 버튼 — 크림 종이 */ .ov:not(#title-screen):not(#clear-screen) .ghost{ border-radius:19px 22px 18px 22px;padding:12px 12px 13px;font-size:15.5px; background-image:linear-gradient(178deg,#FBF2E0 0%,#F3E6CE 55%,#EBDCC0 100%); color:#5C4636;box-shadow:none} .ov:not(#title-screen):not(#clear-screen) .ghost::before{background-image:var(--ink-soft)} /* 광고 버튼 — 버터 종이 */ .ov:not(#title-screen):not(#clear-screen) .adbtn{ border-radius:19px 22px 18px 22px;padding:12px 12px 13px;font-size:15px; background-image:linear-gradient(178deg,#FCF1D5 0%,#F5E6BB 55%,#EEDDA8 100%); color:#6B5322;box-shadow:none} .ov:not(#title-screen):not(#clear-screen) .adbtn::before{background-image:var(--ink-warm)} /* 화면 안의 판(카드·목록·알림)도 종이 한 장으로 */ .ov:not(#title-screen) .crank, #event-screen .ev-streak, #help-screen .how, #dex-screen .dex-card, #deco-screen .deco-card, #shop-screen .shop-box, #board-screen #bd-list{ position:relative; background:linear-gradient(178deg,#FDF7EA 0%,#F7EEDC 100%); border:0;box-shadow:none} .ov:not(#title-screen) .crank::after, #event-screen .ev-streak::after, #help-screen .how::after, #dex-screen .dex-card::after, #deco-screen .deco-card::after, #shop-screen .shop-box::after, #board-screen #bd-list::after{ content:"";position:absolute;left:-2px;right:-2px;top:-2px;bottom:-2px; pointer-events:none;background-image:var(--ink-card); background-repeat:no-repeat;background-size:100% 100%;z-index:2} /* 화면 제목·설명도 종이 위 갈색 글씨로 */ #event-screen .ev-kicker,#help-screen .ht,#dex-screen .ht,#deco-screen .ht, #board-screen .ht,#shop-screen .ht{color:#5C4636;text-shadow:none} #event-screen .ev-name{color:#4A3626;text-shadow:none} #event-screen .ev-tell,#event-screen .ev-streak-cap{color:#6B5238} /* 「새로 나와요」 머리표 — 진한 초록 알약이 종이 위에서 혼자 튀었다. * 종이 한 조각을 붙인 모양으로 바꾼다(2026-08-17). */ .ev-kicker{ position:relative;color:#4E6B3E; background:linear-gradient(178deg,#E7F0D8 0%,#D8E7C4 100%); letter-spacing:.10em;font-family:var(--font-cute);font-weight:400; padding:7px 18px 8px;border-radius:14px 17px 13px 17px;box-shadow:none} .ev-kicker::after{ content:"";position:absolute;left:-2px;right:-2px;top:-2px;bottom:-2px;pointer-events:none; background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-size:100% 100%} .ev-kicker.warn{color:#7A4030; background:linear-gradient(178deg,#FBE3D8 0%,#F5D2C2 100%);box-shadow:none} .ev-kicker.warn::after{background-image:url("data:image/svg+xml;utf8,")} /* 놀이 중간에 끼어드는 알림은 **판이 비쳐 보이게** 옅게 깐다. * 꽉 막으면 흐름이 끊기고, 「또 뭐야」가 된다(2026-08-17 지시). */ #event-screen.on{ background:linear-gradient(180deg, rgba(218,196,165,.90) 0%, rgba(211,188,155,.92) 46%, rgba(203,179,145,.94) 100%)} #event-screen.on::before,#event-screen.on::after{display:none} /* 놀이법·도감 목록의 파란 강조는 종이 바탕에서 겉돈다 — 숲빛으로 눕힌다 */ #help-screen .how li{color:#4A3626} #help-screen .how li::marker{color:#7E9A66} #help-screen .how li b{color:#4E6B3E} #help-screen .lead,#help-screen .lead b{color:#5C4636} #help-screen .lead b{color:#4E6B3E} /* 혜택을 다 받았거나 광고를 띄울 수 없을 때 — 버튼을 지우지 않고 **꺼진 모습**으로 둔다. * 있던 버튼이 그냥 사라지면 「어? 없어졌는데」가 된다(2026-08-17). */ #title-screen #morning-ad.done{ filter:grayscale(.55) brightness(1.03);opacity:.72;cursor:default;pointer-events:none} #title-screen #morning-ad.done:active{transform:none;filter:grayscale(.55) brightness(1.03)} #title-screen #morning-ad.done b{font-weight:400} /* 순위 화면의 이어하기 단추. * 윗줄은 **한 줄에 들어가야** 한다 — 줄이 바뀌면 버튼이 두 줄이 되고 아래가 밀린다. * 글자를 조금 줄이고 자간을 좁혀 붙인다. 넘치면 그때만 조금 더 줄어든다. */ #bd-ad{font-size:16px;letter-spacing:-.03em;padding-left:8px;padding-right:8px} #bd-ad .cnt{font-style:normal;font-size:.76em;opacity:.68;font-weight:400} #bd-ad small{display:block;font-size:12px;margin-top:1px;opacity:.9;line-height:1.3; letter-spacing:-.02em} /* ── 덮개 화면 스크롤 ───────────────────────────────── * 놀이 중 화면이 끌려가지 않게 막는 건 #stage 가 맡는다(body 가 아니다 — * body 에 걸면 덮개 화면이 pan-y 라도 교집합이 none 이 되어 못 굴러간다). * * 다만 되살리는 건 **넘칠 때만** 이다(2026-08-17 지시). * 안 넘치는데 끌기를 열어 두면 손가락에 화면이 덜컹 따라와(고무줄) 앱 같지 않다. * 넘치는지는 CSS 가 알 수 없으므로, 화면을 띄운 뒤 재서 .scrolls 를 붙인다 * (game.js 의 fitScroll). 놀이 화면(#stage)은 늘 막힌 채다. */ .ov{touch-action:none;overflow:hidden} .ov.scrolls{touch-action:pan-y;overflow-y:auto;overscroll-behavior:contain; -webkit-overflow-scrolling:touch} /* 목록 상자는 **넘칠 때만** 제 안에서 굴러간다. * ⚠ 안 넘칠 때 여기에 touch-action:none 을 걸면 안 된다 — * 손가락이 이 상자 위에 닿으면 그 자리에서 막혀, 화면 전체를 끌어 올릴 수가 없다. * 순위 화면은 이 상자가 가운데를 다 덮어서 사실상 스크롤이 죽었다(2026-08-17). * 안 넘치면 그냥 놔둬서 끌기가 **부모 화면으로 넘어가게** 한다. */ .bd-list.scrolls,#dex-grid.scrolls,#deco-grid.scrolls{ touch-action:pan-y;overflow-y:auto;overscroll-behavior:contain; -webkit-overflow-scrolling:touch} /* (성공 화면의 「더 보기」는 걷어냈다 — 2026-08-17) */ /* 성공 화면 순위표는 상위 3위 + 내 줄만이라 늘 짧다 — 스크롤도 「더 보기」도 없다. * (「더 보기」를 뒀더니 버튼을 밀거나 테두리를 넘었다 — 2026-08-17 에 걷어냈다) */ /* 「돌아가기」 아래에 **빈 알약**이 하나 떠 있었다 — #bd-note 에 글이 없을 때도 * 배경만 남아서 「눌러야 하나」 싶은 단추처럼 보였다(2026-08-17). * 글이 없으면 접는다. */ #bd-note:empty{display:none} /* ── 실패(순위) 화면을 한 화면에 담는다 ───────────────── * 폰 웹뷰에서는 페이지 스크롤을 믿지 않는 편이 낫다 — 토스 게임 웹뷰는 바깥 * 스크롤이 잠겨 있고, 안쪽 스크롤도 기종마다 손에 안 잡힐 때가 있다. * 그래서 **넘치지 않게 줄이는** 쪽으로 간다. 순위는 상자 안에서만 굴린다. * (토스판은 리워드 단추가 하나 더 붙어 웹보다 한 칸 길다 — 그 상태를 기준으로 잡았다) */ #board-screen .card{gap:6px} #bd-podium{max-height:20vh;object-fit:contain} /* 접힌 목록(4줄 + 더 보기)은 천장을 두지 않는다 — * 천장에 걸리면 「더 보기」 단추가 상자 안에서 잘린다(2026-08-17). */ .bd-list{max-height:none} .bd-list.open{max-height:30vh} .bd-list{overflow:hidden} /* 짧은 기종에서는 더 조인다 */ @media (max-height:700px){ #bd-podium{max-height:15vh;margin-bottom:0} #board-screen .ht{font-size:20px;margin-bottom:6px} .bd-lead{display:none} .bd-list{max-height:none} .bd-list.open{max-height:24vh} .bd-row{padding-top:6px;padding-bottom:6px} #board-screen .card{gap:5px} #board-screen .go, #board-screen .reward-retry{padding-top:11px;padding-bottom:12px} .bd-me{margin-bottom:2px} } /* ── 판이 끝난 뒤의 화면은 **언제나** 굴러간다 ─────────── * 넘칠 때만 열어 주려고 재고 붙이고 했는데, 기종·웹뷰마다 어긋나서 * 「넘치는데 안 굴러간다」가 반복됐다. 판이 끝난 화면(성공·실패·순위)은 * 조건 없이 굴러가게 둔다 — 내용이 짧으면 굴릴 게 없으니 그대로다(2026-08-17 지시). * * 핵심은 정렬이다. justify-content:center 는 넘칠 때 **위로도 흘러 나가** 그 부분에 * 손이 닿지 않는다. flex-start 로 두고 카드에 margin:auto 를 주면, * 자리가 남을 땐 가운데로 오고 넘칠 땐 위가 잘리지 않는다. */ #clear-screen.on, #board-screen.on, #fail-screen.on{ justify-content:flex-start; overflow-y:auto; touch-action:pan-y; overscroll-behavior:contain; -webkit-overflow-scrolling:touch} #clear-screen.on > .card, #board-screen.on > .card, #fail-screen.on > .card{ margin-top:auto;margin-bottom:auto} /* 이 셋은 74vh 최소높이를 쓰지 않는다 — 짧은 기종에서 아래를 밀어낸다 */ #clear-screen.on .card, #board-screen.on .card, #fail-screen.on .card{min-height:0} /* 「돌아가기」 밑에 **빈 알약**이 하나 더 남아 화면 밖으로 잘려 있었다(실기 확인 2026-08-17). * .tmr(내일 안내)은 글이 없을 때도 배경만 그려졌다. 글이 없으면 접는다. */ .tmr:empty{display:none} /* 순위 화면의 아래 두 단추 — 한 줄에 나란히. 세로로 쌓으면 화면이 한 뼘 길어진다. */ #board-screen .brow{display:flex;gap:8px;width:100%;max-width:340px;margin:0 auto} #board-screen .brow > .ghost{flex:1;min-width:0;margin:0!important;max-width:none; font-size:15px;padding:12px 6px} /* 「다시 하기」가 숨은 날(그냥 순위 보기)에는 「돌아가기」가 줄을 다 쓴다 */ #board-screen .brow > .ghost[style*="none"]{display:none!important} /* 광고임을 알리는 작은 TV — 글자로 「(광고시청)」 을 붙이면 버튼 줄이 바뀐다. * 전면광고는 보상을 걸고 팔 수 없으므로(정책), 문구는 받는 것만 적고 * 광고가 지나간다는 사실은 이 그림으로 알린다(2026-08-17). */ .adtv{display:inline-block;width:22px;height:22px;vertical-align:-4px;margin-left:5px; background:url("plates/ad-tv.png") center/contain no-repeat;opacity:.9} /* 멈춤 화면의 「아이템 받기」도 다 썼으면 지우지 말고 꺼진 모습으로 둔다 */ /* disabled 플래그는 다른 곳에서 되돌려질 수 있다 — 눌림 자체를 CSS 로 막는다 */ #pause-screen #pause-ad.done{filter:grayscale(.5) brightness(1.02);opacity:.72;cursor:default; pointer-events:none} #pause-screen #pause-ad.done:active{transform:none} #pause-screen #pause-ad .cnt{font-style:normal;font-size:.8em;opacity:.7;font-weight:400} /* ── 화분 키우기 ───────────────────────────────────────── * 타이틀에서 제일 먼저 눈에 들어와야 하는 줄. 다만 「계속하기」보다 * 커지면 안 된다 — 매일 오는 이유이지, 오늘 할 일은 아니다. */ #pot-row { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; padding: 8px 12px 8px 8px; background: rgba(255, 252, 244, .5); border-radius: 16px; } #pot-art { width: 62px; height: 62px; flex: 0 0 62px; transition: transform .35s ease; } #pot-mid { flex: 1 1 auto; min-width: 0; text-align: left; } #pot-tell { margin: 0 0 5px; font-size: 12.5px; line-height: 1.35; color: #6E573A; word-break: keep-all; } /* 물뿌리개 — 얼마나 찼는지 한 눈에 */ #pot-gauge { height: 7px; border-radius: 99px; overflow: hidden; background: rgba(142, 112, 72, .17); } #pot-fill { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #8FC5E8, #6FAEDC); transition: width .4s ease; } /* .ghost 는 「폭 100% · 글자 19px」인 큰 버튼이다. 그대로 두면 화분 줄을 * 통째로 덮는다 — 실제로 문구를 가렸다(2026-08-18). 여기서 다 되돌린다. */ #pot-row #pot-water { display: inline-block; width: auto; max-width: none; margin: 0; flex: 0 0 auto; padding: 10px 14px; font-size: 13px; font-weight: 800; white-space: nowrap; border-radius: 999px; } #pot-water.done { opacity: .45; pointer-events: none; } /* 목마를 때 — 문구를 붉게, 화분 줄을 살짝 물들인다 */ #pot-row.thirsty { background: rgba(251, 227, 216, .62); } #pot-row.thirsty #pot-tell { color: #A85B3C; font-weight: 700; } /* 키운 꽃 선반 */ #pot-shelf { display: flex; align-items: center; flex-wrap: wrap; gap: 3px; margin: 6px 2px 0; font-size: 11.5px; color: #8A7150; } #pot-shelf .shelf-n { margin-right: 4px; } #pot-shelf .fico { width: 22px; height: 22px; }