/* 서버 연결 칸: 들어오기(반 확인·비밀 그림·내 마을 열쇠·이어 하기)와 탐험 일지의 연결 칸.
   app.css의 풍경 위 크림 종이·알약·단추를 그대로 쓰고 자리와 크기만 잡는다. 폭 전체를 쓰고, 넓으면 종이 안에서 칸을 나눈다. */

/* 잠깐 떴다 사라지는 알림(보내기 줄 「다른 기기에서 한 기록을 불러왔어요」, 들어오기 「하던 ○○ 마을을 불러왔어요」).
   모양은 map.css의 .pill, 모든 화면 위에 뜨고 누름을 막지 않는다. */
p.sync-note {
  position: fixed; z-index: 60; left: 50%; top: calc(12px + env(safe-area-inset-top, 0px)); transform: translateX(-50%);
  /* 글 길이만큼(left 50%에서 남은 반쪽 폭에 갇혀 일찍 줄바꿈하지 않게) */
  width: max-content; max-width: calc(100% - 32px); margin: 0; text-align: center; pointer-events: none;
  white-space: pre-line; /* 두 문장 알림(연결이 풀렸어요)은 한 문장씩 한 줄 */
}

/* 서버 글·열쇠 안내: 한 문장씩 한 줄(entry-text.js sentenceLines, 폰에서 문장 가운데가 끊기지 않게) */
.warn.sentences, .key-note.sentences { white-space: pre-line; }

/* 번호·열쇠 알약(비밀 그림 위) */
.welcome .seat { align-self: center; margin: 0; font-size: clamp(18px, 2.2vmin, 24px); }

/* 비밀 그림 판: 누른 차례 두 칸 + 그림 단추 아홉(3×3, 2026-10-21). 폰에서도 판이 한 화면에 다 보이게 그림을 작게 잡는다 */
.pic-pad { display: grid; gap: 16px; text-align: center; }
.pic-top { display: grid; gap: 10px; justify-items: center; align-content: center; }
.pic-title { font-size: clamp(24px, 3.2vmin, 36px); line-height: 1.3; }
.pic-hint { color: var(--sub); max-width: 36ch; }
.pic-slots { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 4px; }
.pic-slot {
  width: clamp(64px, 9vmin, 92px); aspect-ratio: 1; display: grid; place-items: center;
  border: 2px dashed var(--line); border-radius: 22px; background: color-mix(in srgb, var(--paper) 70%, transparent);
}
.pic-slot b { font-weight: normal; font-size: 1.3em; color: var(--sub); }
.pic-slot.filled { border-style: solid; background: var(--paper); box-shadow: 0 3px 0 #4a3b3026; }
.pic-slot img { width: 82%; height: 82%; object-fit: contain; }
.welcome .pic-slots .pic-clear { margin: 0 0 0 4px; }
.pic-pad[data-confirm] .pic-hint { min-height: 3em; } /* 확인 단계로 넘어가도 그림 단추가 움직이지 않게(두 줄 자리) */
.pic-say { min-height: 1.5em; white-space: pre-line; }
.pic-say.warn-text { color: var(--bad); }
.welcome .pic-again { justify-self: center; min-width: 120px; }
.pic-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.paper-screen .pic-grid .pic {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0;
  padding: 8px 4px 6px; background: var(--paper); border-radius: 22px; font-size: clamp(17px, 2.1vmin, 24px); line-height: 1.2;
}
.pic-grid .pic img { width: min(100%, 76px); aspect-ratio: 1; object-fit: contain; }
.pic-grid .pic:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #4a3b3026; }
.pic-pad[data-busy] .pic img, .pic-pad[data-busy] .pic-name { opacity: .5; }

/* 내 마을 열쇠: 글자 여섯을 큰 칸에 + 그림 둘 */
.welcome.paper-screen .key-title { font-size: clamp(30px, 4.6vmin, 52px); }
.key-card {
  display: grid; gap: 16px; justify-items: center; padding: clamp(16px, 2.6vmin, 28px);
  border: 2px dashed var(--line); border-radius: 24px; background: var(--paper);
}
.key-letters { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(5px, 1vmin, 12px); width: min(100%, 560px); }
.key-letters span {
  display: grid; place-items: center; aspect-ratio: 5 / 6; min-width: 0;
  font-size: clamp(28px, 7.4vw, 58px); line-height: 1; letter-spacing: 0;
  background: var(--cream); border: 2px solid var(--line); border-radius: 14px; box-shadow: 0 3px 0 #4a3b3026;
}
.pic-row { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.pic-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 16px 4px 6px;
  background: var(--cream); border: 2px solid var(--line); border-radius: 999px; box-shadow: 0 3px 0 #4a3b3026;
}
.pic-chip b {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--sage); font-weight: normal; font-size: 15px; line-height: 1;
}
.pic-chip img { width: clamp(40px, 6vmin, 60px); aspect-ratio: 1; object-fit: contain; }
.pic-chip .pic-name { font-size: clamp(18px, 2.2vmin, 24px); }
.key-note { font-size: clamp(17px, 2.1vmin, 22px); line-height: 1.55; }

