:root {
    --ink: #161616;
    --sub: #5c5c5c;
    --line: #e2e2e2;
    --soft: #f5f5f5;
    --done: #0b6e3a;
    --moving: #1257a8;
    --wait: #a14d00;
    --cancel: #5c5c5c;
    --when: 11.6em;
    --tagw: 3.6em;
  }
  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body {
    margin: 0;
    background: #fff;
    color: var(--ink);
    font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
  button, input { font: inherit; color: inherit; }
  button { background: none; border: 0; padding: 0; cursor: pointer; }
  h1, h2, h3, p, dl, dd, ol, ul { margin: 0; padding: 0; }
  ol, ul { list-style: none; }
  :focus-visible { outline: 2px solid var(--moving); outline-offset: 2px; }
  h1:focus { outline: none; }
  [hidden] { display: none !important; }

  .page { max-width: 780px; margin: 0 auto; padding: 0 32px 64px; }

  /* 맨 위 줄 */
  .top {
    display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
    padding: 16px 0 12px;
  }
  .top-home { font-size: 14px; font-weight: 600; }
  .proof { font-size: 12px; color: var(--sub); }

  /* 찾기 */
  .home-title { font-size: 30px; line-height: 1.35; font-weight: 600; margin: 16vh 0 20px; }
  .search { display: flex; gap: 8px; }
  .search input {
    flex: 1 1 auto; min-width: 0;
    height: 44px; padding: 0 14px;
    border: 1px solid #8a8a8a; border-radius: 4px; background: #fff;
  }
  .search input::placeholder { color: #767676; }
  .search button {
    flex: none; height: 44px; padding: 0 20px;
    border-radius: 4px; background: var(--ink); color: #fff; font-weight: 600;
  }
  .view-home .search input { height: 56px; font-size: 18px; }
  .view-home .search button { height: 56px; padding: 0 28px; font-size: 18px; }
  .view-home .search + main { margin-top: 12px; }
  body:not(.view-home) .home-title { display: none; }

  .hint { color: var(--sub); }
  .form-msg { margin-top: 8px; font-size: 15px; color: var(--wait); }
  .samples { margin-top: 48px; }
  .samples h2 { font-size: 13px; font-weight: 400; color: var(--sub); margin-bottom: 8px; }
  .samples button { padding: 6px 0; text-decoration: underline; text-underline-offset: 3px; text-align: left; }
  .samples span { color: var(--sub); font-size: 14px; margin-left: 8px; white-space: nowrap; }

  /* 고르기 목록 */
  .list-title { font-size: 24px; line-height: 1.4; font-weight: 600; margin-top: 40px; }
  .list-sub { margin-top: 4px; color: var(--sub); }
  .choices { margin-top: 20px; border-top: 1px solid var(--line); }
  .choice {
    display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
    width: 100%; padding: 16px 8px; text-align: left; border-bottom: 1px solid var(--line);
  }
  .choice:hover { background: var(--soft); }
  .choice-name { display: block; font-size: 17px; font-weight: 600; }
  .choice-meta { display: block; font-size: 14px; color: var(--sub); }
  .choice-side { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
  .none { margin-top: 40px; }
  .none p:first-child { font-size: 24px; font-weight: 600; }

  /* 상태 색과 사건 강조는 따로 쓴다. 오출고 색 강조는 첫 확인 사건 한 곳만. */
  .state { flex: none; font-size: 14px; font-weight: 600; white-space: nowrap; }
  .state::before {
    content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: currentColor; margin-right: 6px; vertical-align: 1px;
  }
  .tone-done { color: var(--done); }
  .tone-moving { color: var(--moving); }
  .tone-wait { color: var(--wait); }
  .tone-cancel { color: var(--cancel); }

  /* 표시 글자. 글자와 굵기로 구분하고, 색은 오출고에만 쓴다 */
  .tag {
    display: inline-block; font-size: 13px; line-height: 1.5; font-weight: 700; white-space: nowrap;
    padding: 0 5px; border: 1px solid transparent; border-radius: 2px;
  }
  .tag-box { border-color: var(--ink); }
  .tag-alert { background: var(--wait); border-color: var(--wait); color: #fff; }

  /* 주문 화면: 지금 상태 */
  .back { margin-top: 20px; font-size: 14px; color: var(--sub); text-decoration: underline; text-underline-offset: 3px; }
  .now { margin-top: 36px; }
  .now-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
  .now-tags .tag { font-size: 15px; padding: 1px 8px; }
  .now h1 { margin-top: 8px; font-size: 30px; line-height: 1.38; font-weight: 600; }
  .say { margin-top: 24px; }
  .say-label { font-size: 13px; color: var(--sub); }
  .say-line { margin-top: 2px; font-size: 19px; line-height: 1.55; }
  .say-tools { margin-top: 2px; font-size: 13px; color: var(--sub); }
  .copy { text-decoration: underline; text-underline-offset: 3px; margin-right: 12px; color: var(--ink); }

  /* 주문 요약 */
  section h2 { font-size: 15px; font-weight: 600; }
  .summary { margin-top: 52px; }
  .facts { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 40px; }
  .fact { display: grid; grid-template-columns: 5.2em 1fr; gap: 12px; align-items: baseline; }
  .fact.wide { grid-column: 1 / -1; }
  .fact dt { font-size: 14px; color: var(--sub); }
  .fact dd { min-width: 0; }
  .item { display: flex; gap: 10px; }
  .item-qty { flex: none; }
  .gift-tag { font-size: 13px; color: var(--sub); margin-right: 6px; }
  .note { margin-top: 10px; font-size: 13px; color: var(--sub); }

  /* 타임라인 */
  .timeline { margin-top: 52px; }
  .timeline-hint { font-size: 13px; color: var(--sub); }
  .tl-group { margin-top: 20px; font-size: 13px; font-weight: 600; color: var(--sub); }
  .events { margin: 8px 0 0 4px; border-left: 1px solid var(--line); }
  .event { position: relative; padding-left: 18px; }
  .event::before {
    content: ""; position: absolute; left: -4px; top: 18px;
    width: 7px; height: 7px; border-radius: 50%; background: #b3b3b3;
  }
  .event.marked::before { background: var(--ink); }
  .event.alert::before { background: var(--wait); }
  .event.latest::before { background: var(--dot, var(--ink)); }
  .event.gap::before { background: #fff; border: 1px solid var(--wait); }
  .ev-btn {
    display: grid; grid-template-columns: var(--when) var(--tagw) 1fr 1.2em; gap: 8px;
    width: 100%; padding: 8px 4px; text-align: left;
    -webkit-user-select: text; user-select: text;
  }
  .ev-btn:hover { background: var(--soft); }
  .ev-when { color: var(--sub); font-size: 15px; font-variant-numeric: tabular-nums; }
  .event.latest .ev-what, .event.alert .ev-what { font-weight: 600; }
  .event.gap .ev-what { color: var(--wait); font-weight: 600; }
  .ev-mark { color: var(--sub); text-align: right; }
  .ev-mark::before { content: "+"; }
  .ev-btn[aria-expanded="true"] .ev-mark::before { content: "\2212"; }
  .ev-panel { padding: 4px 4px 16px calc(var(--when) + var(--tagw) + 20px); font-size: 15px; }
  .ev-panel dt { font-size: 13px; color: var(--sub); }
  .ev-panel dd + dt { margin-top: 8px; }

  /* 시안 메모 */
  .memo { margin-top: 72px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--sub); }
  .memo summary { cursor: pointer; }
  .memo p { margin-top: 8px; max-width: 40em; }

  @media (max-width: 620px) {
    .page { padding: 0 18px 48px; }
    .home-title { font-size: 25px; margin-top: 10vh; }
    .view-home .search input { height: 52px; font-size: 16px; }
    .view-home .search button { height: 52px; padding: 0 18px; font-size: 16px; }
    .search input { font-size: 16px; }
    .now h1 { font-size: 24px; }
    .say-line { font-size: 17px; }
    .facts { grid-template-columns: 1fr; }
    .fact.wide { grid-column: auto; }
    .ev-btn { grid-template-columns: auto 1fr 1.2em; gap: 0 8px; }
    .ev-when { grid-column: 1 / 3; font-size: 14px; }
    .ev-tag { grid-column: 1; grid-row: 2; }
    .ev-tag:empty { display: none; }
    .ev-what { grid-column: 2; grid-row: 2; }
    .ev-what.plain { grid-column: 1 / 3; }
    .ev-mark { grid-column: 3; grid-row: 1 / span 2; }
    .ev-panel { padding-left: 4px; }
    .choice { flex-direction: column; gap: 2px; }
    .samples span { display: block; margin-left: 0; white-space: normal; }
  }

pre{white-space:pre-wrap;overflow-wrap:anywhere}select{font:inherit;max-width:100%;padding:8px;border:1px solid #aaa;border-radius:4px}.raw{padding:16px;background:#f5f5f5}.toolbar{display:flex;justify-content:space-between;gap:12px}.gaps{margin-top:32px}.error{color:#a14d00}.search-options{margin:8px 0;font-size:14px}.event form{display:inline}.ev-panel{padding-left:18px}.login{margin-top:20vh}.login a{display:inline-block;background:#161616;color:white;padding:12px 24px;border-radius:4px}.samples{border-top:1px solid #ddd;padding-top:16px}

body .view-home .home-title{display:block}

.top-home{color:var(--ink);text-decoration:none}

.summary-item+.summary-item{margin-top:16px}.summary-item .note{margin-top:3px}