*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  overflow:hidden;
  color:#fff;
  font-family:Arial,"Noto Sans KR",sans-serif;
  background:
    radial-gradient(circle at 70% 85%, rgba(120,0,20,.45), transparent 40%),
    radial-gradient(circle at 20% 20%, rgba(0,90,130,.25), transparent 35%),
    #05070a;
}

.sim-wrapper{
  width:100vw;
  height:100vh;
  display:grid;
  grid-template-rows:110px 1fr 88px;
}

.sim-header{
  border-bottom:1px solid rgba(255,255,255,.15);
  padding:14px 24px 10px;
}

.small-title{
  font-size:14px;
  color:#d0d0d0;
  margin-bottom:10px;
}

.main-title{
  position:relative;
  padding-left:18px;
  font-size:36px;
  font-weight:900;
}

.main-title::before{
  content:"";
  position:absolute;
  left:0;
  top:2px;
  width:8px;
  height:38px;
  background:repeating-linear-gradient(45deg,#fff 0 3px,transparent 3px 6px);
}

.sim-body{
  min-height:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) 380px;
}

.board-wrap{
  overflow:hidden;
  min-width:0;
}

.grid-area{
  height:100%;
  overflow-x:auto;
  overflow-y:hidden;
}

.row-wrap{
  position:relative;
  display:grid;
  grid-template-columns:100px 1fr;
  min-width:1750px;
  height:118px;
  border-bottom:4px solid rgba(120,120,130,.28);
}

.row-label{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:rgba(18,18,18,.9);
  border-right:1px solid rgba(255,255,255,.12);
}

.tier-bar{
  position:absolute;
  left:0;
  top:0;
  width:7px;
  height:100%;
  z-index:10;
}

.t1{
  background:#ffb000;
  box-shadow:0 0 15px #ffb000;
}

.t2{
  background:#ff6a00;
  box-shadow:0 0 15px #ff6a00;
}

.t3{
  background:#ff1f2d;
  box-shadow:0 0 15px #ff1f2d;
}

.tier-num{
  font-size:46px;
  font-weight:900;
}

.tier-icon{
  font-size:18px;
  opacity:.85;
}

.cards-row{
  position:relative;
  display:grid;
  grid-template-columns:repeat(16,72px);
  column-gap:40px;
  align-items:center;
  padding-left:50px;
}

.card{
  position:relative;
  width:72px;
  height:82px;
  align-self:center;
  justify-self:center;
  background:linear-gradient(145deg,rgba(52,52,52,.9),rgba(18,18,18,.96));
  border:1px solid #666;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  isolation:isolate;
  transition:border-color .15s ease,background .15s ease;
}

.card:hover{
  border-color:#ddd;
}

