/* Pretendard (SIL Open Font License 1.1, Reserved Font Name "Pretendard"),
   served from our own server — the licence sits next to the files in
   /static/fonts/pretendard/OFL.txt. Nothing about our screens depends on an
   outside service now (owner, 2026-09-17). Only the pieces a page actually
   needs are fetched, which is why there are 92 of them */
@import url("/fonts/pretendard/pretendard.css");

/* Colours come from the wallet app's LIGHT scheme, so EGG PAY sits in the
   same family as the SJO apps (owner, 2026-09-14: light screen + mint).
   Source: sjo-wallet app/.../ui/theme/Color.kt and Theme.kt (LightColors).

     --accent     SjoMintDim  #00B37D   the wallet's light-mode primary
     --on-accent  LightOnSurface #1F2328 dark text on mint — white read at
                  2.71:1, this at 5.83:1 (owner, 2026-09-14). The wallet's
                  dark scheme already puts dark text on mint
     links        --ink with an underline — mint on white read at 2.71:1
     --warn-line  SjoAmber    #FFB020   the wallet's warning (tertiary)
     --danger     SjoRed      #FF5D5D   the wallet's error
     --warn-bg    LightSurfaceVariant — no tint is invented; an existing
                  wallet grey carries the box and the amber line marks it

   ⚠ Not the exchange app's coral/cyan: there they mean BUY and SELL, and a
   button in coral would blur that. */
:root {
    --ink: #1F2328;
    --muted: #636C76;
    --line: #D0D7DE;
    --bg: #F6F8FA;
    --panel: #FFFFFF;
    --accent: #00B37D;
    /* Mint boxes (menu items, primary buttons) at the 60% the owner chose
       for the mint bar — lighter, same mint (owner, 2026-09-15) */
    --accent-soft: rgb(0 179 125 / 60%);
    /* A light mint wash — the open menu item and the "done" status label */
    --accent-tint: rgb(0 179 125 / 14%);
    --on-accent: #1F2328;
    --danger: #FF5D5D;
    /* The top bar is dark, the work below it stays light (owner, 2026-09-17).
       ⚠ No new colour: the bar is the wallet's own #1F2328 and the mint on it
       is the wallet's DARK-mode mint, exactly as the public site does it */
    --on-dark: #FFFFFF;
    --on-dark-muted: rgba(255, 255, 255, .62);
    --on-dark-accent: #00E5A0;
    --dark-line: rgba(255, 255, 255, .13);
    --warn-bg: #EDF1F5;
    --warn-line: #FFB020;
}

* { box-sizing: border-box; }

/* Keep the scrollbar's space whether or not a page is long enough to need
   one — otherwise a short result pushes everything sideways (owner,
   2026-09-15: 「버튼 누를 때마다 화면이 흔들린다」) */
html { scrollbar-gutter: stable; overflow-y: scroll; }

body {
    margin: 0;
    font: 15px/1.6 "Pretendard Variable", Pretendard, system-ui, "Noto Sans KR", sans-serif;
    /* Korean does not break inside a word */
    word-break: keep-all;
    color: var(--ink);
    background: var(--bg);
}

/* The top bar stays put while the page scrolls, on white (owner, 2026-09-15 —
   a mint bar was tried and dropped; the mint went into the menu boxes) */
header {
    position: sticky; top: 0; z-index: 10;
    display: flex; align-items: center; gap: 1.5rem;
    padding: .9rem 1.5rem;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
}
header .brand { font-weight: 700; letter-spacing: -.01em; }
/* The name: "EGG" in mint (owner, 2026-09-15, 시안 ②) — on the login screen.
   A wordmark, not body text — the 2.71:1 contrast rule for links does not
   apply to a logotype */
.wm { white-space: nowrap; }
.wm-egg { color: var(--accent); }
/* Login tagline under the title: smaller and muted, like a subtitle (owner,
   2026-09-15). Same size and colour as header .who — no new values */
.signin .tagline { color: var(--muted); font-size: .9em; }
header .spacer { margin-left: auto; }
header .who { color: var(--muted); font-size: .9em; }

/* ── Left sidebar (owner, 2026-09-15 ㉮) ────────────────────────────────
   Plain menu text with an icon; the open screen is marked with a light mint
   wash. Account name, settings and sign-out sit small at the bottom. */
