/*
 * quojama.com
 * 1ページだけのレシート。暗い台の上に感熱紙が1枚出てくる。
 * 色はこの :root の変数だけで管理する（他の場所に色を直書きしない）。
 */
:root {
    /* 台（pistachio-on-vss の SETUPTOOLS テーマの背景とアクセント） */
    --bg: #202020;
    --accent: #e5b62f;
    --accent-hover: #00ff08;
    --muted: #5f7f99;
    /* プリンタ */
    --printer: #3a3a3a;
    --printer-slot: #111111;
    /* 感熱紙と印字 */
    --paper: #f6f5f1;
    --ink: #2b2b2b;
    --rule: #9a9a9a;
    --shadow: rgba(0, 0, 0, 0.35);
    --selection-fg: #ffffff;
    --selection-bg: #007338;
}

* { box-sizing: border-box; }

html { font-size: 16px; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 8vh 16px 2rem;
    background: var(--bg);
    color: var(--ink);
    /* 日本語も出る等幅フォント。絵文字は白黒の Noto Emoji で黒一色に印字する */
    font-family: "M PLUS 1 Code", "Noto Emoji", "Osaka-Mono", "MS Gothic", monospace;
}

::selection { color: var(--selection-fg); background: var(--selection-bg); }

/* ===== プリンタの口 ===== */
.printer {
    position: relative;
    width: min(100%, 340px);
    height: 18px;
    background: var(--printer);
    border-radius: 6px 6px 2px 2px;
}

.printer::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 2px;
    height: 3px;
    background: var(--printer-slot);
    border-radius: 2px;
}

/* ===== 感熱紙 ===== */
/* プリンタの口から上を隠す枠。紙の影が左右と下には出るよう、上だけ切る */
.tray {
    width: min(100%, 312px);
    margin-top: -22px;
    clip-path: inset(0 -24px -24px -24px);
}

.paper {
    position: relative;
    width: 100%;
    padding: 22px 20px 26px;
    background: var(--paper);
    font-size: 13px;
    line-height: 1.75;
    filter: drop-shadow(0 6px 10px var(--shadow));
}

/* 紙の下端のギザギザ（ちぎった跡） */
.paper::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 8px;
    background:
        linear-gradient(-45deg, var(--bg) 4px, transparent 0) 0 0 / 10px 8px repeat-x,
        linear-gradient(45deg, var(--bg) 4px, transparent 0) 0 0 / 10px 8px repeat-x;
}

.paper p { margin: 0; }

.paper hr {
    border: 0;
    border-top: 1px dashed var(--rule);
    margin: 6px 0;
}

.logo, .qr {
    display: block;
    margin: 0 auto;
    image-rendering: pixelated;
}

.logo { width: 128px; height: 128px; margin-bottom: 4px; }
.qr { width: 100px; height: 100px; margin-top: 14px; margin-bottom: 6px; }

h1 {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.1em;
    text-align: center;
}

.center { text-align: center; }
.thanks { margin-top: 8px !important; }

/* 左右に振り分ける行（日時と番号、点数と金額など） */
.row, .paper li {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

/* About / Links / Social は見出しの下を字下げした品目の並び */
h2 {
    margin: 0;
    font-size: inherit;
    font-weight: 400;
}

ul { list-style: none; margin: 0; padding: 0 0 0 1em; }
/* index.md に書いた文章（class なしの p）も品目と同じく字下げする */
.paper p:not([class]) { padding-left: 1em; }
ul + h2, p:not([class]) + h2 { margin-top: 1.75em; }

/* About の「1987」などを右端へ */
.paper li span { margin-left: auto; }

/* リンクの行は右端に → */
.paper li:has(a) { justify-content: flex-start; }
.paper li:has(a)::after { content: "→"; margin-left: auto; }

.paper a:any-link { color: var(--ink); text-decoration: none; }
.paper a:hover { color: var(--paper); background: var(--ink); }
h1 a:hover { color: var(--ink); background: none; }

/* 印字が始まるまで紙ごと隠す（layouts/default.html の head で付け、印字開始で外す） */
.before-print .paper { visibility: hidden; }

/* ===== もう一枚印刷する ===== */
.reprint {
    padding: 9px 14px;
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
    font-family: inherit;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}

.reprint:hover { color: var(--accent-hover); border-color: var(--accent-hover); }

a:focus-visible, button:focus-visible { outline: 2px dashed var(--accent-hover); outline-offset: 3px; }

/* ===== フッター ===== */
footer {
    width: min(100%, 312px);
    margin-top: 1rem;
    text-align: right;
    color: var(--muted);
    font-size: 0.6rem;
    line-height: 1.8;
}

footer a:any-link { color: var(--accent); text-decoration: none; }
footer a:hover { color: var(--accent-hover); text-decoration: underline; }