/* SEMACON 2026 — lottery result page
 * Source: Figma Qm6cvNGbJ7sM7lyFBIULr4 (390px mobile artboards). See docs/FIGMA_MAP.md.
 * Vertical spacing = differences of the artboard y-coordinates (commented per rule).
 */

:root {
  --c-navy: #142c72;
  --c-navy-edge: #000e38;
  --c-light: #d4dfff;
  --c-light-edge: #647cc2;
  --c-sky: #d9f5ff;
  --c-pink: #ffdbf4;
  --c-view-fallback: #5b50c6;
  --ff: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --design-w: 390px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-navy);   /* below the footer on tall screens + desktop gutters */
  color: #fff;
  font-family: var(--ff);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
p, h1, h2, ul, ol { margin: 0; }
button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.app {
  width: 100%;
  max-width: var(--design-w);
  zoom: var(--app-zoom, 1);       /* set in index.html for 391–767px screens */
  margin: 0 auto;
  background: var(--c-view-fallback);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.35);
  overflow-x: hidden;
}

/* ---------- view shell ---------- */
.view {
  position: relative;
  overflow: hidden;
  padding: 37px 0 30px;          /* host text y=37 */
  background: var(--c-view-fallback);
}
.view > * { position: relative; z-index: 2; }
.view > .bg { position: absolute; z-index: 0; top: 0; left: 0; width: 100%; height: auto; }
.view > .artists { position: absolute; z-index: 1; top: 108px; left: 0; width: 100%; height: auto; }
.view > .slogan { position: absolute; z-index: 1; left: 50%; transform: translateX(-50%); max-width: none; }
.view > .shade {                /* Figma "Rectangle 5": 0,327 390x257 */
  position: absolute; z-index: 1; top: 327px; left: 0; width: 100%; height: 257px;
  background: linear-gradient(180deg, rgba(20, 44, 114, 0) 0%, rgba(20, 44, 114, 0.49) 100%);
}
.view > .glass {                /* Figma "Rectangle 2" (GLASS effect) */
  position: absolute; z-index: 1;
  width: 354px; max-width: calc(100% - 24px);
  border-radius: 20px;
  border-top: 1.5px solid #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(20, 44, 114, 0.15) 68.837%);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.18), inset -1px 0 0 rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.view--lookup  { min-height: 682px; }   /* footer y */
.view--win     { min-height: 918px; }
.view--miss    { min-height: 577px; }
.view--confirm { min-height: 578px; }
.view--done    { min-height: 571px; }

/* ---------- shared header ---------- */
.host {
  font-size: 13px; line-height: 16px; font-weight: 500; text-align: center;
  text-shadow: 1px 1px 2px #000;
}
.view--lookup .host { text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.64); }
.title { margin: 12px auto 0; width: max-content; max-width: 100%; }   /* y=65 */
.title--2line img { width: 287px; height: auto; }
.title--1line img { width: 289px; height: auto; }

.event-info {
  font-weight: 700; text-align: center;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.64);
}
.event-info--lookup { margin-top: 27px; font-size: 16px; line-height: 24px; }  /* y=216 */
.event-info--line {                                                              /* y=120 */
  margin-top: 13px; font-size: 14.385px; line-height: 1.5;
  text-shadow: 0.9px 0.9px 1.8px #000;
}

.grad-text {
  display: inline-block;
  background: linear-gradient(98deg, var(--c-sky) 0.115%, var(--c-pink) 99.885%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 900;
}

/* ---------- buttons / fields ---------- */
.btn {
  display: block;
  width: 316px; max-width: 100%;
  margin: 0 auto;
  padding: 10px;
  border: 0; border-bottom: 1px solid;
  border-radius: 10px;
  font-size: 20px; line-height: 1.5; font-weight: 800; text-align: center;
  filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.25));
  cursor: pointer;
  transition: transform 0.08s ease, opacity 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.6; cursor: progress; }