aside.side {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 10;
    width: 14rem; padding: 1.2rem .8rem;
    display: flex; flex-direction: column;
    background: var(--ink); border-right: 0;
}
body:has(> aside.side) { padding-left: 14rem; }
.side-top { display: flex; align-items: center; justify-content: space-between; padding: 0 .6rem 1.4rem; }
.side .brand { font-weight: 700; font-size: 1.05em; color: var(--on-dark); text-decoration: none; }
.side .brand .wm-egg { color: var(--on-dark-accent); }
.side nav { display: flex; flex-direction: column; gap: 2px; }
.side nav a {
    display: flex; align-items: center; gap: .65rem;
    padding: .55rem .65rem; border-radius: 8px;
    color: var(--on-dark-muted); text-decoration: none; font-size: .94em;
}
.side nav a svg { flex: none; }
.side nav a:hover { background: rgba(255, 255, 255, .07); color: var(--on-dark); }
.side nav a.on { background: rgba(255, 255, 255, .1); color: var(--on-dark); font-weight: 600; }
.side nav a.on svg { color: var(--on-dark-accent); }
.side-foot {
    margin-top: auto; padding: .9rem .4rem 0; border-top: 1px solid var(--dark-line);
    display: flex; align-items: center; gap: .2rem;
}
.side-foot .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--on-dark-muted); font-size: .9em; padding-left: .25rem; }
.side-foot form { margin: 0; }
.side .icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 6px;
    background: transparent; color: var(--on-dark-muted); cursor: pointer;
}
.side .icon:hover { background: rgba(255, 255, 255, .1); color: var(--on-dark); filter: none; }
.side .icon.on { background: rgba(255, 255, 255, .1); color: var(--on-dark-accent); }

/* ── Top bar variant (owner, 2026-09-15 ㉯ — to compare with the sidebar) ──
   Same markup with class "top": fixed across the top, menu as plain text,
   the open screen underlined in mint. Phones use the same ☰ bar either way */
@media (min-width: 641px) {
    aside.side.top {
        position: sticky; bottom: auto; width: auto;
        flex-direction: row; align-items: center; gap: 2rem;
        padding: 0 1.5rem; border-right: 0; border-bottom: 0;
    }
    body:has(> aside.side.top) { padding-left: 0; }
    .side.top .side-top { padding: 0; }
    .side.top nav { flex-direction: row; gap: 1.5rem; align-self: stretch; }
    .side.top nav a {
        padding: 1.05rem 0 .95rem; gap: .45rem; border-radius: 0;
        border-bottom: 2px solid transparent;
    }
    .side.top nav a:hover { background: transparent; }
    .side.top nav a.on { background: transparent; border-bottom-color: var(--on-dark-accent); }
    .side.top .side-foot { margin: 0 0 0 auto; padding: 0; border-top: 0; }
    .side.top .side-foot .who { flex: none; padding-right: .3rem; }
}

/* Two columns — the legacy merchant detail's layout (owner, 2026-09-15),
   now used by 결제 상세 (EA-27): the payment left, its history right */
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
.detail-grid > section > h2:first-child { margin-top: 0; }
@media (max-width: 1100px) { .detail-grid { grid-template-columns: minmax(0, 1fr); } }

/* Folder index tabs on the merchant page — the open tab joins the sheet
   below it, the others sit behind in grey (owner, 2026-09-15, 서류철 모양) */
.folder { margin-top: 1rem; }
.folder-tabs { display: flex; gap: .3rem; padding-left: 1.2rem; }
.folder-tabs a {
    position: relative; top: 1px;
    padding: .6rem 1.4rem; border: 1px solid var(--line); border-bottom: 0;
    border-radius: 10px 10px 0 0; background: var(--warn-bg);
    color: var(--muted); text-decoration: none; font-weight: 600; font-size: .94em;
}
.folder-tabs a:hover { color: var(--ink); }
.folder-tabs a.on { z-index: 1; background: var(--panel); color: var(--ink); box-shadow: inset 0 3px 0 var(--accent); }
/* 확인 필요 — 묶음이 많으면 탭이 다음 줄로 (좁은 화면에서 옆으로 넘치지 않게) */
.folder-tabs.many { flex-wrap: wrap; row-gap: .3rem; }
.folder-body { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 1.4rem 1.6rem; }
.folder-body > section > h2:first-child { margin-top: 0; }
.folder-body .panel { border-color: var(--warn-bg); }
@media (max-width: 640px) {
    .folder-tabs { padding-left: .4rem; }
    .folder-tabs a { padding: .55rem 1rem; }
    .folder-body { padding: 1rem; }
}

