/*---------------------------------------------------------
    HERA SCREEN VIEWS — 입금하기 · 출금하기 · 공지사항

    Ours, not the export's, and the reason is worth reading before adding to it.

    hera's export ships `deposit.css`, `announcement.css`, `point.css`,
    `my-page.css` and `inquriy.css` (sic), and they describe exactly the design
    reproduced below. They are still not loaded, because every one of them
    opens with the same three things:

        * { box-sizing: border-box; margin: 0; padding: 0; }
        #body { background-color: …; font-family: …; color: …; }
        input, select, button { … }

    An unlayered `*` rule beats every utility class on the site, and `#body`
    and the bare element rules repaint pages those sheets were never written
    for. `sports_csr.css` is the standing proof of what that does. So the
    design is restated here, scoped, rather than the sheet being loaded.

    **Every selector in this file begins with `.hera-screen`.** That is what
    makes it safe to load globally: on /game, /sport or any route that does not
    render a `hera-screen` root, not one rule in here can match.
    `skin-screen-seam.spec.ts` asserts the scoping rather than trusting it.

    The colours, radii, spacing and the two-column split are hera's own,
    taken from those files. The `*` reset is not reproduced; each rule states
    the box model it needs.

    The route we did not take, for whoever picks this up: `@import
    url("…/deposit.css") layer(skin-legacy)` would let the export's own bytes
    load with the reset demoted below Tailwind's utilities. It is the more
    faithful port and it is how the remaining screens should probably arrive.
    It needs a layer order declared in `globals.css` and it needs proving that
    nothing on the site relies on unlayered author CSS, which is a piece of
    work in its own right rather than a line in this file.
---------------------------------------------------------*/

.hera-screen {
    --hera-bg-dark: #0d1018;
    --hera-bg-card: #1a1d2a;
    --hera-blue: #00bfff;
    --hera-blue-dark: #0099cc;
    --hera-blue-glow: rgba(0, 191, 255, 0.4);
    --hera-ink: #e0e7ff;
    --hera-ink-dim: #8a9cb3;
    --hera-line: #2c3a56;
    --hera-ok: #22c55e;
    --hera-warn: #f59e0b;
    --hera-bad: #ef4444;

    /* 꺼진 컨트롤의 색. 왜 팔레트에 따로 있는지는 「--- unavailable ---」에 */
    --hera-off-bg: #252a35;
    --hera-off-ink: #8d97a8;
    --hera-off-line: #2a2f3b;
    --hera-off-faint: #5b6472;
    --hera-off-hatch: repeating-linear-gradient(
        135deg,
        transparent 0 5px,
        rgba(255, 255, 255, 0.045) 5px 10px
    );

    box-sizing: border-box;
    max-width: 1600px;
    margin: 30px auto;
    padding: 0 20px;
    color: var(--hera-ink);
    font-family: "Poppins", "Noto Sans KR", sans-serif;
}

.hera-screen *,
.hera-screen *::before,
.hera-screen *::after {
    box-sizing: border-box;
}

/* --- the two-column split the money screens use ------------------------- */

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

.hera-screen .hera-columns.hera-single {
    grid-template-columns: minmax(0, 1fr);
}

/* --- card --------------------------------------------------------------- */

.hera-screen .hera-card {
    background-color: var(--hera-bg-card);
    border: 1px solid var(--hera-line);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 25px;
}

.hera-screen .hera-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 25px;
    border-bottom: 1px solid var(--hera-line);
    background-color: rgba(0, 0, 0, 0.15);
}

.hera-screen .hera-card-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--hera-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Icon-and-title, as one flex item so the header's space-between still works
   when a card grows a right-hand control. */
