*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:#f8f7f3;color:#182842;font:16px/1.5 "Approval Sans","Malgun Gothic",sans-serif}
header,main{max-width:720px;margin:auto;padding:18px}
header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #dbe0e9}
header a:first-child{display:flex;gap:8px;align-items:center;font-weight:750}
a{color:#214fae}header a{text-decoration:none}
h1{font-size:clamp(24px,4vw,32px);margin:0}h2{font-size:20px;margin:3px 0 14px}
.screen-title p,.format-note{color:#556276;margin:6px 0 12px}
.format-note{font-size:13px}
section{background:#fff;border:1px solid #dae0e9;border-radius:18px;padding:20px;margin:14px 0}
form{display:grid;gap:14px}label{font-weight:650}
select,button{display:block;font:inherit;background:white;border:1px solid #c6cfde;border-radius:9px;min-height:44px;padding:8px 12px}
select{width:100%;margin-top:3px}
button{cursor:pointer;font-weight:650}
button:disabled{opacity:.55}
.primary{background:#2455cb;color:white;border-color:#2455cb}
details{font-size:14px}summary{cursor:pointer;font-weight:650}
#message{color:#475a79}
.renew{margin-top:12px}
.sample-stage{display:flex;justify-content:center;padding:clamp(14px,4vw,32px);border-radius:12px;background:#eeeee9}
#poster{width:min(100%,340px);min-width:0;aspect-ratio:3/4;container-type:inline-size;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;gap:8px;padding:16px 0;border:1px solid #c4ccd4;border-radius:12px;text-align:center;overflow-wrap:anywhere;background:linear-gradient(128deg,#fff 5%,#f2f4f5 58%,#fff 95%);color:#152640;box-shadow:inset 0 0 0 2px #ffffffd9,2px 3px 0 #cbd1d6,0 7px 12px #28334220}
.sheet-brand{display:flex;align-items:center;justify-content:center;gap:5px;font-size:clamp(11px,4.6cqi,16px);font-weight:710;letter-spacing:-.05em}
.sheet-brand img{width:1.23em;height:1.23em}
#sheet-mode:not(:empty){padding:1px 5px;border:1px solid #afc0d8;font-size:.72em;border-radius:4px;color:#21458b}
.sheet-room{width:84%;min-width:0}
#organization,#room-location,.sheet-scan p{margin:0;color:#4e5d6b;font-size:clamp(12px,4.1cqi,16px);line-height:1.4}
#office{font-size:clamp(20px,8.2cqi,30px);line-height:1.24;letter-spacing:-.05em;margin:3px 0}
#office.long-name{font-size:clamp(15px,5.5cqi,20px)}
#organization.long-name{font-size:clamp(11px,3.5cqi,14px)}
body[data-paper=acrylic] #room-location{display:none}
.sheet-scan{width:84%;min-width:0}
#qr{background:white;width:40cqi;height:40cqi;margin:0 auto 7px;line-height:0}
#qr svg{width:100%;height:100%;display:block;shape-rendering:crispEdges}
.sheet-scan strong{font-size:clamp(15px,5.1cqi,20px);color:#234d91}
.sheet-scan p{font-size:clamp(11px,3.6cqi,14px)}
.print-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.print-hint{margin-top:14px}
.maintenance{margin-top:18px}
.maintenance button{display:inline-block}
body:not([data-paper=acrylic]) #poster{border-radius:2px;aspect-ratio:210/297;background:white}
@page acrylic{size:90mm 120mm;margin:0}
@page sheetA4{size:A4 portrait;margin:12mm}
@page sheetA5{size:A5 portrait;margin:8mm}
@media print{
  html,body,main,#preview,.sample-stage{margin:0;padding:0;border:0;border-radius:0;max-width:none;background:white}
  header,main>div,main>p,#setup,#message,#preview .screen-title,.print-hint,.print-actions,.maintenance{display:none!important}
  .sample-stage,#preview{display:block}
  body[data-paper=acrylic]{page:acrylic}
  body[data-paper=a4]{page:sheetA4}
  body[data-paper=a5]{page:sheetA5}
  #poster{container-type:normal;position:static;aspect-ratio:auto;margin:0 auto;padding:3mm 0;gap:1mm;break-inside:avoid;border-radius:0;border:0;box-shadow:none;background:white;color:#152640}
  body[data-paper=acrylic] #poster{width:90mm;height:120mm}
  .sheet-brand{font-size:9pt}
  .sheet-brand img{width:4.3mm;height:4.3mm}
  #organization{font-size:9pt}
  #office{font-size:17pt;margin:1mm 0}
  #office.long-name{font-size:10pt}
  #organization.long-name{font-size:7pt}
  #qr{width:36mm;height:36mm;margin:0 auto 2mm;background:#fff}
  .sheet-scan strong{font-size:11pt}
  .sheet-scan p{font-size:8pt;color:#273549}
  body:not([data-paper=acrylic]) #poster{width:100%;aspect-ratio:auto;height:240mm;border:none;box-shadow:none;background:white}
  body[data-paper=a5] #poster{height:184mm}
  body:not([data-paper=acrylic]) #office{font-size:26pt}
  body[data-paper=a5] #office{font-size:19pt}
  body:not([data-paper=acrylic]) #office.long-name{font-size:14pt}
  body:not([data-paper=acrylic]) #organization,body:not([data-paper=acrylic]) .sheet-scan strong{font-size:14pt}
  body:not([data-paper=acrylic]) #room-location{font-size:11pt}
  body[data-paper=a4] #qr{width:88mm;height:88mm}
  body[data-paper=a5] #qr{width:62mm;height:62mm}
  body:not([data-ready]) #poster{display:none}
}