/* Search row: wallet or member id, dates, button */
.search { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem .8rem; margin-bottom: 1rem; padding: 1rem 1.2rem; }
.search .field { margin: 0; }
.search .field.grow { flex: 1 1 16rem; }
.search .actions { display: flex; align-items: center; gap: .8rem; padding-bottom: .1rem; }
.chip-line { display: flex; align-items: center; gap: .8rem; margin: 0 0 1rem; }
.chip { display: inline-block; padding: .2rem .75rem; border-radius: 999px; background: var(--accent-tint); font-weight: 600; font-size: .9em; }
h2 .count { margin-left: .4rem; font-size: .7em; font-weight: 500; color: var(--muted); }

/* The status filter above the list box, at its right end, as the same
   coloured ovals the list uses (owner, 2026-09-15). The chosen one gets a
   dark ring; the rest are a little faded until hovered */
.status-filter { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .45rem; margin-bottom: .7rem; }
.status-filter .pill { padding: .35rem .95rem; font-size: .9em; text-decoration: none; opacity: .75; }
.status-filter .pill:hover { opacity: 1; }
.status-filter .pill.on { opacity: 1; box-shadow: 0 0 0 2px var(--ink); }
/* A shortened address fits one line — only full ones wrap */
td.mono[title] { white-space: nowrap; }

/* A searched user's totals */
.summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.summary > div { min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: .8rem 1rem; }
.summary span { display: block; font-size: .82em; color: var(--muted); }
.summary strong { font-size: 1.2em; overflow-wrap: anywhere; }

/* A table row that opens its detail when clicked anywhere */
tr.row-link { cursor: pointer; }
tr.row-link:hover td { background: var(--bg); }
tr.row-link a { color: var(--ink); text-decoration: none; font-weight: 600; }

/* Page numbers under a list, and the total beside its title */
.page-head h1 .count { margin-left: .5rem; font-size: .62em; font-weight: 500; color: var(--muted); }
.pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .25rem; margin: 1.4rem 0; }
.pager a, .pager span {
    min-width: 2.2rem; height: 2.2rem; padding: 0 .6rem; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--muted); text-decoration: none; font-size: .92em;
}
.pager a:hover { background: var(--panel); color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
.pager .on { background: var(--accent-tint); color: var(--ink); font-weight: 600; }
.pager .gap { min-width: 1.2rem; padding: 0; }

/* Page title with the filter beside it */
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: 1.2rem; }
.page-head h1 { margin: 0; }
/* Status filter as one grouped control — the chosen one stands out */
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 9px; background: var(--warn-bg); }
.seg a { padding: .3rem .85rem; border-radius: 7px; color: var(--muted); text-decoration: none; font-size: .9em; }
.seg a:hover { color: var(--ink); }
.seg a.on { background: var(--panel); color: var(--ink); font-weight: 600; box-shadow: 0 0 0 1px var(--line); }

/* Status as a soft rounded label. Tints are the wallet's own colours
   (mint, SjoBlue, SjoAmber, SjoRed) made light; text stays --ink */
.pill {
    display: inline-block; padding: .12rem .65rem; border-radius: 999px;
    font-size: .84em; font-weight: 600; white-space: nowrap;
    background: var(--warn-bg); color: var(--ink);
}
.pill.st-COMPLETED, .pill.st-DELIVERED, .pill.st-ACTIVE, .pill.st-APPROVED { background: var(--accent-tint); }
.pill.st-TRADING, .pill.st-SENDING, .pill.st-PENDING { background: rgb(76 141 255 / 14%); }
.pill.st-DISPUTED { background: rgb(255 176 32 / 22%); }
.pill.st-FAILED, .pill.st-REJECTED { background: rgb(255 93 93 / 16%); }

a { color: var(--ink); text-decoration: underline; }
a:hover { text-decoration: underline; }

main { max-width: 68rem; margin: 2rem auto; padding: 0 1.5rem; }
h1 { font-size: 1.35rem; margin: 0 0 1.2rem; }

.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 1.4rem;
}

table { width: 100%; border-collapse: collapse; }
th, td { padding: .8rem .7rem; text-align: left; border-bottom: 1px solid var(--warn-bg); }
th { font-size: .82em; color: var(--muted); font-weight: 500; border-bottom-color: var(--line); }
tr:last-child td { border-bottom: 0; }
/* Short values (dates, names, statuses) keep to one line and the column
   grows to fit them (owner, 2026-09-15). Only the long addresses and keys
   (.mono) wrap. Wide screens only — below 900px rows are cards */
