/* 시너지언 빌리지 — 공용 토큰과 부품.
   제안서와 같은 팔레트를 쓴다. 학교에 보여 준 문서와 실제 화면이 같은 세계여야 한다.
   ⚠️명조·모노를 한글에 물리지 않는다 — 기기에 따라 자간이 벌어진다(제안서에서 실렌더로 확인). */
:root{
  /* 작업대 — 매주 열어 조작하는 도구다. 요약이 먼저 오고 상태는 색과 형태로 걸린다.
     ⚠️크림+테라코타+명조는 의도적으로 버렸다(AI 기본값으로 지목되는 조합). */
  --ink:#171A1E; --sub:#5A646D; --faint:#6A7278;   /* 3.05 였다. 흰 4.89 · 연회색칸 4.51 — 두 바탕 다 넘긴다 */
  --line:#E1E7EB; --paper:#FFFFFF; --box:#F3F6F8; --white:#FFFFFF;
  --tint:#0C6B70;                 /* 액센트 하나 — 지금 자리와 누를 것에만 */
  --warm:#A9670B;                 /* 상태: 아직 ⚠️액센트가 아니다. 3.88 이라 한 단 어둡게 */
  --good:#1C7A4E;                 /* 상태: 마침 */
  --accent:var(--tint);           /* 링크 */
  --bad:#B3261E;
  --r:8px; --r-sm:6px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--paper); color:var(--ink);
  font-family:-apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Malgun Gothic", sans-serif;
  font-size:15.5px; line-height:1.7; letter-spacing:-.01em;
  -webkit-text-size-adjust:100%;
  /* ⚠️한국어는 이걸 안 걸면 어절 한가운데서 잘린다("계정도 비밀번호도 없어/요."). 폰에서 특히 잦다.
     overflow-wrap 과 한 쌍이다 — keep-all 만 두면 긴 주소나 코드가 칸을 뚫고 나간다. */
  word-break:keep-all; overflow-wrap:anywhere;
}
a{color:var(--accent)}
.wrap{max-width:880px; margin:0 auto; padding:0 20px 72px}
/* ★넓은 화면에서 880px 에 갇혀 있었다 — 1440px 로 열어도 높이가 900px 일 때와 똑같았다.
   가로가 남는데 세로로만 길어지는 건 화면을 안 쓰는 것이다.
   ⚠️본문 글줄까지 늘리지는 않는다. 15.5px 로 1180px 을 채우면 한 줄이 90자를 넘어 읽기 나빠진다.
     넓히는 것은 목록·카드가 나란히 설 자리이고, 읽는 글(.lead)은 아래에서 따로 묶는다. */
@media (min-width:1080px){
  .wrap{max-width:1180px}
  .wrap > .lead, .wrap > p{max-width:70ch}
}

/* 머리 */
.top{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:16px 0; border-bottom:1px solid var(--line); margin-bottom:22px;
}
.brand{font-weight:800; letter-spacing:-.03em; font-size:16px; color:var(--ink); text-decoration:none}
a.brand:hover{text-decoration:underline}
/* 지금 어디에 있나 — 브랜드 옆에 붙는다. 화면마다 h1 으로 다시 적지 않는다. */
.top .where{display:flex; align-items:baseline; gap:8px; min-width:0; padding-left:14px;
  margin-left:2px; border-left:1px solid var(--line)}
