/* GARO CLAW — 전달받은 화면(garo-claw.html) 이식본. 선택자는 .garo-claw 로 격리한다. */
.garo-claw a{color:#54C2F9;text-decoration:none}
.garo-claw a:hover{color:#8FD9FF}
@keyframes gc-ledRun{0%{opacity:.35}50%{opacity:1}100%{opacity:.35}}
@keyframes gc-signGlow{0%{filter:brightness(1)}50%{filter:brightness(1.18)}100%{filter:brightness(1)}}
@keyframes gc-cardIn{0%{transform:translateY(28px) scale(.9);opacity:0}100%{transform:translateY(0) scale(1);opacity:1}}
@keyframes gc-ringPulse{0%{opacity:.45;transform:scale(.94)}50%{opacity:1;transform:scale(1.04)}100%{opacity:.45;transform:scale(.94)}}
@keyframes gc-swingIdle{0%{transform:rotate(-1deg)}50%{transform:rotate(1deg)}100%{transform:rotate(-1deg)}}
@keyframes gc-swingTravel{0%{transform:rotate(-7deg)}28%{transform:rotate(5deg)}56%{transform:rotate(-4deg)}80%{transform:rotate(2.6deg)}100%{transform:rotate(-7deg)}}
@keyframes gc-swingSettle{0%{transform:rotate(-7.5deg)}18%{transform:rotate(5.5deg)}36%{transform:rotate(-3.6deg)}54%{transform:rotate(2.2deg)}72%{transform:rotate(-1.2deg)}88%{transform:rotate(.5deg)}100%{transform:rotate(0)}}
@keyframes gc-cableWobble{0%{transform:scaleY(1.03)}22%{transform:scaleY(.985)}46%{transform:scaleY(1.014)}70%{transform:scaleY(.995)}100%{transform:scaleY(1)}}
@keyframes gc-maskIdle{0%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg)}100%{transform:rotate(-1.5deg)}}
@keyframes gc-maskLift{0%{transform:rotate(-15deg)}20%{transform:rotate(11deg)}40%{transform:rotate(-8deg)}60%{transform:rotate(5deg)}80%{transform:rotate(-2.5deg)}100%{transform:rotate(0)}}
@keyframes gc-maskPendulum{0%{transform:rotate(-11deg)}50%{transform:rotate(11deg)}100%{transform:rotate(-11deg)}}
@keyframes gc-ductRun{0%{top:-14%;opacity:0}14%{opacity:1}86%{opacity:1}100%{top:100%;opacity:0}}
@keyframes gc-emerge{0%{transform:translateY(-16px) scale(.82);opacity:0}55%{transform:translateY(4px) scale(1.04);opacity:1}100%{transform:translateY(0) scale(1);opacity:1}}
.garo-claw .app{width:100%;max-width:var(--shell, 480px);display:flex;flex-direction:column;gap:14px;position:relative}
.garo-claw .hdr{display:flex;align-items:center;justify-content:space-between;padding:0 4px}
.garo-claw .hdr-l{display:flex;align-items:center;gap:8px}
.garo-claw .logo{width:26px;height:26px;border-radius:8px;background:linear-gradient(150deg,#54C2F9,#2F7FE0);box-shadow:0 3px 10px rgba(47,127,224,.5)}
.garo-claw .title{font-size:15px;font-weight:800;color:#EDEAF7;letter-spacing:-.01em}
.garo-claw .pills{display:flex;align-items:center;gap:7px}
.garo-claw .pill-t{display:flex;align-items:center;gap:5px;background:rgba(84,194,249,.12);border:1px solid rgba(84,194,249,.3);padding:5px 11px;border-radius:99px;font-size:13px;font-weight:800;color:#8FD9FF;white-space:nowrap}
.garo-claw .pill-m{background:rgba(237,234,247,.08);border:1px solid rgba(237,234,247,.14);padding:5px 11px;border-radius:99px;font-size:13px;font-weight:700;color:#C9C3DE;white-space:nowrap}
.garo-claw .cab{position:relative;border-radius:22px;padding:9px;background:linear-gradient(165deg,#4A4270 0%,#2E2848 42%,#211C36 100%);box-shadow:0 24px 50px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.14)}
.garo-claw .sign{position:relative;height:62px;border-radius:15px;background:linear-gradient(170deg,#3C8FE8 0%,#2F7FE0 48%,#1F5BAE 100%);box-shadow:inset 0 2px 0 rgba(255,255,255,.3),0 6px 18px rgba(47,127,224,.4);display:flex;align-items:center;justify-content:center;overflow:hidden;animation:gc-signGlow 3.4s ease-in-out infinite}
.garo-claw .sign>.gloss{position:absolute;inset:0;background:linear-gradient(105deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,0) 46%)}
.garo-claw .sign-txt{position:relative;text-align:center}
.garo-claw .sign-txt b{display:block;font-size:22px;font-weight:900;letter-spacing:.14em;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.35)}
.garo-claw .sign-txt span{display:block;font-size:9.5px;font-weight:700;letter-spacing:.3em;color:rgba(255,255,255,.72);margin-top:2px}
.garo-claw .bulb{position:absolute;width:7px;height:7px;border-radius:50%;background:#FFF3C4;box-shadow:0 0 9px #FFE28A;animation:gc-ledRun 1.6s ease-in-out infinite}
.garo-claw .glass-frame{position:relative;margin-top:9px;border-radius:16px;padding:7px;background:linear-gradient(160deg,#6E64A0 0%,#40396A 55%,#2A2444 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.garo-claw .led-strip{position:absolute;inset:3px;border-radius:14px;border:1.5px solid rgba(84,194,249,.55);box-shadow:0 0 14px rgba(84,194,249,.45),inset 0 0 14px rgba(84,194,249,.28);animation:gc-ledRun 2.8s ease-in-out infinite;pointer-events:none;z-index:9}
.garo-claw .glass{position:relative;height:368px;border-radius:12px;overflow:hidden;background:linear-gradient(178deg,#2B3F5E 0%,#3B5478 38%,#2E4462 100%)}
.garo-claw .g-top{position:absolute;inset:0;background:radial-gradient(70% 42% at 50% 4%,rgba(255,255,255,.2) 0%,rgba(255,255,255,0) 70%)}
.garo-claw .g-shade{position:absolute;left:0;right:0;top:0;height:16px;background:linear-gradient(180deg,rgba(0,0,0,.34),rgba(0,0,0,0))}
.garo-claw .rail{position:absolute;left:14px;right:14px;top:20px;height:7px;border-radius:4px;background:linear-gradient(180deg,#9AA3C4,#5C638A);box-shadow:0 2px 5px rgba(0,0,0,.4)}
.garo-claw .g-floor{position:absolute;left:0;right:0;bottom:0;height:112px;background:linear-gradient(180deg,rgba(20,28,44,0) 0%,rgba(20,28,44,.55) 100%)}
.garo-claw .reflect{position:absolute;inset:0;pointer-events:none;z-index:8}
.garo-claw .reflect i{position:absolute;top:-10%;height:130%;transform:rotate(14deg) translateX(60%)}
.garo-claw .reflect i:nth-child(1){left:-30%;width:36%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.16),rgba(255,255,255,0))}
.garo-claw .reflect i:nth-child(2){left:26%;width:13%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.1),rgba(255,255,255,0))}
.garo-claw .bin{position:absolute;right:8px;bottom:6px;width:96px;height:74px;z-index:3}
.garo-claw .bin-body{position:absolute;inset:0;border-radius:50%/34%;background:linear-gradient(172deg,#6A6296 0%,#443C6E 62%,#312A50 100%);box-shadow:0 -3px 8px rgba(0,0,0,.4),inset 0 2px 0 rgba(255,255,255,.28)}
.garo-claw .bin-hole{position:absolute;left:9px;right:9px;top:9px;height:44px;border-radius:50%;background:radial-gradient(60% 90% at 50% 22%,#14101F 0%,#0A0812 70%);box-shadow:inset 0 7px 14px rgba(0,0,0,.9),inset 0 -3px 6px rgba(84,194,249,.16)}
.garo-claw .bin-rim{position:absolute;left:9px;right:9px;top:9px;height:44px;border-radius:50%;border:1.5px solid rgba(84,194,249,.3);transition:all .4s}
.garo-claw .bin-lbl{position:absolute;left:0;right:0;bottom:5px;text-align:center;font-size:8.5px;font-weight:900;letter-spacing:.22em;color:rgba(255,255,255,.62)}
.garo-claw .mask{position:absolute;transition:left .7s cubic-bezier(.3,1.2,.6,1),bottom .7s cubic-bezier(.3,1.4,.6,1),transform .7s ease-out,opacity .35s}
.garo-claw .mask-in{position:relative;width:56px;height:56px}
.garo-claw .mask-art{width:56px;height:56px;background-size:contain;background-repeat:no-repeat;background-position:center;filter:drop-shadow(0 3px 6px rgba(12,10,22,.5))}
.garo-claw .aim-ring{position:absolute;inset:-7px;border-radius:50%;border:2.5px solid #FFE28A;box-shadow:0 0 15px rgba(255,226,138,.85),inset 0 0 11px rgba(255,226,138,.45);animation:gc-ringPulse 1.3s ease-in-out infinite;pointer-events:none;display:none}
.garo-claw .mask.aimed .aim-ring{display:block}
.garo-claw .falling{position:absolute;z-index:2;width:52px;margin-left:-26px;display:none;transition:top .9s cubic-bezier(.42,0,.92,.45)}
.garo-claw .falling .art{width:52px;height:52px;transform-origin:50% -30px;animation:gc-maskPendulum 1.05s ease-in-out infinite;background-size:contain;background-repeat:no-repeat;background-position:center;filter:drop-shadow(0 5px 10px rgba(12,10,22,.6))}
.garo-claw .claw{position:absolute;top:24px;z-index:6;transform:translateX(-50%);transition:left .9s cubic-bezier(.42,0,.58,1)}
.garo-claw .claw-sway{width:74px;transform-origin:50% 0;animation:gc-swingIdle 3.4s ease-in-out infinite}
.garo-claw .carriage{position:relative;width:34px;height:22px;margin:0 auto;border-radius:4px;background:linear-gradient(160deg,#FBFBFE 0%,#E4E4EE 52%,#BFC0CE 100%);box-shadow:0 3px 7px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.9)}
.garo-claw .carriage:after{content:'';position:absolute;left:0;right:0;bottom:0;height:5px;border-radius:0 0 4px 4px;background:linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.16))}
.garo-claw .shaft{position:relative;width:13px;margin:0 auto;transform-origin:50% 0;background:linear-gradient(90deg,#8E9099 0%,#E8E9F0 32%,#FDFDFF 46%,#C3C5D0 68%,#7C7E88 100%);border-radius:2px;transition:height .9s cubic-bezier(.38,.06,.5,1)}
.garo-claw .coil{position:absolute;left:100%;top:2px;bottom:4px;width:10px;border-right:2.5px solid #B9BCC8;border-radius:0 8px 8px 0;background:repeating-linear-gradient(180deg,rgba(185,188,200,.9) 0 2px,rgba(185,188,200,0) 2px 7px)}
.garo-claw .head{position:relative;width:74px;height:84px;margin:-1px auto 0}
.garo-claw .jaw{position:absolute;left:7px;top:0;width:60px;height:84px;z-index:2;filter:drop-shadow(0 3px 6px rgba(12,10,22,.42))}
.garo-claw .carried{position:absolute;left:50%;top:42px;z-index:0;width:52px;margin-left:-26px;transition:opacity .22s;display:none}
.garo-claw .carried-y{transition:transform .8s cubic-bezier(.4,0,.9,.42)}
.garo-claw .carried .art{width:52px;height:52px;transform-origin:50% -18px;animation:gc-maskIdle 3s ease-in-out infinite;background-size:contain;background-repeat:no-repeat;background-position:center;filter:drop-shadow(0 4px 8px rgba(12,10,22,.55))}
.garo-claw .chute-bar{position:relative;margin-top:9px;height:82px;border-radius:14px;background:linear-gradient(168deg,#5A5288 0%,#37305A 60%,#251F3C 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.16);display:flex;align-items:center;padding:0 14px;gap:12px;overflow:hidden}
.garo-claw .duct{position:absolute;right:112px;top:0;bottom:0;width:12px;border-radius:6px;background:linear-gradient(90deg,rgba(12,10,20,.65),rgba(40,34,62,.5));box-shadow:inset 0 0 8px rgba(0,0,0,.7);overflow:hidden}
.garo-claw .duct-glow{position:absolute;left:1px;right:1px;height:22px;border-radius:6px;background:linear-gradient(180deg,rgba(84,194,249,0),rgba(143,217,255,.95),rgba(84,194,249,0));box-shadow:0 0 14px rgba(84,194,249,.9);display:none}
.garo-claw .chute-txt{flex:1;min-width:0}
.garo-claw .chute-txt b{display:block;font-size:10px;font-weight:800;letter-spacing:.2em;color:rgba(201,195,222,.65)}
.garo-claw .chute-txt span{display:block;font-size:11.5px;font-weight:600;color:rgba(201,195,222,.85);margin-top:3px;line-height:1.45}
.garo-claw .chute{position:relative;width:104px;height:62px;flex-shrink:0}
.garo-claw .chute-hole{position:absolute;inset:0;border-radius:10px;background:linear-gradient(180deg,#0C0A14,#1A1626);box-shadow:inset 0 4px 12px rgba(0,0,0,.8);overflow:hidden}
.garo-claw .chute-prize{position:absolute;left:50%;top:9px;margin-left:-24px;width:48px;height:48px;background-size:contain;background-repeat:no-repeat;background-position:center;filter:drop-shadow(0 4px 9px rgba(0,0,0,.6));display:none}
.garo-claw .chute-glow{position:absolute;left:7px;right:7px;top:7px;height:5px;border-radius:3px;transition:all .3s}
.garo-claw .flap{position:absolute;left:0;right:0;bottom:0;height:48px;border-radius:0 0 10px 10px;background:linear-gradient(172deg,#8E86BC,#4F4880);box-shadow:0 -2px 6px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.22);transform-origin:50% 100%;transition:transform .5s cubic-bezier(.34,1.4,.6,1)}
.garo-claw .flap:after{content:'';position:absolute;left:50%;bottom:7px;transform:translateX(-50%);width:40px;height:4px;border-radius:2px;background:rgba(23,20,37,.45)}
.garo-claw .panel{border-radius:18px;padding:14px 16px;background:linear-gradient(168deg,#3A3459 0%,#282343 100%);box-shadow:0 12px 28px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.12);display:flex;align-items:center;justify-content:space-between;gap:14px}
.garo-claw .dpad{display:grid;grid-template-columns:repeat(3,30px);grid-template-rows:repeat(3,30px);gap:3px;padding:6px;border-radius:12px;background:linear-gradient(160deg,#16131F,#221D33);box-shadow:inset 0 3px 9px rgba(0,0,0,.65)}
.garo-claw .key{border:0;border-radius:7px;background:linear-gradient(170deg,#6E659C,#443C6C);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 2px 5px rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;color:#E4DFF5;font-size:11px;font-weight:800;cursor:pointer;user-select:none}
.garo-claw .key:active{transform:translateY(2px);filter:brightness(1.25)}
.garo-claw .hub{border-radius:50%;background:linear-gradient(160deg,#2A2440,#1B1729);box-shadow:inset 0 2px 5px rgba(0,0,0,.7)}
.garo-claw .go-wrap{display:flex;flex-direction:column;align-items:center;gap:6px}
.garo-claw .go{width:66px;height:66px;border:0;border-radius:50%;background:radial-gradient(circle at 38% 30%,#FF8172 0%,#E23B36 46%,#9B1F1F 100%);box-shadow:0 6px 0 #6E1414,0 11px 20px rgba(226,59,54,.45),inset 0 2px 8px rgba(255,255,255,.35);cursor:pointer;user-select:none;transition:all .12s;color:#fff}
.garo-claw .go:active{transform:translateY(4px);box-shadow:0 2px 0 #6E1414,0 5px 12px rgba(226,59,54,.4),inset 0 2px 8px rgba(255,255,255,.3)}
.garo-claw .go b{display:block;font-size:15px;font-weight:900;letter-spacing:.02em;text-shadow:0 2px 5px rgba(0,0,0,.4)}
.garo-claw .go span{display:block;font-size:8px;font-weight:800;color:rgba(255,255,255,.85);letter-spacing:.08em;margin-top:1px}
.garo-claw .hint{font-size:11px;font-weight:700;color:#8FD9FF;min-height:14px;text-align:center}
.garo-claw .notice{text-align:center;font-size:11px;line-height:1.75;color:rgba(201,195,222,.62);padding:0 8px}
.garo-claw .ov{position:fixed;inset:0;background:rgba(12,10,22,.78);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:40;padding:24px}
.garo-claw .ov.on{display:flex}
.garo-claw .card{width:100%;max-width:308px;border-radius:26px;padding:28px 24px 22px;background:linear-gradient(172deg,#3E3766 0%,#2A2445 100%);box-shadow:0 28px 60px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.16);text-align:center;animation:gc-cardIn .42s cubic-bezier(.34,1.4,.6,1)}
.garo-claw .badge{display:inline-block;padding:5px 14px;border-radius:99px;background:linear-gradient(150deg,#54C2F9,#2F7FE0);font-size:11px;font-weight:900;letter-spacing:.16em;color:#fff}
.garo-claw .card-art{position:relative;width:150px;height:150px;margin:16px auto 6px}
.garo-claw .card-art .halo{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(84,194,249,.35) 0%,rgba(84,194,249,0) 68%)}
.garo-claw .card-art .art{position:relative;width:150px;height:150px;background-size:contain;background-repeat:no-repeat;background-position:center;filter:drop-shadow(0 8px 16px rgba(12,10,22,.5))}
.garo-claw .card h3{margin:0;font-size:23px;font-weight:900;color:#F4F1FB;letter-spacing:-.01em}
.garo-claw .card p{margin:5px 0 0;font-size:12.5px;font-weight:600;color:rgba(201,195,222,.8)}
.garo-claw .card button{margin-top:20px;width:100%;height:50px;border:0;border-radius:14px;background:linear-gradient(150deg,#54C2F9,#2F7FE0);box-shadow:0 6px 16px rgba(47,127,224,.45);font-size:15px;font-weight:800;color:#fff;cursor:pointer;font-family:inherit}
.garo-claw .card button:active{transform:translateY(2px)}
/* ── 앱 이식 보정 — 전달본은 단독 페이지였다. 앱에서는 전체 화면 오버레이로 띄운다. ── */
.garo-claw {
position: fixed; inset: 0; z-index: 120; overflow-y: auto;
background: #171425;
display: flex; flex-direction: column; align-items: center;
padding: 14px 12px 24px;
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans KR', sans-serif;
-webkit-font-smoothing: antialiased;
}
.garo-claw .app { margin: 0 auto; }
.garo-claw .gc-exit {
margin: 14px auto 0; width: min(96vw, var(--shell, 480px)); padding: 13px;
border: 1px solid rgba(237, 234, 247, .18); border-radius: 12px;
background: rgba(237, 234, 247, .06); color: #C9C3DE;
font-size: 14.5px; font-weight: 700; cursor: pointer;
}
.garo-claw .gc-exit:active { background: rgba(237, 234, 247, .12); }
/* 소리 켜기/끄기 — 헤더 알약 옆 작은 버튼 */
.garo-claw .pill-s {
background: rgba(237, 234, 247, .08); border: 1px solid rgba(237, 234, 247, .14);
padding: 5px 9px; border-radius: 99px; font-size: 13px; line-height: 1;
color: #C9C3DE; cursor: pointer;
}
.garo-claw .pill-s:active { background: rgba(237, 234, 247, .16); }
/* 좌우 이동 — 출발할 때 진행 방향 반대로 젖힌다 (관성) */
@keyframes gc-swingLead {
0% { transform: rotate(0deg); }
100% { transform: rotate(calc(var(--swayDir, 1) * -8deg)); }
}
/* ── 축하 퍼레이드 (성공) ── */
.garo-claw .gc-confetti {
position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 5;
}
.garo-claw .gc-confetti i {
position: absolute; top: -6%; border-radius: 2px; opacity: .95;
animation: gc-fallConfetti linear forwards;
}
@keyframes gc-fallConfetti {
0% { transform: translate(0, -10%) rotate(0deg); opacity: 0; }
10% { opacity: 1; }
100% { transform: translate(var(--drift, 0px), 108vh) rotate(var(--spin, 360deg)); opacity: .9; }
}
.garo-claw .gc-burst {
position: absolute; bottom: 34%; width: 10px; height: 10px; border-radius: 50%;
pointer-events: none; z-index: 5;
background: radial-gradient(circle, #fff 0%, #FFD166 35%, rgba(84,194,249,0) 70%);
animation: gc-burstPop 1.2s cubic-bezier(.2,.8,.3,1) forwards;
}
.garo-claw .gc-burst.left { left: 16%; }
.garo-claw .gc-burst.right { right: 16%; }
@keyframes gc-burstPop {
0% { transform: scale(.2); opacity: 0; }
22% { transform: scale(9); opacity: 1; }
100% { transform: scale(22); opacity: 0; }
}
/* 기계 이름은 한글이라 자간을 줄여야 읽힌다 (영문 기준 .14em 은 너무 벌어진다) */
.garo-claw .sign-txt b { letter-spacing: .04em; }
.garo-claw .sign-txt span { letter-spacing: .12em; font-size: 9px; }
/* ═══════════════════════════════════════════════════════════════════════
여기서부터 — CABINET_IDENTITY_BRIEF.md 구현
D:\탈로그\작업지시\CABINET_IDENTITY_BRIEF.md
이 아래는 위쪽 이식본을 덮어쓴다. 세 가지를 고친다.
§2 네 기계의 아이덴티티 — 이전에는 간판 배경색 한 줄만 달랐다
§4 밀도 "가득 찼다" — 가면을 크게, 앞줄은 적게, 30~40% 겹치게
§5 입체감 — 접촉 그림자·내부 벽·원근·심도·광원·유리
이름 규칙: 단청 · 베네치아 · 메종 · 판테온 (접미사 없음).
`통` 은 이제 필드 안 투입구(GET 통)만 가리킨다 — .bin 이 그것이다.
═══════════════════════════════════════════════════════════════════════ */
/* ── 기본값 (기계가 지정되지 않았을 때) ─────────────────────────────── */
.garo-claw {
--mk: 112px; /* §4 가면 한 개의 폭 = 유리 안쪽 폭의 약 1/4 */
--cabA:#4A4270; --cabB:#2E2848; --cabC:#211C36;
--frameA:#6E64A0; --frameB:#40396A; --frameC:#2A2444;
--wallTop:#2B3F5E; --wallMid:#33496B; --floorBack:#2A3E5C; --floorFront:#16203A;
--signA:#3C8FE8; --signB:#2F7FE0; --signC:#1F5BAE;
--accent:84,194,249; /* 조명·LED·글로우의 rgb */
--metal1:#EDEFF4; --metal2:#4A4E59; /* 집게 밝은면 / 어두운면 */
--binA:#6A6296; --binB:#443C6E; --binC:#312A50;
--panelA:#3A3459; --panelB:#282343;
--keyA:#6E659C; --keyB:#443C6C;
--wallShade:.42; /* 좌우 측벽이 얼마나 어두운가 = 공간의 깊이 */
--vignette:.38;
}
/* ── §5-1 상자가 평면이다 → 내부 공간을 만든다 ──────────────────────
좌우 측벽 · 뒷벽 · 바닥을 그린다. 바닥과 뒷벽이 만나는 선(54%)이 핵심이다.
이 선 하나로 배경 한 장이 방 하나가 된다. */
.garo-claw .glass {
background:
linear-gradient( 96deg, rgba(0,0,0,var(--wallShade)) 0%, rgba(0,0,0,0) 15%),
linear-gradient(264deg, rgba(0,0,0,var(--wallShade)) 0%, rgba(0,0,0,0) 15%),
linear-gradient(178deg,
var(--wallTop) 0%,
var(--wallMid) 46%,
var(--wallMid) 53.4%,
rgba(0,0,0,.34) 53.8%, /* 바닥·뒷벽 접합선 */
var(--floorBack) 55%,
var(--floorFront) 100%);
}
/* §5-5 위는 밝고 아래는 어둡다 + §5-6 안쪽 네 귀퉁이 비네팅.
무더기 깊숙한 곳이 어둠에 잠겨야 얕아 보이지 않는다. */
.garo-claw .g-top {
background:
radial-gradient(58% 34% at 50% 6%, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 72%),
radial-gradient(92% 70% at 50% 40%, rgba(0,0,0,0) 42%, rgba(0,0,0,var(--vignette)) 100%);
}
/* 바닥면 — 뒤로 물러나는 평면. 앞쪽이 어두워야 무더기가 바닥에 얹힌다. */
.garo-claw .g-floor {
height: 46%;
background:
radial-gradient(70% 100% at 50% 0%, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 70%),
linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.30) 62%, rgba(0,0,0,.52) 100%);
}
/* §5-6 유리를 전경 레이어로 — 안쪽 면에 비친 흐린 상 + 가장자리 두께 */
.garo-claw .reflect:after {
content:''; position:absolute; inset:0; pointer-events:none;
background:
linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 26%),
linear-gradient(90deg, rgba(180,255,235,.10) 0%, rgba(180,255,235,0) 2.5%,
rgba(180,255,235,0) 97.5%, rgba(180,255,235,.10) 100%);
}
/* ── §4 밀도 · §5-2~4 접촉 그림자와 두께 ──────────────────────────── */
.garo-claw .mask-in { width: var(--mk); height: var(--mk); }
.garo-claw .mask-art { width: var(--mk); height: var(--mk); }
/* §5-2 접촉 그림자 — 짧고 진한 것 + 넓고 옅은 것, 두 겹.
가면 그림(가로로 긴 캣아이)은 상자 가운데에 놓이므로 접지선은 약 70% 지점이다. */
.garo-claw .mask-sh {
position: absolute; left: 8%; right: 8%; top: 66%; height: 20%;
z-index: -1; pointer-events: none; border-radius: 50%;
background:
radial-gradient(46% 40% at 50% 52%, rgba(0,0,0,.58) 0%, rgba(0,0,0,.30) 52%, rgba(0,0,0,0) 74%),
radial-gradient(74% 58% at 50% 48%, rgba(0,0,0,.26) 0%, rgba(0,0,0,0) 76%);
filter: blur(3px);
/* --sh = 기계별 접촉 그림자 배율 (applySkin 이 건다). 밝은 몸체(메종 A안)는 흰 가면 대비를 그림자로 푼다 */
opacity: var(--sh, 1);
}
/* 뒷줄일수록 그림자는 옅고 넓게 — 앰비언트에 잠긴다 */
.garo-claw .mask[data-row="back2"] .mask-sh { opacity: calc(var(--sh, 1) * .72); filter: blur(5px); }
.garo-claw .mask[data-row="back"] .mask-sh { opacity: calc(var(--sh, 1) * .5); filter: blur(7px); }
/* §5-3 두께 — 가장자리에 광원 방향의 얇은 하이라이트를 얹어 종이가 아니게 만든다 */
.garo-claw .mask-art { will-change: filter; }
/* 조준 링은 가면이 커진 만큼 같이 키운다 */
.garo-claw .aim-ring { inset: -9px; border-width: 3px; }
/* ── 집게 — 기계마다 재질이 다르다 (§2 ④). SVG 속성색을 CSS 로 덮는다 ── */
.garo-claw .jaw [fill="#EDEFF4"],
.garo-claw .jaw [fill="#D7DAE1"] { fill: var(--metal1); }
.garo-claw .jaw [fill="#4A4E59"],
.garo-claw .jaw [fill="#23252E"] { fill: var(--metal2); }
.garo-claw .jaw [stroke="#4A4E59"] { stroke: var(--metal2); }
.garo-claw .carriage {
background: linear-gradient(160deg, var(--metal1) 0%, var(--metal1) 50%, var(--metal2) 100%);
}
.garo-claw .shaft {
background: linear-gradient(90deg, var(--metal2) 0%, var(--metal1) 34%, var(--metal1) 48%, var(--metal2) 100%);
}
.garo-claw .coil { border-right-color: var(--metal2); }
/* ── 프레임·간판·투입구·배출구·조작부를 변수에 묶는다 ───────────────── */
.garo-claw .cab {
background: linear-gradient(165deg, var(--cabA) 0%, var(--cabB) 42%, var(--cabC) 100%);
}
.garo-claw .glass-frame {
background: linear-gradient(160deg, var(--frameA) 0%, var(--frameB) 55%, var(--frameC) 100%);
}
.garo-claw .sign {
background: linear-gradient(170deg, var(--signA) 0%, var(--signB) 48%, var(--signC) 100%);
box-shadow: inset 0 2px 0 rgba(255,255,255,.28), 0 6px 18px rgba(var(--accent), .38);
}
.garo-claw .led-strip {
border-color: rgba(var(--accent), .55);
box-shadow: 0 0 14px rgba(var(--accent), .45), inset 0 0 14px rgba(var(--accent), .28);
}
.garo-claw .bin-body {
background: linear-gradient(172deg, var(--binA) 0%, var(--binB) 62%, var(--binC) 100%);
}
.garo-claw .bin-rim { border-color: rgba(var(--accent), .3); }
.garo-claw .chute-bar { background: linear-gradient(168deg, var(--panelA) 0%, var(--panelB) 70%, var(--cabC) 100%); }
.garo-claw .flap { background: linear-gradient(172deg, var(--frameA), var(--frameB)); }
.garo-claw .panel { background: linear-gradient(168deg, var(--panelA) 0%, var(--panelB) 100%); }
.garo-claw .key { background: linear-gradient(170deg, var(--keyA), var(--keyB)); }
.garo-claw .duct-glow { background: linear-gradient(180deg, rgba(var(--accent),0), rgba(var(--accent),.95), rgba(var(--accent),0));
box-shadow: 0 0 14px rgba(var(--accent), .9); }
.garo-claw .bulb { background:#FFF3C4; box-shadow:0 0 9px #FFE28A; }
/* ══ §2-1 단청 — 옻칠 나무 · 등롱 · 자개 소반 · 놋쇠 집게 ══════════ */
.garo-claw[data-machine="danchung"] {
--cabA:#4A3A2A; --cabB:#2A2018; --cabC:#1A1613;
--frameA:#6B5237; --frameB:#3E2F20; --frameC:#241B13;
--wallTop:#1A1613; --wallMid:#241C16; --floorBack:#241D19; --floorFront:#100D0B;
--signA:#C8102E; --signB:#8E0C21; --signC:#5A0714;
--accent:232,181,77; /* 등롱의 노란 불빛 */
--metal1:#E3C98F; --metal2:#6B5327; /* 놋쇠 */
--binA:#6B5237; --binB:#3E2F20; --binC:#241B13;
--panelA:#3A2C1E; --panelB:#241B13;
--keyA:#8A6B45; --keyB:#4E3B26;
--wallShade:.5; --vignette:.46;
}
/* 등롱 둘 — LED 처럼 차갑게 점등하지 않고 촛불처럼 미세하게 흔들린다 */
.garo-claw[data-machine="danchung"] .led-strip { animation: gc-lantern 4.7s ease-in-out infinite; }
.garo-claw[data-machine="danchung"] .glass:before {
content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
background:
radial-gradient(26% 30% at 14% 12%, rgba(255,214,130,.30) 0%, rgba(255,214,130,0) 70%),
radial-gradient(26% 30% at 86% 12%, rgba(255,214,130,.30) 0%, rgba(255,214,130,0) 70%);
animation: gc-lantern 4.7s ease-in-out infinite;
}
/* 자개 소반 — 바닥에 무지개빛 잔점 */
.garo-claw[data-machine="danchung"] .g-floor {
background:
radial-gradient(3px 2px at 22% 62%, rgba(150,255,230,.5), rgba(150,255,230,0) 100%),
radial-gradient(3px 2px at 61% 74%, rgba(255,190,235,.45), rgba(255,190,235,0) 100%),
radial-gradient(2px 2px at 78% 58%, rgba(190,220,255,.5), rgba(190,220,255,0) 100%),
radial-gradient(2px 2px at 39% 86%, rgba(255,236,170,.45), rgba(255,236,170,0) 100%),
linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.34) 60%, rgba(0,0,0,.56) 100%);
}
/* 처마 — 간판 위로 살짝 들린 기와 끝 */
.garo-claw[data-machine="danchung"] .sign { border-radius: 15px 15px 9px 9px; }
.garo-claw[data-machine="danchung"] .sign:before {
content:''; position:absolute; left:-7px; right:-7px; top:-9px; height:16px;
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
background: linear-gradient(180deg, #6B5237, #3E2F20);
box-shadow: 0 2px 5px rgba(0,0,0,.5);
}
/* ══ §2-2 베네치아 — 금박 액자 · 촛불 · 붉은 벨벳 · 금빛 집게 ══════ */
.garo-claw[data-machine="venezia"] {
--cabA:#3A2438; --cabB:#2A1A2A; --cabC:#241826;
--frameA:#C9A227; --frameB:#8A6E18; --frameC:#4A3A10;
--wallTop:#241826; --wallMid:#3120310; --wallMid:#2E1F30; --floorBack:#4A1520; --floorFront:#2A0C12;
--signA:#C9A227; --signB:#9C7A18; --signC:#634C0C;
--accent:255,214,130; /* 샹들리에 촛불 */
--metal1:#F0DFA0; --metal2:#6E5512; /* 금 */
--binA:#8A6E18; --binB:#5A470F; --binC:#3A2E09;
--panelA:#3A2438; --panelB:#241826;
--keyA:#A98A2E; --keyB:#5E4A12;
--wallShade:.46; --vignette:.42;
}
/* 금박은 벗겨져 흰 석고가 비친다 — 새것이면 안 된다 */
.garo-claw[data-machine="venezia"] .glass-frame {
background:
repeating-linear-gradient(118deg, rgba(237,227,208,.22) 0 3px, rgba(237,227,208,0) 3px 13px),
linear-gradient(160deg, var(--frameA) 0%, var(--frameB) 55%, var(--frameC) 100%);
}
.garo-claw[data-machine="venezia"] .led-strip { animation: gc-candle 2.3s ease-in-out infinite; }
.garo-claw[data-machine="venezia"] .glass:before {
content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
background: radial-gradient(46% 26% at 50% 2%, rgba(255,222,150,.34) 0%, rgba(255,222,150,0) 74%);
animation: gc-candle 2.3s ease-in-out infinite;
}
/* 구겨진 붉은 벨벳 바닥 */
.garo-claw[data-machine="venezia"] .g-floor {
background:
repeating-linear-gradient(84deg, rgba(255,255,255,.05) 0 2px, rgba(0,0,0,.06) 2px 11px),
linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.28) 60%, rgba(0,0,0,.5) 100%);
}
/* ══ §2-3 메종 — 프레임을 지운다 · 스포트 하나 · 무채색 ════════════
메종의 정체는 "장식이 없다"는 것이다. 색은 가면에서만 나온다. */
.garo-claw[data-machine="maison"] {
--cabA:#1C1C1C; --cabB:#161616; --cabC:#111111;
--frameA:#2A2A2A; --frameB:#1A1A1A; --frameC:#141414;
--wallTop:#141414; --wallMid:#1A1A1A; --floorBack:#1C1C1C; --floorFront:#0A0A0A;
--signA:#1E1E1E; --signB:#171717; --signC:#101010;
--accent:185,161,107; /* 샴페인 골드 */
--metal1:#D8D8D8; --metal2:#3A3A3A; /* 브러시드 스틸 */
--binA:#242424; --binB:#191919; --binC:#101010;
--panelA:#1C1C1C; --panelB:#131313;
--keyA:#2E2E2E; --keyB:#1B1B1B;
--wallShade:.5; --vignette:.62;
}
/* 프레임 5mm — 무광 검정 테두리만 남기고 지운다 */
.garo-claw[data-machine="maison"] .glass-frame { padding: 3px; border-radius: 8px; }
.garo-claw[data-machine="maison"] .glass { border-radius: 6px; }
/* LED 스트립 금지 — 대신 천장 스포트 3구가 아래로 좁게 떨어진다 */
.garo-claw[data-machine="maison"] .led-strip { display: none; }
.garo-claw[data-machine="maison"] .glass:before {
content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
background:
radial-gradient(20% 62% at 22% -6%, rgba(255,247,225,.24) 0%, rgba(255,247,225,0) 72%),
radial-gradient(20% 66% at 50% -6%, rgba(255,247,225,.30) 0%, rgba(255,247,225,0) 74%),
radial-gradient(20% 62% at 78% -6%, rgba(255,247,225,.24) 0%, rgba(255,247,225,0) 72%);
}
/* 검은 스웨이드 단 — 반사 없는 무광 */
.garo-claw[data-machine="maison"] .g-floor {
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.42) 55%, rgba(0,0,0,.72) 100%);
}
/* 간판은 얇은 각인 한 줄 */
.garo-claw[data-machine="maison"] .sign { height: 48px; box-shadow: inset 0 1px 0 rgba(255,255,255,.07); animation: none; }
.garo-claw[data-machine="maison"] .sign-txt b { font-size: 18px; font-weight: 500; letter-spacing: .26em; color: #EDEAE3; text-shadow: none; }
.garo-claw[data-machine="maison"] .sign-txt span { color: rgba(185,161,107,.85); }
.garo-claw[data-machine="maison"] .bulb { display: none; }
.garo-claw[data-machine="maison"] .gloss { opacity: .25; }
/* 집게가 4종 중 가장 느리고 조용하다 */
.garo-claw[data-machine="maison"] .claw-sway { animation-duration: 5.2s; }
/* ══ §2-4 판테온 — 석조 · 횃불 · 깨진 석판 · 청동 갈고리 (남성용) ══ */
.garo-claw[data-machine="pantheon"] {
--cabA:#3A4048; --cabB:#2A3038; --cabC:#22252A;
--frameA:#D6D1C4; --frameB:#8C8578; --frameC:#4A5259;
--wallTop:#22252A; --wallMid:#2C3138; --floorBack:#3A3B36; --floorFront:#17191C;
--signA:#8C8578; --signB:#5E6068; --signC:#3A3E44;
--accent:217,119,58; /* 횃불 */
--metal1:#9BB0A2; --metal2:#39493E; /* 산화 청동 */
--binA:#5A6169; --binB:#3C4249; --binC:#272B30;
--panelA:#333940; --panelB:#22252A;
--keyA:#5E6068; --keyB:#383C42;
--wallShade:.58; --vignette:.5; /* 4종 중 명암이 가장 강하다 */
}
/* 대리석 프레임 — 실금이 간다 */
.garo-claw[data-machine="pantheon"] .glass-frame {
background:
repeating-linear-gradient(72deg, rgba(74,82,89,.20) 0 1px, rgba(74,82,89,0) 1px 22px),
linear-gradient(160deg, var(--frameA) 0%, var(--frameB) 55%, var(--frameC) 100%);
}
/* 좌우 횃불 둘 — 오렌지빛이 거칠게 훑는다 */
.garo-claw[data-machine="pantheon"] .led-strip { animation: gc-torch 1.9s ease-in-out infinite; }
.garo-claw[data-machine="pantheon"] .glass:before {
content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
background:
radial-gradient(24% 46% at 6% 18%, rgba(255,150,70,.32) 0%, rgba(255,150,70,0) 72%),
radial-gradient(24% 46% at 94% 18%, rgba(255,150,70,.32) 0%, rgba(255,150,70,0) 72%);
animation: gc-torch 1.9s ease-in-out infinite;
}
/* 깨진 석판과 모래 */
.garo-claw[data-machine="pantheon"] .g-floor {
background:
linear-gradient(74deg, rgba(0,0,0,.28) 0 1px, rgba(0,0,0,0) 1px 40%),
linear-gradient(-64deg, rgba(0,0,0,.24) 0 1px, rgba(0,0,0,0) 1px 62%),
linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.3) 58%, rgba(0,0,0,.54) 100%);
}
/* 기둥 둘 — 유리 좌우에 세워 긴 그림자를 만든다 */
.garo-claw[data-machine="pantheon"] .glass-frame:before,
.garo-claw[data-machine="pantheon"] .glass-frame:after {
content:''; position:absolute; top:7px; bottom:7px; width:13px; z-index:10; pointer-events:none;
background: repeating-linear-gradient(90deg,
rgba(214,209,196,.92) 0 3px, rgba(122,118,108,.92) 3px 4px, rgba(214,209,196,.92) 4px 7px);
box-shadow: 0 0 12px rgba(0,0,0,.55);
}
.garo-claw[data-machine="pantheon"] .glass-frame:before { left:7px; border-radius: 12px 0 0 12px; }
.garo-claw[data-machine="pantheon"] .glass-frame:after { right:7px; border-radius: 0 12px 12px 0; }
/* ── 빛의 성격 (§2 ②) — 색이 아니라 움직임이 기계를 가른다 ────────── */
@keyframes gc-lantern { /* 등롱: 촛불처럼 미세하고 불규칙하게 */
0%{opacity:.80} 17%{opacity:.93} 31%{opacity:.76} 48%{opacity:.97}
63%{opacity:.82} 79%{opacity:.91} 100%{opacity:.80}
}
@keyframes gc-candle { /* 샹들리에: 더 잘고 빠르게 어른거린다 */
0%{opacity:.72} 12%{opacity:1} 26%{opacity:.68} 41%{opacity:.95}
57%{opacity:.74} 73%{opacity:1} 88%{opacity:.7} 100%{opacity:.72}
}
@keyframes gc-torch { /* 횃불: 진폭이 크다 */
0%{opacity:.62} 21%{opacity:1} 44%{opacity:.58} 67%{opacity:.94} 100%{opacity:.62}
}
/* 유리 안쪽 레이어 순서 — :before 로 넣은 조명이 무더기를 덮지 않게 한다.
주의: `.glass > *` 에 position 을 주면 .claw/.bin/.falling 의 absolute 가 풀려
집게가 레일에서 떨어진다. z-index 만 건드린다. */
/* 무더기는 유리 전체를 덮는 레이어여야 한다. relative 로 두면 높이 0이 되어
가면들의 bottom 좌표가 유리 위쪽으로 밀려 화면 밖으로 사라진다. */
.garo-claw .glass > #gc-pile { position: absolute; inset: 0; z-index: 1; }
.garo-claw .glass > .g-top,
.garo-claw .glass > .g-shade,
.garo-claw .glass > .g-floor { z-index: 0; }
/* 조준 링 — 가면 그림은 가로로 긴 캣아이다. 정원을 씌우면 허공을 크게 두른다.
그림 비율에 맞춘 타원으로 눕힌다. */
.garo-claw .aim-ring {
inset: 24% -3%; border-width: 2.5px; border-radius: 50%;
}
/* ---------- 기계 스킨 (가면 Part 그림) ----------
그림은 480×562 캔버스(2배 960×1124)에 각 부위를 제자리에 그린 것이다. 기계는 화면 폭에 따라
480px 보다 작게 그려지므로(390 화면에서 342px) 모든 오프셋을 캔버스 기준 × --k 로 둔다.
--k = 실제 캐비닛 폭 / 480 (applySkin 이 잰다). 이 변수 하나가 좌표계의 진실이다.
스킨이 없는 기계는 이 블록이 적용되지 않아 CSS 기계 그대로다. */
.garo-claw .skin-glass, .garo-claw .skin-claw { display: none; }
.garo-claw { --k: 1; }
.garo-claw.skinned .cab {
background: var(--skin-frame) center / 100% 100% no-repeat;
box-shadow: 0 24px 50px rgba(0, 0, 0, .6);
}
/* 프레임 그림에 간판 판이 들어 있으므로 CSS 간판은 글자만 남기고 투명하게 */
.garo-claw.skinned .sign { background: transparent; box-shadow: none; animation: none; }
.garo-claw.skinned .sign > .gloss, .garo-claw.skinned .bulb { display: none; }
.garo-claw.skinned .sign-txt b { color: #e8d9a8; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.garo-claw.skinned .sign-txt span { color: rgba(232, 217, 168, .7); }
.garo-claw.skinned .glass-frame { background: transparent; box-shadow: none; }
.garo-claw.skinned .led-strip { display: none; }
/* 내부배경: 유리 박스는 캔버스 (16,87) 448×368 — 캔버스 전체를 --k 배로 깔고 그 부분만 보이게 */
.garo-claw.skinned .glass {
background: var(--skin-interior) calc(-16px * var(--k)) calc(-87px * var(--k)) / calc(480px * var(--k)) calc(562px * var(--k)) no-repeat;
}
.garo-claw.skinned .g-top, .garo-claw.skinned .g-shade, .garo-claw.skinned .rail,
.garo-claw.skinned .g-floor, .garo-claw.skinned .reflect { display: none; }
/* 투입구(GET 통)는 떨어지는 가면 연출이 걸려 있어 CSS 그대로 둔다 — 내부배경은 그 자리를 비워 둔다 */
/* 유리 반사 — 집게(z6) 위. 캔버스 전체를 --k 배로 깔고 유리 박스 안만 보인다(overflow:hidden) */
.garo-claw.skinned .skin-glass {
display: block; position: absolute;
left: calc(-16px * var(--k)); top: calc(-87px * var(--k));
width: calc(480px * var(--k)); height: calc(562px * var(--k));
pointer-events: none; z-index: 7;
}
/* 집게 — SVG 대신 그림 2장. 그림은 캔버스 (222~259, 120~169) 에 있다(실측, A안).
집게는 .claw(left)→.shaft(케이블)→.head 를 따라 움직이므로 캔버스 전체를 깔 수 없다 —
허브 중심 x=240 기준 60×52 를 잘라 .head 안 스프라이트로 쓴다.
![]()
는 object-fit:none 에서 원본(2배, 960×1124) 픽셀로 그리므로 object-position 도 2배 값이고,
스프라이트 상자 자체를 --k 로 줄이는 대신 2배 원본을 --k/2 로 축소해야 한다 → transform scale */
.garo-claw.skinned .jaw { display: none !important; } /* svg 에 inline display:block 이 있어 !important 가 필요하다 */
.garo-claw.skinned .skin-claw {
display: block; position: absolute; left: 50%; top: 0;
width: 120px; height: 104px; /* 2배 원본 기준 60×52 */
object-fit: none; object-position: -420px -240px; /* 캔버스 (210,120) → 2배 (420,240) */
transform-origin: 50% 0; transform: translateX(-50%) scale(calc(var(--k) * .5));
pointer-events: none; filter: drop-shadow(0 3px 6px rgba(12, 10, 22, .42));
}
.garo-claw.skinned .skin-claw.closed { opacity: 0; }
/* 집힌 가면: SVG 집게(84px) 기준 top:42px 였다. 스킨 집게 끝은 캔버스 y169 = 머리 위에서 49px×--k 라 그만큼 올린다 (네 대 공통, 가면 Part 가 집게 끝을 y338/2x 로 통일) */
.garo-claw.skinned .carried { top: calc(49px * var(--k) - 40px); }
/* 배출구 그림은 캔버스 (9,471) 부터 462×82 — .chute-bar 가 .cab 패딩 9px 안에 있으므로 그만큼 당긴다 */
.garo-claw.skinned .chute-bar {
background: var(--skin-chute) calc(-9px * var(--k)) calc(-471px * var(--k)) / calc(480px * var(--k)) calc(562px * var(--k)) no-repeat;
box-shadow: none;
}
.garo-claw.skinned .duct, .garo-claw.skinned .chute-txt b { opacity: 0; }
.garo-claw.skinned .chute-txt span { color: rgba(232, 217, 168, .85); }
/* 스킨 집게 그림에는 허브(캐리지)가 들어 있다 — CSS 캐리지는 숨기고 샤프트는 가는 케이블로만 */
.garo-claw.skinned .carriage { display: none; }
.garo-claw.skinned .shaft {
width: 2px; background: linear-gradient(180deg, #6b6b73, #2a2a30); border-radius: 1px;
box-shadow: 0 0 2px rgba(0, 0, 0, .6);
}
/* 배출구 그림이 서랍을 품고 있다 — CSS 배출구(구멍·덮개·빛)는 숨긴다. 배출 연출(prize)은 그대로 둔다 */
.garo-claw.skinned .chute { background: transparent; box-shadow: none; border: 0; }
.garo-claw.skinned .chute-hole, .garo-claw.skinned .flap, .garo-claw.skinned .chute-glow { display: none; }
/* 케이블의 코일 무늬(.coil)는 CSS 샤프트용 — 스킨에서는 가는 선만 남긴다 */
.garo-claw.skinned .coil { display: none; }
/* 메종 A안 — 웜 아이보리 몸체·밝은 유리 안. 금빛 글자가 안 보이므로 간판·배출구 글자를 진하게 */
.garo-claw.skinned[data-machine="maison"] .sign-txt b { color: #2b2418; text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
.garo-claw.skinned[data-machine="maison"] .sign-txt span { color: rgba(43, 36, 24, .7); }
.garo-claw.skinned[data-machine="maison"] .chute-txt span { color: rgba(43, 36, 24, .85); }
.garo-claw.skinned[data-machine="maison"] .shaft { background: linear-gradient(180deg, #9a9088, #4a443c); }
/* 메종 간판 글자 — 대표: "샤넬 매장 간판처럼". 기하학적 굵은 산세리프·대문자·넓은 자간·흰색·
검정 띠 중앙에 은은한 백라이트. 글자는 코드가 얹고, 띠 배경은 가면 Part 그림(01-frame)이 맡는다.
다른 3대는 각자 브리프 서체 그대로 — 이 블록은 메종에만 걸린다. */
.garo-claw.skinned[data-machine="maison"] .sign-txt { transform: translateY(-3px); } /* 띠 위쪽이 밝아 글자를 살짝 위에 — 빛 방향과 맞춘다 (가면 Part) */
.garo-claw.skinned[data-machine="maison"] .sign-txt b {
font-family: 'Montserrat', 'Futura', 'Avenir Next', 'Helvetica Neue', Arial, sans-serif;
font-weight: 700; font-size: 20px; letter-spacing: .25em; text-indent: .25em; /* 자간만큼 오른쪽이 비어 보여 중앙이 밀린다 — 들여쓰기로 상쇄 */
color: #F5F5F5; text-transform: uppercase;
text-shadow: 0 0 6px rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .6);
}
.garo-claw.skinned[data-machine="maison"] .sign-txt span {
font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif;
font-weight: 500; font-size: 10px; letter-spacing: .35em; text-indent: .35em; margin-top: 3px;
color: rgba(245, 245, 245, .78); text-transform: none;
text-shadow: 0 0 6px rgba(255, 255, 255, .2);
}
/* ══ 대표 지시 2026-08-23 — 기계 4대 공통: 글자 줄이기 · 간판 키우기 ═══════════
남는 글자: 헤더(이름·티켓·가면 카운트) · 간판 영문 · GO. 나머지 설명 문구는 전부 지운다. */
.garo-claw .sign-txt span, .garo-claw .bin-lbl, .garo-claw .chute-txt, .garo-claw .notice { display: none !important; }
.garo-claw .hint { display: none; }
.garo-claw .hint:not(:empty) { display: block; color: #FFB4B4; } /* 오류만 */
/* 간판 메인: 대문자 · 800 · 띠 높이(62px)의 55~60% → 35px · 자간 .2em */
.garo-claw .sign-txt b {
font-size: 35px; font-weight: 800; letter-spacing: .2em; text-indent: .2em; text-transform: uppercase; line-height: 1;
}
.garo-claw.skinned .sign-txt b { font-size: 34px; font-weight: 800; letter-spacing: .2em; text-indent: .2em; }
/* 메종은 샤넬식 유지(가늘고 넓은 자간) — 크기만 같은 비율로 */
.garo-claw.skinned[data-machine="maison"] .sign-txt b { font-size: 27px; font-weight: 700; letter-spacing: .25em; text-indent: .25em; }
/* 대표 수정 2026-08-23 — 단청 간판 글자는 우리나라 가을 하늘색(빨강 금지), 얇은 금 외곽선 */
.garo-claw.skinned[data-machine="danchung"] .sign-txt b {
color: #4FA3E3;
text-shadow: 0 0 1px #C9A227, 0 0 1px #C9A227, 0 1px 2px rgba(0, 0, 0, .55);
}
/* 대표 수정 — 메종 「MAISON」 띠 정중앙 (앞서 3px 위로 올린 보정 철회) */
.garo-claw.skinned[data-machine="maison"] .sign-txt { transform: none; }
.garo-claw.skinned .sign { display: flex; align-items: center; justify-content: center; }
.garo-claw.skinned .sign-txt b { line-height: 1; }
/* ══ 대표 지시 2026-08-23 — 간판 서체는 기계마다 컨셉대로 (전부 대문자·굵게·크게는 유지) ═══
폰트는 Google Fonts(index.html). 못 받으면 system serif/sans 로 자연스럽게. */
/* 단청 — 목판 각인 느낌의 명조 세리프, 가을 하늘색, 얇은 금 외곽선 */
.garo-claw.skinned[data-machine="danchung"] .sign-txt b {
font-family: 'Nanum Myeongjo', 'Cormorant Garamond', 'Noto Serif KR', Georgia, serif;
font-weight: 800; font-size: 34px; letter-spacing: .16em; text-indent: .16em;
color: #4FA3E3;
text-shadow: 0 0 1px #C9A227, 0 0 1px #C9A227, 0 1px 2px rgba(0, 0, 0, .55);
}
/* 베네치아 — 바로크 장식 세리프, 금색 그라데이션 */
.garo-claw.skinned[data-machine="venezia"] .sign-txt b {
font-family: 'Playfair Display', 'Cinzel', 'Didot', Georgia, serif;
font-weight: 900; font-size: 35px; letter-spacing: .18em; text-indent: .18em;
background: linear-gradient(180deg, #F6E7B2 0%, #D9B54A 45%, #9A7418 100%);
-webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .7));
}
/* 메종 — 샤넬식 기하학 산세리프, 가늘고 넓은 자간, 흰색 (유지) */
.garo-claw.skinned[data-machine="maison"] .sign-txt b {
font-family: 'Montserrat', 'Josefin Sans', 'Futura', 'Helvetica Neue', Arial, sans-serif;
font-weight: 600; font-size: 26px; letter-spacing: .3em; text-indent: .3em; color: #F5F5F5;
}
/* 판테온 — 각진 인더스트리얼, 금속 엠보스(밝은 상단·어두운 하단) */
.garo-claw.skinned[data-machine="pantheon"] .sign-txt b {
font-family: 'Bebas Neue', 'Oswald', 'Anton', 'Arial Narrow', Impact, sans-serif;
font-weight: 700; font-size: 40px; letter-spacing: .22em; text-indent: .22em;
background: linear-gradient(180deg, #F2F3F5 0%, #B9BEC6 48%, #6E747C 100%);
-webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .35)) drop-shadow(0 -1px 0 rgba(0, 0, 0, .6));
}
/* 단청 — 나전 꽃무늬 위라 글자 뒤에 어두운 테를 둘러 읽히게 (가을 하늘색 유지) */
.garo-claw.skinned[data-machine="danchung"] .sign-txt b {
text-shadow: 0 0 1px #C9A227, 0 0 2px rgba(0, 0, 0, .95), 0 0 6px rgba(0, 0, 0, .9), 0 2px 4px rgba(0, 0, 0, .8);
}