@media (min-width: 901px) {
    th, td { white-space: nowrap; }
    td.mono { white-space: normal; }
    /* A table wider than its box scrolls inside the box instead of spilling
       out of it (owner, 2026-09-16) */
    .panel:has(> table) { overflow-x: auto; }
    .panel > table { min-width: 100%; width: auto; }
}

/* Addresses and keys are long and must be readable character by character */
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .88em; word-break: break-all; }

/* Keep a cell's text values together when its table row becomes a card. */
.card-text { flex: 1; min-width: 0; white-space: normal; overflow-wrap: anywhere; }

button {
    font: inherit;
    padding: .4rem .9rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--panel);
    cursor: pointer;
}
/* Same weight and lighter mint as the menu boxes (owner, 2026-09-15) */
button.primary {
    background: var(--accent-soft); border-color: transparent;
    color: var(--on-accent); font-weight: 600;
}
button.danger  { color: var(--danger); border-color: var(--danger); }
button:hover { filter: brightness(.97); }

.notice, .error, .warn {
    padding: .8rem 1rem; border-radius: 6px; margin-bottom: 1.2rem;
    border: 1px solid var(--line); background: var(--panel);
}
.error { border-color: var(--danger); color: var(--danger); }
.warn  { border-color: var(--warn-line); background: var(--warn-bg); }

.empty { color: var(--muted); padding: 1.5rem 0; text-align: center; }

/* Sign-in */
.signin { max-width: 22rem; margin: 6rem auto; }
.field { margin-bottom: .9rem; }
.field label { display: block; font-size: .85em; color: var(--muted); margin-bottom: .25rem; }
.field select {
    font: inherit; padding: .55rem .7rem;
    border: 1px solid var(--line); border-radius: 6px; background: var(--panel);
}
.field .help { display: block; color: var(--muted); font-size: .85em; margin-top: .3rem; }
.field input {
    width: 100%; font: inherit; padding: .55rem .7rem;
    border: 1px solid var(--line); border-radius: 6px; background: var(--panel);
}

/* The issued keys. Loud on purpose — they are shown once */
.issued dt { font-size: .85em; color: var(--muted); margin-top: .8rem; }
.issued dd { margin: .15rem 0 0; }

/* A one-time value with the copy icon at its end, inside one light box
   (owner, 2026-09-14 — the shape shown in the screenshot) */
.copyable {
    display: flex; align-items: center; gap: .5rem;
    border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
    padding: .45rem .5rem .45rem .75rem; margin: .2rem 0 0;
}
.copyable .copy-text { flex: 1; min-width: 0; word-break: break-all; }
.copyable .copy {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 6px;
    background: transparent; color: var(--muted); cursor: pointer;
}
.copyable .copy:hover { background: var(--bg); color: var(--ink); }
.copyable .copy .icon-done { display: none; }
.copyable .copy.copied { color: var(--accent); }
.copyable .copy.copied .icon-copy { display: none; }
.copyable .copy.copied .icon-done { display: inline; }

.muted { color: var(--muted); font-size: .9em; }

/* ── Responsive (owner, 2026-09-14) ─────────────────────────────────────
   Phone layout below 640px. A table turns into one card per row when its
   columns no longer fit: the wide ones (the payments list, nine columns)
   below 1200px, the rest below 900px — a narrow table stays a table for as
   long as it reads well (owner, 2026-09-16). Each cell carries its column
   name in data-label, filled from the header's message. */

.menu-toggle { display: none; }

@media (max-width: 1200px) {
    table.cards.wide thead { display: none; }
    table.cards.wide, table.cards.wide tbody, table.cards.wide tr, table.cards.wide td { display: block; width: 100%; }
    table.cards.wide tr {
        border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
        padding: .55rem .8rem; margin-bottom: .7rem;
    }
    table.cards.wide tr:last-child { margin-bottom: 0; }
    table.cards.wide td { display: flex; gap: .8rem; border: 0; padding: .28rem 0; min-width: 0; }
    table.cards.wide td[data-label]::before {
        content: attr(data-label); flex: 0 0 6.5rem;
        color: var(--muted); font-size: .85em; padding-top: .1rem;
    }
    table.cards.wide th, table.cards.wide td { white-space: normal; }
    table.cards.wide td:not([data-label]) { flex-wrap: wrap; justify-content: flex-end; padding-top: .5rem; }
    .panel:has(> table.cards.wide) { background: transparent; border: 0; padding: 0; }
}

