:root {
  color-scheme: dark;
  --tutorial-bg: #090a0c;
  --tutorial-card: #111417;
  --tutorial-card-hover: #15191d;
  --tutorial-border: #2b3137;
  --tutorial-text: #f4f6f8;
  --tutorial-muted: #a5adb7;
  --tutorial-blue: #76bdff;
  --tutorial-green: #8bdc3f;
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  min-height: 100%;
  background: var(--tutorial-bg);
  color: var(--tutorial-text);
  font-family: Arial, "Noto Sans KR", sans-serif;
}
body { font-size: 15px; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
.tutorial-page {
  width: min(1270px, calc(100% - 64px));
  margin: 0 auto;
  padding: 48px 0 72px;
}
.tutorial-header { margin-bottom: 48px; }
.tutorial-header h1 {
  margin: 0;
  font-size: clamp(32px, 3.4vw, 46px);
  line-height: 1.2;
  letter-spacing: -1.6px;
  font-weight: 850;
}
.tutorial-header p {
  margin: 14px 0 0;
  color: #aeb6c0;
  font-size: 16px;
  line-height: 1.65;
}
.tutorial-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 19px 20px;
}
.tutorial-card {
  min-height: 240px;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-content: start;
  gap: 20px;
  padding: 30px 31px;
  border: 1px solid var(--tutorial-border);
  border-radius: 21px;
  background: var(--tutorial-card);
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.tutorial-card:hover {
  border-color: #46513c;
  background: var(--tutorial-card-hover);
  transform: translateY(-2px);
}
.tutorial-card:nth-child(3n) { border-color: #35412d; }
.tutorial-card-number {
  width: 55px;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #353c43;
  border-radius: 50%;
  background: #1b2025;
  color: var(--tutorial-green);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .4px;
}
.tutorial-card-content { min-width: 0; }
.tutorial-card h2 {
  margin: 3px 0 10px;
  font-size: 25px;
  line-height: 1.3;
  letter-spacing: -.7px;
  font-weight: 800;
}
.tutorial-card p {
  margin: 0;
  color: var(--tutorial-muted);
  font-size: 15px;
  line-height: 1.7;
}
.tutorial-card-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 26px;
  color: var(--tutorial-blue);
  font-size: 14px;
  font-weight: 750;
}
.tutorial-topic-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.tutorial-topic-link {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 7px 10px;
  border: 1px solid #303840;
  border-radius: 8px;
  color: #c8d0d8;
  background: #171c21;
  font-size: 12px;
  line-height: 1.35;
  transition: border-color .18s ease, color .18s ease;
}
.tutorial-topic-link:hover {
  border-color: #659bca;
  color: #fff;
}
.tutorial-loading, .tutorial-error {
  grid-column: 1 / -1;
  color: var(--tutorial-muted);
  line-height: 1.7;
}
@media (max-width: 850px) {
  .tutorial-page { width: min(100% - 36px, 680px); padding-top: 36px; }
  .tutorial-header { margin-bottom: 32px; }
  .tutorial-grid { grid-template-columns: 1fr; gap: 14px; }
  .tutorial-card { min-height: 0; padding: 25px; }
}
@media (max-width: 480px) {
  .tutorial-page { width: calc(100% - 28px); padding-top: 28px; }
  .tutorial-header h1 { font-size: 32px; }
  .tutorial-header p { font-size: 14px; }
  .tutorial-card { grid-template-columns: 48px minmax(0, 1fr); gap: 14px; padding: 20px 17px; border-radius: 16px; }
  .tutorial-card-number { width: 45px; height: 45px; font-size: 14px; }
  .tutorial-card h2 { font-size: 21px; }
  .tutorial-card p { font-size: 13px; }
  .tutorial-card-link { margin-top: 20px; }
}