.hera-screen .hera-card-title {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

/*
   The export's own icon vocabulary — deposit.css / withdraw.css / point.css
   each open their card headers with a 24px SVG mask tinted the primary blue,
   and these are those masks, byte for byte. They were the first thing the
   operator named missing (「아이콘들이나 …」): the ported cards had the
   headers and not the marks.
*/
.hera-screen .hera-ico {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    background-color: var(--hera-blue);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.hera-screen .hera-ico-notice { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E"); }
.hera-screen .hera-ico-deposit { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19 12v7H5v-7H3v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2zm-6 .67l2.59-2.58L17 11.5l-5 5-5-5 1.41-1.41L11 12.67V3h2v9.67z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19 12v7H5v-7H3v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2zm-6 .67l2.59-2.58L17 11.5l-5 5-5-5 1.41-1.41L11 12.67V3h2v9.67z'/%3E%3C/svg%3E"); }
.hera-screen .hera-ico-withdraw { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M5 12V5h14v7h2V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v7h2zm6-1.33l-2.59 2.58L7 11.84l5-5 5 5-1.41 1.41L13 10.67V18h-2v-7.33z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M5 12V5h14v7h2V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v7h2zm6-1.33l-2.59 2.58L7 11.84l5-5 5 5-1.41 1.41L13 10.67V18h-2v-7.33z'/%3E%3C/svg%3E"); }
.hera-screen .hera-ico-point { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M16.01 11H4v2h12.01v3L20 12l-3.99-4v3z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M16.01 11H4v2h12.01v3L20 12l-3.99-4v3z'/%3E%3C/svg%3E"); }
.hera-screen .hera-ico-history { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.25 2.52.77-1.28-3.52-2.09V8H12z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.25 2.52.77-1.28-3.52-2.09V8H12z'/%3E%3C/svg%3E"); }

.hera-screen .hera-card-body {
    padding: 25px;
}

/* --- read-only rows ----------------------------------------------------- */

.hera-screen .hera-rows {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 25px;
}

.hera-screen .hera-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.hera-screen .hera-row > label {
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--hera-ink-dim);
}

.hera-screen .hera-row > .hera-value {
    text-align: right;
    font-size: 15px;
    color: var(--hera-ink);
    word-break: break-all;
}

.hera-screen .hera-row > .hera-value.hera-strong {
    font-size: 22px;
    font-weight: 700;
    color: var(--hera-blue);
}

.hera-screen .hera-row-stack {
    display: block;
}

.hera-screen .hera-row-stack > label {
    display: block;
    margin-bottom: 10px;
}

.hera-screen .hera-row-stack > .hera-value {
    text-align: left;
}

/* --- amount ------------------------------------------------------------- */

.hera-screen .hera-amount {
    background-color: var(--hera-bg-dark);
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 25px;
}

.hera-screen .hera-amount > label {
    display: block;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--hera-ink-dim);
}

/* `.amount-input-group` — the tether pages put both boxes in the one well,
   each with its own label. The group carries the 15px the single-box screens
   put on `.amount-input`, so the two compose the same either way. */
.hera-screen .hera-amount-group {
    margin-bottom: 15px;
}

.hera-screen .hera-amount-group > label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--hera-ink-dim);
}

.hera-screen .hera-amount-group .hera-amount-input {
    margin-bottom: 0;
}

/*
   테더의 금액칸은 원화의 금액칸보다 한 단 작습니다.

   `deposit-trc20.css:177` · `withdraw-trc20.css:135` 은 45px 높이에 18px/600,
   단위는 14px, placeholder 는 12px 로 적습니다. 원화 쪽(24px/700, 67px)을 그대로
   물려 쓰고 있어서 1280 실측이 68px 였고, **이 화면에는 그 칸이 둘** 이라 원본
   보다 46px 이 더 들었습니다. 원본이 여기서만 줄여 잡은 이유가 그것으로 보입니다
   — 한 결정에 칸이 둘이면 둘 다 표제 크기일 수는 없습니다.
*/
.hera-screen .hera-amount-group .hera-amount-input input {
    height: 45px;
    padding: 12px 65px 12px 20px;
    font-size: 18px;
    font-weight: 600;
}

.hera-screen .hera-amount-group .hera-amount-input input::placeholder {
    font-size: 12px;
}

.hera-screen .hera-amount-group .hera-amount-input .hera-unit {
    font-size: 14px;
}

/* `.amount-buttons { margin-top: 20px }` — 테더 두 시트에만 있습니다. 여기서만
   금액 칩이 합계선 아래로 내려오기 때문입니다. */
.hera-screen .hera-amount > .hera-final-amount + .hera-amount-buttons {
    margin-top: 20px;
}

.hera-screen .hera-amount .hera-hint {
    margin: 0 0 10px;
    font-size: 12px;
    color: var(--hera-ink-dim);
}

.hera-screen .hera-amount-input {
    position: relative;
    margin-bottom: 15px;
}

.hera-screen .hera-amount-input input {
    width: 100%;
    background-color: var(--hera-bg-card);
    border: 1px solid var(--hera-line);
    border-radius: 8px;
    padding: 15px 50px 15px 20px;
    color: var(--hera-blue);
    font-size: 24px;
    font-weight: 700;
    text-align: right;
    font-family: inherit;
    outline: none;
    transition: all 0.3s ease;
}

.hera-screen .hera-amount-input input:focus {
    border-color: var(--hera-blue);
    box-shadow: 0 0 10px var(--hera-blue-glow);
}

.hera-screen .hera-amount-input input::placeholder {
    color: var(--hera-ink-dim);
    font-size: 14px;
    font-weight: 400;
    text-align: left;
}

.hera-screen .hera-amount-input .hera-unit {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    font-weight: 600;
    color: var(--hera-ink-dim);
    pointer-events: none;
}

/*
   금액 칩은 한 줄입니다.

   `repeat(auto-fit, minmax(80px, 1fr))` 이었는데, `auto-fit` 은 칸 수를 **바닥
   값으로** 셉니다 — 글자가 실제로 얼마를 쓰든 한 칸에 80px 을 잡아 둡니다.
   가장 넓은 칩이 요구하는 것은 62px(글자 38 + 여백 24)뿐이라, 1920 에서 상자가
   510px 이고 여섯 칩이 422px 이면 되는데도 다섯만 놓고 여섯째를 접었습니다.
   운영자가 본 것이 그 5+1 입니다.

   `grid-auto-flow: column` 은 개수를 시트에 적지 않고도 전부 한 줄에 놓습니다.
   화면마다 칩 수가 다를 수 있고(지금은 셋 다 여섯), 그 수는 모델의 것이지
   시트의 것이 아닙니다.
*/
.hera-screen .hera-amount-buttons {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 10px;
}

/* `point.css`'s `.amount-buttons-extra`: 전액 and 정정하기 share one line under
   the denominations, rather than the reset spanning a row of its own. The two
   set the box outright where the chips add to it, which is why the export
   separates them instead of making them two more chips. */
.hera-screen .hera-amount-extra {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}

.hera-screen .hera-amount-extra .hera-btn-reset {
    margin-top: 0;
}

.hera-screen .hera-btn-max {
    /* `--special-blue`, the one colour `point.css` reserves for this button. */
    background-color: #254397;
    color: var(--hera-ink);
}

.hera-screen .hera-btn-max:hover:not(:disabled) {
    background-color: #365dc1;
}

/* --- buttons ------------------------------------------------------------ */

.hera-screen .hera-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    border-radius: 8px;
    padding: 12px 20px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

/*
   좌우 여백이 12 가 아니라 6 인 것은 가장 좁은 칸 때문입니다. 1280 에서 폼이
   목록과 폭을 나눠 가지므로 이 상자가 382px 까지 좁아지고, 여섯 칩에 간격
   10 이면 한 칩이 55px 입니다. 「500만」이 38px 이니 좌우 24 로는 7px 이
   모자라 잘립니다 — 그리고 **잘린 글자는 그려지지 않아 넘침이 0** 이라
   어느 검사도 말해 주지 않습니다.
*/
.hera-screen .hera-btn-amount {
    background-color: transparent;
    border: 1px solid var(--hera-line);
    color: var(--hera-ink-dim);
    padding: 12px 6px;
}

.hera-screen .hera-btn-amount:hover:not(:disabled) {
    border-color: var(--hera-blue);
    color: var(--hera-blue);
    background-color: var(--hera-bg-card);
}

.hera-screen .hera-btn-reset {
    margin-top: 10px;
    width: 100%;
    padding: 12px;
    background-color: #374151;
    color: var(--hera-ink);
}

.hera-screen .hera-btn-reset:hover:not(:disabled) {
    background-color: #4b5563;
}

.hera-screen .hera-btn-secondary {
    background-color: transparent;
    border: 1px solid var(--hera-line);
    color: var(--hera-ink-dim);
}

.hera-screen .hera-btn-secondary:hover:not(:disabled) {
    background-color: var(--hera-line);
    color: var(--hera-ink);
}

/*
   계좌문의 (2026-09-07 운영자 요청 — 「더 잘보여야해 눈에 들어오게」).

   이 단추는 늘 마무리 단추 옆에 섭니다. 같은 파랑으로 채우면 둘이 한
   덩어리로 보이므로 **호박색**으로 채웁니다 — 찬 판에서 따뜻한 색이 먼저
   눈에 듭니다.

   바깥 고리는 한 화면에 이것 하나뿐이라야 뜻이 있습니다.

   `opacity` 를 안 씁니다. 못 누르는 상태는 아래 482줄이 통째로 맡고 있고
   (`hera-disabled-state.spec.ts` 가 그것을 붙들고 있습니다), 여기서 흐리게
   하면 두 규칙이 겹칩니다.
*/
.hera-screen .hera-btn-bank {
    background-color: var(--hera-warn);
    border: 1px solid var(--hera-warn);
    color: var(--hera-bg-dark);
    font-weight: 700;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.3);
}

.hera-screen .hera-btn-bank:hover:not(:disabled) {
    background-color: #ffb43a;
    border-color: #ffb43a;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.38);
}

.hera-screen .hera-btn-primary {
    background-color: var(--hera-blue);
    color: var(--hera-bg-dark);
}

.hera-screen .hera-btn-primary:hover:not(:disabled) {
    background-color: var(--hera-blue-dark);
}

.hera-screen .hera-btn-submit {
    width: 100%;
    padding: 16px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
    background-color: var(--hera-blue);
    color: var(--hera-bg-dark);
    box-shadow: 0 5px 15px var(--hera-blue-glow);
}

.hera-screen .hera-btn-submit:hover:not(:disabled) {
    background-color: var(--hera-blue-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px var(--hera-blue-glow);
}

/* --- unavailable ---------------------------------------------------------
   꺼진 컨트롤은 여기 한 곳에서 정합니다. 화면마다 손보지 않는 이유는 아래를
   재 보면 나옵니다.

   **반투명만으로는 이 팔레트에서 「못 누른다」가 되지 않습니다.** 제출 버튼은
   #00bfff 이고 그것이 얹히는 카드는 #1a1d2a 이라 대비가 7.9:1 입니다. 여기에
   opacity 0.5 를 씌우면 카드 위에서 #0d6e94 로 합성되는데, 그래도 카드 대비가
   2.9:1 입니다 — 어두운 바탕 위의 밝은 파랑은 반만 남겨도 파랑이고, 회원은
   그것을 살아 있는 버튼으로 읽습니다. 눌러 보고 아무 일도 없으면 사이트가
   고장 났다고 결론짓습니다. 이유를 말하지 않는 거절과 같은 실패입니다.

   그래서 투명도를 걷어내고 색을 갈아끼웁니다. **꺼진 것은 색조를 잃습니다.**
   --hera-off-bg 위에서 카드 대비가 1.17:1 이라 판 위에 얹힌 판일 뿐 떠오르지
   않고, 글자는 --hera-off-ink 로 그 판 위에서 4.9:1 이라 「신청하기」는 그대로
   읽힙니다. 못 누르는 것과 안 보이는 것은 다릅니다.

   색만으로 말하지 않으려고 빗금을 한 겹 더 깝니다. 색각 이상이거나 밝은
   곳에서 폰을 보는 회원에게도 남는 신호이고, 배경 이미지라 자리를 차지하지
   않으므로 어떤 폭에서도 줄바꿈을 바꾸지 않습니다.

   관용구는 둘이고, 살아 있을 때의 모양에 따라 갈립니다. **칠해져 있던 것은
   판이 되고**(제출·기본·보조 버튼, 입력칸), **원래 유령이던 것은 흐려집니다**
   (페이저, 목록 제목, 안내문 속 링크 버튼). 유령에 판을 씌우면 꺼진 쪽이 살아
   있는 쪽보다 눈에 띄는 뒤집힌 결과가 나옵니다.

   커서는 여기서 말하지만 폰에는 커서가 없습니다. 이유를 손가락으로 아는 길은
   `title` 이 아니라 화면에 적힌 문장이고, 그 문장은 뷰가 `.hera-blocked` 로
   놓습니다 — 아래 참조.                                                     */

.hera-screen .hera-btn:disabled {
    opacity: 1;
    background-color: var(--hera-off-bg);
    background-image: var(--hera-off-hatch);
    border-color: var(--hera-off-line);
    color: var(--hera-off-ink);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* 입력칸도 같은 판이 됩니다. 테더 두 칸은 시세를 못 부를 때 꺼지는데, 지금까지
   24px 굵은 파랑을 그대로 두고 있었습니다 — 꺼진 티가 전혀 나지 않는 데다 그
   숫자가 아직 유효한 시세처럼 보였습니다. `-webkit-text-fill-color` 는 iOS
   사파리가 disabled 입력의 글자색을 제 마음대로 흐리는 것을 막습니다. */
.hera-screen .hera-amount-input input:disabled,
.hera-screen .hera-field input:disabled,
.hera-screen .hera-field textarea:disabled {
    opacity: 1;
    background-color: var(--hera-off-bg);
    background-image: var(--hera-off-hatch);
    border-color: var(--hera-off-line);
    color: var(--hera-off-ink);
    -webkit-text-fill-color: var(--hera-off-ink);
    cursor: not-allowed;
}

.hera-screen .hera-amount-input input:disabled::placeholder {
    color: var(--hera-off-faint);
    -webkit-text-fill-color: var(--hera-off-faint);
}

/* 칸에 박힌 단위도 같이 죽어야 합니다. 원 · USDT 만 밝게 남으면 칸이 아직
   살아 있는 것처럼 보입니다. */
.hera-screen .hera-amount-input input:disabled + .hera-unit {
    color: var(--hera-off-faint);
}

/* 유령 쪽. 페이저는 살아 있을 때 #0d1018 판에 테두리가 또렷한데, 꺼짐 판
   #252a35 는 카드보다 **밝습니다** — 판을 씌우면 꺼진 「이전」이 살아 있는
   「다음」보다 밝아지는 뒤집힌 결과가 납니다. 그래서 판을 놓고 물러납니다.

   글자는 여기서도 --hera-off-ink 입니다. 처음에는 더 흐린 --hera-off-faint 를
   썼는데 카드 위에서 2.8:1 이라 읽히지 않았습니다. 「못 누른다」를 「안 보인다」
   로 말하는 것은 이 회차가 고치려는 바로 그 실패입니다. 유령이 꺼진 티는 글자
   밝기가 아니라 **판과 테두리가 사라지는 것**으로 냅니다 — 살아 있는 목록
   제목은 #e0e7ff, 안내문 속 링크는 파랑이라 회색으로 내려앉는 것만으로도
   갈립니다. --hera-off-faint 는 죽은 칸의 placeholder 와 단위처럼 살아 있을 때도
   보조였던 것에만 남습니다. */
.hera-screen .hera-pager button:disabled {
    opacity: 1;
    background-color: transparent;
    border-color: var(--hera-off-line);
    color: var(--hera-off-ink);
    cursor: not-allowed;
}

.hera-screen .hera-subject:disabled {
    color: var(--hera-off-ink);
    cursor: default;
}

.hera-screen .hera-pending button:disabled {
    color: var(--hera-off-ink);
    text-decoration-style: dotted;
    cursor: not-allowed;
}

/* 이유를 적는 자리. 폰에는 hover 가 없으므로 `title` 은 손가락에게 아무 말도
   하지 않습니다 — 막힌 컨트롤 옆에 문장을 놓는 것이 터치 회원이 이유를 아는
   유일한 길입니다. 문구는 모델의 것이고 뷰는 자리만 정합니다. */
.hera-screen .hera-blocked {
    flex: 1 1 100%;
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.7;
    color: var(--hera-warn);
}

.hera-screen .hera-actions .hera-blocked {
    margin-top: 0;
    text-align: right;
}

/* --- notices and alerts -------------------------------------------------- */

/*
   **이것은 띠가 아니라 일반 안내문입니다 — `.hera-notice-wrap` 으로 좁히지
   마십시오.** 장애 띠의 범위를 좁힐 때 이 블록까지 함께 좁혀진 적이 있고,
   그러면 띠 밖에 있는 안내문(출석체크 · 회원가입 · 카드 안의 줄)이 기본
   스타일을 하나도 못 받습니다. 띠 쪽 규칙은 `.hera-screen.hera-notice-wrap
   .hera-notice`(0,3,0)이라 이 규칙(0,2,0)을 자기 자리에서 이깁니다 — 좁히지
   않아도 띠는 띠대로 그려집니다.
*/
.hera-screen .hera-notice {
    margin: 0 0 12px;
    padding: 14px 16px;
    border-radius: 8px;
    border: 1px solid var(--hera-line);
    background-color: var(--hera-bg-dark);
    font-size: 13px;
    line-height: 1.7;
    color: var(--hera-ink-dim);
    white-space: pre-line;
}

.hera-screen .hera-alert {
    margin: 0 0 12px;
    padding: 14px 16px;
    border-radius: 8px;
    border: 1px solid var(--hera-line);
    font-size: 13px;
    line-height: 1.6;
}

.hera-screen .hera-alert-info {
    border-color: rgba(0, 191, 255, 0.35);
    background-color: rgba(0, 191, 255, 0.08);
    color: var(--hera-ink);
}

.hera-screen .hera-alert-ok {
    border-color: rgba(34, 197, 94, 0.35);
    background-color: rgba(34, 197, 94, 0.08);
    color: var(--hera-ok);
}

.hera-screen .hera-alert-bad {
    border-color: rgba(239, 68, 68, 0.35);
    background-color: rgba(239, 68, 68, 0.08);
    color: var(--hera-bad);
}

.hera-screen .hera-alert-warn {
    border-color: rgba(245, 158, 11, 0.35);
    background-color: rgba(245, 158, 11, 0.08);
    color: var(--hera-warn);
}

.hera-screen .hera-alert a {
    color: var(--hera-blue);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* --- page head and switch strip (테더입금 · 테더출금) --------------------- */

.hera-screen .hera-page-head {
    margin-bottom: 20px;
}

.hera-screen .hera-page-head h2 {
    margin: 0 0 6px;
    font-size: 24px;
    font-weight: 700;
    color: var(--hera-ink);
}

.hera-screen .hera-page-head p {
    margin: 0;
    font-size: 13px;
    color: var(--hera-ink-dim);
}

.hera-screen .hera-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.hera-screen .hera-tab {
    flex: 1 1 0;
    padding: 13px 10px;
    border: 1px solid var(--hera-line);
    border-radius: 8px;
    background-color: var(--hera-bg-card);
    color: var(--hera-ink-dim);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: all 0.2s ease;
}

.hera-screen .hera-tab:hover {
    border-color: var(--hera-blue);
    color: var(--hera-blue);
}

.hera-screen .hera-tab-on {
    background-color: var(--hera-blue);
    border-color: var(--hera-blue);
    color: var(--hera-bg-dark);
}

/* --- the rate, in the header where the export puts it --------------------

   `.header-rate-display` on both tether pages: one line at the right end of
   the card header, in the approved-green the export reserves for a figure
   that is settled. The 기준 시각 rides with it — it is what makes the number
   checkable — and wraps under it on a narrow card rather than being dropped,
   because a rate with no timestamp is the thing the staleness work exists to
   prevent.                                                                  */

.hera-screen .hera-header-rate {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-end;
    gap: 4px 8px;
    min-width: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--hera-ok);
    text-align: right;
}

.hera-screen .hera-header-rate-label,
.hera-screen .hera-header-rate-taken {
    font-size: 12px;
    font-weight: 400;
    color: var(--hera-ink-dim);
}

.hera-screen .hera-header-rate b {
    font-weight: 700;
    white-space: nowrap;
}

/*
   그리고 **제목은 시세에 자리를 내주지 않습니다.**

   원본의 이 머리글도 `space-between` 에 둘입니다(deposit-trc20.ejs:40) —
   왼쪽 `.header-title-group`, 오른쪽 `.header-rate-display`. 다만 원본의
   오른쪽은 「1 USDT ≈ 1,392 KRW」 한 조각이고, 우리는 거기에 「적용시세」와
   기준 시각을 더했습니다. 두 항목 모두 `min-width: 0` 이라 모자란 폭을
   **비율대로** 나눠 가졌고, 지는 쪽은 언제나 `nowrap · overflow: hidden ·
   ellipsis` 를 쓰는 제목이었습니다. 배포본 실측(테더 입금신청, 제목이
   필요로 하는 폭 116px):

        360   제목칸 70.64  →  45.36px 이 그려지지 않음
        390   제목칸 81.98  →  34.02px            「테더 입…」
        414   제목칸 91.05  →  24.95px
        768   제목칸 108.78 →  0

   한 시간 뒤 다시 재니 390 이 79.98 이었습니다. 시세가 늙어 「1분 전」이
   「13분 전」이 되면서 오른쪽이 한 글자 넓어진 만큼입니다 — **제목이 몇 자
   보이는지가 시세를 언제 떠 왔는지에 달려 있었습니다.**

   잘린 글자는 넘치지 않습니다 — `overflow: hidden` 이 그 일을 하니 폭을
   재는 검사도 조용하고, 화면에는 아무것도 삐져나오지 않습니다. 원본의 `h3`
   에는 그 세 줄이 아예 없어(deposit-trc20.css:99) 좁아지면 접힐 뿐 잘리지
   않습니다.

   그래서 줄지 않는 쪽을 제목으로 못 박습니다. 신청서 머리글의 제목은 세
   화면 모두 고정된 짧은 낱말이고(입금하기 · 출금하기 · 포인트 전환 · 테더
   입금신청 · 테더 출금신청), 시세는 이미 `flex-wrap: wrap` 이라 접혀서
   갚습니다. 치른 값을 재서 적습니다 — 머리글 높이:

        360   81.58 → 104.77   (+23.19: 기준 시각이 두 줄로 접힙니다)
        390   81.58 → 81.58    (시세 194.02 → 160, 여전히 세 줄)
       1280   71    → 71       (시세에 남는 폭이 있어 아무것도 안 움직임)

   360 에서 23px 을 더 쓰는 것은, 카드 이름의 45px 을 안 그리는 것보다 쌉니다.

   `flex-wrap` 을 머리글에 걸어 시세를 통째로 다음 줄로 내리는 답은 재 보고
   버렸습니다. 줄바꿈은 **줄어들기 전의** 폭으로 판정하므로 1280 에서도
   내려가 버립니다. 남는 한 가지 한계는 적어 둡니다: 시세에서 끊으면 안 되는
   조각은 값 `<b>` 이고 그것이 107.95px 입니다. 시세 칸은 대략 「폭 − 230」
   이라 338px 아래에서 그 조각이 제 칸을 넘습니다. 지원하는 가장 좁은 폭
   360 에서 칸이 130px 이므로 22.05px 이 남습니다.
*/
.hera-screen .hera-form-card .hera-card-title {
    flex-shrink: 0;
}

/* --- the rate headline ---------------------------------------------------
   Given a floor rather than a spacer string, because the four states this row
   can be in are different heights and the row must not jump between them.

   Kept for the platform-shaped fallback and for any screen that still leads
   with it; the tether pair now states a fresh rate in the header instead.   */

.hera-screen .hera-rate {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 104px;
    margin-bottom: 25px;
    padding: 18px 20px;
    border: 1px solid var(--hera-line);
    border-radius: 8px;
    background-color: var(--hera-bg-dark);
}

.hera-screen .hera-rate-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--hera-ink-dim);
}

.hera-screen .hera-rate-price {
    font-size: 28px;
    font-weight: 700;
    color: var(--hera-blue);
    word-break: break-all;
}

.hera-screen .hera-rate-price .hera-unit-inline {
    margin-left: 4px;
    font-size: 14px;
    font-weight: 500;
    color: var(--hera-ink-dim);
}

.hera-screen .hera-rate-taken {
    font-size: 12px;
    color: var(--hera-ink-dim);
}

.hera-screen .hera-rate .hera-alert {
    margin: 4px 0 0;
}

/* --- the address well ---------------------------------------------------- */

.hera-screen .hera-address {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: stretch;
}

.hera-screen .hera-address code {
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--hera-line);
    border-radius: 8px;
    background-color: var(--hera-bg-dark);
    color: var(--hera-blue);
    font-size: 13px;
    line-height: 1.6;
    word-break: break-all;
    user-select: all;
}

.hera-screen .hera-hint {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--hera-ink-dim);
}

