/* ═══════════════════════════════════════════════════════════════════════
   틀린그림찾기 정식 화면 — 화면 표준 그대로 (10-16 · 📋 기획서_정식화면_2026-10-16.md 2판)
   사장님 10-16 「팡팡 화면은 최적화가 제대로 안 돼 있어 참고할 만한 게 못 된다」
   → 팡팡(px 로 묶인 글자 · 단추 · 스크롤)을 따르지 않고 본체 화면 표준만 따른다
     · 콘텐츠 폭 = 화면 높이 × 0.578(폰은 화면 폭) · --u = 폭 ÷ 390        📋 본체 docs/SPEC_화면표준_2026-10-03.md
     · 칸 · 여백 · 단추 · 둥글기 · 아이콘 = calc(var(--u) * 폰 값) · px 고정 폭 없음  📋 본체 docs/전달_모달-비율-가이드_2026-10-04.md
     · 글자 = --sd-t(폰 --u × 0.94 · PC --u × 0.8) — 글자까지 --u 로 키우면 PC 에서 너무 크다(10-05 사장님)
     · 한 화면 — 콘텐츠 높이 675u 안(= PC 1920×911 · 폰 375×667 에서도 안 내려도 됨)
   공용 틀 후보 — 숨은그림 · 미야오텐 · 지구방위대가 같이 쓴다(냥토놀이터/미니게임공용/ 로 옮길 것)
   ═══════════════════════════════════════════════════════════════════════ */
