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

:root {
    color-scheme: dark;
    --ink: #07030d;
    --panel: rgba(10, 4, 22, .88);
    --panel-soft: rgba(20, 8, 40, .7);
    --white: #f8f7ff;
    --muted: #bcb5c8;
    --cyan: #00e8ee;
    --pink: #ff477e;
    --line: rgba(248, 247, 255, .16);
    --ease: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }

html,
body {
    width: 100%;
    height: 100%;
    min-width: 320px;
    margin: 0;
    overflow: hidden;
    background: var(--ink);
}

body {
    color: var(--white);
    font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Malgun Gothic", sans-serif;
    -webkit-font-smoothing: antialiased;
}

img { display: block; }

.photo-stage {
    position: fixed;
    inset: -18vh -18vw;
    z-index: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2.2vh;
    overflow: hidden;
    background: #10051f;
    transform: rotate(-7deg) scale(1.08);
}

.photo-ribbon {
    flex: none;
    width: 145vw;
    height: 31vh;
    overflow: hidden;
}

.photo-track {
    display: flex;
    align-items: center;
    width: max-content;
    height: 100%;
    gap: 1.2vw;
    animation: ribbon 58s linear infinite;
    will-change: transform;
}

.photo-ribbon.reverse .photo-track {
    animation-direction: reverse;
    animation-duration: 66s;
}

.photo-ribbon:nth-child(3) .photo-track { animation-duration: 72s; }

.photo-track figure {
    flex: none;
    width: min(calc(31vh * var(--photo-ratio)), 34vw);
    height: auto;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 12px;
    background: #160a29;
    box-shadow: 0 18px 50px rgba(0,0,0,.48);
}

.photo-track img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@keyframes ribbon {
    to { transform: translateX(-50%); }
}

.shade {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(7,3,13,.86) 0%, rgba(7,3,13,.68) 38%, rgba(7,3,13,.58) 100%),
        radial-gradient(circle at 80% 50%, rgba(62,22,96,.14), transparent 45%),
        linear-gradient(180deg, rgba(7,3,13,.48), rgba(7,3,13,.15) 40%, rgba(7,3,13,.68));
}

.page {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    width: 100%;
    height: 100dvh;
    padding: clamp(14px, 2vh, 20px) clamp(18px, 3.4vw, 64px);
    overflow: hidden;
}

.poster {
    width: min(100%, 1480px);
    margin-inline: auto;
}

.poster {
    display: grid;
    grid-template-rows: auto auto;
    align-content: center;
    align-items: stretch;
    gap: clamp(22px, 3.6vh, 38px);
    min-height: 0;
    padding: 0;
}

.message {
    position: relative;
    isolation: isolate;
    align-self: center;
    justify-self: center;
    width: min(100%, 1050px);
    text-align: center;
    text-shadow: 0 5px 36px rgba(0,0,0,.96);
}

.message::before {
    position: absolute;
    inset: -24% -10%;
    z-index: -1;
    background: radial-gradient(ellipse, rgba(7,3,13,.88) 0%, rgba(7,3,13,.64) 40%, transparent 73%);
    content: "";
    pointer-events: none;
}

.overline {
    margin: 0 0 clamp(10px, 1.5vh, 17px);
    color: var(--cyan);
    font-size: clamp(.58rem, .7vw, .72rem);
    font-weight: 900;
    letter-spacing: .18em;
}

.overline span {
    color: rgba(248,247,255,.8);
    font-variant-numeric: tabular-nums;
    letter-spacing: .08em;
}

.message h1 {
    margin: 0;
    font-weight: 900;
    line-height: 1.03;
    letter-spacing: -.06em;
    word-break: keep-all;
}

.message h1 > span {
    display: block;
    margin-bottom: 7px;
    font-size: clamp(1.45rem, 2.8vw, 2.65rem);
    text-shadow: 0 3px 0 rgba(18,3,30,.92), 0 10px 24px rgba(0,0,0,.92);
}

.message h1 > strong {
    display: block;
    color: var(--white);
    font-size: clamp(2.7rem, 5.5vw, 5.5rem);
    font-weight: 900;
    letter-spacing: -.075em;
    text-shadow: 0 3px 2px rgba(0,0,0,.88), 0 14px 34px rgba(0,0,0,.92);
}

.english {
    margin: clamp(13px, 2vh, 22px) 0 0;
    color: var(--cyan);
    font-size: clamp(.84rem, 1.35vw, 1.25rem);
    font-weight: 900;
    letter-spacing: .13em;
    text-shadow: 0 4px 14px rgba(0,0,0,.95);
}

.message-note {
    margin: clamp(10px, 1.5vh, 16px) 0 0;
    color: var(--muted);
    font-size: clamp(.7rem, .95vw, .9rem);
    line-height: 1.5;
    word-break: keep-all;
    text-shadow: 0 3px 12px rgba(0,0,0,.96);
}

.message-note span {
    color: rgba(248,247,255,.62);
    font-size: .84em;
    font-weight: 700;
    letter-spacing: .08em;
}

.records {
    justify-self: center;
    width: min(100%, 1050px);
    min-width: 0;
    overflow: visible;
}

.records:focus { outline: none; }

.records:focus-visible {
    outline: 2px solid rgba(0,232,238,.7);
    outline-offset: 4px;
}

.record-line {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 3vw, 48px);
}