/* --- list (공지사항) ------------------------------------------------------ */

/*
   `padding: 0 15px` 와 상태 열의 100px 는 원본을 다시 재서 온 것입니다
   (`announcement.css:71-87` — `.listbox .listhead` 도 `.listbody .row` 도
   `padding: 0 15px`, 열은 `100px 1fr`). 우리 쪽에는 좌우 여백이 아예 없어서
   목록 전체가 카드 안쪽 끝에 붙어 있었고, 상태 알약이 든 첫 열은 10px 넓었습니다.

   **열이 둘인 것은 원본과 같습니다.** 한때 셋째 열(등록일 180px)을 두고
   「원본에 없지만 회원에게 쓸모 있으니 남긴다」고 적어 두었는데, 운영자가
   등록일을 회원에게 보이지 않기로 했습니다 (2026-09-05). 그래서 그 열이
   나갔고, 결과적으로 원본 치수와 같아졌습니다.

   이 규칙은 지금 공지사항 하나만 씁니다. 고객센터는 `-inquiries` 로 자기
   다섯 열을 따로 정하고, 돈 화면과 포인트는 `.hera-listbox` 안이라 그쪽
   규칙을 받습니다.
*/
.hera-screen .hera-listhead,
.hera-screen .hera-listrow {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
    align-items: center;
    padding: 0 15px;
}

/* 원본의 목록 머리 밑줄은 2px 입니다 — 줄 사이의 1px 과 굵기로 갈립니다. */
.hera-screen .hera-listhead {
    border-bottom: 2px solid var(--hera-line);
}

.hera-screen .hera-listhead .hera-col {
    padding: 15px 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--hera-ink-dim);
    text-align: center;
}

.hera-screen .hera-listhead .hera-col-title,
.hera-screen .hera-listrow .hera-col-title {
    text-align: left;
}

/* 줄 사이 선은 원본과 같은 --border-color 그대로입니다. 반투명으로 깔아 두면
   카드 위에서 rgb(35,42,60) 이 되어 머리의 2px 과 굵기가 아니라 **색**으로도
   갈려 버립니다 — 원본이 나누는 것은 굵기 하나입니다. */
.hera-screen .hera-listrow {
    border-bottom: 1px solid var(--hera-line);
    transition: background-color 0.2s ease;
}

.hera-screen .hera-listrow:hover {
    background-color: #252936;
}

