:root {
  --sakura-bg: #fbf7f8;
  --sakura-tint: #f4e3e7;
  --sakura-line: #f0dde2;
  --sakura-accent: #ffb7c5;
  --sakura-deep: #99566a;
  --navy: #2b3a55;
  --screen: #14161a;
  --card: #ffffff;
  --text: #4a4a4a;
  --text-mute: #767676;
  --text-faint: #949494;
  --hairline: #f4f0f1;
  --radius: 12px;
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Hiragino Sans", "Noto Sans JP", sans-serif;
  --font-mono: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 48px 20px 72px;
  background: var(--sakura-bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 860px; margin: 0 auto; }

.card {
  background: var(--card);
  border: 1px solid var(--sakura-line);
  border-radius: var(--radius);
  padding: 24px 28px;
}

.eyebrow {
  margin: 40px 0 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sakura-deep);
}

h1, h2, h3 { color: var(--navy); font-weight: 600; }

a { color: inherit; }

/* ---------- hero ---------- */

.hero { display: flex; gap: 28px; align-items: center; }

.hero-photo {
  width: 108px;
  height: 136px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 10px;
  border: 3px solid var(--sakura-accent);
  background: var(--sakura-tint);
}

.hero-name { margin: 0; font-size: 26px; line-height: 1.3; }
.hero-role { margin: 6px 0 0; font-size: 14px; color: var(--text-mute); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }

.chip {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 5px;
  background: #f1efe8;
  color: #444441;
}

/* ---------- project ---------- */

.project { padding: 0; overflow: hidden; margin-bottom: 14px; }
.project-inner { display: flex; align-items: stretch; }

.project-shot {
  flex: 0 0 50%;
  align-self: stretch;
  min-height: 200px;
  background: var(--screen);
  display: flex;
  align-items: center;
  justify-content: center;
}

.project-shot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.project-body {
  padding: 20px 24px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }

.badge {
  font-size: 12px;
  padding: 3px 9px;
  border-radius: 5px;
  font-weight: 500;
}

.badge-steam  { background: #e6f1fb; color: #0c447c; }
.badge-free   { background: #e1f5ee; color: #085041; }
.badge-puzzle { background: #eeedfe; color: #3c3489; }

.badge-makerthon { background: #fbeaf0; color: #72243e; }
.badge-msw       { background: #faeeda; color: #633806; }
.badge-life      { background: #e3f1f7; color: #17546f; }
.badge-pending { background: #faeeda; color: #633806; font-weight: 400; }
.badge-score   { background: #e1f5ee; color: #085041; font-weight: 400; }

.project-title { margin: 0; font-size: 19px; }
.project-title span { font-size: 13px; font-weight: 400; color: var(--text-faint); margin-left: 6px; }
.project-desc { margin: 8px 0 0; font-size: 13.5px; line-height: 1.65; color: #616161; }

.project-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 11px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-mute);
}

.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

.btn {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 6px;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-navy { background: var(--navy); color: #fff; border: 1px solid var(--navy); }
.btn-plain { background: #fff; color: #333; border: 1px solid #ddd; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 5px 14px rgba(0, 0, 0, 0.07); }

/* ---------- certifications ---------- */

.cert-card { padding: 8px 28px 18px; }
.cert-group { margin: 18px 0 0; font-size: 12px; color: var(--text-faint); }

.cert {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--hairline);
}

.cert:last-child { border-bottom: none; }
.cert-main { flex: 1; min-width: 0; }
.cert-name { margin: 0; font-size: 15px; font-weight: 600; color: var(--navy); }
.cert-sub { margin: 2px 0 0; font-size: 13px; color: var(--text-mute); }

.cert-date {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-faint);
}

.cert-mark {
  flex-shrink: 0;
  width: 30px;
  text-align: center;
  font-size: 17px;
  color: var(--navy);
}

.cert-mark.is-pending { color: #b0aca4; }

/* ---------- archive + footer ---------- */

.archive { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.archive-avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--sakura-tint); }
.archive-main { flex: 1; min-width: 170px; }
.archive-title { margin: 0; font-size: 15px; font-weight: 600; color: var(--navy); }
.archive-sub { margin: 3px 0 0; font-size: 13px; color: var(--text-mute); }

.footer {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid var(--sakura-line);
  font-size: 13px;
}

.footer a { color: #0066cc; text-decoration: none; }
.footer a:hover { text-decoration: underline; }

/* ---------- guide page ---------- */

.back-link {
  display: inline-block;
  margin-bottom: 18px;
  font-size: 13px;
  font-weight: 600;
  color: #d63384;
  text-decoration: none;
}

.guide-title {
  margin: 0 0 28px;
  font-size: 24px;
  border-left: 6px solid var(--sakura-accent);
  padding-left: 15px;
}

.station { margin-bottom: 34px; }
.station:last-of-type { margin-bottom: 24px; }

.station-info {
  background: #fdfafb;
  padding: 20px 22px;
  border: 1px solid var(--sakura-line);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
}

.station-info h2 { margin: 0 0 6px; font-size: 16px; color: #d63384; }
.station-info p { margin: 0; font-size: 14px; }
.station-note { font-size: 13px; color: var(--text-mute); }

.map {
  height: 330px;
  border: 1px solid var(--sakura-line);
  border-radius: 0 0 var(--radius) var(--radius);
  overflow: hidden;
}

.map iframe { width: 100%; height: 100%; border: 0; display: block; }

.line-mark { width: 15px; height: 15px; vertical-align: -2px; }

.tip {
  background: var(--navy);
  color: #fff;
  padding: 20px 22px;
  border-radius: var(--radius);
  font-size: 14px;
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  body { padding: 32px 14px 56px; }
  .card { padding: 20px 18px; }
  .cert-card { padding: 6px 18px 14px; }
  .hero { flex-direction: column; text-align: center; gap: 18px; }
  .chips { justify-content: center; }
  .project-inner { flex-direction: column; }
  .project-shot { flex: none; width: 100%; min-height: 0; }
  .project-body { padding: 20px 18px; }
  .cert { flex-wrap: wrap; }
  .cert-date { width: 100%; padding-left: 44px; }
  .map { height: 260px; }
  .footer { gap: 14px; }
}

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

a:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}