.btn:focus-visible, .field:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.btn--navy  { background: var(--c-navy);  color: #fff;           border-color: var(--c-navy-edge); }
.btn--light { background: var(--c-light); color: var(--c-navy);  border-color: var(--c-light-edge); }

.field {
  display: block; width: 100%;
  padding: 10px;
  border: 1px solid var(--c-navy);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.19);
  font-size: 12px; line-height: 1.5; font-weight: 700; color: #fff;
  -webkit-appearance: none; appearance: none;
}
.field::placeholder { color: #fff; opacity: 1; }
.field:focus { outline: none; border-color: #fff; background: rgba(255, 255, 255, 0.26); }
.field[aria-invalid="true"] { border-color: var(--c-pink); }

.notes { list-style: disc; font-weight: 500; }
.notes li::marker { font-size: 0.9em; }

/* ---------- ① lookup ---------- */
.glass--lookup { top: 289px; left: calc(50% - 174px); height: 485px; }
.lookup-form { width: 302px; max-width: calc(100% - 48px); margin: 49px auto 0; }  /* y=313 */
.lookup-form__title {
  margin-left: -2px;                                  /* x=42 vs content x=44 */
  font-size: 20px; line-height: 24px; font-weight: 700;
  text-shadow: 1px 1px 2px #000;
}
.lookup-form__desc { margin-top: 7px; font-size: 12px; line-height: 1.5; font-weight: 500; }  /* y=344 */
.lookup-form__fields { display: grid; gap: 7px; margin-top: 17px; }                          /* y=397 */
.lookup-form__submit { width: 100%; margin-top: 21px; }                                       /* y=552 */
.form-error {
  margin-top: 12px; margin-bottom: -9px;
  font-size: 12px; line-height: 1.5; font-weight: 700; color: var(--c-pink);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
.notes--lookup { margin-top: 15px; padding-left: 15px; font-size: 10px; line-height: 1.5; }   /* y=618 */

/* ---------- ② win (1인석 / 2인석) ---------- */
.slogan--in { top: 342px; width: 379px; }
.glass--win { top: 521px; left: calc(50% - 177px); height: 511px; border-top-color: rgba(255, 255, 255, 0.62); }
.win { text-align: center; margin-top: 314px; }      /* name y=421 */
.win__name {
  font-size: 20px; line-height: 24px; font-weight: 700;
  text-shadow: 1px 1px 2px #000;
}
.win__headline {                                        /* y=450 */
  margin-top: 5px;
  font-size: 40px; line-height: 48px;
  filter: drop-shadow(1px 1px 2px #000);
}
.seat-card {                                            /* y=541, 316x210 */
  width: 316px; max-width: calc(100% - 32px);
  margin: 43px auto 0;
  padding: 15px;
  border-bottom: 1px solid var(--c-navy-edge);
  border-radius: 10px;
  background: var(--c-navy);
  filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.25));
  text-align: left;
}
.seat-card__head { margin: 0 10px; }
.seat-card__label { margin-bottom: -1px; font-size: 10px; line-height: 1.5; font-weight: 500; color: rgba(255, 255, 255, 0.68); }
.seat-card__row { display: flex; justify-content: space-between; align-items: flex-start; }
.seat-card__type { font-size: 36px; line-height: 1.3; font-weight: 800; }
.seat-card__icon { width: 73px; height: 47px; flex: none; }
.seat-card__line { margin: 14px 0; border: 0; border-top: 0.5px solid rgba(255, 255, 255, 0.68); }
.steps { list-style: none; padding: 0 0 0 10px; display: grid; gap: 10px; }
.steps li { display: flex; gap: 10px; align-items: flex-start; font-size: 12px; line-height: 1.3; font-weight: 500; }
.steps li > span:last-child { padding: 1px 0; }
.steps b { font-weight: 700; }
.steps__no {
  flex: none; display: grid; place-items: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--c-light); color: var(--c-navy);
  font-size: 12px; line-height: 1; font-weight: 700;
}
.win__cta { margin-top: 5px; }                          /* y=756 */
.notes--win {                                           /* y=822 */
  width: max-content; max-width: calc(100% - 40px);
  margin: 15px auto 0; padding-left: 16.5px;
  display: grid; gap: 6px;
  font-size: 11px; line-height: 1.3; text-align: left;
}

/* ---------- ③ miss ---------- */
.slogan--miss { top: 395px; width: 332px; }
.miss { text-align: center; margin-top: 332px; }        /* y=439 */
.miss__headline {
  font-size: 28px; line-height: 1.2;
  filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.41));
}
.miss__sub {                                            /* y=522 */
  margin-top: 16px;
  font-size: 18px; line-height: 1.2; font-weight: 600; color: var(--c-sky);
  text-shadow: 1px 1px 3.9px rgba(0, 0, 0, 0.41);
}

