:root {
  --modal-w: 1100;
  --modal-h: 747;
  --modal-header-h: 56px;
  --modal-controls-h: 72px;
  --brand: #0b63f6;
}

html, body { height: 100%; margin: 0; }
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans KR", Arial, sans-serif;
  display: grid;
  place-items: center;
  background: #f7f7f9;
  color: #111;
}
.category-section:nth-child(12){
  display: none;
}

.btn {
  appearance: none;
  border: 0;
  border-radius: 10px;
  padding: 14px 22px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: var(--brand);
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(11, 99, 246, 0.3);
  transition: transform .05s ease, box-shadow .2s ease, opacity .2s;
}
.btn:active { transform: translateY(1px); box-shadow: 0 3px 10px rgba(11,99,246,0.25); }

.backdrop {
  position: fixed;
  inset: 0;
  background: #EDF1FC;
  display: none;
  opacity: 0;
  transition: opacity .18s ease;
  z-index: 1000;
}
.backdrop.open { display: grid; place-items: center; opacity: 1; }

.modal {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  overflow: visible;
  position: relative;
  display: flex;
  flex-direction: column;

  /* 콘텐츠 영역(헤더/컨트롤 제외)이 1100x747 비율을 유지하며 90vw 또는 84vh 한계에 맞춰 축소 */
  width: min(
    1100px,
    90vw,
    calc((84vh - var(--modal-header-h) - var(--modal-controls-h)) * (var(--modal-w) / var(--modal-h)))
  );
  max-width: min(1100px, 90vw);
  max-height: 84vh;
  transform: scale(.98);
  transition: transform .18s ease, opacity .18s ease;
}
.backdrop.open .modal { transform: none; }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #fbfbfc;
  border-bottom: 1px solid #eee;
}
.modal-title { font-weight: 700; font-size: 16px; }
.close {
  appearance: none;
  border: 0;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  cursor: pointer;
}
.close:hover { background: #f0f2f5; }

.modal-body {
  position: relative;
  width: 100%;
  aspect-ratio: calc(var(--modal-w) / var(--modal-h));
  max-height: min(747px, calc(84vh - var(--modal-header-h) - var(--modal-controls-h)));
  background: #000;
  overflow: visible;
}

.tutorial-contents {
  position: relative;
  width: 100%;
  height: 100%;
}

.modal-body .background-img,
.modal-body .black-out,
.modal-body .button-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.modal-body .background-img { z-index: 50; }
.modal-body .black-out {
  z-index: 150;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s ease;
}
.modal-body .black-out.visible { opacity: 1; }
.modal-body .black-out img,
.modal-body .background-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tutorial-contents .step {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}
.tutorial-contents .step.active {
  opacity: 1;
  pointer-events: auto;
}
.tutorial-contents .black-out .step.active { pointer-events: none; }
.tutorial-contents .background-img .step[data-step-type="scroll"] img {
  transition: object-position .35s ease;
}
.tutorial-contents .background-img .step[data-step-type="scroll"][data-scroll-role="start"] img {
  object-position: top center;
}
.tutorial-contents .background-img .step[data-step-type="scroll"][data-scroll-role="end"] img {
  object-position: bottom center;
}
.tutorial-contents .background-img .step[data-position="top"] img {
  object-position: top center;
}
.tutorial-contents .background-img .step[data-scroll-role="end"] {
  z-index: 51;
}
.tutorial-contents .background-img .step[data-step="10"] {
  z-index: 100;
}
.tutorial-contents .background-img .step[data-step="final"] {
  z-index: 100;
}

.modal-body .button-container { z-index: 350; }
.modal-body .button-container .step {
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-body .button-container .step:not(.active) { pointer-events: none; }
.modal-body .button-container .step button {
  position: absolute;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.step-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 18px 20px;
  background: #fff;
  border-top: 1px solid #e9ecf3;
  position: relative;
  z-index: 1200;
}
.step-controls.is-hidden { display: none; }
.step-progress-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 50%;
  min-width: 240px;
}
.step-controls .step-progress {
  flex: 1 1 auto;
}
.step-progress__track {
  position: relative;
  width: 100%;
  height: 12px;
  border-radius: 999px;
  background: #dfe3f0;
  overflow: visible;
}
.step-progress__fill {
  position: absolute;
  inset: 0;
  height: 100%;
  border-radius: inherit;
  width: 0%;
  background: #735cff;
  transition: width .25s ease;
}
.step-controls .step-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #d0d5dd;
  background: #fff;
  color: #4a5568;
  font-size: 18px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border .2s ease;
}
.step-controls .step-btn:hover {
  background: #f3f6ff;
  color: var(--brand);
  border-color: rgba(11, 99, 246, 0.5);
}

/* 접근성 보조 */
.backdrop[aria-hidden="true"] { pointer-events: none; }