.top .where h1{font-size:15px; font-weight:800; letter-spacing:-.02em; line-height:1.4; margin:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.top .where span{font-size:12.5px; color:var(--sub); white-space:nowrap}
@media (max-width:620px){
  .top .where{padding-left:0; margin-left:0; border-left:0; flex-basis:100%; order:5}
}
.brand span{color:var(--warm)}
.top .spacer, .row .spacer{flex:1}
.who{font-size:13.5px; color:var(--sub)}

h1{font-size:25px; font-weight:800; letter-spacing:-.03em; margin:0 0 6px; line-height:1.35}
h2{font-size:17px; font-weight:800; letter-spacing:-.02em; margin:26px 0 10px}
h3{font-size:14.5px; font-weight:700; margin:0 0 6px}
p{margin:0 0 14px}
.lead{color:var(--sub); margin:0 0 18px}
.sub{color:var(--sub); font-size:13.5px}
.faint{color:var(--faint); font-size:13px}

/* 부품 */
.card{background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:16px 20px; margin:0 0 12px}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.stack{display:flex; flex-direction:column; gap:14px}

button, .btn{
  font:inherit; font-weight:700; letter-spacing:-.01em;
  background:var(--tint); color:#fff; border:1px solid var(--tint);
  border-radius:var(--r-sm); padding:9px 16px; cursor:pointer;
}
button:hover{opacity:.88}
button:disabled{opacity:.4; cursor:default}
/* ⚠️button 만 걸어 두면 <a class="btn ghost"> 가 주버튼처럼 그려진다 — 실제로 그랬다 */
button.ghost, .btn.ghost{background:transparent; color:var(--tint); border-color:var(--line)}
/* 지금 보고 있는 쪽 — 눌러 둔 모양이지 눌릴 것은 아니다 */
.btn[aria-current]{cursor:default}
button.quiet{background:transparent; color:var(--sub); border-color:transparent; padding:6px 8px; font-weight:600}
/* 다른 쪽으로 가는 문 — 버튼이든 링크든 같은 모양으로 말한다(탭·저장 버튼과 안 헷갈리게) */
.peek{color:var(--tint); font-weight:700; text-decoration:none; white-space:nowrap}
.peek::after{content:' →'}
a.peek:hover{text-decoration:underline}
button.danger{background:transparent; color:var(--bad); border-color:transparent; font-weight:600}
button:focus-visible, input:focus-visible, textarea:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

input, textarea{
  /* ⚠️16px 미만이면 iOS 사파리가 칸을 누를 때 화면을 확대한다. 예전엔 viewport 로 확대를
     통째로 막아 그걸 피했는데, 그러면 저시력 사용자가 손가락으로도 못 키운다. 글자로 막는다. */
  font:inherit; font-size:16px; width:100%; background:var(--white);
  border:1px solid var(--line); border-radius:var(--r-sm); padding:9px 12px; color:var(--ink);
}
textarea{resize:vertical; min-height:96px; line-height:1.7}
/* 고르는 칸도 쓰는 칸과 같은 물건으로 보여야 한다 — select 만 OS 기본 모양으로 남아
   폭도 테두리도 글꼴도 옆 칸과 따로 놀았다.
   ⚠️appearance:none 을 빼면 화살표가 둘이 된다(OS 것 + 우리 것). 배경 SVG 로 하나만 그린다.
   ⚠️data URI 안의 #은 %23 으로 써야 한다. 그대로 두면 조각 식별자로 읽혀 색이 안 먹는다. */
select{
  font:inherit; font-size:16px; width:100%; background-color:var(--white); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r-sm); padding:9px 34px 9px 12px;
  appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 6 6.4 11 1.6' fill='none' stroke='%235A646D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:11px 8px;
}
select:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
/* ⚠️목록 행 안의 select 는 폼 칸이 아니다. width:100% 를 그대로 물리면 이름과 버튼 사이를
   가로질러 늘어난다(명단의 동의 확인 칸이 그랬다). 내용만큼만 차지하게 둔다. */
.line select{width:auto; min-width:10.5em; max-width:100%}
/* 고른 것이 무엇인지 그 자리에서 보여 주는 칸. 본문과 같은 크기로 두면 설명문처럼 읽힌다. */
.preview{margin-top:8px; padding:10px 12px; background:var(--box); border-radius:var(--r-sm);
  font-size:13px; line-height:1.65; color:var(--sub)}
.preview b{color:var(--ink); font-weight:700}
label{display:block; font-size:13px; font-weight:700; color:var(--sub); margin:0 0 5px}
.field{margin:0 0 14px}
.hint{font-size:12.5px; color:var(--faint); margin-top:5px}

