/* Wonbon Forms — 프로토타입(prototype/app.html) 디자인 토큰·구성을 그대로 옮김. 외부 글꼴·CDN 없음(CSP style-src 'self'). */
/* Layout: 좌측 업무 내비 + 작업 영역. 서류철·관인 같은 행정 문서의 질감. 모바일은 상단 탭. */
:root{
  /* 0.2.0 부드러운 디자인: 옅은 선, 둥근 모서리, 은은한 그림자, 채도를 낮춘 남색 */
  --bg:#f5f7fa; --panel:#ffffff; --sunk:#f0f3f7; --line:#e4e8ef; --line-strong:#cfd6e0;
  --fg:#1d2533; --muted:#5f6b7c; --faint:#919aa8;
  --ink:#3d5a9e; --ink-soft:#edf2fb; --ink-fg:#ffffff; --ink-line:#9fb3dc;
  --seal:#c4554a; --seal-soft:#fcefed; --ok:#3b8a62; --ok-soft:#e9f5ee; --warn:#9a6c12; --warn-soft:#fdf5e3;
  --paper:#ffffff; --paper-shadow:0 1px 2px rgba(30,45,75,.05),0 8px 28px rgba(30,45,75,.07);
  --shadow:0 1px 2px rgba(30,45,75,.04),0 4px 16px rgba(30,45,75,.05);
  --f-ui:"Pretendard","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --f-fill:"Noto Serif KR","바탕","Batang","AppleMyungjo",serif;
  --f-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --r:10px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#12161d; --panel:#1a1f28; --sunk:#151a22; --line:#2b3240; --line-strong:#3d4657;
  --fg:#e6e9ef; --muted:#a3abba; --faint:#77808f;
  --ink:#8aa5ff; --ink-soft:#232c45; --ink-fg:#0d1220; --ink-line:#4a5f8f; --shadow:0 1px 2px rgba(0,0,0,.3);
  --seal:#ff8a7a; --seal-soft:#3a201d; --ok:#7fd3a0; --ok-soft:#18302a; --warn:#f0c463; --warn-soft:#33291a;
  --paper:#f7f7f5; --paper-shadow:0 1px 2px rgba(0,0,0,.4),0 6px 24px rgba(0,0,0,.4); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#12161d; --panel:#1a1f28; --sunk:#151a22; --line:#2b3240; --line-strong:#3d4657;
  --fg:#e6e9ef; --muted:#a3abba; --faint:#77808f;
  --ink:#8aa5ff; --ink-soft:#232c45; --ink-fg:#0d1220; --ink-line:#4a5f8f; --shadow:0 1px 2px rgba(0,0,0,.3);
  --seal:#ff8a7a; --seal-soft:#3a201d; --ok:#7fd3a0; --ok-soft:#18302a; --warn:#f0c463; --warn-soft:#33291a;
  --paper:#f7f7f5; --paper-shadow:0 1px 2px rgba(0,0,0,.4),0 6px 24px rgba(0,0,0,.4); color-scheme:dark}
*{box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--f-ui);font-size:14px;line-height:1.55}
button,input,select,textarea{font:inherit;color:inherit}
.app{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100%}
.side{background:var(--panel);border-right:1px solid var(--line);padding-block:20px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:16px;display:flex;flex-direction:column;gap:20px;position:sticky;top:0;height:100vh}
.brand{display:flex;gap:10px;align-items:center}
.seal{width:34px;height:34px;border:2px solid var(--seal);color:var(--seal);border-radius:4px;display:grid;place-items:center;font-weight:700;font-size:13px;line-height:1;letter-spacing:-.02em;transform:rotate(-4deg)}
.brand b{display:block;font-size:15px;letter-spacing:-.01em}
.brand small{color:var(--muted);font-size:11.5px}
nav.menu{display:flex;flex-direction:column;gap:2px}
nav.menu button{all:unset;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-radius:var(--r);color:var(--muted);font-weight:500}
nav.menu button:hover{background:var(--sunk);color:var(--fg)}
nav.menu button[aria-current="page"]{background:var(--ink-soft);color:var(--ink)}
nav.menu button:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.count{font-family:var(--f-mono);font-size:11.5px;color:var(--faint)}
.side-foot{margin-top:auto;font-size:11.5px;color:var(--faint);display:flex;flex-direction:column;gap:6px}
.store-pill{display:inline-flex;align-items:center;gap:6px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--faint)}
.dot.on{background:var(--ok)}
main{padding-block:28px 64px;padding-left:28px;padding-right:max(28px,env(safe-area-inset-right,0px));min-width:0}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.head h1{margin:0;font-size:22px;letter-spacing:-.02em;text-wrap:balance}
.head p{margin:4px 0 0;color:var(--muted);max-width:62ch}
.eyebrow{font-size:11.5px;letter-spacing:.08em;color:var(--faint);font-weight:600}
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-strong);background:var(--panel);padding:7px 12px;border-radius:var(--r);cursor:pointer;font-weight:500;white-space:nowrap}
.btn:hover{border-color:var(--ink);color:var(--ink)}
.btn.primary{background:var(--ink);border-color:var(--ink);color:var(--ink-fg)}
.btn.primary:hover{filter:brightness(1.08);color:var(--ink-fg)}
.btn.ghost{border-color:transparent;background:transparent}
.btn.danger:hover{border-color:var(--seal);color:var(--seal)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn:focus-visible,.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:8px}
.panel-h{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.panel-h h2{margin:0;font-size:14.5px}
.panel-b{padding:16px}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.stack{display:flex;flex-direction:column;gap:16px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px 14px}
.field{display:flex;flex-direction:column;gap:4px;min-width:0}
.field.wide{grid-column:1/-1}
.field label{font-size:12px;color:var(--muted);font-weight:500}
.field input,.field select,.field textarea{border:1px solid var(--line-strong);background:var(--panel);border-radius:5px;padding:7px 9px;width:100%;min-width:0}
.field input.mono{font-family:var(--f-mono);letter-spacing:.02em}
.field input.filled-ai{background:var(--warn-soft);border-color:var(--warn)}
.fs-title{grid-column:1/-1;font-size:12px;font-weight:600;color:var(--ink);letter-spacing:.04em;border-bottom:1px dashed var(--line);padding-bottom:4px;margin-top:6px}
table.list{width:100%;border-collapse:collapse}
table.list th{font-size:11.5px;text-align:left;color:var(--faint);font-weight:600;letter-spacing:.04em;padding:8px 10px;border-bottom:1px solid var(--line)}
table.list td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
table.list tr.sel td{background:var(--ink-soft)}
table.list tr.click{cursor:pointer}
table.list tr.click:hover td{background:var(--sunk)}
.scroll-x{overflow-x:auto}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.pill{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:99px;white-space:nowrap}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.ink{background:var(--ink-soft);color:var(--ink)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.seal{background:var(--seal-soft);color:var(--seal)}
.pill.mute{background:var(--sunk);color:var(--muted)}
.chip{font-family:var(--f-mono);font-size:11px;border:1px solid var(--line-strong);border-radius:3px;padding:0 5px;color:var(--muted)}
.muted{color:var(--muted)} .faint{color:var(--faint)} .small{font-size:12.5px}
.empty{padding:28px;text-align:center;color:var(--muted)}
.example-tag{font-size:11px;color:var(--warn);border:1px solid var(--warn);border-radius:3px;padding:0 5px;margin-left:6px}
.steps{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.step{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}
.step i{font-style:normal;width:22px;height:22px;border-radius:50%;border:1px solid var(--line-strong);display:grid;place-items:center;font-family:var(--f-mono);font-size:11.5px}
.step.on{color:var(--fg);font-weight:600}.step.on i{background:var(--ink);border-color:var(--ink);color:var(--ink-fg)}
.step+.step::before{content:"";width:18px;height:1px;background:var(--line-strong)}
.formcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.fcard{border:1px solid var(--line);border-radius:8px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;background:var(--panel)}
.fcard.sel{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.fcard h3{margin:0;font-size:13.5px}
.fcard .src{font-size:11.5px;color:var(--faint)}
.bar{height:5px;background:var(--sunk);border-radius:3px;overflow:hidden}
.bar>span{display:block;height:100%;background:var(--ok)}
.miss{font-size:12px;color:var(--seal)}
.check{display:flex;gap:8px;align-items:flex-start;cursor:pointer}
.check input{margin-top:3px;accent-color:var(--ink)}
.paper-wrap{background:var(--sunk);border:1px solid var(--line);border-radius:8px;padding:16px;overflow:auto;max-height:80vh}
.toast{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));background:var(--fg);color:var(--bg);padding:10px 14px;border-radius:6px;font-size:13px;max-width:min(420px,calc(100vw - 32px));z-index:30;box-shadow:0 6px 20px rgba(0,0,0,.2)}
.note{font-size:12.5px;color:var(--muted);background:var(--sunk);border-radius:6px;padding:10px 12px}
.note b{color:var(--fg)}
.lib-filters{display:flex;gap:8px;flex-wrap:wrap}
.seg{display:inline-flex;border:1px solid var(--line-strong);border-radius:6px;overflow:hidden}
.seg button{all:unset;cursor:pointer;padding:6px 10px;font-size:12.5px;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--ink-fg)}
.seg button:focus-visible{outline:2px solid var(--ink)}
/* 매핑 편집기: 원본 표 격자 */
table.grid{border-collapse:collapse;font-size:11px;width:100%;min-width:640px;table-layout:fixed;background:var(--paper);color:#1d2430}
table.grid td{border:1px solid #9aa3b2;padding:3px 4px;vertical-align:top;cursor:pointer;word-break:break-all;min-height:18px}
table.grid td:hover{background:#eef2ff}
table.grid td.merged{background:repeating-linear-gradient(45deg,#f3f4f6,#f3f4f6 4px,#e9ebef 4px,#e9ebef 8px);cursor:default;color:#9aa3b2}
table.grid td.on{outline:2px solid var(--seal);outline-offset:-2px;background:#fff3f0}
table.grid td.mapped{background:#e8f6ed}
table.grid td .tag{display:block;margin-top:2px;font-family:var(--f-mono);font-size:10px;color:#1f6b40}
.split{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr);gap:16px;align-items:start}
.sticky{position:sticky;top:16px}
@media (max-width:900px){
  .app{grid-template-columns:minmax(0,1fr)}
  .side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;padding-block:12px;padding-right:max(16px,env(safe-area-inset-right,0px));border-right:0;border-bottom:1px solid var(--line);gap:10px}
  nav.menu{flex-direction:row;overflow-x:auto;width:100%}
  nav.menu button{flex:none}
  .side-foot{display:none}
  main{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:20px 48px}
  .grid2,.split{grid-template-columns:minmax(0,1fr)}
  .sticky{position:static}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---- 서비스 화면 추가분 ---- */
body{margin:0}
.noticebar{display:flex;gap:10px;align-items:center;background:var(--warn-soft);color:var(--warn);border:1px solid var(--warn);border-radius:6px;padding:8px 12px;margin-bottom:16px;font-size:12.5px;font-weight:600}
.noticebar .mark{font-family:var(--f-mono);border:1px solid currentColor;border-radius:3px;padding:0 5px;font-size:11px}
.login{max-width:380px;margin:12vh auto;padding:0 16px}
.login .panel-b{display:flex;flex-direction:column;gap:12px}
.login .brand{margin-bottom:18px}
.who{font-size:12px;color:var(--muted);display:flex;flex-direction:column;gap:6px}
#message{min-height:20px;margin:0 0 10px;font-size:13px;font-weight:600;color:var(--ink)}
#message.err{color:var(--seal)}
.field input.filled-ai{background:var(--warn-soft);border-color:var(--warn)}
.field input.conflict{background:var(--seal-soft);border-color:var(--seal)}
.field input.focus-target{outline:2px solid var(--seal);outline-offset:1px}
.field .hint{font-size:11.5px;color:var(--faint)}
.field .hint.bad{color:var(--seal)}
.btnrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.preview-img{display:block;max-width:100%;border:1px solid var(--line);box-shadow:var(--paper-shadow);background:#fff;margin:0 auto 12px}
.missbtn{all:unset;cursor:pointer;color:var(--seal);text-decoration:underline;font-size:12px;margin-right:8px}
.missbtn:focus-visible{outline:2px solid var(--seal)}
.oplist{display:flex;flex-direction:column;gap:6px;max-height:46vh;overflow:auto}
.opitem{display:flex;gap:8px;align-items:flex-start;justify-content:space-between;border:1px solid var(--line);border-radius:6px;padding:6px 8px;font-size:12px}
.opitem code{font-family:var(--f-mono);font-size:11.5px;word-break:break-all}
.opitem.fail{border-color:var(--seal);background:var(--seal-soft)}
.kv{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 12px;font-size:12.5px}
.kv dt{color:var(--faint)} .kv dd{margin:0;word-break:break-all}
.hash{font-family:var(--f-mono);font-size:11px;color:var(--faint)}
.modal-shade{position:fixed;inset:0;background:rgba(10,15,25,.45);display:grid;place-items:center;padding:16px;z-index:40}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:10px;width:min(640px,100%);max-height:90vh;overflow:auto;padding:18px}
.modal h2{margin:0 0 8px;font-size:16px}
details.ver{border-top:1px solid var(--line);padding:8px 0}
details.ver summary{cursor:pointer;font-size:12.5px}
@media (max-width:900px){.noticebar{font-size:12px}}
.narrow{max-width:460px}
.gap{margin-top:14px}
.field-inline{border:1px solid var(--line-strong);background:var(--panel);border-radius:5px;padding:6px 9px;min-width:0;flex:1 1 180px}
.formcards .fcard input[type=checkbox]{margin-top:3px}

/* ================================================================ 0.2.0 부드러운 디자인 */
body{letter-spacing:-.01em;-webkit-font-smoothing:antialiased}
.side{border-right:0;box-shadow:1px 0 0 var(--line)}
nav.menu{gap:3px}
nav.menu button{border-radius:10px;padding:9px 12px;transition:background .15s,color .15s}
nav.menu button[aria-current="page"]{background:var(--ink-soft);color:var(--ink);font-weight:600}
.seal{border-radius:8px;border-width:1.5px}
.panel{border-radius:16px;border-color:var(--line);box-shadow:var(--shadow)}
.panel.soft{padding:16px 18px;margin-bottom:14px}
.panel-h{border-bottom-color:var(--line);padding:14px 18px}
.panel-b{padding:18px}
.btn{border-radius:10px;border-color:var(--line-strong);padding:8px 14px;transition:background .15s,border-color .15s,color .15s,box-shadow .15s}
.btn:hover{border-color:var(--ink-line);color:var(--ink);background:var(--ink-soft)}
.btn.primary{box-shadow:0 2px 8px rgba(61,90,158,.22)}
.btn.primary:hover{background:var(--ink);color:var(--ink-fg);filter:brightness(1.07)}
.btn.sm{padding:5px 11px;font-size:12.5px;border-radius:9px}
.field input,.field select,.field textarea{border-radius:10px;border-color:var(--line-strong);padding:8px 11px;transition:border-color .15s,box-shadow .15s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink-line);box-shadow:0 0 0 3px var(--ink-soft)}
.btn:focus-visible,.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ink-soft),0 0 0 1px var(--ink-line)}
.pill{border-radius:999px;padding:3px 10px}
.note{border-radius:12px;padding:11px 14px}
.note.warn{background:var(--warn-soft);color:var(--warn)}
.noticebar{border-radius:12px;border-color:#efd9a6;background:#fffaf0}
table.list th{background:transparent}
table.list td{border-bottom-color:var(--line)}
table.list tr.click:hover td{background:#f7f9fc}
table.list tr.sel td{background:var(--ink-soft)}
.fcard{border-radius:14px}
.modal{border-radius:18px}
.toast{border-radius:12px}
.login .panel{box-shadow:var(--paper-shadow)}
.spread{justify-content:space-between}
.grow{flex:1 1 auto;min-width:0}
.stack.tight{gap:12px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.val,input.val{font-family:var(--f-fill);font-size:15px}
.tag{display:inline-block;padding:1px 8px;border-radius:999px;background:var(--ink-soft);color:var(--ink);font-size:12px;white-space:nowrap}
.tag.green{background:var(--ok-soft);color:var(--ok)}
.tag.gray{background:var(--sunk);color:var(--muted)}
h3.sub{font-size:13px;margin:4px 0 8px;color:var(--fg)}
.list-plain{list-style:none;margin:0 0 12px;padding:0}
.list-plain li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);font-size:13px}
.list-plain li:last-child{border-bottom:0}

/* ---- 신청서 작성 (참고: 민원서식작성실 v3) ---- */
.compose{display:grid;grid-template-columns:300px minmax(340px,1fr) minmax(420px,1.15fr);gap:16px;align-items:start}
.compose .col{min-width:0}
.picker{position:relative}
.picker input{width:100%}
.picker .list{position:absolute;left:0;right:0;top:100%;z-index:20;background:var(--panel);border:1px solid var(--line);border-radius:12px;margin-top:6px;max-height:360px;overflow:auto;box-shadow:var(--paper-shadow);padding:4px}
.picker .list div{padding:9px 11px;cursor:pointer;border-radius:8px}
.picker .list div:hover{background:var(--ink-soft)}
.chosen{border:1px solid var(--ink-line);background:var(--ink-soft);border-radius:12px;padding:9px 12px;display:flex;gap:10px;align-items:flex-start}
.chosen>div{flex:1;min-width:0}
.chosen .x{border:0;background:none;color:var(--muted);cursor:pointer;border-radius:8px;padding:2px 6px}
.chosen .x:hover{background:#fff;color:var(--fg)}
.ftabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;align-items:center}
.ftabs button{border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:5px 12px;cursor:pointer;font-size:13px;color:var(--muted);transition:background .15s,color .15s}
.ftabs button:hover{border-color:var(--ink-line);color:var(--ink)}
.ftabs button.on{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:0 2px 8px rgba(61,90,158,.22)}
.ftabs .tabx{margin-left:6px;opacity:.6;border-radius:50%;padding:0 4px}
.ftabs .tabx:hover{opacity:1;background:rgba(255,255,255,.25)}
.ftabs select{width:auto;border:1px dashed var(--line-strong);border-radius:999px;padding:4px 10px;font-size:13px;background:transparent;color:var(--muted)}
.slots .grp{font-size:12.5px;font-weight:600;color:var(--ink);margin:18px 0 6px;padding-bottom:5px;border-bottom:1px solid var(--line)}
.slots .grp:first-child{margin-top:6px}
.slot{display:grid;grid-template-columns:132px 1fr 28px;gap:8px;align-items:center;padding:3px 0}
.slot .lab{font-size:12.5px;color:var(--muted);line-height:1.3;word-break:keep-all}
.slot input{border:1px solid var(--line);background:var(--panel);border-radius:9px;padding:6px 10px;width:100%;min-width:0;transition:border-color .15s,box-shadow .15s,background .15s}
.slot input:focus{outline:none;border-color:var(--ink-line);box-shadow:0 0 0 3px var(--ink-soft)}
.slot.edited input{border-color:#7f9ad6;background:#f3f7fe}
.slot.missing input{background:#fffaf2;border-color:#ecd9b4}
.slot .rs{border:0;background:none;cursor:pointer;color:var(--muted);visibility:hidden;border-radius:8px;padding:2px}
.slot .rs:hover{background:var(--sunk)}
.slot.edited .rs{visibility:visible}
.pvbar{margin-bottom:10px;gap:6px}
.preview{background:#e9edf3;border-radius:16px;height:calc(100vh - 170px);min-height:520px;overflow:hidden;position:relative;box-shadow:inset 0 0 0 1px var(--line)}
.preview .pages{width:100%;height:100%;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:14px;align-items:center}
.preview .pages img{width:100%;max-width:820px;background:#fff;border-radius:4px;box-shadow:var(--paper-shadow)}
.preview .busy{position:absolute;right:12px;top:12px;background:rgba(255,255,255,.95);border-radius:999px;padding:3px 11px;font-size:12px;box-shadow:var(--shadow);z-index:2}
.preview .note{background:transparent;color:var(--muted);padding:40px 20px;text-align:center}
.preview .approx{background:#fff8e6;color:#7a5a10;padding:9px 13px;border-radius:12px;font-size:12.5px;width:100%;max-width:820px}
.preview .sheet{width:100%;max-width:820px;background:#fff;border-radius:4px;box-shadow:var(--paper-shadow);padding:18px 16px}
table.paper{border-collapse:collapse;width:100%;table-layout:fixed;font-size:10.5px;color:#1d2430;font-family:"Malgun Gothic","Apple SD Gothic Neo",sans-serif}
table.paper td{border:1px solid #b9c1cd;padding:2px 4px;vertical-align:middle;word-break:break-all;line-height:1.35}
table.paper td.merged{border-top-color:transparent;color:transparent}
table.paper td.fill{background:#eef3ff;color:#16388f;font-family:var(--f-fill);font-size:11.5px}
@media (max-width:1280px){.compose{grid-template-columns:290px 1fr}.compose .col.pv{grid-column:1 / -1}.preview{height:80vh}}
@media (max-width:900px){.compose{grid-template-columns:minmax(0,1fr)}.slot{grid-template-columns:1fr 28px}.slot .lab{grid-column:1 / -1}.pair{grid-template-columns:1fr}}
.compose .pair input[type=date].val{font-size:13.5px;padding:8px 8px}

/* ---- 0.3.0 신청서 버튼 줄 · 실제 서식 미리보기 · 바로 인쇄 ---- */
.apps-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:-4px 0 14px;padding:10px 12px;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.apps-bar[hidden]{display:none}
.apps-who{font-size:13px;color:var(--muted);margin-right:4px}
.apps-who b{color:var(--fg);margin-right:2px}
.appbtn{display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;border:1px solid var(--line);background:var(--panel);border-radius:12px;padding:6px 12px;cursor:pointer;font-size:13px;color:var(--fg);transition:background .15s,border-color .15s,box-shadow .15s;max-width:260px}
.appbtn small{font-size:11px;color:var(--faint)}
.appbtn:hover{border-color:var(--ink-line);background:var(--ink-soft)}
.appbtn.on{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:0 2px 10px rgba(61,90,158,.25)}
.appbtn.on small{color:#d9e2f5}
.appbtn.add{border-style:dashed;color:var(--ink);background:transparent;justify-content:center;align-self:stretch}
.dot-dirty{color:#e0a43a;font-size:10px;vertical-align:middle}
.appbtn.on .dot-dirty{color:#ffd27a}
.seg.zoom{margin-left:auto}
.seg.zoom button{padding:4px 9px;font-size:12px}
.preview .docx-wrapper{background:transparent !important;padding:0 !important;display:flex;flex-direction:column;align-items:center;gap:16px}
.preview .docx-wrapper>section.docx{box-shadow:var(--paper-shadow) !important;margin:0 !important;border-radius:2px}
#print-area{display:none}
@media print{
  @page{size:A4;margin:0}
  body.printing{background:#fff}
  body.printing>*:not(#root){display:none !important}
  body.printing .app>*:not(main),body.printing main>*:not(#content),body.printing #content>*:not(#print-area){display:none !important}
  body.printing .app{display:block}
  body.printing main{padding:0}
  body.printing #print-area{display:block}
  body.printing #print-area .docx-wrapper{background:none !important;padding:0 !important}
  body.printing #print-area section.docx{box-shadow:none !important;margin:0 !important;page-break-after:always;break-after:page}
  body.printing #print-area section.docx:last-child{page-break-after:auto;break-after:auto}
}
/* ---- 매뉴얼 업무 (0.3.0) ---- */
.block{display:block}
.tight-row{gap:6px;margin:4px 0 2px}
.tag.visa{background:#fdf1e4;color:#9a5a12}
.check.doc{align-items:flex-start}
.check.doc small{margin-top:2px;line-height:1.4}
ul.plain{margin:0 0 6px;padding-left:16px}
details.manual{margin-top:8px}
details.manual summary{cursor:pointer;font-size:12.5px;color:var(--ink)}
details.manual pre{white-space:pre-wrap;font-family:var(--f-ui);font-size:12px;line-height:1.6;max-height:420px;overflow:auto;background:var(--sunk);border-radius:10px;padding:10px 12px;margin:6px 0 0}
.filerow{align-items:flex-start}
.fileup{display:grid;grid-template-columns:150px 1fr;gap:8px}
.fileup select,.fileup input{border:1px solid var(--line-strong);border-radius:10px;padding:7px 10px;background:var(--panel);min-width:0}
.fileup input[type=file]{grid-column:1 / -1}
.fileup button{grid-column:1 / -1;justify-self:start}
.stat{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--sunk)}
.stat.accent{background:var(--ink-soft);border-color:var(--ink-line)}
.stat small{display:block;font-size:11.5px;color:var(--muted)}
.stat strong{display:block;font-size:22px;margin:4px 0}
.stat span{font-size:12px;color:var(--muted)}
/* ---- 돋보기 (0.3.0) ---- */
.lens{position:absolute;width:min(380px,70%);height:260px;border-radius:16px;overflow:hidden;background:#fff;border:2px solid var(--ink);
  box-shadow:0 10px 30px rgba(30,45,75,.28);pointer-events:none;z-index:6}
.lens[hidden]{display:none}
.lens-inner{position:absolute;left:0;top:0}
.lens-inner .docx-wrapper{background:#fff !important;padding:0 !important}
.lens-inner section.docx{box-shadow:none !important}
.lens-badge{position:absolute;right:8px;bottom:6px;background:rgba(61,90,158,.85);color:#fff;font-size:11px;border-radius:999px;padding:1px 8px}
.preview .pages.lens-on{cursor:crosshair}
.lens-toggle[aria-pressed="true"]{color:#fff}
.lens-factor{flex:0 0 auto;width:auto;padding:4px 8px;font-size:12px}
/* ---- 원본 올리기 결과 (0.3.0) ---- */
.filerow .bad{color:var(--seal)}
/* ---- 신청 구분 체크 (0.3.0) ---- */
.apptypes{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px}
.field .apptypes .check{display:flex;align-items:center;gap:6px;line-height:1.3;font-size:12.5px;color:inherit;font-weight:400}
.field .apptypes input{width:auto;min-width:0;margin:0;padding:0;flex:0 0 auto;border-radius:3px}
@media (max-width:520px){.apptypes{grid-template-columns:1fr}}
/* ---- 목록 표의 버튼·선택 칸 (0.3.0): 칸 높이·세로 위치를 맞춘다 ---- */
table.list td{vertical-align:middle}
table.list td.btnrow{display:table-cell;white-space:nowrap}           /* td 자체를 flex로 두면 표 칸이 아니게 되어 행 높이가 어긋난다 */
table.list td.btnrow > * + *{margin-left:6px}
table.list td.mono{white-space:nowrap}
table.list .btn.sm,table.list select.field-inline{height:30px;box-sizing:border-box;vertical-align:middle}
table.list select.field-inline{padding:3px 8px;font-size:12.5px;min-width:120px}
/* ---- 입력 모양 (0.3.0): 전화(앞자리+두 칸)·국가번호·주소 찾기·비밀번호 보기 ---- */
.phone{display:flex;gap:4px;align-items:center;min-width:0}
.phone select,.field .phone select{flex:0 0 auto;width:auto;max-width:46%}
.phone input,.field .phone input{flex:1 1 0;min-width:0;width:auto}
.phone .dash{color:var(--faint);flex:0 0 auto}
.phone[data-phone=intl] select{max-width:58%}
.addr{display:flex;gap:6px;align-items:center;min-width:0}
.addr input,.field .addr input{flex:1 1 auto;min-width:0;width:auto}
.addr .btn{flex:0 0 auto}
.pw{position:relative;display:flex;min-width:0}
.pw input,.field .pw input{flex:1 1 auto;width:100%;padding-right:38px}
.pw-eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--muted);padding:4px;border-radius:6px;cursor:pointer;display:inline-flex}
.pw-eye:hover,.pw-eye[aria-pressed="true"]{color:var(--ink)}
.addr-dlg{border:1px solid var(--line-strong);border-radius:14px;padding:16px;width:min(560px,94vw);background:var(--panel);color:inherit;box-shadow:0 18px 50px rgba(20,30,60,.3)}
.addr-dlg::backdrop{background:rgba(20,28,45,.35)}
.addr-dlg .panel-h{padding:0;border:0}
.addr-list{max-height:min(52vh,420px);overflow:auto;margin:0;padding:0}
.addr-item{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--line);padding:9px 6px;cursor:pointer;color:inherit}
.addr-item:hover,.addr-item:focus-visible{background:var(--ink-soft)}
.warn-text{color:var(--warn,#a86a00)}
.slot .phone,.slot .addr{min-width:0}
.slot .phone input,.slot .addr input{width:auto}
.slot .phone select{border:1px solid var(--line);background:var(--panel);border-radius:9px;padding:6px 4px;font-size:12.5px;max-width:42%}
.slot .addr .btn{padding:4px 9px}
.phone.focus-target{outline:2px solid var(--seal);outline-offset:2px;border-radius:6px}
/* ---- 원본 서식 그리기 (0.3.0): Word 기본 글자 크기 10pt, 문단 최소 높이 없음 (Word와 행 높이를 맞춤) ---- */
.docx-wrapper>section.docx{font-size:10pt}
.docx-wrapper section.docx p{min-height:0}
.docx-measure{position:absolute;left:-20000px;top:0;visibility:hidden;pointer-events:none}
/* 쪽 표시 (두 쪽 이상) */
.pg-label{align-self:center;font-size:12px;color:var(--muted);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:1px 10px;margin:4px 0 -8px}
.pg-label:first-child{margin-top:0}
/* 인쇄 미리보기 */
.pp-dlg{width:min(980px,96vw);height:94vh;max-height:94vh;padding:0;border:1px solid var(--line-strong);border-radius:14px;background:#e9ecf2;color:inherit;display:flex;flex-direction:column}
.pp-dlg:not([open]){display:none}
.pp-dlg::backdrop{background:rgba(20,28,45,.45)}
.pp-bar{display:flex;gap:10px;align-items:center;padding:10px 14px;background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap}
.pp-bar .grow{flex:1}
.pp-pages{overflow:auto;flex:1;padding:18px 0}
.pp-pages .docx-wrapper{background:transparent !important;padding:0 !important;display:flex;flex-direction:column;align-items:center;gap:16px}
.pp-pages .docx-wrapper>section.docx{box-shadow:0 2px 10px rgba(0,0,0,.25) !important;margin:0 !important}
@media print{.pg-label{display:none !important}}
.phone input,.field .phone input{min-width:3.2em}
.field .phone[data-phone=intl]{max-width:420px}
/* 전화 칸: 번호 칸마다 숫자 4자리가 다 보이게 (0.3.1) */
.phone select,.field .phone select,.slot .phone select{max-width:none;width:auto;flex:0 0 auto;padding-left:6px;padding-right:4px}
.phone input,.field .phone input,.slot .phone input{flex:1 1 4.8em;min-width:4.8em;padding-left:6px;padding-right:6px;text-align:center;font-variant-numeric:tabular-nums}
.phone [data-part=rest],.field .phone [data-part=rest],.slot .phone [data-part=rest]{flex:1 1 9em;min-width:7em;text-align:left}
/* ---- 오른쪽 위: 로그인 계정 · 로그아웃 (0.3.1, 사용자 결정 2026-10-29: '시험' 안내 띠 없앰) ---- */
.topbar{display:flex;justify-content:flex-end;align-items:center;gap:10px;flex-wrap:wrap}
.topbar .acct{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:4px 12px}
.topbar .acct b{color:var(--fg);font-weight:600}
.topbar .acct .role{font-size:12px}
.topbar .acct .role::before{content:'·';margin-right:6px;color:var(--faint)}
/* ---- 반응형 글 줄바꿈 (0.3.1): 설명 글은 화면 폭만큼 쓰고, 한국어는 낱말(띄어쓰기) 단위로 줄을 바꾼다 ---- */
body{word-break:keep-all;overflow-wrap:break-word}
.head>div:first-child{flex:1 1 320px;min-width:0}
.head p{max-width:none;text-wrap:pretty}
/* 원본 서식 그리기는 Word와 같은 글자 단위 줄바꿈 그대로 (위 규칙을 받지 않음) */
.docx-wrapper{word-break:normal;overflow-wrap:normal}
/* ---- 위쪽 정리 (0.3.1): 안내 띠를 없앤 만큼 화면을 위로. 계정은 제목 줄 오른쪽, 안내 문구는 위쪽 알림 ---- */
main{position:relative;padding-top:20px}
.topbar{position:absolute;top:16px;right:max(28px,env(safe-area-inset-right,0px));margin:0;z-index:5}
.head .row{padding-top:40px}                                     /* 오른쪽 단추는 계정 줄 아래에 */
main>#message{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:60;min-height:0;margin:0;max-width:min(620px,calc(100vw - 32px));
  background:var(--panel);border:1px solid var(--ink-line);border-radius:999px;padding:7px 16px;box-shadow:0 6px 20px rgba(30,45,75,.16);text-align:center;pointer-events:none}
main>#message:empty{display:none}
main>#message.err{border-color:var(--seal);background:var(--seal-soft)}
@media (max-width:900px){
  main{padding-top:14px}
  .topbar{position:static;margin:0 0 10px}
  .head .row{padding-top:0}
}
.topbar{top:10px}
.topbar .acct{padding:3px 10px;font-size:12.5px}
.topbar .btn.sm{padding:3px 10px;font-size:12.5px}
@media (max-width:900px){.topbar{position:static}}
/* 신청서 작성 칸 목록이 좁을 때: 전화·주소 칸은 이름을 위에 두고 한 줄을 다 쓴다 (번호 4자리가 다 보이게, 화면 밖으로 넘치지 않게) */
#cmp-slots{container-type:inline-size}
@container (max-width:460px){
  .slot:has(.phone),.slot:has(.addr){grid-template-columns:minmax(0,1fr) 28px}
  .slot:has(.phone) .lab,.slot:has(.addr) .lab{grid-column:1 / -1}
}
.slot .phone,.slot .addr{min-width:0;max-width:100%}
/* ---- 브랜드: 행정ON 로고 (0.3.1) ---- */
.brand{color:inherit;text-decoration:none}
.brand .logo{width:36px;height:36px;flex:0 0 auto;border-radius:10px;box-shadow:0 2px 6px rgba(44,69,128,.25)}
.brand .word{display:block;font-size:19px;font-weight:800;letter-spacing:-.03em;line-height:1.15;color:var(--fg)}
.brand .word span{color:var(--ink);font-family:"Pretendard","Segoe UI",system-ui,sans-serif;letter-spacing:-.01em;margin-left:1px}
.brand small{display:block;margin-top:1px;line-height:1.3}
.login .brand .logo{width:48px;height:48px;border-radius:13px}
.login .brand .word{font-size:24px}
@media (max-width:900px){.brand .logo{width:30px;height:30px;border-radius:8px}.brand .word{font-size:17px}}
/* 링크로 된 단추(<a class="btn">)는 밑줄·링크 색 없이 단추 모양 그대로 */
a.btn{text-decoration:none;color:var(--fg)}
/* ---- 대시보드 ---- */
/* 신청서 상태(작성 중 → 서식 생성됨 → 접수함 → 완료)는 순서가 있는 단계라 남색 한 가지의 밝기 4단계(완료가 가장 진함).
   이웃 단계 색 차이 ΔE ≥ 15(보통 시각·색각 이상 모두, 밝은·어두운 화면 각각 확인). 연한 단계는 바탕과 대비가 낮아 범례에 이름·건수를 늘 함께 적는다. */
:root{--st-DRAFT:#c9d5ef;--st-GENERATED:#8aa3d8;--st-SUBMITTED:#4d6bb0;--st-DONE:#1c2f5e}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--st-DRAFT:#2c3a5f;--st-GENERATED:#4b67b0;--st-SUBMITTED:#809cf2;--st-DONE:#c6d3ff}}
:root[data-theme="dark"]{--st-DRAFT:#2c3a5f;--st-GENERATED:#4b67b0;--st-SUBMITTED:#809cf2;--st-DONE:#c6d3ff}
.st-DRAFT{background:var(--st-DRAFT)} .st-GENERATED{background:var(--st-GENERATED)} .st-SUBMITTED{background:var(--st-SUBMITTED)} .st-DONE{background:var(--st-DONE)}
.db-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:16px}
.db-kpi{display:flex;flex-direction:column;gap:2px;min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;color:inherit;text-decoration:none;text-align:left;font:inherit;cursor:pointer}
.db-kpi:hover{border-color:var(--ink-line);box-shadow:var(--shadow)}
.db-kpi:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.db-kpi.lead{background:var(--ink-soft);border-color:var(--ink-line)}
.db-kpi small{font-size:12px;color:var(--muted);font-weight:500}
.db-kpi strong{font-size:28px;font-weight:650;letter-spacing:-.02em;line-height:1.25}
.db-kpi strong em{font-style:normal;font-size:14px;font-weight:500;color:var(--muted);margin-left:3px}
.db-kpi span{font-size:12px;color:var(--muted)}
.db-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:16px;align-items:start}
.db-stack{display:flex;flex-direction:column;gap:16px;min-width:0}
@media (max-width:1100px){.db-grid{grid-template-columns:minmax(0,1fr)}}
/* 확인할 일 */
.db-todo+.db-todo{margin-top:16px}
.db-todo h3{display:flex;align-items:center;gap:8px;font-size:13px;margin:0 0 4px}
.db-todo ul{list-style:none;margin:0;padding:0}
.db-todo li+li{border-top:1px solid var(--line)}
.db-todo li a{display:flex;justify-content:space-between;align-items:center;gap:6px 12px;flex-wrap:wrap;padding:7px 8px;border-radius:6px;color:inherit;text-decoration:none}
.db-todo li a:hover{background:var(--sunk)}
.db-todo li a:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.db-todo .nm{min-width:0;overflow-wrap:anywhere}
.db-todo .nm b{font-weight:600}
.db-todo .nm small{color:var(--faint);margin-left:6px;font-size:12px}
.db-todo .dt{font-size:12.5px;color:var(--muted)}
.db-todo li.more a{justify-content:flex-start;color:var(--ink);font-size:12.5px}
/* 진행 상황: 가로 누적 막대 (조각 사이 2px 바탕 틈) + 범례(이름·건수·비율 = 표) */
.db-stackbar{display:flex;gap:2px;height:14px;border-radius:4px;overflow:hidden}
.db-seg{flex:1 1 0;min-width:4px}
.db-legend{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:2px 12px}
.db-legend a{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:6px;color:inherit;text-decoration:none;font-size:13px}
.db-legend a:hover{background:var(--sunk)}
.db-legend .sw{width:10px;height:10px;border-radius:3px;flex:none}
.db-legend b{margin-left:auto;font-variant-numeric:tabular-nums}
.db-legend small{width:3.2em;text-align:right;color:var(--faint);font-size:11.5px;font-variant-numeric:tabular-nums}
/* 월별: 세로 막대 (위 끝 4px 둥글게, 바닥 직각, 값은 막대 위) */
.db-cols{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.db-col{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.db-track{height:112px;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;border-bottom:1px solid var(--line-strong)}
.db-track b{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.db-col.zero .db-track b{color:var(--faint);font-weight:500}
.db-c{display:block;width:min(24px,70%);height:0;background:var(--ink-line);border-radius:4px 4px 0 0}
.db-col.now .db-c{background:var(--ink)}
.db-col small{font-size:11.5px;color:var(--muted)}
.db-col.now small{color:var(--fg);font-weight:600}
/* 담당자별: 가로 막대 (값은 막대 끝 오른쪽) */
.db-bars{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.db-bars li{display:grid;grid-template-columns:minmax(72px,128px) minmax(0,1fr) auto;align-items:center;gap:10px}
.db-bars .who{font-size:13px;line-height:1.3;min-width:0;overflow-wrap:anywhere}
.db-bars .who small{display:block;color:var(--faint);font-size:11.5px}
.db-bar{display:block;height:10px}
.db-bar>span{display:block;height:100%;width:0;background:var(--ink);border-radius:0 4px 4px 0}
.db-bars li.none .db-bar>span{background:var(--faint)}
.db-bars .val{display:flex;flex-direction:column;align-items:flex-end;line-height:1.25}
.db-bars .val b{font-size:13px;font-variant-numeric:tabular-nums}
.db-bars .val small{font-size:11.5px;color:var(--faint)}
/* 신청 이력: 상태로 거르기 */
.app-filter{margin-bottom:12px;flex-wrap:wrap;max-width:100%}
.app-filter .count{margin-left:2px}
.app-filter button[aria-pressed="true"] .count{color:inherit;opacity:.8}

/* ---------------- 0.3.2: 아이디·비밀번호 조건(칸 아래), 로그인 화면 소개, 임시 비밀번호 창 */
.rules{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:1px;font-size:12px;line-height:1.45;color:var(--muted)}
.rules li{display:flex;gap:6px;align-items:baseline}
.rules li::before{content:'•';flex:0 0 12px;text-align:center;color:var(--faint);font-weight:700}
.rules li.ok{color:var(--ok)}
.rules li.ok::before{content:'✓';color:var(--ok)}
.rules li.bad{color:var(--seal)}
.rules li.bad::before{content:'✕';color:var(--seal)}
.field input[aria-invalid="true"]{border-color:var(--seal)}
a.brand{color:inherit;text-decoration:none;border-radius:12px}
a.brand:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.login{max-width:420px;margin:max(24px,8vh) auto 48px}
.login-help{margin:0;line-height:1.5}
.login-intro{margin-top:22px;padding:0 4px}
.login-intro h1{font-size:15px;margin:0 0 10px;color:var(--fg);letter-spacing:-.01em}
.login-intro ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.login-intro li{display:grid;gap:1px;font-size:12.5px;color:var(--muted);line-height:1.5;padding-left:14px;position:relative}
.login-intro li::before{content:'';position:absolute;left:2px;top:.6em;width:5px;height:5px;border-radius:50%;background:var(--ink-line)}
.login-intro li b{color:var(--fg);font-size:13px;font-weight:600}
main.intro{max-width:620px;margin:12vh auto;padding:0 16px}
main.intro h1{font-size:20px;margin:0 0 8px}
main.intro p{color:var(--muted);margin:0 0 8px}
.temp-dlg{width:min(460px,94vw)}
.temp-dlg .field{max-width:none}
.login .btn.primary{justify-content:center;padding-block:10px}
.login #message:empty{display:none}
@media (max-width:900px){
  .split.pick-first > :last-child{order:-1}               /* 아무것도 고르지 않았으면 휴대폰에서는 목록을 먼저 */
  nav.menu{scrollbar-width:none;scroll-behavior:smooth}
  nav.menu::-webkit-scrollbar{display:none}
  nav.menu.more-r{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent)}
  nav.menu.more-l{-webkit-mask-image:linear-gradient(to right,transparent,#000 44px);mask-image:linear-gradient(to right,transparent,#000 44px)}
  nav.menu.more-l.more-r{-webkit-mask-image:linear-gradient(to right,transparent,#000 44px,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(to right,transparent,#000 44px,#000 calc(100% - 44px),transparent)}
}
/* 전화 칸: 칸이 좁은 태블릿 폭에서도 옆 칸을 넘지 않게 (4자리 숫자가 보이는 최소 폭) */
.phone input,.field .phone input,.slot .phone input{flex:1 1 3.8em;min-width:3.8em;padding-left:4px;padding-right:4px}
.fields{grid-template-columns:repeat(auto-fill,minmax(min(210px,100%),1fr))}      /* 칸 최소 폭: 전화(앞자리+두 칸)가 들어가는 폭 */
main>#message{width:max-content}                       /* 가운데 정렬(left:50%)이라도 화면 반쪽 폭에서 줄바꿈되지 않게 */
@media (max-width:600px){main>#message{border-radius:14px;top:10px}}
table.tiers .field-inline{width:100%;min-width:88px}