/*---------------------------------------------------------
    HERA SCREEN VIEWS — 이벤트 목록 · 출석체크 · 룰렛 · 복권 · 쿠폰

    Ours, restated from the export's `event.css`, `dailycheck.css`,
    `roulette.css`, `lottery.css` and `coupon.css` rather than loaded from them,
    for the reason given at the head of `screens.css`: every one of those files
    opens with an unlayered `*` reset and a `#body` rule, and an unlayered
    declaration beats a layered one whatever the selector weighs.

    **Every selector begins with `.hera-screen`.** Breakpoints are the site's
    two and no others (`lib/table-cards.ts`).

    The palette, the 12px card and the cyan accent are `screens.css`'s, reused
    rather than restated — this sheet declares only what the event screens add,
    so nothing in here collides with a name another screen already owns.

    ── One thing this sheet may not do ────────────────────

    **Announce a reward that has not been won.** 출석체크's ladder is keyed by
    slot and comes from the model; 룰렛 and 복권 print nothing about their prize
    tables at all, and the 최근 결과 list is fed rows the model has already
    withheld. There is no rule below that can put a figure on a square or on a
    slice, and that is deliberate: the last thing a stylesheet should be able to
    do is reveal something.
---------------------------------------------------------*/

/* --- 이벤트 목록 --------------------------------------------------------- */

.hera-screen .hera-ev-doors {
    display: grid;
    gap: 1px;
    background: var(--hera-line);
}

.hera-screen .hera-ev-door {
    display: flex;
    min-height: 74px;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: var(--hera-bg-card);
    color: inherit;
    text-decoration: none;
    transition: background 160ms;
}

.hera-screen .hera-ev-door:hover {
    background: #212636;
}

