/* TU GLOBAL JOB FAIR 2026 — 참가 등록 폼 · 결과 화면 (index.html · result.html 공용)
   융합 설계: docs/plan/2026-10-12-tu-jobfair-design-fusion.md
   뼈대 = d2 칸 격자(라벨은 칸 안 위쪽, 칸끼리 붙임) + d3 상자 신호(옅은 바탕 + 1px 괘선) + d1 반듯함(반경 0~2px).
   깊이감은 머리 띠에만. 버린 것: 글래스, 그라데이션 숫자, 빛나는 버튼, 방사형 광선, 칸마다 필수 점. */

:root{
  --forest:#0D3D22; --deep:#005629; --sym:#30A048; --lime:#80C040; --pale:#E3EDE6;
  --paper:#FFFFFF; --cell:#F3F6F4;
  --text:#11241A;          /* 본문 */
  --label:#33493B;         /* 칸 라벨 */
  --muted:#4A5F52;         /* 보조 글 */
  --ph:#5B6E62;            /* 자리표시 — #F3F6F4 위 4.9:1 */
  --rule:#7F9688;          /* 괘선 — 입력칸 경계(1.4.11) 3.2:1 */
  --err:#B3261E; --err-bg:#FDF1EF;
  --dock-h:74px;
  --f:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic','PingFang SC','Microsoft YaHei','Noto Sans CJK SC',sans-serif;
  --f-zh:'Pretendard Variable',Pretendard,'PingFang SC','Microsoft YaHei','Noto Sans CJK SC','Noto Sans SC',-apple-system,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--pale)}