.card.selected{
  background:linear-gradient(145deg,#9e0000,#ea0000 70%,#740000);
  border-color:#ff4444;
  box-shadow:
    0 0 20px rgba(255,0,0,.7),
    inset 0 0 20px rgba(255,255,255,.08);
}

.card-icon{
  position:relative;
  z-index:4;
  font-size:30px;
  color:#f0f0f0;
}

.card.selected .card-icon{
  color:#fff;
}

.card-check{
  display:none;
}

.card.selected .card-check{
  position:absolute;
  right:3px;
  top:3px;
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  color:#d60000;
  font-size:22px;
  font-weight:900;
  z-index:8;
}

.card-pts{
  position:absolute;
  right:5px;
  bottom:4px;
  font-size:11px;
  color:#ddd;
}

.group-conflict{
  opacity:.78;
}

.group-conflict .card-icon{
  opacity:.35;
}

.conflict-text,
.conflict-mark{
  display:none;
}

.group-conflict .conflict-text{
  display:block;
  position:absolute;
  top:18px;
  left:50%;
  transform:translateX(-50%);
  font-size:15px;
  font-weight:900;
  z-index:8;
}

.group-conflict .conflict-mark{
  display:block;
  position:absolute;
  left:50%;
  top:52%;
  transform:translate(-50%,-50%);
  font-size:28px;
  color:#ff6666;
  z-index:8;
}

.disabled{
  opacity:.35;
  cursor:not-allowed;
}

.lock-mark{
  position:absolute;
  left:5px;
  bottom:4px;
  color:#ffd000;
  font-size:13px;
  z-index:8;
}

.unlockable-card{
  border-color:#d8b000;
}

.key-card{
  border-color:#d8b000;
  box-shadow:0 0 12px rgba(255,210,0,.25);
}

.empty{
  opacity:.18;
  background:rgba(18,18,18,.4);
  border-color:rgba(80,80,80,.18);
  cursor:기본;
}

.connector-only,
.connector-only:hover{
  opacity:1;
  width:72px;
  height:82px;
  align-self:center;
  justify-self:center;
  background:transparent !important;
  border-color:transparent !important;
  box-shadow:none !important;
  cursor:기본;
}

.connector-only .card-x{
  display:none;
}

.card-x::before,
.card-x::after{
  content:"";
  position:absolute;
  width:40px;
  height:2px;
  left:50%;
  top:50%;
  background:rgba(180,180,180,.16);
}

.card-x::before{
  transform:translate(-50%,-50%) rotate(45deg);
}

.card-x::after{
  transform:translate(-50%,-50%) rotate(-45deg);
}

.conn{
  display:none;
  position:absolute;
  pointer-events:none;
  z-index:1;
}

.card.line-top .conn.top{
  display:block;
  left:50%;
  top:-32px;
  width:4px;
  height:32px;
  transform:translateX(-50%);
  background:#9ca4ae;
  box-shadow:0 0 8px rgba(190,200,220,.45);
}

.card.line-bottom .conn.bottom{
  display:block;
  left:50%;
  bottom:-32px;
  width:4px;
  height:32px;
  transform:translateX(-50%);
  background:#9ca4ae;
  box-shadow:0 0 8px rgba(190,200,220,.45);
}

.connector-only .conn.top{
  display:block;
  left:50%;
  top:-38px;
  width:4px;
  height:38px;
  transform:translateX(-50%);
  background:#9ca4ae;
  box-shadow:0 0 8px rgba(190,200,220,.45);
}

.connector-only .conn.bottom{
  display:block;
  left:50%;
  bottom:-38px;
  width:4px;
  height:38px;
  transform:translateX(-50%);
  background:#9ca4ae;
  box-shadow:0 0 8px rgba(190,200,220,.45);
}

.card.line-left .conn.left{
  display:block;
  right:72px;
  top:50%;
  width:40px;
  height:4px;
  transform:translateY(-50%);
  background:#d7af00;
  box-shadow:0 0 10px rgba(255,210,0,.45);
}

.card.line-right .conn.right{
  display:block;
  left:72px;
  top:50%;
  width:40px;
  height:4px;
  transform:translateY(-50%);
  background:#d7af00;
  box-shadow:0 0 10px rgba(255,210,0,.45);
}

.line-active .conn.top,
.line-active .conn.bottom{
  background:#ff2d2d;
  box-shadow:0 0 12px rgba(255,0,0,.8);
}

.line-active .conn.left,
.line-active .conn.right{
  background:#ffd000;
  box-shadow:0 0 12px rgba(255,210,0,.8);
}

.side-panel{
  overflow-y:auto;
  background:rgba(14,14,14,.94);
  border-left:1px solid rgba(255,255,255,.15);
  padding:8px;
}

.panel-header{
  height:38px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 10px;
  background:#eee;
  color:#111;
  font-weight:900;
}

.panel-empty{
  text-align:center;
  color:#888;
  padding-top:70px;
  line-height:1.7;
}

.panel-item{
  margin-top:8px;
  min-height:86px;
  display:grid;
  grid-template-columns:52px 42px 1fr 34px;
  gap:8px;
  background:linear-gradient(90deg,#343434,#222);
  border-left:5px solid #ff7a00;
  padding:8px;
}

.panel-item.tier-3{
  border-left-color:#ff2030;
}

.panel-score{
  height:22px;
  background:#ff7a00;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:900;
}

.panel-item.tier-3 .panel-score{
  background:#ff2030;
}

.panel-icon{
  font-size:28px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.panel-name{
  font-weight:900;
  margin-bottom:5px;
}

.panel-desc{
  color:#aaa;
  font-size:13px;
  line-height:1.35;
}

.panel-del{
  border:0;
  cursor:pointer;
  background:#e7e7e7;
  color:#222;
  font-size:20px;
}

.sim-footer{
  display:grid;
  grid-template-columns:1fr 320px;
  align-items:center;
  padding:0 24px;
  background:linear-gradient(90deg,rgba(10,10,10,.96),rgba(90,20,30,.75),rgba(180,0,20,.96));
}

.warn-text{
  opacity:0;
  visibility:hidden;
  color:#ffd666;
  transition:opacity .2s ease;
}

.warn-text.visible{
  opacity:1;
  visibility:visible;
}

.connector-only.line-top.line-bottom::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -45px;
  bottom: -45px;
  width: 4px;
  transform: translateX(-50%);
  background: #9ca4ae;
  box-shadow: 0 0 8px rgba(190,200,220,.45);
  z-index: 2;
  pointer-events: none;
}

/* 활성 그룹일 때 connector-only 선도 붉게 */
.connector-only.line-active.line-top.line-bottom::before {
  background: #ff2d2d;
  box-shadow: 0 0 12px rgba(255,0,0,.8);
}

/* 기존 위/아래 조각선이 겹쳐서 끊겨 보이지 않게 */
.connector-only .conn.top,
.connector-only .conn.bottom {
  display: none !important;
}

.total-score{
  justify-self:end;
  min-width:280px;
  height:74px;
  border-radius:999px 0 0 999px;
  background:linear-gradient(90deg,rgba(255,160,40,.95),#d60018);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  box-shadow:0 0 30px rgba(255,80,0,.45);
}

.total-label{
  font-size:15px;
}

.total-num{
  font-size:58px;
  font-weight:900;
}

/* =========================
   MOBILE
========================= */

@media (max-width: 900px){

  body{
    overflow:auto;
  }

  .sim-wrapper{
    height:auto;
    min-height:100dvh;
    grid-template-rows:auto auto auto;
  }

  .sim-header{
    padding:12px 14px 10px;
  }

  .small-title{
    font-size:11px;
    margin-bottom:6px;
  }

  .main-title{
    font-size:28px;
    padding-left:14px;
  }

  .main-title::before{
    width:6px;
    height:28px;
  }

  .sim-body{
    display:grid;
    grid-template-columns:minmax(0,1fr) 280px;
  }

  .board-wrap{
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
  }

  .grid-area{
    overflow:visible;
    min-width:max-content;
    padding-bottom:10px;
  }

  .row-wrap{
    grid-template-columns:64px 1fr;
    min-width:1220px;
    height:92px;
    border-bottom:3px solid rgba(120,120,130,.28);
  }

  .row-label{
    gap:4px;
  }

  .tier-num{
    font-size:28px;
  }

  .tier-icon{
    font-size:12px;
  }

  .tier-bar{
    width:5px;
  }

  .cards-row{
    grid-template-columns:repeat(16,52px);
    column-gap:26px;
    padding-left:24px;
  }

  .card{
    width:52px;
    height:64px;
  }

  .connector-only{
    width:52px;
    height:64px;
  }

  .card-icon{
    font-size:22px;
  }

  .card-check{
    width:18px !important;
    height:18px !important;
    font-size:16px !important;
  }

  .card-pts{
    font-size:9px;
  }

  .conflict-text{
    font-size:11px !important;
    top:14px !important;
  }

  .conflict-mark{
    font-size:20px !important;
  }

  .card.line-top .conn.top{
    top:-24px;
    height:24px;
    width:3px;
  }

  .card.line-bottom .conn.bottom{
    bottom:-24px;
    height:24px;
    width:3px;
  }

  .connector-only.line-top.line-bottom::before{
    width:3px;
    top:-28px;
    bottom:-28px;
  }

  .card.line-left .conn.left{
    width:26px;
    right:52px;
    height:3px;
  }

  .card.line-right .conn.right{
    width:26px;
    left:52px;
    height:3px;
  }

  .side-panel{
    width:auto;
    max-height:none;
    border-left:1px solid rgba(255,255,255,.15);
    border-top:none;
    padding:6px;
  }

  .panel-header{
    height:34px;
    font-size:13px;
  }

  .panel-item{
    min-height:72px;
    grid-template-columns:42px 32px 1fr 28px;
    gap:6px;
    padding:6px;
  }

  .panel-score{
    height:18px;
    font-size:11px;
  }

  .panel-icon{
    font-size:20px;
  }

  .panel-name{
    font-size:13px;
  }

  .panel-desc{
    font-size:11px;
  }

  .panel-del{
    font-size:16px;
  }

  .sim-footer{
    grid-template-columns:1fr;
    gap:10px;
    padding:12px;
  }

  .warn-text{
    font-size:12px;
    line-height:1.5;
  }

  .total-score{
    justify-self:stretch;
    min-width:0;
    width:100%;
    height:58px;
    border-radius:18px;
  }

  .total-label{
    font-size:12px;
  }

  .total-num{
    font-size:38px;
  }
}

@media (max-width: 520px){

  .sim-body{
    grid-template-columns:minmax(0,1fr) 220px;
  }

  .side-panel{
    font-size:11px;
  }

  .panel-item{
    grid-template-columns:34px 26px 1fr 24px;
  }

  .panel-icon{
    font-size:18px;
  }

  .panel-score{
    font-size:10px;
  }
}