/* 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");

/* The look the owner picked on 2026-09-17 (시안 「짙은 빛」): the chrome — header
   and footer — is dark on every screen, the front page opens on that dark with
   the mint rising from below, and everything that is READ (the form, the
   reference, the terms) stays on white. Long text is not set on a dark screen.

   ⚠ No colour is invented here. Every value below is one the owner already
   decided on 2026-09-14/15, taken from the wallet app's own palette:

     --ink        #1F2328  LightOnSurface — also the dark chrome's background,
                           which is why the site and the wallet still read as
                           one family
     --accent     #00B37D  SjoMintDim   the wallet's LIGHT-mode mint
     --on-dark-accent #00E5A0 SjoMint   the wallet's DARK-mode mint, used only
                           where mint sits on the dark chrome
     --on-accent  #1F2328  dark text on mint — white reads at 2.71:1, this at
                           5.83:1 (owner, 2026-09-14)
     --muted #636C76 · --line #D0D7DE · --soft #F6F8FA · --danger #FF5D5D

   The typeface is Pretendard (SIL Open Font License), served from this server
   (see the top of this file); if it ever fails to load the page falls back to
   the system font and only the lettering changes, nothing breaks. */
:root {
    --ink: #1F2328;
    --muted: #636C76;
    --line: #D0D7DE;
    --bg: #FFFFFF;
    --soft: #F6F8FA;
    --accent: #00B37D;
    --on-accent: #1F2328;
    --on-dark-accent: #00E5A0;
    --on-dark: #FFFFFF;
    --on-dark-muted: rgba(255, 255, 255, .62);
    --dark-line: rgba(255, 255, 255, .13);
    --danger: #FF5D5D;
    --ok-bg: #EDF1F5;
    --ok-line: #00B37D;
    /* The text column's width. The header uses it too, so the name and the
       menu sit on the same axis as the text below them (owner, 2026-09-17) */
    --page: 46rem;
}
/* The reference is a wider column, and the header follows it */
body:has(main.wide) { --page: 58rem; }

* { box-sizing: border-box; }

/* A short page must not leave the body's white showing BELOW the dark footer:
   the page is a column and the reading part takes what is left over */
body {
    margin: 0;
    min-height: 100vh;
    display: flex; flex-direction: column;
    font-family: "Pretendard Variable", Pretendard, system-ui, "Noto Sans KR", sans-serif;
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    /* Korean does not break inside a word: without this a narrow screen can
       leave a line ending in a single trailing syllable */
    word-break: keep-all;
}


/* ── The chrome: dark on every screen ──────────────────────────────────── */
header { background: var(--ink); }
header .inner {
    display: flex; align-items: center; gap: 1.5rem;
    width: 100%; max-width: var(--page); margin: 0 auto; padding: 1.25rem 1.5rem;
}
/* The name is a wordmark, not a link in the text: no underline, and larger
   than the body (owner, 2026-09-17). ⚠ The admin web keeps its own smaller
   size: the owner asked for this one to grow, not for the two to be equal */
header .brand {
    font-weight: 800; font-size: 1.25rem; letter-spacing: -.04em;
    color: var(--on-dark); text-decoration: none;
}
/* The name: "EGG" in mint (owner, 2026-09-15, 시안 ②). On the dark chrome it
   is the wallet's dark-mode mint, which is what that app uses on dark too */
.wm { white-space: nowrap; }
.wm-egg { color: var(--accent); }
header .wm-egg, footer .wm-egg { color: var(--on-dark-accent); }

header nav { display: flex; align-items: center; gap: 1.6rem; margin-left: auto; }
/* Header menu: quiet until pointed at — no underline at rest, underline on
   hover and keyboard focus (owner, 2026-09-15). The screen you are on keeps
   a mint line under it, the mark the admin web already uses for the open
   menu (owner, 2026-09-17). Links in the body keep their underline */