.hera-screen .hera-ev-door-text {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.hera-screen .hera-ev-door-name {
    color: var(--hera-ink);
    font-size: 15px;
    font-weight: 700;
}

.hera-screen .hera-ev-door-what {
    color: var(--hera-ink-dim);
    font-size: 12px;
    line-height: 1.5;
    word-break: keep-all;
}

.hera-screen .hera-ev-door-go {
    margin-left: auto;
    color: var(--hera-blue);
    font-size: 15px;
}

/* --- shared event furniture ---------------------------------------------- */

.hera-screen .hera-ev-split {
    display: grid;
    grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
    align-items: start;
    gap: 20px;
}

.hera-screen .hera-ev-side {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.hera-screen .hera-ev-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.hera-screen .hera-ev-chip {
    padding: 3px 9px;
    border: 1px solid var(--hera-line);
    border-radius: 999px;
    color: var(--hera-ink-dim);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.hera-screen .hera-ev-chip-live {
    border-color: var(--hera-blue);
    color: var(--hera-blue);
}

.hera-screen .hera-ev-count {
    color: var(--hera-blue);
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* --- 출석체크 ------------------------------------------------------------ */

.hera-screen .hera-ev-month {
    margin: 0 0 10px;
    color: var(--hera-ink);
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.hera-screen .hera-ev-weekdays,
.hera-screen .hera-ev-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hera-screen .hera-ev-weekdays > span {
    padding: 2px 0;
    color: var(--hera-ink-dim);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

.hera-screen .hera-ev-weekdays > span:first-child {
    color: #f87171;
}

.hera-screen .hera-ev-weekdays > span:last-child {
    color: #60a5fa;
}

.hera-screen .hera-ev-days {
    margin-top: 6px;
}

.hera-screen .hera-ev-day {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    aspect-ratio: 1 / 1;
    border: 1px solid var(--hera-off-line);
    border-radius: 8px;
    background: #10131c;
}

.hera-screen .hera-ev-day-blank {
    border: 0;
    background: none;
}

.hera-screen .hera-ev-day-num {
    position: absolute;
    top: 4px;
    left: 5px;
    color: var(--hera-off-faint);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.hera-screen .hera-ev-day-stamped {
    border-color: rgba(0, 191, 255, 0.45);
    background: rgba(0, 191, 255, 0.08);
}

.hera-screen .hera-ev-day-stamped .hera-ev-day-num {
    color: var(--hera-blue);
}

.hera-screen .hera-ev-day-today {
    border-color: var(--hera-blue);
    background: rgba(0, 191, 255, 0.12);
    box-shadow: 0 0 0 1px var(--hera-blue-glow);
    cursor: pointer;
}

.hera-screen .hera-ev-day-today .hera-ev-day-num {
    color: var(--hera-ink);
}

/* 꺼진 것은 흐려지는 것이 아니라 색조를 잃습니다 —
   `lib/hera-disabled-state.spec.ts` 의 규약. */
.hera-screen .hera-ev-day-today:disabled {
    border-color: var(--hera-off-line);
    background: var(--hera-off-bg);
    color: var(--hera-off-ink);
    cursor: not-allowed;
    opacity: 1;
}

.hera-screen .hera-ev-day-today:disabled .hera-ev-day-num {
    color: var(--hera-off-ink);
}

.hera-screen .hera-ev-day-today:not(:disabled):hover {
    filter: brightness(1.2);
}

.hera-screen .hera-ev-day-today:focus-visible {
    outline: 2px solid var(--hera-blue);
    outline-offset: 2px;
}

/* 출석도장 — two rings and one glyph, so a month of them costs no requests. */
.hera-screen .hera-ev-seal {
    position: absolute;
    display: grid;
    inset: 0;
    place-items: center;
    pointer-events: none;
}

.hera-screen .hera-ev-seal > span {
    display: grid;
    width: 74%;
    aspect-ratio: 1 / 1;
    place-items: center;
    border: 1.5px solid var(--hera-blue);
    border-radius: 50%;
    color: var(--hera-blue);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: -0.06em;
    opacity: 0.9;
}

.hera-screen .hera-ev-badge {
    position: absolute;
    right: 3px;
    bottom: 3px;
    left: 3px;
    border-radius: 3px;
    background: var(--hera-blue);
    color: #06121b;
    font-size: 9px;
    font-weight: 800;
    line-height: 14px;
    text-align: center;
}

.hera-screen .hera-ev-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 12px 0 0;
    color: var(--hera-ink-dim);
    font-size: 11px;
}

.hera-screen .hera-ev-legend i {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 6px;
    border: 1.5px solid var(--hera-blue);
    border-radius: 50%;
    vertical-align: -1px;
}

.hera-screen .hera-ev-legend i.hera-ev-legend-today {
    border-radius: 2px;
    background: rgba(0, 191, 255, 0.2);
}

.hera-screen .hera-ev-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--hera-line);
}

.hera-screen .hera-ev-stat {
    padding: 14px 16px;
    background: var(--hera-bg-card);
}

.hera-screen .hera-ev-stat > span {
    display: block;
    color: var(--hera-ink-dim);
    font-size: 11px;
    font-weight: 700;
}

.hera-screen .hera-ev-stat > strong {
    display: block;
    margin-top: 6px;
    color: var(--hera-ink);
    font-size: 20px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.hera-screen .hera-ev-stat-live > strong {
    color: var(--hera-blue);
}

/* 오늘의 조건 — a bar per threshold. Absent entirely when there are none. */
.hera-screen .hera-ev-meter + .hera-ev-meter {
    margin-top: 12px;
}

.hera-screen .hera-ev-meter-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
    color: var(--hera-ink-dim);
    font-size: 12px;
}

.hera-screen .hera-ev-meter-head > b {
    color: var(--hera-ink);
    font-variant-numeric: tabular-nums;
}

.hera-screen .hera-ev-meter-track {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: #10131c;
}

.hera-screen .hera-ev-meter-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--hera-blue);
    transition: width 400ms;
}

.hera-screen .hera-ev-meter-met .hera-ev-meter-fill {
    background: var(--hera-ok);
}

/*
   얼마를 더 채워야 하는가 — 「9,000원 더 배팅하시면 오늘 조건을 채우십니다」.

   눈금과 「21,000 / 30,000원」은 둘 다 *상태*이고, 회원이 실제로 필요한 것은 *할
   일*입니다. 그래서 이 줄은 흐린 회색이 아니라 강조색으로 그립니다 — 조건을
   채우려고 움직이게 하려는 문장이지 각주가 아닙니다. 채우고 나면 초록으로
   가라앉아 「끝났다」가 됩니다.
*/
.hera-screen .hera-ev-meter-note {
    margin: 6px 0 0;
    color: var(--hera-blue);
    font-size: 11px;
    line-height: 1.5;
    word-break: keep-all;
}

.hera-screen .hera-ev-meter-met .hera-ev-meter-note {
    color: var(--hera-ok);
}

/* 다음 보상까지 — the one line neither the grid nor the ladder can draw. */
.hera-screen .hera-ev-next {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
}

.hera-screen .hera-ev-next-count {
    color: var(--hera-blue);
    font-size: 30px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    word-break: keep-all;
}

.hera-screen .hera-ev-next-head {
    margin: 0 0 4px;
    color: var(--hera-ink-dim);
    font-size: 11px;
    letter-spacing: 0.08em;
}

.hera-screen .hera-ev-next-day {
    margin: 0 0 6px;
    color: var(--hera-ink-dim);
    font-size: 11px;
}

.hera-screen .hera-ev-ladder {
    display: grid;
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--hera-line);
}

.hera-screen .hera-ev-step {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 10px 14px;
    background: var(--hera-bg-card);
}

.hera-screen .hera-ev-step-now {
    background: rgba(0, 191, 255, 0.08);
}

.hera-screen .hera-ev-step > b {
    min-width: 54px;
    color: var(--hera-ink-dim);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.hera-screen .hera-ev-step-now > b,
.hera-screen .hera-ev-step-done > b {
    color: var(--hera-blue);
}

/* --- 룰렛 · 복권 --------------------------------------------------------- */

/*
   The stage the object stands on. One wash behind it and a floor shadow under
   it, and nothing that carries meaning — so neither presentation has to know
   this exists.
*/
.hera-screen .hera-ev-stage {
    position: relative;
    padding: 22px 12px;
    overflow: hidden;
    border-radius: 12px;
    background:
        radial-gradient(
            60% 55% at 50% 38%,
            rgba(0, 191, 255, 0.18),
            transparent 70%
        ),
        #10131c;
    isolation: isolate;
}

/* --- 최근 결과 · 최근 사용 · 최근 출석 결과 ------------------------------

   네 화면이 모두 이것으로 끝납니다 — 룰렛·복권의 최근 결과, 쿠폰의 최근 사용,
   출석체크의 최근 출석 결과. 하나의 모양인 이유는 회원에게 이 넷이 한 제품이기
   때문이고, 영수증이 화면마다 다르게 생기면 그중 하나는 반드시 덜 만들어집니다.

   ── 앞에 있던 것이 왜 「CSS 가 없는 것처럼」 보였는가 ──

   규칙은 있었고 다 걸리고 있었습니다. 다만 줄의 바탕이 `--hera-bg-card` 였고,
   그것은 이 목록이 놓인 `.hera-card` 자신의 바탕색입니다 — 2026-08-29 배포본에서
   실측: 목록 `rgb(44,58,86)`, 줄 `rgb(26,29,42)`, 카드 `#1a1d2a`. 즉 **줄은 한
   번도 그려진 적이 없고** 1px 틈의 실선만 보였습니다. 거기에 1,188px 폭 한 줄의
   양 끝에 날짜와 「꽝」이 각각 붙어 있었고 둘 다 가장 흐린 회색이었습니다.

   그래서 바탕을 이 시트의 다른 안쪽 상자들과 같은 `#10131c` 로 내리고, 한 줄이
   아니라 **결과 하나에 쪽지 하나**로 바꿉니다. 데스크톱의 남는 폭은 줄을 늘이는
   대신 쪽지 셋을 나란히 놓는 데 씁니다.

   꽝은 붉지 않습니다. 진 것이지 고장이 아닙니다 — `PrizeModal` 이 같은 규칙을
   따릅니다. */

.hera-screen .hera-ev-recent-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0 10px;
    color: var(--hera-ink-dim);
    font-size: 11px;
    letter-spacing: 0.06em;
}

/* 제목에서 뻗어 나가는 실선. 이것이 있어야 이 덩어리가 카드의 한 「구획」으로
   읽히고, 없으면 기계 밑에 떨어진 잔줄이 됩니다. */
.hera-screen .hera-ev-recent-title::after {
    min-width: 0;
    height: 1px;
    flex: 1;
    background: var(--hera-line);
    content: "";
}

.hera-screen .hera-ev-recent {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hera-screen .hera-ev-recent-row {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    border-left: 2px solid var(--hera-blue);
    border-radius: 8px;
    background: #10131c;
    color: var(--hera-ink-dim);
    font-variant-numeric: tabular-nums;
}

.hera-screen .hera-ev-recent-head {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* 당첨 · 꽝 · 1일차 · 쿠폰 번호 — 그 줄이 무엇인지를 **낱말로** 말하는 자리.
   색만으로는 화면을 못 보는 회원에게 아무것도 아닙니다. */
.hera-screen .hera-ev-recent-tag {
    min-width: 0;
    overflow: hidden;
    padding: 2px 6px;
    border-radius: 3px;
    background: rgba(0, 191, 255, 0.15);
    color: var(--hera-blue);
    font-size: 10px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hera-screen .hera-ev-recent-when {
    flex-shrink: 0;
    color: var(--hera-off-faint);
    font-size: 10px;
}

.hera-screen .hera-ev-recent-prize {
    min-width: 0;
    overflow: hidden;
    color: var(--hera-blue);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 지급이 없던 결과. 조용해지기만 하고 테두리는 남습니다 — 참여한 기록이지
   빠진 줄이 아닙니다. */
.hera-screen .hera-ev-recent-blank {
    border-left-color: var(--hera-line);
}

.hera-screen .hera-ev-recent-blank .hera-ev-recent-tag {
    background: var(--hera-off-bg);
    color: var(--hera-ink-dim);
}

.hera-screen .hera-ev-recent-blank .hera-ev-recent-prize {
    color: var(--hera-ink-dim);
}

/* 첫 방문. 점선 상자인 이유는 「여기에 무언가가 들어올 자리」라고 말하기
   위해서입니다 — 아무것도 안 그리면 화면이 기계에서 그냥 끝납니다. */
.hera-screen .hera-ev-recent-empty {
    margin: 0;
    padding: 16px 12px;
    border: 1px dashed var(--hera-line);
    border-radius: 8px;
    color: var(--hera-ink-dim);
    font-size: 12px;
    text-align: center;
}

/* --- 쿠폰 ---------------------------------------------------------------- */

/*
   The ticket, drawn as one. Notches bitten out of the edges and a dashed rule,
   and no information of its own.
*/
.hera-screen .hera-ev-ticket {
    position: relative;
    padding: 18px;
    border: 1px dashed rgba(0, 191, 255, 0.45);
    border-radius: 10px;
    background: #10131c;
}

.hera-screen .hera-ev-ticket::before,
.hera-screen .hera-ev-ticket::after {
    position: absolute;
    top: 50%;
    width: 16px;
    height: 16px;
    border: 1px solid rgba(0, 191, 255, 0.35);
    border-radius: 50%;
    background: var(--hera-bg-card);
    content: "";
    transform: translateY(-50%);
}

.hera-screen .hera-ev-ticket::before {
    left: -8px;
}

.hera-screen .hera-ev-ticket::after {
    right: -8px;
}

.hera-screen .hera-ev-ticket-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hera-screen .hera-ev-code {
    width: 100%;
    min-width: 0;
    height: 48px;
    padding: 0 12px;
    border: 1px solid var(--hera-line);
    border-radius: 8px;
    outline: none;
    background: var(--hera-bg-card);
    color: var(--hera-ink);
    /* 16px, and no smaller: iOS Safari zooms the page on focus below it, which
       on a phone throws the layout away. */
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.18em;
    text-align: center;
    text-transform: uppercase;
}

.hera-screen .hera-ev-code:focus {
    border-color: var(--hera-blue);
}

.hera-screen .hera-ev-code::placeholder {
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
}

.hera-screen .hera-ev-code:disabled {
    border-color: var(--hera-off-line);
    background: var(--hera-off-bg);
    color: var(--hera-off-ink);
    cursor: not-allowed;
    opacity: 1;
}

/* --- 900: two columns become one ---------------------------------------- */

@media (max-width: 900px) {
    .hera-screen .hera-ev-split {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767px) {
    .hera-screen .hera-ev-days,
    .hera-screen .hera-ev-weekdays {
        gap: 4px;
    }

    .hera-screen .hera-ev-ticket-row {
        flex-direction: column;
        align-items: stretch;
    }

    .hera-screen .hera-ev-next-count {
        font-size: 26px;
    }
}