/*---------------------------------------------------------
    HERA SCREEN VIEWS — 포인트 전환 · 마이페이지

    The companion to `screens.css`, and it is a second file rather than more
    lines in that one for the same reason the screens arrived in two batches:
    `screens.css` covers 입금하기 · 출금하기 · 공지사항 · 테더 입출금, and this
    covers the two account screens. Everything in the header of that file
    applies here unchanged and is worth reading first — in particular why the
    export's own `point.css` and `my-page.css` are restated rather than loaded.

    **Every selector in this file begins with `.hera-screen`.** That is the
    property that makes it safe to load globally: on /game, /sport or any route
    that renders no `hera-screen` root, not one rule in here can match. No `*`,
    no `#body`, no bare element rule — those three lines are exactly what makes
    the export's own sheets unloadable, and `sports_csr.css` is the standing
    proof of what they do to the rest of the site.

    The two breakpoints are the site's, not this sheet's: 900px is where a
    two-card row becomes one column and 767px is where a table becomes cards.
    `lib/table-cards.ts` holds both numbers and `skin-screen-seam.spec.ts`
    fails a skin sheet that invents a third.
---------------------------------------------------------*/

/*---------------------------------------------------------
    마이페이지 — `my-page.css` 를 다시 재서 맞춘 자리

    이 블록은 `screens.css` 에 있던 것을 그대로 옮겨온 것이 아니라, 원본
    `my-page.css` 와 배포본을 1280 · 390 에서 나란히 재고 어긋난 것만 고친
    것입니다. 옮긴 이유부터: `.hera-form-section` · `.hera-section-title` ·
    `.hera-password-grid` · `.hera-form-actions` 네 이름은 `my-page-view.tsx`
    한 파일만 씁니다. 그것이 입금·출금·테더와 같은 시트에 있으면 이 화면을
    손보는 사람과 돈 화면을 손보는 사람이 같은 파일을 편집하게 되는데,
    `assets.ts` 가 시트를 area 로 쪼갠 것이 바로 그것을 막으려는 것이었습니다.

    잰 값 (원본 → 옮기기 전 우리 것):

      · #mypage_wrap_new  max-width **900px** → 1600px. 이 화면만 900 이고
        공지사항·배팅내역은 1600 입니다(각자 자기 시트에 그렇게 적혀 있습니다).
        1280 에서 카드가 860 이어야 할 자리에 1240 으로 앉아 두 칸짜리 필드
        격자가 584px 씩 벌어져 있었습니다.
      · .form-section     아래 테두리 **없음** → 1px. 원본은 구분선을 섹션이
        아니라 **제목 밑**에 긋습니다(`.section-title` 의 border-bottom).
        게다가 우리 쪽 `:last-of-type` 는 아무것도 고르지 못했습니다 — 카드
        본문의 마지막 `div` 는 `.hera-form-actions` 라서, 「마지막 섹션은 선을
        긋지 않는다」가 한 번도 적용된 적이 없습니다.
      · .section-title    padding-bottom 10 + 밑줄, 색 --text-secondary
                          → 여백도 밑줄도 없고 색은 --text-primary.
      · .info-grid.password-grid  **1열** → 3열. 비밀번호 세 칸은 원본에서
        위아래로 놓입니다.
      · .form-actions     margin-top 20 → 25.
      · .btn-submit       padding 12px 30px · 15px/600 → 16px · 18px/700 에
        min-width 200 과 파란 글로우. 원본의 업데이트 버튼은 조용한 알약입니다.

    고치지 않고 남긴 것: 카드 머리·본문의 여백(원본 20px 30px / 30px, 우리
    18px 25px / 25px)은 `screens.css` 의 공용 카드 어휘라 이 화면만 바꿀 수
    없습니다 — 다섯 화면의 export 가 모두 20px 30px / 30px 으로 일치하므로
    공용 블록에서 한 번에 바꿀 일이고, 지금 그 파일은 돈 화면을 고치는 사람이
    쥐고 있습니다.

    ---------------------------------------------------------

    그 다음 결: **충실해졌지만 밋밋했습니다.** 위의 목록은 전부 「원본과 몇 px
    다른가」이고, 원본이 안 물어본 것은 하나도 안 물었습니다. 1280 에서 재고
    보고 고친 것들:

      · 읽기 전용 일곱 칸이 **입력칸과 똑같이 생겼습니다.** 둘 다 8px 모서리에
        1px --border-color 테두리에 우물이었고, 다른 것은 판 색 하나
        (#252936 대 #0d1018)였습니다. 게다가 값이 --text-secondary 라
        「못 고치는 칸」이 아니라 「꺼진 칸」으로 읽혔습니다 — 회원이 이 화면에
        오는 이유의 절반은 계좌번호와 테더주소를 **읽으려는** 것인데 그 두
        줄이 화면에서 가장 흐렸습니다. 이제 사실 칸은 테두리를 벗고 값이
        --text-primary 로 올라오고, 테두리와 어두운 판은 **칠 수 있는 칸**의
        표시로만 남습니다.

      · 예금주 칸의 안내 문장이 우물 **안**에 있어서, 그 우물만 76px 이고
        옆의 계좌번호는 49px 이었습니다 — 한 줄에 앉은 두 칸의 아래가 27px
        어긋나 있었다는 뜻입니다. 문장을 우물 밖으로 내면 일곱 칸이 모두
        47px 로 같아집니다. 비밀번호 칸은 이미 힌트를 칸 밖에 두고 있었고,
        이쪽만 안 따랐습니다.

      · 비밀번호 입력칸 셋이 860px 카드에서 **812px** 짜리였습니다. 한 줄
        비밀번호에 그 폭은 아무 도움이 안 되고, 세 칸이 카드 전체를 가로질러
        누워 있으니 「고칠 수 있는 곳」이 어디까지인지도 안 보였습니다. 셋을
        상자 하나에 넣고 기둥 폭을 440px 로 묶습니다. 제출 단추는 원본대로
        오른쪽 끝이되 **그 기둥의** 오른쪽 끝입니다.

      · 화면 설명 한 줄이 없었습니다. `copy.subtitle`(「가입 정보를 확인하고
        비밀번호를 변경합니다」)은 모델이 처음부터 들고 있었고 이 뷰만 안
        그렸습니다.

    바꾸지 않은 것: `max-width: 900px`, 비밀번호 한 열, 제목 밑의 구분선,
    조용한 알약 — 어제 원본에 맞춘 네 가지는 전부 그대로입니다. 여기서 한
    것은 그 뼈대 위에서 「무엇을 만질 수 있는가」를 보이게 만든 것뿐입니다.
---------------------------------------------------------*/