/* ---------- ④ confirm ---------- */
.glass--confirm { top: 342px; left: calc(50% - 177px); height: 368px; }
.confirm { width: 316px; max-width: calc(100% - 40px); margin: 229px auto 0; text-align: center; }  /* y=371 */
.confirm__q {
  font-size: 32px; line-height: 38px; font-weight: 900;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.79);
  white-space: nowrap;
}
.confirm .btn { width: 100%; }
.confirm .btn--light { margin-top: 28px; }              /* y=437 */
.confirm .btn--navy  { margin-top: 8px; }               /* y=496 */

/* ---------- ⑤ done ---------- */
.glass--done { top: 169px; left: calc(50% - 174px); height: 368px; }
.done { width: 316px; max-width: calc(100% - 40px); margin: 58px auto 0; }  /* box y=200 */
.done__box {
  width: 302px; max-width: 100%; min-height: 127px;
  margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 11px;
  padding: 20px 15px 15px;
  border-bottom: 1px solid var(--c-navy-edge);
  border-radius: 10px;
  background: var(--c-navy);
  filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.25));
  text-align: center;
}
.done__headline {
  font-size: 28px; line-height: 1.2;
  background-image: linear-gradient(100deg, var(--c-sky) 0.115%, var(--c-pink) 99.885%);
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
}
.done__desc { font-size: 12px; line-height: 1.5; font-weight: 500; }
.notes--done {                                          /* y=351 */
  margin-top: 24px; padding-left: 15px;
  display: grid; gap: 7px;
  font-size: 10px; line-height: 1.3;
}

/* ---------- footer (y=+0 .. +92) ---------- */
.footer {
  position: relative;
  height: 92px;
  background: var(--c-navy);
}
.footer__orgs { position: absolute; left: 44px; top: 31px; display: grid; gap: 8px; }
.footer__org { display: flex; align-items: flex-start; font-size: 9.4px; line-height: 11.4px; font-weight: 700; white-space: nowrap; }
.footer__org span { width: 31px; flex: none; }
.footer__org img[src*="sema"] { width: 70px; height: 9px; margin-top: 1px; }
.footer__org img[src*="kma"] { width: 82px; height: 12px; margin-top: -0.4px; }
.footer__divider { position: absolute; left: 50%; top: 23px; width: 1px; height: 46px; background: #fff; }
.footer__contact {
  position: absolute; left: calc(50% + 33px); top: 32px;
  font-size: 10px; line-height: 1.5; font-weight: 500; white-space: nowrap;
}
.footer__contact a { color: inherit; text-decoration: none; }

/* ---------- narrow phones (< 375) ---------- */
@media (max-width: 374px) {
  .confirm__q { font-size: 28px; }
  .notes--win, .notes--done, .notes--lookup { font-size: 10px; }
  .notes--win br, .notes--done br { display: none; }
  .footer__orgs { left: 24px; }
  .footer__contact { left: calc(50% + 20px); }
}