:root {
  --white: #fff;
  --black: #050505;
  --blue: #10a8ed;
  --green: #19ff00;
  --pink: #ff11cc;
  --line: 1px solid #111;
  --move: 190ms cubic-bezier(.2, .72, .25, 1);
  --menu-font: Arial, "Apple SD Gothic Neo", sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
  color: var(--black);
  font-family: Arial, "Apple SD Gothic Neo", sans-serif;
}

html {
  background: #925615;
}

body {
  padding: clamp(10px, 1.25vw, 20px);
  background: #925615 url("assets/ui/wood-desk.png") center / cover fixed;
}

.state {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.board {
  position: relative;
  min-height: calc(100vh - clamp(20px, 2.5vw, 40px));
  overflow: hidden;
  border: 1px solid #5e3b16;
  background: rgba(255, 253, 247, .94);
  box-shadow: 0 5px 18px rgba(42, 23, 5, .34);
}

/* 작은 미국식 프로그램 명찰 */
.site-meta {
  position: absolute;
  top: 22px;
  left: 28px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "Courier New", monospace;
  font-size: 9px;
  letter-spacing: .04em;
}

.site-meta p {
  margin: 0;
}

.site-meta a {
  padding: 5px 9px 4px;
  border: 1px solid #4a4a46;
  color: #111;
  background: linear-gradient(#fffef9 0%, #ece9df 46%, #aaa69d 48%, #e6e2d8 100%);
  box-shadow: inset 1px 1px #fff, inset -1px -1px #777;
  text-decoration: none;
}

.site-meta a:hover {
  color: #850b08;
  filter: contrast(1.18);
  transform: translate(1px, 1px);
}

/* --------------------------------------------------
   왼쪽 메뉴: 머리 / 몸통 두 개만 사용
-------------------------------------------------- */
.menu-area {
  position: absolute;
  top: 14vh;
  left: 2.4vw;
  z-index: 5;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  transform: rotate(-.25deg);
}

.main-menu,
.category-menu,
.item-menu {
  position: relative;
  color: var(--white);
  background: var(--black);
}

.category-menu,
.item-menu {
  border: 1px solid #aaa;
  color: #111;
  background: linear-gradient(110deg, #eeeeea, #cbc9c2);
}

.main-menu {
  width: 58px;
  min-height: 132px;
  padding: 21px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}

.main-menu label {
  cursor: pointer;
  font-family: var(--menu-font);
  font-size: 25px;
  line-height: 1;
  transition: color var(--move), transform var(--move);
}

.main-menu label:hover {
  transform: scale(1.12);
}

.body-symbol {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.body-symbol span + span {
  margin-top: -11px;
}

#menu-idle:checked ~ .board .main-menu label {
  animation: menu-invite 4.2s steps(1, end) forwards;
}

#menu-idle:checked ~ .board .main-menu:hover label {
  animation: none;
  color: var(--green);
}

@keyframes menu-invite {
  0%, 12%, 28%, 44%, 60% { color: var(--green); }
  13%, 27%, 29%, 43%, 45%, 59%, 61%, 100% { color: var(--white); }
}

#menu-head:checked ~ .board .head-symbol,
#menu-head-hard:checked ~ .board .head-symbol,
#menu-head-soft:checked ~ .board .head-symbol,
#menu-body:checked ~ .board .body-symbol,
#menu-body-hard:checked ~ .board .body-symbol,
#menu-body-soft:checked ~ .board .body-symbol {
  color: var(--green);
}

.category-menu {
  display: none;
  min-width: 138px;
  min-height: 235px;
  padding: 28px 19px;
  font-family: var(--menu-font);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.65;
}

.category-menu::before,
.item-menu::before {
  content: "";
  position: absolute;
  top: 29px;
  left: -16px;
  width: 16px;
  height: 10px;
  background: var(--black);
}

.category-group,
.item-list {
  display: none;
}

.item-menu {
  display: none;
}

#menu-head:checked ~ .board .category-menu,
#menu-head-hard:checked ~ .board .category-menu,
#menu-head-soft:checked ~ .board .category-menu,
#menu-body:checked ~ .board .category-menu,
#menu-body-hard:checked ~ .board .category-menu,
#menu-body-soft:checked ~ .board .category-menu {
  display: block;
}