/* 원본은 이 화면 하나만 900 으로 묶습니다(my-page.css:23). 다른 화면들은
   자기 시트에서 1600(공지사항·배팅내역)이나 1200(고객센터)이라, 폭은
   `.hera-screen` 의 기본값이 아니라 화면이 정할 일입니다. */
.hera-screen.hera-mypage {
    max-width: 900px;
}

.hera-screen .hera-form-section {
    margin-bottom: 30px;
}

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

.hera-screen .hera-form-section > :last-child {
    margin-bottom: 0;
}

/* 화면 설명 한 줄. 카드 머리의 「나의 정보」는 위 절반의 제목이지 이 화면이
   무엇을 하는 곳인지가 아닙니다 — 그 문장은 `copy.subtitle` 로 모델에 이미
   있었습니다. */
.hera-screen .hera-my-lede {
    margin: 0 0 24px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--hera-ink-dim);
}

/* 구분선은 여기 있습니다. 원본이 섹션이 아니라 제목에 그은 자리입니다. */
.hera-screen .hera-section-title {
    margin: 0 0 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--hera-line);
    font-size: 16px;
    font-weight: 600;
    color: var(--hera-ink-dim);
}

/* --- 읽기만 하는 일곱 줄 --------------------------------------------------
   원본 `.info-grid` 의 두 열 · 20px 을 그대로 두되, 이름은 이 화면의 것입니다.
   `screens.css` 의 `.hera-info-grid` 를 빌려 쓰는 동안에는 이 일곱 칸의
   생김새가 입금·출금 폼의 읽기 전용 줄과 한 몸이라, 여기만 고칠 수가
   없었습니다.                                                              */