.hera-screen .hera-listrow .hera-col {
    padding: 15px 10px;
    font-size: 14px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hera-screen .hera-subject {
    display: block;
    width: 100%;
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--hera-ink);
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hera-screen .hera-subject:hover:not(:disabled) {
    color: var(--hera-blue);
}

/*
   공지사항만 제목을 가운데로 (「둘다 공지사항에 등록일 제외하고 제목이나 내용
   가운데정렬해줘」).

   **등록일은 손대지 않습니다.** 데스크톱에서는 바로 위
   `.hera-listrow .hera-col` 이 이미 가운데로 두고 있고, 폰 카드에서는 아래 767
   블록이 오른쪽 끝에 붙여 둡니다 — 둘 다 그대로입니다.

   **`.hera-announcements` 로 좁히는 것이 요점입니다.** 제목 열을 왼쪽으로 두는
   규칙은 `.hera-listhead .hera-col-title, .hera-listrow .hera-col-title` 이고
   고객센터가 같은 것을 씁니다. 고객센터의 제목 칸에는 미리보기 두 줄이 딸려
   있어(`.hera-preview`, 폰에서 `-webkit-line-clamp: 2`) 가운데로 두면 문단이
   가운데 정렬된 것처럼 읽힙니다. 여기서 옮기는 것은 공지 목록 하나입니다.

   **미디어 질의 밖입니다.** 폰 카드에서 칸을 왼쪽으로 돌리는 규칙은 767 블록
   안의 `.hera-screen .hera-listrow .hera-col`(0,3,0)인데 여기 것은 (0,4,0)이라
   폭과 무관하게 이깁니다 — 표에서든 카드에서든 제목은 같은 자리에 섭니다.
   미디어 질의가 특이도를 주지 않는다는 것을 이 시트가 세 번 잊었으므로
   (`skin-css-reachable.spec.ts` 머리말) 여기서는 그것을 이용하는 쪽으로 씁니다.

   `.hera-subject` 는 `display: block; width: 100%` 인 단추라 제 안에서 글자만
   가운데로 갑니다. 칸과 단추 둘 다 옮기지 않으면 칸만 가운데가 되고 글은
   100% 폭 단추 안에서 왼쪽에 남습니다.
*/
.hera-screen.hera-announcements .hera-listhead .hera-col-title,
.hera-screen.hera-announcements .hera-listrow .hera-col-title,
.hera-screen.hera-announcements .hera-subject {
    text-align: center;
}

.hera-screen .hera-tag {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.hera-screen .hera-tag-new {
    background-color: rgba(34, 197, 94, 0.1);
    color: var(--hera-ok);
}

.hera-screen .hera-tag-read {
    background-color: rgba(138, 156, 179, 0.1);
    color: var(--hera-ink-dim);
}

.hera-screen .hera-btn-row {
    width: 100%;
    padding: 8px 10px;
    font-size: 13px;
}

/* 고객센터 is the same board again, with 구분 and 상태 either side of the
   subject and a toolbar under it. 쪽지함 had a board of its own here
   until the two were folded into one screen; 구분 is the column that replaced
   the separate page, and it sits first because it is the question a member
   answers before any other — did I ask this, or did they send it to me. */

/* 이 화면만 1200 입니다(inquriy.css:30). 공지사항·배팅내역은 자기 시트에서
   1600 이고 마이페이지는 900 이라, 폭은 화면마다 다른 사실이지 `.hera-screen`
   의 기본값이 아닙니다. */
.hera-screen.hera-inquiries {
    max-width: 1200px;
}

/*
   쪽지 상세의 「운영자가 보낸 쪽지입니다 · 여기에 답장할 수는 없습니다」 상자는
   위 「notices and alerts」의 `.hera-notice` 를 그대로 씁니다 — 여기에 따로
   두지 않습니다.

   한때 그 기본 규칙이 장애 띠와 함께 `.hera-notice-wrap` 안으로 들어가는 바람에
   래퍼 밖의 이 문장이 상자를 잃었고, 그 때 이 자리에 아홉 선언을 그대로 베낀
   복사본이 섰습니다. 기본 규칙이 제자리로 돌아왔으므로 복사본은 지웠습니다 —
   같은 값 두 벌은 기본값을 고쳐도 이 화면만 안 따라오게 만듭니다.

   다시 좁히는 일이 생기면 `skin-css-reachable.spec.ts` 가 잡습니다. 그렇게
   하는 순간 띠 규칙과 선택자가 같아지면서 `padding` 을 서로 다른 값으로 두 번
   정하게 되기 때문입니다.
*/

/* 날짜 열이 186px 인 이유는 재 봤기 때문입니다. 「2026. 08. 26. 오전 06:22」은
   이 글꼴 14px 에서 152px 이고 칸 좌우 여백이 10px 씩이라 172px 이 필요한데,
   앞서 170px 이었습니다 — 2px 모자라서 자릿수에 따라 뒤가 잘렸다 말았다 했고
   가로 넘침은 0 이라 아무 말도 하지 않았습니다. 넉넉히 두는 쪽이 맞습니다:
   줄어드는 것은 제목 열(`1fr`)이고 제목은 원래 말줄임입니다. */
.hera-screen .hera-listhead-inquiries,
.hera-screen .hera-listrow-inquiries {
    grid-template-columns: 96px minmax(0, 1fr) 110px 186px 90px;
}

/*
   1023 아래에서 고정 열 넷을 줄입니다. 폰만 보고 폰만 고치면 놓치는 자리라
   재 봤습니다 — **768 이 390 보다 나빴습니다.**

     폭    제목칸    현실적인 제목 305px 대비
     768   144px    161px 모자람 (한글 11자)
     820   196px    109px 모자람 (16자)
     900   276px     29px 모자람 (22자)
     1023  399px    들어감

   768 은 아이패드 세로이고, 이 화면의 고정 열 넷(96+110+186+90 = 482px)이
   726px 카드 안에서 제목에게 144px 만 남겼기 때문입니다. 공지사항은 열이
   둘뿐이라 768 에서도 346px 이고 아무 문제가 없습니다 — 다섯 열짜리 이
   목록만의 일입니다.

   줄이는 쪽은 알약 셋과 등록일입니다. 알약은 「새 쪽지」 세 글자가 76px 이라
   96px 이 필요 없었고, 등록일은 104px 에서 두 줄로 접히게 둡니다 — 날짜가
   두 줄이 되는 것은 제목이 열한 자에서 끊기는 것보다 싼 값입니다. 1024 부터는
   원본 치수 그대로입니다.

   그러고도 768 에서 260px 이라 30자짜리 제목에는 45px 이 모자랍니다. 남은
   45px 을 고정 열에서 더 뜯는 대신 **제목을 접습니다.** 말줄임은 열 폭이
   글보다 확실히 넓을 때 줄맞춤을 지키는 장치이고, 좁아지면 지키는 것이
   줄맞춤뿐이라 — 남는 것이 「[점검 안내] 8월 30일 새벽 정기 서…」입니다.
   1024 위에서는 제목 열이 515px 이상이라 접힐 일이 없으므로, 데스크톱 표의
   한 줄 47px 리듬은 그대로입니다.
*/
@media (max-width: 1023px) {
    .hera-screen .hera-listhead-inquiries,
    .hera-screen .hera-listrow-inquiries {
        grid-template-columns: 84px minmax(0, 1fr) 96px 104px 82px;
    }

    .hera-screen .hera-listhead-inquiries .hera-col-date,
    .hera-screen .hera-listrow-inquiries .hera-col-date {
        white-space: normal;
        font-size: 13px;
    }

    .hera-screen .hera-listrow .hera-subject {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
}

/* 구분 태그. 운영자가 보낸 것에만 색이 붙습니다 — 목록의 대부분은 회원 자신이
   연 문의이고, 그 사이에서 눈에 띄어야 하는 쪽이 쪽지입니다. */

.hera-screen .hera-tag-note {
    background-color: rgba(0, 191, 255, 0.12);
    color: var(--hera-blue);
}

.hera-screen .hera-tag-inquiry {
    background-color: rgba(138, 156, 179, 0.1);
    color: var(--hera-ink-dim);
}

/* 전체읽음 · 전체삭제 한 쌍. 원본의 `.list-toolbar` 왼쪽 끝이고 gap 도 그
   파일의 10px 입니다. */
.hera-screen .hera-toolbar {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

/*
   `.hera-btn-row` fills the cell it sits in, which is what a 삭제 in a table row
   wants and the opposite of what a toolbar wants: two buttons each
   asking for the full width get half of it each and fold 「모든 메시지 읽기」
   onto two lines. In the toolbar they size to their label instead.
*/
.hera-screen .hera-toolbar .hera-btn-row {
    width: auto;
    white-space: nowrap;
}

.hera-screen .hera-listrow .hera-subject .hera-preview {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 400;
    color: var(--hera-ink-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 안 읽음은 열이 아니라 제목 앞의 표식입니다. 구분이 열 하나를 가져갔고, 폰
   에서 넷째 열을 낼 자리가 없습니다 — 제목 옆이면 두 폭에서 같은 자리입니다. */

.hera-screen .hera-unread-count {
    display: inline-grid;
    place-items: center;
    min-width: 17px;
    height: 17px;
    margin-right: 5px;
    padding: 0 4px;
    border-radius: 999px;
    background-color: var(--hera-bad);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    vertical-align: 1px;
}

.hera-screen .hera-tag-open {
    background-color: rgba(0, 191, 255, 0.12);
    color: var(--hera-blue);
}

.hera-screen .hera-tag-answered {
    background-color: rgba(34, 197, 94, 0.1);
    color: var(--hera-ok);
}

.hera-screen .hera-tag-closed {
    background-color: rgba(138, 156, 179, 0.1);
    color: var(--hera-ink-dim);
}

/* --- compose and reply fields -------------------------------------------- */

.hera-screen .hera-field {
    margin-bottom: 18px;
}

.hera-screen .hera-field > label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--hera-ink-dim);
}

.hera-screen .hera-count {
    margin-left: 6px;
    font-size: 12px;
    font-weight: 400;
    color: var(--hera-ink-dim);
}

.hera-screen .hera-field input,
.hera-screen .hera-field textarea {
    width: 100%;
    padding: 13px 15px;
    border: 1px solid var(--hera-line);
    border-radius: 8px;
    background-color: var(--hera-bg-dark);
    color: var(--hera-ink);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.7;
    outline: none;
    resize: vertical;
    transition: border-color 0.2s ease;
}

.hera-screen .hera-field input:focus,
.hera-screen .hera-field textarea:focus {
    border-color: var(--hera-blue);
}

/* `flex-wrap` 은 막힌 이유를 버튼 줄 아래에 놓기 위한 것입니다 — `.hera-blocked`
   가 `flex-basis: 100%` 로 들어와 제 줄을 가져가고, 감싸지 않으면 대신 버튼들이
   찌그러집니다. 이유가 없는 화면에서는 항목이 하나뿐이라 아무 차이도 없습니다. */
.hera-screen .hera-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

/* --- the thread ----------------------------------------------------------
   Bubbles, not a stack: the member's own on the right in the skin's blue, the
   service centre's on the left in the sunk colour.

   말풍선 치수는 원본을 다시 재서 맞춘 것입니다(inquriy.css:109-118).
   `.message-bubble` 은 `padding: 15px 20px`, `border-radius: 12px`, 회원 쪽은
   **꽉 찬 --primary-blue 에 --bg-dark 글자**이고 꼬리는 오른쪽 **아래** 모서리
   (`border-bottom-right-radius: 2px`), 운영자 쪽은 --bg-dark 에 왼쪽 아래
   꼬리입니다. 우리 것은 10px 14px · 12px 반지름 · 투명도 10% 파랑 · 꼬리는
   **위쪽**이었습니다 — 색이 옅어 회원 말풍선과 운영자 말풍선이 어두운 카드
   위에서 거의 같은 밝기였고, 꼬리 방향은 원본과 위아래가 뒤집혀 있었습니다.
   원본의 `gap: 20px` 도 그대로입니다.

   `overflow-wrap: anywhere` on the bubble is the whole hostile-content answer
   for this screen. A thread body is plain text — nothing here re-processes it
   — so the only way an unbroken 500-character string can be made to fit is by
   letting it break anywhere, and the bubble is capped at 80% so it cannot push
   the card wider than the viewport.

   원본의 `max-height: 500px; overflow-y: auto` 는 가져오지 않았습니다. 문의
   하나에 오가는 말은 많아야 서너 마디이고, 카드 안에 두 번째 스크롤 영역을
   만들면 폰에서 손가락이 어느 쪽을 미는지가 위치에 따라 달라집니다 — 그것은
   원본이 더 나쁜 쪽입니다.                                                   */

.hera-screen .hera-thread {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 6px 0 12px;
}

.hera-screen .hera-turn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.hera-screen .hera-turn-mine {
    align-items: flex-end;
}

/* 한 사람이 이어서 여러 마디를 할 때 말풍선 사이는 위 `gap` 이 잡고, 사람이
   바뀌는 자리에만 한 칸 더 벌립니다. 원본은 이 구분이 없어 스무 픽셀 간격만
   반복합니다 — 누가 말한 것인지가 이름표에만 있어서, 두 사람이 번갈아 말한
   자리와 한 사람이 두 번 말한 자리가 같아 보였습니다. */
.hera-screen .hera-turn-opens {
    margin-top: 4px;
}

.hera-screen .hera-turn-author {
    margin-bottom: 4px;
    padding: 0 2px;
    font-size: 12px;
    font-weight: 600;
    color: var(--hera-ink-dim);
}

.hera-screen .hera-turn-mine .hera-turn-author {
    color: var(--hera-blue);
}

.hera-screen .hera-bubble-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    max-width: 80%;
    min-width: 0;
}

.hera-screen .hera-turn-mine .hera-bubble-row {
    flex-direction: row-reverse;
}

.hera-screen .hera-bubble {
    min-width: 0;
    margin: 0;
    padding: 15px 20px;
    border: 1px solid var(--hera-line);
    border-radius: 12px;
    background-color: var(--hera-bg-dark);
    color: var(--hera-ink);
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/*
 * 고객센터가 편집기로 쓴 답변 말풍선.
 *
 * `pre-wrap` 을 끕니다 — 회원 글은 줄바꿈이 글의 일부라 그것으로 살리지만,
 * 답변은 HTML 이라 문단과 `<br>` 이 줄을 나눕니다. 켜 둔 채로 두면 태그
 * 사이의 공백까지 그대로 찍혀 문단마다 빈 줄이 하나씩 더 생깁니다.
 *
 * 나머지 — 넓은 표 · 큰 그림 · 안 끊기는 500자 — 는 `globals.css` 의 `.rich`
 * 가 가둡니다. 쪽지 본문이 쓰는 것과 같은 클래스입니다.
 */
.hera-screen .hera-bubble.rich {
    white-space: normal;
}

/* 회원 말풍선은 원본대로 꽉 찬 파랑입니다. 흐린 파랑으로 두면 어두운 카드
   위에서 운영자 말풍선(#0d1018)과 밝기가 거의 같아, 어느 쪽이 내 말인지를
   좌우 정렬 하나로만 읽어야 했습니다. 꽉 찬 #00bfff 위의 #0d1018 글자는
   대비 7.9:1 로, 이 스킨이 제출 버튼에 쓰는 것과 같은 짝입니다. */
.hera-screen .hera-turn-mine .hera-bubble {
    border-color: var(--hera-blue);
    background-color: var(--hera-blue);
    color: var(--hera-bg-dark);
    border-bottom-right-radius: 2px;
}

.hera-screen .hera-turn:not(.hera-turn-mine) .hera-bubble {
    border-bottom-left-radius: 2px;
}

/* 원본은 시각을 말풍선 **안** 아래에 넣습니다. 여기서는 밖에 둡니다 —
   운영자 답변 말풍선은 편집기가 만든 HTML 을 통째로 받는 자리라
   (`dangerouslySetInnerHTML`) 그 안에 우리 조각을 하나 더 넣을 수가 없고,
   두 말풍선 중 한쪽만 안, 한쪽만 밖이 되는 것이 더 나쁩니다. */
.hera-screen .hera-bubble-time {
    flex-shrink: 0;
    padding-bottom: 4px;
    font-size: 12px;
    white-space: nowrap;
    color: var(--hera-ink-dim);
}

/* 답변 대기 안내. 말풍선 자리에 놓이되 말풍선이 아니라는 표시로 점선입니다 —
   치수는 위의 말풍선을 따라갑니다. */
.hera-screen .hera-awaiting {
    margin: 8px 0 0 auto;
    max-width: 80%;
    padding: 15px 20px;
    border: 1px dashed rgba(0, 191, 255, 0.45);
    border-radius: 12px;
    font-size: 12px;
    line-height: 1.7;
    color: var(--hera-ink-dim);
}

.hera-screen .hera-reply {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--hera-line);
}

/* --- the list footer, where 1문의 1답변 is explained ----------------------

   원본의 `.list-toolbar` 입니다(inquriy.css:99, inquiry.ejs:71): 목록 **바로
   아래** 한 줄에 전체읽음 · 전체삭제 · `.expand` · 계좌문의, 그 다음에
   페이저. 우리 쪽은 셋이 다 다른 자리에 있었습니다 — 전체읽음·전체삭제는
   카드 머리에, 계좌문의·문의하기는 페이저 **아래**에. 「문구 뜨는 게 너무
   이상한 곳에 있다」가 이것이고, 특히 1문의 1답변 안내가 페이저를 지나
   화면 맨 아래에 앉아 있어서 문의하기가 왜 회색인지 설명하는 문장이 그
   버튼에서 제일 먼 자리에 있었습니다.

   `.hera-pending` 이 원본의 `.expand` 자리를 대신합니다 — 가운데서 늘어나며
   두 무리를 양끝으로 밀어냅니다. 위 테두리는 걷었습니다: 원본에 없고, 목록의
   마지막 줄 밑에 선을 하나 더 그으면 그 줄만 두 겹이 됩니다. */

.hera-screen .hera-listfoot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}

.hera-screen .hera-pending {
    flex: 1 1 260px;
    margin: 0;
    font-size: 12px;
    line-height: 1.7;
    color: var(--hera-ink-dim);
}

.hera-screen .hera-pending button {
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--hera-blue);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.hera-screen .hera-listfoot .hera-actions {
    flex: 0 0 auto;
    margin-left: auto;
}

.hera-screen .hera-empty {
    text-align: center;
    padding: 80px 0;
    color: var(--hera-ink-dim);
    font-size: 14px;
}

.hera-screen .hera-pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 30px;
    user-select: none;
}

.hera-screen .hera-pager button {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: 8px;
    background-color: var(--hera-bg-dark);
    border: 1px solid var(--hera-line);
    color: var(--hera-ink-dim);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.hera-screen .hera-pager button:hover:not(:disabled) {
    border-color: var(--hera-blue);
    color: var(--hera-blue);
}

.hera-screen .hera-pager button.hera-active {
    background-color: var(--hera-blue);
    border-color: var(--hera-blue);
    color: var(--hera-bg-dark);
    font-weight: 700;
}

/* 페이저의 꺼진 모양은 「--- unavailable ---」에 있습니다. 여기에 있던 같은
   선택자의 `opacity: 0.5` 는 뒤에 있다는 이유만으로 그 규칙을 덮었습니다. */

/* --- announcement body ---------------------------------------------------
   원본 `.detail-view-header` 는 **한 줄에 둘**입니다: 왼쪽에 쓴 사람, 오른쪽에
   날짜(announcement.css:101-112). 우리 쪽은 날짜 한 조각만 왼쪽에 놓고 있었고
   아래 여백도 15px 로 5px 얕았습니다. 줄 배치를 여기서 잡아 두면 뷰는 왼쪽
   조각과 오른쪽 조각을 넣기만 하면 됩니다 — 문구는 여전히 모델의 것입니다. */

.hera-screen .hera-detail-date {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin: 0 0 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--hera-line);
    font-size: 14px;
    color: var(--hera-ink-dim);
}

/* 「운영팀」쪽. 원본은 이 낱말만 --text-primary 로 올려 날짜와 갈라 놓습니다. */
.hera-screen .hera-detail-author {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: var(--hera-ink);
}

/*
   `min-height: 300px` 은 원본의 것이고 장식이 아닙니다(announcement.css:117).
   공지는 한 줄짜리도 있고 스무 줄짜리도 있는데, 바닥을 깔아 두지 않으면
   「목록으로」 단추가 공지 길이에 따라 카드 위쪽으로 튀어 올라옵니다 — 짧은
   공지를 연 회원에게는 그 단추가 제목 바로 밑에 붙어 보입니다.
*/
.hera-screen .hera-detail-body {
    min-height: 300px;
    padding: 10px;
    font-size: 14px;
    line-height: 1.8;
    color: var(--hera-ink);
}

.hera-screen .hera-detail-body img {
    max-width: 100%;
    height: auto;
}

/* 바닥은 공지사항의 것입니다. `inquriy.css` 에는 그런 규칙이 없고, 쪽지 본문
   아래에는 「운영자가 보낸 쪽지입니다」 안내와 단추 두 개가 이미 붙어 있어
   자리가 흔들리지 않습니다 — 한 줄짜리 쪽지에 300px 을 깔면 그 안내가 빈
   화면 한 장 아래로 밀려납니다. */
.hera-screen.hera-inquiries .hera-detail-body {
    min-height: 0;
}

/*
   `.detail-view-footer` (announcement.css:124). 본문 아래에 선을 긋고 「목록
   으로」를 오른쪽 끝으로 보냅니다. 우리 쪽에는 이 상자가 없어서 단추가 본문
   마지막 글자 바로 밑에 왼쪽 정렬로 붙어 있었습니다 — 카드 머리에도 같은
   단추가 있으니 아래쪽 것은 「본문을 다 읽었으면」의 자리이고, 선이 없으면
   본문의 일부처럼 읽힙니다.
*/
.hera-screen .hera-detail-foot {
    display: flex;
    justify-content: flex-end;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--hera-line);
}

