/* 전투 훌라 판 부품 v2 — 옻칠 호두나무 + 놋쇠 테 (뻐으 10-17 합격본, 이 파일이 부품 명세 전체).
   scene 루트에 class="C" 를 붙이면 .plate .tray .caplab .badge .tag-un .av .btn(.mid .on .off .pressed .thx.lit) .plate.turn(발광) .pill.meldtag 가 바뀐다.
   phone 은 루트에 .phone 이 같이 붙을 때 못·테 두께·단추 깊이를 줄인다. 같은 폴더의 lacquer-grain.webp 를 쓴다.
   모든 금액·숫자는 글자(코드 텍스트)로 올린다 — 숫자 구운 그림은 -notext 판만 쓴다. */
/* ================= C · 옻칠 호두나무 + 놋쇠 (v2 부품) ================= */
.C{--brass:linear-gradient(135deg,#fff3c4 0%,#e6b957 14%,#7a4c0e 34%,#f6dc88 52%,#9a6416 72%,#ffeaa8 88%,#c18a2c 100%);
   --lacq:linear-gradient(180deg,#4a2c1b,#24140b);--ink:#f8ecd3}
.C .plate,.C .tray{border:3px solid transparent;border-radius:9px;color:var(--ink);
  background:
   linear-gradient(180deg,rgba(255,228,176,.30) 0,rgba(255,228,176,.07) 36%,rgba(0,0,0,0) 54%,rgba(0,0,0,.28) 100%) padding-box,
   url("lacquer-grain.webp") padding-box,
   var(--lacq) padding-box,
   var(--brass) border-box;
  box-shadow:0 0 0 1px #160b04,0 9px 16px rgba(18,8,0,.55),inset 0 0 0 1px rgba(16,6,0,.8),inset 0 0 0 3px rgba(240,196,92,.32),inset 0 2px 0 rgba(255,236,190,.28);}
.C .plate .lab{color:#f2cf7a}
.C .plate::before,.C .tray::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:
   radial-gradient(circle at 9px 9px,#fff6d2 0 1px,#c89030 2.4px,#4a2c08 3.6px,transparent 4.2px),
   radial-gradient(circle at calc(100% - 9px) 9px,#fff6d2 0 1px,#c89030 2.4px,#4a2c08 3.6px,transparent 4.2px),
   radial-gradient(circle at 9px calc(100% - 9px),#fff6d2 0 1px,#c89030 2.4px,#4a2c08 3.6px,transparent 4.2px),
   radial-gradient(circle at calc(100% - 9px) calc(100% - 9px),#fff6d2 0 1px,#c89030 2.4px,#4a2c08 3.6px,transparent 4.2px)}
.C .tray{background:
   radial-gradient(ellipse at 50% 38%,rgba(255,232,176,.16),rgba(255,232,176,0) 72%) padding-box,
   linear-gradient(180deg,rgba(255,228,176,.24) 0,rgba(255,228,176,0) 30%,rgba(0,0,0,.30) 100%) padding-box,
   url("lacquer-grain.webp") padding-box,linear-gradient(180deg,#3a2415,#1b0f08) padding-box,var(--brass) border-box;color:var(--ink)}
.C .caplab{background:linear-gradient(180deg,#46291a,#22130b) padding-box,var(--brass) border-box!important;border:2px solid transparent;border-radius:7px!important;
  box-shadow:0 0 0 1px #160b04,0 4px 8px rgba(18,8,0,.55),inset 0 1px 0 rgba(255,236,190,.35)}
.C .badge{background:radial-gradient(circle at 35% 28%,#5a3722,#1a0d06);border:3px solid #e2b552;color:#fff3d6;
  box-shadow:0 0 0 1px #160b04,0 4px 7px rgba(0,0,0,.6),inset 0 2px 0 rgba(255,232,180,.4)}
.C .tag-un{background:linear-gradient(180deg,#fff9ea,#ead6a6);border:2px solid #b9822a;color:#2a1708;box-shadow:0 0 0 1px #160b04,0 3px 6px rgba(0,0,0,.5),inset 0 1px 0 #fff}
.C .av{border:3px solid transparent;background:var(--brass) border-box,#222;box-shadow:0 0 0 1px #160b04,0 5px 10px rgba(18,8,0,.6)}
/* 단추 — 놋쇠 테 · 눌림 깊이(아래 두꺼운 면) · 켜지면 빛 테 */
.C .btn{border:2.5px solid transparent;border-radius:10px;color:var(--ink);transform:translateY(-2px);
  background:linear-gradient(180deg,rgba(255,228,176,.28),rgba(255,228,176,0) 48%,rgba(0,0,0,.25)) padding-box,url("lacquer-grain.webp") padding-box,var(--lacq) padding-box,var(--brass) border-box;
  box-shadow:0 6px 0 #1c0e05,0 7px 0 #0e0602,0 14px 16px rgba(18,8,0,.6),inset 0 2px 0 rgba(255,236,190,.45),inset 0 -8px 12px rgba(0,0,0,.35);}
.C .btn.mid{background:linear-gradient(180deg,rgba(255,228,176,.30),rgba(255,228,176,0) 48%,rgba(0,0,0,.22)) padding-box,url("lacquer-grain.webp") padding-box,linear-gradient(180deg,#5b3822,#2e1a0e) padding-box,var(--brass) border-box}
.C .btn.on{color:#2a1708;border-color:transparent;
  background:linear-gradient(180deg,rgba(255,255,255,.80),rgba(255,255,255,0) 52%,rgba(150,100,24,.18)) padding-box,linear-gradient(180deg,#fff8e6,#ecd6a2) padding-box,var(--brass) border-box;
  box-shadow:0 6px 0 #7a5214,0 7px 0 #3a2508,0 0 0 3px rgba(255,226,140,.38),0 0 22px 6px rgba(255,205,100,.48),0 15px 16px rgba(18,8,0,.55),inset 0 2px 0 #fff,inset 0 -7px 10px rgba(166,112,26,.32)}
.C .btn.off{opacity:.78;transform:none;
  background:linear-gradient(180deg,rgba(255,228,176,.10),rgba(0,0,0,.2)) padding-box,url("lacquer-grain.webp") padding-box,linear-gradient(180deg,#3a281b,#1d110a) padding-box,linear-gradient(135deg,#a89260,#4a381a 40%,#8c7440 70%,#5a4622) border-box;color:#b9a888;
  box-shadow:0 2px 0 #140a04,0 6px 9px rgba(0,0,0,.45),inset 0 -5px 8px rgba(0,0,0,.35)}
.C .btn.pressed{transform:translateY(4px)!important;box-shadow:0 1px 0 #0e0602,0 3px 5px rgba(18,8,0,.6),inset 0 5px 12px rgba(0,0,0,.6)!important;filter:brightness(.9)}
.C .btn.thx.lit{border-color:transparent;box-shadow:0 6px 0 #7a5214,0 0 0 2px #f1c232,0 0 0 5px #ff5555,0 0 22px 7px rgba(255,214,102,.6),0 15px 16px rgba(18,8,0,.55)}
.C .plate.turn{box-shadow:0 0 0 1px #160b04,0 0 0 5px rgba(255,230,150,.78),0 0 34px 12px rgba(255,200,80,.78),0 9px 16px rgba(18,8,0,.55),inset 0 0 0 1px rgba(16,6,0,.8),inset 0 2px 0 rgba(255,236,190,.35);animation:tp 1.2s ease-in-out infinite}
@keyframes tp{50%{box-shadow:0 0 0 1px #160b04,0 0 0 6px rgba(255,236,170,.85),0 0 40px 14px rgba(255,200,80,.82),0 9px 16px rgba(18,8,0,.55),inset 0 0 0 1px rgba(16,6,0,.8),inset 0 2px 0 rgba(255,236,190,.35)}}
.C .pill.meldtag{border:3px solid transparent!important;background:linear-gradient(180deg,#fff9ea,#ecd6a2) padding-box,var(--brass) border-box!important;color:#2a1708!important;box-shadow:0 0 0 1px #160b04,0 0 18px 4px rgba(255,205,100,.5),0 6px 10px rgba(18,8,0,.5)!important}
.phone.C .plate::before,.phone.C .tray::before{background:
   radial-gradient(circle at 5px 5px,#fff6d2 0 .6px,#c89030 1.3px,#4a2c08 1.9px,transparent 2.2px),
   radial-gradient(circle at calc(100% - 5px) 5px,#fff6d2 0 .6px,#c89030 1.3px,#4a2c08 1.9px,transparent 2.2px),
   radial-gradient(circle at 5px calc(100% - 5px),#fff6d2 0 .6px,#c89030 1.3px,#4a2c08 1.9px,transparent 2.2px),
   radial-gradient(circle at calc(100% - 5px) calc(100% - 5px),#fff6d2 0 .6px,#c89030 1.3px,#4a2c08 1.9px,transparent 2.2px)}
.phone.C .plate,.phone.C .tray{border-width:2px}
.phone.C .btn{border-width:2px;box-shadow:0 4px 0 #1c0e05,0 5px 0 #0e0602,0 9px 10px rgba(18,8,0,.55),inset 0 1.5px 0 rgba(255,236,190,.45),inset 0 -6px 9px rgba(0,0,0,.35)}
.phone.C .btn.on{box-shadow:0 4px 0 #7a5214,0 5px 0 #3a2508,0 0 0 2px rgba(255,226,140,.38),0 0 14px 4px rgba(255,205,100,.48),0 10px 10px rgba(18,8,0,.5),inset 0 1.5px 0 #fff,inset 0 -5px 8px rgba(166,112,26,.32)}