.hera-screen .hera-my-facts {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px 20px;
    margin: 0;
}

/* 테더주소처럼 `row.wrap` 이 붙은 값은 두 열을 다 씁니다 — 34자에 띄어쓰기가
   없어서 반 칸에 넣으면 세 줄이 됩니다. */
.hera-screen .hera-my-fact-wide {
    grid-column: 1 / -1;
}

.hera-screen .hera-my-fact > dt {
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--hera-ink-dim);
}

.hera-screen .hera-my-fact > dd {
    margin: 0;
}

/*
   사실 칸. **테두리가 없습니다** — 8px 모서리에 1px 테두리는 이 스킨에서
   「칠 수 있는 칸」의 표시이고, 아래 비밀번호 입력칸이 그것을 씁니다. 값이
   --text-primary 인 것도 같은 이유입니다: 못 고치는 것과 꺼진 것은 다르고,
   회원이 이 화면에 오는 이유의 절반은 계좌번호와 테더주소를 읽으려는
   것입니다.

   판은 #252936 그대로입니다. 원본은 여기서 `--bg-card-header` 를 부르는데
   `my-page.css` 는 그 변수를 어디에서도 정의하지 않아 실제로는 투명이 되고,
   그러면 값이 카드 위에 그냥 떠 있습니다 — 따라가지 않는 자리입니다.
*/
.hera-screen .hera-my-well {
    display: block;
    padding: 12px 15px;
    border-radius: 8px;
    background-color: #252936;
    color: var(--hera-ink);
    font-size: 15px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* 안내 문장은 우물 밖, 값 아래. 안에 두면 그 칸만 높아져 옆 칸과 아래가
   어긋납니다. */
.hera-screen .hera-my-fact .hera-hint {
    margin: 6px 0 0;
}

/* --- 고칠 수 있는 쪽 -------------------------------------------------------
   비밀번호 상자. 이 화면에서 회원이 만질 수 있는 것은 전부 이 안에 있고,
   그것이 이 상자가 있는 이유입니다. 판은 카드 머리와 같은 rgba(0,0,0,.15)
   이라 새 색을 들이지 않습니다.                                            */

.hera-screen .hera-my-panel {
    padding: 22px 24px;
    border: 1px solid var(--hera-line);
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.15);
}

/*
   비밀번호는 원본대로 한 열입니다(`.info-grid.password-grid`). 다른 것은
   기둥 폭 하나뿐입니다 — 860px 카드에서 812px 짜리 비밀번호 칸은 한 줄
   비밀번호에 아무 도움이 안 되고, 어디까지가 폼인지도 안 보이게 합니다.
   440px 은 이 스킨의 입력칸 글자 15px 에서 한 줄이 편하게 읽히는 폭입니다.
*/
.hera-screen .hera-password-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    max-width: 440px;
}

/* 칸 사이는 격자의 gap 이 잡습니다 — 칸이 자기 아래여백을 또 들고 있으면
   둘이 더해져 셋째 칸만 멀어집니다. */
.hera-screen .hera-password-grid .hera-field {
    margin-bottom: 0;
}

.hera-screen .hera-form-actions {
    display: flex;
    justify-content: flex-end;
    max-width: 440px;
    margin-top: 18px;
}

/* 원본의 `.btn-submit` 은 12px 30px · 15px/600 짜리 조용한 알약이고 그림자가
   없습니다. `screens.css` 의 `.hera-btn-submit` 은 폼 전체를 가로지르는 18px
   제출 버튼이라 — 입금신청이 그것입니다 — 이 화면에서는 원본 쪽으로
   되돌립니다. `hera-btn-submit` 은 seam 검사의 SHARED 이름이라 두 시트에 있어도
   됩니다. */