/* --- signed out ---------------------------------------------------------- */

.hera-screen .hera-signed-out {
    text-align: center;
    padding: 60px 0;
}

.hera-screen .hera-signed-out p {
    margin: 0 0 18px;
    font-size: 14px;
    color: var(--hera-ink-dim);
}

/* --- phone ---------------------------------------------------------------
   The export's own breakpoint for these screens. The two columns become one
   and the board rows become cards.

   이 머리말은 한동안 「목록이 등록일 열을 내려놓는다 — 제일 먼저 안 들어가는
   것이 그것이므로」였습니다. 그 문장이 이 화면들의 결함을 그대로 적어 두고
   있었습니다: 열을 내려놓는 것이 아니라 **줄이 카드가 되는 것**이 원본의
   답이고, 카드에서는 등록일이 열을 요구하지 않으므로 버릴 이유가 없습니다.
   아래 블록에 실측이 있습니다.                                             */

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

@media (max-width: 767px) {
    .hera-screen {
        margin: 16px auto;
        padding: 0 12px;
    }

    .hera-screen .hera-card-header,
    .hera-screen .hera-card-body {
        padding: 16px;
    }

    /*
       금액 칩은 폰에서만 접힙니다. 여기 상자는 284px 이라 여섯을 한 줄에 놓으면
       한 칩이 39px 인데 「500만」이 글자만 38px 이라 잘립니다 — 넓은 화면에서
       한 줄로 만든 그 규칙을 폰까지 들고 오면, 접힘을 잘림과 바꾸는 것뿐입니다.
       바닥값 80px 이면 세 칸이 되어 3+3 으로 고르게 섭니다.
    */
    .hera-screen .hera-amount-buttons {
        grid-auto-flow: row;
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    }

    /*
       폰에서 줄은 **카드가 됩니다.** 원본 두 시트가 똑같이 그렇게 말합니다
       (announcement.css:134-143, inquriy.css:141-149): 목록 머리는 사라지고,
       `.row` 는 한 단짜리 격자에 테두리와 8px 모서리와 15px 여백을 얻고,
       `.col` 은 `white-space: normal` 로 **줄이 접힙니다.**

       우리는 그 절을 안 옮겨 왔습니다. 390 에서도 격자를 좁혀 쓰면서
       `.hera-listrow .hera-col` 의 `nowrap · overflow:hidden · ellipsis` 를
       그대로 들고 있었고, 그래서 잰 값이 이렇습니다:

         · 공지사항 제목칸 224px, 글자 12.9px → **한글 17자**. 「[점검 안내]
           8월 30일 새벽 정기 서버 점검 안내드립니다」는 324px 이 필요해
           100px 이 잘려 나갑니다.
         · 고객센터 제목칸 166px → **12자**. 미리보기는 321px 이 필요한데
           166px 이라 실측 **155px** 이 잘려 있었습니다.
         · 그리고 등록일 열은 아예 `display: none` 이었습니다 — 폰에서만
           공지가 언제 올라온 것인지 알 길이 없었다는 뜻이고, 그 열을 남긴
           이유(위 「list (공지사항)」 주석)가 정작 폰에서 무효였습니다.

       가로 넘침은 어느 쪽도 0 이었습니다. 잘린 쪽은 그려지지 않으니까요 —
       운영자가 「다 잘리네 글같은것도」라고 말한 자리가 여기입니다.
    */
    .hera-screen .hera-listhead-notices,
    .hera-screen .hera-listhead-inquiries {
        display: none;
    }

    .hera-screen .hera-listrow {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 10px;
        padding: 14px;
        margin-bottom: 12px;
        border: 1px solid var(--hera-line);
        border-radius: 8px;
    }

    .hera-screen .hera-listrow:last-child {
        margin-bottom: 0;
    }

    /* 자르던 세 선언을 여기서 놓습니다. 카드 안에서는 접히면 되고, 접히면
       잘릴 것이 없습니다. */
    .hera-screen .hera-listrow .hera-col {
        flex: 0 0 auto;
        padding: 0;
        text-align: left;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    /* 제목은 카드의 첫 줄이고 폭을 다 씁니다 — 원본의 `.col-title { order: -1 }`.
       304px 전부를 쓰고 접히므로 「몇 자까지」가 없어집니다. */
    .hera-screen .hera-listrow .hera-col-title {
        order: -1;
        flex: 1 1 100%;
    }

    /* 접히는 것은 위 1023 블록에서 이미 켰습니다 — 여기서는 카드의 첫 줄로
       올라온 만큼 크기만 올립니다. */
    .hera-screen .hera-listrow .hera-subject {
        font-size: 15px;
        line-height: 1.45;
    }

    /* 미리보기는 두 줄까지. 이것만은 여전히 자르지만 자르는 것이 일입니다 —
       본문은 열면 전부 있고, 여기서 재는 것은 「이 문의가 무엇이었는지」
       뿐입니다. 15자에서 두 줄 60자로 늘어납니다. */
    .hera-screen .hera-listrow .hera-subject .hera-preview {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        margin-top: 4px;
        white-space: normal;
        text-overflow: clip;
    }

    /* 등록일은 돌아옵니다. 카드에서는 제목 아래 오른쪽 끝, 상태 알약과 같은
       줄입니다 — 열 하나를 요구하지 않으므로 제목에서 빼앗는 것이 없습니다. */
    .hera-screen .hera-listrow .hera-col-date {
        flex: 1 1 auto;
        text-align: right;
        font-size: 12px;
        color: var(--hera-ink-dim);
    }

    /* 고객센터는 구분·상태 두 알약이 더 있어 등록일이 셋째입니다. 삭제는
       제 줄을 얻고 오른쪽 끝에 섭니다 — 카드 안에서 파괴적인 단추가
       제목과 같은 줄에 오지 않게 하는 자리이기도 합니다. */
    .hera-screen .hera-listrow-inquiries .hera-col-action {
        flex: 0 0 auto;
        margin-left: auto;
    }

    .hera-screen .hera-listrow-inquiries .hera-btn-row {
        width: auto;
        min-width: 84px;
        min-height: 44px;
    }

    .hera-screen .hera-toolbar {
        width: 100%;
    }

    .hera-screen .hera-toolbar .hera-btn-row {
        flex: 1 1 0;
        min-height: 44px;
    }

    /*
       카드 머리는 원본대로 쌓입니다(announcement.css:135 —
       `flex-direction: column; align-items: stretch`). `flex-wrap: wrap` 으로
       두면 접힐지 말지가 **제목 길이에 따라** 달라져서, 같은 화면이 두 모양을
       가집니다: 실측으로 공지 상세는 단추가 내려가 제목이 313px 을 얻었고
       고객센터 스레드는 단추가 남아 217px 이었습니다.

       그리고 제목은 여기서 접힙니다. 공용 `.hera-card-header h3` 는
       `nowrap · ellipsis` 인데, 그것은 카드가 1600·1200 이던 자리의 값입니다 —
       390 에서 18.4px 글자로 332px 은 **한글 17자**이고, 상세 화면의 제목은
       회원이 열어 본 그 글의 이름입니다. 두 화면에만 겁니다: 돈 화면들의
       머리글은 「입금하기」처럼 고정된 짧은 낱말이라 접을 이유가 없습니다.
    */
    .hera-screen.hera-announcements .hera-card-header,
    .hera-screen.hera-inquiries .hera-card-header {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .hera-screen.hera-announcements .hera-card-header h3,
    .hera-screen.hera-inquiries .hera-card-header h3 {
        font-size: 17px;
        line-height: 1.4;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    /* 원본의 `.message-item { max-width: 95% }` (inquriy.css:150). 390 에서
       말풍선 안쪽 여백이 20px 씩이라 92% 로는 글자가 앉을 자리가 한 줄에
       한 뼘씩 줄어듭니다. */
    .hera-screen .hera-bubble-row,
    .hera-screen .hera-awaiting {
        max-width: 95%;
    }

    .hera-screen .hera-bubble {
        padding: 12px 15px;
    }

    /* 원본의 `.list-toolbar { flex-wrap: wrap }` — 390 에서 전체읽음·전체삭제
       한 줄, 계좌문의 한 줄. 어느 쪽도 반으로 접힌 낱말이 되지 않습니다. */
    .hera-screen .hera-listfoot .hera-actions {
        width: 100%;
        margin-left: 0;
    }

    .hera-screen .hera-listfoot .hera-actions .hera-btn {
        flex: 1 1 0;
        min-height: 44px;
    }

    .hera-screen .hera-row {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .hera-screen .hera-row > .hera-value {
        text-align: left;
    }

    .hera-screen .hera-tabs {
        gap: 8px;
    }

    .hera-screen .hera-page-head h2 {
        font-size: 20px;
    }

    /* The copy button under the address rather than beside it: at 390px the
       address is already three lines of hex and a button next to it leaves
       neither enough width. */
    .hera-screen .hera-address {
        flex-direction: column;
    }

    .hera-screen .hera-rate-price {
        font-size: 22px;
    }
}

/*---------------------------------------------------------
    THE OUTAGE STRIP

    Drawn under the header when the shell could not read part of itself. The
    export has no such component ? nothing in the original told a member the
    backend was unwell ? so this is hera's vocabulary applied to a state it
    never had: the full-bleed bar with a left accent rule it uses for
    「점검 안내」, rather than the platform's inset card.

    Scoped under `.hera-screen` like everything else in this file, which is what
    lets it be loaded on every route including /game and /sport.

    **그리고 `.hera-notice-wrap` 안으로 한 번 더 가둡니다.** 이 블록의 선택자가
    한동안 그냥 `.hera-screen .hera-notice` 였는데, 같은 이름을 돈 화면 다섯의
    안내사항 줄들이 쓰고 있습니다(`money-page-view.tsx` 외). 파일에서 이 블록이
    「notices and alerts」의 `.hera-notice` 보다 **뒤에** 있고 특정도가 같아서,
    안내 한 줄 한 줄이 이 띠의 옷을 입고 있었습니다 — 1280 실측으로 원본은
    23.8px 짜리 세로줄 하나, 우리는 `display:flex` 에 위아래 11px 여백, 테두리
    사방 1px, 모서리 8px, #0d1018 판까지 얹힌 95.4px 짜리 상자였습니다. 운영자가
    말한 「안내사항이 상자 안에 또 상자」가 이것입니다. 띠는 자기 래퍼 안에서만
    말하게 하고, 안내 줄은 아래 「THE PAGE FRAME」에서 원본대로 다시 적습니다.
---------------------------------------------------------*/

.hera-screen.hera-notice-wrap {
    width: 100%;
    padding: 0;
}

.hera-screen.hera-notice-wrap .hera-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    box-sizing: border-box;
    width: 100%;
    padding: 11px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    border-left: 3px solid transparent;
    font-size: 13px;
    line-height: 1.7;
}

.hera-screen .hera-notice--warn {
    border-left-color: #f0b400;
    background: rgba(240, 180, 0, 0.09);
    color: #ffe9a8;
}

.hera-screen .hera-notice--muted {
    border-left-color: rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.035);
    color: rgba(255, 255, 255, 0.66);
}

/* `min-width: 0` so a long sentence wraps inside the bar. Without it the strip
   is a flex row that grows past the viewport, which is the same shape as the
   console shells taking 562px of document from a 390px phone. */
.hera-screen .hera-notice-text {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 8px;
    min-width: 0;
    flex: 1 1 auto;
}

.hera-screen .hera-notice-text > strong {
    font-weight: 700;
}

.hera-screen .hera-notice-text > span {
    min-width: 0;
    opacity: 0.92;
}

.hera-screen .hera-notice-retry {
    flex: 0 0 auto;
    /* `flex: 0 0 auto` keeps the box from being shrunk; it does not keep the
       text inside it from wrapping, and this label is two words. A guard
       rather than a repair: the sweep that prompted it was measuring padding
       as a second line, and the label was never actually folded. */
    white-space: nowrap;
    padding: 5px 13px;
    border: 1px solid currentColor;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 700;
    color: inherit;
    text-decoration: none;
}

@media (max-width: 767px) {
    /* 래퍼로 가두는 것은 위와 같은 이유입니다 — 이 여백이 돈 화면의 안내 줄에도
       걸리고 있었습니다. */
    .hera-screen.hera-notice-wrap .hera-notice {
        padding: 10px 14px;
        font-size: 12.5px;
    }

    /* The button on its own line rather than squeezed beside two lines of
       text ? the same call the 테더 address block makes just above. */
    .hera-screen .hera-notice-retry {
        width: 100%;
        text-align: center;
    }
}

/*---------------------------------------------------------
    THE PAGE FRAME AND THE LIST

    Restated from the export's `deposit.css` §5 and §7, `deposit-trc20.css`
    and `point.css`, which agree with each other about all of this.

    The frame the export uses on every money-shaped screen is: 안내사항 full
    width across the top, then a `.deposit-main-content` grid of two equal
    columns holding the form and the list. It becomes one column below 1024px.
    The port previously used the platform's page shell here — a title bar over
    a single stack — with the notice demoted to a side column, which is the
    other skin's arrangement and is what read as mixed.

    The list is not a table. `.listhead` over `.listbody` rows, both grid rows
    with the same template, a pill for the status and a pager of 36px squares.

    **The shape is the export's, and so now is the width the columns collapse
    at.** The export puts two columns behind `@media (min-width: 1024px)` on all
    five money sheets — `deposit.css` §7, `withdraw.css` §7, `point.css` §7 and
    both `*-trc20.css` §6 — i.e. one column below 1024. This used to read 900
    on the argument that 900 was 「this skin's existing answer」. It was not this
    screen's: no money sheet in the export contains a 900px media query at all.
    900 is `my-page.css:23`'s **wrapper width** and the two sports sheets'
    breakpoint, and it had been carried over here by a wrong attribution that
    `lib/table-cards.ts` then wrote down as fact.

    Between 901 and 1023 the two disagreed, and the 1000px measurement says
    which was right: the export gives the ledger a 960px card, we gave it a
    465px one and asked four columns to live in 413px of it — 95.75px each,
    where 「2026. 08. 26. 06:22」 alone is ~130px at 14px, so every date cell
    wrapped and rows stood 73px instead of 47px. 1023 is the export's number
    **and** the one that fits.

    The list still becomes cards at 767px, the one table-to-card width the
    whole site uses — see `lib/table-cards.ts`. 공지사항 and 고객센터 in this
    same skin switch there, and a member turning a phone sideways should see
    every list change at the same moment rather than this one changing early
    because its export happened to say so.

    `skin-screen-seam.spec.ts` fails on any width this skin has not declared,
    which is how that stays true rather than being a note here.
---------------------------------------------------------*/

/*---------------------------------------------------------
    THE MONEY CARD — `.page-card` / `.deposit-card`

    The export has **two** card idioms and this sheet only had one of them.

    The board screens — `announcement.css:33`, `my-page.css:27`, `inquriy.css:34`
    — draw an unpadded card with a full-bleed `.card-header { padding: 20px 30px }`
    over a `.card-body { padding: 30px }`. That is the shape `.hera-card` above
    describes, and it is right for those screens.

    The five money sheets do not do that. Their card carries the padding itself
    (`padding: 25px 30px`) and the header is **inset inside it**: no side padding
    of its own, `padding-bottom: 15px`, `margin-bottom: 25px`, and a rule that
    stops 30px short of both edges. Measured at 1280 the difference is a 543px
    rule against our 603px one, plus a `rgba(0, 0, 0, .15)` wash under the title
    that neither idiom in the export has anywhere.

    So the money screens restate it, and only they: the three classes named here
    (`money-page-view`, `money-form-view`, `money-history-view`, `trc20-view`,
    `points-view`) are rendered by nothing else. The base `.hera-card` rules are
    left exactly as they were, because eight other 헤라 screens sit on them and
    they belong to whoever is porting those.

    `box-shadow` is the one line that is true of **both** export idioms and is
    missing from ours everywhere. It is applied here rather than to `.hera-card`
    for the same reason — 공지사항 · 마이페이지 · 고객센터 · 이벤트 should get it
    too, and that is one line in the base rule for someone who owns them.
---------------------------------------------------------*/

.hera-screen .hera-notice-card,
.hera-screen .hera-form-card,
.hera-screen .hera-list-card {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    margin-bottom: 30px;
}

.hera-screen .hera-notice-card > .hera-card-header,
.hera-screen .hera-form-card > .hera-card-header,
.hera-screen .hera-list-card > .hera-card-header {
    margin: 0 30px;
    padding: 25px 0 15px;
    background-color: transparent;
}

.hera-screen .hera-notice-card > .hera-card-body,
.hera-screen .hera-form-card > .hera-card-body,
.hera-screen .hera-list-card > .hera-card-body {
    padding: 25px 30px;
}

/*
   신청서와 신청 내역을 나란히 두는 자리 — **둘 다 들어갈 때만.**

   원본은 `min-width: 1024` 부터 `1fr 1fr` 입니다(`deposit.css:265`). 우리는
   1024 에서 그렇게 하면 목록 카드가 415px 이 되고, 그 안의 행은 385px 입니다.
   재 보면 그 행이 실어야 하는 것은 이만큼입니다(1600 실측, 여백 포함):

     입금·출금 (열 넷)   신청일시 163 · 금액 157 · 상태 61 · 처리일시 163 = 544px
     포인트   (열 다섯)  신청일시 163 · 구분 84 · 금액 92 · 잔액 75 · 메모 124 = 538px
     테더     (열 다섯)  신청일시 163 · USDT 85 · 금액 157 · 상태 61 · 처리일시 163 = 629px

   385px 안에서는 **어떤 비율로 잘라도** 들어가지 않습니다. 그래서 1024 에서
   신청일시가 두 줄이 되고, 테더는 세 줄이 되고, 금액은 칸을 넘어 상태 위로
   흘렀습니다(실측: 1024 테더 행 94px, 원본 47px). 운영자가 「날짜같은게 두줄로
   바뀌는데 보기불편하거든」이라고 말한 자리입니다.

   원본이 1024 에서 멀쩡한 이유는 원본의 도장이 **열여섯 자**이기 때문입니다
   (`slice(0, 16)`, 「2026-08-28 06:27」). 우리 것은 초까지 열아홉 자이고, 그것은
   회원과 상담원이 **같은 글자**를 읽어야 한다는 `lib/money.ts` 의 약속이라
   줄일 수 없는 쪽입니다. 그러면 남는 조정은 **언제 둘로 나누느냐** 뿐입니다.

   그래서 나누는 기준을 폭이 아니라 **카드가 실을 수 있는가**로 적습니다:
   신청서는 원본이 제 문턱(1024)에서 주던 477px, 목록은 아래 바닥값의 합
   (테더 618px)에 카드·목록 여백 92px 을 더한 710px. 그 둘과 간격 30px 이
   들어가는 가장 좁은 화면이 1280 이라 질의가 거기 걸립니다. 1279 이하에서는
   한 단이고, 목록이 화면 폭을 다 쓰므로 768 에서도 도장이 한 줄입니다
   (행 636px).

   **`fr` 값이 남는 폭을 누가 갖는지를 정합니다.** 처음에 `0.9fr / 1.1fr` 로
   적었더니 목록이 제 바닥값 그대로 서고 남는 폭을 신청서가 다 가져갔습니다 —
   `minmax(min, N fr)` 에서 바닥이 제 fr 몫보다 크면 그 트랙은 바닥에 얼고,
   남은 것은 **다른 트랙끼리** 나누기 때문입니다. 1280 실측으로 목록 685px,
   행 593px 이 되어 바닥의 합(618px)보다 좁았고, `.hera-card` 가
   `overflow: hidden` 이라 넘친 25px 은 그려지지도 않았습니다. 접히는 것을
   고치려다 **잘리게** 만드는 자리였습니다.

   `0.4 / 0.6` 은 두 바닥이 모두 제 fr 몫보다 작아서 아무것도 얼지 않는 값입니다:
   1280 에서 신청서 484px(원본이 제 문턱에서 주던 477px 보다 7px 넓음),
   목록 726px, 행 634px — 테더 바닥 618px 에 16px 이 남습니다. 1600 에서는
   612 / 918 입니다.

   신청서가 예전(1fr 1fr, 1280 에서 543px)보다 59px 좁아지는 것은 값을 치른
   것입니다. 계좌번호처럼 긴 읽기 전용 값이 1280 에서 두 줄이 됩니다 — 원본이
   1024 에서 477px 카드로 이미 그렇게 그리던 자리이고, 목록의 도장 열아홉 자를
   한 줄로 두는 값으로는 싼 편입니다.
*/
.hera-screen .hera-main-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
    align-items: start;
}

@media (min-width: 1280px) {
    .hera-screen .hera-main-content {
        grid-template-columns: minmax(477px, 0.4fr) minmax(710px, 0.6fr);
    }
}

.hera-screen .hera-main-content > .hera-card {
    margin-bottom: 0;
}

/*
   안내사항 across the top, above the grid.

   The export rules each line with a 2px left border and puts **no container
   around it** — `#deposit_notice .card-body p`, and the other four sheets say
   the same thing in the same words. Every declaration here that resets
   something is undoing the outage strip further up this file, which shares the
   class name and used to win on source order; see the note there.

   Tinting the rule toward the primary blue is the one refinement kept from the
   earlier pass — the lines read as guidance rather than as a grey wall, and it
   moves no pixel of the layout.
*/
.hera-screen .hera-notice-card .hera-card-body .hera-notice {
    display: block;
    width: auto;
    padding: 0 0 0 10px;
    border: 0;
    border-left: 2px solid rgba(0, 191, 255, 0.35);
    border-radius: 0;
    background: none;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--hera-ink-dim);
}

