/*
 * Copyright (c) 2026 ㈜유니피커. All rights reserved.
 *
 * 이 소스 코드는 추첨 로직을 제3자가 확인할 수 있도록 열람 목적으로 공개합니다.
 * 개별 추첨 결과의 검증은 저작권자가 제공하는 공식 웹 검증 환경에서 수행합니다.
 * 열람은 허용하지만 직접 실행하거나 빌드할 수 없습니다. 저작권자의 사전 서면 동의 없이
 * 복제, 수정, 배포, 재배포, 2차적저작물 작성과 그 밖의 상업적·비상업적 이용을 할 수 없습니다.
 * 자세한 이용 조건은 저장소 루트의 LICENSE 를 참조하십시오.
 *
 * This source code is published so third parties can inspect the draw logic. Verification of an
 * individual draw result is performed in the official web verification environment provided by
 * the copyright holder. Inspection is permitted; direct execution or building is not. Copying,
 * modification, distribution, redistribution, creation of derivative works, and any other
 * commercial or non-commercial use are prohibited without the copyright holder's prior written
 * consent. See LICENSE in the repository root for the complete terms.
 */

/* Verifier page styles. Colours follow the product palette (primary #2488f1, dark surface #0f1c2c, error #e0454a). */
/* ⚠ Nothing external is loaded: no web fonts, no icon CDN, system fonts only, so the page makes zero network requests. */

:root{
  --primary:#2488f1; --primary-deep:#1b77e4; --primary-soft:#e3f3ff;
  --dark:#0f1c2c; --dark-line:#2f4158; --dark-text:#c2cedf; --dark-mute:#7d8da6;
  --ink:#1a1a1a; --ink-2:#333333; --ink-3:#555555;
  --gray:#8b8b8b; --gray-2:#667589; --gray-3:#97a3b4; --gray-4:#a9b4c2;
  --line:#e7eaef; --line-2:#dde4ec; --soft:#f5f7fa; --soft-2:#edf1f6; --soft-3:#f1f4f8;
  --red:#e0454a; --warn:#b7791f; --warn-soft:#fdf3e2; --red-soft:#fbeaea;
}
*{box-sizing:border-box}
body{
  margin:0;padding:0;background:#fff;color:var(--ink-2);line-height:1.5;font-size:15px;
  font-family:'Pretendard','Nanum Gothic','Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  letter-spacing:-.03em;-webkit-font-smoothing:antialiased;
}
/* The English page drops the letter-spacing tightening meant for Korean */
html[lang="en"] body{letter-spacing:normal}
.hidden{display:none !important}
/* Content is 1200 wide; the 24 side padding sits outside that (the design measures content at 1200) */
.inner{width:100%;max-width:1248px;margin:0 auto;padding:0 24px}
button{font-family:inherit;letter-spacing:inherit}

/* ── Top bar ── */
.topbar{border-bottom:1px solid var(--line)}
.topbar .inner{display:flex;align-items:center;gap:12px;height:72px}
.topbar .logo{width:147px;height:26px;flex:0 0 auto;display:block;object-fit:contain}
.topbar .brand{font-size:20px;font-weight:700;color:var(--ink)}
/* Language switch: links to the other language's page rather than buttons, because the URL is the language */
.langtog{display:flex;gap:2px;margin-left:auto;padding:3px;background:var(--soft-3);border-radius:8px}
.langtog a{padding:7px 15px;border-radius:6px;font-size:14px;font-weight:700;color:var(--gray);text-decoration:none}
.langtog a:hover{color:var(--primary)}
.langtog a.on{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.10);cursor:default}

/* ── Hero ── */
/* 104 top and bottom: where the 292-tall content sits inside the 500-tall design frame */
.hero{position:relative;overflow:hidden;background:var(--dark);display:flex;align-items:center;justify-content:center;padding:104px 0}
/* Background grid, glows and orbits. Decoration only, so it never rises above the content. */
.hero-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hero-bg .grid{position:absolute;inset:0;
  background-image:repeating-linear-gradient(to right,rgba(255,255,255,.04) 0 1px,transparent 1px var(--grid-x)),
                   repeating-linear-gradient(to bottom,rgba(255,255,255,.04) 0 1px,transparent 1px var(--grid-y));
  --grid-x:calc(100% / 16);--grid-y:calc(100% / 8)}
