/* ─────────────────────────────────────────────
   LEESIV — 공통 스타일
   simsim 과 같은 계열(두꺼운 테두리 + 각진 그림자)이지만
   배경을 어둡게 해서 "모아두는 곳" 느낌을 줍니다.
   색을 바꾸려면 아래 :root 만 고치면 됩니다.
   ───────────────────────────────────────────── */

:root{
  --bg:#131320;
  --ink:#16110C;
  --cream:#F5F1E8;
  --card:#FFFFFF;

  /* simsim 과 같은 강조색 — 형제 사이트처럼 보이게 */
  --pink:#FF4D9D;
  --yellow:#FFD93D;
  --blue:#3D7BFF;
  --mint:#25D6A4;
  --purple:#C9A7EB;
  --orange:#FFB067;

  --line:4px solid var(--ink);
  --shadow:7px 7px 0 var(--cream);
}

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

body{
  font-family:'Noto Sans KR',-apple-system,BlinkMacSystemFont,sans-serif;
  background-color:var(--bg);
  background-image:radial-gradient(rgba(245,241,232,.13) 1.2px, transparent 1.2px);
  background-size:24px 24px;
  color:var(--cream);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:760px;margin:0 auto;padding:22px 18px 70px}

/* ── 맨 위 줄 ─────────────────────────── */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:30px}
.logo{
  font-family:'Black Han Sans',sans-serif;font-size:20px;letter-spacing:1px;
  color:var(--ink);background:var(--yellow);
  border:var(--line);border-radius:999px;
  padding:6px 18px;box-shadow:3px 3px 0 var(--cream);
  text-decoration:none;display:inline-block;
}
.count{font-size:12px;font-weight:700;opacity:.55}

/* ── 첫 화면 ──────────────────────────── */
.hero{padding:16px 0 8px}
.eyebrow{
  display:inline-block;font-size:12px;font-weight:900;letter-spacing:1px;
  background:var(--cream);color:var(--ink);
  padding:4px 13px;border-radius:999px;margin-bottom:16px;
}
h1{
  font-family:'Black Han Sans',sans-serif;font-weight:400;
  font-size:clamp(34px,10vw,58px);line-height:1.1;letter-spacing:-1.5px;
}
.hl{background:linear-gradient(transparent 58%, var(--pink) 58%, var(--pink) 92%, transparent 92%)}
.sub{margin-top:14px;font-size:14.5px;font-weight:500;opacity:.7;max-width:44ch}

/* 쓰는 도구 몇 개 — 장식용 */
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px}
.chip{
  font-size:11.5px;font-weight:700;letter-spacing:.3px;
  border:2px solid rgba(245,241,232,.35);border-radius:999px;
  padding:3px 11px;opacity:.75;
}

/* ── 구역 제목 ────────────────────────── */
.section-label{
  display:flex;align-items:center;gap:12px;
  margin:44px 0 16px;font-size:13px;font-weight:900;letter-spacing:1px;
}
.section-label::after{content:"";flex:1;height:3px;background:var(--cream);opacity:.5}

/* ── 프로젝트 카드 ────────────────────── */
.grid{display:grid;gap:15px}

.card{
  display:flex;align-items:flex-start;gap:14px;
  background:var(--card);color:var(--ink);
  border:var(--line);border-radius:20px;
  padding:16px;box-shadow:var(--shadow);
  text-decoration:none;
  transition:transform .1s ease, box-shadow .1s ease;
}
.card:hover{transform:translate(4px,4px);box-shadow:3px 3px 0 var(--cream)}
.card:focus-visible{outline:4px solid var(--blue);outline-offset:4px}

/* 카드마다 그림자 색을 달리 줍니다 */
.sh-pink{box-shadow:7px 7px 0 var(--pink)}
.sh-pink:hover{box-shadow:3px 3px 0 var(--pink)}
.sh-mint{box-shadow:7px 7px 0 var(--mint)}
.sh-mint:hover{box-shadow:3px 3px 0 var(--mint)}
.sh-blue{box-shadow:7px 7px 0 var(--blue)}
.sh-blue:hover{box-shadow:3px 3px 0 var(--blue)}
.sh-yellow{box-shadow:7px 7px 0 var(--yellow)}
.sh-yellow:hover{box-shadow:3px 3px 0 var(--yellow)}

.thumb{
  flex:0 0 54px;height:54px;border:3px solid var(--ink);border-radius:16px;
  display:grid;place-items:center;font-size:27px;
}
.i-pink{background:var(--pink)}     .i-yellow{background:var(--yellow)}
.i-blue{background:var(--blue)}     .i-mint{background:var(--mint)}
.i-purple{background:var(--purple)} .i-orange{background:var(--orange)}

.card .body{flex:1;min-width:0}
.card .row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.card h2{font-family:'Black Han Sans',sans-serif;font-weight:400;font-size:19px;letter-spacing:-.5px}
.card p{font-size:13px;font-weight:500;opacity:.72;margin-top:4px}
.host{
  display:inline-block;margin-top:9px;font-size:11.5px;font-weight:700;
  opacity:.5;word-break:break-all;
}
.arrow{align-self:center;font-size:22px;font-weight:900;opacity:.3}

/* ── 상태 배지 ────────────────────────── */
.badge{
  font-size:10.5px;font-weight:900;letter-spacing:.5px;
  border:2px solid var(--ink);border-radius:999px;padding:1px 9px;white-space:nowrap;
}
.badge.live{background:var(--mint)}
.badge.soon{background:var(--cream);opacity:.7}

/* 아직 안 열린 프로젝트 — 링크가 아니라 그냥 칸 */
.card.pending{cursor:default}
.card.pending:hover{transform:none;box-shadow:var(--shadow)}
.card.pending .arrow{display:none}

/* 다음 프로젝트 자리 — 점선 */
.slot{
  border:4px dashed rgba(245,241,232,.3);border-radius:20px;
  padding:22px 16px;text-align:center;
  font-size:13px;font-weight:700;opacity:.45;
}

/* ── 맨 아래 ──────────────────────────── */
footer{margin-top:56px;font-size:12.5px;opacity:.5;text-align:center;line-height:1.9}
footer a{color:inherit;text-decoration:underline;text-underline-offset:3px}

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