.record-item {
    position: relative;
    min-width: 0;
    margin: 0;
    padding: clamp(11px, 1.45vh, 15px) 4px clamp(9px, 1.2vh, 13px);
    border-top: 1px solid rgba(248,247,255,.3);
    text-align: center;
    text-shadow: 0 3px 14px rgba(0,0,0,.95);
}

.record-item::before {
    position: absolute;
    top: -1px;
    left: 50%;
    width: clamp(38px, 4.5vw, 70px);
    height: 2px;
    background: var(--cyan);
    box-shadow: 0 0 12px rgba(0,232,238,.34);
    content: "";
    transform: translateX(-50%);
}

.record-name {
    display: inline-flex;
    align-items: baseline;
    gap: .7em;
    color: var(--white);
    font-size: clamp(.72rem, .9vw, .9rem);
    font-weight: 800;
    white-space: nowrap;
}

.record-name small {
    color: var(--cyan);
    font-size: .72em;
    font-weight: 900;
    letter-spacing: .08em;
}

.record-value {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: .55em;
    margin-top: clamp(5px, .8vh, 8px);
    white-space: nowrap;
}

.record-value strong {
    color: var(--white);
    font-size: clamp(1.65rem, 2.75vw, 2.8rem);
    font-weight: 900;
    line-height: .92;
    letter-spacing: -.06em;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 4px 18px rgba(0,0,0,.96);
}

.record-value > span {
    color: rgba(248,247,255,.78);
    font-size: clamp(.65rem, .78vw, .78rem);
    font-weight: 800;
}

.record-value > span small {
    margin-left: .42em;
    color: var(--cyan);
    font-size: .78em;
    font-weight: 900;
    letter-spacing: .08em;
}

@media (max-width: 760px) {
    .photo-stage {
        inset: -10vh -70vw;
        gap: 1.4vh;
        transform: rotate(-8deg) scale(1.05);
    }

    .photo-ribbon { width: 250vw; height: 30vh; }
    .photo-track { gap: 10px; animation-duration: 48s; }
    .photo-track figure {
        width: min(calc(30vh * var(--photo-ratio)), 78vw);
        border-radius: 8px;
    }

    .shade {
        background:
            radial-gradient(ellipse at 50% 43%, rgba(7,3,13,.88) 0 22%, rgba(7,3,13,.62) 43%, rgba(7,3,13,.2) 72%, rgba(7,3,13,.34) 100%),
            linear-gradient(180deg, rgba(7,3,13,.18), rgba(7,3,13,.08) 48%, rgba(7,3,13,.5));
    }

    .page {
        grid-template-rows: minmax(0, 1fr);
        padding: 12px 8px 8px;
    }

    .poster { gap: 18px; }

    .overline { margin-bottom: 8px; font-size: .62rem; }
    .message h1 > span { margin-bottom: 4px; font-size: clamp(1.15rem, 5.8vw, 1.55rem); }
    .message h1 > strong { font-size: clamp(1.75rem, 8.6vw, 2.45rem); }
    .english { margin-top: 9px; font-size: clamp(.7rem, 3.25vw, .84rem); letter-spacing: .07em; }
    .message-note { margin-top: 8px; font-size: clamp(.65rem, 2.8vw, .75rem); line-height: 1.4; }
    .message-note span { font-size: .88em; color: rgba(248,247,255,.78); letter-spacing: .05em; }

    .records {
        overflow: visible;
    }

    .record-line {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
        gap: 6px;
    }

    .record-item { padding: 9px 2px 8px; }
    .record-name {
        display: block;
        font-size: .66rem;
        line-height: 1.12;
        white-space: normal;
    }
    .record-name small {
        display: block;
        margin-top: 4px;
        font-size: .7em;
        white-space: nowrap;
    }
    .record-value {
        display: block;
        margin-top: 7px;
    }
    .record-value strong { display: block; font-size: clamp(1.3rem, 6.4vw, 1.65rem); }
    .record-value > span { display: block; margin-top: 5px; font-size: .62rem; }

}

@media (max-width: 360px) {
    .page { padding-inline: 6px; }
    .message h1 > span { font-size: 1.08rem; }
    .message h1 > strong { font-size: 1.72rem; }
    .english { font-size: .68rem; }
    .message-note { font-size: .61rem; }
}

@media (max-height: 720px) {
    .page { grid-template-rows: minmax(0, 1fr); padding-block: 8px 6px; }
    .poster { gap: 14px; }
    .overline { margin-bottom: 6px; }
    .message h1 > span { margin-bottom: 3px; font-size: clamp(1rem, 2.2vw, 1.7rem); }
    .message h1 > strong { font-size: clamp(1.85rem, 4.4vw, 3.5rem); }
    .english { margin-top: 7px; }
    .message-note { margin-top: 6px; }
    .record-item { padding-block: 8px 7px; }
}

@media (max-width: 760px) and (max-height: 720px) {
    .overline { margin-bottom: 4px; }
    .message h1 > span { font-size: 1.08rem; }
    .message h1 > strong { font-size: 1.7rem; }
    .english { margin-top: 6px; font-size: .68rem; }
    .message-note { margin-top: 6px; font-size: .64rem; }
    .record-item { padding-block: 7px 6px; }
}

@media (prefers-reduced-motion: reduce) {
    .photo-track { animation: none; }
}