.hero-bg img{position:absolute;display:block;max-width:none;transform:translate(-50%,-50%)}
.hero-bg .p1{left:calc(50% - 620px);top:calc(50% - 150px);width:500px;height:500px}
.hero-bg .p2{left:calc(50% + 416px);top:calc(50% + 100px);width:520px;height:520px}
.hero-bg .p3{left:calc(50% - 210px);top:calc(50% - 90px);width:240px;height:240px}
.hero-bg .ring{left:calc(50% + 376px);top:calc(50% - 20px);width:380px;height:380px;opacity:.3}
.hero-bg .ring-in{left:calc(50% + 376px);top:calc(50% - 20px);width:280px;height:280px}

.hero-row{position:relative;display:flex;align-items:center;gap:100px}
.hero-left{display:flex;flex-direction:column;gap:24px;align-items:flex-start;width:640px;flex:0 0 auto}
.hero h1{margin:0;font-size:42px;line-height:1.25;color:#fff;word-break:keep-all}
.hero h1 span{display:block;font-weight:800}
.hero h1 .accent{font-weight:900;color:#64baff}
.hero .lead{margin:0;font-size:16px;line-height:1.6;color:#8c94a6}
/* Link out to the source repository: the only outbound address on this page */
/* 380x60, with 24 side and 18 vertical padding. Inheriting the body line-height would make it taller. */
.hero .cta{display:flex;align-items:center;justify-content:space-between;gap:8px;width:380px;padding:18px 24px;
  border-radius:12px;background:var(--primary-deep);color:#fff;text-decoration:none;font-size:20px;font-weight:700;line-height:24px}
.hero .cta:hover{background:var(--primary)}
.hero .cta img{width:24px;height:24px;flex:0 0 auto;display:block}

/* Code window showing a real fragment of the reproduction source */
.hero-right{display:flex;align-items:center;justify-content:center;min-width:0}
.term{width:460px;height:280px;display:flex;flex-direction:column;gap:12px;padding:16px;overflow:hidden;letter-spacing:0;
  background:rgba(15,23,42,.6);border:1.5px solid #334155;border-radius:12px}
.term-bar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.term-bar .dots{width:36px;height:8px;display:block;flex:0 0 auto}
.term-bar .fname{font-family:ui-monospace,'JetBrains Mono',Menlo,Consolas,monospace;font-size:11px;line-height:1;color:#8c9aa5;white-space:nowrap}
.term-bar .tic{width:14px;height:14px;display:block;flex:0 0 auto}
.term .code{margin:0;padding-top:8px;overflow:hidden;font-family:ui-monospace,'JetBrains Mono',Menlo,Consolas,monospace;
  font-size:12px;line-height:1.833;letter-spacing:.1em;color:#d9dee8;white-space:pre}
/* Colours follow the design. The tags are short ones picked purely for display: b keyword, i function, em identifier, s number, u punctuation. */
.term .code b{font-weight:400;color:#c775d9}
.term .code i{font-style:normal;color:#61baf2}
.term .code em{font-style:normal;color:#e5dbbf}
.term .code s{text-decoration:none;color:#8fd46b}
.term .code u{text-decoration:none;color:#9999a6}
.term .code mark{background:none;color:#f2bf59}

/* Code window motion: lines fade in, then a magnifier sweeps them. Decoration, so it is skipped for reduced motion. */
/* ⚠ .animready is set by the script; without it the code shows in full, which is what a no-script page must do. */
.term{position:relative}
.term.animready .ln{opacity:0}
.term.anim{animation:termIn .25s ease-out .15s both}
.term.anim .term-bar{animation:barIn .12s ease-out .3s both}
/* ⚠ .45s and .1s are LINE_FROM and LINE_STEP in heroAnim.js — change one alone and the sweep starts off the text. */
.term.anim .ln{animation:lnIn .42s ease-out both;animation-delay:calc(.45s + var(--i) * .1s)}
@keyframes termIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes barIn{from{opacity:0}to{opacity:1}}
@keyframes lnIn{from{opacity:0;filter:blur(3px)}to{opacity:1;filter:none}}

.mag{position:absolute;left:0;top:0;opacity:0;pointer-events:none}
.lens{position:absolute;inset:0;border-radius:50%;overflow:hidden;
  background:#141e2e;border:2px solid #8ba7cb;
  box-shadow:0 10px 26px rgba(0,0,0,.5)}
.lens-in{position:absolute;inset:-2px;overflow:hidden;border-radius:50%}
.mag .code{position:absolute;left:0;top:0;padding-top:8px;transform-origin:0 0;overflow:visible}
.mag .code{color:#eaf0fa}
.mag .ln{opacity:1;filter:none;animation:none}
.mag-h{position:absolute;left:calc(100% - 8px);top:calc(100% - 8px);width:26px;height:7px;border-radius:4px;
  background:#8ba7cb;transform:rotate(45deg);transform-origin:0 50%}

/* ── Terms-of-use notice, between the hero and the verification screen ── */
.noticebar{background:var(--soft);border-bottom:1px solid var(--line)}
.noticebar .inner{display:flex;align-items:center;gap:12px;padding:22px 24px}
.noticebar .badge{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;flex:0 0 auto;border-radius:50%;background:var(--primary);color:#fff;font-size:14px;font-weight:800}
.noticebar span:last-child{font-size:16px;line-height:1.6;color:var(--ink-2)}
.noticebar b{font-weight:700;color:var(--ink)}

/* ── Verification progress ── */
main.inner{padding-top:56px;padding-bottom:96px}
.sechead{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.sechead .sectitle{font-size:20px;font-weight:800;color:var(--ink)}
.sechead .typechip{padding:5px 12px;border-radius:6px;background:var(--primary-soft);color:var(--primary-deep);font-size:14px;font-weight:800}
.sechead .pct{margin-left:auto;font-size:15px;font-weight:700;color:var(--gray);font-variant-numeric:tabular-nums}
.pbar{height:6px;margin-bottom:24px;background:var(--soft-2);border-radius:3px;overflow:hidden}
.pfill{height:100%;width:0%;background:var(--primary);border-radius:3px;transition:width .25s linear}

.stepcard{padding:8px 40px 32px;background:#fff;border:1px solid var(--line);border-radius:14px}
.step{display:grid;grid-template-columns:30px 1fr;gap:20px;padding:28px 0 4px}
.step .mark{display:flex;flex-direction:column;align-items:center;gap:8px}
.step .dot{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;flex:0 0 auto;border-radius:50%;font-size:14px;font-weight:800;background:#fff;border:1px solid var(--line-2);color:var(--gray-4)}
.step.done .dot,.step.active .dot{background:var(--primary);border-color:var(--primary);color:#fff}
.step.failed .dot{background:var(--red);border-color:var(--red);color:#fff}
.step .rail{width:2px;flex:1 1 auto;min-height:16px;background:var(--line);border-radius:1px}
.step.done .rail{background:var(--primary)}
.spin{width:26px;height:26px;margin:2px;flex:0 0 auto;border:3px solid #d7e3f0;border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}

.step .body{display:flex;flex-direction:column;gap:6px;min-width:0;padding-bottom:24px}
.step .head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.step .label{font-size:18px;font-weight:800;color:var(--gray-4)}
.step .status{font-size:13px;font-weight:700;color:#c6ceda;white-space:nowrap}
.step .detail{font-size:15px;line-height:1.6;color:#b9c2ce}
.step.lit .label{color:var(--ink)}
.step.lit .detail{color:var(--ink-3)}
.step.done .status{color:var(--primary)}
.step.running .status{color:var(--gray)}
.step.active .status{color:var(--primary-deep)}
.step.failed .status{color:var(--red)}

/* Drop zone */
.drop{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:14px;padding:44px 32px;text-align:center;background:#fff;border:2px dashed #c2cedf;border-radius:12px;transition:background .16s,border-color .16s}
.drop.drag{background:var(--primary-soft);border-color:var(--primary)}
.drop .ic{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:14px;background:var(--primary-soft);color:var(--primary);font-size:24px;font-weight:800}
.drop .t{font-size:20px;font-weight:800;color:var(--ink)}
.drop .d{font-size:15px;line-height:1.6;color:var(--gray-2)}
.drop .privacy{margin-top:4px;padding:4px 10px;border-radius:6px;background:var(--primary-soft);font-size:14px;line-height:1.6;font-weight:700;color:var(--primary-deep)}
.drop .pick{margin-top:6px;padding:16px 40px;border:none;cursor:pointer;font-size:17px;font-weight:700;color:#fff;background:var(--primary);border-radius:8px}
.drop .pick:hover{filter:brightness(.94)}

.filled{display:flex;align-items:center;gap:12px;margin-top:14px;padding:20px 24px;background:var(--soft);border-radius:10px}
.filled .kind{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex:0 0 auto;border-radius:8px;background:var(--primary-soft);color:var(--primary);font-size:13px;font-weight:800}
.filled .name{font-size:16px;font-weight:700;color:#222;word-break:break-all}
.filled .size{font-size:14px;color:var(--gray)}
.filled button{margin-left:auto;flex:0 0 auto;padding:7px 16px;border:1px solid #d7e3f0;background:#fff;border-radius:6px;cursor:pointer;font-size:14px;font-weight:700;color:var(--gray-2)}
.filled button:hover:not(:disabled){color:var(--primary);border-color:var(--primary)}
.filled button:disabled{color:#c6ceda;cursor:default}

.startbox{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:18px}
.startbox button{padding:18px 56px;border:none;cursor:pointer;font-size:18px;font-weight:700;color:#fff;background:var(--primary);border-radius:8px}
.startbox button:hover:not(:disabled){filter:brightness(.94)}
.startbox button:disabled{background:#c6ceda;cursor:not-allowed}
.startbox .hint{font-size:15px;line-height:1.5;color:var(--gray-3)}

/* Tables shown inside a stage: the file fingerprint list and the reproduction progress */
.panel{display:flex;flex-direction:column;gap:12px;margin-top:14px;padding:20px 24px;background:var(--soft);border-radius:10px}
/* File names carry a date and run long, so the name column is generous and the fingerprint takes what is left */
.panel .frow{display:grid;grid-template-columns:minmax(300px,auto) minmax(0,1fr) auto;gap:16px;align-items:baseline}
.panel .frow .k{font-size:14px;color:var(--gray);word-break:break-all}
.panel .frow .h{font-size:13px;line-height:1.5;color:var(--gray-2);font-family:ui-monospace,monospace;word-break:break-all}
/* The row being typed blinks a caret after the last character */
.panel .frow .h.typing::after{content:'▍';margin-left:1px;color:var(--primary);animation:caret .9s steps(1) infinite}
@keyframes caret{0%,49%{opacity:1}50%,100%{opacity:0}}
.panel .frow .m{font-size:13px;font-weight:700;color:var(--primary-deep);white-space:nowrap}
.panel .frow .m.no{color:var(--red)}
.panel .trow{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.panel .trow .g{font-size:15px;font-weight:700;color:var(--ink-2)}
.panel .trow .v{font-size:15px;color:var(--gray-2);font-variant-numeric:tabular-nums}
.panel .busy{font-size:15px;color:var(--gray-3);animation:pulse .9s ease-in-out infinite}

.runchip{display:flex;align-items:center;gap:12px;padding-top:8px;border-top:1px solid var(--soft-3)}
.runchip .busy{display:inline-flex;align-items:center;gap:10px;margin-top:24px;padding:18px 44px;font-size:18px;font-weight:700;color:var(--gray-3);background:var(--soft-2);border-radius:8px}
.runchip .busy .s{width:16px;height:16px;border:2px solid var(--dark-text);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite}
.runchip .cancel{margin-top:24px;padding:16px 28px;background:#fff;color:var(--gray-2);border:1px solid var(--line-2);border-radius:8px;font-size:16px;font-weight:700;cursor:pointer}
.runchip .cancel:hover{color:var(--red);border-color:var(--red)}

/* ── Notices and errors ── */
.msgs:not(:empty){margin-top:20px}
.msg{border-radius:10px;padding:12px 16px;font-size:15px;margin-top:8px}
.msg.err{background:var(--red-soft);color:var(--red);font-weight:600}
.msg.warn{background:var(--warn-soft);color:var(--warn)}

/* ── Result ── */
#sec-result-view{display:flex;flex-direction:column;gap:20px;margin-top:40px;animation:rise .32s ease both}
.verdict{display:flex;align-items:center;gap:24px;padding:36px 40px;border-radius:14px;background:var(--gray)}
.verdict.ok{background:var(--primary)}
.verdict.no{background:var(--red)}
.verdict.hold{background:var(--warn)}
.verdict .glyph{display:inline-flex;align-items:center;justify-content:center;width:60px;height:60px;flex:0 0 auto;border-radius:50%;background:#fff;color:var(--gray);font-size:28px;font-weight:800}
.verdict.ok .glyph{color:var(--primary)}
.verdict.no .glyph{color:var(--red)}
.verdict.hold .glyph{color:var(--warn)}
.verdict .txt{display:flex;flex-direction:column;gap:8px;min-width:0}
.verdict .big{font-size:30px;font-weight:800;color:#fff}
.verdict .sub{font-size:17px;line-height:1.5;color:#fff;opacity:.88;word-break:break-all}

.highlights{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.highlights>div{display:flex;flex-direction:column;gap:8px;padding:26px 28px;background:#fff;border:1px solid var(--line);border-radius:12px}
.highlights .k{font-size:15px;color:var(--gray)}
.highlights .v{font-size:24px;font-weight:800;color:var(--primary-deep)}
.highlights .v.no{color:var(--red)}
.highlights .v.hold{color:var(--warn)}
.highlights .note{font-size:14px;line-height:1.5;color:var(--gray-3)}

.card{padding:32px 40px;background:#fff;border:1px solid var(--line);border-radius:12px}
.card h2{margin:0 0 24px;font-size:18px;font-weight:800;color:#222}
/* Draw information, grouped into sections by meaning */
.facts{display:flex;flex-direction:column;gap:28px}
.factgroup h3{margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--line);font-size:15px;font-weight:800;color:var(--primary-deep)}
.factrows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 48px}
.factrows>div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-bottom:12px;border-bottom:1px solid var(--soft-3)}
.facts .k{font-size:15px;color:var(--gray);flex:0 0 auto}
.facts .v{font-size:15px;font-weight:700;color:var(--ink-2);text-align:right;word-break:break-all}
.card .note{margin:28px 0 0;font-size:15px;line-height:1.6;color:var(--gray-3)}

.logbox{display:flex;align-items:center;gap:28px;padding:26px 40px;background:var(--soft);border-radius:12px}
.logbox .t{font-size:17px;font-weight:800;color:#222}
.logbox .d{font-size:15px;line-height:1.5;color:#7a869a}
.logbox .d b{font-weight:800}
.logbox button{margin-left:auto;flex:0 0 auto;padding:15px 30px;cursor:pointer;font-size:16px;font-weight:700;color:var(--primary);background:#fff;border:1px solid var(--primary);border-radius:8px}
.logbox button:hover:not(:disabled){background:var(--primary-soft)}
.logbox button:disabled{color:var(--gray-4);border-color:var(--line-2);cursor:default}

.again{display:flex;justify-content:center;padding-top:36px}
.again button{padding:18px 44px;cursor:pointer;font-size:18px;font-weight:700;color:var(--primary);background:#fff;border:1px solid var(--primary);border-radius:8px}
.again button:hover{background:var(--primary-soft)}

/* ── Footer ── */
footer{background:var(--dark)}
footer .inner{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:44px 24px}
footer .logo{width:148px;height:26px;flex:0 0 auto;display:block;object-fit:contain;filter:brightness(0) invert(1)}
footer .side{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
footer .support{font-size:15px;color:var(--dark-mute)}
footer .support b{font-weight:700;color:#fff;white-space:nowrap}
footer .copy{font-size:15px;color:#5c6b82}

@media(max-width:900px){
  .hero{padding:64px 0}
  .hero-row{flex-direction:column;align-items:flex-start;gap:36px}
  .hero-left{width:100%}
  .hero h1{font-size:30px}
  .hero .cta{width:100%;max-width:380px;font-size:18px}
  .hero-right{width:100%}
  .term{width:100%;max-width:460px;height:auto}
  .term .code{overflow-x:auto}
  .stepcard{padding:8px 20px 24px}
  .highlights{grid-template-columns:1fr}
  .factrows{grid-template-columns:1fr}
  .card{padding:24px 20px}
  .verdict{flex-direction:column;align-items:flex-start;padding:24px}
  .logbox{flex-direction:column;align-items:flex-start;gap:14px;padding:22px 20px}
  .logbox button{margin-left:0}
  .panel .frow{grid-template-columns:1fr}
  footer .inner{flex-direction:column;align-items:flex-start}
  footer .side{align-items:flex-start}
}

/* ⚠ Below this width the widened code no longer fits the window, and the longest line would scroll */
@media(max-width:420px){
  .term .code{letter-spacing:0}
}