#menu-head-hard:checked ~ .board .item-menu,
#menu-head-soft:checked ~ .board .item-menu,
#menu-body-hard:checked ~ .board .item-menu,
#menu-body-soft:checked ~ .board .item-menu {
  display: block;
}

#menu-head:checked ~ .board .category-head,
#menu-head-hard:checked ~ .board .category-head,
#menu-head-soft:checked ~ .board .category-head,
#menu-body:checked ~ .board .category-body,
#menu-body-hard:checked ~ .board .category-body,
#menu-body-soft:checked ~ .board .category-body,
#menu-head-hard:checked ~ .board .item-head,
#menu-head-soft:checked ~ .board .item-head,
#menu-body-hard:checked ~ .board .item-body,
#menu-body-soft:checked ~ .board .item-body {
  display: block;
}

.category-group label,
.item-list label {
  display: block;
  width: max-content;
  cursor: pointer;
  transition: transform var(--move), opacity var(--move);
}

.category-group label:hover,
.item-list label:hover {
  opacity: .55;
  transform: translateX(3px);
}

#menu-head-soft:checked ~ .board label[for="menu-head-soft"],
#menu-head-hard:checked ~ .board label[for="menu-head-hard"],
#menu-body-soft:checked ~ .board label[for="menu-body-soft"],
#menu-body-hard:checked ~ .board label[for="menu-body-hard"] {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.item-menu {
  min-width: 186px;
  min-height: 265px;
  padding: 27px 22px;
  font-family: var(--menu-font);
  font-size: 14px;
  line-height: 1.75;
}

.item-list i {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 9px;
  border: 1px solid currentColor;
  transform: rotate(4deg);
}

#head-choice-01:checked ~ .board label[for="head-choice-01"] i,
#head-choice-02:checked ~ .board label[for="head-choice-02"] i,
#head-choice-03:checked ~ .board label[for="head-choice-03"] i,
#head-choice-04:checked ~ .board label[for="head-choice-04"] i,
#head-choice-05:checked ~ .board label[for="head-choice-05"] i,
#head-choice-06:checked ~ .board label[for="head-choice-06"] i,
#head-choice-07:checked ~ .board label[for="head-choice-07"] i,
#head-choice-08:checked ~ .board label[for="head-choice-08"] i,
#head-choice-09:checked ~ .board label[for="head-choice-09"] i,
#head-choice-12:checked ~ .board label[for="head-choice-12"] i,
#body-choice-01:checked ~ .board label[for="body-choice-01"] i,
#body-choice-02:checked ~ .board label[for="body-choice-02"] i,
#body-choice-03:checked ~ .board label[for="body-choice-03"] i,
#body-choice-04:checked ~ .board label[for="body-choice-04"] i,
#body-choice-05:checked ~ .board label[for="body-choice-05"] i,
#body-choice-06:checked ~ .board label[for="body-choice-06"] i,
#body-choice-07:checked ~ .board label[for="body-choice-07"] i,
#body-choice-08:checked ~ .board label[for="body-choice-08"] i,
#body-choice-09:checked ~ .board label[for="body-choice-09"] i,
#body-choice-12:checked ~ .board label[for="body-choice-12"] i {
  background: var(--black);
}

/* --------------------------------------------------
   오른쪽: 현재 선택 중인 파츠 창 하나
-------------------------------------------------- */
.roulette-area {
  position: absolute;
  top: 14vh;
  right: 2.5vw;
  width: 55vw;
  height: clamp(210px, 17vw, 250px);
  display: block;
  transition: opacity var(--move), transform var(--move);
}

.roulette-row {
  position: relative;
  display: none;
  width: 100%;
  height: 100%;
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
  timeline-scope: --part-scroll;
  background: var(--black);
  transition: height var(--move), transform var(--move);
}

#menu-head-hard:checked ~ .board .row-head,
#menu-head-soft:checked ~ .board .row-head,
#menu-body-hard:checked ~ .board .row-body,
#menu-body-soft:checked ~ .board .row-body {
  display: block;
}