/* A table whose one-line columns never fit its box is a list of cards at
   every width (the application review, and the payments list — its status
   pill and cancel reason were cut off at 1366/1280/1920, owner
   2026-10-21), so short values (dates, names, statuses) still keep to one
   line (owner, 2026-09-15). Both are nine columns (+ [승인]·[거절]) and
   are 1.1–1.5 times wider on one line than its box at any
   screen width — the box stops growing at main's 68rem — so a breakpoint
   would never reach a table that fits (2026-10-21). Same card look as the
   wide tables below 1200px */
table.cards.always thead { display: none; }
table.cards.always, table.cards.always tbody, table.cards.always tr, table.cards.always td { display: block; width: 100%; }
table.cards.always tr {
    border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
    padding: .55rem .8rem; margin-bottom: .7rem;
}
table.cards.always tr:last-child { margin-bottom: 0; }
table.cards.always td { display: flex; gap: .8rem; border: 0; padding: .28rem 0; min-width: 0; }
table.cards.always td[data-label]::before {
    content: attr(data-label); flex: 0 0 6.5rem;
    color: var(--muted); font-size: .85em; padding-top: .1rem;
}
table.cards.always th, table.cards.always td { white-space: normal; }
table.cards.always td:not([data-label]) { flex-wrap: wrap; justify-content: flex-end; padding-top: .5rem; }
.panel:has(> table.cards.always) { background: transparent; border: 0; padding: 0; }

@media (max-width: 900px) {
    table.cards thead { display: none; }
    table.cards, table.cards tbody, table.cards tr, table.cards td { display: block; width: 100%; }
    table.cards tr {
        border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
        padding: .55rem .8rem; margin-bottom: .7rem;
    }
    table.cards tr:last-child { margin-bottom: 0; }
    table.cards td { display: flex; gap: .8rem; border: 0; padding: .28rem 0; min-width: 0; }
    /* A long word in a card (a cancel reason like 「amount_out_of_range」) breaks inside the card
       instead of running past its right edge at phone width (2026-10-21 확인 — 거래내역 390px) */
    table.cards td > * { min-width: 0; overflow-wrap: anywhere; }
    table.cards td[data-label]::before {
        content: attr(data-label); flex: 0 0 6.5rem;
        color: var(--muted); font-size: .85em; padding-top: .1rem;
    }
    table.cards th, table.cards td { white-space: normal; }
    table.cards td:not([data-label]) { flex-wrap: wrap; justify-content: flex-end; padding-top: .5rem; }
    .panel:has(> table.cards) { background: transparent; border: 0; padding: 0; }
}

@media (max-width: 640px) {
    body { font-size: 15px; }
    header { flex-wrap: wrap; gap: .5rem .8rem; padding: .65rem 1rem; }

    /* Phone: the sidebar becomes a bar across the top; ☰ opens the menu */
    aside.side {
        position: sticky; bottom: auto; width: auto;
        padding: .6rem 1rem; border-right: 0; border-bottom: 1px solid var(--line);
    }
    body:has(> aside.side) { padding-left: 0; }
    .side-top { padding: 0; }
    /* ⚠ On the dark bar (2026-09-17) this button used to keep the light
       scheme's white box, which stood out as a white square on the dark */
    .side .menu-toggle {
        display: inline-flex; align-items: center; justify-content: center;
        width: 2.5rem; height: 2.5rem; padding: 0;
        border: 1px solid var(--dark-line); border-radius: 8px;
        background: rgba(255, 255, 255, .07); color: var(--on-dark);
    }
    .side .menu-toggle:hover { background: rgba(255, 255, 255, .14); }
    .side nav { margin-top: .6rem; }
    .side-foot { margin-top: .6rem; }
    aside.side:not(.open) nav,
    aside.side:not(.open) .side-foot { display: none; }

    main { margin: 1rem auto; padding: 0 1rem; }
    h1 { font-size: 1.2rem; }
    .panel { padding: .9rem; }
    .signin { margin: 2.5rem auto; padding: 0 1rem; }
    button { padding: .6rem 1rem; }
    form[style*="display:inline"] { display: inline-block !important; margin: .15rem .3rem .15rem 0; }
    .field select { width: 100%; }
}

/* 삭제 사유를 줄 안에서 받는다 (사장님 2026-09-16) */
.delete-row { display: inline-flex; gap: .4rem; align-items: center; }
.delete-row input { font: inherit; padding: .35rem .6rem; border: 1px solid var(--line); border-radius: 6px; width: 11rem; }

