@import url("https://fonts.googleapis.com/css2?family=Clash+Display:wght@500;600;700&family=SUIT:wght@400;500;600;700;800&display=swap");

:root{
  --bg:#090c12;
  --card:#121621;
  --text:#eef2f7;
  --muted:#a7afbd;
  --line:#1e2635;
  --primary:#66b1ff;
  --primary2:#3b6bff;
  --accent:#ffb347;
  --danger:#ff4d6d;
  --ok:#18d39e;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: "SUIT", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Apple SD Gothic Neo", "Noto Sans KR", Arial, sans-serif;
  background:
    radial-gradient(1200px 700px at 8% 8%, rgba(102,177,255,0.25) 0%, rgba(102,177,255,0) 60%),
    radial-gradient(900px 500px at 92% 18%, rgba(255,179,71,0.18) 0%, rgba(255,179,71,0) 55%),
    radial-gradient(900px 600px at 50% 120%, rgba(24,211,158,0.14) 0%, rgba(24,211,158,0) 60%),
    var(--bg);
  color:var(--text);
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0 2px, rgba(255,255,255,0) 2px 10px);
  opacity:0.25;
  pointer-events:none;
}

.wrap{
  max-width: 720px;
  padding: 28px 18px 40px;
  margin: 0 auto;
}

.top,
.card,
.foot{
  animation: fadeUp 650ms ease-out both;
}
.card{ animation-delay: 70ms; }
.foot{ animation-delay: 140ms; }
@keyframes fadeUp{
  0%{ transform: translateY(10px); opacity:0; }
  100%{ transform: translateY(0); opacity:1; }
}

.top{ margin: 10px 2px 18px; }
.brand{
  font-family: "Clash Display", "SUIT", sans-serif;
  font-weight: 700;
  letter-spacing: 1px;
  font-size: 20px;
  opacity: .98;
}
.sub{
  margin-top: 6px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}

.card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
  border-radius: 22px;
  padding: 22px 18px;
  position: relative;
  overflow: hidden;
}
.card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(520px 180px at 10% 0%, rgba(102,177,255,0.18), transparent 60%),
    radial-gradient(520px 200px at 90% 10%, rgba(255,179,71,0.12), transparent 60%);
  pointer-events:none;
}

.step{ display:none; }
.step.active{ display:block; }

h1{
  margin: 0 0 16px;
  font-size: 24px;
  font-family: "Clash Display", "SUIT", sans-serif;
  letter-spacing: 0.2px;
}

.label{
  display:block;
  margin: 10px 2px 8px;
  color: var(--muted);
  font-size: 13px;
}

.input{
  width:100%;
  padding: 14px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  outline:none;
  background: rgba(8,12,18,.55);
  color: var(--text);
  font-size: 15px;
}
.input.typing{
  border-color: rgba(255,179,71,0.75);
  box-shadow: 0 0 0 4px rgba(255,179,71,0.18);
}
.input:focus{
  border-color: rgba(102,177,255,.75);
  box-shadow: 0 0 0 4px rgba(102,177,255,.18);
}

.row{
  display:flex;
  gap:10px;
  margin-top: 14px;
  justify-content:flex-end;
}
.row.space{ justify-content:space-between; }

.btn{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--text);
  padding: 12px 14px;
  border-radius: 14px;
  cursor:pointer;
  font-weight: 700;
  min-width: 110px;
}
.btn{
  position: relative;
  overflow: hidden;
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease, filter .2s ease;
}
.btn::after{
  content:"";
  position:absolute;
  inset:-60% -20%;
  background: radial-gradient(200px 60px at 20% 20%, rgba(255,255,255,0.35), transparent 60%);
  opacity:0;
  transform: rotate(-6deg);
  transition: opacity .2s ease;
}
.btn:hover::after{ opacity:0.6; }
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(1px) scale(0.99); }
.btn.primary{
  animation: tagPulse 4s ease-in-out infinite;
}
@keyframes tagPulse{
  0%,100%{ filter: brightness(1); }
  50%{ filter: brightness(1.08); }
}
.btn:hover{ border-color: rgba(255,255,255,.22); }
.btn:active{ transform: translateY(1px); }
.btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(102,177,255,0.35);
}

.btn.primary{
  background: linear-gradient(180deg, var(--primary), var(--primary2));
  border-color: rgba(102,177,255,.55);
  box-shadow: 0 8px 22px rgba(59,107,255,0.35);
}
.btn.primary:hover{
  filter: brightness(1.03);
}

.hint{
  margin: 12px 2px 0;
  color: var(--muted);
  font-size: 13px;
}

.pill{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(8,12,18,.55);
  border: 1px solid rgba(255,255,255,.12);
  margin-bottom: 14px;
}
.pill-label{ color: var(--muted); font-size: 12px; }
.pill-value{ font-weight: 800; }
.pill-action{
  margin-left:auto;
  border: 0;
  background: transparent;
  color: rgba(102,177,255,.95);
  cursor:pointer;
  font-weight: 800;
}
.pill-action:hover{ text-decoration: underline; }

.msg{
  margin-top: 12px;
  font-size: 14px;
  color: var(--muted);
  min-height: 20px;
}
.msg.ok{ color: var(--ok); }
.msg.bad{ color: var(--danger); }

.mini{
  margin-top: 12px;
  color: var(--muted);
  font-size: 13px;
}
.mini summary{ cursor:pointer; }
.mini code{
  background: rgba(0,0,0,.25);
  padding: 2px 6px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.08);
}

.foot{
  margin-top: 14px;
  color: rgba(255,255,255,.35);
  font-size: 12px;
  text-align:center;
}

.board-wrap{
  margin-top: 16px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(8,12,18,.55);
}

.board-iframe{
  width: 100%;
  height: 520px;   /* 상황판 높이 */
  border: 0;
  display: block;
}

/* mobile: board 영역을 화면에 맞게 더 크게 */
@media (max-width: 520px){
  .board-iframe{
    height: 70vh;         /* 520px 고정 대신 화면 비율 */
    min-height: 520px;    /* 너무 작아지는 건 방지 */
  }
}

.toggle-board-btn{
  width: 100%;
  margin: 12px 0;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
  color: #fff;
  font-size: 14px;
}

.board-wrap{
  transition: height .25s ease, opacity .25s ease;
}

/* 기본 펼침 */
.board-wrap.open{
  height: 740px;   /* ← 지금 쓰는 iframe 높이 */
  opacity: 1;
}

/* 접힘 */
.board-wrap.closed{
  height: 0;
  opacity: 0;
  overflow: hidden;
}


.mylist{
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.myitem{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  border-radius: 14px;
  padding: 12px 12px;
}

.myitem.muted{
  color: var(--muted);
}

.myline{
  display:flex;
  gap:10px;
  align-items:flex-start;
}

.mytitle{
  flex:1;
  font-weight: 800;
  line-height: 1.25;
  word-break: break-word;
}

.mymeta{
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}

.mydel{
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,77,109,.10);
  color: var(--danger);
  padding: 8px 10px;
  border-radius: 12px;
  cursor:pointer;
  font-weight: 900;
  white-space: nowrap;
}
.mydel:active{ transform: translateY(1px); }