/* =========================================================
   teacher.css — 선생님 설정(S49) 새 구도 (2026-11-09)
   참고: 확정 그림 모음 16쪽 시안 · theme.css 다음에 불러와요
   색 3가지: 남색(글자·테두리) · 코랄(주 버튼) · 연한 하늘(고른 것)
   글자 4단계: 제목 34 · 칸 제목 24 · 본문 17 · 설명 15
   버튼 3가지: .tc-btn.pri(주 버튼, 화면에 하나) · .tc-btn(보조) · .tc-seg(고르기)
   ========================================================= */
.tgx { --tc-line:#D3C6B3; --tc-soft:#EFE6D8; --tc-pri:#C9573A; --tc-pri-d:#8E3A24; --tc-ok:#2F7A4F;
  background:#F6E6D2; color:var(--navy); font-family:var(--font-body); }
.tgx .sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* 맨 위: 한 줄 제목 */
.tgx .tc-head { left:48px; right:48px; top:26px; display:flex; align-items:baseline; gap:18px; }
.tgx .tc-title { font-size:34px; line-height:1.2; color:var(--navy); white-space:nowrap; }
.tgx .tc-title span { color:var(--blue); margin-left:6px; }
.tgx .tc-title span::before { content:'·'; color:var(--navy); margin-right:12px; }
.tgx .tc-sub { font-size:17px; color:var(--muted); white-space:nowrap; }

/* 탭 */
.tgx .tc-tabs { left:48px; top:84px; display:flex; gap:6px; z-index:2; }
.tgx .tc-tab { width:290px; height:52px; border:0; border-radius:12px 12px 0 0; background:#EADBC6; color:#6B6F86;
  font-family:var(--font-head); font-size:21px; }
.tgx .tc-tab b { font-weight:400; margin-right:6px; }
.tgx .tc-tab.on { background:#FFFDF8; color:var(--navy); box-shadow:inset 3px 0 0 var(--navy), inset -3px 0 0 var(--navy), inset 0 3px 0 var(--navy); height:55px; }

/* 판 */
.tgx .tc-panel { left:48px; right:48px; top:136px; bottom:24px; background:#FFFDF8; border:3px solid var(--navy); border-radius:0 14px 14px 14px;
  padding:26px 32px 24px; display:grid; gap:40px; }
.tgx .tc-panel.t1 { grid-template-columns:440px minmax(0, 1fr); }
.tgx .tc-panel.t2 { grid-template-columns:480px minmax(0, 1fr); }
.tgx .tc-col { min-width:0; min-height:0; display:flex; flex-direction:column; gap:22px; }
.tgx .tc-sec { display:flex; flex-direction:column; gap:12px; }

/* 칸 제목 (번호 상자) */
.tgx .tc-h { display:flex; align-items:center; gap:10px; font-size:24px; line-height:1.2; color:var(--navy); }
.tgx .tc-h i { font-style:normal; width:32px; height:32px; border-radius:8px; background:var(--navy); color:#fff; display:grid; place-items:center; font-size:19px; }
.tgx .tc-h em { font-style:normal; font-family:var(--font-body); font-size:14px; background:var(--tc-soft); color:var(--muted); border-radius:6px; padding:3px 10px; }

/* 1 실행 모드 */
.tgx .tc-modes { display:flex; flex-direction:column; gap:10px; }
.tgx .tc-modes button { display:flex; align-items:center; gap:14px; text-align:left; background:#fff; border:2px solid var(--tc-line); border-radius:12px; padding:12px 18px; }
.tgx .tc-modes .rd { flex:none; width:24px; height:24px; border-radius:50%; border:3px solid #8A93AE; background:#fff; }
.tgx .tc-modes b { display:block; font-family:var(--font-head); font-weight:400; font-size:21px; }
.tgx .tc-modes small { display:block; font-size:15px; color:var(--muted); line-height:1.45; }
.tgx .tc-modes button.on { border-color:var(--navy); background:var(--sky-l); box-shadow:inset 0 0 0 1px var(--navy); }
.tgx .tc-modes button.on .rd { border-color:var(--navy); background:radial-gradient(circle, var(--navy) 42%, #fff 47%); }

/* 2 소리 */
.tgx .tc-row { display:flex; align-items:center; gap:16px; }
.tgx .tc-lbl { width:92px; font-family:var(--font-head); font-size:19px; }
.tgx .tc-row small { font-size:15px; color:var(--muted); }

/* 고르기 버튼 묶음 */
.tgx .tc-seg { display:inline-flex; border:2px solid var(--navy); border-radius:10px; overflow:hidden; background:#fff; flex:none; }
.tgx .tc-seg button { height:40px; min-width:78px; padding:0 16px; border:0; background:#fff; color:var(--navy); font-family:var(--font-head); font-size:17px; }
.tgx .tc-seg button + button { border-left:2px solid var(--navy); }
.tgx .tc-seg button.on { background:var(--navy); color:#fff; }
.tgx .tc-seg button:disabled { color:#B4B8C8; text-decoration:line-through; }

/* 3 게시판 주소 */
.tgx .tc-url input { width:100%; height:48px; border:2px solid var(--tc-line); border-radius:10px; padding:0 14px; font-size:17px; background:#fff; color:var(--navy); outline:0; }
.tgx .tc-url input:focus { border-color:var(--navy); }
.tgx .tc-url.bad input { border-color:var(--tc-pri); background:#FFF5F1; }
.tgx .tc-help { font-size:15px; line-height:1.5; color:var(--muted); }
.tgx .tc-help.bad { color:var(--tc-pri); }
.tgx .tc-help b { color:var(--navy); font-weight:700; }

/* 기기 관리 (지우기 + 개인정보 한 줄) */
.tgx .tc-device { margin-top:auto; padding-top:16px; border-top:2px dashed var(--tc-line); display:flex; align-items:center; gap:14px; }
.tgx .tc-device p { font-size:14px; line-height:1.5; color:var(--muted); }
.tgx .tc-device b { color:var(--navy); }

/* 버튼 (보조 · 주 · 작은 · 지우기) */
.tgx .tc-btn { flex:none; height:50px; padding:0 24px; border:2.5px solid var(--navy); border-radius:12px; background:#fff; color:var(--navy);
  font-family:var(--font-head); font-size:20px; white-space:nowrap; box-shadow:0 3px 0 var(--navy); }
.tgx .tc-btn:active { transform:translateY(2px); box-shadow:0 1px 0 var(--navy); }
.tgx .tc-btn.pri { background:var(--tc-pri); border-color:var(--tc-pri-d); color:#fff; box-shadow:0 3px 0 var(--tc-pri-d); }
.tgx .tc-btn.sm { height:40px; padding:0 16px; font-size:17px; }
.tgx .tc-btn.danger { color:var(--tc-pri); border-color:var(--tc-pri); box-shadow:0 3px 0 var(--tc-pri); }

/* 미리 보기 */
.tgx .tc-pvhead { display:flex; align-items:center; gap:12px; }
.tgx .tc-pvhead .tc-h { margin-right:auto; }
.tgx .tc-pv { gap:12px; }
/* 미리 볼 화면 고르기 (고르기 버튼 묶음과 같은 모양, 한 줄 꽉 채움) */
.tgx .tc-steps { display:flex; border:2px solid var(--navy); border-radius:10px; overflow:hidden; background:#fff; }
.tgx .tc-steps button { flex:1; min-width:0; height:38px; padding:0 6px; border:0; background:#fff; color:var(--navy); font-family:var(--font-head); font-size:16px; white-space:nowrap; }
.tgx .tc-steps button + button { border-left:2px solid var(--navy); }
.tgx .tc-steps button.on { background:var(--navy); color:#fff; }
.tgx .tc-frame { position:relative; flex:1; min-height:0; border:2px solid var(--tc-line); border-radius:12px; background:var(--tc-soft); overflow:hidden; }
.tgx .tc-frame iframe { position:absolute; left:50%; top:50%; border:0; background:#fff; transform-origin:center; }
.tgx .tc-foot { display:flex; align-items:center; justify-content:flex-end; gap:12px; margin-top:auto; }
.tgx .tc-pv .tc-foot { margin-top:0; }
.tgx .tc-pv .tc-foot .tc-help { flex:1; margin-right:8px; }

/* 탭 02: QR */
.tgx .tc-qrcol { align-items:center; justify-content:center; gap:18px; }
.tgx .tc-share { padding-left:8px; }
.tgx .tc-qr { width:400px; height:400px; padding:16px; background:#fff; border:3px solid var(--navy); border-radius:14px; }
.tgx .tc-qr svg { width:100%; height:100%; display:block; }
.tgx .tc-qrbtns { display:flex; gap:12px; }

/* 탭 02: 설정 요약 · 링크 */
.tgx .tc-sum { background:var(--sky-l); border-radius:12px; padding:18px 22px; display:flex; flex-direction:column; gap:12px; }
.tgx .tc-sumhead { display:flex; align-items:center; justify-content:space-between; }
.tgx .tc-mode { font-size:17px; } .tgx .tc-mode b { font-family:var(--font-head); font-weight:400; font-size:20px; color:var(--blue); margin-right:4px; }
.tgx .tc-flow { list-style:none; counter-reset:f; display:flex; flex-direction:column; gap:8px; }
.tgx .tc-flow li { counter-increment:f; display:flex; align-items:center; gap:12px; font-size:17px; }
.tgx .tc-flow li::before { content:counter(f); flex:none; width:28px; height:28px; border-radius:50%; background:var(--navy); color:#fff; display:grid; place-items:center; font-family:var(--font-head); font-size:16px; }
.tgx .tc-facts { display:flex; flex-direction:column; gap:6px; padding-top:10px; border-top:2px solid #fff; }
.tgx .tc-facts > div { display:grid; grid-template-columns:110px minmax(0, 1fr); align-items:baseline; }
.tgx .tc-facts dt { font-family:var(--font-head); font-size:17px; color:var(--muted); }
.tgx .tc-facts dd { font-size:16px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tgx .tc-facts .ok, .tgx .tc-facts .no { display:inline-block; font-size:14px; border-radius:6px; padding:1px 8px; margin-right:6px; }
.tgx .tc-facts .ok { background:#DDEFE3; color:var(--tc-ok); } .tgx .tc-facts .no { background:#fff; color:var(--muted); }
.tgx .tc-linkrow { display:flex; gap:12px; align-items:center; }
.tgx .tc-link { flex:1; min-width:0; border:2px solid var(--tc-line); border-radius:10px; background:#fff; padding:10px 14px; font-size:15px; line-height:1.4; word-break:break-all; }
.tgx .tc-share .tc-sec .tc-btn.sm { align-self:flex-start; }
/* 02 챌린지 다이어리 (11/10) */
.tgx .tc-dy { gap:16px; overflow-y:auto; padding-right:6px; }
.tgx .tc-dy .tc-sec { gap:8px; }
.tgx .tc-inl { flex-direction:row !important; align-items:center; gap:14px !important; flex-wrap:wrap; }
.tgx .tc-inl .tc-h { width:170px; flex:none; }
.tgx .tc-inl small { font-size:15px; color:var(--muted); }
.tgx .tc-step { display:inline-flex; align-items:center; border:2px solid var(--navy); border-radius:10px; overflow:hidden; background:#fff; flex:none; }
.tgx .tc-step button { width:44px; height:40px; border:0; background:#fff; color:var(--navy); font-family:var(--font-head); font-size:24px; }
.tgx .tc-step button:disabled { color:#C4C8D4; }
.tgx .tc-step b { min-width:70px; height:40px; display:grid; place-items:center; border-left:2px solid var(--navy); border-right:2px solid var(--navy); font-family:var(--font-head); font-weight:400; font-size:20px; color:var(--navy); }
.tgx .tc-dy .tc-row { flex-wrap:wrap; gap:10px; }
.tgx .tc-txt { position:relative; display:block; }
.tgx .tc-txt input { padding-right:70px; }
.tgx .tc-txt input::placeholder { color:#B4BAC6; }
.tgx .tc-cnt { position:absolute; right:12px; top:50%; transform:translateY(-50%); font-size:13px; color:var(--muted); pointer-events:none; }
.tgx .tc-sample { align-self:flex-start; border:0; background:var(--tc-soft); color:var(--navy); border-radius:999px; padding:4px 12px; font-size:14px; cursor:pointer; text-align:left; }
.tgx .tc-pr { display:grid; grid-template-columns:76px 1fr; gap:8px; align-items:start; }
.tgx .tc-pr > span { font-family:var(--font-head); font-size:17px; color:var(--navy); padding-top:12px; }
.tgx .tc-pr > div { display:flex; flex-direction:column; gap:6px; min-width:0; }
.tgx .tc-panel.t3 { grid-template-columns:480px minmax(0, 1fr); }   /* 03 QR 코드와 공유 (11/10 탭이 3개로) */
/* 03 탭 (11/10): 소리·챌린지·게시판 줄을 위로, 요약 상자 위끝 = QR 상자 위끝 */
.tgx .tc-sum .tc-facts { padding-bottom:12px; border-bottom:2px solid rgba(30,42,90,.12); border-top:0; margin-top:0; padding-top:0; }
.tgx .tc-share { justify-content:flex-start; }
.tgx .tc-share .tc-foot { margin-top:auto; }
.tgx .tc-panel.t3 .tc-qrcol { justify-content:flex-start; }
/* 03 탭 (11/10 다시): 두 영역 — 왼쪽 QR / 오른쪽 요약·링크, 위아래 끝을 같이 맞추고 남는 높이는 요약 안에서 고르게 */
.tgx .tc-panel.t3 { align-items:stretch; }
.tgx .tc-panel.t3 .tc-qrcol { justify-content:space-between; gap:14px; }
.tgx .tc-panel.t3 .tc-share { padding-top:0 !important; justify-content:space-between; gap:18px; }
.tgx .tc-panel.t3 .tc-sum { flex:1; gap:14px; }
.tgx .tc-panel.t3 .tc-facts { padding:14px 18px; background:#fff; border:0; border-radius:10px; gap:10px; }
.tgx .tc-panel.t3 .tc-flowbox { flex:1; display:flex; flex-direction:column; gap:10px; padding:14px 18px; background:#fff; border-radius:10px; }
.tgx .tc-panel.t3 .tc-flow { flex:1; display:flex; flex-direction:column; justify-content:space-around; margin:0; }
.tgx .tc-panel.t3 .tc-foot { margin-top:0; }
.tgx .tc-panel.t3 .tc-qr { width:440px; height:440px; }
.tgx .tc-panel.t3 .tc-qrcol .tc-help { margin-top:-6px; }
/* 03 탭: 오른쪽 영역 폭을 글 길이에 맞게 줄이고, 남는 폭은 QR 쪽으로 */
.tgx .tc-panel.t3 { grid-template-columns:minmax(0,1fr) 760px; }
.tgx .tc-panel.t3 { grid-template-columns:minmax(0,1fr) 800px; }
.tgx .tc-panel.t3 .tc-link { font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* 03 탭 (11/10 다시): 여백을 줄여 촘촘하게 — 늘리지 않고 붙이고, 두 영역을 세로 가운데에 */
.tgx .tc-panel.t3 { align-items:center; }
.tgx .tc-panel.t3 .tc-qrcol { justify-content:center; gap:12px; }
.tgx .tc-panel.t3 .tc-qrcol .tc-help { margin-top:0; }
.tgx .tc-panel.t3 .tc-qr { width:400px; height:400px; }
.tgx .tc-panel.t3 .tc-share { justify-content:center; gap:14px; }
.tgx .tc-panel.t3 .tc-sum { flex:none; gap:10px; padding:14px 18px; }
.tgx .tc-panel.t3 .tc-facts { padding:10px 16px; gap:6px; }
.tgx .tc-panel.t3 .tc-flowbox { flex:none; padding:10px 16px; gap:8px; }
.tgx .tc-panel.t3 .tc-flow { flex:none; justify-content:flex-start; gap:8px; }
.tgx .tc-panel.t3 .tc-sec { gap:8px; }
.tgx .tc-panel.t3 .tc-foot { margin-top:4px; }
/* 03 탭: 두 영역을 가운데로 모으고 사이 간격 72 — 양쪽 바깥 여백 같게 */
.tgx .tc-panel.t3 { grid-template-columns:420px 800px; justify-content:center; column-gap:72px; }
/* 03 탭: 요약 상자 폭을 글에 맞게 줄이고(620), 링크는 한 줄로 잘라 보이기(복사 버튼 있음) */
.tgx .tc-panel.t3 { grid-template-columns:420px 620px; column-gap:80px; }
/* 03 탭: 'QR 코드' 제목 줄 = '설정 요약' 제목 줄, QR 버튼 아래끝 = 이전·설정 완료 버튼 아래끝 */
.tgx .tc-panel.t3 .tc-qrcol { align-self:stretch; justify-content:space-between; padding-top:20px; gap:0; }
.tgx .tc-panel.t3 .tc-qrcol { align-self:center; }
/* ===== 03 탭 (11/10 최종): 같은 모양 카드 두 장 + 아래 오른쪽 버튼 줄 ===== */
.tgx .tc-panel.t3 { grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto; column-gap:28px; row-gap:20px; align-items:stretch; justify-content:stretch; }
.tgx .tc-panel.t3 .tc-card3 { background:var(--sky-l); border-radius:14px; padding:20px 24px 22px; display:flex; flex-direction:column; gap:14px; min-height:0; }
.tgx .tc-panel.t3 .tc-cardhead { display:flex; align-items:center; justify-content:space-between; min-height:40px; }
.tgx .tc-panel.t3 .tc-cardhead .tc-h { margin:0; text-align:left; }
.tgx .tc-panel.t3 .tc-qrcard { align-items:stretch; }
.tgx .tc-panel.t3 .tc-qrcard .tc-qr { align-self:center; width:auto; height:auto; flex:1; min-height:0; aspect-ratio:1; max-height:420px; }
.tgx .tc-panel.t3 .tc-qrcard .tc-help { text-align:center; margin:0; }
.tgx .tc-panel.t3 .tc-qrbtns { justify-content:center; }
.tgx .tc-panel.t3 .tc-sum { flex:none; padding:20px 24px 22px; gap:14px; }
.tgx .tc-panel.t3 .tc-facts { padding:12px 16px; background:#fff; border-radius:10px; gap:8px; border:0; }
.tgx .tc-panel.t3 .tc-flowbox, .tgx .tc-panel.t3 .tc-linkbox { flex:none; display:flex; flex-direction:column; gap:10px; padding:12px 16px; background:#fff; border-radius:10px; }
.tgx .tc-panel.t3 .tc-flowbox { flex:1; }
.tgx .tc-panel.t3 .tc-flow { flex:1; display:flex; flex-direction:column; justify-content:space-around; gap:6px; margin:0; }
.tgx .tc-panel.t3 .tc-linkbox .tc-mode b { margin-right:6px; }
.tgx .tc-panel.t3 .tc-link { font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tgx .tc-panel.t3 .tc-foot3 { grid-column:1 / -1; margin:0; justify-content:flex-end; }

/* 02 탭 왼쪽 칸 (11/10 점검): 아래에 설정이 더 있으면 알려 주기, 끝까지 내리면 사라짐 */
.tgx .tc-dy .tc-more { position:sticky; bottom:0; flex:none; margin:-40px -6px 0 0; padding:34px 0 6px; text-align:center; font-weight:700; font-size:16px; color:var(--navy, #1E2A5A);
  background:linear-gradient(rgba(255,253,246,0), #FFFDF6 55%); pointer-events:none; transition:opacity .25s; }
.tgx .tc-dy .tc-more.gone { opacity:0; }
/* 행사용 (11/10 최종) */
.tgx .tc-privacy { margin-top:-4px; color:#8A5A00; }
.tgx .tc-evwarn { margin:0; padding:10px 14px; border-radius:12px; background:#FFF3C4; color:#1E2A5A; font-size:16px; line-height:1.5; }
.tgx .tc-dy.ev-off .tc-sec { opacity:.5; }
.tgx .tc-evnote { margin-top:8px; color:#8A5A00; }

/* 02 탭 한 화면에 (11/10 점검 3): 설명 글은 버튼 오른쪽에, 칸 사이 간격 줄이기 */
.tgx .tc-dy { gap:10px; }
.tgx .tc-dy .tc-sec { gap:6px; }
.tgx .tc-dy .tc-inl { flex-wrap:nowrap; gap:12px !important; }
.tgx .tc-dy .tc-inl .tc-h { width:150px; }
.tgx .tc-dy .tc-inl small { flex:1; min-width:0; font-size:14px; line-height:1.35; }
.tgx .tc-dy .tc-help { margin:0; font-size:14px; }
.tgx .tc-dy .tc-sample { margin-top:-2px; }
.tgx .tc-dy .tc-pr .tc-sample { display:none; }   /* 칭찬은 비워 두면 예시 문구가 그대로 나가서 예시 버튼이 필요 없어요 */
.tgx .tc-tab.off { opacity:.4; cursor:not-allowed; }
.tgx .tc-dy .tc-inl .tc-h { width:auto; min-width:150px; white-space:nowrap; }
.tgx .tc-dy .tc-inl .tc-h { min-width:168px; }   /* 버튼 시작 위치를 줄 맞춤 */

/* 행사 활동 (11/11): 행사용을 고르면 실행 모드 아래 — 약속 카드 · 다이어리 체크 (하나 이상) */
.tgx .tc-evact { margin-top:12px; flex-wrap:wrap; gap:10px 16px; }
.tgx .tc-checks { display:inline-flex; gap:10px; flex:none; }
.tgx .tc-checks button { display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 16px 0 12px; border:2px solid var(--navy); border-radius:10px; background:#fff; color:var(--navy); font-family:var(--font-head); font-size:17px; }
.tgx .tc-checks i { width:22px; height:22px; border:3px solid #8A93AE; border-radius:5px; background:#fff; position:relative; flex:none; }
.tgx .tc-checks button.on { background:var(--sky-l); }
.tgx .tc-checks button.on i { border-color:var(--navy); background:var(--navy); }
.tgx .tc-checks button.on i::after { content:''; position:absolute; left:4px; top:0; width:6px; height:11px; border:solid #fff; border-width:0 3px 3px 0; transform:rotate(45deg); }

/* 02 탭 (11/11 점검): 진행 방식도 버튼을 제목 옆에 — 주(1~4주)·설명은 버튼 시작선에 맞춰 다음 줄 */
.tgx .tc-dy .tc-way { flex-wrap:wrap; row-gap:6px !important; }
.tgx .tc-dy .tc-way .tc-sub { flex-basis:100%; display:flex; align-items:center; gap:12px; padding-left:180px; }
.tgx .tc-dy .tc-way .tc-sub small { flex:1; min-width:0; }
/* 02 탭 (11/11 점검): 칸 세로 높이 줄이기 — 자리가 모자라 아래 설정이 가려지던 것 */
.tgx .tc-dy { gap:8px; }
.tgx .tc-dy .tc-sec { gap:4px; }
.tgx .tc-dy .tc-url input { height:38px; font-size:16px; }
.tgx .tc-dy .tc-seg button { height:34px; font-size:16px; }
.tgx .tc-dy .tc-step button, .tgx .tc-dy .tc-step b { height:34px; }
.tgx .tc-dy .tc-step b { font-size:18px; }
.tgx .tc-dy .tc-sample { padding:2px 10px; font-size:13px; }
.tgx .tc-dy .tc-pr { gap:6px; }
.tgx .tc-dy .tc-pr > span { padding-top:8px; }
.tgx .tc-dy .tc-pr > div { gap:4px; }
.tgx .tc-dy .tc-way .tc-sub { flex-wrap:wrap; row-gap:4px; }
.tgx .tc-dy .tc-way .tc-sub .tc-seg button { min-width:0; padding:0 14px; }
.tgx .tc-dy .tc-way .tc-sub small { flex-basis:100%; }
.tgx .tc-dy .tc-way .tc-sub small { white-space:normal; overflow-wrap:anywhere; word-break:keep-all; }
/* 01 탭 소리 (11/11): 효과음·대기 음악을 하나로 — 제목 옆 [켜기|끄기] + 설명 한 줄 */
.tgx .tc-set:not(.tc-dy) > .tc-inl { flex-wrap:nowrap; }
.tgx .tc-set:not(.tc-dy) > .tc-inl .tc-h { width:auto; min-width:120px; }
.tgx .tc-set:not(.tc-dy) > .tc-inl small { flex:1; min-width:0; }

/* 01 탭 (11/11 점검): 행사용 옆 '함께 쓰는 태블릿용'은 작고 연하게 */
.tgx .tc-modes b .tc-msub { font-style:normal; font-family:var(--font-body, inherit); font-size:14px; color:#8A93AE; margin-left:10px; letter-spacing:0; vertical-align:2px; }
/* 01 탭 (11/11 점검): '이 기기 기록 지우기'를 게시판 바로 아래로 — 점선 없이, 설명은 아주 연한 회색 둥근 상자에 가로로 */
.tgx .tc-device { margin-top:0; padding-top:0; border-top:0; align-items:stretch; gap:12px; }
.tgx .tc-device .tc-btn { flex:none; align-self:center; }
.tgx .tc-device p { flex:1; min-width:0; margin:0; padding:8px 14px; background:#F3F3F1; border-radius:12px; font-size:14px; line-height:1.5; display:flex; align-items:center; }
.tgx .tc-device { flex-direction:column; align-items:flex-start; gap:8px; }
.tgx .tc-device .tc-btn { align-self:flex-start; }
.tgx .tc-device p { display:block; width:100%; box-sizing:border-box; }
/* 행사용 01 탭 (11/11): 기록 지우기를 맨 아래 한 줄로 — 왼쪽 칸부터 미리 보기 아래까지 가로로 길게 */
.tgx .tc-panel.t1.ev { grid-template-rows:minmax(0, 1fr) auto; row-gap:14px; }
.tgx .tc-device.wide { grid-column:1 / -1; flex-direction:row; align-items:center; gap:14px; }
.tgx .tc-device.wide .tc-btn { align-self:center; }
.tgx .tc-device.wide p { flex:1; width:auto; padding:10px 18px; }
/* 01 탭 (11/11): 행사 활동(약속 카드·다이어리)을 원래 모양 그대로 행사용 상자 바로 아래에 붙여요 — 자리를 아껴 기록 지우기를 수업용처럼 위에 */
.tgx .tc-evact { margin-top:-2px !important; flex-wrap:nowrap !important; }
/* 행사 활동 (11/11): 약속 카드 왼쪽 = 아래 소리 [켜기] 왼쪽, 다이어리 오른쪽 = 행사용 상자 오른쪽 */
.tgx .tc-set:not(.tc-dy) > .tc-inl .tc-h { width:120px; min-width:0; flex:none; }
.tgx .tc-evact { justify-content:flex-start; gap:14px !important; }
.tgx .tc-evact .tc-lbl { width:120px; flex:none; }
.tgx .tc-evact .tc-checks { flex:1; gap:10px; }
.tgx .tc-evact .tc-checks button { flex:1; justify-content:center; }
/* 01 탭 (11/11): 게시판 설명 두 줄 · 기록 지우기 설명 줄 간격 좁히기 */
.tgx .tc-set:not(.tc-dy) #err { line-height:1.35; }
.tgx .tc-set:not(.tc-dy) .tc-privacy { margin-top:-10px; line-height:1.35; }
.tgx .tc-device p { line-height:1.35; padding:8px 14px; }
/* 행사 활동 (11/11): 글자 첫머리 = 아래 '소리' 첫 글자(번호 동그라미 다음), 약속 카드 왼쪽 위치는 그대로 */
.tgx .tc-evact { padding-left:42px; }
.tgx .tc-evact .tc-lbl { width:78px; white-space:nowrap; }
/* 행사 활동 (11/11): 이름 글자 빼고 버튼 자리는 그대로 — 약속 카드 왼쪽 = 소리 [켜기] 왼쪽 */
.tgx .tc-evact { padding-left:134px; }
/* 02 탭 (11/11 점검): 칸이 위에 몰려 아래가 비던 것 — 1~7번을 왼쪽 칸 높이에 고르게 나눠 배치 */
.tgx .tc-dy { justify-content:flex-start; gap:clamp(6px, calc((100vh - 760px) / 7), 22px); }   /* 11/11 점검: 태블릿처럼 화면이 낮으면 간격이 저절로 줄어 7번까지 보이게 */   /* 칸 사이를 알맞게 띄우기 — 높이를 억지로 채우지 않음 (11/11) */
.tgx .tc-dy .tc-more { position:absolute; left:0; right:0; bottom:0; margin:0; }
.tgx .tc-dy { position:relative; }
/* 01·02 탭 (11/11): 왼쪽 첫 제목(1 실행 모드 / 1 챌린지 횟수)과 오른쪽 '미리 보기' 제목 줄 높이 맞춤 */
.tgx .tc-panel.t1 .tc-set { padding-top:6px; }
.tgx .tc-panel.t2 .tc-dy { padding-top:3px; }
.tgx .tc-dy .tc-dim { opacity:.5; }
.tgx .tc-dy .tc-dim .tc-h em { font-style:normal; font-family:var(--font-body, inherit); font-size:14px; color:var(--muted); margin-left:8px; }
/* 03 탭 (11/11): 선생님 설정으로 돌아오는 방법(연구회 이름표 두 번 누르기) 안내 — 버튼 왼쪽 */
.tgx .tc-panel.t3 .tc-back { margin:0 auto 0 0; padding:8px 14px; background:#F3F3F1; border-radius:12px; font-size:15px; line-height:1.4; color:var(--muted); }
.tgx .tc-panel.t3 .tc-back b { color:var(--navy); margin-right:8px; font-weight:700; }
.tgx .tc-panel.t3 .tc-back span { display:inline-block; padding:0 6px; margin:0 2px; border:1.5px solid var(--navy); border-radius:4px; font-size:13px; color:var(--navy); background:#fff; }

/* 11/12: 진행 방식 설명 옆 시작 날짜 달력 */
.tgx .tc-cal { position:relative; display:inline-flex; align-items:center; gap:4px; flex:none; }
.tgx .tc-calbtn { position:relative; width:30px; height:30px; padding:0; border:0; background:none; cursor:pointer; display:inline-flex; }
.tgx .tc-calbtn svg { width:100%; height:100%; }
.tgx .tc-calbtn:active { transform:translateY(2px); }
.tgx .tc-calbtn::after { content:'시작 날짜 정하기'; position:absolute; left:50%; bottom:calc(100% + 9px); transform:translateX(-50%); white-space:nowrap; font-size:14px; line-height:1; color:var(--navy); background:#fff; border:2px solid var(--navy); border-radius:6px; padding:6px 10px 5px; opacity:0; pointer-events:none; transition:opacity .15s; z-index:5; }
.tgx .tc-calbtn::before { content:''; position:absolute; left:50%; bottom:calc(100% + 5px); width:8px; height:8px; background:#fff; border-right:2px solid var(--navy); border-bottom:2px solid var(--navy); transform:translateX(-50%) rotate(45deg); opacity:0; transition:opacity .15s; z-index:6; }
@media (hover:hover) { .tgx .tc-calbtn:hover::after, .tgx .tc-calbtn:hover::before { opacity:1; } }
.tgx .tc-date { position:absolute; left:0; top:100%; width:1px; height:1px; opacity:0; border:0; padding:0; pointer-events:none; }
.tgx .tc-calx { width:22px; height:22px; border:0; border-radius:50%; background:#E6E9F2; color:var(--navy); font-size:16px; line-height:22px; padding:0; cursor:pointer; }
/* 11/12: 자유롭게 설명을 1주·2주 버튼 옆으로 (두 줄까지) */
.tgx .tc-dy .tc-way .tc-sub { flex-wrap:nowrap; align-items:center; }
.tgx .tc-dy .tc-way .tc-sub small { flex:1 1 auto; flex-basis:auto; line-height:1.3; }