header nav a {
    color: var(--on-dark-muted); text-decoration: none; font-size: .94rem; font-weight: 500;
    padding: .3rem 0; border-bottom: 2px solid transparent;
}
header nav a:hover, header nav a:focus-visible { color: var(--on-dark); text-decoration: underline; }
header nav a.on { color: var(--on-dark); font-weight: 700; border-bottom-color: var(--on-dark-accent); }
a { color: var(--ink); text-decoration: underline; }
a:hover { text-decoration: underline; }

/* ── The front page opens on the dark, with the mint rising from below ──── */
main.hero {
    max-width: none; margin: 0; padding: 5rem 1.5rem 5.5rem;
    background:
        radial-gradient(38rem 20rem at 50% 115%, rgba(0, 179, 125, .42), transparent 68%),
        radial-gradient(26rem 14rem at 12% -4rem, rgba(0, 179, 125, .22), transparent 70%),
        var(--ink);
    color: var(--on-dark); text-align: center;
}
main.hero h1 { font-size: 3.4rem; line-height: 1.1; letter-spacing: -.055em; margin: 0 0 1.6rem; }
main.hero .lead { color: var(--on-dark-muted); font-size: 1.08rem; line-height: 1.75;
                  max-width: 33rem; margin: 0 auto 2.6rem; }
main.hero .cta { display: flex; justify-content: center; gap: .6rem; margin: 0; }
main.hero .cta a { text-decoration: none; }

/* ── What is read stays on white ───────────────────────────────────────── */
/* ⚠ width: 100% — this is a flex item (the page is a column so the dark
   footer sits at the bottom of a short page) and it has auto side margins
   because it is centred. In flex layout that combination sizes it from its
   CONTENT, not from the screen: the reference page came out 472px wide on a
   375px phone and scrolled sideways. Measured at 375px, not read */
main { flex: 1 0 auto; width: 100%; max-width: var(--page); margin: 3.5rem auto 4.5rem; padding: 0 1.5rem; }
h1 { font-size: 2.1rem; font-weight: 800; margin: 0 0 .6rem; letter-spacing: -.045em; }
h2 { font-size: 1.25rem; font-weight: 700; margin: 2.4rem 0 .6rem; letter-spacing: -.025em; }
h3 { font-size: 1.05rem; font-weight: 700; margin: 1.6rem 0 .4rem; letter-spacing: -.02em; }
p { margin: 0 0 1rem; }
/* pre-line: the introduction's line breaks show as separate lines (owner, 2026-09-15) */
.lead { color: var(--muted); white-space: pre-line; font-size: 1.02rem; }

.field { margin-bottom: 1.3rem; }
.field label { display: block; font-weight: 700; margin-bottom: .3rem; font-size: .95rem; }
.field .help { display: block; color: var(--muted); font-size: .88rem; margin-bottom: .45rem; }
.field input {
    width: 100%; font: inherit; height: 3.1rem; padding: 0 .95rem;
    border: 1px solid var(--line); border-radius: 10px; background: var(--bg);
}
.field input:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0, 179, 125, .16);
}
.field .bad { color: var(--danger); font-size: .88em; margin-top: .3rem; }

button {
    font: inherit; font-weight: 700; font-size: 1rem;
    height: 3.3rem; padding: 0 1.8rem; border: 0; border-radius: 10px;
    background: var(--accent); color: var(--on-accent); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
button:hover { filter: brightness(.95); }
/* The quieter of two buttons side by side — on the dark front page */
button.ghost {
    background: rgba(255, 255, 255, .06); color: var(--on-dark);
    border: 1px solid var(--dark-line);
}
button.ghost:hover { background: rgba(255, 255, 255, .12); filter: none; }

.error { border: 1px solid var(--danger); color: var(--danger);
         padding: .9rem 1.1rem; border-radius: 10px; margin-bottom: 1.5rem; }
.done  { border: 1px solid var(--ok-line); background: var(--ok-bg);
         padding: 1.3rem; border-radius: 12px; }

/* The reference */
table { width: 100%; border-collapse: collapse; margin: .6rem 0 1.4rem; }
th, td { padding: .6rem .6rem; text-align: left; border-bottom: 1px solid var(--line);
         vertical-align: top; }
th { font-size: .82em; color: var(--muted); font-weight: 700; letter-spacing: .02em; }
code, .mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .89em; }
code { background: var(--soft); padding: .12em .4em; border-radius: 5px; word-break: break-all; }
pre { background: var(--ink); color: #D6DCE2; border: 0; border-radius: 12px;
      padding: 1.1rem 1.25rem; overflow-x: auto; line-height: 1.7; }