.hera-screen .hera-notice-card .hera-card-body .hera-notice:last-child {
    margin-bottom: 0;
}

/*
   390 에서 돈 카드가 무는 자리.

   원본의 답은 `@media (max-width: 767px) { .page-card { padding: 20px } }` —
   25/30 이 사방 20 으로 줄고 헤더도 그만큼 안으로 들어옵니다. 그것을 그대로
   적습니다.

   안내사항만 한 단 더 좁힙니다. 원본도 안내를 폼 **위**에 두므로(deposit.ejs:18
   이 form:33 앞) 순서는 건드리지 않고, 줄이는 것은 부피뿐입니다.

   **글자 크기는 원본의 14px 로 되돌립니다.** 앞서 12.5px/1.55 로 낮춘 이유는
   입금하기의 안내 카드가 844 중 255px 를 먹고 있다는 실측이었습니다. 그 255px
   를 만든 것의 절반은 글자가 아니라 위에서 걷어낸 **상자**였고, 상자가 없어진
   지금 같은 문단을 14px/1.7 로 그려도 입금하기는 **207.6px** 입니다 — 줄이라고
   부른 그 수치보다 아직 47px 낮습니다. 재서 확인한 것이지 짐작이 아닙니다.

   숫자를 그대로 적어 둡니다: 12.5px + 상자 → 14px + 상자 없음 으로 입금하기는
   195.5 → 207.6, 출금하기는 234.2 → 279 입니다. 출금이 더 나가는 것은 글꼴이
   아니라 **문안이 길기 때문**이고, 한 화면의 문안 길이를 다섯 화면의 글자
   크기로 갚는 것은 자리를 버는 방법 중 가장 나쁜 쪽입니다. 줄여야 한다면
   줄일 것은 그 화면의 문장입니다.
*/
@media (max-width: 767px) {
    .hera-screen .hera-notice-card > .hera-card-header,
    .hera-screen .hera-form-card > .hera-card-header,
    .hera-screen .hera-list-card > .hera-card-header {
        margin: 0 20px;
        padding: 20px 0 15px;
    }

    .hera-screen .hera-notice-card > .hera-card-body,
    .hera-screen .hera-form-card > .hera-card-body,
    .hera-screen .hera-list-card > .hera-card-body {
        padding: 20px;
    }

    .hera-screen .hera-notice-card > .hera-card-header {
        padding: 16px 0 12px;
    }

    .hera-screen .hera-notice-card .hera-card-header h3 {
        font-size: 16px;
    }

    .hera-screen .hera-notice-card > .hera-card-body {
        padding: 16px 20px;
    }

    .hera-screen .hera-notice-card .hera-card-body .hera-notice {
        margin-bottom: 8px;
    }
}

/* --- the list ----------------------------------------------------------- */

/*
   열이 굶지 않게 하는 바닥값.

   위 `--hera-cols` 는 **비율**입니다. 비율만으로는 「이 칸은 이만큼 아래로는
   내려갈 수 없다」를 말할 수 없어서, 반쪽 카드에서 신청일시가 두 줄이 되고
   금액이 칸을 넘어 옆 칸 위로 흘렀습니다 — 어느 쪽도 가로 넘침을 만들지 않아
   계측은 조용했습니다.

   숫자는 1600 에서 각 칸이 한 줄로 그리는 데 실제로 든 폭을 재서 왔고, 아래
   칸 여백 12px 과 몇 px 의 여유를 더한 값입니다. 뷰가 트랙을
   `minmax(var(--hera-min-키), N fr)` 로 짜므로, 남는 폭은 여전히 모델의
   비율대로 나뉘고 **모자랄 때만** 이 바닥이 붙듭니다.

     신청일시·처리일시  글 143.2 + 12 → 162   「2026-08-25 23:00:00」
     금액               글 136.7 + 12 → 154   「[스포츠] ₩ 1,234,567」
     USDT               글  64.6 + 12 →  82   「3546.09」
     상태               글  40.8 + 12 →  58   알약
     구분               글  64.0 + 12 →  80   「이벤트 지급」
     잔액               글  55.2 + 12 →  72
     메모               글 103.9 + 12 → 120   ← 아래를 보십시오

   여유를 붙인 이유는 이 폭이 글꼴에 달려 있기 때문입니다. Poppins 가 늦게
   붙거나 대체 글꼴로 그려지는 순간 143.2 는 143.2 가 아니고, 바닥을 글자 폭에
   딱 맞춰 두면 그 순간 다시 접힙니다. 신청일시는 6.8px, 금액은 5.3px,
   USDT 는 5.4px 을 여유로 답니다.

   메모에도 바닥을 두지만 그것은 **상한이 아닙니다.** 운영자가 쓰는 자유
   문장이라 길이에 끝이 없고, 그래서 목록에서 접히는 쪽은 계속 메모입니다
   (`points-model.tsx` 가 그렇게 정한 이유가 그 파일에 있습니다). 여기 120px 은
   지금 있는 가장 긴 메모가 한 줄로 앉는 폭일 뿐입니다.

   **바닥의 합이 행보다 넓어지면 격자가 넘치고, 넘친 쪽은 그려지지 않습니다** —
   `.hera-card` 가 `overflow: hidden` 이라 접히는 대신 잘립니다. 그래서 합을
   적어 두고 가장 좁은 두 자리에 맞춥니다:

     테더 (가장 무거움)  162+82+154+58+162 = 618px
     입금·출금           162+154+58+162     = 536px
     포인트              162+80+90+72+120   = 524px

   표를 그리는 가장 좁은 자리는 768 의 한 단(행 636px)과 1280 의 두 단
   (행 634px)이고, 둘 다 618px 보다 넓습니다. 767 이하에서는 행이 카드가 되면서
   트랙 자체가 `minmax(0, 1fr)` 하나로 바뀌므로 이 값들은 걸리지 않습니다.
*/
.hera-screen .hera-listbox {
    width: 100%;
    --hera-min-date: 162px;
    --hera-min-processed: 162px;
    --hera-min-amount: 154px;
    --hera-min-usdt: 82px;
    --hera-min-status: 58px;
    --hera-min-type: 80px;
    --hera-min-balanceAfter: 72px;
    --hera-min-memo: 120px;
}

