/* css/base.css — 변수(핑크·민트·금테), 프레임, 폰트, 버튼 (v3 금테·적색 프레임 계승) */
:root{
  --gold:#e3c46a; --gold-lt:#f6e39a; --gold-dk:#a67c2e;
  --red1:#5c1630; --red2:#3d0d1e; --red3:#7a2240; --redbar:#ff4f8f; --redbar-dk:#a01050;
  --mint:#5fd8c6; --mint-dk:#2f9a8a; --pink:#ff8fc0; --pink-dk:#c0507f;
  --parch:#f0e2c8; --parch-dk:#cbb787; --inkred:#4a0f22;
  --plus:#7be08a; --minus:#ff8f8f;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{height:100%;}
body{
  font-family:"Galmuri11","Galmuri9","DungGeunMo",monospace;
  background:radial-gradient(circle at 50% 35%, #3a1028 0, #1a0612 70%, #0a0208 100%) fixed;
  color:var(--parch); min-height:100vh; padding:12px;
  -webkit-font-smoothing:none;
}
.hidden{display:none !important;}
button{font-family:inherit; cursor:pointer;}
button:disabled{cursor:not-allowed;}
input,select{font-family:inherit;}
.plus{color:var(--plus);} .minus{color:var(--minus);}
.fine{font-size:11px; color:var(--parch-dk); line-height:1.6; margin-top:8px;}
.warn-note{font-size:12px; color:#ffb0b0;}

.pm-frame{
  position:relative; background:linear-gradient(180deg,var(--red1),var(--red2));
  border:2px solid var(--gold);
  box-shadow:inset 0 0 0 2px var(--red3), inset 0 0 0 3px var(--gold-dk), inset 0 0 14px rgba(0,0,0,.6), 0 3px 0 rgba(0,0,0,.5);
  border-radius:4px; padding:8px;
}
.pm-frame::before,.pm-frame::after{content:"❖"; position:absolute; top:2px; color:var(--gold-lt); font-size:11px; line-height:1; text-shadow:0 1px 0 #000; z-index:2;}
.pm-frame::before{left:4px;} .pm-frame::after{right:4px;}

.pm-btn{
  background:linear-gradient(180deg,#8a2a50,#4a1028); color:var(--gold-lt);
  border:2px solid var(--gold); box-shadow:inset 0 0 0 2px var(--gold-dk), 0 3px 0 #000; border-radius:4px;
  font-size:15px; padding:10px 22px; letter-spacing:1px; transition:transform .07s;
  display:inline-flex; flex-direction:column; align-items:center; gap:2px;
}
.pm-btn small{font-size:10px; color:#e8c9a0;}
.pm-btn:hover:not(:disabled){transform:translateY(-2px);}
.pm-btn:active:not(:disabled){transform:translateY(2px);}
.pm-btn:disabled{opacity:.45; filter:grayscale(.5);}
.pm-btn.sm{font-size:13px; padding:7px 14px;}
.pm-btn.xs{font-size:11px; padding:4px 8px; box-shadow:inset 0 0 0 1px var(--gold-dk), 0 2px 0 #000;}
.pm-btn.on{background:linear-gradient(180deg,var(--mint),var(--mint-dk)); color:#102a26;}

.bar{height:11px; background:#2a0816; border:1px solid #3a1020; border-radius:2px; overflow:hidden;}
.bar>span{display:block; height:100%; background:linear-gradient(180deg,#ff8ab8,var(--redbar) 40%,var(--redbar-dk)); transition:width .5s cubic-bezier(.2,1,.3,1);}
.bar.stress>span{background:linear-gradient(180deg,#ffcf6a,#e49a23 50%,#8a5a10);}
.bar.skill>span{background:linear-gradient(180deg,#9ff0e4,var(--mint) 45%,var(--mint-dk));}
.bar.eval>span{background:linear-gradient(180deg,#ffe8a0,var(--gold) 45%,var(--gold-dk));}
.bar.full>span{animation:shine 1.2s ease-in-out infinite;}
@keyframes shine{50%{filter:brightness(1.5);}}

.toast{position:fixed; left:50%; bottom:22px; transform:translateX(-50%) translateY(14px); background:#1a0610; color:var(--gold-lt);
  border:2px solid var(--gold); box-shadow:0 6px 18px #000; padding:9px 18px; border-radius:4px; font-size:13px; opacity:0; transition:.22s; pointer-events:none; z-index:300;}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
.bgm-ctrl{position:fixed; top:8px; right:8px; z-index:250; display:flex; align-items:center; gap:6px; background:rgba(22,6,14,.82);
  border:2px solid var(--gold-dk); border-radius:999px; padding:4px 12px 4px 8px;}
.bgm-ctrl button{background:none; border:none; font-size:18px; line-height:1;}
.bgm-ctrl input[type=range]{width:86px; accent-color:var(--gold);}

/* 에셋 폴백 */
.asset-fb{position:relative;}
.asset-icon{position:absolute; left:50%; top:42%; transform:translate(-50%,-50%); font-size:64px; opacity:.35; pointer-events:none; filter:saturate(.8);}