.row-body {
  width: 100%;
  margin-left: 0;
}

.part-track {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  gap: 1px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 0;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  visibility: hidden;
  background: #fff;
  border: 1px solid #111;
  scroll-timeline-name: --part-scroll;
  scroll-timeline-axis: inline;
}

#menu-head-hard:checked ~ .board .row-head .part-track,
#menu-head-soft:checked ~ .board .row-head .part-track,
#menu-body-hard:checked ~ .board .row-body .part-track,
#menu-body-soft:checked ~ .board .row-body .part-track {
  visibility: visible;
}

/* 항목이 적은 카테고리도 기차를 움직일 수 있는 빈 레일 */
.part-track::after {
  content: "";
  flex: 0 0 40vw;
}

.part-track::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.part-track::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

.part-track::-webkit-scrollbar-track {
  background:
    linear-gradient(to bottom,
      transparent calc(50% - .5px),
      #111 calc(50% - .5px),
      #111 calc(50% + .5px),
      transparent calc(50% + .5px));
}

.part-track::-webkit-scrollbar-thumb {
  width: 128px;
  min-width: 128px;
  max-width: 128px;
  border: 0;
  background: transparent url("assets/ui/scroll-train.webp") left -9px center / 128px auto no-repeat;
}

/* 실제 스크롤 진행률을 따라 양 끝까지 이동하는 기차 */
.train-rail {
  display: none;
  position: absolute;
  right: -1px;
  bottom: 0;
  left: -1px;
  z-index: 6;
  height: 50px;
  overflow: hidden;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      transparent calc(58% - .5px),
      #111 calc(58% - .5px),
      #111 calc(58% + .5px),
      transparent calc(58% + .5px));
}

.train-rail img {
  position: absolute;
  top: 50%;
  left: -9px;
  width: 128px;
  height: 128px;
  object-fit: contain;
  transform: translateY(-50%);
}

@keyframes train-to-ends {
  from { left: -9px; }
  to { left: calc(100% - 123px); }
}

@supports (animation-timeline: --part-scroll) and (timeline-scope: --part-scroll) {
  .train-rail {
    display: block;
  }

  .train-rail img {
    animation: train-to-ends 1ms linear both;
    animation-timeline: --part-scroll;
  }

  .part-track::-webkit-scrollbar-track,
  .part-track::-webkit-scrollbar-thumb {
    background: transparent;
  }
}

.part-card {
  position: relative;
  flex: 0 0 clamp(170px, 15vw, 220px);
  order: 0;
  height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  background: #f7f7f4;
  cursor: pointer;
  transition: transform var(--move), filter var(--move);
}

.part-card:nth-child(even) {
  transform: none;
}

.part-card:hover {
  z-index: 2;
  transform: scale(1.025) rotate(-.25deg);
  filter: contrast(1.04);
}

.part-card img {
  display: block;
  width: 86%;
  height: 86%;
  margin: auto;
  place-self: center;
  object-fit: contain;
  object-position: center center;
  transform: none;
}

.part-number,
.part-name {
  position: absolute;
  z-index: 2;
  padding: 5px 7px;
  color: #fff;
  background: #000;
  font-family: "Courier New", monospace;
  font-size: 10px;
}

.part-number { top: 10px; left: 10px; }
.part-name { right: 10px; bottom: 10px; }

#head-choice-01:checked ~ .board .part-card[for="head-choice-01"],
#head-choice-02:checked ~ .board .part-card[for="head-choice-02"],
#head-choice-03:checked ~ .board .part-card[for="head-choice-03"],
#head-choice-04:checked ~ .board .part-card[for="head-choice-04"],
#head-choice-05:checked ~ .board .part-card[for="head-choice-05"],
#head-choice-06:checked ~ .board .part-card[for="head-choice-06"],
#head-choice-07:checked ~ .board .part-card[for="head-choice-07"],
#head-choice-08:checked ~ .board .part-card[for="head-choice-08"],
#head-choice-09:checked ~ .board .part-card[for="head-choice-09"],
#head-choice-12:checked ~ .board .part-card[for="head-choice-12"],
#body-choice-01:checked ~ .board .part-card[for="body-choice-01"],
#body-choice-02:checked ~ .board .part-card[for="body-choice-02"],
#body-choice-03:checked ~ .board .part-card[for="body-choice-03"],
#body-choice-04:checked ~ .board .part-card[for="body-choice-04"],
#body-choice-05:checked ~ .board .part-card[for="body-choice-05"],
#body-choice-06:checked ~ .board .part-card[for="body-choice-06"],
#body-choice-07:checked ~ .board .part-card[for="body-choice-07"],
#body-choice-08:checked ~ .board .part-card[for="body-choice-08"],
#body-choice-09:checked ~ .board .part-card[for="body-choice-09"],
#body-choice-12:checked ~ .board .part-card[for="body-choice-12"] {
  order: 0;
  box-shadow: inset 0 0 0 5px var(--blue);
}