.hera-screen .hera-form-actions .hera-btn-submit {
    width: auto;
    min-width: 0;
    padding: 12px 30px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: normal;
    box-shadow: none;
}

.hera-screen .hera-form-actions .hera-btn-submit:hover:not(:disabled) {
    transform: none;
    box-shadow: none;
}

/* 폰에서 버튼은 폭을 다 씁니다. 원본은 여기까지 말하지 않지만 44px 짜리
   손가락 목표를 오른쪽 구석의 작은 알약으로 두는 것은 이 스킨이 다른 화면에서
   이미 거절한 답입니다. */
@media (max-width: 900px) {
    .hera-screen .hera-form-actions .hera-btn-submit {
        width: 100%;
    }
}

/* --- a text field ---------------------------------------------------------
   The password form. `screens.css` has `.hera-amount-input`, which is a 24px
   right-aligned blue figure and entirely wrong for a password box, so the two
   account screens bring a plain field of their own.                        */

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

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

.hera-screen .hera-field .hera-hint {
    margin: 0 0 8px;
}

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

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

.hera-screen .hera-field input::placeholder {
    color: var(--hera-ink-dim);
}

/* --- a read-only figure ---------------------------------------------------
   계좌번호 and 테더주소 are runs of digits that only read straight in tabular
   figures. Which rows are figures is the model's — see `MyPageRow.numeric` —
   and what a figure looks like is this file's.                             */

.hera-screen .hera-figure {
    font-variant-numeric: tabular-nums;
}

/* --- a card whose body is a table -----------------------------------------
   The ledger runs edge to edge, the way the export's own 내역 boxes do, so
   the card body gives up its padding for it.                               */

.hera-screen .hera-flush {
    padding: 0;
}

/* --- the shared table, in hera's colours --------------------------------
   `DataTable` is the platform's component and stays that way: it carries the
   phone promotion off `model.columns`, so a grid of our own here would be
   this skin deciding which fields a narrow screen may bury. What is ours is
   the colour, and only the colour — no rule below can hide a cell.         */

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

.hera-screen .hera-table th {
    padding: 0 12px;
    border-bottom: 1px solid var(--hera-line);
    background-color: rgba(0, 0, 0, 0.2);
    color: var(--hera-ink-dim);
    font-size: 13px;
    font-weight: 600;
}

.hera-screen .hera-table tr {
    background-color: transparent;
}

.hera-screen .hera-table td {
    padding: 0 12px;
    border-bottom: 1px solid rgba(44, 58, 86, 0.5);
    color: var(--hera-ink);
    font-size: 14px;
}

.hera-screen .hera-table tr:hover td {
    background-color: #252936;
}

/* The same rows once they are cards. `.skin-stack` draws the platform's 1px
   engraved gap out of a background colour; this skin separates rows with a
   rule instead, so the gap is closed rather than recoloured. */
.hera-screen .hera-table .skin-stack {
    gap: 0;
    background: transparent;
}

.hera-screen .hera-table article {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(44, 58, 86, 0.5);
    background-color: transparent;
}

.hera-screen .hera-table article:last-child {
    border-bottom: 0;
}

@media (max-width: 767px) {
    .hera-screen .hera-table th,
    .hera-screen .hera-table td {
        padding: 0 10px;
    }

    .hera-screen .hera-field input {
        padding: 12px 14px;
        font-size: 14px;
    }

    /* 원본의 `@media (max-width: 768px) { .info-grid { grid-template-columns:
       1fr } }`. 폭은 이 사이트의 767 을 씁니다 — 목록이 카드가 되는 것과 같은
       순간에 두 열이 한 열이 되어야 회원이 폰을 돌렸을 때 화면 하나만
       바뀝니다. */
    .hera-screen .hera-my-facts {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .hera-screen .hera-my-panel {
        padding: 16px;
    }
}