/* 가이드 판 — 한 벌 (총지휘 지침 2026-08-12) * 처음셋팅 3장과 자동적용 8장이 «같은 그릇»을 쓴다. 안의 글자·생김새는 각 화면 CSS 가 그대로 칠한다. * ⛔ 뒤를 어둡게 하는 막이 «없다» — 보면서 따라 할 수 있어야 한다(지침 2). * 막이 없으니 뒤의 칩·버튼·입력칸이 다 눌린다(지침 3). */ /* 옆 판이 설 자리를 «본문을 좁혀서» 만든다 — 셋팅 카드를 하나도 안 가리게(지침 1). ⚠️ «자리가 모자랄 때만» 이 클래스가 붙는다(guide-panel.js 가 재서 판단). 자리가 남으면 본문은 «한 픽셀도 안 움직인다» — 가이드를 눌렀는데 화면이 출렁이면 그게 더 이상하다. ⚠️ `max-width` 는 «원래 폭을 넘지 않는다». 처음엔 `calc(100vw - …)` 로만 썼더니 넓은 화면(2000px)에서 본문이 1000 → 1568 로 «늘어났다». (J.J: 「이 전체가 길어지면서 옆에 생겨」) */ .gp-open main.wrap, .gp-open main { /* 왼쪽 여백까지 «빼고» 계산해야 한다 — 안 빼면 본문이 안 좁아져 판이 31px 자리에 못 선다 */ max-width: min(var(--gp-본래폭, 1000px), calc(100vw - var(--gp-왼쪽, 40px) - var(--gp-폭, 407px))); margin-left: var(--gp-왼쪽, 40px); /* 벽에 붙이지 마라 — 왼쪽 최소 40px (지침 ⑥) */ margin-right: auto; /* ⚠️ 움직임(transition)을 «안 준다». 주면 판이 «움직이는 도중»의 자리를 재서 간격이 31px 이 아니라 41px 로 섰다. 그리고 J.J 는 출렁이는 걸 싫어한다. */ } /* ── 입체감 (총지휘 2026-08-13 · 위저드가 J.J 와 맞춘 값 그대로) ── 뒤를 안 어둡게 하니까 «그림자»가 그 일을 대신한다. 넓고 옅은 그림자 판이 위에 떠 있다는 느낌 좁고 진한 그림자 가장자리를 바닥에서 뗀다 안쪽 윗선 하이라이트 위에서 빛 받는 «면» — 없으면 판이 아니라 «구멍»으로 보인다 배경 그라데이션 위→아래로 살짝 밝게 ⛔ 숫자를 임의로 바꾸지 마라. J.J 와 화면 보며 맞춘 값이다. */ .gp { position: fixed; z-index: 80; box-sizing: border-box; background: linear-gradient(180deg, #1d2129 0%, #161a20 62%, #14181d 100%); border-radius: 18px; /* ⚠️ 그림자만으로는 «테두리»가 안 산다. 이 «선 1px» 이 그림자 «위»에 있어야 가장자리가 보인다. 🆕 색은 라임 → 파랑(--read-ln) (J.J 2026-08-23 · 검수 11번): 「안내판이 형광 테두리에 형광 글자가 많다 — 안내판은 코어와 다른 사이드영역. 코어색 중 파란색과 #bfcee0 을 적절히 섞는 게 좋겠다」 코어의 «읽기» 색(--read 계열)이 원래 가이드 화면 몫이라 그 가족을 쓴다. */ border: 1px solid var(--read-ln, #28455f); box-shadow: 0 34px 70px -18px rgba(0, 0, 0, .78), 0 10px 24px -8px rgba(0, 0, 0, .62), 0 0 0 1px rgba(143, 199, 240, .07), inset 0 1px 0 rgba(255, 255, 255, .07); color: var(--tx, #e8eaed); font-size: 13px; line-height: 1.7; } /* ── 넓은 화면: 본문 오른쪽 ────────────────────────────── */ .gp-side { width: 380px; /* JS 가 «남는 자리»에 맞춰 줄인다 (min(380, 남는 자리)) */ max-height: calc(100vh - 32px); overflow: hidden auto; animation: gp-in .18s ease-out both; } /* ⚠️ 옆 판은 «자리를 움직이는» 애니를 주지 않는다(투명도만). translateX 를 주면 애니가 안 끝난 순간의 자리가 10px 어긋나 보이고, 31px 로 맞춘 간격이 41px 로 읽힌다. 실제로 그렇게 쟀다. */ @keyframes gp-in { from { opacity: 0 } to { opacity: 1 } } /* ── 좁은 화면: 아래에서 올라오는 판 ───────────────────── */ .gp-sheet { left: 0; right: 0; bottom: 0; max-height: 76vh; border-radius: 18px 18px 0 0; overflow: hidden auto; animation: gp-up .2s cubic-bezier(.2, .9, .3, 1) both; } @keyframes gp-up { from { transform: translateY(16px); opacity: 0 } to { transform: none; opacity: 1 } } .gp.gp-gone { animation: gp-out .16s ease-in both; } @keyframes gp-out { from { opacity: 1 } to { opacity: 0 } } .gp-in { padding: 20px 20px 18px; } /* 자동적용 판과 같은 여백 */ /* 머리 생김새는 자동적용 판과 «똑같이» — 로봇은 «가운데», 라벨은 그 «아래 왼쪽» (J.J 08-13). 가로로 나란히 두면 두 화면이 서로 달라 보인다. */ .gp-top { display: block; margin-bottom: 4px; } .gp-face { display: block; line-height: 0; text-align: center; margin-bottom: 12px; } .gp-face svg { display: inline-block; } /* 저절로 뜨니까 판이 스스로 「이게 가이드다」라고 말해야 한다 (규격 ⑥) 🆕 라임 → 파랑 (J.J 2026-08-23 · 검수 11번 — 안내판은 코어와 다른 사이드영역) */ .gp-tag { display: block; text-align: left; font-size: 13px; font-weight: 700; color: var(--read, #8fc7f0); letter-spacing: .01em; margin-bottom: 6px; } /* 로봇이 2.4초에 한 번 눈을 깜빡인다 — 자동적용 가이드 판과 «같은 값»이다 (J.J 08-13: 「눈도 1초나 2초에 한 번씩 깜빡여야 되고」). ⚠️ SVG 도형은 `transform-box:fill-box` 가 있어야 «자기 가운데»를 축으로 접힌다. 없으면 화면 왼쪽 위를 축으로 삼아 눈이 «날아간다». */ .gp-face .gp-eye { transform-origin: center; transform-box: fill-box; animation: gp-blink 2.4s infinite ease-in-out; } @keyframes gp-blink { 0%, 88%, 100% { transform: scaleY(1) } 92% { transform: scaleY(.1) } 96% { transform: scaleY(1) } } /* 속은 «그 화면의 것»이다 — 판으로 «빌려온» 노드라 그 화면 CSS 가 그대로 칠한다. 여기서는 «떠오르는 툴팁이던 시절»의 자리·투명도만 걷어낸다. ⚠️ `.help .gtip` 로 걸린 규칙들은 판 안(=`.help` 밖)에서는 애초에 안 걸린다. */ .gp .gtip { position: static !important; display: block !important; opacity: 1 !important; pointer-events: auto !important; transform: none !important; width: auto !important; max-width: none !important; max-height: none !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; white-space: normal; text-align: left; } .gp-x { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; background: var(--card2, #1b1f26); border: 1px solid var(--line2, #31363f); border-radius: 7px; color: var(--mut, #9aa0a6); font: inherit; font-size: 13px; line-height: 1; cursor: pointer; padding: 0; z-index: 1; } .gp-x:hover { color: var(--tx, #e8eaed); } /* 🆕 라임 채움 → 파랑 채움 (J.J 2026-08-23 · 검수 11번). 다크는 --read(#8fc7f0)+--read-ink(#0d1b26), 라이트는 --read(#007b8b)+흰 글자 — 둘 다 정본 짝이다. 🆕 크기 — 전체폭·두꺼움 → «오른쪽 소형 채움» (J.J 2026-08-23 3차 · 시안 4벌 중 ② 선택). ✕·Esc 로도 닫히니 이 버튼은 주된 행동이 아니라 «닫는 손잡이»다 — 판을 누르지 않게 작게. */ .gp-ok { display: block; width: auto; margin: 12px 0 0 auto; padding: 7px 16px; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--read-ink, #0d1b26); background: var(--read, #8fc7f0); border: 0; border-radius: 8px; cursor: pointer; } .gp-ok:hover { filter: brightness(1.06); } /* 「지금 열려 있는 가이드」는 눌린 채로 보인다 — 무엇에 대한 판인지 눈으로 잇는다 */ .help.gp-on { color: #f4d47a; } @media (prefers-reduced-motion: reduce) { .gp, .gp.gp-gone, .gp-open main.wrap, .gp-open main { animation: none; transition: none; } .gp-face .gp-eye { animation: none; } } /* iframe 안에서는 `fixed` 가 «창»이 아니라 «그 문서» 기준이라 아래 판이 창 밖으로 삐져나간다. 그럴 땐 문서 기준으로 둔다 (총지휘 2026-08-13 · 위저드가 밟은 함정). */ .gp-sheet.gp-doc { position: absolute; } /* ── 올려두기(hover)로는 «안 열린다». 누를 때만 (지침 ④) ── 판이 본문 옆으로 나가서, 지나가다 열리면 「왜 저기 뭐가 떴지」가 된다. ⚠️ 화면이 자기