/* 단계 레일 */
.rail{display:flex; align-items:stretch; gap:0; margin:0 0 6px; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--white)}
.rail .step{flex:1; padding:12px 14px; border-right:1px solid var(--line); color:var(--faint)}
.rail .step:last-child{border-right:0}
/* 지금 단계만 진하다. 지난 것과 올 것을 똑같이 흐리게 두면 "여기"가 한눈에 보인다 */
.rail .step.on{background:var(--box); box-shadow:inset 3px 0 0 var(--tint); color:var(--ink)}
.rail .step b{display:block; font-size:14.5px}
.rail .step small{display:block; font-size:12.5px; line-height:1.5; margin-top:2px; color:inherit}
.rail .step.on small{color:var(--sub)}
.rail .step em{font-style:normal; font-size:11.5px; font-weight:700; color:var(--good)}
/* ⚠️좁은 화면에서 3단을 가로로 두면 한글 최소 너비가 뷰포트를 밀어내 페이지 전체가 옆으로 흐른다.
   축을 바꾼다 — 세로 화면에서는 위아래로 눕힌다. */
@media (max-width:620px){
  .rail{flex-direction:column}
  .rail .step{border-right:0; border-bottom:1px solid var(--line)}
  .rail .step:last-child{border-bottom:0}
}