/* 카테고리에 맞지 않는 카드만 숨김 */
#menu-head-soft:checked ~ .board .head-track .hard-card,
#menu-head-hard:checked ~ .board .head-track .soft-card,
#menu-body-soft:checked ~ .board .body-track .hard-card,
#menu-body-hard:checked ~ .board .body-track .soft-card,
#menu-head-soft:checked ~ .board .item-head .hard-item,
#menu-head-hard:checked ~ .board .item-head .soft-item,
#menu-body-soft:checked ~ .board .item-body .hard-item,
#menu-body-hard:checked ~ .board .item-body .soft-item {
  display: none;
}

/* Shift + scroll 안내 말풍선 */
.scroll-tip {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 100;
  margin: 0;
  padding: 8px 10px;
  border: var(--line);
  background: #fff;
  color: #111;
  font-family: Arial, sans-serif;
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

.scroll-tip::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 15px;
  width: 8px;
  height: 8px;
  border-right: var(--line);
  border-bottom: var(--line);
  background: #fff;
  transform: rotate(45deg);
}

#menu-head-hard:checked ~ .board .row-head .tip-open,
#menu-head-soft:checked ~ .board .row-head .tip-open,
#menu-body-hard:checked ~ .board .row-body .tip-open,
#menu-body-soft:checked ~ .board .row-body .tip-open {
  animation: open-message 2.5s steps(1, end) both;
}

#menu-head-hard:checked ~ .board .row-head:has(.part-card:hover) .tip-hover,
#menu-head-soft:checked ~ .board .row-head:has(.part-card:hover) .tip-hover,
#menu-body-hard:checked ~ .board .row-body:has(.part-card:hover) .tip-hover,
#menu-body-soft:checked ~ .board .row-body:has(.part-card:hover) .tip-hover {
  animation: short-message 2.5s steps(1, end) both;
}

@keyframes open-message {
  0%, 78% { opacity: 1; visibility: visible; }
  79%, 100% { opacity: 0; visibility: hidden; }
}

@keyframes short-message {
  0%, 78% { opacity: 1; visibility: visible; }
  79%, 100% { opacity: 0; visibility: hidden; }
}

