/* dokomade.muda.club と同じテイスト：丸い文字、水色の背景、ピンクのアクセント、シールのような影 */
:root {
  --sky: #e8f3fb;       /* 背景 */
  --paper: #ffffff;     /* カード */
  --ink: #2d3a5a;       /* 文字 */
  --muted: #6a7796;
  --edge: #c9d9ea;      /* 枠とシール影 */
  --pink: #ef5f86;      /* 主役 */
  --pink-soft: #ffe3eb;
  --mint: #33b38c;
  --mint-soft: #d9f4ea;
  --sun: #f2b33d;
  --sun-soft: #fff1cf;
  --font-pop: "Mochiy Pop One", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  --font-body: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sky: #1b2240; --paper: #273055; --ink: #f1f3ff; --muted: #a7b0d4; --edge: #3b4675;
    --pink: #ff86a7; --pink-soft: #4a2e48; --mint: #5fd3ad; --mint-soft: #234a48;
    --sun: #ffcf66; --sun-soft: #4a3f2a; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --sky: #1b2240; --paper: #273055; --ink: #f1f3ff; --muted: #a7b0d4; --edge: #3b4675;
  --pink: #ff86a7; --pink-soft: #4a2e48; --mint: #5fd3ad; --mint-soft: #234a48;
  --sun: #ffcf66; --sun-soft: #4a3f2a; color-scheme: dark;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--sky);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.75;
}
.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding-block: 20px 56px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  display: grid;
  gap: 28px;
}
a { color: var(--pink); font-weight: 700; }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }

.top { display: flex; align-items: center; }
.logo { margin: 0; font-family: var(--font-pop); font-size: 20px; color: var(--pink); }

/* 大きなカード */
.hero {
  background: var(--paper);
  border: 2px solid var(--edge);
  border-radius: 28px;
  box-shadow: 0 6px 0 var(--edge);
  padding: 28px clamp(18px, 5vw, 40px) 32px;
  display: grid;
  gap: 12px;
  position: relative;
  overflow: hidden;
}
/* 右上の水玉 */
.hero::after {
  content: ""; position: absolute; right: -36px; top: -36px; width: 140px; height: 140px;
  border-radius: 50%; background: var(--pink-soft);
}
.hero > * { position: relative; z-index: 1; }
.kicker { margin: 0; font-family: var(--font-pop); color: var(--pink); font-size: 14px; }
.hero h1 {
  margin: 0;
  font-family: var(--font-pop);
  font-weight: 400;
  font-size: clamp(30px, 8vw, 44px);
  line-height: 1.3;
}
.lead { margin: 0; color: var(--muted); max-width: 32em; }

/* 道具の一覧 */
.sites { display: grid; gap: 14px; }
.sites h2 { margin: 0; font-family: var(--font-pop); font-weight: 400; font-size: 18px; }
.site-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.site {
  display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center;
  background: var(--paper); border: 2px solid var(--edge); border-radius: 22px;
  box-shadow: 0 5px 0 var(--edge);
  padding: 16px 18px;
  text-decoration: none; color: var(--ink); font-weight: 500;
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
a.site:hover { border-color: var(--pink); transform: translateY(-2px); box-shadow: 0 7px 0 var(--edge); }
a.site:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--edge); }
.site-icon {
  width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center;
  font-size: 26px; background: var(--sky);
}
.site-body { display: grid; gap: 4px; min-width: 0; }
.site-name { font-family: var(--font-pop); font-size: 19px; color: var(--pink); line-height: 1.4; }
.site-desc { font-size: 14px; color: var(--muted); line-height: 1.6; }
.site-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.site-tags span { font-size: 12px; padding: 1px 10px; border-radius: 999px; background: var(--mint-soft); }
.site-go { font-family: var(--font-pop); font-size: 22px; color: var(--pink); }
.site.soon { border-style: dashed; box-shadow: none; background: transparent; }
.site.soon .site-name { color: var(--muted); }
.site.soon .site-icon { background: var(--paper); }

.foot { font-size: 12px; color: var(--muted); }
.foot p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .site { transition: none; }
}