/* 포인트의 금액은 「+1,234,567」 뿐입니다 — 충전보너스 알약도 `₩` 도 붙지
   않으므로 위 154px 은 66px 이 놀고, 그 66px 은 메모에서 나옵니다. */
.hera-screen .hera-listbox-point {
    --hera-min-amount: 90px;
}

/*
   Everything in this block is qualified by `.hera-listbox` — the wrapper only
   the money and 포인트 ledgers render — and that qualification **is** the
   공지사항 defect the operator reported (「컬럼 하나도 안 맞고」). These rules
   used to name `.hera-listhead` bare, and 공지사항 and 고객센터 share that
   class for their own boards, declared *earlier* in this sheet with their own
   column templates (110px/1fr/180px and the five-column 문의 grid). Later at
   equal specificity wins, so this block's `repeat(var(--hera-cols, 5), 1fr)`
   — a variable those screens never set — replaced their templates on the
   *header only*: the head spread across five imaginary equal columns and
   picked up 15px side padding while the rows kept their own grid. Nothing
   overflowed, so the overflow checks had nothing to say.
*/
.hera-screen .hera-listbox .hera-listhead,
.hera-screen .hera-listbox .hera-listbody .hera-row {
    display: grid;
    /*
       `--hera-cols` 는 이제 열 **개수**가 아니라 열 **비율**입니다.

       원본은 어느 목록도 균등분할이 아닙니다: 입금·출금·테더 넷은
       `1.5fr 1fr 1fr 1.5fr 1.5fr`(`deposit.css:215`), 포인트는
       `1fr 1fr 2fr 2fr 2fr`(`point.css:179`) — 날짜 열이 가장 넓고 상태·구분이
       가장 좁습니다. 우리는 다섯 화면 모두 균등이었고, 그래서 1280 의 절반짜리
       카드 안에서 신청일시가 열을 넘겨 줄이 접혔습니다(포인트 실측: 원본 행
       47px, 우리 73px).

       비율은 여기서 새로 정하지 않고 모델이 이미 계산해 둔 것을 받습니다 —
       `lib/money.ts` 의 `COLUMN_WEIGHTS` 와 `columnWidths()`. 그 파일의 주석이
       그렇게 하라고 적어 둔 그대로입니다(「the shares are a property of *which
       columns exist*」): 테더는 열이 다섯이고 원화는 넷이라 같은 무게라도 몫이
       달라지므로, 나누는 쪽은 모델이어야 합니다. 뷰는 그것을 트랙 목록으로
       이어 붙이기만 합니다.

       **비율에 바닥이 붙었습니다.** 뷰가 이어 붙이는 것은 이제 퍼센트가 아니라
       `minmax(var(--hera-min-키, 0px), N fr)` 이고, 그 바닥값은 이 블록 위
       `.hera-listbox` 에 있습니다. 퍼센트에는 「이 아래로는 못 간다」가 없어서
       칸이 글보다 좁아져도 격자는 아무 말 없이 성립했고, 그때 접히거나 옆 칸
       위로 흐르는 것은 글이었습니다. `fr` 로 바꾸는 것은 비율을 바꾸지
       않습니다 — 바닥이 걸리지 않는 동안 `28.57fr` 은 `28.57%` 와 같은 폭이고,
       걸릴 때만 그 칸이 바닥을 가져간 뒤 **남는 폭이** 나머지 비율대로
       나뉩니다. 퍼센트에 바닥을 달았다면 합이 100% 를 넘어 격자가 넘쳤을
       것입니다.

       fallback 이 균등 다섯인 이유는 예전 값이 그랬기 때문입니다 — 변수를
       못 받은 목록이 있어도 모양이 무너지지는 않습니다.
    */
    grid-template-columns: var(--hera-cols, repeat(5, minmax(0, 1fr)));
    /*
       `column-gap: 0` is doing real work: `.hera-row` is also the money
       form's read-only row, whose flex rule carries `gap: 16px`, and gap
       applies to grid as readily as to flex. The header has no such class,
       so the leaked gap put the ledger's rows on a different rhythm from
       their own header — measured on 포인트 at 1280: ~3.2px more per column,
       13px adrift by the fifth.
    */
    column-gap: 0;
    padding: 0 15px;
}

.hera-screen .hera-listbox .hera-listhead {
    border-bottom: 2px solid var(--hera-line);
}

.hera-screen .hera-listbox .hera-listhead .hera-col {
    /* 본문 칸은 `min-width: 0` 을 이미 들고 있었고 제목 칸은 아니었습니다.
       열이 균등할 때는 티가 안 났지만 트랙이 비율로 바뀌면 제목 하나가 제
       칸을 넘어 옆 칸 위로 흐릅니다. */
    min-width: 0;
    /* 좌우 6px 은 원본의 10px 에서 4px 씩 뺀 것입니다(`deposit.css:216`).
       열 다섯짜리 테더 목록이 768 의 636px 행에서 실어야 하는 글은 528.5px 이고,
       원본 여백이면 거기에 100px 이 붙어 628.5px — 여유가 7.5px 뿐입니다. 그
       7.5px 은 「3546.09」 보다 긴 USDT 한 줄이면 사라집니다. 여백에서 40px 을
       벌어 와 위 바닥값들의 여유로 돌립니다. 칸이 가운데 정렬이라 4px 은
       눈에 띄지 않습니다. 본문 칸도 같은 값입니다 — 둘이 갈리면 머리와 줄이
       어긋납니다. */
    padding: 15px 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--hera-ink-dim);
    text-transform: uppercase;
    text-align: center;
}

.hera-screen .hera-listbox .hera-listbody .hera-row {
    border-bottom: 1px solid var(--hera-line);
    transition: background-color 0.2s ease;
}

.hera-screen .hera-listbody .hera-row:last-child {
    border-bottom: none;
}

.hera-screen .hera-listbody .hera-row:hover {
    background-color: #252936;
}

.hera-screen .hera-listbody .hera-col {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    /* 머리 칸과 같은 6px — 이유는 그쪽에 적혀 있습니다. */
    padding: 15px 6px;
    font-size: 14px;
    color: var(--hera-ink);
    min-width: 0;
    /*
       고정폭 숫자.

       열 폭을 비율로 잡고 나니 「2026-08-28 11:19:20」 은 한 줄인데
       「2026-08-28 10:17:36」 은 두 줄인 목록이 나왔습니다. Poppins 의 숫자는
       비례폭이라 `1` 이 `0` 보다 좁고, 같은 형식의 같은 길이 문자열이 행마다
       몇 px 씩 다릅니다 — 그 몇 px 이 경계에 걸리면 접히는 행과 안 접히는 행이
       섞여서 목록의 줄맞춤이 무너집니다. 고정폭으로 두면 접히더라도 **모든 행이
       같이** 접히므로 열이 계단지지 않습니다. 금액·잔액도 자릿수가 달라도
       소수점 자리가 세로로 맞습니다.
    */
    font-variant-numeric: tabular-nums;
}

/* The figure and the `₩` its `::before` puts in front of it are one thing to
   read. In a five-column list inside a half-width card they were landing on
   separate lines, which reads as a currency mark with nothing after it. */
.hera-screen .hera-listbody .hera-amount-value {
    font-weight: 600;
    color: var(--hera-ink);
    white-space: nowrap;
}

/* 원본은 이 표시를 `deposit.css:225` 와 `withdraw.css` 에만 두고, 테더 두
   시트와 `point.css` 에는 두지 않습니다 — 금액이 실제로 원인 화면만 답니다.
   우리는 `.hera-col-amount` 만 보고 있어서 테더 목록(옆 칸이 USDT 인)과
   포인트 원장(숫자가 포인트인)에까지 붙었습니다. 목록이 스스로 원 단위라고
   말할 때만 답니다. */
.hera-screen .hera-listbox-won .hera-listbody .hera-col-amount .hera-amount-value::before {
    content: "\20A9";
    margin-right: 4px;
    color: var(--hera-ink-dim);
}

.hera-screen .hera-listbody .hera-amount-value.hera-up {
    color: var(--hera-ok);
}

.hera-screen .hera-listbody .hera-amount-value.hera-down {
    color: var(--hera-bad);
}

.hera-screen .hera-listbody .hera-change-log {
    color: var(--hera-ink-dim);
    white-space: nowrap;
}

.hera-screen .hera-bonus-tag {
    padding: 2px 8px;
    border-radius: 3px;
    border: 1px solid var(--hera-blue);
    background-color: rgba(0, 191, 255, 0.1);
    color: var(--hera-blue);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.hera-screen .hera-no-list {
    text-align: center;
    padding: 50px;
    color: var(--hera-ink-dim);
}

.hera-screen .hera-no-list strong {
    font-size: 18px;
    font-weight: 500;
}

/* the status pill */
.hera-screen .hera-tag-approved {
    background-color: rgba(34, 197, 94, 0.1);
    color: var(--hera-ok);
}

.hera-screen .hera-tag-pending {
    background-color: rgba(245, 158, 11, 0.1);
    color: var(--hera-warn);
}

.hera-screen .hera-tag-rejected,
.hera-screen .hera-tag-cancelled {
    background-color: rgba(239, 68, 68, 0.1);
    color: var(--hera-bad);
}

/* --- the pager ---------------------------------------------------------- */

.hera-screen .hera-listpagenation {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 30px;
    user-select: none;
}

.hera-screen .hera-page-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background-color: var(--hera-bg-dark);
    border: 1px solid var(--hera-line);
    color: var(--hera-ink-dim);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.hera-screen .hera-page-btn:hover:not(:disabled) {
    border-color: var(--hera-blue);
    color: var(--hera-blue);
}

.hera-screen .hera-page-btn.hera-active {
    background-color: var(--hera-blue);
    border-color: var(--hera-blue);
    color: var(--hera-bg-dark);
    font-weight: 700;
}

/* Disabled here follows the palette set out under 「--- unavailable ---」
   rather than the export's `opacity: .5`, which a member could not read. */
.hera-screen .hera-page-btn:disabled {
    background-color: var(--hera-off-bg);
    background-image: var(--hera-off-hatch);
    border-color: var(--hera-off-line);
    color: var(--hera-off-faint);
    cursor: not-allowed;
}

/* 페이지가 두 단이 되는 곳은 이제 `.hera-main-content` 자신이 정합니다 —
   여기 있던 `@media (max-width: 1023px)` 한 단 규칙은 그 선언과 함께
   `min-width: 1280` 로 옮겼고, 왜 1023 이 아니라 1280 인지는 거기 적었습니다.
   한 단이 기본값이 되었으므로 되돌리는 규칙이 따로 필요하지 않습니다. */

/* --- the export's table-to-card, at the site's width --------------------- */

@media (max-width: 767px) {
    /*
       `.hera-listbox`-scoped like the rest of the block, and that is not a
       tidiness point — it is why this block did nothing.

       위의 데스크톱 규칙은 `.hera-screen .hera-listbox .hera-listbody .hera-row`
       (클래스 넷)인데 여기 있던 것은 `.hera-screen .hera-listbody .hera-row`
       (클래스 셋)였습니다. 미디어쿼리는 특정도를 올려 주지 않으므로 폰에서도
       데스크톱 격자가 이겼습니다 — 390 실측에서 포인트 내역의 행이 여전히
       `60px 60px 60px 60px 60px` 였고, 제목줄만 사라진 채 60px 칸 안에서
       「구분 ⟷ 이벤트 지급」이 접히고 있었습니다. 카드로 바뀌는 규칙을 파일에
       적어 두는 것과 그 규칙이 이기는 것은 다른 일이고, 여기서는 뒤엣것이
       거짓이었습니다. 텍스트로만 확인하던 `hera-list-columns.spec.ts` 가
       잡지 못한 것도 같은 이유입니다.
    */
    .hera-screen .hera-listbox .hera-listhead {
        display: none;
    }

    .hera-screen .hera-listbox .hera-listbody .hera-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 15px;
        padding: 20px;
        border: 1px solid var(--hera-line);
        border-radius: 8px;
        margin-bottom: 15px;
    }

    .hera-screen .hera-listbox .hera-listbody .hera-col {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0;
    }

    .hera-screen .hera-listbox .hera-listbody .hera-col::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--hera-ink-dim);
        margin-right: 15px;
    }

    .hera-screen .hera-listbox .hera-listbody .hera-col-status .hera-tag {
        margin: 0 0 0 auto;
    }
}
/* --- the export's `.info-grid` of read-only fields ---------------------- */