/* 메뉴의 「확인 필요」 옆 숫자 (사장님 2026-09-16) */
.side nav a .badge {
    margin-left: auto; min-width: 1.4rem; padding: 0 .4rem; border-radius: 999px;
    background: var(--danger); color: #fff; font-size: .78em; font-weight: 600;
    text-align: center; line-height: 1.5rem;
}

/* 거래취소 사유 — 상태 타원 아래 한 줄 (명세 EA-25) */
.pill + .reason { display: block; margin-top: .25rem; }

/* 설정 값 — 웹훅 다시 보내기 간격 6칸을 한 줄에 (명세 EA-19) */
.retries { display: flex; flex-wrap: wrap; gap: .4rem; }
.field .retries input { width: 7rem; }

/* 약관 (EA-24) — 본문 줄은 누를 때만. ⚠ 좁은 화면의 카드 모양(display:block)이 hidden 을 이기지 않게 */
tr[hidden] { display: none !important; }
.terms-body h3 { font-size: .9em; color: var(--muted); margin: .6rem 0 .3rem; }
.terms-text { white-space: pre-wrap; word-break: break-word; }
.field textarea {
    width: 100%; font: inherit; padding: .55rem .7rem; resize: vertical;
    border: 1px solid var(--line); border-radius: 6px; background: var(--panel);
}

/* 권한 이름 편집 (EA-23) — 페이지 한 줄, 그 옆에 버튼 체크들 */
label.check { display: inline-flex; align-items: center; gap: .35rem; margin: .15rem 1rem .15rem 0; white-space: nowrap; }
label.check input { width: auto; }
.form-actions { display: flex; align-items: center; gap: .8rem; margin: 1.2rem 0 0; }

/* 정할 것 45 — 「이미 로그인 중입니다」 팝업 (로그인 화면) */
.modal-backdrop {
    position: fixed; inset: 0; z-index: 10;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    background: rgb(31 35 40 / 45%);
}
.modal { max-width: 360px; width: 100%; margin: 0; }
.modal-buttons { display: flex; gap: 8px; justify-content: flex-end; }
.modal-buttons form { margin: 0; }

/* 가맹점 관리자 화면의 단추·행동 링크 — 공개 사이트 [신청하기]와 같은 초록 상자 + 검정 글씨
   (사장님 2026-10-21 「밑줄이 아니라 신청하기 버튼 처럼 초록 박스에 검정글씨로 된 버튼으로 통일감 주고」).
   eggpay-web site.css `button` 그대로: --accent #00B37D, --on-accent #1F2328, 700, 10px 둥글기.
   ⚠ 가맹점 계정 화면(body.merchant-ui)만 — 직원 화면은 그대로. 복사 아이콘은 아이콘 그대로 */
/* 크기는 글자에 맞는 보통 크기 — 입력칸(.field input)과 같은 글꼴·위아래 여백·테두리 두께라 높이가 같다
   (사장님 2026-10-21 「새로발급, 저정, 비밀번호 변경, 재발급 버튼 크기 크다고 생각하지 않니 비율맞게 줄이고」 —
   전의 높이 3.3rem 은 입력칸보다 컸다). 색·굵은 글씨·둥근 모서리는 그대로 */
.merchant-ui main button:not(.copy),
.merchant-ui main a.btn {
    font: inherit; font-weight: 700;
    padding: .55rem 1.1rem; border: 1px solid transparent; border-radius: 10px;
    background: var(--accent); color: var(--on-accent); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none; vertical-align: middle;
}
.merchant-ui main button:not(.copy):hover,
.merchant-ui main a.btn:hover { filter: brightness(.95); }

/* 웹훅 서명 키 「발급한 때 …」 글과 [새로 발급]을 한 줄에 세로 가운데로 (사장님 2026-10-21) */
.merchant-ui .issued dd.inline-action { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .8rem; }

/* 마이페이지 「내 가맹점 정보」 — 칸 아래 도움말과 그 칸의 입력 오류 (2026-10-21) */
.merchant-ui .issued dd input { width: 100%; font: inherit; padding: .55rem .7rem;
                   border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.merchant-ui .issued dd .help { display: block; color: var(--muted); font-size: .85em; margin-top: .3rem; }
.merchant-ui .issued dd .bad  { display: block; color: var(--danger); font-size: .88em; margin-top: .3rem; }
.merchant-ui .issued dd.warn  { margin-top: .5rem; }