/* --------------------------------------------------
   완성 보기
-------------------------------------------------- */
.final-stage {
  position: absolute;
  top: 10vh;
  right: 2.5vw;
  width: 55vw;
  height: 72vh;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  border: 1px solid #8299a3;
  background:
    radial-gradient(circle at 78% 16%, rgba(255, 253, 204, .72), transparent 23%),
    repeating-linear-gradient(0deg, rgba(44, 78, 91, .035) 0 1px, transparent 1px 4px),
    linear-gradient(165deg, #f2fbff 0%, #d5edf7 58%, #f3e8bd 100%);
  box-shadow: inset 1px 1px rgba(255, 255, 255, .9), inset -1px -1px rgba(70, 94, 105, .35);
  transition: opacity var(--move), transform var(--move);
  transform: translateY(6px);
}

.final-stage > p {
  position: absolute;
  top: 14px;
  left: 18px;
  z-index: 4;
  margin: 0;
  font-family: "Courier New", monospace;
  font-size: 10px;
}

.doll-assembly {
  position: absolute;
  inset: 54px 16% 22px;
}

.preview-head,
.preview-body {
  display: none;
  position: absolute;
  left: 50%;
  width: auto;
  object-fit: contain;
  transform: translateX(-50%);
}

.preview-head {
  top: 1%;
  z-index: 3;
  max-width: 48%;
  height: 49%;
  object-position: center bottom;
}

/* 솜 머리는 몸통과 붙을 수 있도록 완성 화면에서만 살짝 올림 */
.preview-head.head-03,
.preview-head.head-04,
.preview-head.head-05,
.preview-head.head-06,
.preview-head.head-07 {
  transform: translateX(-50%) translateY(-8%);
}

.preview-body {
  bottom: 2%;
  z-index: 1;
  max-width: 64%;
  height: 62%;
  object-position: center top;
}

/* 건담 몸통 보정은 파츠 창이 아니라 완성 보기에서만 적용 */
.preview-body.body-02 {
  transform: translateX(-50%) translateY(calc(-30% - 20px)) scale(1.35);
  transform-origin: center top;
}

/* 미미 몸통의 목선을 머리 아래에 맞춤 */
.preview-body.body-09,
.preview-body.body-12 {
  transform: translateX(-50%) translateY(-8%);
}

#head-choice-01:checked ~ .board .preview-head.head-01,
#head-choice-02:checked ~ .board .preview-head.head-02,
#head-choice-03:checked ~ .board .preview-head.head-03,
#head-choice-04:checked ~ .board .preview-head.head-04,
#head-choice-05:checked ~ .board .preview-head.head-05,
#head-choice-06:checked ~ .board .preview-head.head-06,
#head-choice-07:checked ~ .board .preview-head.head-07,
#head-choice-08:checked ~ .board .preview-head.head-08,
#head-choice-09:checked ~ .board .preview-head.head-09,
#head-choice-12:checked ~ .board .preview-head.head-12,
#body-choice-01:checked ~ .board .preview-body.body-01,
#body-choice-02:checked ~ .board .preview-body.body-02,
#body-choice-03:checked ~ .board .preview-body.body-03,
#body-choice-04:checked ~ .board .preview-body.body-04,
#body-choice-05:checked ~ .board .preview-body.body-05,
#body-choice-06:checked ~ .board .preview-body.body-06,
#body-choice-07:checked ~ .board .preview-body.body-07,
#body-choice-08:checked ~ .board .preview-body.body-08,
#body-choice-09:checked ~ .board .preview-body.body-09,
#body-choice-12:checked ~ .board .preview-body.body-12 {
  display: block;
}

#menu-complete:checked ~ .board .roulette-area {
  opacity: 0;
  visibility: hidden;
  transform: scale(.985);
}

#menu-complete:checked ~ .board .final-stage {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.complete-button {
  position: absolute;
  right: 4.3vw;
  bottom: 3.3vh;
  z-index: 12;
  width: 205px;
  height: 108px;
  border: 2px solid var(--black);
  background: linear-gradient(#fffef7 0%, #f5f1e6 50%, #d0ccc1 51%, #faf7ee 100%);
  box-shadow: inset 1px 1px #fff, inset -2px -2px #777;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--move), filter var(--move);
}

#menu-head:checked ~ .board .complete-button,
#menu-head-hard:checked ~ .board .complete-button,
#menu-head-soft:checked ~ .board .complete-button,
#menu-body:checked ~ .board .complete-button,
#menu-body-hard:checked ~ .board .complete-button,
#menu-body-soft:checked ~ .board .complete-button {
  opacity: .32;
  visibility: visible;
  filter: grayscale(1);
}

body:has(input[name="head-choice"]:checked):has(input[name="body-choice"]:checked) #menu-head:checked ~ .board .complete-button,
body:has(input[name="head-choice"]:checked):has(input[name="body-choice"]:checked) #menu-head-hard:checked ~ .board .complete-button,
body:has(input[name="head-choice"]:checked):has(input[name="body-choice"]:checked) #menu-head-soft:checked ~ .board .complete-button,
body:has(input[name="head-choice"]:checked):has(input[name="body-choice"]:checked) #menu-body:checked ~ .board .complete-button,
body:has(input[name="head-choice"]:checked):has(input[name="body-choice"]:checked) #menu-body-hard:checked ~ .board .complete-button,
body:has(input[name="head-choice"]:checked):has(input[name="body-choice"]:checked) #menu-body-soft:checked ~ .board .complete-button,
body:has(input[name="head-choice"]:checked):has(input[name="body-choice"]:checked) #menu-complete:checked ~ .board .complete-button {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  filter: none;
}