:root{--sd-t:calc(var(--u) * .94);
  --sd-ink:#3a2618;--sd-sub:#7d6450;--sd-line:rgba(214,154,67,.5);--sd-pink1:#F07A93;--sd-pink2:#D4566B;--sd-mint:#5fbfa8;--sd-cream:#FFF8EE}
@media (min-width:768px) and (min-height:500px){:root{--sd-t:calc(var(--u) * .8)}}
[hidden]{display:none!important}

/* ── 시작 화면 — 헤더와 하단 메뉴 사이를 한 화면으로 ──
   🔴 position:relative + z-index:1 — 본체 PC 는 .detail-shell::before 에 흐린 유리판(absolute · z 0 · backdrop blur)을 깐다.
      static 이면 판 아래로 깔려 버튼 · 랭킹 카드가 흐려진다(10-19 사장님 PC 1920×911 · 히어로만 relative 라 또렷했다) */
.sd-start{position:relative;z-index:1;display:flex;flex-direction:column;gap:calc(var(--u) * 10);padding:calc(var(--u) * 10) calc(var(--u) * 16);
  color:var(--sd-ink);font-family:Pretendard,system-ui,sans-serif;word-break:keep-all}
.sd-hero{position:relative;flex:none;aspect-ratio:2.7/1;border-radius:calc(var(--u) * 22);overflow:hidden;border:1.5px solid rgba(214,154,67,.55);background:#fff6ea;box-shadow:0 calc(var(--u) * 12) calc(var(--u) * 30) rgba(120,74,26,.16)}
.sd-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right 40%}
.sd-hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(255,247,236,.97) 0%,rgba(255,247,236,.92) 42%,rgba(255,247,236,.35) 58%,rgba(255,247,236,0) 72%)}
.sd-hero .copy{position:absolute;z-index:2;left:5.5%;top:50%;transform:translateY(-50%);width:56%}
.sd-hero .kick{font-size:calc(var(--sd-t) * 13);font-weight:800;color:#a8762e}
.sd-hero .ttl{display:flex;align-items:center;gap:calc(var(--u) * 6);margin:calc(var(--u) * 2) 0 calc(var(--u) * 3)}
.sd-hero h1{font-size:calc(var(--sd-t) * 26);font-weight:950;letter-spacing:-.02em;line-height:1.15;color:#071538}
.sd-hero .ds{font-size:calc(var(--sd-t) * 14);line-height:1.4;font-weight:600;color:#4a3b2c}
.sd-i{flex:none;width:calc(var(--u) * 24);height:calc(var(--u) * 24);border-radius:50%;border:1.5px solid #c9973a;background:#fff8e6;color:#9a6a1c;font:italic 800 calc(var(--sd-t) * 14)/1 Georgia,serif;display:grid;place-items:center;cursor:pointer}
.sd-cta{flex:none;display:block;width:100%;height:calc(var(--u) * 54);border:0;border-radius:999px;background:linear-gradient(135deg,var(--sd-pink1),var(--sd-pink2));color:#fff;font-family:inherit;font-size:calc(var(--sd-t) * 18);font-weight:900;box-shadow:0 calc(var(--u) * 8) calc(var(--u) * 20) rgba(212,86,107,.28),inset 0 1px 0 rgba(255,255,255,.3);cursor:pointer}
.sd-rule{flex:none;display:flex;justify-content:center;gap:calc(var(--u) * 6);flex-wrap:wrap;margin-top:calc(var(--u) * -4)}
.sd-rule span{font-size:calc(var(--sd-t) * 13);font-weight:800;color:#7a4b2c;background:rgba(255,255,255,.82);border:1px solid rgba(214,154,67,.45);border-radius:999px;padding:calc(var(--u) * 3) calc(var(--u) * 10)}
.sd-card{flex:none;padding:calc(var(--u) * 12) calc(var(--u) * 14);border:1.5px solid var(--sd-line);border-radius:calc(var(--u) * 22);background:linear-gradient(145deg,rgba(255,250,246,.97),rgba(238,250,246,.95));box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),0 calc(var(--u) * 12) calc(var(--u) * 30) rgba(120,74,26,.12)}
.sd-head{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u) * 8);margin-bottom:calc(var(--u) * 6)}
.sd-head h2{font-size:calc(var(--sd-t) * 19);font-weight:950}
.sd-tabs{display:flex;gap:calc(var(--u) * 6)}
.sd-tabs button{height:calc(var(--u) * 32);padding:0 calc(var(--u) * 14);border-radius:999px;border:1.5px solid rgba(214,154,67,.55);background:#fff;color:#8a5060;font-family:inherit;font-size:calc(var(--sd-t) * 14);font-weight:800}
.sd-tabs button.on{background:var(--sd-pink2);border-color:var(--sd-pink2);color:#fff}
.sd-pod{display:grid;grid-template-columns:1fr 1.1fr 1fr;align-items:end;gap:calc(var(--u) * 6);text-align:center;margin-bottom:calc(var(--u) * 6)}
.sd-pod li{list-style:none;min-width:0}
.sd-pod img{display:block;margin:0 auto calc(var(--u) * 4);width:calc(var(--u) * 46);height:calc(var(--u) * 46);border-radius:50%;object-fit:cover;background:#fff;border:calc(var(--u) * 2.5) solid #c4cbd3}
.sd-pod .r1 img{width:calc(var(--u) * 56);height:calc(var(--u) * 56);border-color:#e3b23c}
.sd-pod .r3 img{border-color:#c9895a}
.sd-pod b{display:block;font-size:calc(var(--sd-t) * 13);font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:clip}
.sd-pod em{display:block;font-style:normal;font-size:calc(var(--sd-t) * 13);font-weight:900;color:#b23a57;font-variant-numeric:tabular-nums}
.sd-pod i{font-style:normal;display:inline-grid;place-items:center;width:calc(var(--u) * 18);height:calc(var(--u) * 18);border-radius:50%;font-size:calc(var(--sd-t) * 11);font-weight:900;color:#fff;background:#9aa6b2;margin-right:calc(var(--u) * 3);vertical-align:calc(var(--u) * 1)}
.sd-pod .r1 i{background:#e3a72f}.sd-pod .r3 i{background:#c0805a}
.sd-me{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u) * 8);height:calc(var(--u) * 42);padding:0 calc(var(--u) * 6) 0 calc(var(--u) * 12);border-radius:calc(var(--u) * 12);background:rgba(240,122,147,.12);font-size:calc(var(--sd-t) * 14);font-weight:800}
.sd-me span b{color:#b23a57;font-variant-numeric:tabular-nums}
.sd-more{height:calc(var(--u) * 32);padding:0 calc(var(--u) * 12);border-radius:999px;border:1.5px solid rgba(214,154,67,.6);background:#fff;color:#8a5a1c;font-family:inherit;font-size:calc(var(--sd-t) * 13);font-weight:800;white-space:nowrap}
.sd-foot{display:flex;align-items:center;gap:calc(var(--u) * 8);margin-top:calc(var(--u) * 8);padding-top:calc(var(--u) * 8);border-top:1px solid rgba(214,154,67,.35);font-size:calc(var(--sd-t) * 14);font-weight:800;color:#8a5060}
.sd-sw{display:flex;border:1.5px solid rgba(214,154,67,.6);border-radius:999px;overflow:hidden;background:#fff}
.sd-sw button{height:calc(var(--u) * 32);min-width:calc(var(--u) * 48);border:0;background:none;color:#8a5060;font-family:inherit;font-size:calc(var(--sd-t) * 13);font-weight:800}
.sd-sw button.on{background:var(--sd-pink2);color:#fff}
.sd-share{margin-left:auto;height:calc(var(--u) * 32);padding:0 calc(var(--u) * 12);border-radius:999px;border:1.5px solid rgba(214,154,67,.6);background:#fff;color:#8a5060;font-family:inherit;font-size:calc(var(--sd-t) * 13);font-weight:800;white-space:nowrap}

/* ── 놀이 화면 — 헤더 · 메뉴 숨김 · 위 바 + 그림 둘 + 아래 칸 = 675u 안 ── */
.sd-play{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;background:var(--sd-cream);font-family:Pretendard,system-ui,sans-serif;color:var(--sd-ink)}
.sd-play .frame{width:var(--frame-w);margin:0 auto;height:100%;display:flex;flex-direction:column}
.sd-play.side .frame{width:100%}
/* 🔴 10-26 대표님 「가로 전환 단추가 있는 게임의 가로 모드 말고는 PC 전체화면 ✕ · 냥토피아닷컴 고정 사이즈로」 — 판 화면이 PC 창 전체를 크림색으로 덮어 양옆 PC 배경이 판 중에 사라졌다
   → PC 에서 가로 모드(.side = 가로 단추 · 전체 화면 · 폰 눕힘)가 아닐 때는 틀(--frame-w) 안만 · nn-ui 12절과 같은 식 · 가로 단추(#wide)는 대표님이 둔 예외라 그대로 */
@media (min-width:768px) and (min-height:500px){
  .sd-play:not(.side){left:max(0px,calc((100% - var(--frame-w)) / 2));right:max(0px,calc((100% - var(--frame-w)) / 2))}
}
/* 가로 — 폰을 눕히면 콘텐츠 폭(높이 × 0.578 · 하한 320)이 작아져 단추가 44px 아래로 준다 → 가로일 때만 배율 하한 1(폰 390 과 같은 크기) */
.sd-play.side{--u:max(calc(var(--frame-w) / 390), 1px)}
/* 위 바 — 🔴 10-16 사장님 「헤더 부분 디자인이 너무 별로 · 숨은그림에서 만든 것 갖고 올 건 갖고 오고 아이콘 더 필요하면 만들자」
   → 숨은그림 위 바 결 그대로: 짙은 남색 바 · 테 없는 그림 아이콘(냥토피아 화풍) · 반투명 알약 · 아래 가는 진행 막대
   흰 네모 단추 + 선 아이콘(팡팡 결)은 걷었다 · 크기는 그대로 --u */
.sd-bar{flex:none;display:flex;align-items:center;gap:calc(var(--u) * 6);height:calc(var(--u) * 54);padding:0 calc(var(--u) * 10);background:#1d1830;color:#fff}
.sd-btn{flex:none;width:calc(var(--u) * 40);height:calc(var(--u) * 40);display:grid;place-items:center;border:0;border-radius:calc(var(--u) * 12);background:transparent;padding:0;position:relative;cursor:pointer}
.sd-btn img{width:calc(var(--u) * 36);height:calc(var(--u) * 36);display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.sd-btn:active img{transform:scale(.92)}
.sd-btn svg{width:calc(var(--u) * 28);height:calc(var(--u) * 28)}
.sd-ttl{flex:1;min-width:0;overflow:hidden;display:flex;align-items:center;gap:calc(var(--u) * 6);font-size:calc(var(--sd-t) * 16);font-weight:800;letter-spacing:-.01em;white-space:nowrap}
.sd-ttl .pg{flex:none;font-size:calc(var(--sd-t) * 13);font-weight:800;color:#1d1830;background:#f6c26b;border-radius:999px;padding:calc(var(--u) * 2) calc(var(--u) * 8);font-variant-numeric:tabular-nums}
.sd-count{flex:none;font-size:calc(var(--sd-t) * 15);font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;background:rgba(255,255,255,.12);border-radius:999px;padding:calc(var(--u) * 6) calc(var(--u) * 10)}
.sd-count span{color:rgba(255,255,255,.6);font-weight:600}
.sd-time{flex:none;font-size:calc(var(--sd-t) * 16);font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;background:rgba(255,255,255,.12);border-radius:999px;padding:calc(var(--u) * 7) calc(var(--u) * 11);color:#fff;transition:background .25s}
.sd-time.bad{background:rgba(214,72,96,.9)}
/* 힌트 「+10초」 배지는 걷었다 — 돋보기를 너무 가려 무엇인지 몰랐다(10-16 사장님) · 값은 누를 때 시간 옆에 「+10초」로 뜨고 규칙 칩 · 안내 창이 알린다 */
/* 배경음악 꺼짐 — 아이콘은 하나(10-16 사장님) · 꺼지면 흐리게 + 크림색 빗금 한 줄(코드로 그림) */
.sd-btn.off img,.sd-btn.off svg{opacity:.45}
.sd-btn.off::after{content:"";position:absolute;left:18%;right:18%;top:50%;height:calc(var(--u) * 3.5);border-radius:999px;background:#f3e6cf;box-shadow:0 0 0 1.5px #3a2618;transform:rotate(-45deg)}
.sd-prog{flex:none;height:calc(var(--u) * 3);background:rgba(29,24,48,.18)}
.sd-prog i{display:block;height:100%;background:linear-gradient(90deg,#f6c26b,#d9668a);transition:width .4s}
.sd-area{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u) * 8);padding:calc(var(--u) * 6) calc(var(--u) * 4)}   /* 둘레 여백을 줄여 그림을 최대한 크게(10-16) */
/* 그림 크기는 폭과 높이 둘 다 본다 — 🔴 10-16 사장님 「아래 2/5 넣을 바엔 이미지를 최대한 크게」 → 아래 칸을 걷었다
   세로: 위 바 54 + 진행 막대 3 + 여백 · 사이를 뺀 높이를 둘로 나눠 4:3 · 가로: 위 바 + 막대 + 여백만 빼고 한 장 높이 */
.sd-pics{display:flex;flex-direction:column;gap:calc(var(--u) * 8);align-items:center;width:min(100%, calc((100dvh - var(--u) * 92) / 2 * 1.3333 + var(--u) * 6))}
.sd-pic{position:relative;width:100%;padding:calc(var(--u) * 3);border-radius:calc(var(--u) * 12);background:#fff;border:1.5px solid rgba(214,154,67,.4);box-shadow:0 calc(var(--u) * 4) calc(var(--u) * 14) rgba(120,74,26,.12)}
.sd-pic img{display:block;width:100%;aspect-ratio:1448/1086;border-radius:calc(var(--u) * 9)}
.sd-pic svg{position:absolute;inset:calc(var(--u) * 3);width:calc(100% - var(--u) * 6);height:calc(100% - var(--u) * 6)}
.sd-play.side .sd-pics{flex-direction:row;width:min(100%, calc((100dvh - var(--u) * 78) * 1.3333 * 2 + var(--u) * 20))}
.sd-play.side .sd-pic{flex:1}


/* ── 결과 카드 — 한 화면(675u 안) · 폭 358u ── */
.sd-dim{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:calc(var(--u) * 16);background:rgba(58,38,24,.45)}
.sd-result{width:min(100%, calc(var(--u) * 358));padding:calc(var(--u) * 20) calc(var(--u) * 18) calc(var(--u) * 16);text-align:center;border:1.5px solid var(--sd-line);border-radius:calc(var(--u) * 22);background:linear-gradient(145deg,rgba(255,252,244,.99),rgba(255,241,224,.99));box-shadow:0 calc(var(--u) * 18) calc(var(--u) * 44) rgba(120,74,26,.25);font-family:Pretendard,system-ui,sans-serif;color:var(--sd-ink)}
.sd-result h2{font-size:calc(var(--sd-t) * 24);font-weight:950;color:#B8395A}
.sd-result .sub{font-size:calc(var(--sd-t) * 14);font-weight:700;color:#8A5060;margin:calc(var(--u) * 4) 0 calc(var(--u) * 6)}
.sd-result .big{font-size:calc(var(--sd-t) * 40);font-weight:950;font-variant-numeric:tabular-nums;line-height:1.1}
.sd-result .brk{font-size:calc(var(--sd-t) * 13);font-weight:700;color:#8A5060;margin:calc(var(--u) * 4) 0 calc(var(--u) * 12)}
.sd-ok{padding:calc(var(--u) * 8) calc(var(--u) * 12);border-radius:calc(var(--u) * 12);background:rgba(185,243,221,.45);border:1px solid rgba(89,205,169,.5);color:#2E7D5B;font-size:calc(var(--sd-t) * 14);font-weight:700;margin-bottom:calc(var(--u) * 10)}
.sd-ranks{display:flex;gap:calc(var(--u) * 6);margin-bottom:calc(var(--u) * 14)}
.sd-ranks span{flex:1;height:calc(var(--u) * 38);display:grid;place-items:center;border-radius:calc(var(--u) * 12);background:#fff;border:1.5px solid rgba(232,97,126,.35);color:#B8395A;font-size:calc(var(--sd-t) * 15);font-weight:900}
.sd-btns{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u) * 8);margin-bottom:calc(var(--u) * 8)}
.sd-btns button,.sd-share2{height:calc(var(--u) * 50);border-radius:999px;font-family:inherit;font-size:calc(var(--sd-t) * 16);font-weight:900}
.sd-btns .go{border:0;background:var(--sd-pink2);color:#fff}
.sd-btns .ghost{border:1.5px solid rgba(214,154,67,.6);background:#fff;color:#8A5060}
.sd-share2{width:100%;border:1.5px solid rgba(89,205,169,.6);background:rgba(185,243,221,.55);color:#2E7D5B;display:flex;align-items:center;justify-content:center;gap:calc(var(--u) * 6)}
.sd-share2 svg{width:calc(var(--u) * 18);height:calc(var(--u) * 18)}

/* ── 게임 동작 — 그림 칸 · 벌 표시 · 장 알림 · 짧은 알림 · 확인 창 · 빈 랭킹 (10-17 게임.html 에 입힐 때) ── */
.sd-in{position:relative;width:100%;aspect-ratio:1448/1086;overflow:hidden;border-radius:calc(var(--u) * 9);background:#fff;touch-action:none}
.sd-in canvas{position:absolute;left:0;top:0;width:100%;height:100%;display:block;transform-origin:0 0;cursor:pointer}
.sd-in{container-type:inline-size}   /* 아래 흐림 세기를 그림 폭에 맞추려고(cqw) — 가로 모드처럼 그림이 크면 같은 px 로는 덜 흐리다 */
.sd-in canvas{transition:filter .2s}
.sd-play.paused .sd-in canvas{filter:blur(calc(var(--u) * 30));filter:blur(8cqw)}   /* 🔴 10-31 멈춤 창이 열린 동안 그림을 흐린다(멈춤 악용 막기 · 게임.html 멈춤표시)
   대표님 「숨김은 성의 없다 · 안 보일 정도의 블러 · 모든 게임」 — 그림 폭의 8%(폰 375 = 29px) · 엽서 열 장을 재니 4.5% 는 색이 크게 바뀐 곳(피아니스트냥 꽃다발 → 케이크)이 얼룩으로 남았다 · 8% 부터 눈으로 못 가른다 · 색 · 짜임만 남는다
   흐림은 .sd-in 안에서 잘린다 · 앞 줄은 cqw 를 모르는 옛 브라우저 몫 */
.sd-time{position:relative}
.sd-pop{position:absolute;left:50%;top:100%;z-index:5;font-size:calc(var(--sd-t) * 14);font-weight:900;color:#fff;background:rgba(214,72,96,.95);border-radius:999px;padding:calc(var(--u) * 4) calc(var(--u) * 9);white-space:nowrap;pointer-events:none;animation:sdPop 1s ease-out forwards}
.sd-pop{display:inline-flex;align-items:center;gap:calc(var(--u) * 3)}
.sd-pop img{width:1.6em;height:1.6em;margin:-.35em 0 -.35em calc(var(--u) * -4);flex:none}   /* 11-01 감점 초시계(화면/mark-penalty.webp) — 알약 높이는 그대로 */
@keyframes sdPop{0%{opacity:0;transform:translate(-50%,0) scale(.8)}15%{opacity:1;transform:translate(-50%,calc(var(--u) * 6)) scale(1)}100%{opacity:0;transform:translate(-50%,calc(var(--u) * 24))}}
.sd-intro{position:absolute;inset:0;z-index:4;display:grid;place-content:center;text-align:center;pointer-events:none}
.sd-intro b{font-size:calc(var(--sd-t) * 46);font-weight:950;color:#b23a57;text-shadow:0 2px 0 #fff,0 0 calc(var(--u) * 18) #fff}
.sd-intro span{font-size:calc(var(--sd-t) * 17);font-weight:800;color:#7a4b55;text-shadow:0 0 calc(var(--u) * 10) #fff}
.sd-intro.show{animation:sdIntro .9s ease-out forwards}
@keyframes sdIntro{0%{opacity:0;transform:scale(.8)}20%{opacity:1;transform:scale(1.04)}75%{opacity:1;transform:scale(1)}100%{opacity:0}}
.sd-toast{position:absolute;left:50%;top:calc(var(--u) * 72 + env(safe-area-inset-top));z-index:6;transform:translateX(-50%);background:rgba(29,24,48,.92);color:#fff;font-size:calc(var(--sd-t) * 15);font-weight:800;border-radius:999px;padding:calc(var(--u) * 9) calc(var(--u) * 18);white-space:nowrap;pointer-events:none}
.sd-rank-empty{font-size:calc(var(--sd-t) * 14);font-weight:700;color:#8a5060;text-align:center;line-height:1.5;padding:calc(var(--u) * 8) 0 calc(var(--u) * 10)}
.sd-share:disabled{opacity:.45}
.sd-result h3{font-size:calc(var(--sd-t) * 19);font-weight:950}
.sd-result.small{width:min(100%, calc(var(--u) * 320))}
.sd-result.small .sd-btns{margin:calc(var(--u) * 14) 0 0}
.sd-ranks span.new{background:#fff3c4;border-color:#e6b422;color:#8a5a00}
.sd-ranks:empty,.sd-ok:empty{display:none}
body.playing{overflow:hidden}
.sd-btn:disabled{opacity:.4;cursor:default}