body{margin:0;background:var(--pale);color:var(--text);font-family:var(--f);font-size:16px;line-height:1.45;
  word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
html:lang(zh-Hans) body{font-family:var(--f-zh)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--sym);outline-offset:2px}
[hidden]{display:none !important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.page{max-width:480px;margin:0 auto;background:var(--paper);min-height:100vh;min-height:100svh;
  box-shadow:0 0 0 1px rgba(13,61,34,.08)}
.page.has-dock{padding-bottom:calc(var(--dock-h) + env(safe-area-inset-bottom) + 12px)}
/* 설정을 받기 전 첫 페인트: 머리 띠 자리만 먼저 칠해 둔다(내용이 들어와도 밀리지 않게) */
.page[aria-busy="true"]::before{content:"";display:block;height:186px;background:var(--forest)}
.boot-fail{margin:0;padding:24px 16px;font-size:15px;color:var(--err);font-weight:650}

/* ── 머리 띠: 생성 그림(배경만) 위 HTML 글자. scrim 이 대비를 지킨다 ──
   그림은 오른쪽에 붙여 키운다(높이 190%) — 리본이 서로 꼬이는 가장 밝은 자리가 언어 단추 아래·제목 오른쪽 빈 곳에 온다.
   덮개 두 겹: ① 가로 — 글자 기둥(왼쪽 55%)은 짙게, 오른쪽 끝은 0 ② 세로 — 제목 줄부터 아래(80px~)는 .30 을 더해
   오른쪽으로 길게 나가는 제목·날짜·장소 끝(ko·zh 제목, en 장소)을 지킨다. 세로 0~68px 은 열어 둔다(리본 자리).
   기준: 머리 글자 전부 가장 밝은 픽셀 대비 ≥4.5:1 (shoot_front a11y, ko/en/zh × online/onsite × 320·344·360·390·430·1280
   — 2026-10-12 최저 4.70 = en onsite 390 현장 칩). 360 미만 폭은 아래 kicker 덮개 미디어쿼리가 맡는다. */
.band{position:relative;color:#fff;padding:8px 16px 12px;background-color:var(--forest);
  background-image:linear-gradient(180deg,rgba(7,36,20,0) 0,rgba(7,36,20,0) 68px,rgba(7,36,20,.30) 80px,rgba(7,36,20,.30) 100%),
    linear-gradient(90deg,rgba(7,36,20,.90) 0%,rgba(7,36,20,.86) 55%,rgba(7,36,20,0) 100%),url(/assets/band.jpg);
  background-image:linear-gradient(180deg,rgba(7,36,20,0) 0,rgba(7,36,20,0) 68px,rgba(7,36,20,.30) 80px,rgba(7,36,20,.30) 100%),
    linear-gradient(90deg,rgba(7,36,20,.90) 0%,rgba(7,36,20,.86) 55%,rgba(7,36,20,0) 100%),
    image-set(url(/assets/band.webp) type("image/webp"),url(/assets/band.jpg) type("image/jpeg"));
  background-size:100% 100%,100% 100%,auto 190%;background-position:0 0,0 0,right -10px top 40%;background-repeat:no-repeat}
.band__top{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;min-height:40px}
.wm{margin:0;padding-top:4px;font-size:10.5px;font-weight:700;letter-spacing:.14em;line-height:1.45;color:#fff;white-space:nowrap}
.wm b{display:block;font-weight:600;letter-spacing:.04em;color:#E3EDE6}
.lang{flex:none;display:flex;border:1px solid rgba(255,255,255,.7)}
.lang button{appearance:none;-webkit-appearance:none;border:0;border-radius:0;background:transparent;color:#fff;
  font-family:var(--f);font-size:13.5px;font-weight:650;min-width:46px;height:40px;padding:0 10px;cursor:pointer;white-space:nowrap}
/* 연타해도 확대·회색 번쩍임·글자 선택이 생기지 않게(숨겨진 3연타가 아무 흔적도 남기지 않도록) */
.lang button{touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
.lang button[data-lang="zh"]{font-family:var(--f-zh)}
.lang button + button{border-left:1px solid rgba(255,255,255,.7)}
.lang button[aria-pressed="true"]{background:#fff;color:var(--forest)}
/* 머리 띠의 언어 단추는 리본 바로 위에 앉는다 — 안 눌린 칸에 짙은 바탕(흐림 없음)을 깔아 글자를 지킨다 */
.band .lang button[aria-pressed="false"]{background:rgba(7,36,20,.6)}
.kick{margin:10px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-size:11px;font-weight:750;
  letter-spacing:.2em;color:var(--lime);line-height:1.3}
.band h1{margin:3px 0 0;font-size:21px;line-height:1.3;font-weight:800;letter-spacing:-.02em}
html:lang(en) .band h1{letter-spacing:-.01em}
.when{margin:8px 0 0;padding-top:7px;border-top:1px solid rgba(255,255,255,.38);font-size:13.5px;line-height:1.55;font-variant-numeric:tabular-nums}
.when b{font-weight:700}
.when span{color:#E3EDE6}
.where{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:13.5px;line-height:1.55;color:#E3EDE6}
.tbc{display:inline-block;padding:1px 7px;border-radius:2px;background:var(--lime);color:var(--forest);
  font-size:11.5px;font-weight:800;letter-spacing:.02em;line-height:1.5}
.site-chip{display:inline-block;padding:0 7px;border:1px solid #fff;border-radius:2px;color:#fff;
  font-size:11.5px;font-weight:750;letter-spacing:.02em;line-height:1.6}
/* 360 미만 폰(320~359): 그림이 오른쪽에 붙어 있어 폭이 좁을수록 밝은 리본이 kicker 줄 밑으로 밀려 들어온다
   (2026-10-12 실측 320 kick 3.6:1 · 330 4.4:1). 이 폭에서만 가로 덮개의 짙은 구간을 55%→70% 로 늘린다 — 360 이상은 그대로.
   같은 폭에서 워드마크(nowrap 162px)+언어 단추(172px)가 한 줄을 넘쳐 가로 스크롤이 생기던 것(320 에서 40px)은
   워드마크를 세 줄(TONGMYONG / UNIVERSITY / 동명대학교)로 접어 막는다. 영구 가드: shoot_front a11y 320·344. */
@media (max-width:359px){
  .band{background-image:linear-gradient(180deg,rgba(7,36,20,0) 0,rgba(7,36,20,0) 68px,rgba(7,36,20,.30) 80px,rgba(7,36,20,.30) 100%),
      linear-gradient(90deg,rgba(7,36,20,.90) 0%,rgba(7,36,20,.86) 70%,rgba(7,36,20,0) 100%),url(/assets/band.jpg);
    background-image:linear-gradient(180deg,rgba(7,36,20,0) 0,rgba(7,36,20,0) 68px,rgba(7,36,20,.30) 80px,rgba(7,36,20,.30) 100%),
      linear-gradient(90deg,rgba(7,36,20,.90) 0%,rgba(7,36,20,.86) 70%,rgba(7,36,20,0) 100%),
      image-set(url(/assets/band.webp) type("image/webp"),url(/assets/band.jpg) type("image/jpeg"))}
  .wm{white-space:normal}
}

/* 받은 참가증 다시 보기 — 이 기기에서 받은 적이 있을 때만 머리 띠 밑에 한 줄. 옅은 녹색 띠 + 아래 2px 짙은 선으로
   폼 칸(#F3F6F4 · 라벨+입력)과 결을 갈라 둔다 — 꼭 채워야 하는 칸으로 읽히지 않게 */
.revisit{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:46px;padding:0 16px;
  background:var(--pale);color:var(--forest);font-size:14.5px;font-weight:700;text-decoration:none;border-bottom:2px solid var(--forest)}
.revisit b{font-size:16px;font-weight:850;font-variant-numeric:tabular-nums;white-space:nowrap}
.revisit b::after{content:"";display:inline-block;width:7px;height:7px;margin-left:8px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg) translateY(-2px)}

/* ── 칸 격자 ── */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);border-bottom:1px solid var(--rule)}
.cell{grid-column:1 / -1;position:relative;min-width:0;margin:0;border:0;background:var(--cell);
  display:flex;flex-direction:column;padding:7px 14px 8px}
.cell.half{grid-column:auto}
.lab{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0;font-size:13px;line-height:18px;
  font-weight:650;color:var(--label);letter-spacing:-.005em}
.cell input.in,.cell select.in{appearance:none;-webkit-appearance:none;display:block;width:100%;height:34px;margin:2px 0 0;padding:0;
  border:0;border-radius:0;background:transparent;font-size:17px;font-weight:560;color:var(--text);outline:none;min-width:0}
.cell select.in{padding-right:22px;cursor:pointer;text-overflow:ellipsis;white-space:nowrap;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230D3D22' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 2px center}
.cell select.in.empty{color:var(--ph);font-weight:450}
.cell select.in option{color:var(--text);font-weight:450}
.cell input.in::placeholder{color:var(--ph);font-weight:450;opacity:1}
.cell:focus-within{background:var(--paper);box-shadow:inset 0 0 0 2px var(--deep)}
.cell:focus-within > .lab{color:var(--deep)}
.cell input:focus-visible,.cell select:focus-visible{outline:none}
.other{display:block;width:100%;height:44px;margin:7px 0 0;padding:0 12px;border:1px solid var(--rule);border-radius:2px;
  background:var(--paper);font-size:16px;font-weight:550;color:var(--text)}
.other::placeholder{color:var(--ph);font-weight:450;opacity:1}
.other:focus{outline:2px solid var(--deep);outline-offset:-1px}

/* 오류 — 색만으로 말하지 않는다: 왼쪽 막대 + 분홍 면 + 문장 */
.err{margin:5px 0 0;font-size:13px;line-height:1.4;font-weight:700;color:var(--err)}
.err:empty{display:none}
.cell.bad{background:var(--err-bg);box-shadow:inset 4px 0 0 var(--err)}
.cell.bad:focus-within{background:var(--paper);box-shadow:inset 4px 0 0 var(--err),inset 0 0 0 2px var(--deep)}
.cell.bad > .lab,.cell.bad summary .lab{color:var(--err)}

/* ── 선택 칩: 단일 ○ · 다중 ☐ 글리프를 칩 안에(한국어를 못 읽어도 규칙이 보이게) ── */
.opts{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.opts.seg{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.opts.cols2{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.opt{position:relative;display:flex;min-width:0}
.opt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}
.opt span{flex:1;display:flex;align-items:center;gap:7px;min-height:42px;padding:5px 11px;border:1px solid var(--rule);border-radius:2px;
  background:var(--paper);font-size:15px;font-weight:560;line-height:1.25;color:var(--text)}
.opts.seg .opt span{justify-content:center;min-height:40px;padding:2px;font-size:14.5px;line-height:1.1;font-variant-numeric:tabular-nums;text-align:center}
/* 'Level 1' 처럼 긴 표기도 한 줄(7칸 한 줄 유지) — 'Level / 1' 두 줄 쪼개짐 금지. 넘치지 않게 글자·간격을 좁히고
   글자는 폭에 맞춰 12~13px. 그래도 안 들어가는 아주 좁은 화면(≤340)만 예전처럼 칸 안 두 줄(칸이 겹치는 것보다 낫다) */
.opts.seg .opt span{white-space:nowrap}
.opts.seg.tight{gap:2px}
.opts.seg.tight .opt span{padding:2px 1px;font-size:clamp(12px,3.3vw,13px);letter-spacing:-.015em}
@media (max-width:340px){.opts.seg.tight .opt span{white-space:normal}}
/* 다중 선택 칩(희망 직무)은 촘촘하게 — 높이 40px 하한은 지킨다 */
.opts.dense .opt span{min-height:40px;padding:3px 9px 3px 8px;gap:6px;font-size:14.5px}
.opts.dense .g{width:15px;height:15px}
.g{flex:none;width:16px;height:16px;border:1.5px solid var(--forest);background:var(--paper);display:grid;place-items:center}
.g.o{border-radius:50%}
.g::after{content:"";opacity:0}
.g.o::after{width:7px;height:7px;border-radius:50%;background:var(--deep)}
.g.x::after{width:8px;height:4.5px;border:2px solid var(--deep);border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
.opt input:checked + span{background:var(--deep);border-color:var(--deep);color:#fff}
.opt input:checked + span .g{border-color:#fff}
.opt input:checked + span .g::after{opacity:1}
.opt input:focus-visible + span{outline:3px solid var(--sym);outline-offset:2px}
.opt input:disabled{cursor:not-allowed}
.opt input:disabled + span{background:#F7F9F8;color:#5F7166;border-style:dashed}

/* 동의 */
.consent-row{display:flex;align-items:stretch;gap:8px;margin-top:7px}
.consent-row .opt{flex:1}
.consent-row .opt span{min-height:44px;font-weight:700}
.more{flex:none;appearance:none;-webkit-appearance:none;min-width:64px;min-height:44px;padding:0 12px;border:1px solid var(--rule);border-radius:2px;
  background:var(--paper);font-size:13.5px;font-weight:650;color:var(--forest);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.more[aria-expanded="true"]{background:var(--pale)}
.statement{margin:8px 0 0;padding:10px 12px;border:1px solid var(--rule);background:var(--paper);font-size:13px;line-height:1.6;color:var(--muted)}

/* ── 버튼 ── */
.btn{appearance:none;-webkit-appearance:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  min-height:54px;padding:6px 16px;border:0;border-radius:0;background:var(--deep);color:#fff;
  font-family:var(--f);font-size:18px;font-weight:800;letter-spacing:-.01em;line-height:1.15;cursor:pointer;text-decoration:none;text-align:center;
  box-shadow:inset 0 -4px 0 var(--lime)}
.btn:active{background:var(--forest)}
.btn small{font-size:12px;font-weight:600;letter-spacing:0;color:#E3EDE6}
.btn[aria-busy="true"]{background:var(--forest);cursor:progress}
.btn--row{flex-direction:row;gap:10px}
.btn--row svg{width:20px;height:20px;flex:none}
.btn--sub{background:var(--paper);color:var(--forest);border:2px solid var(--forest);box-shadow:none;font-size:17px;min-height:50px}
.btn--sub:active{background:var(--pale)}

/* ── 하단 고정 막대 ── */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:10;background:var(--paper);border-top:2px solid var(--forest)}
.dock__in{max-width:480px;margin:0 auto;display:flex;align-items:center;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom))}
/* 상태는 한 줄('11 required left'가 두 줄로 갈리지 않게) — 짧은 언어는 104px 자리 그대로, 긴 언어는 버튼이 양보한다.
   빨간 칸 안내(warn)만 104px 안에서 줄바꿈 */
.state{flex:none;min-width:104px;margin:0;font-size:13.5px;line-height:1.3;font-weight:750;color:var(--forest);white-space:nowrap}
.state b{font-size:19px;font-weight:850;font-variant-numeric:tabular-nums}
.state.done{color:var(--deep)}
.state.done::before{content:"";display:inline-block;width:12px;height:7px;margin-right:6px;border:2.5px solid var(--deep);border-top:0;border-right:0;transform:translateY(-3px) rotate(-45deg)}
.state.warn{width:104px;color:var(--err);font-size:12.5px;white-space:normal}
.dock .btn{flex:1}

/* ── 결과 화면: 번호가 화면에서도 가장 크다, 참가증은 한 화면 안에 통째로 ── */
/* --saved-h = 저장 상태 줄 높이(app.js paintSaved) — 그만큼 참가증 틀을 줄여 저장 버튼이 첫 화면에 남는다.
   2026-10-14 참가증·행사 안내 따로 받기 줄(44px + 위 6px)을 빼며 --chrome 도 50px 줄였다 */
.res{display:flex;flex-direction:column;min-height:100vh;min-height:100svh;--chrome:calc(268px + var(--saved-h,0px))}
.res.is-site{--chrome:calc(328px + var(--saved-h,0px))}
.res__top{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:12px 16px 10px;border-bottom:2px solid var(--forest)}
.res__l{display:flex;flex-direction:column;gap:2px;min-width:0}
.res__ok{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:750;color:var(--deep)}
.res__ok::before{content:"";flex:none;width:11px;height:6px;border:2.5px solid var(--deep);border-top:0;border-right:0;transform:translateY(-2px) rotate(-45deg)}
.res__lab{font-size:15px;font-weight:800;color:var(--forest)}
.res__no{margin:0;flex:none;font-size:52px;line-height:.92;font-weight:900;letter-spacing:-.04em;color:var(--deep);font-variant-numeric:tabular-nums}
.res__no small{font-size:15px;font-weight:750;letter-spacing:0;color:var(--muted);margin-right:4px}
.res__flag{margin:0;padding:6px 16px;background:var(--pale);font-size:13px;font-weight:700;color:var(--forest)}
.res__card{flex:1;margin:0;display:flex;align-items:center;justify-content:center;padding:12px 16px;background:var(--cell)}
.frame{position:relative;height:600px;height:min(620px,calc(100vh - var(--chrome)));height:min(620px,calc(100svh - var(--chrome)));
  min-height:240px;aspect-ratio:9 / 16;max-width:100%;background:var(--pale);
  box-shadow:0 1px 0 rgba(13,61,34,.22),0 10px 26px -12px rgba(13,61,34,.45)}
/* 카톡 '이미지 저장' 메뉴를 살리려면 pointer-events·user-select 를 막지 않는다 */
.frame img{display:block;width:100%;height:100%;object-fit:contain}
.frame img.loading{visibility:hidden}
.wait{position:absolute;inset:0;margin:0;display:flex;align-items:center;justify-content:center;padding:16px;text-align:center;
  font-size:14px;font-weight:650;color:var(--forest)}
.res__act{padding:10px 16px 12px;border-top:1px solid var(--rule)}
.res__act .btn{width:100%}
/* 저장 상태 줄 — 저장 버튼 바로 위 한 자리. 작은 안내(.hint)보다 크고 굵게, 왼쪽 막대 + 면 + 문장(색만으로 말하지 않는다).
   ok = 녹색 + ✓(글꼴 밖 글자라 테두리로 그린다) · warn = 호박색 면 위 짙은 갈색 글자(7.6:1 — 라임 위 흰 글자 금지) · info = 옅은 녹색 */
.saved{display:flex;align-items:center;gap:8px;margin:0 0 8px;padding:8px 12px;border-left:4px solid var(--forest);
  font-size:14.5px;line-height:1.4;font-weight:750;text-align:left}
.saved:empty{display:none}
.saved .nw{white-space:nowrap}
.saved--ok{background:#E6F2EA;border-left-color:var(--sym);color:var(--deep);font-weight:850}
.saved--ok::after{content:"";flex:none;width:13px;height:7px;margin-left:2px;border:3px solid var(--deep);border-top:0;border-right:0;
  transform:translateY(-3px) rotate(-45deg)}
.saved--warn{background:#FFF3D6;border-left-color:#C98A00;color:#6B4500}
.saved--info{background:var(--pale);color:var(--forest)}
.btn__t{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0}
.btn__t b{font-weight:800}
.hint{margin:9px 0 0;font-size:13.5px;line-height:1.5;color:var(--muted);text-align:center}
.hint.strong{color:var(--forest);font-weight:700}
.call{margin:6px 0 0;font-size:12.5px;line-height:1.4;font-weight:650;color:var(--forest);text-align:center}
.res__act .btn--sub{margin-top:10px}
.note{margin:8px 0 0;font-size:13px;font-weight:700;color:var(--forest);text-align:center}
.note:empty{display:none}
.res__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 16px calc(12px + env(safe-area-inset-bottom));background:var(--paper)}
/* 누를 자리 44px — 글자는 왼쪽 16px 선에 그대로 두고(음수 여백) 눌리는 면만 넓힌다 */
.res__foot a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;margin-left:-10px;
  font-size:13.5px;font-weight:650;color:var(--forest);text-underline-offset:3px}
.lang.lang--light{border-color:var(--rule)}
.lang--light button{color:var(--forest);height:40px}
.lang--light button + button{border-left-color:var(--rule)}
.lang--light button[aria-pressed="true"]{background:var(--forest);color:#fff}
.miss{padding:40px 16px;text-align:center}
.miss p{margin:0 0 16px;font-size:16px;font-weight:700;color:var(--forest)}

.hp{position:absolute !important;left:-9999px;width:1px;height:1px;opacity:0}

/* ── 숨겨진 명단(주최 측 전용 · 한국어 3연타) ──
   칸: 이름표 없이 토글 바로 아래(결과 화면은 바닥 토글 바로 위)에 떠 있다 — 흐름 밖(absolute)이라 다른 것은 한 칸도 안 움직인다. */
.res__foot{position:relative}
.xk{position:absolute;top:calc(100% + 4px);right:0;z-index:6;width:96px;height:40px;margin:0;padding:0 8px;
  appearance:none;-webkit-appearance:none;border:1px solid rgba(255,255,255,.7);border-radius:0;background:#072414;
  color:#fff;font-size:16px;font-weight:700;letter-spacing:.25em;text-align:center;
  -webkit-text-security:disc;text-security:disc}
.xk::placeholder{color:rgba(255,255,255,.6);opacity:1}
.xk:focus-visible{outline:2px solid var(--lime);outline-offset:0}
.res__foot .xk{top:auto;bottom:calc(100% - 4px);right:16px;border-color:var(--rule);background:var(--paper);color:var(--forest)}
.res__foot .xk::placeholder{color:var(--ph)}
.res__foot .xk:focus-visible{outline-color:var(--sym)}
/* 명단 덮개: 머리(인원 · 기준 시각 · 닫기 / 새로고침 · 엑셀 받기)는 붙어 있고 목록만 흐른다 */
html.xl-on,html.xl-on body{overflow:hidden}
.xl{position:fixed;inset:0;z-index:50;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  background:var(--paper);color:var(--text);outline:none}
.xl__in{max-width:640px;margin:0 auto}
.xl__bar{position:sticky;top:0;z-index:1;background:var(--forest);color:#fff;box-shadow:inset 0 -3px 0 var(--lime)}
.xl__bar .xl__in{padding:10px 16px 14px}
.xl__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.xl__h{margin:0;display:flex;flex-direction:column;min-width:0}
.xl__h b{font-size:21px;font-weight:850;line-height:1.3;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.xl__h small{font-size:12.5px;font-weight:550;color:#E3EDE6;font-variant-numeric:tabular-nums}
.xl__h small:empty{display:none}
.xl__x,.xl__b{appearance:none;-webkit-appearance:none;border:1px solid rgba(255,255,255,.7);border-radius:0;background:transparent;
  color:#fff;font-size:15px;font-weight:700;cursor:pointer;touch-action:manipulation}
.xl__x{flex:none;min-width:64px;min-height:44px;padding:0 12px}
.xl__tools{display:grid;grid-template-columns:1fr 1.4fr;gap:8px;margin-top:10px}
.xl__b{min-height:46px;padding:0 12px;font-size:15.5px}
.xl__b--go{border-color:var(--lime);background:var(--lime);color:var(--forest);font-weight:850}
.xl__x:active,.xl__b:active{background:rgba(255,255,255,.14)}
.xl__b--go:active{background:#6FAE33}
.xl__msg{margin:0;padding:12px 16px;font-size:14px;font-weight:700;color:var(--err)}
.xl__msg:empty{display:none}
.xl__list{list-style:none;margin:0;padding:0 0 calc(24px + env(safe-area-inset-bottom))}
.xl__none{padding:28px 16px;text-align:center;font-size:15px;font-weight:650;color:var(--muted)}
.xr{border-bottom:1px solid #D5DED8}
.xr__h{appearance:none;-webkit-appearance:none;display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:10px;
  width:100%;min-height:58px;margin:0;padding:8px 16px;border:0;border-radius:0;background:var(--paper);color:var(--text);
  font-size:16px;text-align:left;cursor:pointer}
.xr__h[aria-expanded="true"]{background:var(--cell)}
.xr__h[aria-expanded="true"] .xr__m > *{white-space:normal}     /* 펼친 행은 긴 이름도 끝까지 */
.xr__no{font-size:22px;font-weight:850;line-height:1;letter-spacing:-.02em;color:var(--deep);font-variant-numeric:tabular-nums}
.xr__m{display:flex;flex-direction:column;min-width:0}
.xr__m b{font-size:16px;font-weight:750;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xr__m small{font-size:13px;font-weight:550;line-height:1.35;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xr__ph{font-size:14px;font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap}
.xr__d{display:grid;grid-template-columns:5.4em minmax(0,1fr);gap:4px 10px;margin:0;padding:2px 16px 12px 74px;
  background:var(--cell);font-size:14px;line-height:1.45}
.xr__d dt{font-weight:650;color:var(--muted)}
.xr__d dd{margin:0;font-weight:560;overflow-wrap:anywhere}

@media (prefers-reduced-motion:no-preference){
  .cell,.opt span,.lang button,.more{transition:background-color .12s ease,border-color .12s ease,color .12s ease,box-shadow .12s ease}
}
@media (min-width:481px){
  body{padding:16px 0}
  .band h1{font-size:23px}
  .dock{background:transparent;border-top:0}
  .dock__in{background:var(--paper);border-top:2px solid var(--forest);box-shadow:0 0 0 1px rgba(13,61,34,.08)}
}