.complete-signal {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  opacity: 0;
  pointer-events: none;
  animation-duration: 2.25s;
  animation-timing-function: steps(1, end);
  animation-iteration-count: 1;
}

body:has(input[name="body-choice"]:checked) #head-choice-01:checked ~ .board .signal-head,
body:has(input[name="head-choice"]:checked) #body-choice-01:checked ~ .board .signal-body { animation-name: ready-01; }
body:has(input[name="body-choice"]:checked) #head-choice-02:checked ~ .board .signal-head,
body:has(input[name="head-choice"]:checked) #body-choice-02:checked ~ .board .signal-body { animation-name: ready-02; }
body:has(input[name="body-choice"]:checked) #head-choice-03:checked ~ .board .signal-head,
body:has(input[name="head-choice"]:checked) #body-choice-03:checked ~ .board .signal-body { animation-name: ready-03; }
body:has(input[name="body-choice"]:checked) #head-choice-04:checked ~ .board .signal-head,
body:has(input[name="head-choice"]:checked) #body-choice-04:checked ~ .board .signal-body { animation-name: ready-04; }
body:has(input[name="body-choice"]:checked) #head-choice-05:checked ~ .board .signal-head,
body:has(input[name="head-choice"]:checked) #body-choice-05:checked ~ .board .signal-body { animation-name: ready-05; }
body:has(input[name="body-choice"]:checked) #head-choice-06:checked ~ .board .signal-head,
body:has(input[name="head-choice"]:checked) #body-choice-06:checked ~ .board .signal-body { animation-name: ready-06; }
body:has(input[name="body-choice"]:checked) #head-choice-07:checked ~ .board .signal-head,
body:has(input[name="head-choice"]:checked) #body-choice-07:checked ~ .board .signal-body { animation-name: ready-07; }
body:has(input[name="body-choice"]:checked) #head-choice-08:checked ~ .board .signal-head,
body:has(input[name="head-choice"]:checked) #body-choice-08:checked ~ .board .signal-body { animation-name: ready-08; }
body:has(input[name="body-choice"]:checked) #head-choice-09:checked ~ .board .signal-head,
body:has(input[name="head-choice"]:checked) #body-choice-09:checked ~ .board .signal-body { animation-name: ready-09; }
body:has(input[name="body-choice"]:checked) #head-choice-12:checked ~ .board .signal-head,
body:has(input[name="head-choice"]:checked) #body-choice-12:checked ~ .board .signal-body { animation-name: ready-12; }