/* 하던 마을 이어 하기 */
.continue-hint { color: var(--sub); }
.paper-screen .continue-ways .way {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0;
  min-height: clamp(96px, 15vmin, 150px); padding: 12px 8px; background: var(--paper);
}
.continue-ways .way strong { font-weight: normal; font-size: clamp(22px, 3vmin, 34px); line-height: 1.2; }
.continue-ways .way small { color: var(--sub); font-size: clamp(14px, 1.8vmin, 18px); line-height: 1.3; }

/* 열쇠 글자 넣기: 가운데 큰 글자 */
.key-entry { display: grid; gap: var(--gap); }
/* 빈 알림 칸(.errs, aria-live)은 칸 사이 틈을 하나 더 만들지 않되 화면 읽개에는 남긴다(staff.css .t-msg:empty와 같은 까닭:
   display:none이면 글이 들어와도 읽어 주지 않을 수 있다). 아래 900px 규칙의 폭보다 앞서게 .welcome부터 적는다 */
.welcome .key-entry .errs:empty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.welcome .key-entry .field { align-items: center; text-align: center; gap: 12px; } /* 초점 테두리(밖으로 7px)가 이름·안내 글에 닿지 않게 */
.welcome .key-entry .key-input {
  min-height: 64px; font-size: clamp(30px, 4.4vmin, 44px); letter-spacing: .32em; text-align: center;
  padding-left: calc(.7em + .32em); /* 끝 글자 뒤 자간만큼 오른쪽으로(가운데가 왼쪽으로 쏠리지 않게) */
}
/* 초점 테두리는 같은 화면 단추(app.css .paper-screen button:focus-visible)와 같게(브라우저의 검은 테두리 대신) */
.welcome .key-entry .key-input:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }

/* 반 없이 시작: 열쇠 만드는 동안·못 만들었을 때 */
.key-make { display: grid; gap: 10px; justify-items: center; }
.key-make:empty { display: none; }
.key-make .warn { width: 100%; }
.key-make-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.key-make-actions button { min-width: 120px; }
.welcome .grades[aria-busy="true"] button:not(.primary) { opacity: .5; }

@media (min-width: 900px) {
  .welcome[data-step="pics"] .welcome-panel, .welcome[data-step="key"] .welcome-panel { max-width: 1040px; }
  /* 넓은 들어오기 종이에서만 두 칸(탐험 일지 칸 안의 picPad는 제 모양을 지킨다) */
  .welcome .pic-pad { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: 24px 40px; }
  .welcome .pic-grid { gap: 14px; }
  .welcome .pic-grid .pic img { width: min(100%, 104px); }
  .welcome[data-step="key"] .welcome-panel { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; gap: 20px 36px; }
  .welcome[data-step="key"] .key-title { grid-column: 1 / -1; }
  .welcome[data-step="key"] .key-card { grid-row: 2 / 4; }
  .welcome[data-step="key"] .key-note { text-align: left; align-self: end; }
  .welcome[data-step="key"] .go { align-self: start; }
  .welcome .key-entry .key-input { width: min(100%, 420px); }
  .welcome .key-entry .go, .welcome .key-entry .errs { justify-self: center; width: min(100%, 420px); }
}

