/* 서비스 전용 스타일 (로그인 게이트·동기화 표시) — 파일럿에서 복사해오지 않는 파일.
   디자인 문법은 style.css와 동일: 이화그린 단일색, 직각, 조선일보명조. */

/* ── 파일럿 전용 메뉴 가리기 ──
   '내보내기'는 파일 하나로 묶어 검토자에게 보내는 파일럿 기능. 서비스에서는 학생 제출이
   시트로 자동 동기화되므로 학생·게스트에겐 감추고, 개발단·관리자(body.svc-pilot)만 본다. */
#nav a[href="#/export"] { display: none; }
body.svc-pilot #nav a[href="#/export"] { display: inline-block; }

/* ── 상단바 로그인 (게스트는 콘텐츠를 둘러보다 여기서 로그인) ── */
.svc-login { display: flex; align-items: center; gap: 6px; margin-left: 10px; }
.svc-login input {
  width: 108px; padding: 6px 9px; font-family: inherit; font-size: 13px;
  border: 1px solid var(--line, rgba(0,70,42,.45)); border-radius: 0;
  background: var(--paper-white, #fff); color: var(--ink, #00462a); outline: none;
}
.svc-login input:focus { border-color: var(--ewha, #00462a); }
.svc-login button {
  padding: 6px 12px; font-family: inherit; font-size: 13px; font-weight: 600;
  letter-spacing: .03em; border-radius: 0; cursor: pointer; white-space: nowrap;
  background: var(--ewha, #00462a); color: var(--paper, #f3eee1);
  border: 1px solid var(--ewha, #00462a);
}
.svc-login button:disabled { opacity: .55; cursor: default; }
@media (max-width: 480px) {
  .svc-login { margin-left: 0; order: 2; width: 100%; }
  .svc-login input { flex: 1; width: auto; min-width: 0; font-size: 16px; }
  .svc-login button { padding: 9px 13px; font-size: 14px; min-height: 40px; }   /* 손가락 표적 (2026-09-04 전수조사: 27px 였다) */
  /* 관리자는 휴대폰에서도 🛠 관리에 들어갈 수 있어야 한다 — style.css 가 .mob-btn 을 480 아래에서 숨기는데,
     이 버튼만 되살린다 (📐 화면 검수·🔍 검사기는 휴대폰에서 쓸 일이 없다) */
  #admin-toggle { display: inline-block; padding: 7px 10px; min-height: 36px; }
}

/* 검수용 기기 프레임(iframe) 안에서는 관리자 버튼들을 숨긴다 — 학생이 보는 화면 그대로 보려고 */
body.msim #admin-toggle, body.msim #svc-rwd-btn { display: none; }

/* 로그인된 사용자의 기록을 받아오는 잠깐의 대기 화면 */
.svc-booting {
  position: fixed; inset: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper, #f3eee1);
  font-size: 14px; color: var(--ink-soft, rgba(0,70,42,.78)); letter-spacing: .04em;
}

.svc-err { margin-top: 12px; font-size: 13px; color: var(--ink, #00462a);
  background: var(--soft, rgba(0,70,42,.08)); padding: 8px 10px; display: none; }
.svc-err.show { display: block; }
.svc-loading { font-size: 14px; color: var(--ink-soft, rgba(0,70,42,.78)); letter-spacing: .04em; }

/* ── 상단 학생 칩 (로그인 뒤 헤더에 붙는다) ── */
.svc-chip {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--ink-soft, rgba(0,70,42,.78)); white-space: nowrap;
}
.svc-chip button {
  font-size: 11.5px; padding: 3px 8px; border-radius: 0;
  border: 1px solid var(--line-soft, rgba(0,70,42,.25));
  background: transparent; color: var(--ink-soft, rgba(0,70,42,.78));
}
.svc-chip button:hover { border-color: var(--ewha, #00462a); color: var(--ewha, #00462a); }
@media (max-width: 900px) {
  .svc-chip button { padding: 7px 11px; font-size: 12px; min-height: 36px; }   /* 손가락 표적 (2026-09-04 전수조사: 28px 였다) */
}

.svc-chip .svc-role {
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  background: var(--ewha, #00462a); color: var(--paper, #f3eee1);
  padding: 1px 6px; margin-left: 4px;
}

/* ── 관리자 콘솔 ── */
.svc-console {
  position: fixed; inset: 0; z-index: 950; display: none;
  background: rgba(0, 70, 42, .25); overflow-y: auto; padding: 40px 16px;
}
.svc-console-box {
  max-width: 900px; margin: 0 auto;
  background: var(--paper, #f3eee1); border: 1px solid var(--line, rgba(0,70,42,.45));
  padding: 22px 24px 26px;
}
.svc-console-head { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.svc-console-head h2 { font-size: 17px; }
.svc-console .btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.svc-btn {
  display: inline-block; padding: 7px 14px; font-family: inherit; font-size: 13.5px;
  font-weight: 600; letter-spacing: .03em; border-radius: 0; text-decoration: none;
  background: var(--ewha, #00462a); color: var(--paper, #f3eee1);
  border: 1px solid var(--ewha, #00462a); cursor: pointer;
}
.svc-btn.ghost { background: transparent; color: var(--ewha, #00462a); }
.svc-btn.small { padding: 3px 9px; font-size: 12px; }
.svc-table-wrap { overflow-x: auto; border: 1px solid var(--line-soft, rgba(0,70,42,.25)); }
.svc-table { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--field, #faf7ee); }
.svc-table th, .svc-table td { padding: 7px 10px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line-soft, rgba(0,70,42,.25)); }
.svc-table th { font-size: 12px; background: var(--soft, rgba(0,70,42,.08)); white-space: nowrap; }
.svc-table td { white-space: nowrap; }
.svc-cell-btns { display: flex; gap: 6px; }
.svc-warn { color: var(--ink, #00462a); background: var(--mark, rgba(0,70,42,.12));
  font-size: 11.5px; padding: 1px 6px; margin-right: 6px; }
.svc-form {
  margin-top: 16px; border: 1px solid var(--line, rgba(0,70,42,.45));
  background: var(--field, #faf7ee); padding: 16px 18px; max-width: 420px;
}
.svc-form h3 { font-size: 15px; margin-bottom: 10px; }
.svc-form label { display: block; font-size: 12.5px; margin-bottom: 10px;
  color: var(--ink-soft, rgba(0,70,42,.78)); }
.svc-form input, .svc-form select {
  display: block; width: 100%; margin-top: 3px; padding: 7px 9px;
  font-family: inherit; font-size: 14px; border-radius: 0;
  border: 1px solid var(--line, rgba(0,70,42,.45)); background: var(--paper-white, #fff);
  color: var(--ink, #00462a);
}
.svc-form input:disabled { background: var(--soft, rgba(0,70,42,.08)); }
.svc-form .svc-err { margin-top: 10px; }

/* ── 반응형 검수기 (관리자 콘솔에서 연다) ──
   기기 프레임(iframe)을 실제 해상도로 띄우고 화면에 맞게 축소해 보여준다. */
.svc-rwd {
  position: fixed; inset: 0; z-index: 960; display: none; flex-direction: column;
  background: var(--paper, #f3eee1);
}
.svc-rwd.open { display: flex; }
.svc-rwd-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 16px; border-bottom: 1px solid var(--line, rgba(0,70,42,.45));
  background: var(--field, #faf7ee);
}
.svc-rwd-bar > b { font-size: 15px; margin-right: 4px; }
.svc-rwd-devs { display: flex; gap: 6px; flex-wrap: wrap; }
.svc-rwd-devs button {
  padding: 5px 11px; font-family: inherit; font-size: 12.5px; border-radius: 0;
  border: 1px solid var(--line, rgba(0,70,42,.45)); background: transparent;
  color: var(--ink, #00462a); cursor: pointer; white-space: nowrap;
}
.svc-rwd-devs button.on {
  background: var(--ewha, #00462a); color: var(--paper, #f3eee1);
  border-color: var(--ewha, #00462a); font-weight: 600;
}
.svc-rwd-dim { font-size: 12px; color: var(--ink-soft, rgba(0,70,42,.78)); margin-left: auto; white-space: nowrap; }
.svc-rwd-stage {
  flex: 1; min-height: 0; overflow: auto;
  display: flex; align-items: flex-start; justify-content: center; padding: 18px;
  background: rgba(0,70,42,.06);
}
/* 테두리는 홀더에 — iframe에 직접 주면 뷰포트가 2px 좁아져 기기 해상도가 어긋난다 */
.svc-rwd-holder {
  flex: none; position: relative;
  border: 1px solid var(--line, rgba(0,70,42,.45));
  box-shadow: 0 10px 34px rgba(0,70,42,.18);
}
.svc-rwd-holder iframe {
  border: none; background: var(--paper, #f3eee1);
  transform-origin: top left; display: block;
}
.svc-rwd-fb {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 16px; border-top: 1px solid var(--line, rgba(0,70,42,.45));
  background: var(--field, #faf7ee); font-size: 13px;
}
.svc-rwd-where { color: var(--ink-soft, rgba(0,70,42,.78)); white-space: nowrap; }
.svc-rwd-score { display: flex; gap: 4px; }
.svc-rwd-score button {
  width: 30px; height: 30px; padding: 0; font-family: inherit; font-size: 13px;
  border: 1px solid var(--line, rgba(0,70,42,.45)); background: transparent;
  color: var(--ink, #00462a); border-radius: 0; cursor: pointer;
}
.svc-rwd-score button.on {
  background: var(--ewha, #00462a); color: var(--paper, #f3eee1); border-color: var(--ewha, #00462a);
}
.svc-rwd-fb input[type="text"] {
  flex: 1; min-width: 180px; padding: 7px 10px; font-family: inherit; font-size: 13.5px;
  border: 1px solid var(--line, rgba(0,70,42,.45)); border-radius: 0;
  background: var(--paper-white, #fff); color: var(--ink, #00462a); outline: none;
}
.svc-rwd-fb input[type="text"]:focus { border-color: var(--ewha, #00462a); }
.svc-rwd-log {
  max-height: 110px; overflow-y: auto; padding: 6px 16px 10px;
  background: var(--field, #faf7ee); font-size: 12px;
  color: var(--ink-soft, rgba(0,70,42,.78));
}
.svc-rwd-log .row { padding: 3px 0; border-top: 1px dashed var(--line-soft, rgba(0,70,42,.25)); }
.svc-rwd-log .row b { color: var(--ink, #00462a); }
.svc-rwd-msg { font-size: 12.5px; color: var(--ink, #00462a); white-space: nowrap; }

/* ── 알림 배너 (피드백 도착·연결 끊김) ── */
.svc-banner {
  /* left:50% 하나만 잡으면 자리가 화면 절반으로 좁아져, 긴 안내가 반 폭에서 접힌다
     (390px 기기에서 188px·열두 줄로 실측). 양쪽을 다 잡고 fit-content로 두면
     짧은 배너는 지금 모습 그대로고 긴 배너만 92vw까지 펴진다. (2026-08-19) */
  position: fixed; left: 4vw; right: 4vw; bottom: 22px;
  width: fit-content; margin-inline: auto;
  z-index: 900; max-width: min(92vw, 480px);
  display: flex; align-items: center; gap: 12px;
  background: var(--ewha, #00462a); color: var(--paper, #f3eee1);
  padding: 11px 16px; font-size: 13.5px;
  box-shadow: 0 4px 18px rgba(0,70,42,.25);
}
.svc-banner.quiet { background: var(--field, #faf7ee); color: var(--ink, #00462a);
  border: 1px solid var(--line, rgba(0,70,42,.45)); box-shadow: none; }
.svc-banner button {
  flex: none; font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 0;
  background: var(--paper, #f3eee1); color: var(--ewha, #00462a); border: none;
}
.svc-banner.quiet button { background: var(--ewha, #00462a); color: var(--paper, #f3eee1); }
.svc-banner .svc-x { background: transparent; color: inherit; border: none;
  font-size: 14px; padding: 0 2px; font-weight: 400; }


/* == 이용 기간 (2026-08-19) ==
   결제는 웹 밖에서 받고, 여기서는 남은 날만 보여 준다.
   기간이 끝나면 자료 파일 자체가 안 나가므로(엣지 문지기), 이 스타일은 안내일 뿐이다. */
.svc-until { font-size: 11.5px; letter-spacing: .02em; white-space: nowrap;
  color: var(--ink-soft, rgba(0,70,42,.78)); }
.svc-until.none { display: none; }
.svc-until.soon { font-weight: 700; color: var(--ewha, #00462a);
  background: var(--mark, rgba(0,70,42,.12)); padding: 1px 6px; }
.svc-until.over { font-weight: 700; color: var(--paper, #f3eee1);
  background: var(--ewha, #00462a); padding: 1px 6px; }
/* 눌러는 지되 흐리게 — 눌러야 왜 안 되는지 알려 줄 수 있다(boot.js guardSubmit) */
body.svc-expired #submit, body.svc-expired #resubmit { opacity: .55; }
.svc-dim { color: var(--ink-soft, rgba(0,70,42,.55)); font-size: 12px; }

/* 체험 계정 표시 (2026-08-19) */
.svc-plan { font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  background: var(--mark, rgba(0,70,42,.12)); color: var(--ewha, #00462a);
  padding: 1px 6px; margin-right: 6px; }
.svc-inline { display: flex; align-items: center; gap: 6px; }
.svc-inline input[type=number] { width: 84px; }

/* == 기간이 끝났을 때 (2026-08-19) ==
   화면을 통째로 얼린다. 배너만 띄우고 열어 두면 학생이 계속 쓰게 되고,
   쓴 글은 서버가 안 받으니 그 기기에만 쌓인다. */
.svc-frozen-box {
  max-width: min(520px, calc(100% - 32px)); margin: 60px auto; padding: 28px 26px;
  background: var(--field, #faf7ee); border: 1px solid var(--line, rgba(0,70,42,.45));
  text-align: center;
}
.svc-frozen-box h2 { font-size: 19px; margin: 0 0 12px; }
.svc-frozen-box p { font-size: 14px; line-height: 1.75; margin: 0 0 10px;
  color: var(--ink-soft, rgba(0,70,42,.78)); }
.svc-frozen-box button {
  margin-top: 14px; padding: 8px 18px; font-family: inherit; font-size: 13.5px;
  font-weight: 600; border-radius: 0; cursor: pointer;
  background: var(--ewha, #00462a); color: var(--paper, #f3eee1); border: 1px solid var(--ewha, #00462a);
}
/* 앞으로 나아가려 할 때만 덮는다 — 읽는 화면은 그대로 둔다 */
.svc-lock-wrap {
  position: fixed; inset: 0; z-index: 960; display: flex;
  align-items: center; justify-content: center; padding: 16px;
  background: rgba(0, 70, 42, .3);
}
.svc-lock-wrap .svc-frozen-box { margin: 0; }


/* ══ 관리 한 판 (2026-09-04) ══
   📋 학생 명부와 🗝 콘솔을 #/admin 한 화면으로 합쳤다. app.js 가 그리는 명부 줄 아래에
   admin.js 가 계정 줄(.rr-acct)을 끼우고, 위에는 도구 줄(.svc-admin-tools)을 둔다. */
.svc-admin-tools {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--line, rgba(0,70,42,.45));
  background: var(--field, #faf7ee);
}
.svc-admin-tools .svc-note { margin-left: auto; font-size: 12px; color: var(--ink-soft, rgba(0,70,42,.78)); white-space: nowrap; }
.svc-admin-tools .svc-note.busy::before { content: "↻ "; }
/* 계정 줄 — 진도 줄 아래, 같은 테두리 안 */
.rr-acct {
  display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap;
  padding: 8px 20px 10px; font-size: 12.5px; color: var(--ink-soft, rgba(0,70,42,.78));
  border-top: 1px dashed var(--line-soft, rgba(0,70,42,.25)); background: var(--field, #faf7ee);
}
.rr-acct .svc-cell-btns { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.rr-acct .svc-btn.small { padding: 3px 10px; }
.rr-acct .svc-warn { margin-right: 0; }
/* 관리자 계정 목록 — 명부 맨 아래, 진도 없이 계정만 */
.svc-admins { margin-top: 26px; border-top: 1px solid var(--line, rgba(0,70,42,.45)); padding-top: 14px; }
.svc-admins h2 { font-size: 15px; margin-bottom: 8px; }
.svc-admins .svc-table-wrap { border: 1px solid var(--line-soft, rgba(0,70,42,.25)); }
/* 계정 폼은 도구 줄 바로 아래 (#svc-form-slot) */
#svc-form-slot .svc-form { margin: 0 0 16px; max-width: 460px; }
/* 명부를 못 받았을 때 */
.svc-home-err { border: 1px solid var(--line, rgba(0,70,42,.45)); padding: 18px 20px; background: var(--field, #faf7ee); }
.svc-home-err p { margin: 0 0 10px; font-size: 14px; line-height: 1.7; }
@media (max-width: 480px) {
  .rr-acct { padding: 8px 14px 10px; }
  .rr-acct .svc-cell-btns { margin-left: 0; width: 100%; }
  .svc-admin-tools .svc-note { margin-left: 0; white-space: normal; }
}

/* 손가락 표적 (2026-09-04 전수조사) — 관리 화면의 작은 버튼이 휴대폰에서 20~25px 였다 */
@media (hover: none) {
  .svc-btn.small { min-height: 36px; padding: 6px 12px; }
  .rr-acct { gap: 8px 12px; }
}

/* ── 이용 기간 한눈에 (2026-09-04) — 명부 맨 위 표 ── */
.svc-period { margin: 0 0 18px; padding: 12px 14px 10px; border: 1px solid var(--line, rgba(0,70,42,.45)); background: var(--field, #faf7ee); }
.svc-period h2 { font-size: 14.5px; margin: 0 0 8px; }
.svc-period .svc-table td { white-space: nowrap; }
.svc-period a { text-decoration: none; }
.svc-period a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.svc-period tr.over .svc-left { font-weight: 700; color: var(--paper, #f3eee1); background: var(--ewha, #00462a); }
.svc-period tr.soon .svc-left { font-weight: 700; background: var(--mark, rgba(0,70,42,.12)); }
.svc-period-free { margin: 8px 0 0; font-size: 12.5px; line-height: 1.6; }

/* ── 기간 손잡이: N일 더하기 · 이 날까지 (2026-09-04) ── */
.svc-ext { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.svc-ext input { padding: 4px 6px; font-family: inherit; font-size: 13px; border: 1px solid var(--line, rgba(0,70,42,.45));
  border-radius: 0; background: var(--paper-white, #fff); color: var(--ink, #00462a); }
.svc-ext .svc-ext-days { width: 58px; text-align: right; }
.svc-ext .svc-ext-date { width: 138px; }
.svc-form-inline .svc-form { margin: 0 20px 14px; max-width: 460px; }
@media (max-width: 480px) {
  .svc-ext input { font-size: 16px; min-height: 36px; }
  .svc-ext .svc-ext-days { width: 64px; }
  .svc-form-inline .svc-form { margin: 0 12px 12px; }
}

/* ══ 폰 (2026-09-07 전수조사) ══ */
@media (max-width: 480px) {
  .svc-login { order: 2; }
  .svc-login input { min-height: 38px; }
  .svc-chip { order: 2; flex: 1 1 auto; min-width: 0; gap: 6px; }
  #admin-toggle { order: 2; }
  /* 이용 기간 표: 5번째 칸(연장 장치)은 폰에서 숨긴다 — 표가 564px 로 벌어져 옆으로 밀렸다. 같은 장치가 학생 칸마다 있다 */
  .svc-period th:last-child, .svc-period td.svc-cell-btns { display: none; }
  .svc-period a { display: inline-block; padding: 6px 0; }
  .svc-ext input { font-size: 16px; }
}

/* ══ 아이폰 안전 영역 (2026-09-07) — 붙박이 요소는 홈 표시줄·노치를 피한다 ══ */
.svc-banner { bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }
.svc-console { padding-top: calc(40px + env(safe-area-inset-top, 0px)); padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
.svc-rwd-bar { padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
.svc-lock-wrap { padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
.svc-booting { padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); }