@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

:root {
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #fff;
  background: #000;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
button { font: inherit; cursor: pointer; }
.app { position: relative; width: 100%; height: 100dvh; min-height: 420px; overflow: hidden; background: #000; }
.screen { position: absolute; inset: 0; overflow: hidden; background: #000; opacity: 0; visibility: hidden; transition: opacity .55s ease, visibility .55s; }
.screen.is-active { opacity: 1; visibility: visible; }

.tile-field { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.tile { position: absolute; top: 0; left: 0; width: var(--tile-size); height: var(--tile-size); object-fit: contain; aspect-ratio: 1; transform-origin: center; will-change: transform; user-select: none; }

.brand { position: absolute; z-index: 10; top: clamp(26px, 3.4vw, 54px); left: clamp(25px, 3.5vw, 56px); text-align: left; }
.brand-home { display: block; margin: 0; padding: 0; border: 0; background: none; line-height: 0; }
.brand-logo { display: block; width: clamp(86px, 8vw, 130px); height: auto; filter: invert(1); }
.brand p { margin: 9px 0 0; padding: 0; font-size: 12px; line-height: 1.2; letter-spacing: .015em; font-weight: 500; text-align: left; }
.brand-home:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }

.intro-copy { position: absolute; z-index: 10; top: 27%; left: clamp(25px, 3.5vw, 56px); text-align: left; pointer-events: none; }
.eyebrow { margin: 0 0 18px; font-size: clamp(10px, .85vw, 13px); letter-spacing: .09em; font-weight: 600; }
.eyebrow span { margin-left: 12px; opacity: .55; }
.intro-copy h1 { margin: 0; font-size: clamp(68px, 9.4vw, 164px); font-weight: 800; line-height: .86; letter-spacing: -.075em; }
.punctuation { color: #D2F82A; }
.intro-subtitle { margin: 24px 0 0; font-size: clamp(18px, 2vw, 31px); font-weight: 400; letter-spacing: -.03em; }
.intro-footer { position: absolute; z-index: 20; right: clamp(25px, 3.5vw, 56px); bottom: clamp(25px, 3.5vw, 56px); left: clamp(25px, 3.5vw, 56px); display: flex; align-items: end; justify-content: flex-end; }
.start-button { width: clamp(72px, 8vw, 112px); height: clamp(72px, 8vw, 112px); flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: #fff; color: #000; }
.start-button svg { width: 38%; height: 38%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: square; stroke-linejoin: miter; transition: transform .25s ease; }
.start-button:hover svg, .start-button:focus-visible svg { transform: translate(4px, -4px); }
.start-button:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }

.question, .result { background: #fff; color: #000; }
.brand-question .brand-logo, .brand-result .brand-logo { filter: none; }
.question-progress { position: absolute; top: clamp(35px, 3.9vw, 61px); right: clamp(25px, 3.5vw, 56px); font-size: 14px; font-weight: 700; letter-spacing: .05em; }
.question-progress span { color: #777; }
.question-content { position: absolute; top: 135px; right: clamp(25px, 3.5vw, 56px); bottom: 105px; left: clamp(25px, 3.5vw, 56px); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.question-panel { width: min(100%, 1020px); animation: question-enter .4s ease both; }
@keyframes question-enter { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
.section-label { display: block; margin-bottom: 16px; font-size: 12px; font-weight: 700; letter-spacing: .13em; color: #2A6BF8; }
.question-heading h2 { margin: 0; font-size: clamp(33px, 4vw, 57px); line-height: 1.2; font-weight: 700; letter-spacing: -.01em; word-break: keep-all; }
.question-heading p { margin: 13px 0 0; font-size: clamp(14px, 1.2vw, 17px); color: #555; }
.interaction { margin: clamp(28px, 4.5vh, 50px) auto 0; }

.choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 2vw, 24px); width: min(100%, 800px); }
.choice-card { min-width: 0; height: clamp(175px, 27vh, 245px); padding: 15px; border: 1px solid #d5d5d5; background: #fff; color: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px; transition: border-color .2s, transform .2s; }
.choice-card:hover { transform: translateY(-4px); border-color: #000; }
.choice-card[aria-pressed="true"] { border: 2px solid #2A6BF8; }
.choice-card svg { width: min(72%, 142px); height: min(68%, 142px); overflow: visible; }
.choice-card svg .figure { fill: #000; transition: fill .2s; }
.choice-card[aria-pressed="true"] svg .figure { fill: #2A6BF8; }
.choice-card .choice-label { font-size: 14px; font-weight: 600; }

.slider-interaction { width: min(100%, 720px); }
.preview-stage { height: clamp(135px, 24vh, 220px); display: flex; align-items: center; justify-content: center; }
.temperature-preview { width: clamp(112px, 18vh, 165px); aspect-ratio: 1; border-radius: 50%; background: #2A6BF8; transition: background .2s; }
.expansion-preview { width: var(--preview-size, 110px); height: var(--preview-size, 110px); border-radius: 50%; background: #2A6BF8; transition: width .12s, height .12s; }
.density-preview { width: min(100%, 400px); min-height: 160px; display: grid; grid-template-columns: repeat(8, 1fr); gap: 7px; align-content: center; justify-items: center; }
.density-preview span { width: clamp(10px, 2.2vw, 20px); aspect-ratio: 1; border-radius: 50%; background: #642AF8; }
.range-row { display: flex; justify-content: space-between; gap: 15px; margin-bottom: 16px; font-size: 15px; font-weight: 600; }
.range-row span:last-child { text-align: right; }
.answer-range { display: block; width: 100%; height: 4px; margin: 0; border-radius: 0; appearance: none; background: linear-gradient(to right, #2A6BF8 0 var(--range-progress, 50%), #ddd var(--range-progress, 50%) 100%); cursor: pointer; }
.answer-range::-webkit-slider-thumb { appearance: none; width: 22px; height: 22px; border: 4px solid #fff; border-radius: 50%; background: #000; box-shadow: 0 0 0 1px #000; }
.answer-range::-moz-range-thumb { width: 14px; height: 14px; border: 4px solid #fff; border-radius: 50%; background: #000; box-shadow: 0 0 0 1px #000; }
.range-value { display: block; margin-top: 17px; font-size: 14px; font-weight: 700; color: #555; }

.rhythm-grid { width: min(100%, 830px); }
.rhythm-grid .choice-card svg { width: 90%; max-width: 180px; height: 105px; }
.rhythm-grid .choice-card svg .figure { fill: #111; }
.rhythm-grid .choice-card[aria-pressed="true"] svg .figure { fill: #F82AC1; }
.palette-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 2vw, 22px); width: min(100%, 800px); }
.palette-choice { position: relative; aspect-ratio: 1; padding: 15px; border: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; color: #000; text-align: left; transition: transform .2s; }
.palette-choice:hover { transform: translateY(-4px); }
.palette-choice[aria-pressed="true"] { outline: 4px solid #000; outline-offset: 5px; }
.palette-choice[data-value="blue"] { background: #2A6BF8; }
.palette-choice[data-value="pink"] { background: #F82AC1; }
.palette-choice[data-value="lime"] { background: #D2F82A; }
.palette-choice[data-value="violet"] { background: #642AF8; color: #fff; }
.palette-choice .palette-index { font-size: 12px; font-weight: 700; }
.palette-choice .palette-name { font-size: clamp(17px, 2.4vw, 32px); font-weight: 800; letter-spacing: -.04em; }
.palette-choice .check { position: absolute; top: 12px; right: 13px; font-size: 18px; opacity: 0; }
.palette-choice[aria-pressed="true"] .check { opacity: 1; }

.question-footer { position: absolute; right: clamp(25px, 3.5vw, 56px); bottom: clamp(25px, 3.5vw, 56px); left: clamp(25px, 3.5vw, 56px); display: flex; align-items: center; justify-content: space-between; }
.nav-button { min-width: 108px; padding: 14px 20px; border: 1px solid #000; background: #fff; color: #000; font-size: 14px; font-weight: 700; transition: background .2s, color .2s; }
.nav-button:hover:not(:disabled) { background: #000; color: #fff; }
.nav-button:disabled { border-color: #d5d5d5; color: #aaa; cursor: not-allowed; }
.nav-back span { margin-right: 12px; }
.nav-next span { margin-left: 12px; }
.nav-button:focus-visible, .choice-card:focus-visible, .palette-choice:focus-visible, .answer-range:focus-visible { outline: 2px solid #2A6BF8; outline-offset: 4px; }

.result-content { position: absolute; top: 22%; left: max(clamp(25px, 3.5vw, 56px), calc((100vw - 900px) / 2)); width: min(900px, calc(100% - 50px)); }
.result-content h2 { margin: 0; font-size: clamp(36px, 4vw, 58px); line-height: 1.2; letter-spacing: -.025em; }
.result-content p { margin: 16px 0 24px; color: #555; }
.result-content pre { max-height: 36vh; overflow: auto; padding: 20px; background: #f5f5f5; color: #000; font-size: clamp(12px, 1.2vw, 16px); line-height: 1.6; }

@media (max-width: 760px) {
  .brand-logo { width: 88px; }
  .brand p { font-size: 10px; }
  .intro-copy { top: 21%; }
  .intro-copy h1 { font-size: clamp(62px, 15vw, 105px); }
  .intro-subtitle { margin-top: 18px; }
  .question-progress { top: 34px; font-size: 12px; }
  .question-content { top: 113px; bottom: 90px; }
  .question-heading h2 { font-size: clamp(29px, 7vw, 42px); }
  .question-heading p { font-size: 14px; }
  .choice-grid { gap: 8px; }
  .choice-card { height: clamp(148px, 22vh, 190px); padding: 8px; gap: 7px; }
  .choice-card svg { width: 88%; height: 78%; }
  .choice-card .choice-label { font-size: 12px; }
  .rhythm-grid .choice-card svg { width: 96%; height: 82px; }
  .palette-grid { grid-template-columns: repeat(2, 1fr); width: min(100%, 400px); gap: 9px; }
  .palette-choice { aspect-ratio: 1.5; padding: 12px; }
  .palette-choice .palette-name { font-size: 22px; }
  .range-row { font-size: 13px; }
  .nav-button { min-width: 91px; padding: 12px 14px; font-size: 13px; }
  .result-content { top: 22%; }
  .result-content pre { max-height: 40vh; }
}

@media (max-height: 650px) and (min-width: 761px) {
  .intro-copy { top: 25%; }
  .intro-copy h1 { font-size: clamp(64px, 8vw, 110px); }
  .question-content { top: 100px; bottom: 80px; }
  .choice-card { height: 170px; }
  .interaction { margin-top: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .tile { will-change: auto; }
}