/* n-ticket 준비 화면 — NOL gates 실측 좌표 (docs/nol-ticketing-ui.md 3-5)
   NOL 은 루트 글꼴 16px 기본값을 쓴다. 인터파크의 62.5% 방식과 달라 rem 이 아니라 px 로 짠다. */
:root {
    --nt-ink: #1b1c1f;
    --nt-locked-bg: #f2f3f7;
    --nt-locked-ink: #8b8d92;
    --nt-primary: #7a68a8;
}

* { box-sizing: border-box; margin: 0; padding: 0 }

body {
    font-family: ui-sans-serif, system-ui, -apple-system, 'Apple SD Gothic Neo', sans-serif;
    color: var(--nt-ink);
    -webkit-font-smoothing: antialiased;
}

/* ═══════════ 준비 화면 ═══════════ */

.nt-gate {
    min-height: 100dvh;
    background: #fff;
    background-image: linear-gradient(180deg, #ECEEF5 0, #ECEEF5 240px, #fff 700px);
    background-repeat: no-repeat;
}

.nt-back {
    position: absolute;
    top: 4px;
    left: 2px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: none;
    color: var(--nt-ink);
    cursor: pointer;
}

.nt-back svg { width: 24px; height: 24px }

.nt-title {
    padding: 64px 20px 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
}

.nt-poster {
    width: 190px;
    height: 258px;
    margin: 92px auto 0;
    padding: 3px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(27, 28, 31, .14);
}

.nt-poster img {
    width: 184px;
    height: 252px;
    border-radius: 10px;
    object-fit: cover;
    display: block;
}

/* 실물 공연명이 2줄이라 자리를 2줄로 잡아둔다 — 줄 수가 달라져도 버튼이 안 움직인다 */
.nt-name {
    margin-top: 16px;
    min-height: 48px;
    padding: 0 20px;
    font-size: 15px;
    line-height: 24px;
    text-align: center;
}

.nt-book {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 12px;
    height: 52px;
    border: 0;
    border-radius: 16px;
    background: var(--nt-locked-bg);
    color: var(--nt-locked-ink);
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: default;
}

.nt-book.is-open {
    background: var(--nt-primary);
    color: #fff;
    cursor: pointer;
}

@media (min-width: 1025px) {
    .nt-gate { background-image: linear-gradient(180deg, #E0E2E8 0, #fff 400px) }
    .nt-back { display: none }
    .nt-title { padding-top: 80px; text-align: center }
    .nt-poster { margin-top: 42px }

    .nt-book {
        position: static;
        display: block;
        width: 560px;
        margin: 36px auto 60px;
    }
}