@keyframes ready-01 { 0%, 20%, 40%, 60% { opacity: 1; background: var(--green); } 10%, 30%, 50%, 70% { opacity: 1; background: #000; } 71%, 100% { opacity: 0; } }
@keyframes ready-02 { 0%, 20%, 40%, 60% { opacity: 1; background: var(--green); } 10%, 30%, 50%, 70% { opacity: 1; background: #000; } 71%, 100% { opacity: 0; } }
@keyframes ready-03 { 0%, 20%, 40%, 60% { opacity: 1; background: var(--green); } 10%, 30%, 50%, 70% { opacity: 1; background: #000; } 71%, 100% { opacity: 0; } }
@keyframes ready-04 { 0%, 20%, 40%, 60% { opacity: 1; background: var(--green); } 10%, 30%, 50%, 70% { opacity: 1; background: #000; } 71%, 100% { opacity: 0; } }
@keyframes ready-05 { 0%, 20%, 40%, 60% { opacity: 1; background: var(--green); } 10%, 30%, 50%, 70% { opacity: 1; background: #000; } 71%, 100% { opacity: 0; } }
@keyframes ready-06 { 0%, 20%, 40%, 60% { opacity: 1; background: var(--green); } 10%, 30%, 50%, 70% { opacity: 1; background: #000; } 71%, 100% { opacity: 0; } }
@keyframes ready-07 { 0%, 20%, 40%, 60% { opacity: 1; background: var(--green); } 10%, 30%, 50%, 70% { opacity: 1; background: #000; } 71%, 100% { opacity: 0; } }
@keyframes ready-08 { 0%, 20%, 40%, 60% { opacity: 1; background: var(--green); } 10%, 30%, 50%, 70% { opacity: 1; background: #000; } 71%, 100% { opacity: 0; } }
@keyframes ready-09 { 0%, 20%, 40%, 60% { opacity: 1; background: var(--green); } 10%, 30%, 50%, 70% { opacity: 1; background: #000; } 71%, 100% { opacity: 0; } }
@keyframes ready-12 { 0%, 20%, 40%, 60% { opacity: 1; background: var(--green); } 10%, 30%, 50%, 70% { opacity: 1; background: #000; } 71%, 100% { opacity: 0; } }

.complete-button:hover .complete-signal {
  animation: none !important;
  opacity: 0;
}

.complete-button span {
  position: absolute;
  left: 14px;
  top: 42px;
  z-index: 3;
  font-family: var(--menu-font);
  font-size: 24px;
  white-space: nowrap;
}

.complete-button span::after {
  content: "";
  position: absolute;
  right: -27px;
  bottom: -5px;
  left: -5px;
  height: 1px;
  background: #111;
}

.complete-button img {
  position: absolute;
  top: 2px;
  right: 2px;
  z-index: 2;
  width: 104px;
  height: 104px;
  object-fit: cover;
  mix-blend-mode: multiply;
  transition: transform var(--move);
}

.complete-button:hover img {
  transform: rotate(-8deg) scale(1.06);
}

.complete-button::after,
.complete-button::before {
  position: absolute;
  z-index: 14;
  pointer-events: none;
  opacity: 0;
}

.complete-button::after {
  content: "새로운 내 모습!\A캡처해서 소장하세요!";
  right: 5px;
  bottom: calc(100% + 14px);
  width: 180px;
  padding: 10px 11px;
  border: var(--line);
  background: #fff;
  font-size: 11px;
  line-height: 1.4;
  white-space: pre-line;
}

.complete-button::before {
  content: "";
  right: 28px;
  bottom: calc(100% + 9px);
  width: 9px;
  height: 9px;
  border-right: var(--line);
  border-bottom: var(--line);
  background: #fff;
  transform: rotate(45deg);
}

.complete-button:hover::after,
.complete-button:hover::before,
#menu-complete:checked ~ .board .complete-button::after,
#menu-complete:checked ~ .board .complete-button::before {
  animation: short-message 3s ease both;
}

/* --------------------------------------------------
   중간 화면과 모바일
-------------------------------------------------- */
@media (min-width: 801px) and (max-width: 1200px) {
  .menu-area { left: 3vw; }
  .category-menu { min-width: 125px; padding-inline: 18px; }
  .item-menu { min-width: 155px; padding-inline: 17px; }
  .roulette-area { width: 51vw; }
}

@media (max-width: 800px) {
  .board {
    min-height: 1280px;
    overflow: visible;
  }

  .site-meta {
    top: 12px;
    left: 14px;
  }

  .menu-area {
    top: 36px;
    left: 20px;
    right: 20px;
    gap: 10px;
    transform: none;
  }

  .main-menu { width: 52px; }
  .category-menu { min-width: 112px; padding-inline: 16px; }
  .item-menu { flex: 1; min-width: 0; padding-inline: 15px; }

  .roulette-area {
    top: 385px;
    left: 20px;
    right: 0;
    width: auto;
    height: 215px;
  }

  .row-body {
    width: 100%;
    margin-left: 0;
  }

  .part-card {
    flex-basis: min(44vw, 180px);
  }

  .final-stage {
    top: 370px;
    width: 100%;
    height: 650px;
  }

  .preview-head { top: 7%; max-width: 65%; height: 43%; }
  .preview-body { bottom: 3%; max-width: 88%; height: 63%; }

  .complete-button {
    right: 20px;
    bottom: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }

  .scroll-tip {
    animation-duration: 2.5s !important;
    animation-timing-function: steps(1, end) !important;
  }
}