/* 목록 */
.item{border-top:1px solid var(--line); padding:14px 0}
.item:first-child{border-top:0}
.item .meta{font-size:12.5px; color:var(--faint); margin-top:6px}
.by{font-weight:700; color:var(--sub)}
.tag{display:inline-block; font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:999px; background:var(--box); color:var(--sub)}
.tag.warm{background:rgba(169,103,11,.18); color:#8A5309}   /* 연한 배경 위에서는 글자를 더 어둡게 */
.tag.on{background:rgba(28,122,78,.16); color:#1A754A}

.pick{width:100%; text-align:left; background:var(--white); border:1px solid var(--line); color:var(--ink); font-weight:600; padding:12px 14px; margin:0 0 8px}
.pick.on{border-color:var(--tint); box-shadow:inset 3px 0 0 var(--tint)}
.pick small{display:block; font-weight:400; color:var(--sub); font-size:13px}
/* 팀 목록에서 둘째 줄(무엇을 다루는 팀인가)은 이름 줄보다 한 단 더 조용하게 */
.pick small.d{color:var(--faint); margin-top:2px}
.pick:disabled{opacity:.55; cursor:default}
.pick .tag{margin-left:6px; vertical-align:2px}
/* ★포스터가 있는 팀은 카드가 그것을 이고 선다. 전시 화면을 따로 두는 대신 여기로 모았다.
   ⚠️없으면 안 그린다 — 학기 초에 빈 그림 자리가 여덟 개 서면 그게 구멍이다. */
.pick .cover{display:block; width:calc(100% + 28px); margin:-12px -14px 10px;
  aspect-ratio:16/9; object-fit:cover; background:var(--box);
  border-radius:calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0}

/* ★팀을 고르는 자리는 격자다. 한 줄에 하나씩 세우면 1900px 화면에서 카드가 가로를 통째로
   먹고 오른쪽 1600px 가 빈다 — 세 팀이 화면 하나를 다 쓰고, 여덟 팀은 스크롤이 된다.
   한눈에 견주는 자리라 나란히 서야 한다.
   ⚠️좁으면 한 줄에 하나다. 한국어는 칸이 좁으면 어절이 통째로 다음 줄로 내려가 카드가 길어진다.
   ★같은 줄의 카드는 키를 맞춘다(grid 기본 stretch). 포스터 표지가 붙은 카드와 안 붙은
     카드의 높이가 달라 한 번 내용만큼만 세워 봤는데, 격자가 들쭉날쭉해 보여 되돌렸다.
     짧은 카드 아래가 남는 것보다 줄이 어긋나 보이는 쪽이 더 나쁘다. */
.picks{display:grid; gap:8px; grid-template-columns:1fr}
/* ⚠️button 은 안쪽 내용을 세로 가운데에 둔다(UA 기본). align-items 로는 안 잡힌다 —
   카드 자체를 세로로 쌓는 상자로 만들어야 위에서부터 선다.
   ⚠️그러면 안쪽의 인라인 조각이 줄마다 쪼개진다. 이름과 표는 .hd 로 묶어 한 덩이로 둔다. */
.picks .pick{margin:0; height:100%; display:flex; flex-direction:column; align-items:stretch}
.pick .hd{display:block; font-size:15.5px; line-height:1.4}
/* 이름·단계·사람은 한 줄로 내려간다 — 무엇을 하는 팀인지가 먼저 읽혀야 한다 */
.pick .hd + small{margin-top:4px}
@media (min-width:720px){ .picks{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (min-width:1080px){ .picks{grid-template-columns:repeat(3, minmax(0,1fr))} }

.two{display:grid; gap:24px; grid-template-columns:minmax(0,260px) minmax(0,1fr)}
/* 목록 둘을 나란히 — 넓은 화면에서만. 좁으면 원래대로 위아래다.
   ⚠️제목(h2)과 그 아래 카드가 한 덩어리로 움직여야 해서 각각을 감싼다. */
.side2{display:grid; gap:0 28px; align-items:start}
/* 짝이 하나뿐이면 반쪽만 쓰지 않는다 — 구경하는 사람 화면에서 오른쪽이 통째로 비어 있었다 */
.side2 > section:only-child{grid-column:1 / -1}
@media (min-width:1080px){
  .side2{grid-template-columns:repeat(2, minmax(0,1fr))}
  .side2 > section > h2:first-child, .side2 > section > h3:first-child{margin-top:0}
  /* ⚠️짝이 없어 통째로 서는 칸은 예외다 — 위 카드에 제목이 붙어 버린다 */
  .side2 > section:only-child > h2:first-child{margin-top:26px}
}
@media (max-width:720px){ .two{grid-template-columns:1fr} }

/* 보고서 속 작은 제목 — 학생이 눌러 넣은 줄. ⚠️inline 이어야 pre-wrap 의 줄바꿈과 겹치지 않는다 */
.rlead{display:inline-block; font-size:10.5px; letter-spacing:.1em; font-weight:800;
  color:var(--faint); margin-top:8px}
button.quiet.lead{font-size:12px; padding:4px 8px; box-shadow:inset 0 0 0 1px var(--line); border-radius:999px}

.empty{color:var(--faint); padding:18px 0}
.err{color:var(--bad); font-size:13.5px; margin-top:8px; min-height:1.2em}

/* 토스트 */
#toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(12px);
  background:var(--ink); color:#fff; padding:10px 18px; border-radius:var(--r);
  font-size:14px; font-weight:600; opacity:0; pointer-events:none; transition:.18s;
  max-width:calc(100vw - 40px);
}
#toast.on{opacity:1; transform:translateX(-50%) translateY(0)}

/* 모달 */
.scrim{position:fixed; inset:0; background:rgba(20,20,20,.42); display:none; align-items:center; justify-content:center; padding:20px; z-index:20}
.scrim.on{display:flex}
.modal{background:var(--paper); border-radius:var(--r); max-width:520px; width:100%; max-height:88vh; overflow:auto; padding:24px}
.modal h3{font-size:18px; margin:0 0 4px}

/* 첨부 */
.shots{display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 0}
.shots img{width:112px; height:84px; object-fit:cover; border:1px solid var(--line); border-radius:var(--r); display:block}
.doc{display:inline-block; margin-top:10px; font-size:14px; font-weight:700}
.doc::before{content:'PDF'; font-size:10.5px; font-weight:800; letter-spacing:.06em; color:#fff;
  background:var(--tint); padding:2px 5px; border-radius:3px; margin-right:7px; vertical-align:1px}

/* 파일 고르기 — 브라우저 기본 입력은 무엇을 골랐는지 안 보인다.
   투명한 input 을 전면에 덮어 클릭과 끌어놓기를 함께 받는다. */
.drop{position:relative; border:1px dashed var(--line); border-radius:var(--r);
  padding:14px; text-align:center; color:var(--sub); font-size:13.5px; background:var(--white)}
.drop input{position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer}

/* 코칭선생님이 남긴 말 */
.note-in{border-left:3px solid var(--tint); background:var(--box); padding:12px 16px; border-radius:0 var(--r) var(--r) 0; margin:0 0 10px}
.note-in:last-child{margin-bottom:0}

/* 구경하는 중 — 서버가 쓰기를 막지만 화면도 손을 내밀지 않는다 */
body.guest [data-key], body.guest [data-fb], body.guest [data-gfb],
body.guest [data-dis], body.guest #noteBox, body.guest #back,
body.guest [data-dl], body.guest #dlOne,
body.guest [data-stop], body.guest [data-erase], body.guest [data-sid], body.guest #rosterBtn { display:none !important }

/* ═══ 작업대 부품 ═══
   ⚠️`.row` 는 이미 버튼 줄용 flex 유틸이라 건드리지 않는다. 목록 행은 `.line` 으로 새로 만든다. */

/* 상단 바 — 브랜드 · 상태 칩 · 이름 */
.top .pill{font-size:11.5px; font-weight:800; padding:4px 10px; border-radius:999px; background:var(--box); color:var(--sub)}
.top .pill.now{background:rgba(169,103,11,.18); color:#8A5309}
.top .pill.ok{background:rgba(28,122,78,.16); color:#1A754A}

/* 좌 레일 + 우 본문 */
.deck{display:grid; grid-template-columns:172px minmax(0,1fr); gap:0; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--white)}
.side{background:var(--box); border-right:1px solid var(--line); padding:16px 14px}
.side b{display:block; font-size:10px; letter-spacing:.13em; color:var(--faint); font-weight:800; margin:0 0 9px}
.side b + b{margin-top:18px}
.deck .main{padding:18px 20px 22px; min-width:0}
@media (max-width:620px){
  .deck{grid-template-columns:1fr}
  .side{border-right:0; border-bottom:1px solid var(--line)}
}

/* ★코치 화면을 오가는 레일.
   화면이 길어졌다 — 답하기 목록, 팀 상세 6천 픽셀, 명단 서른 줄. 맨 위에만 탭이 있으면
   내려간 사람은 다른 데로 가려고 매번 꼭대기까지 올라와야 한다. 넓은 화면에서는 옆에 붙여 둔다.
   ⚠️좁은 화면에서는 세로 레일이 본문을 잡아먹는다. 원래대로 위쪽 한 줄로 눕는다. */
.shell{display:grid; grid-template-columns:1fr; align-items:start}
/* ⚠️이름을 `.rail` 로 지었다가 단계 레일(위 120줄)과 부딪혔다 — 좁은 화면에서 세로로 서고,
   넓은 화면에서는 단계 표시가 통째로 sticky 가 됐다. 검사가 잡았다. 이름은 겹치지 않게 짓는다. */
.pane-nav{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 26px}
@media (min-width:1080px){
  .shell{grid-template-columns:164px minmax(0,1fr); gap:0 30px}
  .pane-nav{position:sticky; top:18px; flex-direction:column; align-items:stretch; margin:0}
  .pane-nav button{text-align:left}
}

/* 11주 눈금 — ★진도가 아니라 달력이다. 얼마나 했는지가 아니라 몇 주차인지만 말한다 */
.weeks{display:grid; gap:3px; margin:0 0 6px}
.weeks i{height:22px; border-radius:3px; background:#D9E1E6; display:block}
.weeks i.past{background:#E6C9A0}          /* 지났는데 비어 있는 주 */
.weeks i.kept{background:#9FB4BD}          /* 지났고 보고서를 낸 주 */
.weeks i.now{background:var(--tint)}
.weeks i.wrote{box-shadow:inset 0 0 0 2px rgba(28,122,78,.45)}
.wkno{font-size:11.5px; color:var(--sub); font-variant-numeric:tabular-nums; margin:0 0 4px}

/* 3단계 세로 */
.st{display:flex; flex-direction:column; gap:8px}
.st div{font-size:12.5px; color:var(--faint); padding-left:14px; position:relative}
.st div::before{content:''; position:absolute; left:0; top:6px; width:7px; height:7px; border-radius:50%; background:#C6D2D8}
.st div.done{color:var(--sub)}
.st div.done::before{background:var(--good)}
.st div.on, .st div.on-now{color:var(--ink); font-weight:800}
.st div.on::before, .st div.on-now::before{background:var(--tint); box-shadow:0 0 0 3px rgba(12,107,112,.18)}
/* 누를 수 있는 단계 — 지나온 자리를 들여다보러 간다 */
.st div[data-view]{cursor:pointer; border-radius:5px; margin-left:-6px; padding-left:20px}
.st div[data-view]:hover{background:rgba(12,107,112,.07)}
.st div[data-view]::before{left:6px}
/* ⚠️흰 바탕에 테두리를 두르면 회색 옆칸 위에서 입력칸으로 보인다 — 고른 자리는 색으로 말한다 */
.st div.seeing{background:rgba(12,107,112,.10); color:var(--ink); font-weight:700}
/* 「전체」는 단계가 아니다 — 점을 떼고 목록에서 한 칸 띄운다 */
.st div.all{margin-top:8px; padding-top:10px; border-top:1px solid var(--line); border-radius:0 0 5px 5px}
.st div.all::before{display:none}
.st div[data-view]:focus-visible{outline:2px solid var(--tint); outline-offset:1px}

/* 요약 카드 — 상세보다 먼저 온다 */
.sum{display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); margin:0 0 16px}
.sum > div{border:1px solid var(--line); border-radius:var(--r); padding:12px 14px; background:var(--white)}
.sum > div.hi{border-color:var(--warm); background:rgba(184,113,12,.06)}
.sum > div.ok{border-color:var(--good); background:rgba(28,122,78,.05)}
.sum .k{font-size:10.5px; letter-spacing:.11em; font-weight:800; color:var(--faint)}
.sum .v{font-size:15px; font-weight:800; margin-top:3px; letter-spacing:-.02em; line-height:1.4}
.sum .n{font-size:12px; color:var(--sub); margin-top:3px}

/* 명단 한 줄 — 서른 명을 눈으로 훑는 표다.
   ⚠️flex 로 두면 앞의 이름·팀 길이에 밀려 동의 확인 칸이 행마다 다른 자리에 선다.
     다섯 명일 땐 몰라도 서른 명이면 훑을 수가 없다. 칸을 격자로 고정한다.
   ⚠️칸 수가 공간마다 다르다(모임엔 학번이 없다) — 규칙을 둘로 쓰지 않고 --cols 로 받는다. */
.roster{display:grid; grid-template-columns:var(--cols); gap:8px 14px; align-items:center;
  padding:12px 0; border-top:1px solid var(--line)}
.roster:first-of-type{border-top:0}
.roster .who{min-width:0}
.roster .cons{min-width:0}
.roster .cons select{width:100%; max-width:15em}
.roster .cons .faint{font-size:12px; margin-top:3px}
.roster .acts{display:flex; gap:2px; justify-content:flex-end; flex-wrap:wrap}
/* 폰에서는 칸을 접는다 — 넷을 가로로 두면 이름 칸이 한 글자로 눌린다(전에 그랬다) */
@media (max-width:720px){
  .roster{grid-template-columns:auto minmax(0,1fr); gap:6px 10px}
  .roster .who{grid-column:2}
  .roster .cons, .roster .acts{grid-column:1 / -1}
  .roster .acts{justify-content:flex-start}
  .roster .cons select{max-width:100%}
}

/* 목록 행 — 왼쪽에 누가/언제, 오른쪽에 내용 */
.line{display:flex; gap:12px; align-items:flex-start; padding:12px 0; border-top:1px solid var(--line)}
.line:first-of-type{border-top:0}
.line .by2{font-size:11.5px; font-weight:800; color:var(--tint); min-width:42px; flex:none; padding-top:1px}
.line .bd{min-width:0; flex:1}
.line .h{font-weight:700; font-size:14px}
.line .d{color:var(--sub); font-size:13px}
.line .m{color:var(--faint); font-size:12px; margin-top:5px}
/* ⚠️폰에서 명단 한 줄에 버튼 넷(재입장 QR·숨기기·멈추기·지우기)이 서면 이름 칸에 10px 만 남아
   "도/윤" 처럼 한 글자씩 세로로 섰다. 이름을 한 줄 통째로 주고 버튼은 아래로 내린다.
   텍스트 검증으로는 안 보인다 — 렌더 화면에서만 보였다. */
@media (max-width:520px){
  .line{flex-wrap:wrap}
  .line .bd{flex:1 0 100%}
}

/* 그 자리에서 쓰는 상자 */
.write{border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; background:var(--box); margin:0 0 16px}
.write .k{font-size:10.5px; letter-spacing:.11em; font-weight:800; color:var(--faint); margin:0 0 8px}
.write textarea{background:var(--white)}

/* 바닥 — 처리방침·약관. 어느 화면에서든 한 클릭 안에 */
.foot{max-width:1080px; margin:44px auto 26px; padding:16px 20px 0; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:16px; font-size:12.5px; color:var(--faint)}
.foot a{color:var(--sub); text-decoration:none}
.foot a:hover{color:var(--tint); text-decoration:underline}
.foot span{margin-left:auto}
@media (max-width:520px){ .foot span{margin-left:0; width:100%} }

/* 학번 — 생기부는 번호 순으로 쓴다. 숫자가 줄을 맞춰야 눈이 안 흔들린다. */
.sidbox{flex:none; vertical-align:middle; width:100%; margin-right:0; padding:5px 7px; font-size:13px; font-weight:700;
  font-variant-numeric:tabular-nums; letter-spacing:.02em; color:var(--sub);
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--white)}
.sidbox:focus{border-color:var(--tint); outline:none; color:var(--ink)}
.sidbox::placeholder{font-weight:500; color:var(--faint)}
.sidbox.ro{display:inline-block; border-color:transparent; background:none; padding-left:0}
@media (max-width:720px){ .sidbox{width:5em} }

/* 처리정지 — 기록은 남기되 새로 쓰지 않는다. 게스트와 같은 방식으로 진입부 한 곳에서 감춘다.
   ⚠️#erase 는 남긴다. 멈춘 사람이 삭제를 못 하면 권리가 막힌다. */
body.stopped #addArt, body.stopped #addRep, body.stopped #nextBtn, body.stopped #leaveBtn2,
body.stopped #saveProblem, body.stopped #problem, body.stopped [data-edit], body.stopped [data-del],
body.stopped [data-join], body.stopped [data-team], body.stopped .write { display:none !important }
.stopnote{margin:0 0 18px; padding:12px 14px; border-left:3px solid var(--warm);
  background:rgba(184,113,12,.07); border-radius:0 var(--r) var(--r) 0; font-size:13.5px; color:var(--sub)}

/* 보호자 동의 확인 — 만 14세 미만은 법정대리인 동의가 필요하다(심의 필수기준 넷째) */
.consent{margin-left:8px; padding:3px 6px; font-size:12px; color:var(--sub);
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--white)}
.consent:focus{border-color:var(--tint); outline:none}
body.guest .consent{display:none !important}