:root{
  --bg:#F4F7FD;
  --panel:#FFFFFF;
  --panel-2:#EDF2FB;
  --sunken:#E7EDF9;
  --line:#D8E1F0;
  --ink:#17233B;
  --ink-2:#4C5B76;
  --ink-3:#8492AC;
  --indigo:#3A56C4;
  --indigo-bg:#E6EBFB;
  --leaf:#1E8A63;
  --leaf-bg:#E1F3EB;
  --coral:#D2543C;
  --coral-bg:#FBE9E4;
  --gold:#B5820F;
  --gold-bg:#FBF1D8;
  --shadow:0 1px 2px rgba(23,35,59,.05), 0 6px 18px rgba(23,35,59,.06);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Pretendard","Noto Sans KR","Noto Sans CJK KR","Malgun Gothic","맑은 고딕",sans-serif;
  font-size:14px; line-height:1.6;
}
button{font-family:inherit; font-size:14px; cursor:pointer}
input,textarea,select{font-family:inherit; font-size:14px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#C6D2E6;border-radius:6px;border:3px solid var(--bg)}

.btn{background:var(--panel); color:var(--ink); border:1.5px solid var(--line);
  border-radius:9px; padding:8px 14px; transition:.12s}
.btn:hover{border-color:var(--indigo); color:var(--indigo)}
.btn.primary{background:var(--indigo); border-color:var(--indigo); color:#fff; font-weight:700}
.btn.primary:hover{background:#2F48AC; color:#fff}
.btn.warn{color:var(--coral); border-color:#F0C6BC}
.btn.warn:hover{background:var(--coral-bg); border-color:var(--coral); color:var(--coral)}
.btn.ghost{background:transparent}
.btn:disabled{opacity:.42; cursor:not-allowed}
.btn.sm{padding:5px 10px; font-size:12.5px; border-radius:7px}
:focus-visible{outline:2px solid var(--indigo); outline-offset:2px}

.label{font-size:11px; letter-spacing:.08em; color:var(--ink-3); text-transform:uppercase; font-weight:700}
.pill{display:inline-block; padding:2px 9px; border-radius:99px; font-size:11.5px; font-weight:700}
.pill.on{background:var(--leaf-bg); color:var(--leaf)}
.pill.off{background:var(--sunken); color:var(--ink-3)}
.pill.warn{background:var(--coral-bg); color:var(--coral)}

.panel{background:var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow)}
.hidden{display:none !important}

/* 📱 모바일 & 태블릿 하이브리드 최적화 */
*{-webkit-tap-highlight-color:transparent}
:root{
  --sat:env(safe-area-inset-top, 0px);
  --sab:env(safe-area-inset-bottom, 0px);
  --sal:env(safe-area-inset-left, 0px);
  --sar:env(safe-area-inset-right, 0px);
}
@media (hover: none) and (pointer: coarse){
  .btn:active{transform:scale(0.97)}
  button:active{transform:scale(0.97)}
}
@media (max-width:768px){
  ::-webkit-scrollbar{width:5px;height:5px}
  ::-webkit-scrollbar-thumb{background:#B8C6DE;border-radius:4px;border:none}
  /* iOS 사파리 자동 확대 방지를 위해 폰트 16px 이상 보장 */
  input,textarea,select{font-size:16px !important}
}

@media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important} }