pre code { background: none; padding: 0; color: inherit; }
.note { border-left: 3px solid var(--accent); background: var(--soft);
        padding: .8rem 1.1rem; margin: 1rem 0; border-radius: 0 10px 10px 0; }

footer { flex: none; background: var(--ink); color: var(--on-dark-muted); margin-top: 0;
         padding: 1.8rem 1.5rem; font-size: .86rem; text-align: center; }
footer .wm { color: var(--on-dark); font-weight: 700; }
/* 바닥글의 이용약관 · 개인정보처리방침 · 고객센터 (사장님 2026-09-16) */
footer .legal { display: block; margin-top: .5rem; }
footer .legal a { color: var(--on-dark-muted); text-decoration: none; }
footer .legal a:hover, footer .legal a:focus-visible { color: var(--on-dark); text-decoration: underline; }

/* 동의 칸 — 글상자가 아니라 네모칸이라 폭을 가득 채우지 않는다 */
.field.check label { display: flex; align-items: flex-start; gap: .55rem; font-weight: 400; }
.field.check input { width: auto; height: auto; flex: none; margin-top: .45rem; }
.field.check .help { margin-top: .3rem; }

/* 이용약관 · 개인정보처리방침 — 읽는 글이라 줄 간격을 넓게 둔다 */
.legal-doc h2 { font-size: 1.1rem; margin-top: 2.2rem; }
.legal-doc li { margin-bottom: .35rem; }
.legal-doc table th { white-space: nowrap; }
/* 본문은 백엔드가 준 글자 그대로다(EP-P-02). 줄바꿈만 살리고, 긴 주소는 줄을 넘긴다 */
.legal-doc .legal-body { white-space: pre-line; overflow-wrap: anywhere; margin-top: 1.4rem; }

/* ── Responsive (owner, 2026-09-14) ─────────────────────────────────────
   Phone layout below 640px. The reference tables turn into one card per
   row below 900px: the header row goes, the first cell (the field or code
   being described) is set in bold, and the rest follow underneath. */

@media (max-width: 900px) {
    table, table tbody, table tr, table td { display: block; width: 100%; }
    table tr:has(> th) { display: none; }
    table tr { border: 1px solid var(--line); border-radius: 10px; padding: .6rem .9rem; margin-bottom: .6rem; }
    table td { border: 0; padding: .15rem 0; }
    table td:first-child { font-weight: 700; }
    body:has(main.wide) { --page: 46rem; }
}

@media (max-width: 640px) {
    body { font-size: 15px; }
    header .inner { flex-wrap: wrap; gap: .4rem 1rem; padding: .9rem 1rem; }
    header .brand { font-size: 1.15rem; }
    header nav { gap: 1rem; }
    main { margin: 2rem auto 3rem; padding: 0 1rem; }
    main.hero { padding: 3.2rem 1.2rem 3.6rem; }
    main.hero h1 { font-size: 2.3rem; }
    main.hero .lead { font-size: 1rem; }
    main.hero .cta { flex-direction: column; }
    h1 { font-size: 1.7rem; }
    h2 { margin-top: 2rem; }
    button { width: 100%; }
    pre { padding: .8rem .9rem; font-size: .85em; }
    footer { padding: 1.5rem 1rem; }
}