:root{
  --bg:#f4f6fb;--card:#fff;--text:#222;--related:#BFCBEA;
  --primary:#6c63ff;--fixed:#e9ecf4;--wrong:#ffcccc;--related:gray;
}
.dark{
  --bg:#121212;--card:#1f1f1f;--text:#fff;--fixed:#333;
}
        .div-wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            padding: 20px;
            box-sizing: border-box;
        }
        .div-container {
            background: #2c3e50;
            border: 4px solid #3f8fef;
            border-radius: 12px;
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            max-width: 850px;
            padding: 24px;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
        }
.app{max-width:420px;width:100%;padding:15px;}
.header{display:flex;justify-content:center;align-items:center;color:white; font-size:32px;}
.header .right{display:flex;gap:8px;}
.card{
  background:var(--card);color:black;border-radius:16px;padding:15px;font-size:24px;
  margin-top:15px;box-shadow:0 8px 20px rgba(0,0,0,.08);
}
table{border-collapse:collapse;margin:auto;}
td{
  width:38px;height:38px;border:1px solid #999;position:relative;
}
.bold-right{border-right:3px solid #555!important;}
.bold-bottom{border-bottom:3px solid #555!important;}

input{
  position:absolute;inset:0;border:none;background:none;
  text-align:center;font-size:18px;color:var(--text);
  cursor: pointer;
}
.fixed{background:var(--fixed);font-weight:bold;}
.wrong{background:var(--wrong)!important;}
.selected{background:#cdd7ff!important;}
.related{background:var(--related); !important;} /* 하이라이트 농도 조절 */
.same-number{background:rgba(255,200,0,0.4)!important;}
.duplicate{color: #ff4d4d !important; font-weight: bold;}

.note{
  position:absolute;inset:0;font-size:10px;line-height:1.2;
  padding:2px;white-space:pre-wrap;pointer-events:none;color:#666;
}
.dark .note{color:#aaa;}

.keypad{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:10px;margin-top:15px;
}
.keypad button{
  padding:14px;font-size:18px;border-radius:12px;
  border:none;background:var(--primary);color:#fff;
  cursor: pointer;
}
.keypad button.completed{
  background:#bbb!important;color:#666!important;pointer-events:none;
}
.dark .keypad button.completed{
  background:#444!important;color:#888!important;
}
.keypad button.active{
  outline:3px solid #ff9800;
}
.h1{color:white; font-size:32px;}
.actions{display:flex;gap:10px;margin-top:15px;}
.actions button{
  flex:1;padding:12px;border-radius:12px;border:none;
  cursor: pointer;
  background: #eee;
}
.actions button.active-note {
  background: #ff9800;
  color: white;
}

.toggle{background:none;border:none;font-size:20px;cursor:pointer;}

@keyframes celebrate{
  0%{transform:scale(1)}
  50%{transform:scale(1.05)}
  100%{transform:scale(1)}
}
.clear{
  animation:celebrate .6s ease;
  box-shadow:0 0 30px rgba(255,215,0,.8);
}