/* 감열 영수증에서 가져온 토큰. 곡률 0, 그림자 0.
     읽는 글자는 산세리프, 모노는 42칸 정렬이 필요한 곳(미리보기·숫자)만. */
  :root {
    --paper:  #f2f3f1;   /* 책상 */
    --strip:  #fbfbf9;   /* 종이 — 크림이 아니라 살짝 푸른 흰색 */
    --ink:    #202226;   /* 감열 발색: 순수 검정 아님 */
    --ink-2:  #4a4e54;   /* 8.3:1 */
    --ink-3:  #696d74;   /* 5.02:1 — 여기가 하한(4.9:1) */
    --rule:   #c4c7c2;
    --rule-2: #dfe1dd;
    --red:    #ab2318;
    --roll:   #e39c9c;
    --ok:     #26593f;
    --warn:   #7f5310;
    --mono: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", "DejaVu Sans Mono", monospace;
    --sans: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Segoe UI", "Malgun Gothic", "Noto Sans KR", Roboto, sans-serif;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --paper: #0f1012; --strip: #1a1c1f; --ink: #eceded; --ink-2: #a8acb2;
      --ink-3: #878b91; --rule: #3d4045; --rule-2: #292c30;
      --red: #ef7a6d; --roll: #7e3b38; --ok: #7cc09c; --warn: #d7a648;
    }
  }
  :root[data-theme="dark"] {
    --paper: #0f1012; --strip: #1a1c1f; --ink: #eceded; --ink-2: #a8acb2;
    --ink-3: #878b91; --rule: #3d4045; --rule-2: #292c30;
    --red: #ef7a6d; --roll: #7e3b38; --ok: #7cc09c; --warn: #d7a648;
  }
  :root[data-theme="light"] {
    --paper: #f2f3f1; --strip: #fbfbf9; --ink: #202226; --ink-2: #4a4e54;
    --ink-3: #696d74; --rule: #c4c7c2; --rule-2: #dfe1dd;
    --red: #ab2318; --roll: #e39c9c; --ok: #26593f; --warn: #7f5310;
  }

  * { box-sizing: border-box; }
  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.65;
    -webkit-text-size-adjust: 100%;
  }
  button, input, textarea, select { font: inherit; color: inherit; border-radius: 0; }
  :focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
  .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

  /* 종이 한 장 = 앱. 데스크톱에서도 넓어지지 않는다. */
  .strip {
    background: var(--strip);
    border-left: 1px solid var(--rule-2);
    border-right: 1px solid var(--rule-2);
    max-width: 28rem;
    margin: 0 auto;
    min-height: 100vh;
    padding: 0 1.15rem 7.5rem;
  }


  header.head { text-align: center; padding: 1.6rem 0 1rem; }
  header.head .name {
    font-family: var(--mono); font-size: 1.15rem; font-weight: 700;
    letter-spacing: .38em; text-indent: .38em; margin: 0;
  }
  header.head .device {
    font-family: var(--mono); margin: .35rem 0 0; font-size: 12px;
    color: var(--ink-3); letter-spacing: .08em;
  }

  .rule      { border-top: 1px solid var(--rule); }
  .rule-thin { border-top: 1px solid var(--rule-2); }
  .rule-thin.spaced { margin-top: .9rem; }
  .rule-dash { border-top: 1px dashed var(--rule); }
  .stat-block { padding-top: .5rem; }

  /* 영수증식 가운데 표제 (대문자 트래킹 라벨 대신) */
  .caption {
    text-align: center; font-size: 13px; color: var(--ink-3);
    padding: 1rem 0 .45rem; margin: 0;
  }
  .caption::before, .caption::after { content: " · "; }

  /* 점선 리더 — 계산서의 관습. 값은 모노, 라벨은 산세리프 */
  .kv { display: flex; align-items: baseline; gap: .5rem; padding: .2rem 0; }
  .kv .k { color: var(--ink-2); font-size: 14px; }
  .kv .dots { flex: 1; border-bottom: 1px dotted var(--rule); transform: translateY(-.32rem); }
  .kv .v { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 14px; }
  .kv .v.alert { color: var(--red); font-weight: 700; }

  /* 상태: 색면 배지 대신 대괄호 토큰 */
  .status { display: flex; align-items: center; justify-content: space-between; gap: .7rem; padding: .7rem 0; }
  .status .token {
    background: none; border: 0; padding: .25rem 0;
    font-size: 15px; font-weight: 700;
  }
  .status .token.s-ok   { color: var(--ok); }
  .status .token.s-warn { color: var(--warn); }
  .status .token.s-crit { color: var(--red); }
  .status .sub { color: var(--ink-3); font-size: 13px; flex: 1; }

  .linkbtn {
    background: none; border: 0; padding: .7rem 0; cursor: pointer;
    color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; font-size: 14px;
  }
  .linkbtn:hover { color: var(--ink); }

  .presets { display: flex; flex-wrap: wrap; gap: .35rem; padding: .1rem 0; }
  .presets button {
    background: none; border: 1px solid var(--rule); padding: .35rem .6rem;
    font-size: 14px; cursor: pointer; color: var(--ink-2); min-height: 44px;
  }
  .presets button:hover { border-color: var(--ink); color: var(--ink); }
  .presets button.add { border-style: dashed; }

  /* 입력: 박스가 아니라 위아래 괘선 사이에 직접 쓴다 */
  textarea {
    width: 100%; min-height: 7.5rem; resize: vertical; display: block;
    background: transparent; border: 0;
    border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
    padding: .75rem .1rem; font-size: 17px; line-height: 1.7;
    margin-top: .6rem;
  }
  textarea::placeholder { color: var(--ink-3); }
  textarea:focus { outline: 0; border-top-color: var(--ink); border-bottom-color: var(--ink); }

  /* 미리보기 = 실제로 나올 종이.
     42칸이 항상 폭에 딱 맞도록 글자 크기를 컨테이너 폭에서 역산(모노 1칸 ≈ 0.6em). */
  .paper {
    white-space: pre-wrap; word-break: break-all;
    font-family: var(--mono);
    /* 42칸 × 0.6em = 25.2em 이 이론값이지만, --mono 스택의 Menlo·DejaVu Sans Mono 는
       자간이 0.60205em 이라 42칸째가 상자를 ~1.3px 넘겨 word-break 로 접힌다 —
       한 줄이 두 줄로 보이는 것은 이 미리보기가 막으라고 있는 바로 그 현상이다.
       25.6 으로 나눠 ~1.6% 여유를 둔다. */
    font-size: clamp(11px, calc((min(28rem, 100vw) - 2.3rem) / 25.6), 15px);
    line-height: 1.6; padding: .7rem 0 .3rem; margin: 0;
    background-image: repeating-linear-gradient(
      to bottom, transparent 0 3px, color-mix(in srgb, var(--ink) 3%, transparent) 3px 4px);
  }
  .paper.empty { color: var(--ink-3); font-family: var(--sans); font-size: 14px; background-image: none; }
  .paper .feed { color: var(--ink-3); }
  .cutline {
    display: flex; align-items: center; gap: .6rem; margin: 0;
    font-size: 12px; color: var(--ink-3); letter-spacing: .12em; padding: .15rem 0 .25rem;
  }
  .cutline::before, .cutline::after { content: ""; flex: 1; border-top: 1px dashed var(--rule); }
  /* 실제 감열지 롤이 끝날 때 나오는 그 분홍 */
  .roll-stripe { height: 6px; background: repeating-linear-gradient(90deg, var(--roll) 0 14px, transparent 14px 20px); }

  details.opts summary {
    list-style: none; cursor: pointer; padding: .85rem .1rem;
    display: flex; align-items: baseline; justify-content: space-between; gap: .7rem;
    font-size: 14px; color: var(--ink-2); min-height: 44px;
  }
  details.opts summary::-webkit-details-marker { display: none; }
  details.opts summary .now { color: var(--ink); }
  details.opts summary .toggle { color: var(--ink-3); font-size: 13px; white-space: nowrap; }
  details.opts[open] summary .toggle { visibility: hidden; }
  .opt-row {
    display: flex; align-items: center; justify-content: space-between; gap: .9rem;
    padding: .35rem 0; min-height: 44px;
  }
  .opt-row label { color: var(--ink-2); font-size: 15px; }
  .opt-row select, .opt-row input[type="number"] {
    background: transparent; border: 0; border-bottom: 1px solid var(--rule);
    padding: .3rem .2rem; min-width: 7rem; text-align: right; font-size: 15px;
  }
  .opt-row input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--ink); }
  .opt-rows { padding-bottom: .8rem; }

  /* 이력: 완료/실패를 색면 없이 글자로 */
  .job {
    display: grid; grid-template-columns: 3.2rem 1fr auto; align-items: baseline;
    gap: .6rem; padding: .65rem 0; border-top: 1px solid var(--rule-2);
  }
  .job .st { font-size: 13px; font-weight: 700; }
  .job.ok   .st { color: var(--ok); }
  .job.fail .st { color: var(--red); }
  .job .txt { font-size: 15px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .job .meta { font-size: 13px; color: var(--ink-3); }
  .job.fail .meta { color: var(--red); }
  .empty-note { color: var(--ink-3); font-size: 14px; padding: .7rem 0; margin: 0; }

  /* 인쇄 바: 유리 블러 아님. 잉크색 고체 + 1px 경계 */
  .printbar {
    position: fixed; left: 0; right: 0; bottom: 0;
    background: var(--strip); border-top: 1px solid var(--rule);
    padding: .6rem 1.15rem calc(.6rem + env(safe-area-inset-bottom));
  }
  .printbar .inner { max-width: 28rem; margin: 0 auto; }
  .print {
    width: 100%; min-height: 54px; background: var(--ink); color: var(--strip);
    border: 1px solid var(--ink); cursor: pointer; font-size: 17px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; gap: .6rem;
  }
  .print:active { background: var(--ink-2); border-color: var(--ink-2); }
  .print[disabled] { background: transparent; color: var(--ink-3); border-color: var(--rule); cursor: not-allowed; }
  .line-out { font-size: 13.5px; min-height: 1.2rem; padding-top: .4rem; margin: 0; text-align: center; color: var(--ink-2); }
  .line-out.ok   { color: var(--ok); }
  .line-out.fail { color: var(--red); }

  .bars { display: inline-flex; gap: 2px; }
  .bars i { width: 3px; height: 12px; background: currentColor; opacity: .3; animation: feed .9s linear infinite; }
  .bars i:nth-child(2) { animation-delay: .15s; }
  .bars i:nth-child(3) { animation-delay: .3s; }
  @keyframes feed { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
  @media (prefers-reduced-motion: reduce) { .bars i { animation: none; opacity: .7; } }

  .login { padding-top: 2.2rem; }
  .login .field { padding: 1.5rem 0 .3rem; }
  .login label { display: block; color: var(--ink-2); font-size: 14px; padding-bottom: .35rem; }
  .login input {
    width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--rule);
    padding: .65rem .1rem; font-size: 17px; min-height: 48px;
  }
  .login input:focus { outline: 0; border-bottom-color: var(--ink); }
  .login .note { color: var(--ink-3); font-size: 13.5px; text-align: center; padding: 1rem 0 0; margin: 0; }
  .login .err { color: var(--red); font-size: 14px; padding-top: .5rem; margin: 0; }
  .login .enter { margin-top: 1.4rem; }

  .hidden { display: none !important; }

  /* 데스크톱: 종이는 넓어지지 않는다. 어두운 책상 위의 한 장. */
  @media (min-width: 900px) {
    body { background: color-mix(in srgb, var(--paper) 84%, var(--ink)); }
    .desk { padding: 2rem 1rem 3rem; }
    .strip { min-height: 0; border: 1px solid var(--rule-2); padding-bottom: 1.3rem; }
    .printbar { position: static; background: none; border-top: 1px solid var(--rule); margin-top: .9rem; padding: .9rem 0 0; }
    .printbar .inner { max-width: none; }
  }