/* ─────────────────────────────────────────────────────
   통합허브 공통 모양 — 「축제 포스터」 (2026-10-04 대표가 세 시안 가운데 고름)
   굵은 검정 테두리 + 원색 칸 + 둥근 제목 글꼴(Jua). 행사 제작물과 한 벌로 보인다.
     · 칸(card)은 검정 테두리와 딱 떨어지는 그림자로 종이 스티커처럼 띄운다
     · 원색은 뜻으로 쓴다: 노랑 = 고른 것 · 눈여겨볼 것 / 빨강 = 누르는 곳 · 급한 것 / 초록 = 된 것 / 하늘 = 알림
     · 상태는 색만으로 가르지 않는다. 기호와 글을 함께 쓴다
   제목 글꼴은 fonts/Jua.woff2 를 서버에 함께 올린다(자주 쓰는 한글 2,350자만) — 행사장 인터넷이 느려도 바깥에서 받지 않는다.
   색과 크기는 아래 변수에서만 고른다. 화면마다 새 색을 만들지 않는다.
   ───────────────────────────────────────────────────── */
@font-face{font-family:"Jua";src:url("../fonts/Jua.woff2") format("woff2");font-display:swap;font-weight:400}
:root{
  --bg:#FFF7E1; --card:#FFFFFF; --line:#E3D9BC; --line-2:#1A1A1A;
  --ink:#1A1A1A; --dim:#55514A;
  --yellow:#FFD23F; --red:#FF5A4E; --green:#2FBF71; --sky:#58B7FF;
  --brand:#FF5A4E; --brand-d:#E8443A; --brand-ink:#B3261E; --brand-soft:#FFEEB3;
  --ok:#136B3C; --ok-soft:#D7F4E3; --warn:#6B4A00; --warn-soft:#FFF0B8;
  --bad:#B3261E; --bad-soft:#FFE0DC; --info:#12508F; --info-soft:#DCEFFF;
  --fs-xs:13px; --fs-sm:15px; --fs-md:17px; --fs-lg:22px; --fs-xl:30px; --fs-hero:44px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:40px;
  --r-sm:12px; --r:16px; --r-lg:22px; --tap:44px;
  --bd:2.5px solid var(--ink);
  --shadow:4px 4px 0 var(--ink);
  --shadow-sm:3px 3px 0 var(--ink);
  --lift:6px 6px 0 var(--ink);
  --focus:0 0 0 3px var(--bg),0 0 0 6px var(--ink);
  --font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic","맑은 고딕",system-ui,sans-serif;
  --display:"Jua","Pretendard Variable",Pretendard,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:500 var(--fs-sm)/1.6 var(--font);word-break:keep-all;overflow-wrap:anywhere}
a{color:var(--ink);text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:var(--red)}
h1,h2,h3,h4{line-height:1.25;font-family:var(--display);font-weight:400;letter-spacing:0}
.wrap{max-width:1180px;margin:0 auto;padding:var(--s4)}
.wrap.narrow{max-width:620px}
.wrap.mid{max-width:900px}
[hidden]{display:none !important}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:var(--r-sm)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 맨 위 띠 — 지금 어느 행사의 어느 화면인지. 메뉴는 알약 모양, 지금 화면은 검정 바탕에 노랑 글자 */
header.top{background:var(--bg);border-bottom:var(--bd);position:sticky;top:0;z-index:20}
header.top .wrap{display:flex;align-items:center;gap:var(--s3);padding:10px var(--s4) 12px;flex-wrap:wrap}
.brand{font-family:var(--display);font-size:var(--fs-lg);display:flex;align-items:center;gap:8px;white-space:nowrap}
.brand::before{content:"";width:16px;height:16px;border-radius:50%;background:var(--red);border:var(--bd)}
.brand span{color:var(--dim);font-family:var(--font);font-weight:700;font-size:var(--fs-xs)}
.who{margin-left:auto;font-size:var(--fs-xs);color:var(--dim);white-space:nowrap;font-weight:700}
.who b{color:var(--ink)}
nav.tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;width:100%;padding:2px 2px 4px}
nav.tabs::-webkit-scrollbar{display:none}
nav.tabs a{padding:6px 14px;text-decoration:none;color:var(--ink);font-weight:700;font-size:var(--fs-sm);background:var(--card);
  border:2px solid var(--ink);border-radius:999px;white-space:nowrap;min-height:38px;display:flex;align-items:center}