.hera-screen .hera-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 25px;
}

.hera-screen .hera-iptgrp {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.hera-screen .hera-iptgrp.hera-full {
    grid-column: 1 / -1;
}

.hera-screen .hera-iptgrp > label {
    font-size: 14px;
    font-weight: 500;
    color: var(--hera-ink-dim);
}

/* The read-only field. The export renders these as `input[readonly]`; they are
   text here because nothing about them is editable, and the well is what a
   member actually recognises. */
.hera-screen .hera-iptgrp > .hera-value {
    width: 100%;
    background-color: #252936;
    border: 1px solid var(--hera-line);
    border-radius: 8px;
    padding: 12px 15px;
    color: var(--hera-ink-dim);
    font-size: 15px;
    overflow-wrap: anywhere;
}

.hera-screen .hera-iptgrp > .hera-value.hera-strong {
    color: var(--hera-blue);
    font-size: 20px;
    font-weight: 700;
}

/* Cells holding a control rather than a value get no well around them. */
.hera-screen .hera-iptgrp > .hera-value.hera-plain {
    background: none;
    border: 0;
    padding: 0;
}

/*
   계좌문의 — the export's `.iptgrp.bank-inquiry` is a *row*, not a stack:
   label, then the guidance sentence growing across the middle, then the
   inquiry button pushed to the right edge, all on one dark inset. The port
   had stacked a bare button under the label, which is what read as wrong.
   The sentence is `copy.bankInquiryHint` — it was on the model all along,
   phrased once beside every other money string; the view just never drew it.
*/
.hera-screen .hera-iptgrp.hera-bank-inquiry {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    background-color: var(--hera-bg-dark);
    border-radius: 8px;
    padding: 14px 16px;
}

.hera-screen .hera-iptgrp.hera-bank-inquiry > label {
    flex-shrink: 0;
}

.hera-screen .hera-inquiry-hint {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--hera-ink-dim);
}

/*
   파란 테두리로 두던 자리입니다. 2026-09-07 에 걷어냈습니다 — 이 단추는 이제
   `hera-btn-bank` 로 호박색을 채우고, 여기서 파랑을 덧칠하면 그것을 지웁니다.

   그리고 이 덧칠 때문에 **두 화면이 서로 달랐습니다**: 입금 쪽만 파란 테두리를
   받고 고객센터 쪽은 잿빛이었습니다. 같은 단추가 화면마다 다르게 보일 이유가
   없습니다.

   자리 규칙(오른쪽 끝으로)은 남깁니다 — 그것은 색이 아니라 배치입니다.
*/
.hera-screen .hera-iptgrp.hera-bank-inquiry .hera-btn {
    width: auto;
    margin-left: auto;
    flex-shrink: 0;
}

/*
   충전보너스 — the platform's field, seated in this skin's own well so it
   reads as part of the form the way the export's `.bonus-selection` block
   does, rather than floating between the amount box and the submit. The
   `:empty` guard matters: the node decides for itself whether there is
   anything to offer, and an empty well would be a hole in the form.
*/
.hera-screen .hera-bonus-slot {
    background-color: var(--hera-bg-dark);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 25px;
}

.hera-screen .hera-bonus-slot:empty {
    display: none;
}

/* On both money forms it is now a cell of the `.info-grid` rather than a well
   of its own, which is where `.bonus-selection` sits in `deposit.ejs` and
   `deposit-trc20.ejs`. The grid already supplies the gap; keeping the well
   would pay for the inset twice. */
.hera-screen .hera-iptgrp.hera-bonus-slot {
    background: none;
    padding: 0;
    margin-bottom: 0;
}

/*---------------------------------------------------------
    충전보너스 — `.bonus-selection`

    `deposit.css`:
        .bonus-selection { display:flex; flex-direction:column; gap:8px }
        .select-wrapper::after { content:'▼'; … }
        select { …; appearance:none; padding:12px 15px }

    원본은 한 줄에 컨트롤 하나이고, 우리도 그 셀렉트를 그대로 옮겨 66px 에
    끝내고 있었습니다. **그 모양이 이 질문에는 맞지 않습니다.** 고르는 일이
    비교이기 때문입니다 — 카지노와 슬롯 중 무엇을 고를지는 5만P 가 525만원을
    부르는가 10만P 가 1,100만원을 부르는가이고, 닫힌 셀렉트는 그 중 한 줄의
    **요율만** 보여 줍니다.

    그래서 선택지마다 자기 자리를 갖고, 고르기 **전에** 무엇을 주고 무엇을
    지우는지 자기 자리에서 말합니다. 지급도 조건도 없는 분류는 사라지는 대신
    「지급 없음」이라고 적습니다 — 운영자 화면에는 그 분류가 그대로 있습니다.

    값은 높이이고, 어림하지 않고 쟀습니다: 390 에서 253.5 → 328.6px,
    1280 에서 247.7 → 321.7px. 두 폭 모두 입금 카드가 75px 높아지고 넘치는
    것은 없습니다. 산 것이 그것뿐이고, 알고 샀습니다.

    셀렉트가 없어졌으므로 `.select-wrapper` 다섯 규칙과, 합계를 담던
    `.hera-bonus-summary` 상자도 같이 지웠습니다. 합계는 카드 위로 갔고,
    남는 것은 성분 줄과 근거 한 줄입니다.
---------------------------------------------------------*/

.hera-screen .hera-bonus {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.hera-screen .hera-bonus-legend {
    font-size: 14px;
    font-weight: 500;
    color: var(--hera-ink-dim);
}

.hera-screen .hera-bonus .hera-hint {
    margin: 0;
}

.hera-screen .hera-bonus-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

/* 이름과 요율이 왼쪽에 쌓이고, 값과 조건이 오른쪽에 나란히 섭니다. 판
   하나가 두 줄 높이라, 넷을 세로로 쌓아도 셀렉트 하나보다 75px 만
   큽니다. */
.hera-screen .hera-bonus-card {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 4px 10px;
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--hera-line);
    border-radius: 8px;
    background-color: var(--hera-bg-dark);
    color: var(--hera-ink);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition:
        border-color 0.15s ease,
        background-color 0.15s ease;
}

.hera-screen .hera-bonus-card:hover {
    border-color: rgba(0, 191, 255, 0.5);
}

/* 고른 판은 `:hover` **뒤에**, 그리고 같은 특이도로 씁니다. 클래스 하나로
   (0,2,0) 을 두면 `:hover` (0,3,0) 에 져서, 고른 판에 마우스를 올리는 순간
   테두리가 반투명으로 흐려집니다 — 「고른 것이 풀렸나」로 읽히는 종류의
   조용한 어긋남입니다. */
.hera-screen .hera-bonus-card.hera-bonus-card-on {
    border-color: var(--hera-blue);
    background-color: rgba(0, 191, 255, 0.08);
    box-shadow: 0 0 10px var(--hera-blue-glow);
}

/* 그리고 초점은 맨 뒤. 고른 판에도 초점 표시가 남아야 키보드로 넘길 때
   어디에 서 있는지 보입니다. */
.hera-screen .hera-bonus-card:focus-visible {
    outline: none;
    border-color: var(--hera-blue);
    box-shadow: 0 0 10px var(--hera-blue-glow);
}

.hera-screen .hera-bonus-card-name {
    grid-column: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    word-break: keep-all;
}

.hera-screen .hera-bonus-card-on .hera-bonus-card-name {
    color: var(--hera-blue);
}

/* 지급도 조건도 없는 분류. 판 전체를 흐리면 「눌러도 되나」를 묻게 되는데
   이건 실제로 고를 수 있는 항목이므로, 이름만 흐린 잉크로 두고 사실은
   오른쪽의 「지급 없음」이 말하게 합니다. */
.hera-screen .hera-bonus-card-bare .hera-bonus-card-name {
    color: var(--hera-ink-dim);
}

.hera-screen .hera-bonus-card-rate {
    grid-column: 1;
    grid-row: 2;
    font-size: 11px;
    line-height: 1.4;
    word-break: keep-all;
    color: var(--hera-ink-dim);
}

/* 값과 조건은 한 칸에 나란히 놓습니다. 격자 칸을 둘 잡아 두면 조건만 있는
   분류 — 지급은 없는데 배팅 조건은 붙는, 정확히 눈에 띄어야 하는 함정 —
   에서 빈 칸의 간격만큼 오른쪽으로 밀립니다. */
.hera-screen .hera-bonus-card-figs {
    display: flex;
    gap: 10px;
    grid-column: 2;
    grid-row: 1 / 3;
}

.hera-screen .hera-bonus-card-fig {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    min-width: 74px;
}

.hera-screen .hera-bonus-card-fig > em {
    font-style: normal;
    font-size: 10px;
    line-height: 1.2;
    color: var(--hera-ink-dim);
    white-space: nowrap;
}

.hera-screen .hera-bonus-card-fig > b {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.hera-screen .hera-bonus-card-pay > b {
    color: var(--hera-blue);
}

.hera-screen .hera-bonus-card-owe > b {
    color: var(--hera-warn);
}

.hera-screen .hera-bonus-card-none {
    grid-column: 2;
    grid-row: 1 / 3;
    font-size: 12px;
    color: var(--hera-ink-dim);
    white-space: nowrap;
}

.hera-screen .hera-bonus-card-foot {
    grid-column: 1 / -1;
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.55;
    word-break: keep-all;
    color: var(--hera-ink-dim);
}

/* 성분 줄 — 회원이 고르지 않은 것이 왜 붙어 있는지. 합계가 카드 위로
   올라갔으므로 이 목록은 이제 자기 테두리를 갖습니다. */
.hera-screen .hera-bonus-lines {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    border: 1px solid var(--hera-line);
    border-radius: 8px;
    background-color: var(--hera-bg-dark);
}

.hera-screen .hera-bonus-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.hera-screen .hera-bonus-label {
    min-width: 0;
    font-size: 12px;
    line-height: 1.5;
    word-break: keep-all;
    color: var(--hera-ink);
}

/* 티어가 붙인 것이라 회원이 고른 것이 아니라는 표시. */
.hera-screen .hera-bonus-auto {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border: 1px solid rgba(0, 191, 255, 0.5);
    border-radius: 4px;
    background-color: rgba(0, 191, 255, 0.15);
    font-size: 10px;
    font-weight: 600;
    color: var(--hera-blue);
}

.hera-screen .hera-bonus-figure {
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--hera-ink);
    white-space: nowrap;
}

.hera-screen .hera-bonus-figure .hera-unit-inline {
    margin-left: 3px;
    font-size: 11px;
    font-weight: 500;
    color: var(--hera-ink-dim);
}

.hera-screen .hera-bonus-note {
    margin: 2px 0 0;
    font-size: 11px;
    line-height: 1.5;
    word-break: keep-all;
    color: var(--hera-ink-dim);
}

@media (max-width: 767px) {
    .hera-screen .hera-info-grid {
        grid-template-columns: 1fr;
    }

    /* One-handed reach: the row re-stacks and the button becomes a full-width
       target rather than a small chip on the right. */
    .hera-screen .hera-iptgrp.hera-bank-inquiry {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .hera-screen .hera-iptgrp.hera-bank-inquiry .hera-btn {
        width: 100%;
        margin-left: 0;
    }
}
/* 마이페이지는 `screens-account.css` 로 옮겼습니다. 여기 있던 네 이름
   — `.hera-form-section` · `.hera-section-title` · `.hera-password-grid` ·
   `.hera-form-actions` — 은 `my-page-view.tsx` 한 파일만 쓰는데, 그것이 이
   시트에 있으면 마이페이지를 고치는 사람과 돈 화면을 고치는 사람이 같은
   파일을 편집하게 됩니다. `assets.ts` 가 시트를 area 로 쪼갠 이유가 그것이고,
   옮기면서 원본 `my-page.css` 와 다시 재서 어긋난 값들도 같이 맞췄습니다 —
   무엇이 어떻게 어긋나 있었는지는 옮겨간 쪽 머리말에 적어 두었습니다. */

/* --- 테더: `.final-amount-display` -------------------------------------- */

.hera-screen .hera-final-amount {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    background-color: var(--hera-bg-dark);
    border: 1px solid var(--hera-line);
    border-radius: 8px;
    padding: 15px 20px;
    margin-bottom: 25px;
}

/* Inside the amount well it is `deposit-trc20.css`'s own strip: a dashed rule
   and one line, no second box. It is a running total of the decision being
   made in that well, so a card of its own both cost 60px and read as a fact
   arriving from somewhere else. */
.hera-screen .hera-amount > .hera-final-amount {
    margin-top: 20px;
    padding: 15px 0 0;
    background: none;
    border: 0;
    border-top: 1px dashed var(--hera-line);
    border-radius: 0;
}

.hera-screen .hera-final-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--hera-ink-dim);
}

.hera-screen .hera-final-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--hera-blue);
}