/* ── 탐험 일지 「내 자리」(record-link.js) ──
   오른쪽 맨 아래(폰은 맨 아래). 끝낸 곳·집중 훈련과 같은 제목과 종이 위 줄 글, 단추는 [지도로]와 같은 크림 알약.
   새 색 덩어리 없이 일지의 잉크·초록·갈색만 쓴다. */
.record-link { order: 6; display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px dotted #b29875; outline: none; }
.record-link h2 { color: #687b56; font-size: clamp(23px, 3vmin, 32px); font-weight: normal; line-height: 1.15; }
.record-link-lines { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.record-link-line { font-size: clamp(16px, 2vmin, 22px); line-height: 1.35; }
.record-link-line[data-line="seat"] { font-size: clamp(21px, 2.7vmin, 30px); line-height: 1.2; }
.record-link-line[data-line="local"], .record-link-line[data-line="sent"] { color: var(--sub); }
.record-link-line[data-line="unsent"], .record-link-line[data-line="stuck"], .record-link-line[data-line="reset"] { color: #a75e32; }
.record-link-line[data-line="reset"] { white-space: pre-line; } /* 반 그림을 다시 정할 자리(OOS 3): 두 문장을 한 문장씩 한 줄 */
/* 열쇠: 글자 여섯 칸 + 그림 둘을 작게(들어오기 열쇠 칸과 같은 모양). 이름은 칸 제목(「내 마을 열쇠」) */
.record-link-key { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.record-link .key-card { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 0; border: 0; background: none; }
.record-link .key-letters { display: grid; width: auto; grid-template-columns: repeat(6, clamp(32px, 4.4vmin, 42px)); gap: 5px; }
.record-link .key-letters span { font-size: clamp(21px, 2.9vmin, 28px); border-radius: 10px; box-shadow: 0 2px 0 #4a3b3026; }
.record-link .pic-row { gap: 8px; justify-content: flex-start; }
.record-link .pic-chip { padding: 2px 12px 2px 4px; box-shadow: 0 2px 0 #4a3b3026; }
.record-link .pic-chip b { width: 22px; height: 22px; font-size: 13px; }
.record-link .pic-chip img { width: clamp(30px, 4vmin, 40px); }
.record-link .pic-chip .pic-name { font-size: clamp(15px, 1.9vmin, 19px); }
.record-link-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.record-link-actions button {
  min-height: 44px; padding: 4px 18px; border-radius: 999px; background: var(--cream);
  font-size: clamp(16px, 2vmin, 20px); line-height: 1.2; box-shadow: 0 2px 0 #8a6a5526;
}
.record-link-actions [data-action="leave"] { background: transparent; box-shadow: none; color: var(--sub); }

/* 내 자리 시트(반에 들어가기·내 마을 열쇠·다른 사람이에요): 지도 아래 창(map.css .sheet) 그대로.
   안의 반 칸·그림 판·열쇠는 들어오기 종이와 같은 모양(들어오기 규칙은 .welcome에만 걸려 있어 여기서 다시 잡는다). */
.sheet.link-sheet { max-height: 94dvh; text-align: center; } /* 그림 판이 폰 한 화면에 다 보이게(지도 창 86dvh보다 조금 높게) */
.link-sheet-body { display: flex; flex-direction: column; gap: 12px; }
.link-sheet-body > button { align-self: center; min-width: 160px; } /* 혼자 있는 [확인]·[다시]는 가운데 알약 */
.link-sheet p { text-wrap: balance; }
.link-sheet .seat { align-self: center; margin: 0; font-size: clamp(18px, 2.2vmin, 24px); }
.link-sheet .welcome-class-layout { text-align: left; }
.link-sheet .field { min-width: 0; }
.link-sheet .field small { font-size: 14px; }
.link-sheet .field input { min-height: 52px; }
.link-sheet .grades button { font-size: clamp(20px, 2.5vmin, 28px); padding: 8px; border-radius: 999px; box-shadow: 0 3px 0 #4a3b3026; }
.link-sheet .grades button.primary { border: 2px solid var(--line); }
.link-sheet .welcome-class-layout .go { min-height: 56px; font-size: 1.3em; }
.link-sheet .pic-slots .pic-clear { margin: 0 0 0 4px; }
.link-sheet .pic-grid .pic {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0;
  padding: 6px 4px 5px; background: var(--paper); border-radius: 22px; font-size: clamp(17px, 2.1vmin, 24px); line-height: 1.2;
  box-shadow: 0 3px 0 #4a3b3026;
}
.link-sheet .pic-grid .pic img { width: min(100%, 52px); }
.link-sheet .pic-grid { gap: 8px; }
.link-sheet .pic-slot { width: clamp(56px, 8vmin, 84px); } /* 시트는 반 칸 알약·제목이 위에 있어 그림 판을 조금 더 낮게(인터넷 글과 [다시]가 떠도 스크롤 없이) */
.link-sheet .pic-pad { gap: 12px; }
.link-sheet .pic-top { gap: 8px; }
.link-sheet .pic-title { font-size: clamp(22px, 3vmin, 32px); }
.link-sheet .pic-again { justify-self: center; min-width: 120px; }
.link-sheet-links { display: flex; justify-content: center; }
/* 글 단추(번호 다시 넣기·처음으로·반 코드 넣기로 돌아가기 등): 누르는 자리는 44px 이상(모양은 그대로) */
.welcome button.link, .link-sheet button.link { min-height: 44px; }
.link-sheet-links button.link { padding: 0 16px; }
.link-sheet .key-card { padding: 14px 10px; }
.link-sheet .pic-row { gap: 8px; }
.link-sheet .pic-chip { padding: 3px 12px 3px 5px; }
.link-sheet .pic-chip img { width: 40px; }
.link-sheet .pic-chip .pic-name { font-size: 18px; }
.link-sheet .leave-note, .link-sheet .key-note { font-size: clamp(17px, 2.1vmin, 22px); line-height: 1.55; }
.link-sheet .warn { text-align: left; }
.link-sheet-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.link-sheet-actions button { min-width: 120px; }
.link-sheet .sentences { white-space: pre-line; }
.link-sheet button:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

@media (min-aspect-ratio: 1/1), (min-width: 760px) {
  /* 넓으면 오른쪽 맨 아래를 낮게: 첫 줄에 제목(왼쪽)과 단추(오른쪽), 그 아래 글이 옆으로 이어진다
     (「5학년 3반 12번 · 기록을 보냈어요」, 열쇠 칸 옆에 보낸 상태). 기록이 많으면 일지가 촘촘해지고(record.js dense-record),
     그래도 넘치면 오른쪽 쪽만 스크롤(잘려 숨지 않게) */
  .record-link { flex: none; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 16px; padding-top: clamp(8px, 1.4vmin, 14px); }
  .record-link h2 { grid-area: 1 / 1; white-space: nowrap; } /* 제목은 한 줄, 자리가 모자라면 단추가 오른쪽에서 줄을 바꾼다 */
  .record-link-actions { grid-area: 1 / 2; justify-content: flex-end; }
  .record-link-lines { grid-area: 2 / 1 / 3 / 3; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
  .record-link .key-card { gap: 6px 12px; }
  .with-link.dense-record .record-right { gap: 6px; }
  .with-link.dense-record .record-stats { padding-block: 2px; }
  .with-link.dense-record .record-places { gap: 3px; }
  .with-link.dense-record .drill-lines { row-gap: 2px; }
  .record-book.with-link .record-right { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #b9a07a88 transparent; }
  /* 촘촘한 일지(기록이 많을 때): 끝낸 곳 발자국을 이름 옆에, 제목·간격을 조금 더 작게 */
  .with-link.dense-record .record-place-line { display: flex; align-items: center; gap: 10px; }
  .with-link.dense-record .record-place-label { flex: 1 1 auto; min-width: 0; }
  .with-link.dense-record .place-stamps { flex: none; margin-top: 0; }
  .with-link.dense-record .record-link h2 { font-size: 23px; }
  .with-link.dense-record .record-link-line { font-size: 15px; }
  .with-link.dense-record .record-link-line[data-line="seat"] { font-size: 21px; }
  .with-link.dense-record .record-link .key-letters { grid-template-columns: repeat(6, 30px); gap: 4px; }
  .with-link.dense-record .record-link .key-letters span { font-size: 20px; border-radius: 8px; }
  .with-link.dense-record .record-link .pic-chip img { width: 28px; }
  .with-link.dense-record .record-link .pic-chip .pic-name { font-size: 15px; }
  .sheet.attach-sheet, .sheet.seat-pics-sheet { width: min(980px, 94vw); }
}
@media (min-width: 900px) {
  /* 넓은 반에 들어가기 시트: 들어오기 넓은 종이처럼 그림 판을 두 칸으로 */
  .link-sheet .pic-pad { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: 20px 36px; }
  .link-sheet .pic-grid { gap: 10px; }
  .link-sheet .pic-grid .pic img { width: min(100%, 92px); }
  .link-sheet .class-code input { width: 11ch; }
  .link-sheet .class-numbers input { width: 7ch; }
  .link-sheet .welcome-class-layout .grades button { min-height: 72px; }
}

/* ── 아이 첫 화면의 MattoLAB 글자(app/lab.js, 들어오기 첫 단계에만. 한 판에는 없다) ──
   누르면 종이 창(생김새는 lab.css, 알맹이 구조 · 크기 · 브랜드 색은 assets/brand/brand.css 사본, 고치지 않는다). 여기서는 자리와 이 쪽 색만:
   글자는 첫 화면(.paper-screen) 위쪽 오른쪽, 풍경 위에서 읽히게 개인정보 링크와 같은 옅은 크림 띠. 종이는 이 쪽 종이색 · 먹 선 */
.welcome > .welcome-lab {
  position: absolute; top: 12px; right: 12px; z-index: 2; padding: 0 18px;
  background: color-mix(in srgb, var(--cream) 90%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--line) 35%, transparent);
}
.sheet.lab-sheet { --lab-paper: var(--paper); --lab-rule: var(--line); --lab-text: var(--ink); }
.lab-sheet .lab { --lab-ink: var(--ink); --lab-dim: var(--sub); }

/* 맨 아래 개인정보 안내 링크(Ruling R39, app/lab.js privacyLink). 들어오기 종이와 같은 왼쪽 선, 풍경 위에서 읽히게 크림 띠.
   누르는 칸은 44px. 같은 줄 오른쪽 끝에 선생님 로그인(2026-10-26), 같은 크림 띠. */
.welcome .privacy-line { width: 100%; margin: 8px 0 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.welcome :is(.privacy-link, .teacher-link) {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  color: var(--ink); font-size: 16px; text-decoration: underline; text-underline-offset: 3px;
  background: color-mix(in srgb, var(--cream) 90%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--line) 35%, transparent); border-radius: 22px;
}
@media (min-width: 760px) {
  .welcome[data-step="village"] { gap: 10px; padding-block: 12px; }
  .welcome[data-step="village"] .welcome-panel { gap: 12px; padding: 20px; }
  .welcome[data-step="village"] .village-card img { width: min(100%, 20dvh); }
  .welcome .privacy-line { max-width: 760px; }
}