nav.tabs a:hover{background:var(--yellow)}
nav.tabs a[aria-current=page]{background:var(--ink);color:var(--yellow)}
nav.tabs .gap{flex:1}
@media (min-width:721px){nav.tabs{flex-wrap:wrap;overflow:visible}}      /* 넓은 화면에서는 메뉴가 잘리지 않게 두 줄로 */
/* 메뉴 — PC 는 왼쪽 세로 메뉴(늘 다 보인다), 휴대폰은 아래 다섯 칸 + 올라오는 판 */
.mi{width:28px;height:28px;flex:none;object-fit:contain}
nav.tabs a .mi{width:22px;height:22px;margin-right:6px}
aside.side{position:fixed;left:0;top:0;bottom:0;width:216px;background:var(--card);border-right:var(--bd);padding:12px 10px 10px;overflow-y:auto;z-index:30;
  display:flex;flex-direction:column;gap:2px;scrollbar-width:thin}
body.has-side{padding-left:216px}
body.has-side header.top .brand{display:none}
aside.side .logo{font-family:var(--display);font-size:var(--fs-lg);display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);padding:2px 8px 8px}
aside.side .logo::before{content:"";width:16px;height:16px;border-radius:50%;background:var(--red);border:var(--bd)}
aside.side a[data-tab]{display:flex;align-items:center;gap:10px;padding:5px 8px;border-radius:12px;text-decoration:none;color:var(--ink);font-weight:700;font-size:var(--fs-sm);border:2px solid transparent;min-height:40px}
aside.side a[data-tab]:hover{background:var(--brand-soft)}
aside.side a[data-tab][aria-current=page]{background:var(--yellow);border-color:var(--ink);box-shadow:var(--shadow-sm);font-weight:800}
aside.side a.home{margin-bottom:4px}
aside.side .sg{display:flex;flex-direction:column;gap:1px;margin-top:10px;padding-top:8px;border-top:2px dashed var(--line)}
aside.side .erp{position:absolute;top:17px;right:12px;font-size:var(--fs-xs);font-weight:800;color:var(--dim);text-decoration:none;border:2px solid var(--line);border-radius:999px;padding:0 9px;line-height:1.8}
aside.side .erp:hover{border-color:var(--ink);color:var(--ink)}
/* 접어 두는 칸(행사설정의 문자 설정) */
details.card.smsbox{padding:0;box-shadow:var(--shadow-sm)}
details.card.smsbox > summary{padding:var(--s3) var(--s4);cursor:pointer;list-style:none;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
details.card.smsbox > summary::-webkit-details-marker{display:none}
details.card.smsbox > summary::after{content:"▾";margin-left:auto;color:var(--dim)}
details.card.smsbox[open] > summary::after{content:"▴"}
details.card.smsbox[open] > summary{border-bottom:2px dashed var(--line)}
nav.tabbar{display:none}
/* 묶음은 접었다 편다 — 한 번에 하나만 펴서 글자와 그림을 크게 쓴다. 다 펴 두면 낮은 화면에서 넘친다 */
aside.side .sgh{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:5px 8px;border:2px solid transparent;border-radius:12px;background:transparent;box-shadow:none;
  font:inherit;font-size:var(--fs-sm);font-weight:800;color:var(--ink);text-align:left;cursor:pointer}
aside.side .sgh:hover{background:var(--brand-soft)}
aside.side .sgh span{flex:1}
aside.side .sgh i{font-style:normal;background:var(--red);color:#fff;border-radius:999px;padding:0 8px;font-size:11px;line-height:1.7}
aside.side .sgh em{font-style:normal;font-size:11px;font-weight:800;color:var(--dim);min-width:16px;text-align:right}
aside.side .sgh::after{content:"▾";font-size:12px;color:var(--dim);margin-left:2px}
aside.side .sg.open > .sgh{background:var(--brand-soft);border-color:var(--ink)}
aside.side .sg.open > .sgh::after{content:"▴";color:var(--ink)}
aside.side .sg.open > .sgh em{display:none}
aside.side .sg{margin-top:3px;padding-top:3px}
@media (min-width:901px){
  aside.side .sg:not(.open) > a[data-tab]{display:none}
  aside.side .sg.open > a[data-tab]{margin-left:14px;min-height:36px;padding-top:3px;padding-bottom:3px;border-left:2px dashed var(--line);border-radius:0 12px 12px 0;padding-left:12px}
  aside.side .sg.open > a[data-tab][aria-current=page]{border-left:2px solid var(--ink);border-radius:12px}
  aside.side .sg.open > a[data-tab] .mi{width:24px;height:24px}
}
/* 낮은 화면(노트북)에서는 조금만 줄인다 — 가장 긴 묶음을 펴도 스크롤이 생기지 않게 */
@media (min-width:901px) and (max-height:650px){
  aside.side .sgh{min-height:36px}
  aside.side .sg.open > a[data-tab]{min-height:33px;padding-top:2px;padding-bottom:2px}
  aside.side a.home{min-height:36px;margin-bottom:0}
}
@media (min-width:901px) and (max-height:580px){
  aside.side{padding-top:8px}
  aside.side .logo{padding-bottom:4px}
  aside.side .sgh{min-height:33px}
  aside.side .sg.open > a[data-tab]{min-height:30px;padding-top:1px;padding-bottom:1px}
  aside.side .sg{margin-top:2px;padding-top:2px}
}
@media (max-width:900px){
  body.has-side{padding-left:0;padding-bottom:70px}
  body.has-side header.top .brand{display:flex}
  nav.tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:31;background:var(--card);border-top:var(--bd);padding-bottom:env(safe-area-inset-bottom,0px)}
  nav.tabbar > *{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 2px 7px;border:0;border-radius:0;background:transparent;box-shadow:none;
    font:inherit;font-size:11.5px;font-weight:800;color:var(--ink);text-decoration:none;min-height:58px;cursor:pointer;white-space:nowrap}
  nav.tabbar > * + *{border-left:2px solid var(--line)}
  nav.tabbar > [aria-current]{background:var(--yellow)}
  nav.tabbar > [aria-expanded=true]{background:var(--ink);color:var(--yellow)}
  nav.tabbar .mi{width:26px;height:26px}
  /* 왼쪽 메뉴가 아래에서 올라오는 판이 된다 — 고른 묶음만 큰 칸으로 */
  aside.side{top:auto;bottom:calc(58px + env(safe-area-inset-bottom,0px));width:auto;right:0;border-right:0;border-top:var(--bd);border-radius:20px 20px 0 0;
    padding:14px 14px 16px;max-height:62vh;box-shadow:0 -6px 0 rgba(26,26,26,.12);display:none}
  body.sheet aside.side{display:block}
  aside.side .logo,aside.side a.home,aside.side .erp,aside.side .sg{display:none}
  aside.side .sg.pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0;padding:0;border:0}
  aside.side .sg.pick .sgh{grid-column:1/-1;min-height:0;padding:0 2px 2px;border:0;background:transparent;pointer-events:none}
  aside.side .sg.pick .sgh::after,aside.side .sg.pick .sgh em,aside.side .sg.pick .sgh .mi{display:none}
  aside.side .sg.pick a[data-tab]{border:2px solid var(--ink);background:#fff;min-height:56px;font-size:var(--fs-md)}
  aside.side .sg.pick a[data-tab] .mi{width:34px;height:34px}
}
/* 단계 고르기 — 준비 · 당일 · 마무리. 날짜로 저절로 바뀌고, 눌러서 미리 볼 수 있다 */
.phase{display:inline-flex;border:2px solid var(--ink);border-radius:999px;overflow:hidden;background:var(--card);font-size:var(--fs-xs);font-weight:800}
.phase a{padding:5px 11px;text-decoration:none;color:var(--dim);white-space:nowrap}
.phase a + a{border-left:2px solid var(--ink)}
.phase a[aria-current]{background:var(--red);color:#fff}
.phase a.auto{background:var(--yellow);color:var(--ink)}
header.top select{min-height:38px;padding:5px 10px;font-size:var(--fs-sm);font-weight:700;max-width:46vw;border-width:2px}

/* 적는 칸 · 버튼 — 손가락으로 누르기 좋게, 아이폰이 확대하지 않게(16px) */
select,input[type=text],input[type=search],input[type=date],input[type=tel],input[type=email],input[type=number],textarea{
  font:inherit;font-size:16px;min-height:var(--tap);padding:9px 12px;border:2px solid var(--ink);border-radius:var(--r-sm);
  background:#fff;color:var(--ink);max-width:100%}
input:focus,select:focus,textarea:focus{outline:none;box-shadow:var(--shadow-sm);background:#FFFDF2}
input::placeholder,textarea::placeholder{color:#8A8478;font-weight:400}
textarea{width:100%;resize:vertical;line-height:1.5}
input[type=checkbox],input[type=radio]{width:20px;height:20px;accent-color:var(--ink);vertical-align:-4px;margin:0 6px 0 0}
input[type=file]{font:inherit;max-width:100%}
button,.btn{font:inherit;font-weight:700;min-height:var(--tap);padding:8px 16px;border:2px solid var(--ink);border-radius:var(--r-sm);
  background:#fff;color:var(--ink);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  transition:transform .08s,box-shadow .08s,background .12s}
button:hover,.btn:hover{background:var(--yellow)}
button:active,.btn:active{transform:translate(2px,2px);box-shadow:none}
button.pri,.btn.pri{background:var(--yellow);box-shadow:var(--shadow-sm)}
button.pri:hover,.btn.pri:hover{background:#FFC400}
button.pri:active,.btn.pri:active{box-shadow:none}
button.danger{color:var(--bad)}
button.danger:hover{background:var(--bad-soft)}
button.quiet{border-color:transparent;background:transparent;text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;padding:6px 8px;min-height:36px}
button.sm,.btn.sm{min-height:34px;padding:3px 11px;font-size:var(--fs-xs);border-radius:999px}
button:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
/* 가장 큰 단추 — 「내기」 「저장하기」 처럼 그 화면에서 할 일 하나 */
button.big{width:100%;min-height:60px;font-family:var(--display);font-weight:400;font-size:var(--fs-lg);margin-top:var(--s5);
  background:var(--red);color:#fff;border:var(--bd);border-radius:var(--r);box-shadow:var(--shadow)}
button.big:hover{background:var(--brand-d)}
button[aria-busy=true]{position:relative;color:transparent !important}
button[aria-busy=true]::after{content:"";position:absolute;width:18px;height:18px;border:3px solid rgba(26,26,26,.25);
  border-top-color:var(--ink);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.card{background:var(--card);border:var(--bd);border-radius:var(--r);box-shadow:var(--shadow);margin-bottom:var(--s5)}
.card > h2{margin:0;padding:var(--s3) var(--s4) 0;font-size:var(--fs-md);display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.card > h2 .muted,.card > h2 .small{font-family:var(--font);font-weight:500}
.card .body{padding:var(--s3) var(--s4) var(--s4)}
.row{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}
.spacer{flex:1}
.stack > * + *{margin-top:var(--s3)}
/* 창 안의 적는 칸 묶음 — 이름표가 위, 칸이 아래 */
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--s2) var(--s3)}
.fgrid label{display:block;font-size:var(--fs-xs);color:var(--dim);margin-bottom:2px;font-weight:700}
.fgrid input,.fgrid select{width:100%}

/* 큰 숫자 — 지금 손댈 것이 무엇인지. 누르면 그 조건으로 걸러진다 */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s4);margin-bottom:var(--s5)}
.tile{background:var(--card);border:var(--bd);border-radius:var(--r);padding:var(--s3) var(--s4);box-shadow:var(--shadow);
  text-align:left;display:block;width:100%;min-height:0;font-weight:500}
.tile b{display:block;font-family:var(--display);font-weight:400;font-size:var(--fs-hero);line-height:1.05;font-variant-numeric:tabular-nums}
.tile span{font-size:var(--fs-xs);color:var(--ink);font-weight:700}
.tile.good{background:var(--green)}
.tile.warn{background:var(--yellow)}
.tile.bad{background:var(--red)}.tile.bad b,.tile.bad span{color:#fff}
button.tile:hover{background:var(--sky)}
.tile[aria-pressed=true]{background:var(--ink)}
.tile[aria-pressed=true] b,.tile[aria-pressed=true] span{color:var(--yellow)}

table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
th,td{padding:10px;border-bottom:2px dashed var(--line);text-align:left;vertical-align:top}
th{background:var(--brand-soft);font-weight:800;color:var(--ink);font-size:var(--fs-xs);position:sticky;top:0;z-index:1;white-space:nowrap;border-bottom:2px solid var(--ink)}
tbody tr:hover td{background:#FFFBEA}
tbody tr:last-child td{border-bottom:0}
td.num{text-align:right;font-variant-numeric:tabular-nums}
.scroll{max-height:64vh;overflow:auto;border:2px solid var(--ink);border-radius:var(--r-sm)}
.scroll table th:first-child,.scroll table td:first-child{padding-left:14px}

.tag{display:inline-flex;align-items:center;padding:0 10px;border-radius:999px;font-size:12px;font-weight:800;line-height:1.75;
  border:2px solid var(--ink);background:#fff;color:var(--ink);white-space:nowrap}
.tag.sell{background:var(--sky)}
.tag.exp{background:var(--green)}
.tag.food{background:var(--yellow)}
.tag.promo{background:#D9C7FF}
.tag.none{background:var(--red);color:#fff}
.tag.ok{background:var(--green)}
.tag.wait{background:var(--yellow)}
.tag.off{text-decoration:line-through;opacity:.6;background:#EEE}
.pill{display:inline-block;margin:1px 4px 1px 0;padding:0 9px;border-radius:999px;background:var(--brand-soft);font-size:12px;font-weight:700;line-height:1.8}
.muted{color:var(--dim)}
.small{font-size:var(--fs-xs)}
.right{text-align:right}
.nowrap{white-space:nowrap}

dialog{border:var(--bd);border-radius:var(--r-lg);padding:0;max-width:860px;width:94vw;box-shadow:8px 8px 0 var(--ink);
  background:var(--card);color:var(--ink)}
dialog::backdrop{background:rgba(26,26,26,.55)}
dialog h3{margin:0;padding:var(--s3) var(--s4);border-bottom:var(--bd);font-size:var(--fs-lg);background:var(--yellow);border-radius:19px 19px 0 0}
dialog .body{padding:var(--s4);max-height:70vh;overflow:auto}
dialog .foot{padding:var(--s3) var(--s4);border-top:2px dashed var(--line);display:flex;gap:var(--s2);justify-content:flex-end;flex-wrap:wrap}

/* 알림 — 됐는지 안 됐는지를 색 + 기호 + 글로 알린다 */
.note{padding:var(--s3) var(--s4);border-radius:var(--r-sm);font-size:var(--fs-sm);margin-bottom:var(--s3);border:2px solid var(--ink);
  display:flex;gap:10px;align-items:flex-start;color:var(--ink);font-weight:600}
.note::before{font-weight:900;flex:none;width:24px;height:24px;border-radius:50%;border:2px solid var(--ink);background:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-size:13px;line-height:1}
.note.ok{background:var(--ok-soft)}.note.ok::before{content:"✓";background:var(--green)}
.note.warn{background:var(--warn-soft)}.note.warn::before{content:"!";background:var(--yellow)}
.note.bad{background:var(--bad-soft)}.note.bad::before{content:"✕";background:var(--red);color:#fff}
.note.info{background:var(--info-soft)}.note.info::before{content:"i";background:var(--sky)}
.note > div{flex:1}
#알림{position:sticky;top:112px;z-index:15;box-shadow:var(--shadow)}
dialog #알림{top:0}
.empty{text-align:center;color:var(--dim);padding:var(--s6) var(--s4)}
.empty b{display:block;color:var(--ink);font-family:var(--display);font-weight:400;font-size:var(--fs-lg);margin-bottom:4px}

/* 적는 화면(참여기업 · 신청 · 설문) — 나이 있는 분이 휴대폰으로 본다. 글자를 한 단계 키운다 */
.form{font-size:var(--fs-md)}
.form h1{font-size:var(--fs-xl);margin:var(--s5) 0 4px}
.form label.f{display:block;margin:var(--s5) 0 6px;font-weight:800;font-size:var(--fs-md)}
.form .hint{font-weight:500;color:var(--dim);font-size:var(--fs-sm);margin-left:6px}
.form input[type=text],.form input[type=tel],.form input[type=email],.form textarea,.form select{width:100%;font-size:var(--fs-md);min-height:52px;border-width:2.5px;border-radius:14px}
.form .choice{display:flex;align-items:center;gap:6px;padding:12px 14px;border:var(--bd);border-radius:14px;
  margin:8px 0;background:#fff;cursor:pointer;min-height:52px;font-weight:700;transition:transform .08s,box-shadow .08s}
.form .choice:has(input:checked){background:var(--yellow);box-shadow:var(--shadow-sm);transform:translate(-1px,-1px)}
.form .choice input{width:22px;height:22px;flex:none}
.form .choice:focus-within{box-shadow:var(--focus)}
.form .choice:has(input:checked)::after{content:"✓";margin-left:auto;font-weight:900}
.form fieldset{border:var(--bd);border-radius:var(--r);padding:var(--s2) var(--s4) var(--s4);margin:var(--s5) 0;background:var(--card);box-shadow:var(--shadow)}
.form legend{font-family:var(--display);padding:2px 12px;font-size:var(--fs-md);background:var(--yellow);border:2px solid var(--ink);border-radius:999px}
.form .agree{display:flex;gap:6px;padding:var(--s3);border:var(--bd);border-radius:14px;margin:var(--s2) 0;background:#fff;cursor:pointer}
.form .agree:has(input:checked){background:var(--ok-soft)}
.form .agree input{flex:none;margin-top:4px}
.form .count{float:right;font-weight:600;font-size:var(--fs-xs);color:var(--dim)}
.form .sum{border:var(--bd);border-radius:var(--r);background:var(--card);padding:var(--s2) var(--s4);box-shadow:var(--shadow)}
.form .sum dt{font-size:var(--fs-xs);color:var(--dim);margin-top:var(--s3);font-weight:700}
.form .sum dd{margin:0 0 var(--s2);font-weight:700;white-space:pre-wrap}
.qrbox{background:#fff;border:var(--bd);border-radius:var(--r);padding:var(--s4);text-align:center;box-shadow:var(--shadow)}
.qrbox svg{width:240px;height:240px;max-width:100%}
.qrbox b{font-family:var(--display);font-weight:400}

@media (max-width:720px){
  /* 휴대폰에서는 맨 위 띠를 붙박아 두지 않는다 — 화면이 좁아 내용을 가린다(현장 QR 결과가 띠 밑에 숨었다) */
  header.top{position:static}
  header.top .wrap{padding:8px var(--s3) 10px;gap:var(--s2)}
  #알림{top:8px}
  .wrap{padding:var(--s3)}
  .hide-m{display:none}
  .who .long{display:none}
  .scroll{max-height:none;border:0}
  /* 좁은 화면에서는 표를 카드로 바꾼다 — 옆으로 밀지 않고 읽는다 */
  table.cards thead{position:absolute;left:-9999px}
  table.cards tr{display:block;border:2px solid var(--ink);border-radius:var(--r-sm);margin-bottom:var(--s3);padding:10px 12px;background:var(--card)}
  table.cards td{display:flex;gap:10px;border:0;padding:3px 0;align-items:baseline}
  table.cards td[data-th]::before{content:attr(data-th);flex:none;width:64px;color:var(--dim);font-size:var(--fs-xs);font-weight:700}
  table.cards td:empty,table.cards td.hide-m{display:none}
  table.cards td.pick{float:right;padding:0}
  dialog{width:100vw;max-width:100vw;margin:auto 0 0;border-radius:var(--r-lg) var(--r-lg) 0 0;max-height:92vh;box-shadow:none}
  .card,.tile,.form fieldset,.form .sum,.qrbox{box-shadow:var(--shadow-sm)}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}
@media print{
  header.top,nav.tabs,button,.no-print{display:none !important}
  body{background:#fff}.card{box-shadow:none}.scroll{max-height:none;overflow:visible;border:0}
}