/* SSAKA MANAGER — dark monochrome
   Font: Pretendard (SIL Open Font License 1.1 — 상업적 사용 · 웹 임베딩 무료) */
:root {
  /* 리모델링 2026-10: 검정 바탕 · 초록 주요 색 · 흰색은 글자에만 조금 */
  --bg: #08090a;
  --surface: #111413;
  --surface2: #171b19;
  --surface3: #1f2522;
  --line: #1e2421;
  --line2: #2b332f;
  --text: #f1f4f2;
  --accent: #39e75f; /* 로고의 초록 */
  --pri: #39e75f; /* 주요 버튼 · 고른 것 */
  --on-pri: #04150a; /* 초록 위 글자 */
  --pri-soft: rgba(57, 231, 95, 0.12);
  --sub: #aab4ae;
  --muted: #6c7670;
  --invert: #08090a;
  --r: 10px;
  --r-sm: 7px;
  --font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
  --nav-w: 236px;
  --search-w: 280px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  font-variant-numeric: tabular-nums;
}
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.25; letter-spacing: -0.03em; }
h3 { font-size: 16px; font-weight: 700; }
h4 { font-size: 13px; font-weight: 700; margin: 18px 0 6px; color: var(--sub); }
small { font-size: 12px; }
img { max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea {
  font: inherit; color: var(--text); width: 100%;
  padding: 11px 12px; border: 1px solid var(--line2); border-radius: var(--r-sm); background: var(--surface2);
  outline: none; transition: border-color .15s;
}
input::placeholder, textarea::placeholder { color: var(--muted); }
input:focus, select:focus, textarea:focus { border-color: var(--text); }
textarea { resize: vertical; }
label { display: block; font-size: 13px; font-weight: 600; color: var(--sub); margin-bottom: 14px; }
label > input, label > select, label > textarea { margin-top: 6px; font-weight: 400; }
fieldset { border: 0; padding: 0; margin: 0 0 14px; }
legend { font-size: 13px; font-weight: 600; color: var(--sub); margin-bottom: 8px; padding: 0; }
code { background: var(--surface3); padding: 1px 6px; border-radius: 3px; }

.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--muted); display: block; text-transform: uppercase; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.center { text-align: center; }
.strong { font-weight: 800; color: var(--text); text-decoration: underline; }
.lead { color: var(--sub); margin: -8px 0 24px; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 18px; background: var(--pri); color: var(--on-pri);
  border: 1px solid var(--pri); border-radius: var(--r-sm); font-weight: 700; text-decoration: none; white-space: nowrap; flex: none;
  transition: opacity .15s, background .15s;
}
.btn:hover { opacity: .86; }
.btn:disabled { opacity: .35; pointer-events: none; }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--line2); }
.btn.ghost:hover { background: var(--surface3); opacity: 1; }
.btn.full { width: 100%; }
.btn.sm { padding: 7px 12px; font-size: 13px; }
.link-btn { background: none; border: 0; padding: 4px 0; text-decoration: underline; text-underline-offset: 3px; color: var(--muted); }
.link-btn:hover { color: var(--text); }
.icon-btn { width: 40px; height: 40px; display: inline-grid; place-items: center; background: none; border: 0; font-size: 20px; text-decoration: none; border-radius: var(--r-sm); color: var(--sub); }
.icon-btn:hover { background: var(--surface3); color: var(--text); }
.icon-btn.sm { width: 30px; height: 30px; font-size: 15px; }
.chip {
  padding: 6px 12px; border: 1px solid var(--line2); background: transparent; font-size: 13px; font-weight: 600;
  border-radius: 999px; white-space: nowrap; color: var(--sub);
}
.chip:hover { color: var(--text); border-color: var(--muted); }
.chip.active { background: var(--pri); color: var(--on-pri); border-color: var(--pri); }
.chips { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 20px; padding-bottom: 2px; scrollbar-width: none; }
.chips.wrap { flex-wrap: wrap; overflow: visible; }
.tag { display: inline-block; padding: 1px 8px; border: 1px solid var(--line2); border-radius: 3px; font-size: 11px; font-weight: 700; color: var(--sub); }
.tag.solid { background: var(--pri); color: var(--on-pri); border-color: var(--pri); }

.seg { display: inline-flex; background: var(--surface2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 2px; }
.seg button { background: none; border: 0; padding: 6px 12px; font-size: 13px; font-weight: 600; color: var(--muted); border-radius: 3px; }
.seg button.on { background: var(--pri); color: var(--on-pri); }
.seg.sm button { padding: 4px 10px; font-size: 12px; }

.row { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.row.end { justify-content: flex-end; }
.row.between { justify-content: space-between; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.grid2.top, .grid3.top { gap: 16px; align-items: start; margin-bottom: 16px; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; }
.card h3 { margin-bottom: 14px; }
.card.narrow { max-width: 520px; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 14px; }
.card-head h3 { margin: 0; }
.more { font-size: 13px; font-weight: 600; text-decoration: none; color: var(--muted); }
.more:hover { color: var(--text); }
.empty { padding: 28px 12px; text-align: center; color: var(--muted); font-size: 14px; border: 1px dashed var(--line2); border-radius: var(--r-sm); }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.kv span { color: var(--muted); }
.kv.top { align-items: flex-start; }
.kv strong { text-align: right; }
.kv .pre { white-space: pre-line; font-weight: 500; }
[data-for] > fieldset .pick-chips, .auth-card fieldset .pick-chips { margin-bottom: 8px; }
.loading { padding: 80px 20px; text-align: center; font-weight: 800; font-size: 13px; letter-spacing: .4em; color: var(--muted); animation: blink 1s infinite alternate; }
@keyframes blink { to { opacity: .3; } }
.banner { background: var(--pri); color: var(--on-pri); padding: 12px 16px; margin-bottom: 16px; font-weight: 700; font-size: 14px; border-radius: var(--r-sm); }
.banner a { color: var(--invert); }

/* avatar */
.avatar {
  width: 36px; height: 36px; flex: none; object-fit: cover; display: inline-grid; place-items: center;
  background: var(--surface3); color: var(--sub); font-weight: 700; border-radius: 50%; vertical-align: middle; filter: grayscale(1);
}
.avatar.sm { width: 26px; height: 26px; font-size: 12px; }
.avatar.lg { width: 64px; height: 64px; font-size: 22px; }
.avatar.xl { width: 112px; height: 112px; font-size: 40px; }
.avatar.card { width: 100%; height: auto; aspect-ratio: 1; border-radius: 0; font-size: 56px; font-weight: 800; color: var(--muted); }

/* ───────── shell ───────── */
.shell { display: grid; grid-template-columns: var(--nav-w) minmax(0, 1fr) var(--search-w); min-height: 100vh; }
.topbar { display: none; }
.nav {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; scrollbar-width: none;
  background: #0a0a0a; border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 26px 0 18px;
}
.logo { display: flex; flex-direction: column; padding: 0 22px 22px; text-decoration: none; font-size: 26px; font-weight: 900; line-height: .95; letter-spacing: -0.04em; }
.logo small { font-size: 11px; font-weight: 500; letter-spacing: .3em; color: var(--muted); margin-top: 8px; }
.team-chip { margin: 0 14px 20px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); display: flex; flex-direction: column; gap: 2px; }
.team-chip .cat { font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--muted); }
.team-chip strong { font-size: 15px; }
.team-chip em { font-style: normal; font-size: 11px; background: var(--pri); color: var(--on-pri); align-self: flex-start; padding: 0 6px; font-weight: 700; border-radius: 3px; }
.nav-list { flex: 1; }
.nav-sec { display: flex; flex-direction: column; margin-bottom: 16px; padding: 0 10px; }
.nav-sec > span { font-size: 10px; font-weight: 700; letter-spacing: .2em; color: #555; padding: 0 12px 6px; }
.nav-sec a { padding: 8px 12px; text-decoration: none; font-weight: 500; font-size: 14px; color: var(--sub); border-radius: var(--r-sm); }
.nav-sec a:hover { color: var(--text); background: var(--surface); }
.nav-sec a.active { color: var(--on-pri); background: var(--pri); font-weight: 700; }
.me-box { border-top: 1px solid var(--line); padding: 16px 22px 0; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.me { display: flex; gap: 10px; align-items: center; text-decoration: none; min-width: 0; }
.me span { display: flex; flex-direction: column; min-width: 0; }
.me strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me small { color: var(--muted); }
.me-box .link-btn { font-size: 12px; }

#view { padding: 32px 36px 80px; min-width: 0; }
.main-col { min-width: 0; }
#sys-notice:empty { display: none; }
#sys-notice { padding: 16px 36px 0; }
.sys-notice { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line2); border-left: 3px solid var(--text); border-radius: var(--r-sm); }
.sys-notice.important { border-color: #b91c1c; border-left-color: #ef4444; background: rgba(239,68,68,.08); }
.sys-tag { flex: none; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: var(--pri); color: var(--on-pri); margin-top: 1px; }
.sys-notice.important .sys-tag { background: #ef4444; color: #fff; }
.sys-body { flex: 1; min-width: 0; font-size: 14px; }
.sys-body p { margin: 4px 0 0; color: var(--sub); line-height: 1.6; }
.admin-stats { display: flex; gap: 10px; margin-bottom: 16px; }
.admin-stats div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 16px; display: flex; flex-direction: column; }
.admin-stats span { font-size: 12px; color: var(--muted); }
.admin-stats strong { font-size: 22px; }
h3.sub { font-size: 13px; color: var(--muted); margin: 14px 0 8px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 26px; }
.page-head h1 { font-size: 30px; font-weight: 800; margin-top: 4px; }
.page-head .actions { display: flex; gap: 8px; }
.page-head input[type=date] { width: auto; }
.sec-title { font-size: 18px; font-weight: 800; margin: 30px 0 14px; display: flex; gap: 8px; align-items: baseline; }
.sec-title small { font-size: 16px; color: var(--muted); font-weight: 600; }

.search-panel {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; scrollbar-width: none;
  background: #0a0a0a; border-left: 1px solid var(--line); padding: 26px 18px;
}
.search-head { margin-bottom: 12px; }
.search-head h3 { margin-top: 4px; }
.search-panel input { margin-bottom: 12px; }
.search-panel .chip { padding: 4px 10px; font-size: 12px; }
.team-results { list-style: none; margin: 8px 0 0; padding: 0; }
.team-results li.muted { padding: 12px 4px; font-size: 13px; }
.team-results a { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px 8px; text-decoration: none; border-radius: var(--r-sm); }
.team-results a:hover { background: var(--surface); }
.team-results .cat { font-size: 11px; font-weight: 700; background: var(--surface3); color: var(--sub); padding: 2px 6px; border-radius: 3px; }
.team-results strong { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team-results .lock { font-size: 11px; color: var(--muted); }
.scrim { display: none; }

/* bare (로그인) */
.bare { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 16px; background: radial-gradient(ellipse at top, #1d1d1d, var(--bg) 60%); }
.brand { font-size: 48px; font-weight: 900; letter-spacing: -0.05em; line-height: .92; text-align: center; margin-bottom: 30px; display: flex; flex-direction: column; }
.brand small { font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: .08em; margin-top: 14px; }
.auth-card { width: 100%; max-width: 400px; }
.auth-card.wide { max-width: 560px; }
.auth-card h2 { font-size: 22px; font-weight: 800; margin-bottom: 18px; }
.setup { max-width: 560px; margin: 15vh auto; padding: 0 20px; }
.setup h1 { font-size: 44px; font-weight: 900; letter-spacing: -0.05em; }

.photo-pick { display: flex; align-items: center; gap: 16px; margin: 20px 0 18px; }
.photo-pick:first-child { margin-top: 0; }
.photo-pick label { margin: 0; }
.role-pick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.guide-link { grid-column: 1 / -1; justify-self: start; margin-top: 2px; }
.modal.wide:has(.guide) { max-width: 760px; }
.guide h2 { margin: 4px 0 6px; }
.guide h3 { margin: 22px 0 8px; font-size: 15px; }
.guide-steps { list-style: none; counter-reset: st; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; }
.guide-steps li { counter-increment: st; position: relative; padding: 12px 14px 12px 46px; border: 1px solid var(--line2); border-radius: var(--r-sm); font-size: 14px; }
.guide-steps li::before { content: counter(st); position: absolute; left: 14px; top: 12px; width: 20px; height: 20px; border-radius: 50%; background: var(--pri); color: var(--on-pri); font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.guide-steps small { display: block; color: var(--muted); margin-top: 3px; font-size: 12px; }
.guide-steps b { font-weight: 700; }
.guide-table { overflow-x: auto; }
.guide-table td:not(:first-child), .guide-table th:not(:first-child) { text-align: center; white-space: nowrap; width: 72px; }
.guide-table .ok { font-weight: 700; }
.guide-table .no { color: var(--muted); }
.role-pick legend { grid-column: 1 / -1; }
.radio-card { margin: 0; border: 1px solid var(--line2); border-radius: var(--r-sm); padding: 12px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; color: var(--text); }
.radio-card input { display: none; }
.radio-card small { font-weight: 400; color: var(--muted); font-size: 11px; }
.radio-card:has(input:checked) { background: var(--pri); color: var(--on-pri); border-color: var(--pri); }
.radio-card:has(input:checked) small { color: #555; }
.switch { display: flex; gap: 10px; align-items: center; cursor: pointer; font-weight: 500; color: var(--text); }
.switch input, .mini-switch input { width: 16px; height: 16px; margin: 0; accent-color: var(--text); flex: none; }

/* ───────── home / morning ───────── */
.morning {
  display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center;
  background: linear-gradient(120deg, #1c1c1c, #121212 60%); border: 1px solid var(--line); border-radius: var(--r);
  padding: 26px 28px; margin-bottom: 16px;
}
.m-date { padding-right: 28px; border-right: 1px solid var(--line2); }
.m-date strong { display: block; font-size: 44px; font-weight: 900; letter-spacing: -0.05em; line-height: 1; margin-top: 6px; }
.m-date strong small { font-size: 15px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.m-clock { font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: .1em; }
.m-hello { min-width: 0; }
.m-hello h1 { font-size: 16px; font-weight: 700; margin-top: 4px; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-hello p { margin: 4px 0 0; color: var(--sub); font-size: 14px; }
.m-stats { display: grid; grid-template-columns: repeat(2, auto); gap: 6px; }
.m-stats a { text-decoration: none; background: var(--surface2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px 12px; min-width: 104px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.m-stats a:hover { border-color: var(--muted); }
.m-stats small { color: var(--muted); font-size: 11px; }
.m-stats strong { font-size: 14px; font-weight: 800; white-space: nowrap; }
.today-strip { display: flex; gap: 8px; margin-bottom: 16px; overflow-x: auto; }
.today-strip a { flex: none; display: flex; gap: 10px; align-items: center; text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 14px; }
.today-strip small { color: var(--muted); }

.dash { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.span2 { grid-column: 1 / -1; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; text-decoration: none; min-height: 160px; display: flex; flex-direction: column; transition: .15s; }
.tile:hover { border-color: var(--text); }
.tile h3 { font-size: 21px; font-weight: 800; margin: 8px 0 auto; }
.tile p { color: var(--muted); margin: 16px 0 0; font-size: 14px; }

/* 홈 섹션 */
.home-sec { display: flex; align-items: baseline; gap: 10px; margin: 26px 0 12px; }
.home-sec h2 { font-size: 20px; font-weight: 800; margin: 0; }
.home-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.home-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home-grid > div > .todo, .hcard { height: 100%; margin: 0; }
.home-grid .todo-list { grid-template-columns: minmax(0, 1fr); }
.hcard .list li { padding: 9px 0; }
.hcard .list .more { white-space: nowrap; }
.hbig { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.hbig strong { font-size: 30px; font-weight: 900; letter-spacing: -0.04em; }
.hbig strong i { font-style: normal; font-size: 16px; color: var(--muted); }
.hbig small { color: var(--muted); }
.halert { background: rgba(255,59,48,.12); border: 1px solid rgba(255,59,48,.35); border-radius: var(--r-sm); padding: 8px 12px; font-size: 13px; display: flex; gap: 8px; }
.halert b { color: #ff6b62; }
.hcard .btn.full { margin-top: 12px; }

/* to-do */
.todo { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; margin-bottom: 4px; }
.todo-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.todo-head > div { display: flex; align-items: baseline; gap: 10px; }
.todo-head h3 { margin: 0; font-size: 15px; }
.todo-add { display: flex; gap: 6px; margin-bottom: 6px; }
.todo-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.todo-list li { display: flex; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }
.todo-list li span { flex: 1; min-width: 0; font-size: 14px; word-break: break-word; }
.todo-list li.done span { text-decoration: line-through; color: var(--muted); }
.todo-list li.done .check { background: var(--pri); color: var(--on-pri); border-color: var(--pri); }
.todo-x { background: none; border: 0; color: var(--muted); font-size: 12px; padding: 4px 6px; border-radius: 3px; opacity: 0; }
.todo-list li:hover .todo-x { opacity: 1; }
.todo-x:hover { color: var(--text); background: var(--surface3); }
.todo .link-btn { margin-top: 8px; }

/* briefing windows */
.brief-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin: 28px 0 14px; flex-wrap: wrap; }
.brief-head h2 { font-size: 22px; font-weight: 800; margin-top: 4px; }
.brief-tools { display: flex; gap: 8px; align-items: center; }
.brief-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.25fr) minmax(0, .9fr); gap: 14px; align-items: stretch; }
.win { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); display: flex; flex-direction: column; min-height: 0; height: 640px; overflow: hidden; }
.win-bar { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px 12px 18px; border-bottom: 1px solid var(--line); background: var(--surface2); }
.win-title { display: flex; align-items: baseline; gap: 10px; }
.win-title .eyebrow { font-size: 10px; }
.win-title h3 { margin: 0; font-size: 15px; }
.win-tools { display: flex; gap: 4px; }
.win-body { flex: 1; overflow-y: auto; min-height: 0; padding: 12px 16px 16px; scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
.win-sub { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 2px 0 10px; font-size: 13px; }
.win-sub a { color: var(--sub); text-decoration: none; }
.count { font-size: 12px; color: var(--muted); font-weight: 600; }
.src-chips { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 10px; }
.src { font-size: 11px; font-weight: 600; padding: 3px 8px; border: 1px solid var(--line2); border-radius: 999px; background: var(--surface3); color: var(--text); }
.src.off { background: transparent; color: var(--muted); text-decoration: line-through; border-color: var(--line); }
.src.on { background: var(--pri); color: var(--on-pri); border-color: var(--pri); }
.src.add { background: transparent; border-style: dashed; color: var(--sub); }
.none { padding: 40px 10px; text-align: center; color: var(--muted); font-size: 14px; }
.skeleton { height: 100%; min-height: 200px; border-radius: var(--r-sm); background: linear-gradient(90deg, var(--surface2), var(--surface3), var(--surface2)); background-size: 200% 100%; animation: shimmer 1.2s infinite linear; }
@keyframes shimmer { to { background-position: -200% 0; } }
.news-list { list-style: none; margin: 0; padding: 0; }
.news-list li { border-bottom: 1px solid var(--line); }
.news-list a { display: flex; flex-direction: column; gap: 3px; padding: 10px 2px; text-decoration: none; }
.news-list a:hover .news-title { text-decoration: underline; text-underline-offset: 3px; }
.news-meta { font-size: 11px; color: var(--muted); display: flex; gap: 8px; }
.news-meta b { color: var(--sub); font-weight: 700; }
.news-title { font-size: 14px; font-weight: 500; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-list li.read .news-title { color: var(--muted); }
.more-btn { width: 100%; margin-top: 10px; background: var(--surface2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 9px; font-size: 13px; color: var(--sub); }
.more-btn:hover { color: var(--text); }
.yt-player { position: relative; aspect-ratio: 16/9; background: #000; border-radius: var(--r-sm); overflow: hidden; margin-bottom: 10px; }
.yt-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-player .none { position: absolute; inset: 0; display: grid; place-items: center; }
.yt-now { font-size: 12px; color: var(--muted); margin-bottom: 12px; }
.yt-now b { color: var(--sub); }
.yt-now p { margin: 4px 0 0; font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.4; }
.mini-switch { display: flex; gap: 6px; align-items: center; margin: 0; font-size: 12px; font-weight: 500; color: var(--sub); cursor: pointer; }
.yt-list { display: flex; flex-direction: column; gap: 2px; }
.yt-list.big { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.yt-list.big .yt-item { flex-direction: column; }
.yt-list.big .yt-thumb { width: 100%; }
.yt-item { display: flex; gap: 10px; text-align: left; background: none; border: 0; padding: 6px; border-radius: var(--r-sm); align-items: flex-start; }
.yt-item:hover { background: var(--surface2); }
.yt-item.on { background: var(--surface3); }
.yt-thumb { width: 128px; flex: none; aspect-ratio: 16/9; border-radius: 3px; overflow: hidden; background: #000; }
.yt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yt-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.yt-info b { font-size: 11px; color: var(--muted); font-weight: 600; }
.yt-info span { font-size: 13px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.yt-info small { font-size: 11px; color: var(--muted); }
.ig-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.ig-tabs .src { flex: none; }
.ig-frame { background: #fff; border-radius: var(--r-sm); overflow: hidden; margin-bottom: 8px; }
.ig-frame iframe { display: block; width: 100%; height: 480px; border: 0; }
.pop-win .win-body { padding: 14px 0 0; overflow: visible; }
.pop-ig .ig-frame iframe { height: 70vh; }
.pop-yt .yt-player { max-height: 60vh; }
.brief-foot { font-size: 12px; color: var(--muted); margin: 10px 2px 0; }

.list { list-style: none; padding: 0; margin: 0; }
.list li { display: flex; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); }
.list li > div { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.list small { color: var(--muted); }
.list.threads li, .sched-list li { cursor: pointer; }
.date-badge { font-size: 13px; font-weight: 800; background: var(--surface3); padding: 4px 8px; min-width: 52px; text-align: center; border-radius: var(--r-sm); }

/* posts */
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.post-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; overflow: hidden; transition: border-color .15s; }
.post-card:hover { border-color: var(--muted); }
.post-card.pinned { border-color: var(--sub); }
.post-card h3 { font-size: 16px; }
.post-card p { margin: 0; color: var(--sub); font-size: 14px; }
.post-card .thumb { aspect-ratio: 16/9; object-fit: cover; filter: grayscale(1); margin: -16px -16px 6px; width: calc(100% + 32px); max-width: none; }
.thumb-pad { margin: -16px -16px 6px; pointer-events: none; }
.post-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; color: var(--muted); }
.prose { font-size: 15px; line-height: 1.75; margin: 14px 0; color: var(--sub); }
.files { padding-left: 0; list-style: none; }
.files li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.video { position: relative; aspect-ratio: 16/9; margin: 16px 0; background: #000; border-radius: var(--r-sm); overflow: hidden; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.timeline { list-style: none; padding: 0; margin: 0 0 12px; }
.timeline li { display: flex; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }

/* training library */
.pick-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pick-chips label { margin: 0; cursor: pointer; }
.pick-chips input { display: none; }
.pick-chips span { display: block; padding: 6px 12px; border-radius: 999px; background: var(--surface2); border: 1px solid var(--line2); color: var(--sub); font-size: 13px; font-weight: 600; }
.pick-chips input:checked + span { background: var(--pri); color: var(--on-pri); border-color: var(--pri); }
.lib-bar { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 10px; }
.lib-bar input[type=search] { max-width: 420px; }
.lib-selects { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.lib-selects select { width: auto; padding: 9px 10px; font-size: 13px; }
.lib-selects .seg button { font-size: 15px; padding: 5px 10px; }
.lib-count { font-size: 13px; color: var(--muted); margin: 4px 2px 12px; }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.lib-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; cursor: pointer; display: flex; flex-direction: column; transition: border-color .15s, transform .15s; }
.lib-card:hover { border-color: var(--muted); transform: translateY(-2px); }
.lib-thumb { position: relative; aspect-ratio: 16 / 10; background: #0b0b0b; overflow: hidden; border-bottom: 1px solid var(--line); }
.lib-thumb > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lib-thumb .pad { margin: 0; height: 100%; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.lib-thumb .pad-svg { width: 100%; height: 100%; }
.lib-thumb .pad-svg { border-radius: 0; }
.thumb-link { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--muted);
  background: repeating-linear-gradient(90deg, #121212 0 36px, #151515 36px 72px); }
.thumb-link span { font-size: 28px; }
.thumb-link b { font-size: 13px; color: var(--sub); }
.lib-body { padding: 14px 16px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.lib-body h3 { font-size: 16px; margin: 0; line-height: 1.35; }
.lib-tags { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.ttag { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 3px; background: var(--surface3); color: var(--text); }
.ttag.more { color: var(--muted); }
.lib-meta { font-size: 12px; color: var(--muted); margin-left: 2px; white-space: pre; }
.lib-foot { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: auto; }
.lib-rows { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.lib-rows li { display: flex; gap: 14px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); cursor: pointer; }
.lib-rows li:last-child { border-bottom: 0; }
.lib-rows li:hover { background: var(--surface2); }
.lib-rows li > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lib-rows small { color: var(--muted); white-space: pre-wrap; }
.tr-detail h2 { margin-bottom: 8px; }
.tr-facts { display: flex; gap: 8px; margin: 14px 0; flex-wrap: wrap; }
.tr-facts div { background: var(--surface2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 14px; display: flex; flex-direction: column; }
.tr-facts small { color: var(--muted); font-size: 11px; }
.tr-visual { display: block; width: 100%; border-radius: var(--r-sm); margin-bottom: 4px; }
img.tr-visual { max-height: 520px; object-fit: contain; background: #0b0b0b; }
.points { margin: 0; padding-left: 22px; }
.points li { padding: 6px 0; font-size: 15px; }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 12px; }
.img-pick { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.img-pick [data-img-preview] img { width: 160px; aspect-ratio: 16/10; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--line2); display: block; }
.img-pick > div:last-child { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.img-pick label { margin: 0; }

/* 훈련장 탭 · 주간 바 · 일일 훈련 */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: -6px 0 20px; }
.tabs a { padding: 10px 16px; text-decoration: none; font-size: 14px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--text); }
.tabs a.on { color: var(--text); border-bottom-color: var(--text); font-weight: 800; }
.week { display: flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 8px; margin-bottom: 18px; }
.week-days { flex: 1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.wday { background: none; border: 1px solid transparent; border-radius: var(--r-sm); padding: 6px 0 5px; display: flex; flex-direction: column; align-items: center; gap: 1px; color: var(--sub); }
.wday:hover { background: var(--surface2); }
.wday small { font-size: 11px; color: var(--muted); }
.wday b { font-size: 18px; font-weight: 800; }
.wday i { width: 5px; height: 5px; border-radius: 50%; }
.wday i.dot { background: var(--sub); }
.wday.today { border-color: var(--line2); }
.wday.on { background: var(--pri); color: var(--on-pri); }
.wday.on small { color: #555; }
.wday.on i.dot { background: var(--invert); }
.week-jump { display: flex; gap: 6px; align-items: center; padding-left: 6px; border-left: 1px solid var(--line); }
.week-jump input { width: auto; padding: 6px 8px; font-size: 13px; }
.day-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.day-head h2 { font-size: 22px; font-weight: 800; display: flex; gap: 8px; align-items: center; }
.plan, .note { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 20px 22px; margin-bottom: 12px; }
.plan-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.plan-head h3 { font-size: 19px; font-weight: 800; margin: 0; }
.plan-head .row { margin: 0; }
.plan-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.plan-meta span { font-size: 13px; background: var(--surface2); border: 1px solid var(--line); padding: 3px 10px; border-radius: 999px; color: var(--sub); }
.plan-goal { margin-top: 16px; background: var(--pri); color: var(--on-pri); border-radius: var(--r-sm); padding: 12px 16px; }
.plan-goal small { font-size: 11px; font-weight: 700; color: #555; }
.plan-goal p { margin: 2px 0 0; font-size: 17px; font-weight: 800; line-height: 1.45; }
.blocks { list-style: none; margin: 16px 0 0; padding: 0; }
.blocks li { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); align-items: flex-start; }
.bno { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--surface3); display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.bmain { flex: 1; min-width: 0; }
.btitle { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btitle strong { font-size: 16px; }
.bmain p { margin: 6px 0 0; color: var(--sub); font-size: 14px; line-height: 1.6; }
.bthumb { flex: none; width: 200px; border-radius: var(--r-sm); overflow: hidden; }
img.bthumb { aspect-ratio: 16/10; object-fit: cover; }
.bthumb.pad { margin: 0; }
.bthumb .pad-svg { border-radius: var(--r-sm); }
.plan-foot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.plan-foot small, .note-grid small { font-size: 11px; font-weight: 700; color: var(--muted); }
.plan-foot p, .note-grid p { margin: 4px 0 0; font-size: 14px; line-height: 1.6; }
.plan-ref { display: flex; flex-direction: column; gap: 2px; background: var(--surface2); border: 1px dashed var(--line2); border-radius: var(--r-sm); padding: 10px 14px; margin-bottom: 12px; font-size: 13px; color: var(--sub); }
.plan-ref small { font-size: 11px; color: var(--muted); font-weight: 700; }
.note-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; margin-top: 14px; }
.day-list li.on { background: var(--surface); }
.day-list li { cursor: pointer; padding-left: 8px; padding-right: 8px; border-radius: var(--r-sm); }
.brow { background: var(--surface2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px; margin-bottom: 8px; }
.brow-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) 72px 30px; gap: 6px; margin-bottom: 6px; align-items: center; }
.brow input, .brow select, .brow textarea { padding: 8px 10px; font-size: 13px; }
.span2c { grid-column: span 2; }

/* 분석실 스튜디오 */
.shell.wide { grid-template-columns: var(--nav-w) minmax(0, 1fr); }
.shell.wide .search-panel { display: none; }
.thumb-badge { position: absolute; top: 8px; right: 8px; font-size: 11px; font-weight: 700; background: rgba(0,0,0,.75); color: #fff; padding: 3px 8px; border-radius: 999px; }
.upload-bar { position: relative; height: 26px; background: var(--surface2); border-radius: var(--r-sm); overflow: hidden; margin-bottom: 10px; }
.upload-bar i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--pri); transition: width .2s; }
.upload-bar span { position: relative; font-size: 12px; font-weight: 700; mix-blend-mode: difference; color: #fff; padding: 0 10px; line-height: 26px; }
.studio { margin-top: -8px; }
.studio-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.st-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.st-title strong { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-title small { color: var(--muted); }
.st-actions { display: flex; gap: 6px; }
.studio-main { display: grid; grid-template-columns: 76px minmax(0, 1fr) 280px; gap: 10px; align-items: start; }
.st-side { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; scrollbar-width: thin; }
/* 타임라인 (영상 편집 프로그램처럼) */
.tl { margin-top: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; user-select: none; }
.tl-bar { display: flex; align-items: center; gap: 8px; padding: 4px 10px; border-bottom: 1px solid var(--line); font-size: 13px; flex-wrap: wrap; }
.tl-bar small { color: var(--muted); }
.tl-tip { color: var(--muted); font-size: 11px; flex: 1; min-width: 0; }
.tl-zoom { display: inline-flex; gap: 4px; }
.tl-zoom .chip { padding: 1px 9px; font-size: 12px; }
.tl-body { display: grid; grid-template-columns: 178px minmax(0, 1fr); max-height: 170px; overflow-y: auto; scrollbar-width: thin; }
.tl-heads { border-right: 1px solid var(--line); background: var(--surface); position: sticky; left: 0; z-index: 3; }
.tl-corner { height: 20px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); z-index: 2; }
.tl-head { height: 25px; display: flex; align-items: center; gap: 6px; padding: 0 4px 0 10px; border-bottom: 1px solid var(--line); font-size: 11.5px; cursor: pointer; }
.tl-head b { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.tl-head .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.tl-head:hover { background: var(--surface2); }
.tl-head.on { background: var(--surface3); }
.tl-empty { padding: 14px 10px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.tl-scroll { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.tl-inner { position: relative; min-width: 100%; cursor: text; }
.tl-ruler { position: relative; top: 0; height: 20px; border-bottom: 1px solid var(--line); background: var(--surface2); z-index: 2; }
.tl-ruler i { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--line2); }
.tl-ruler { z-index: 4; }
.tl-ruler i span { position: absolute; left: 4px; top: 3px; font-size: 10px; color: var(--muted); font-style: normal; white-space: nowrap; font-weight: 600; }
.tl-row { position: relative; height: 25px; border-bottom: 1px solid var(--line); }
.tl-row.on { background: rgba(255,255,255,.035); }
.tl-clip { position: absolute; top: 3px; height: 18px; border-radius: 4px; background: color-mix(in srgb, var(--c) 32%, #161616); border: 1px solid color-mix(in srgb, var(--c) 70%, #000); border-left: 4px solid var(--c); cursor: grab; display: flex; align-items: center; overflow: hidden; touch-action: none; }
.tl-clip.still { background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(255,255,255,.06) 6px 12px); }
.tl-clip span { font-size: 10.5px; font-weight: 700; color: #fff; padding: 0 8px; white-space: nowrap; pointer-events: none; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.tl-clip.on { box-shadow: 0 0 0 2px #fff; z-index: 1; }
.tl-clip:active { cursor: grabbing; }
.tl-grip { position: absolute; right: 0; top: 0; bottom: 0; width: 9px; cursor: ew-resize; background: rgba(255,255,255,.18); }
.tl-grip::after { content: ''; position: absolute; left: 3px; top: 4px; bottom: 4px; width: 1px; background: rgba(255,255,255,.7); box-shadow: 2px 0 0 rgba(255,255,255,.7); }
.tl-play { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #ff3b30; pointer-events: none; z-index: 2; }
.tl-play::before { content: ''; position: absolute; top: 0; left: -5px; border: 6px solid transparent; border-top: 8px solid #ff3b30; }
.studio-main.view-only { grid-template-columns: minmax(0, 1fr); }
/* 영상 아래 편집 칸: 장면별 그림 목록 + 고른 그림 설정 */
.st-dock { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 10px; margin-top: 8px; align-items: start; }
.st-dock.solo { grid-template-columns: minmax(0, 1fr); }
.st-dock-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.st-dock-head h4 { margin: 0; }
.st-dock-head small { font-size: 11px; }
.st-scenes [data-items] { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; max-height: 420px; overflow-y: auto; scrollbar-width: thin; }
.st-empty { grid-column: 1 / -1; margin: 4px 0; }
.st-scene { border: 1px solid var(--line2); border-radius: var(--r-sm); background: var(--surface2); overflow: hidden; }
.st-scene.here { border-color: #4ea1ff; box-shadow: 0 0 0 1px #4ea1ff inset; }
.st-scene-head { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: var(--surface3); cursor: pointer; font-size: 12px; flex-wrap: wrap; }
.st-scene-head b { font-weight: 800; }
.st-scene-t { color: var(--sub); font-weight: 600; }
.st-scene.here .st-scene-head b::after { content: ' · 지금'; color: #4ea1ff; }
.st-scene-hold { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 0 auto; font-size: 11px; color: var(--muted); font-weight: 500; }
.st-scene-hold input { width: 46px; padding: 2px 4px; font-size: 12px; margin: 0; }
.st-scene .st-items li { padding: 6px 8px; border-radius: 0; }
.st-ic { width: 16px; text-align: center; color: var(--sub); font-size: 13px; flex: none; }
.st-mini { background: none; border: 0; color: var(--muted); padding: 1px 4px; font-size: 12px; border-radius: 4px; flex: none; }
.st-mini:hover { color: var(--text); background: var(--surface3); }
.st-btnrow { gap: 6px; flex-wrap: wrap; }
.st-propsec { position: sticky; top: 12px; }
.st-tools { display: flex; flex-direction: column; gap: 3px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 6px; position: sticky; top: 12px; }
.st-tool { display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: 0; border-radius: var(--r-sm); padding: 7px 2px; color: var(--sub); }
.st-tool b { font-size: 17px; line-height: 1; }
.st-tool span { font-size: 10px; font-weight: 600; white-space: nowrap; }
.st-palette { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 0 4px; border-top: 1px solid var(--line); margin-top: 4px; }
.st-palette button { width: 22px; height: 22px; border-radius: 50%; background: var(--c); border: 2px solid var(--line2); padding: 0; }
.st-palette button[data-color^="rgba"], .st-colors button[data-pcolor^="rgba"] { background: conic-gradient(#999 25%, #ddd 0 50%, #999 0 75%, #ddd 0) 0 0 / 8px 8px; position: relative; }
.st-palette button[data-color^="rgba"]::after, .st-colors button[data-pcolor^="rgba"]::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--c); }
.st-palette button.on { border-color: #4ea1ff; box-shadow: 0 0 0 2px rgba(78,161,255,.4); }
.st-tool:hover { background: var(--surface2); color: var(--text); }
.st-tool.on { background: var(--pri); color: var(--on-pri); }
.st-stage { min-width: 0; }
.st-canvas-wrap { position: relative; background: #000; border-radius: var(--r); overflow: hidden; min-height: 240px; }
.st-canvas { position: absolute; top: 0; left: 0; display: block; touch-action: none; cursor: crosshair; }
.view-only .st-canvas { cursor: default; }
.st-hint { position: absolute; left: 10px; top: 10px; font-size: 12px; background: rgba(0,0,0,.7); color: #fff; padding: 5px 10px; border-radius: 999px; pointer-events: none; max-width: calc(100% - 20px); }
.st-hint:empty { display: none; }
.st-shapes { position: absolute; left: 10px; top: 42px; display: flex; gap: 4px; background: rgba(0,0,0,.75); padding: 5px; border-radius: 10px; }
.st-shapes[hidden] { display: none; }
.st-shapes button { display: flex; flex-direction: column; align-items: center; gap: 1px; background: none; border: 1px solid transparent; color: #fff; border-radius: 6px; padding: 4px 8px; font-size: 18px; line-height: 1; }
.st-shapes button small { font-size: 10px; color: #bbb; }
.st-shapes button.on { background: #fff; color: #000; }
.st-shapes button.on small { color: #444; }
.st-rec { position: absolute; right: 12px; top: 10px; font-size: 12px; font-weight: 800; color: #fff; background: #e5484d; padding: 4px 10px; border-radius: 999px; animation: blink 0.8s infinite alternate; }
.st-video { display: block; margin: 0 auto; background: #000; }
.st-transport { display: flex; align-items: center; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 6px 10px; margin-top: 8px; }
.st-transport select { width: auto; padding: 5px 6px; font-size: 12px; }
.st-time { font-size: 12px; color: var(--sub); white-space: nowrap; min-width: 82px; text-align: center; font-weight: 600; }
.st-timeline { position: relative; flex: 1; height: 28px; display: flex; align-items: center; }
.st-timeline input { position: relative; z-index: 2; padding: 0; border: 0; background: transparent; accent-color: var(--text); }
.st-marks { position: absolute; left: 0; right: 0; bottom: 1px; height: 4px; }
.st-marks i { position: absolute; height: 4px; border-radius: 2px; opacity: .8; }
.st-side { display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - 120px); overflow-y: auto; position: sticky; top: 12px; scrollbar-width: thin; }
.st-sec { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; }
.st-sec h4 { margin: 0 0 10px; color: var(--text); font-size: 13px; }
.st-sec h4 small { color: var(--muted); font-weight: 500; }
.st-sec .mini-switch { margin-bottom: 8px; }
.st-range { display: flex; flex-direction: column; gap: 4px; font-size: 12px; margin-bottom: 10px; }
.st-range input, .st-range select { margin: 0; padding: 6px 8px; font-size: 12px; }
.st-range input[type=range] { padding: 0; border: 0; background: transparent; accent-color: var(--text); }
.st-keyrow { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.st-keyrow small { color: var(--muted); font-size: 11px; }
.st-swatch { width: 22px; height: 22px; border-radius: 4px; flex: none; border: 1px solid var(--line2); }
.st-colors { display: flex; gap: 6px; margin-bottom: 10px; }
.st-colors button { width: 24px; height: 24px; border-radius: 50%; background: var(--c); border: 2px solid var(--line2); padding: 0; }
.st-colors button.on { border-color: #4ea1ff; box-shadow: 0 0 0 2px rgba(78,161,255,.4); }
.st-items { list-style: none; margin: 0; padding: 0; }
.st-items li { display: flex; gap: 8px; align-items: center; padding: 7px 6px; border-radius: var(--r-sm); cursor: pointer; font-size: 12px; }
.st-items li:hover { background: var(--surface2); }
.st-items li.on { background: var(--surface3); }
.st-items li > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.st-items li b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-items li small { color: var(--muted); font-size: 11px; }
.st-items .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.st-num { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; margin-bottom: 8px; }
.st-num > span { color: var(--sub); min-width: 74px; }
.st-num input[type=number] { width: 64px; padding: 5px 6px; font-size: 12px; margin: 0; }
.st-num input:disabled { opacity: .4; }
.st-num i { font-style: normal; color: var(--muted); }
.st-num small { color: var(--muted); font-size: 11px; }
.st-num .mini-switch { margin: 0 0 0 4px; }
.st-num .chip { padding: 3px 8px; font-size: 11px; }
.st-timebtns { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-bottom: 10px; font-size: 12px; }
.st-timebtns span { width: 100%; color: var(--sub); font-weight: 700; }
.st-timebtns .chip { padding: 3px 8px; font-size: 11px; }
.st-gridin label { font-size: 11px; margin-bottom: 8px; }
.st-gridin input { padding: 6px 8px; font-size: 12px; }
.yt-analysis { max-width: 980px; }

/* 보여주기 모드 */
.present { position: fixed; inset: 0; z-index: 80; background: #050505; color: #fff; display: flex; flex-direction: column; padding: 28px 36px; }
.present header { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 20px; }
.present header > div:first-child { flex: 1; }
.present h1 { font-size: clamp(28px, 4vw, 56px); font-weight: 900; letter-spacing: -0.04em; margin-top: 6px; }
.present-facts { display: flex; gap: 8px; }
.present-facts span { font-size: clamp(14px, 1.4vw, 20px); font-weight: 800; background: #1d1d1d; padding: 8px 16px; border-radius: var(--r-sm); white-space: nowrap; }
.present-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 32px; }
.present-body.no-visual { grid-template-columns: 1fr; }
.present-visual { min-height: 0; display: flex; align-items: center; justify-content: center; }
.present-visual img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--r); }
.present-visual .pad { width: 100%; margin: 0; }
.present-side { overflow-y: auto; }
.present-side h2 { font-size: clamp(18px, 1.8vw, 26px); color: #999; font-weight: 800; margin-bottom: 14px; }
.present-side ol { margin: 0; padding: 0; list-style: none; counter-reset: p; }
.present-side li { counter-increment: p; display: flex; gap: 16px; font-size: clamp(20px, 2.3vw, 34px); font-weight: 800; line-height: 1.3; letter-spacing: -0.03em; padding: 14px 0; border-bottom: 1px solid #222; }
.present-side li::before { content: counter(p); flex: none; width: 1.4em; height: 1.4em; display: grid; place-items: center; background: #fff; color: #000; border-radius: 50%; font-size: .8em; }
.present-text { font-size: clamp(18px, 2vw, 28px); line-height: 1.6; }

/* calendar */
.cal-head { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 12px; }
.cal-head h2 { font-size: 24px; font-weight: 800; min-width: 140px; text-align: center; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-bottom: 20px; }
.cal-dow { font-size: 12px; font-weight: 700; text-align: center; padding: 8px; background: var(--surface2); color: var(--muted); }
.cal-cell { min-height: 96px; background: var(--surface); padding: 6px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal-cell.off { background: #121212; }
.cal-cell .d { font-size: 13px; font-weight: 700; color: var(--sub); }
.cal-cell.today .d { background: var(--pri); color: var(--on-pri); padding: 1px 6px; border-radius: 3px; align-self: flex-start; }
.cal-item { text-align: left; font-size: 11px; border: 0; border-left: 3px solid var(--c, var(--line2)); background: color-mix(in srgb, var(--c, #888) 22%, var(--surface2)); color: var(--text); padding: 2px 5px; border-radius: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-cell { cursor: pointer; }
.cal-cell.picked { outline: 2px solid var(--text); outline-offset: -2px; }
.sched-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.legend { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.lg { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line2); background: transparent; font-size: 12px; font-weight: 600; color: var(--sub); }
.lg i { width: 10px; height: 10px; border-radius: 50%; }
.lg.on { background: var(--pri); color: var(--on-pri); border-color: var(--pri); }
.sched-list li { border-left: 4px solid var(--c, transparent); padding-left: 10px; }
.sched-note { margin: 14px 0 6px; border-left: 3px solid var(--text); }
.sched-note textarea { width: 100%; resize: vertical; min-height: 96px; line-height: 1.6; }
.sched-note .prose { margin: 6px 0 0; white-space: pre-wrap; color: var(--text); }
.sched-note .row.end { margin-top: 8px; }
.sched-add { margin: 0 0 6px; }
.sched-add-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 12px; }
.sched-add-grid .wide { grid-column: span 2; }
.sched-add-grid .full { grid-column: 1 / -1; }

/* tactic pad */
.pad { margin-bottom: 14px; }
.pad-field { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.pad-field select { width: auto; padding: 6px 8px; font-size: 12px; }
.pad-size { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--muted); }
.pad-size[hidden] { display: none; }
.pad-size input { width: 54px; padding: 6px 6px; font-size: 12px; text-align: center; }
.pad-size input:disabled { opacity: .45; }
.pad-size i { font-style: normal; }
.pad-tools { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
.ptool { display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; font-size: 12px; font-weight: 600; border-radius: var(--r-sm); border: 1px solid var(--line2); background: var(--surface2); color: var(--sub); }
.ptool b { font-size: 12px; width: 14px; text-align: center; }
.ptool:hover { color: var(--text); }
.ptool.on { background: var(--pri); color: var(--on-pri); border-color: var(--pri); }
.pad-teams { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-bottom: 6px; }
.pad-teams[hidden] { display: none; }
.pteam { min-width: 30px; height: 30px; padding: 0 8px; border-radius: 999px; background: var(--c); color: var(--t); border: 2px solid var(--line2); font-size: 11px; font-weight: 800; }
.pteam.on { border-color: #4ea1ff; box-shadow: 0 0 0 2px rgba(78,161,255,.35); }
.pad-teams small { color: var(--muted); margin-left: 4px; }
.pad-acts { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.pad-acts .chip { padding: 4px 10px; font-size: 12px; }
.pad-acts .chip[hidden] { display: none; }
.pad-acts small { font-size: 11px; margin-left: 4px; }
.pad-svg { display: block; width: 100%; max-height: 78vh; border-radius: var(--r-sm); touch-action: none; user-select: none; outline: none; }
.present-visual .pad-svg { max-height: calc(100vh - 180px); }
.pad-svg.vert { max-height: 88vh; }
.pad-svg text { font-family: var(--font); pointer-events: none; }
.pad-svg .it { cursor: pointer; }

/* game model */
.gm { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; align-items: start; }
.captains { display: flex; gap: 24px; margin-bottom: 8px; }
.captain { display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; }
.captain .badge { position: absolute; top: 44px; right: -4px; background: var(--pri); color: var(--on-pri); font-weight: 800; padding: 0 6px; font-size: 12px; border-radius: 3px; }
.captain small { color: var(--muted); }

/* roster */
.roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.pcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; cursor: pointer; display: flex; flex-direction: column; transition: border-color .15s; }
.pcard:hover { border-color: var(--muted); }
.pcard-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 2px; }
.pcard-top { display: flex; justify-content: space-between; align-items: center; }
.num { font-size: 20px; font-weight: 900; line-height: 1; letter-spacing: -0.04em; }
.pos { font-size: 11px; font-weight: 700; background: var(--surface3); color: var(--sub); padding: 1px 6px; border-radius: 3px; }
.pcard strong { font-size: 15px; }
.pcard small { color: var(--muted); }
.pcard-actions { display: flex; gap: 6px; margin-top: 8px; }
.pcard-actions .chip { flex: 1; padding: 4px 6px; }
.profile-view { display: flex; gap: 22px; align-items: flex-start; }
.profile-view > div { flex: 1; }
.profile-view h2 { font-size: 24px; margin-bottom: 10px; }

/* goals */
.goals { list-style: none; padding: 0; margin: 0 0 12px; }
.goals li { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.goals li > div { flex: 1; display: flex; flex-direction: column; }
.goals li small { color: var(--muted); }
.goals li.done strong { text-decoration: line-through; color: var(--muted); }
.check { width: 22px; height: 22px; border: 1px solid var(--line2); border-radius: 4px; background: transparent; flex: none; font-weight: 900; padding: 0; font-size: 12px; }
.goals li.done .check { background: var(--pri); color: var(--on-pri); border-color: var(--pri); }
.pct { font-size: 24px; font-weight: 900; letter-spacing: -0.04em; }
.bar { height: 6px; background: var(--surface3); margin-bottom: 12px; border-radius: 3px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--pri); }
.inline-form { display: flex; gap: 6px; align-items: stretch; margin-top: 8px; }
.inline-form input[type=date] { width: 150px; flex: none; }

/* goals */
.goal-summary { display: grid; grid-template-columns: 1.6fr repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-bottom: 14px; }
.goal-summary > div { background: var(--surface); padding: 16px; display: flex; flex-direction: column; gap: 3px; }
.goal-summary small { color: var(--muted); font-size: 12px; }
.goal-summary strong { font-size: 28px; font-weight: 900; letter-spacing: -0.04em; }
.goal-summary strong i { font-style: normal; font-size: 15px; color: var(--muted); }
.goal-summary .gs-main { background: var(--pri); color: var(--on-pri); }
.goal-summary .gs-main strong { font-size: 48px; }
.goal-summary .gs-main small, .goal-summary .gs-main strong i { color: #555; }
.goal-summary .gs-main .bar { background: #ccc; margin: 6px 0; }
.goal-summary .gs-main .bar i { background: var(--invert); }
.goal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.goal-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.goal-card.clickable { cursor: pointer; }
.goal-card.clickable:hover { border-color: var(--muted); }
.goal-card.done { border-color: var(--sub); }
.goal-card header { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.goal-card h3 { font-size: 16px; margin: 0; line-height: 1.4; }
.goal-card p { margin: 0; font-size: 13px; color: var(--sub); line-height: 1.55; }
.goal-card p b { color: var(--text); }
.goal-card footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; border-top: 1px solid var(--line); }
.goal-card footer select { width: auto; padding: 5px 8px; font-size: 12px; }
.dday { font-size: 11px; font-weight: 800; color: var(--muted); }
.gstatus { margin-left: auto; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: var(--surface3); color: var(--sub); }
.gstatus.done { background: var(--pri); color: var(--on-pri); }
.gstatus.miss { background: transparent; border: 1px solid var(--line2); color: var(--muted); }
.stamp { font-size: 11px; font-weight: 800; color: var(--text); border: 2px solid var(--text); border-radius: 4px; padding: 0 6px; transform: rotate(-4deg); }
.gprog .bar { margin-bottom: 6px; }
.gnums { display: flex; align-items: baseline; gap: 6px; }
.gnums strong { font-size: 22px; font-weight: 900; letter-spacing: -0.03em; }
.gnums span { color: var(--muted); font-size: 13px; }
.gbtns { margin-left: auto; display: flex; gap: 4px; }
.gbtns .chip { padding: 3px 10px; }
.my-goal-hero { display: flex; justify-content: space-between; align-items: center; gap: 16px; background: linear-gradient(120deg, #1c1c1c, #121212); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 24px; margin-bottom: 16px; }
.my-goal-hero h2 { font-size: 22px; margin: 4px 0; }
.my-goal-hero p { margin: 0; color: var(--sub); font-size: 14px; }
.kid-form label { font-size: 15px; color: var(--text); }
.pgoal-list { display: flex; flex-direction: column; gap: 14px; }
.pgoal { background: var(--surface2); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; }
.pgoal > header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pgoal > header small { color: var(--muted); }
.pgoal > header .tag { margin-left: auto; }

/* records */
.stat-board { display: grid; grid-template-columns: 1.6fr repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-bottom: 14px; }
.stat-board.small { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.stat-board > div { padding: 18px; background: var(--surface); display: flex; flex-direction: column; gap: 2px; }
.stat-board strong { font-weight: 900; font-size: 36px; line-height: 1.05; letter-spacing: -0.05em; }
.stat-board strong i { font-style: normal; font-size: 18px; color: var(--muted); font-weight: 700; }
.stat-board small { color: var(--muted); }
.stat-board .big { background: var(--pri); color: var(--on-pri); }
.stat-board .big small, .stat-board .big strong i { color: #555; }
.stat-board .big strong { font-size: 60px; }
.wdl { display: flex; height: 6px; margin: 8px 0 6px; background: #ccc; border-radius: 3px; overflow: hidden; }
.wdl .w { background: var(--invert); }
.wdl .d { background: #888; }
.wdl .l { background: #ccc; }
.form-line { display: flex; gap: 4px; align-items: center; margin-bottom: 16px; font-size: 13px; font-weight: 600; color: var(--sub); }
.res { display: inline-grid; place-items: center; width: 22px; height: 22px; font-size: 11px; font-weight: 800; border-radius: 3px; border: 1px solid var(--line2); }
.res.W { background: var(--pri); color: var(--on-pri); border-color: var(--pri); }
.res.D { background: var(--surface3); }
.res.L { background: transparent; color: var(--muted); }
.rank { padding: 0; margin: 0; list-style: none; counter-reset: r; }
.rank li { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--line); counter-increment: r; }
.rank li span::before { content: counter(r); font-weight: 800; display: inline-block; width: 24px; color: var(--muted); }
.rank li strong { font-weight: 900; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; padding: 8px 6px; border-bottom: 1px solid var(--line2); white-space: nowrap; }
.tbl td { padding: 10px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr.muted td { color: var(--muted); }
.card > .tbl { display: block; overflow-x: auto; }
.picks .pick { display: flex; gap: 6px; margin-bottom: 6px; }
.picks .pick input { width: 80px; }

/* daily */
.scale { display: flex; gap: 4px; margin-bottom: 16px; flex-wrap: wrap; }
.scale label { margin: 0; flex: 1; min-width: 36px; }
.scale input { display: none; }
.scale span { display: flex; flex-direction: column; align-items: center; border: 1px solid var(--line2); border-radius: var(--r-sm); padding: 8px 2px; font-size: 16px; font-weight: 800; cursor: pointer; color: var(--text); }
.scale span small { font-size: 11px; font-weight: 500; color: var(--muted); }
.scale input:checked + span { background: var(--pri); color: var(--on-pri); border-color: var(--pri); }
.scale input:checked + span small { color: #555; }
.card h3 small { font-weight: 400; display: block; margin-top: 2px; }
.coach-note { border: 1px solid var(--line2); border-radius: var(--r-sm); padding: 12px; margin-bottom: 14px; background: var(--surface2); }
.coach-note p { margin: 8px 0 0; }
.trend { display: grid; grid-template-columns: 70px 1fr 44px; gap: 10px; align-items: end; margin-bottom: 16px; }
.trend > span { font-size: 13px; font-weight: 600; color: var(--sub); align-self: center; }
.trend strong { font-size: 20px; font-weight: 900; text-align: right; }
.bars { height: 54px; display: flex; gap: 3px; align-items: flex-end; border-bottom: 1px solid var(--line2); }
.bars i { flex: 1; background: var(--pri); border-radius: 2px 2px 0 0; }
.trend-dates { display: flex; justify-content: space-between; margin-left: 80px; margin-right: 54px; font-size: 11px; color: var(--muted); }

/* daily journal — 제출 상태 · 경기 일지 */
.jstatus { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-radius: var(--r-sm); margin-bottom: 12px; font-size: 14px; font-weight: 700; background: var(--surface2); border: 1px solid var(--line); }
.jstatus small { color: var(--muted); font-weight: 500; }
.jstatus.sent { border-color: var(--sub); }
.jstatus.done { background: var(--pri); color: var(--on-pri); }
.jstatus.done small { color: #555; }
.jtabs { margin: 0 0 14px; }
.dot-on { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--pri); vertical-align: middle; margin-left: 4px; }
.mj-game { display: flex; align-items: center; gap: 10px; background: var(--surface2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 14px; margin-bottom: 12px; }
.mj-game strong { font-size: 16px; }
.mj-game b { font-size: 20px; font-weight: 900; letter-spacing: -0.03em; }
.mj-game small { color: var(--muted); margin-left: auto; }
.mj-scene { background: var(--surface2); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; margin-bottom: 10px; }
.mj-scene-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.mj-scene label { margin: 8px 0 0; }
.mj-scene.read p { margin: 6px 0 0; font-size: 14px; }
.daily-save .btn.ghost { background: var(--surface); }

.day-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; margin-bottom: 16px; }
.day-pick { display: flex; align-items: center; gap: 10px; padding: 0 8px; }
.day-pick strong { font-size: 18px; font-weight: 800; white-space: nowrap; }
.day-pick input { width: auto; min-width: 0; flex: 0 1 auto; padding: 6px 8px; font-size: 13px; }
.day-chips { width: 100%; display: flex; gap: 5px; align-items: center; flex-wrap: wrap; padding-top: 8px; border-top: 1px solid var(--line); }
.day-chips small { color: var(--muted); margin-right: 4px; }
.day-chips .chip { padding: 3px 10px; font-size: 12px; }
.sess.with-vis { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.sess.with-vis .sess-vis { order: 2; }
.sess-main { min-width: 0; }
.sess.with-vis .sess-fields { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.sess.with-vis .sess-fields textarea { min-height: 44px; }
.sess-vis { background: #0b0b0b; border: 1px solid var(--line2); border-radius: var(--r-sm); overflow: hidden; cursor: pointer; display: flex; flex-direction: column; transition: border-color .15s; }
.sess-vis:hover { border-color: var(--text); }
.sess-vis img { width: 100%; aspect-ratio: 16 / 10; object-fit: contain; background: #0b0b0b; display: block; }
.sess-vis .pad { margin: 0; pointer-events: none; }
.sess-vis .pad-svg { border-radius: 0; max-height: none; }
.sess-vis > span { font-size: 12px; font-weight: 700; text-align: center; padding: 6px; background: var(--surface2); color: var(--sub); }
.sess-vis ol { margin: 0; padding: 8px 12px 10px 28px; font-size: 12px; color: var(--sub); background: var(--surface); }
.sess-vis li { padding: 2px 0; }
.daily .card h4 { color: var(--text); }
.journal { margin-top: 16px; }
.jplan { margin-bottom: 14px; }
.jplan-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.jplan-head strong { font-size: 17px; }
.jplan-head small { color: var(--muted); }
.jplan .plan-goal { margin: 0 0 10px; }
.sess { background: var(--surface2); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; margin-bottom: 10px; }
.sess header { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.sess header > div { display: flex; flex-direction: column; }
.sess header small { color: var(--muted); }
.sess-desc { margin: 0 0 8px 38px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.sess-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.sess-row > span { font-size: 13px; font-weight: 600; color: var(--sub); min-width: 150px; }
.sess-row .scale { margin: 0; flex: 1; min-width: 260px; }
.sess-row .scale span { padding: 5px 2px; font-size: 14px; }
.sess-fields label { margin-bottom: 0; }
.sess.read p { margin: 4px 0 0; font-size: 14px; line-height: 1.5; }
.sess.read header { justify-content: space-between; }
.jsum { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 6px; }
.jsum h4 { margin-top: 0; }
.daily-save { position: sticky; bottom: 12px; }
.daily-save .btn { box-shadow: 0 8px 24px rgba(0,0,0,.5); padding: 12px 28px; }

/* 일지검사 카드 */
.jcards { display: flex; flex-direction: column; gap: 10px; container-type: inline-size; }
.jcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 18px; display: grid;
  grid-template-columns: 200px minmax(330px, 1fr) 170px 180px; grid-template-areas: 'who stats meta btn'; gap: 14px 18px; align-items: center; }
.jcard > header { grid-area: who; }
.jcard > .jstats, .jcard > p.muted { grid-area: stats; }
.jcard > .jmeta { grid-area: meta; }
.jcard > .btn { grid-area: btn; }
/* 목록 폭이 좁으면 몸 상태를 아래 줄로 */
@container (max-width: 920px) {
  .jcard { grid-template-columns: minmax(0, 1fr) auto 170px; grid-template-areas: 'who meta btn' 'stats stats stats'; }
}
@container (max-width: 560px) {
  .jcard { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'who' 'meta' 'stats' 'btn'; }
}
.jcard > p.muted { margin: 0; }
.jmeta { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.jcard.none, .jcard.draft { opacity: .6; }
.jcard.sent { border-color: var(--sub); }
.jcard.warn { box-shadow: inset 4px 0 0 #ff3b30; }
.jcard header { display: flex; align-items: center; gap: 12px; min-width: 0; }
.jcard header > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.jcard header strong { font-size: 20px; font-weight: 800; }
.jcard header small { color: var(--muted); }
.jbadge { font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: var(--surface3); color: var(--sub); white-space: nowrap; }
.jbadge.sent { background: var(--pri); color: var(--on-pri); }
.jbadge.done { background: transparent; border: 1px solid var(--line2); }
.jstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.jstats > div { background: var(--surface2); border-radius: var(--r-sm); padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.jstats small { font-size: 11px; color: var(--muted); }
.jstats b { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; }
.jstats .dots { font-size: 9px; letter-spacing: 1px; color: var(--sub); white-space: nowrap; }
.jstats > div { min-width: 0; }
.jstats small { white-space: nowrap; }
.jstats b i { font-style: normal; font-size: 12px; color: var(--muted); }
.jstats em { font-style: normal; font-size: 11px; color: var(--sub); }
.jstats .hot { background: rgba(255,59,48,.15); }
.jwhat { margin: 0; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.jcard .btn { padding: 12px; font-size: 15px; }

.kind-pick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.kind-pick > span { font-weight: 800; font-size: 15px; margin-right: 4px; }
.kind-pick label { margin: 0; cursor: pointer; }
.kind-pick input { display: none; }
.kind-pick label b { display: inline-flex; align-items: center; padding: 10px 18px; border-radius: var(--r-sm); border: 1px solid var(--line2); font-size: 15px; }
.kind-pick label small { display: block; font-size: 11px; color: var(--muted); text-align: center; margin-top: 3px; }
.kind-pick input:checked + b { background: var(--pri); color: var(--on-pri); border-color: var(--pri); }
.kind-pick em { font-style: normal; font-size: 12px; color: var(--muted); margin-left: auto; }
.mylogs { margin-top: 16px; }
.mylog-list { list-style: none; margin: 0; padding: 0; }
.mylog-list li { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-bottom: 1px solid var(--line); cursor: pointer; border-radius: var(--r-sm); }
.mylog-list li:hover, .mylog-list li.on { background: var(--surface2); }
.mylog-list li > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mylog-list small { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* counsel & chat */
.bubbles { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; max-height: 50vh; overflow-y: auto; }
.bubble { background: var(--surface2); border-radius: var(--r); padding: 12px; max-width: 85%; }
.bubble small { display: block; color: var(--muted); margin-bottom: 4px; }
.bubble.me { align-self: flex-end; background: var(--pri); color: var(--on-pri); }
.bubble.me small { color: #555; }
.chats a { display: flex; gap: 12px; align-items: center; text-decoration: none; width: 100%; }
.chats a > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chats .last { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-room { display: flex; flex-direction: column; height: calc(100vh - 112px); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.chat-head { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.chat-head div { display: flex; flex-direction: column; }
.chat-head small { color: var(--muted); }
.msgs { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 8px; background: var(--bg); }
.msg { max-width: 72%; display: flex; flex-direction: column; }
.msg p { margin: 0; padding: 9px 13px; background: var(--surface3); border-radius: 14px 14px 14px 4px; word-break: break-word; }
.msg small { color: var(--muted); font-size: 11px; margin-top: 2px; }
.msg.me { align-self: flex-end; align-items: flex-end; }
.msg.me p { background: var(--pri); color: var(--on-pri); border-radius: 14px 14px 4px 14px; }
.chat-input { display: flex; gap: 6px; padding: 10px; border-top: 1px solid var(--line); }

/* scout */
.scout-list { display: grid; gap: 12px; }
.scout-teams a.chip, .chat-members .chip { text-decoration: none; }
.scout { display: flex; gap: 18px; align-items: flex-start; }
.scout-body { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.scout-body h3 { margin: 0; }
.scout-body textarea { margin-top: 6px; font-size: 14px; }
.scout-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }

/* billing */
.price-box { background: var(--surface2); border: 1px solid var(--line2); border-radius: var(--r); padding: 18px; margin: 18px 0; display: flex; flex-direction: column; }
.price-box span { font-size: 13px; color: var(--muted); }
.price-box strong { font-size: 36px; font-weight: 900; letter-spacing: -0.04em; line-height: 1.15; }
.price-box small { color: var(--muted); }
.code-big { font-size: clamp(26px, 6vw, 44px); font-weight: 800; letter-spacing: .12em; font-family: ui-monospace, 'SF Mono', Menlo, monospace; overflow-wrap: anywhere; text-align: center; background: var(--surface2); border: 1px solid var(--line2); border-radius: var(--r); padding: 12px; margin: 14px 0; cursor: pointer; user-select: all; }
.code-input { font-size: clamp(20px, 5vw, 28px); font-weight: 700; text-align: center; letter-spacing: .15em; font-family: ui-monospace, 'SF Mono', Menlo, monospace; margin: 14px 0; }

/* modal & toast */
.modal-wrap { position: fixed; inset: 0; background: rgba(0,0,0,.72); backdrop-filter: blur(4px); display: flex; align-items: flex-start; justify-content: center; padding: 5vh 16px; overflow-y: auto; z-index: 50; }
.modal { background: var(--surface); border: 1px solid var(--line2); border-radius: var(--r); box-shadow: 0 24px 60px rgba(0,0,0,.6); width: 100%; max-width: 560px; padding: 28px; position: relative; }
.modal.wide { max-width: 1040px; }
.modal h2 { font-size: 22px; font-weight: 800; margin: 4px 0 10px; }
.modal-x { position: absolute; top: 12px; right: 12px; background: none; border: 0; font-size: 16px; width: 34px; height: 34px; border-radius: var(--r-sm); color: var(--muted); }
.modal-x:hover { background: var(--surface3); color: var(--text); }
.confirm-msg { font-size: 16px; font-weight: 600; margin: 8px 0 20px; }
#toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); background: var(--pri); color: var(--on-pri); padding: 12px 20px; font-weight: 700; font-size: 14px; border-radius: var(--r-sm); opacity: 0; pointer-events: none; transition: .2s; z-index: 60; max-width: calc(100% - 32px); }
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ───────── responsive ───────── */
@media (max-width: 1560px) {
  .morning { grid-template-columns: auto 1fr; row-gap: 16px; }
  .m-stats { grid-column: 1 / -1; grid-template-columns: repeat(4, auto); justify-content: start; }
}
@media (max-width: 1320px) and (min-width: 1201px) {
  .m-hello h1 { font-size: 15px; white-space: normal; }
}
@media (max-width: 1440px) {
  .brief-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
  .win-ig { grid-column: 1 / -1; height: auto; }
  .win-ig .win-body { overflow: visible; }
}
@media (max-width: 1200px) {
  .shell { grid-template-columns: var(--nav-w) minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .topbar { position: sticky; top: 0; z-index: 30; grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; background: rgba(10,10,10,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); padding: 4px 8px; }
  .logo-sm { font-size: 16px; font-weight: 900; letter-spacing: -0.03em; text-decoration: none; }
  .topbar [data-toggle="nav-open"] { visibility: hidden; }
  .nav { grid-row: 2; height: calc(100vh - 49px); top: 49px; }
  .search-panel { position: fixed; right: 0; top: 0; width: min(320px, 88vw); z-index: 40; transform: translateX(100%); visibility: hidden; transition: transform .2s, visibility .2s; }
  .shell.search-open .search-panel { transform: none; visibility: visible; }
  .shell.search-open .scrim { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 35; }
  .stat-board { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat-board .big { grid-column: 1 / -1; }
  .gm { grid-template-columns: 1fr; }
  .morning { grid-template-columns: auto 1fr; }
  .m-stats { grid-column: 1 / -1; grid-template-columns: repeat(4, auto); justify-content: start; }
}
@media (max-width: 860px) {
  .shell, .shell.wide { grid-template-columns: minmax(0, 1fr); }
  .topbar [data-toggle="nav-open"] { visibility: visible; }
  .nav { position: fixed; left: 0; top: 0; height: 100vh; width: min(280px, 84vw); z-index: 40; transform: translateX(-100%); visibility: hidden; transition: transform .2s, visibility .2s; }
  .shell.nav-open .nav { transform: none; visibility: visible; }
  .shell.nav-open .scrim { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 35; }
  #view { padding: 20px 16px 80px; }
  #sys-notice { padding: 12px 16px 0; }
  .page-head h1 { font-size: 24px; }
  .page-head { flex-wrap: wrap; }
  .morning { grid-template-columns: 1fr; gap: 14px; padding: 20px; }
  .m-date { border-right: 0; padding-right: 0; display: flex; align-items: baseline; gap: 10px; }
  .m-date strong { font-size: 30px; margin: 0; }
  .m-hello h1 { font-size: 14px; white-space: normal; }
  .m-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brief-grid { grid-template-columns: minmax(0, 1fr); }
  .win { height: auto; max-height: none; }
  .win-news .win-body { max-height: 520px; }
  .win-yt .yt-list { max-height: 420px; overflow-y: auto; }
  .ig-frame iframe { height: 440px; }
  .dash, .tiles, .grid3, .grid2.top { grid-template-columns: minmax(0, 1fr); }
  .stat-board, .stat-board.small { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-board strong { font-size: 30px; }
  .cal-cell { min-height: 60px; padding: 4px; }
  .cal-item { font-size: 0; height: 5px; padding: 0; }
  .role-pick { grid-template-columns: 1fr; }
  .profile-view { flex-direction: column; align-items: center; text-align: center; }
  .profile-view > div { width: 100%; text-align: left; }
  .roster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scout { flex-wrap: wrap; }
  .scout-actions { flex-direction: row; width: 100%; justify-content: flex-end; }
  .chat-room { height: calc(100vh - 130px); }
  .modal { padding: 22px 16px; }
  .inline-form { flex-wrap: wrap; }
  .inline-form input:first-child { flex-basis: 100%; }
  .yt-thumb { width: 112px; }
  .studio { margin: 0; }
  .studio-main, .studio-main.view-only { grid-template-columns: minmax(0, 1fr); }
  .st-tools { flex-direction: row; overflow-x: auto; position: static; order: 0; }
  .st-tool { min-width: 58px; }
  .st-palette { flex-direction: row; border-top: 0; border-left: 1px solid var(--line); padding: 0 6px; margin: 0; }
  .st-side { position: static; max-height: none; }
  .tl-body { grid-template-columns: 120px minmax(0, 1fr); }
  .tl-tip { display: none; }
  .tl-head .st-ic { display: none; }
  .st-actions .btn { padding: 6px 8px; font-size: 12px; }
  .week { flex-wrap: wrap; }
  .week-jump { width: 100%; border-left: 0; padding: 6px 0 0; justify-content: flex-end; }
  .blocks li { flex-wrap: wrap; }
  .bthumb { width: 100%; margin-left: 42px; max-width: calc(100% - 42px); }
  .plan-foot, .note-grid { grid-template-columns: 1fr; }
  .brow-top { grid-template-columns: 1fr 64px 30px; }
  .brow-top [data-prog] { grid-column: 1 / -1; }
  .plan, .note { padding: 16px; }
  .plan-head { flex-direction: column; }
  .lib-bar input[type=search] { max-width: none; }
  .lib-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .lib-body { padding: 10px 12px; }
  .sched-add-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sched-add-grid .wide { grid-column: 1 / -1; }
  .home-grid, .home-grid.two { grid-template-columns: minmax(0, 1fr); }
  .sess.with-vis { grid-template-columns: minmax(0, 1fr); }
  .sess.with-vis .sess-vis { order: 0; }
  .day-pick { width: 100%; order: -1; padding: 0; flex-wrap: wrap; gap: 8px; }
  .goal-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .goal-summary .gs-main { grid-column: 1 / -1; }
  .my-goal-hero { flex-direction: column; align-items: flex-start; }
  .lib-body h3 { font-size: 14px; }
  .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .present { padding: 18px; }
  .present header { flex-wrap: wrap; }
  .present-body { grid-template-columns: 1fr; overflow-y: auto; }
  .todo-list { grid-template-columns: minmax(0, 1fr); }
  .todo-x { opacity: 1; }
}
@media (max-width: 480px) {
  .grid2 { grid-template-columns: 1fr; }
  .brand { font-size: 40px; }
}
.img-pick [data-img-preview]:empty { display: none; }
.field-hint { margin: -6px 0 12px; }

.field-error { margin: -4px 0 14px; padding: 12px 14px; border: 1px solid #b91c1c; background: rgba(239,68,68,.1); border-radius: var(--r-sm); color: #fca5a5; font-size: 13px; line-height: 1.5; }
.field-error .row { margin-top: 10px; }
.field-error .btn { text-decoration: none; }
/* 데모 전용: 받은 메일 미리보기 */
.demo-mail { position: fixed; right: 20px; bottom: 20px; z-index: 80; max-width: 380px; }
.demo-mail-card { background: #fff; color: #111; border-radius: 10px; padding: 16px 18px; box-shadow: 0 12px 40px rgba(0,0,0,.5); display: grid; gap: 6px; font-size: 13px; }
.demo-mail-card .eyebrow { color: #666; }
.demo-mail-card small { color: #777; }
.demo-mail-card p { margin: 4px 0 8px; line-height: 1.6; }
.demo-mail-card .btn { background: #111; color: #fff; text-decoration: none; justify-self: start; display: inline-block; }
.demo-mail-card .btn.ghost { background: transparent; color: #111; border-color: #ccc; }

/* 운영자 */
.admin-tabs { display: flex; gap: 6px; margin-bottom: 18px; }
.admin-tabs a { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line2); text-decoration: none; font-size: 13px; font-weight: 600; color: var(--sub); }
.admin-tabs a.active { background: var(--pri); color: var(--on-pri); border-color: var(--pri); }
.admin-stats { flex-wrap: wrap; align-items: stretch; }
.admin-stats small { font-size: 11px; color: var(--muted); }
.admin-more { align-self: center; font-size: 13px; margin-left: 6px; }
.admin-filter { margin: 0 0 12px; }
.admin-filter input { flex: 1; margin: 0; }
.admin-filter select { width: 160px; margin: 0; }
.admin-table-wrap { padding: 4px 12px; overflow-x: auto; }
.admin-table { width: 100% !important; display: table; }
.admin-table a { text-decoration: none; }
.tag.warn { border-color: #b45309; color: #fbbf24; }
@media (max-width: 720px) {
  .admin-table thead { display: none; }
  .admin-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .admin-table td { border: 0; padding: 2px 0; font-size: 13px; }
  .admin-table td::before { content: attr(data-l); display: block; font-size: 11px; color: var(--muted); }
  .admin-table td:first-child { grid-column: 1 / -1; }
}

.tag.comp { background: var(--pri); color: var(--on-pri); border-color: var(--pri); }
.tcode { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12px; letter-spacing: .04em; }
.admin-table td:last-child { text-align: right; white-space: nowrap; }
.comp-periods { margin: 14px 0 6px; }

/* 운영자 문의 */
.support-link { display: flex; flex-direction: column; gap: 2px; text-decoration: none; margin-bottom: 18px; }
.support-link small { color: var(--muted); }
.support-room { display: flex; flex-direction: column; height: min(62vh, 560px); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.support-room .msgs { flex: 1; }
.dot-n { display: inline-block; min-width: 18px; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: #ef4444; color: #fff; font-size: 11px; font-weight: 800; text-align: center; }
.inbox { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 14px; align-items: start; }
.inbox-list li.on a { background: var(--surface2); }
.inbox-list a > small:last-child { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.inbox-room .chat-head { border: 1px solid var(--line); border-bottom: 0; border-radius: var(--r) var(--r) 0 0; background: var(--surface); }
.inbox-room .chat-head + div .support-room { border-radius: 0 0 var(--r) var(--r); }
.inbox-room > .muted { padding: 40px 0; }
.fb-list { display: grid; gap: 10px; }
.fb header { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.fb header strong { margin-left: 4px; }
.fb > p { margin: 10px 0 0; line-height: 1.7; color: var(--sub); }
.fb-reply { margin-top: 12px; padding: 12px 14px; border-left: 3px solid var(--text); background: var(--surface2); border-radius: var(--r-sm); }
.fb-reply p { margin: 4px 0 0; }
.fb-admin { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 12px; }
.fb-admin textarea { width: 100%; }
.fb-admin select { width: auto; margin: 0; }
@media (max-width: 860px) {
  .inbox { grid-template-columns: minmax(0, 1fr); }
  .inbox.has-cur .inbox-list { display: none; }
}
.inbox-list a { padding: 10px 12px; border-radius: var(--r-sm); }

/* 자격증 칩 ↔ '그 외 자격증' 칸 간격 */
fieldset .pick-chips + input, fieldset .pick-chips + textarea { margin-top: 12px; }
/* 대화 목록의 '팀' 표시가 한 줄 전체로 늘어나지 않게 */
.chats .tag { display: inline-block; width: auto; align-self: flex-start; margin: 2px 0; }
/* 팀 페이지 '팀에 연락하기' 버튼 아래 간격 */
.hero .row { margin: 14px 0 6px; }
.hero + .lead, .hero + .card { margin-top: 18px; }

/* ── 휴대폰 최적화 ── */
@media (max-width: 720px) {
  /* iPhone 은 16px 보다 작은 입력칸을 누르면 화면이 확대됨 → 16px */
  input, select, textarea { font-size: 16px; }
  /* 손가락으로 누르기 쉬운 크기 */
  .btn, .chip, .pick-chips span, .nav-sec a { min-height: 40px; }
  .btn, .chip { display: inline-flex; align-items: center; justify-content: center; }
  .pick-chips span { display: flex; align-items: center; }
  .modal-wrap { padding: 12px; }
  .modal { padding: 22px 18px; }
  .page-head { flex-wrap: wrap; }
  .chat-room { height: calc(100dvh - 96px); }
  .support-room { height: calc(100dvh - 260px); min-height: 360px; }
  .admin-stats div { flex: 1 1 40%; }
  .admin-filter { flex-wrap: wrap; }
  .admin-filter select { width: 100%; }
  .demo-mail { left: 12px; right: 12px; bottom: 12px; max-width: none; }
  /* 홈 화면 앱으로 열 때 아이폰 상단 상태바 · 노치 영역 */
  .topbar { padding-top: calc(4px + env(safe-area-inset-top)); }
  .nav, .search-panel { padding-top: env(safe-area-inset-top); }
  /* 아이폰 하단 홈 바 영역 */
  #view { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
}

/* 분석실 AI 트래킹 · 수동 트래킹 */
.st-aipanel { margin-top: 8px; background: var(--surface); border: 1px solid var(--line2); border-left: 3px solid #4ea1ff; border-radius: var(--r); padding: 10px 12px; display: grid; gap: 8px; }
.st-aipanel:has(.man-ctl) { border-left-color: #ff9f0a; }
.ai-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.ai-row b { font-size: 13px; }
.ai-row small { color: var(--muted); }
.ai-row > .btn { margin-left: auto; }
.man-ctl select { width: auto; margin: 0; padding: 5px 8px; font-size: 12px; }
.man-ctl .mini-switch { margin: 0; font-size: 12px; }
.st-prog { height: 6px; background: var(--surface3); border-radius: 3px; overflow: hidden; }
.st-prog i { display: block; height: 100%; background: #4ea1ff; transition: width .15s; }
.st-marks b { position: absolute; bottom: -3px; width: 3px; height: 10px; margin-left: -1px; background: #ff9f0a; border-radius: 1px; }
.ai-line { font-size: 11px; color: var(--muted); margin: -4px 0 8px; }
.ai-line.ready { color: #34c759; }
.ai-line.loading { color: #ffd400; }
.ai-line.failed, .ai-line.warn { color: #ff6b5e; }
.tr-row { flex-wrap: wrap; }
.tr-row > div:not(.tr-acts):not(.tr-gaps) { flex: 1; min-width: 0; }
.tr-acts { display: flex; flex-wrap: wrap; gap: 4px; width: 100%; padding-left: 18px; margin-top: 4px; }
.tr-acts .chip { font-size: 11px; padding: 3px 9px; }
.st-aipanel[hidden] { display: none; }

.st-mode { font-size: 11px; font-weight: 800; color: #ff9f0a; border: 1px solid #ff9f0a; border-radius: 999px; padding: 2px 9px; align-self: center; }

/* 내 일지 모아보기: PDF 고르기 */
.ml-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.ml-tools .btn { margin-left: auto; }
.mylog-list li { gap: 10px; }
.ml-check { margin: 0; display: flex; align-items: center; padding: 4px; cursor: pointer; }
.ml-check input { width: 18px; height: 18px; accent-color: var(--text); margin: 0; }

/* PDF 로 찍을 쪽 (화면 밖에서 흰 바탕으로 그림) */
.pdf-wrap { position: fixed; left: -12000px; top: 0; width: 760px; pointer-events: none; }
.pdf-page {
  --text: #111; --sub: #333; --muted: #6b6b6b; --bg: #fff; --surface: #f6f6f6; --surface2: #efefef; --surface3: #e6e6e6;
  --line: #dddddd; --line2: #cccccc; --invert: #fff;
  background: #fff; color: #111; padding: 34px 38px; font-family: var(--font); font-size: 14px; line-height: 1.65;
}
.pdf-page h1 { font-size: 22px; margin: 18px 0 2px; color: #111; }
.pdf-page h4 { color: #111; margin: 16px 0 6px; }
.pdf-head { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #111; padding-bottom: 10px; font-size: 13px; color: #333; }
.pdf-brand { font-weight: 900; letter-spacing: -0.02em; color: #111; }
.pdf-st { margin: 0 0 12px; color: #6b6b6b; font-size: 12px; }
.pdf-body-state { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 10px 0 6px; }
.pdf-body-state div { border: 1px solid #ddd; border-radius: 6px; padding: 8px 10px; display: flex; flex-direction: column; }
.pdf-body-state span { font-size: 11px; color: #6b6b6b; }
.pdf-page .tag.solid { background: #111; color: #fff; }
.pdf-page .coach-note { margin-top: 16px; }
.pdf-foot { margin-top: 26px; padding-top: 8px; border-top: 1px solid #ddd; font-size: 11px; color: #999; text-align: right; }
.pdf-page [data-view-pad] { max-width: 270px; margin: 6px auto 0; }
.pdf-page .mj-scene { break-inside: avoid; }

/* 개인정보 처리방침 · 동의 */
.policy-card { max-width: 860px; }
.policy h3 { font-size: 15px; margin: 22px 0 8px; }
.policy p, .policy li { font-size: 14px; line-height: 1.75; color: var(--sub); }
.policy ul { padding-left: 18px; margin: 6px 0; }
.policy .tbl th { white-space: normal; width: 30%; color: var(--text); font-weight: 600; vertical-align: top; }
.policy .tbl td { font-size: 13px; color: var(--sub); vertical-align: top; }
.modal .policy { max-height: 62vh; overflow-y: auto; padding-right: 6px; }
.agree { border: 1px solid var(--line2); border-radius: var(--r-sm); padding: 12px 14px; margin: 14px 0; display: grid; gap: 8px; }
.agree legend { padding: 0 6px; font-weight: 700; font-size: 13px; }
.agree .chk { display: flex; gap: 8px; align-items: center; margin: 0; font-size: 13px; font-weight: 500; flex-wrap: wrap; }
.agree .chk input { width: 18px; height: 18px; margin: 0; accent-color: var(--text); flex: none; }
.agree .chk.all { border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.agree .birth { margin: 6px 0 0; }
.agree [data-for] { display: grid; gap: 8px; }
.agree [data-for][hidden] { display: none; }
.consent-link { display: flex; gap: 6px; margin: 12px 0; }
.consent-link input { margin: 0; font-size: 12px; }
.consent-sum { display: grid; gap: 8px; margin: 14px 0; }
.consent-sum div { background: var(--surface2); border-radius: var(--r-sm); padding: 10px 12px; }
.consent-sum span { font-size: 11px; font-weight: 700; color: var(--muted); }
.consent-sum p { margin: 2px 0 0; font-size: 13px; line-height: 1.6; }
.me-foot { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 12px; }
.danger-link { color: #ff6b5e; }
.btn.danger { background: #d92d20; border-color: #d92d20; color: #fff; }

/* 미팅룸 자료 링크 */
.links-box { border: 1px solid var(--line2); border-radius: var(--r-sm); padding: 10px 12px; display: grid; gap: 6px; }
.links-box legend { padding: 0 6px; font-weight: 700; font-size: 13px; }
.link-row { display: grid; grid-template-columns: 1fr 2fr; gap: 6px; }
.link-row input { margin: 0; }
@media (max-width: 720px) { .link-row { grid-template-columns: 1fr; } }
.local-gate { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 1000px; }
.local-gate h3 { margin-top: 0; }
.file-btn { margin-top: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
@media (max-width: 860px) { .local-gate { grid-template-columns: 1fr; } }
.wait-box { border-color: #ff9f0a; margin-bottom: 18px; }
.wait-box h3 { margin-top: 0; }
.wait-box li { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.wait-box li > div { display: flex; flex-direction: column; }
.wait-banner { display: block; text-decoration: none; margin-bottom: 14px; border-color: #ff9f0a; }

/* 기록실 필터 · 표 */
.rec-filters { display: grid; gap: 6px; margin-bottom: 18px; }
.rec-filters .chips { margin: 0; align-items: center; flex-wrap: wrap; }
.chip-label { font-size: 12px; font-weight: 700; color: var(--muted); width: 34px; flex: none; }
.rec-tables { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; margin: 14px 0; }
.rec-tables .tbl th, .rec-tables .tbl td { white-space: nowrap; }
.rec-tables .card { overflow-x: auto; }
.me-acts { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.install-line { margin-top: 14px; }
.help-row { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.help-who { margin: 14px 0 6px; font-size: 13px; color: var(--muted); }
.captains { flex-wrap: wrap; }
.help-btn { position: relative; }
.help-btn.new::after { content: ''; position: absolute; top: -3px; right: -3px; width: 8px; height: 8px; border-radius: 50%; background: #ff9f0a; box-shadow: 0 0 0 2px var(--bg); }
.feat-row { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line2); border-radius: var(--r-sm); padding: 10px 12px; margin: 0; cursor: pointer; }
.feat-row input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--text); }
.feat-row span { display: flex; flex-direction: column; gap: 2px; }
.feat-row small { color: var(--muted); font-weight: 400; }
.wellness-fields { margin-top: 6px; }

/* 경기분석 */
.ma-tabs { margin: 0 0 12px; }
.ma-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(360px, 1fr); gap: 14px; align-items: start; }
.ma-body.wide { grid-template-columns: minmax(0, 1fr); }
.ma-vwrap { position: relative; background: #000; border-radius: var(--r); overflow: hidden; }
.ma-vwrap video { display: block; width: 100%; max-height: 62vh; }
.ma-ai { position: absolute; left: 0; top: 0; cursor: crosshair; }
.ma-ctl { display: flex; align-items: center; gap: 6px; margin-top: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 6px 10px; }
.ma-ctl input[type=range] { flex: 1; margin: 0; }
.ma-ctl select { width: auto; margin: 0; padding: 4px 6px; font-size: 12px; }
.ma-novideo { text-align: center; }
.ma-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
.ma-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.seg { display: inline-flex; border: 1px solid var(--line2); border-radius: 999px; overflow: hidden; }
.seg button { background: transparent; color: var(--sub); border: 0; padding: 7px 14px; font-weight: 700; font-size: 13px; cursor: pointer; }
.seg button.on { background: var(--pri); color: var(--on-pri); }
.ma-kinds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ma-kinds button { display: flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--line2); color: var(--text); border-radius: var(--r-sm); padding: 8px; font-size: 12px; font-weight: 700; cursor: pointer; }
.ma-kinds button i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; }
.ma-kinds button kbd { margin-left: auto; font-size: 10px; color: var(--muted); }
.ma-kinds button.on { border-color: var(--c); box-shadow: inset 0 0 0 1px var(--c); background: var(--surface2); }
.ma-hint { margin: 0; }
.ma-pitch { width: 100%; display: block; border-radius: var(--r-sm); }
.ma-pitch .pf { fill: #2f6b31; }
.ma-pitch .pl { fill: none; stroke: rgba(255,255,255,.7); stroke-width: .35; }
.ma-pitch .pl .third { stroke-dasharray: 1 1; stroke: rgba(255,255,255,.3); }
.ma-pitch.tag { cursor: crosshair; }
.ma-dirtxt { fill: rgba(255,255,255,.85); font-size: 3px; font-weight: 700; text-anchor: middle; }
.ma-pitch .hv { fill: #fff; font-size: 3.2px; font-weight: 800; text-anchor: middle; }
.ma-pitch .star { fill: #34c759; font-size: 4.5px; text-anchor: middle; }
.ma-keys kbd, .ma-hint kbd { background: var(--surface3); border-radius: 3px; padding: 0 4px; font-size: 11px; }
.ma-h { margin: 4px 0 0; }
.ma-log { max-height: 280px; overflow-y: auto; }
.ma-log li { display: flex; gap: 8px; align-items: center; padding: 6px 4px; font-size: 13px; }
.ma-log li small { color: var(--muted); flex: 1; }
.ma-tag { font-size: 11px; font-weight: 800; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--c) 25%, transparent); color: var(--text); border: 1px solid var(--c); }
.ma-forms { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.ma-sum ul { margin: 0; padding-left: 18px; line-height: 1.8; }
.ma-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 6px; margin-top: 12px; }
.ma-counts div { background: var(--surface2); border-radius: var(--r-sm); padding: 8px 10px; display: flex; flex-direction: column; }
.ma-counts span { font-size: 11px; color: var(--muted); }
.ma-counts b { font-size: 20px; }
.ma-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.ma-grid h3 small { font-weight: 500; color: var(--muted); font-size: 12px; }
.ma-bar { display: grid; grid-template-columns: 90px 1fr 44px 28px; gap: 8px; align-items: center; margin: 10px 0; font-size: 13px; }
.ma-bar span { display: flex; flex-direction: column; font-weight: 700; }
.ma-bar span small { color: var(--muted); font-weight: 500; font-size: 11px; }
.ma-bar div { height: 10px; background: var(--surface3); border-radius: 5px; overflow: hidden; }
.ma-bar i { display: block; height: 100%; background: #ff3b30; }
.ma-bar small { color: var(--muted); }
.ma-flow { display: flex; gap: 6px; align-items: flex-end; height: 140px; }
.ma-flow > div { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.ma-flow .cols { flex: 1; width: 100%; display: flex; gap: 2px; align-items: flex-end; }
.ma-flow .cols i { flex: 1; border-radius: 3px 3px 0 0; min-height: 2px; }
.ma-flow .cols i.a { background: #ff3b30; } .ma-flow .cols i.b { background: #4ea1ff; }
.ma-flow small { font-size: 11px; color: var(--muted); margin-top: 4px; }
@media (max-width: 1000px) { .ma-body { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) { .ma-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ma-log li.new { background: color-mix(in srgb, #ffd400 18%, transparent); border-radius: var(--r-sm); }
.sample-banner { background: #ffd400; color: #111; margin: 0 0 12px; }
.ma-check { border-color: #34c759; }
.ma-check ol { margin: 0; padding-left: 20px; line-height: 1.9; font-size: 15px; }
.ma-check h3 small { font-weight: 500; color: var(--muted); font-size: 12px; }

/* 분석실 첫 화면: 끌어다 놓기 · 소개 */
.an-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 2px dashed var(--line2); border-radius: var(--r); padding: 38px 16px; margin: 0 0 18px; cursor: pointer; text-align: center; background: var(--surface); transition: border-color .15s, background .15s; }
.an-drop b { font-size: 17px; }
.an-drop span { color: var(--muted); font-size: 13px; }
.an-drop.small { padding: 16px; flex-direction: row; gap: 12px; }
.an-drop.small b { font-size: 14px; }
.an-drop:hover, .an-drop.over { border-color: var(--text); background: var(--surface2); }
.an-intro { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-bottom: 18px; }
.an-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.an-card h3 { margin: 0; }
.an-card ul { margin: 4px 0; padding-left: 18px; line-height: 1.8; font-size: 14px; color: var(--sub); }
.an-card .btn { align-self: flex-start; }
.an-ill { width: 100%; border-radius: 6px; }
.an-mini { background: var(--surface2); padding: 14px; display: grid; gap: 8px; }
.an-mini div { display: grid; grid-template-columns: 52px 1fr 40px; gap: 8px; align-items: center; font-size: 12px; }
.an-mini div i { height: 9px; background: #ff3b30; border-radius: 5px; display: block; }
.an-mini p { margin: 4px 0 0; font-size: 13px; color: var(--text); }
.an-choose { display: grid; gap: 10px; margin-top: 12px; }
.an-choose button { text-align: left; background: var(--surface2); border: 1px solid var(--line2); color: var(--text); border-radius: var(--r); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; }
.an-choose button:hover { border-color: var(--text); }
.an-choose span { color: var(--muted); font-size: 13px; }

/* 경기분석: 실시간 리포트 · 안내 · 체험 */
.ma-livecard h4 { margin: 0 0 6px; }
.ma-livecard h4 small, .ma-try h4 small { color: var(--muted); font-weight: 500; font-size: 12px; }
.ma-livesum { margin: 8px 0 0; font-size: 13px; line-height: 1.6; }
.tour-on { position: relative; z-index: 61; outline: 3px solid #ffd400; outline-offset: 4px; border-radius: 8px; box-shadow: 0 0 0 9999px rgba(0,0,0,.55); }
.tour-bubble { position: fixed; z-index: 62; width: 320px; background: #ffd400; color: #111; border-radius: 12px; padding: 14px 16px; box-shadow: 0 12px 40px rgba(0,0,0,.5); font-size: 14px; line-height: 1.6; }
.tour-bubble p { margin: 0 0 10px; }
.tour-bubble .btn { background: #111; color: #fff; border-color: #111; }
.tour-bubble .link-btn { color: #333; }
.ma-try-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, 1fr); gap: 14px; align-items: start; }
.ma-try-grid > div:last-child { display: grid; gap: 12px; }
.ma-try .ma-tagpitch { margin: 10px 0; }
.ma-try .lead { font-size: 15px; }
.ma-try-cta { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 16px; border-color: var(--text); }
.ma-try-cta h3 { margin: 0 0 4px; }
.ma-pitch .pop { animation: pop .35s ease-out; transform-box: fill-box; transform-origin: center; }
@keyframes pop { from { transform: scale(2.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (max-width: 900px) { .ma-try-grid { grid-template-columns: minmax(0, 1fr); } .ma-try-cta { flex-direction: column; align-items: flex-start; } }

/* 분석실 첫 화면: 움직이는 소개 카드 */
.an-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; margin: 4px 0 18px; }
.an-hcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; }
.an-hill { background: #1e4a20; padding: 14px; display: grid; gap: 10px; }
.an-hill { height: 210px; }
.an-hill svg { width: 100%; height: 100%; display: block; border-radius: 6px; }
.an-hill.two { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; }
.an-hero.compact .an-hill { height: 170px; }
@media (max-width: 600px) { .an-hero .an-hill, .an-hero.compact .an-hill { height: auto; } .an-hill.two { grid-template-columns: minmax(0, 1fr); } }
.an-htext { padding: 16px 20px 18px; display: flex; flex-direction: column; gap: 8px; }
.an-htext h3 { margin: 0; font-size: 20px; }
.an-htext p { margin: 0; color: var(--sub); font-size: 14px; line-height: 1.7; }
.an-htext .row { gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.an-htext .link-btn { align-self: flex-start; }
.an-tag { font-size: 5px; font-weight: 800; fill: #ffd400; text-anchor: middle; }
.an-dir { font-size: 5px; fill: rgba(255,255,255,.8); text-anchor: middle; font-weight: 700; }
.an-bob { animation: an-bob .8s ease-in-out infinite alternate; }
@keyframes an-bob { to { transform: translateY(-1.5px); } }
.an-draw { stroke-dasharray: 50; stroke-dashoffset: 50; animation: an-draw 4s infinite; }
@keyframes an-draw { 0%, 55% { stroke-dashoffset: 50; } 80%, 100% { stroke-dashoffset: 0; } }
.an-draw-head { opacity: 0; animation: an-head 4s infinite; }
@keyframes an-head { 0%, 78% { opacity: 0; } 82%, 100% { opacity: 1; } }
.an-zone { opacity: 0; animation: an-zone 4s infinite; }
@keyframes an-zone { 0%, 82% { opacity: 0; } 90%, 100% { opacity: 1; } }
.an-tap { opacity: 0; transform-box: fill-box; transform-origin: center; animation: an-tap 5s infinite both; }
@keyframes an-tap { 0% { opacity: 0; transform: scale(2.5); } 6% { opacity: 1; transform: scale(1); } 85% { opacity: 1; } 100% { opacity: 0; } }
.an-hbars { display: grid; gap: 6px; }
.an-hbars div { display: grid; grid-template-columns: 46px 1fr 36px; gap: 8px; align-items: center; font-size: 12px; color: #dfe; }
.an-hbars i { display: block; height: 8px; border-radius: 4px; background: #ff3b30; width: 0; animation: an-bar 5s infinite; }
.an-hbars div:nth-child(3) i { background: #ffd400; }
@keyframes an-bar { 0%, 30% { width: 0; } 60%, 92% { width: var(--w); } 100% { width: 0; } }
.an-type { margin: 4px 0 0; color: #fff; font-size: 13px; font-weight: 600; line-height: 1.5; clip-path: inset(0 100% 0 0); animation: an-type 5s steps(24) infinite; }
@keyframes an-type { 0%, 55% { clip-path: inset(0 100% 0 0); } 85%, 96% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } }
.an-libh { font-size: 18px; margin: 8px 0 6px; }
/* 경기분석 카드 미리보기 */
.ma-thumb { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 12px 14px; background: linear-gradient(160deg, #234f25, #17351a); color: #fff; }
.ma-thumb-top { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; margin-bottom: 2px; }
.ma-thumb-top b { background: rgba(255,255,255,.15); padding: 1px 8px; border-radius: 10px; }
.ma-tbar { display: grid; grid-template-columns: 40px 1fr 32px; gap: 6px; align-items: center; font-size: 11px; }
.ma-tbar i { height: 7px; border-radius: 4px; background: #ff3b30; display: block; min-width: 2px; }
.ma-tbar b { text-align: right; }
.ma-thumb .muted { color: rgba(255,255,255,.6); }
/* 선수 체크 포인트 */
.ma-check.big h3 { font-size: 19px; }
.ma-check.big ol { font-size: 15px; line-height: 1.9; }
/* 부분분석 체험 */
.cp-stage svg { width: 100%; max-height: 62vh; display: block; border-radius: 6px; touch-action: none; cursor: crosshair; margin-bottom: 8px; }
.cp-stage [data-p] { cursor: pointer; }
.cp-hint { stroke: #ffd400; stroke-width: .8; animation: cp-hint 1s ease-in-out infinite alternate; }
@keyframes cp-hint { to { stroke-width: 2.2; } }
@media (prefers-reduced-motion: reduce) { .an-draw, .an-draw-head, .an-zone, .an-tap, .an-hbars i, .an-type { animation: none; opacity: 1; stroke-dashoffset: 0; clip-path: none; } .an-hbars i { width: var(--w); } }
@media (max-width: 600px) { .an-hero { grid-template-columns: minmax(0, 1fr); } }

/* 작전판 움직임 */
.pad-motion { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; font-size: 13px; }
.pad-motion[hidden] { display: none; }
.pad-motion small { flex-basis: 100%; }
.pad-motion .pm-scenes { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.pad-motion.view small { flex-basis: auto; }
.pm-dots { display: inline-flex; gap: 5px; }
.pm-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line2); }
.pm-dots i.on { background: var(--pri); }

/* 게임모델 패턴 */
.gm-pats { margin-top: 22px; }
.gm-pats .card-head h2 { margin: 0; font-size: 20px; }
.gm-pats .chips { margin: 10px 0 14px; }
.pat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.pat-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; cursor: pointer; transition: border-color .15s, transform .15s; }
.pat-card:hover { border-color: var(--muted); transform: translateY(-2px); }
.pat-card .pad { margin: 0; pointer-events: none; }
.pat-body { padding: 10px 12px 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pat-body strong { flex-basis: 100%; font-size: 15px; }
.present-visual .pad-svg.vert { max-height: calc(100vh - 180px); }

.pad-sz { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.pad-sz[hidden] { display: none; }
.pad-sz b { min-width: 40px; text-align: center; color: var(--text); }
.pad-sz .chip { padding: 2px 10px; }

/* 데이터실 */
.dr-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.dr-dates { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.dr-dates input { width: auto; padding: 6px 8px; font-size: 13px; }
.dr-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.dr-tiles > div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.dr-tiles small { color: var(--muted); font-size: 12px; }
.dr-tiles b { font-size: 26px; font-weight: 900; }
.dr-tiles b i, .dr-avg i, .dr-heat i { font-style: normal; font-size: 12px; color: var(--muted); font-weight: 600; margin-left: 2px; }
.dr-tiles span { font-size: 12px; color: var(--muted); }
.dr-tiles .hot b { color: #ff453a; }
.dr-chart { width: 100%; display: block; }
.dr-gl { stroke: var(--line); stroke-width: 1; }
.dr-yt { font-size: 11px; fill: var(--muted); text-anchor: end; }
.dr-xt { font-size: 11px; fill: var(--muted); text-anchor: middle; }
.dr-scroll { overflow-x: auto; margin: 4px 0 8px; }
.dr-heat { border-collapse: separate; border-spacing: 2px; font-size: 12px; min-width: 100%; }
.dr-heat th { font-weight: 600; color: var(--muted); padding: 4px 6px; white-space: nowrap; font-size: 11px; }
.dr-heat tbody th { text-align: left; color: var(--text); font-size: 13px; position: sticky; left: 0; background: var(--surface); z-index: 1; }
.dr-heat td { min-width: 30px; height: 28px; text-align: center; border-radius: 4px; background: var(--surface2); color: #fff; font-weight: 700; }
.dr-heat td.avg { background: none; color: var(--text); white-space: nowrap; }
.dr-heat tbody tr { cursor: pointer; }
.dr-heat tbody tr:hover th { text-decoration: underline; }
.dr-who { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.dr-who select { width: auto; min-width: 200px; }
.dr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; margin-bottom: 14px; }
.dr-grid .card { margin: 0; }
.dr-grid h4 { margin: 0; }
.dr-avg { font-size: 22px; font-weight: 900; }
.dr-watch li { cursor: pointer; display: flex; justify-content: space-between; gap: 10px; }
.hot { color: #ff453a; }

/* 데이터실 · AI 리포트 · 선수 상태 카드 */
.dr-h { font-size: 17px; margin: 22px 0 10px; }
.dr-h small { font-size: 12px; font-weight: 500; }
.dr-ai { border-color: var(--line2); background: linear-gradient(160deg, rgba(78,161,255,.08), transparent 60%), var(--surface); }
.dr-ai h3 { margin: 2px 0 2px; font-size: 20px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dr-ai-head { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.dr-ai-sum { display: flex; gap: 8px; }
.dr-ai-sum span { display: flex; flex-direction: column; align-items: center; min-width: 64px; padding: 8px 10px; border-radius: 10px; background: var(--surface2); border-top: 3px solid var(--c); font-size: 12px; color: var(--muted); }
.dr-ai-sum b { font-size: 22px; color: var(--c); font-weight: 900; }
.dr-ai-lead { font-size: 15px; margin: 12px 0; }
.dr-ai-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; }
.dr-ai-g { background: var(--surface2); border-radius: 10px; padding: 12px 14px; border-left: 4px solid var(--muted); }
.dr-ai-g.high { border-left-color: #ff453a; } .dr-ai-g.mid { border-left-color: #ff9f0a; } .dr-ai-g.low { border-left-color: #4ea1ff; }
.dr-ai-g h4 { margin: 0 0 6px; font-size: 14px; } .dr-ai-g h4 small { color: var(--muted); font-weight: 500; }
.dr-ai-g ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dr-ai-g li { font-size: 13px; line-height: 1.55; display: grid; gap: 1px; }
.dr-ai-g li[data-pl] { cursor: pointer; } .dr-ai-g li[data-pl]:hover strong { text-decoration: underline; }
.dr-ai-g li strong { font-size: 14px; }
.dr-ai-g li em, .dr-ai-list em { font-style: normal; color: var(--muted); font-size: 12px; display: block; }
.dr-ai-note { margin: 12px 0 0; }
.dr-badge { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 10px; background: var(--c); color: #000; }
.dr-ai.one { border-left: 4px solid var(--c); }
.dr-ai-list { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; }
.dr-ai-list li { display: grid; grid-template-columns: 150px 1fr; gap: 10px; background: var(--surface2); border-radius: 8px; padding: 10px 12px; font-size: 14px; }
.dr-ai-list li > span { font-weight: 700; font-size: 13px; }
.dr-players { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.dr-pc { background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--c); border-radius: var(--r); padding: 12px 14px; cursor: pointer; display: grid; gap: 8px; transition: transform .15s, border-color .15s; }
.dr-pc:hover { transform: translateY(-2px); border-color: var(--muted); border-top-color: var(--c); }
.dr-pc header { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.dr-pc header strong { font-size: 16px; } .dr-pc header i { font-style: normal; color: var(--muted); font-size: 12px; margin-right: 6px; }
.dr-pc-m { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; text-align: center; }
.dr-pc-m small { display: block; font-size: 10px; color: var(--muted); }
.dr-pc-m b { font-size: 16px; font-weight: 800; } .dr-pc-m b i { font-style: normal; font-size: 10px; color: var(--muted); }
.dr-pc-m .hot b { color: #ff453a; }
.dr-spark { width: 100%; height: 34px; display: block; }
.dr-pc-why { margin: 0; font-size: 12px; color: var(--sub); line-height: 1.5; }
.dr-pc-why.ok { color: var(--muted); }
.dr-heat.wide td { min-width: 40px; font-size: 11px; }
@media (max-width: 600px) { .dr-ai-list li { grid-template-columns: 1fr; } .dr-ai-sum span { min-width: 54px; } }

.dr-fold { font-size: 12px; padding: 3px 10px; }
.dr-ai.folded .dr-ai-groups, .dr-ai.folded .dr-ai-note { display: none; }
.dr-ai.folded .dr-ai-lead { margin-bottom: 0; }
.dr-ai-g li[hidden] { display: none; }
.dr-ai-g [data-more] { margin-top: 6px; }

/* 새 소식 점 */
.nav-list a.has-new { position: relative; }
.nav-list a.has-new::after { content: ''; position: absolute; right: 12px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #ff9f0a; box-shadow: 0 0 0 3px rgba(255,159,10,.2); }
[data-toggle="nav-open"].has-new { position: relative; }
[data-toggle="nav-open"].has-new::after { content: ''; position: absolute; right: 4px; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: #ff9f0a; }
/* 모바일: 닫기(✕) 크게 · 화면 위에 붙어 있게 */
@media (max-width: 700px) {
  .modal-x { position: sticky; float: right; top: 0; margin: -6px -6px 4px 8px; width: 46px; height: 46px; font-size: 22px; color: var(--text); background: var(--surface3); border-radius: 50%; z-index: 5; }
}

.verify-card .verify-ic { font-size: 40px; }
.guide-steps.left { text-align: left; }
@media (max-width: 700px) { .present [data-close] { width: 46px; height: 46px; font-size: 22px; } }

/* 선수 다듬기 */
.trim-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin: 10px 0; }
.trim-size { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.trim-size[hidden] { display: none; }
.trim-stage { display: flex; justify-content: center; padding: 14px; border-radius: var(--r-sm); margin-bottom: 12px;
  background: repeating-conic-gradient(#3a3a3a 0 25%, #2a2a2a 0 50%) 0 0 / 16px 16px; }
.trim-stage canvas { cursor: crosshair; touch-action: none; image-rendering: auto; max-width: 100%; }

/* 경기분석 기록 상태 */
.ma-vwrap { position: relative; }
.ma-status { position: absolute; left: 10px; right: 10px; top: 10px; padding: 7px 12px; border-radius: 8px; background: rgba(0,0,0,.72); color: #fff; font-size: 13px; font-weight: 600; pointer-events: none; display: flex; align-items: center; gap: 8px; backdrop-filter: blur(4px); }
.ma-status:empty { display: none; }
.ma-status i { width: 9px; height: 9px; border-radius: 50%; background: #ff453a; flex: none; animation: ma-rec 1.2s infinite; }
@keyframes ma-rec { 50% { opacity: .25; } }
.ma-status.ok { background: rgba(48,209,88,.92); color: #04210c; }
.ma-status.warn { background: rgba(255,159,10,.95); color: #241500; animation: ma-warn 1.6s infinite; }
@keyframes ma-warn { 50% { transform: scale(1.015); } }
.ma-status kbd { background: rgba(0,0,0,.2); border-radius: 4px; padding: 0 5px; font-size: 11px; }
.ma-seek { position: relative; flex: 1; display: flex; align-items: center; min-width: 80px; }
.ma-seek input { width: 100%; }
.ma-marks { position: absolute; left: 0; right: 0; bottom: -6px; height: 6px; pointer-events: none; overflow: hidden; }
.ma-marks i { position: absolute; width: 3px; height: 6px; border-radius: 1px; transform: translateX(-1px); }

/* 경기분석 포메이션 (포지션별 번호) */
.lu-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12px; }
.lu-card h3 { margin: 0 0 10px; }
.lu-phase { margin-bottom: 10px; flex-wrap: wrap; }
.lu-row { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.lu-row select, .lu-row input { width: auto; min-width: 150px; }
.lu-pitch { position: relative; aspect-ratio: 105 / 68; border-radius: 8px; background:
  linear-gradient(90deg, transparent calc(50% - 1px), rgba(255,255,255,.5) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
  radial-gradient(circle at 50% 50%, transparent 12.5%, rgba(255,255,255,.5) 12.5% calc(12.5% + 2px), transparent calc(12.5% + 2px)),
  repeating-linear-gradient(90deg, #2f6b31 0 10%, #2b632d 10% 20%); border: 2px solid rgba(255,255,255,.5); }
.lu-pos { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.lu-pos b, .lu-pos input { width: 34px; height: 34px; border-radius: 50%; background: var(--c); color: #fff; border: 2px solid #fff; font-weight: 800; font-size: 13px; text-align: center; display: grid; place-items: center; padding: 0; }
.lu-pos input::placeholder { color: rgba(255,255,255,.75); font-size: 10px; font-weight: 700; }
.lu-pos small { font-size: 10px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.8); }
.lu-views { display: grid; gap: 12px; }
.lu-views h4 { margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.lu-views h4 b { color: var(--text); }
.lu-old { margin-top: 14px; }
.lu-old summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.ma-luline { margin: 8px 0 12px; font-size: 14px; }
@media (max-width: 600px) { .lu-pos b, .lu-pos input { width: 28px; height: 28px; font-size: 12px; } .lu-cards { grid-template-columns: minmax(0, 1fr); } }
.lu-pos input { padding: 0 !important; min-height: 0; line-height: 30px; box-shadow: none; }
.lu-pos input:focus { outline: 2px solid #ffd400; outline-offset: 1px; }

/* 키 플레이어 */
.kp-edit { margin-top: 14px; }
.kp-edit h4 { margin: 0 0 8px; }
.kp-row { display: grid; grid-template-columns: 60px 80px 1fr 2fr auto; gap: 6px; margin-bottom: 6px; align-items: center; }
.kp-row input { padding: 7px 8px; font-size: 13px; }
.kp-list { display: grid; gap: 8px; margin-bottom: 12px; }
.kp-card { display: flex; gap: 12px; align-items: center; background: var(--surface2); border-radius: 10px; padding: 10px 12px; border-left: 4px solid var(--c); }
.kp-num { width: 40px; height: 40px; border-radius: 50%; background: var(--c); color: #fff; display: grid; place-items: center; font-size: 16px; font-weight: 900; border: 2px solid #fff; flex: none; }
.kp-card strong small { color: var(--muted); font-weight: 600; margin-left: 4px; }
.kp-card p { margin: 2px 0 0; font-size: 13px; color: var(--sub); }
.lu-pos.key b, .lu-pos.key input { box-shadow: 0 0 0 3px #ffd400, 0 0 12px rgba(255,212,0,.7); }
.lu-pos.key small::before { content: '⭐ '; }
@media (max-width: 600px) { .kp-row { grid-template-columns: 52px 70px 1fr auto; } .kp-row [data-k="note"] { grid-column: 1 / -2; } }
.kp-edit.card { margin: 12px 0; }
.kp-team { margin: 8px 0 6px; font-size: 13px; font-weight: 700; color: var(--c); }
.pad-svg .it-text text { pointer-events: auto; cursor: move; }
.present-keys { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); font-size: 13px; color: rgba(255,255,255,.6); background: rgba(0,0,0,.4); padding: 4px 12px; border-radius: 999px; }
.present-keys kbd { background: rgba(255,255,255,.15); border-radius: 4px; padding: 0 5px; }

/* 작전판: 색 · 옵션 */
.pad-colors { display: flex; gap: 5px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.pad-colors[hidden], .pad-opt[hidden] { display: none; }
.pad-colors small { color: var(--muted); font-size: 12px; margin-right: 2px; }
.pcol { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line2); background: var(--c); padding: 0; }
.pcol.def { background: linear-gradient(135deg, #fff 0 50%, #111 50% 100%); }
.pcol.on { border-color: #4ea1ff; box-shadow: 0 0 0 2px rgba(78,161,255,.4); }
.pad-sz input { width: 56px; padding: 4px 6px; font-size: 12px; text-align: center; }
.pad-sz i { font-style: normal; font-size: 12px; color: var(--muted); }
.pad-opt { display: inline-flex; gap: 4px; align-items: center; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.pad-opt .chip.on { background: var(--pri); color: var(--on-pri); }
.pad-motion.flash { animation: pm-flash 1.2s; }
@keyframes pm-flash { 30% { background: rgba(255,212,0,.25); } }
.pad-svg .ghost-h { cursor: grab; }

/* 작전판 툴바 정리 */
.pad-field { margin-bottom: 6px; gap: 4px; }
.pad-field select, .pad-size input { padding: 4px 6px; font-size: 12px; }
.pad-tools { gap: 4px; margin-bottom: 6px; align-items: center; }
.ptool { padding: 5px 9px; }
.pgroup { position: relative; display: inline-flex; }
.pgmenu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; background: var(--surface); border: 1px solid var(--line2); border-radius: 10px; padding: 6px; display: grid; grid-template-columns: repeat(2, minmax(110px, 1fr)); gap: 4px; box-shadow: 0 12px 30px rgba(0,0,0,.5); }
.pgmenu[hidden] { display: none; }
.pgmenu button { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 7px; border: 0; background: var(--surface2); color: var(--sub); font-size: 12px; font-weight: 600; text-align: left; }
.pgmenu button b { width: 16px; text-align: center; }
.pgmenu button:hover { color: var(--text); background: var(--surface3); }
.pgmenu button.on { background: var(--pri); color: var(--on-pri); }
.pfull { margin-left: auto; }
.pad-acts { gap: 6px; margin-bottom: 4px; min-height: 30px; }
.pad-acts .pad-teams, .pad-acts .pad-colors { margin: 0; display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; padding-right: 6px; border-right: 1px solid var(--line); }
.pad-acts .pad-teams[hidden], .pad-acts .pad-colors[hidden] { display: none; }
.pteam { min-width: 26px; height: 26px; }
.pcol { width: 20px; height: 20px; }
.pad-hint { display: block; font-size: 11px; margin: 0 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 크게 보기 */
.pad.pad-full { position: fixed; inset: 0; z-index: 95; margin: 0; background: var(--bg, #0b0b0b); padding: 10px 14px; display: flex; flex-direction: column; overflow: auto; }
.pad.pad-full .pad-svg { flex: 1 1 auto; min-height: 0; max-height: none; height: 100%; }
.pad.pad-full .pad-motion { margin-top: 6px; }
.pad:fullscreen { background: #0b0b0b; }
.pad-ord { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); padding: 2px 4px 2px 10px; border-left: 1px solid var(--line); }
.pad-ord[hidden] { display: none; }
.pad-ord input { width: 52px; padding: 4px 6px; font-size: 13px; font-weight: 800; text-align: center; }
.pad-ord small { font-size: 11px; }
.pad-acts [data-straight][hidden] { display: none; }
.pad-svg .ghost-s { cursor: move; }

/* 순서 칸: 예전 모양 그대로 조금만 크게 */
.pad-ord { font-size: 13px; }
.pad-ord input { width: 58px; height: 32px; font-size: 15px; font-weight: 800; }
.pad-ord small { font-size: 12px; }
.pad-num { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--text); }
.pad-num[hidden] { display: none; }
.pad-num input { width: 60px; height: 32px; font-size: 15px; font-weight: 800; text-align: center; padding: 2px 4px; }

/* 상황 바: 한 줄로 깔끔하게 (순서는 늘 오른쪽 끝) */
.pad-acts { flex-wrap: wrap; row-gap: 6px; }
.pad-acts .chip { white-space: nowrap; }
.pad-ord { margin-left: auto; border-left: 1px solid var(--line); padding-left: 10px; }
.pad-num { padding-right: 6px; border-right: 1px solid var(--line); }
/* 상황 바 한 줄에 맞추기 */
.pad-acts { gap: 4px; }
.pad-acts .chip { padding: 3px 8px; font-size: 12px; }
.pad-acts .pad-sz input { width: 46px; }
.pad-num { gap: 4px; font-size: 12px; }
.pad-num input { width: 46px; height: 30px; font-size: 14px; }
.pad-ord { gap: 4px; padding-left: 8px; font-size: 12px; }
.pad-ord input { width: 48px; height: 30px; font-size: 14px; }
.pad-ord small { font-size: 11px; }

/* 상황 바 두 줄: 1줄 되돌리기 · 지우기 · 크기 … 순서 / 2줄 고른 것 (번호 · 색 · 앞뒤 · 삭제) */
.pad-acts { gap: 6px; }
.pad-acts .pad-sz { margin-left: 6px; padding-left: 10px; border-left: 1px solid var(--line); }
.pad-sel { margin-top: 2px; gap: 10px; }
.pad-sel[hidden], .pad-grp[hidden] { display: none; }
.pad-sel > *:not(:last-child) { padding-right: 10px; border-right: 1px solid var(--line); }
.pad-sel > [hidden] { display: none !important; }
.pad-grp { display: inline-flex; gap: 6px; align-items: center; }
.pad-grp .chip[hidden] { display: none; }
.pad-num { border-right: 0; }
.pad-acts .pad-teams, .pad-acts .pad-colors { border-right: 0; padding-right: 0; }

/* 맨 밑 회사 정보 */
.site-foot { margin: 0 36px; padding: 36px 0 calc(40px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); color: var(--muted); font-size: 12.5px; }
.bare + .site-foot { margin: 0; padding-left: 24px; padding-right: 24px; background: var(--bg); }
.bare + .site-foot > * { max-width: 1080px; margin-left: auto; margin-right: auto; }
.sf-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.sf-brand { display: flex; flex-direction: column; gap: 4px; }
.sf-brand strong { color: var(--text); font-size: 15px; font-weight: 900; letter-spacing: .16em; }
.sf-brand span { color: var(--muted); }
.sf-links { display: flex; gap: 18px; }
.sf-links a { text-decoration: none; color: var(--sub); }
.sf-links a:hover { color: var(--text); }
.sf-links b { color: var(--text); font-weight: 700; }
.sf-info { display: flex; flex-wrap: wrap; gap: 6px 0; margin: 22px 0 0; }
.sf-info div { display: flex; gap: 8px; }
.sf-info div + div::before { content: ''; width: 1px; height: 10px; background: var(--line2); align-self: center; margin: 0 14px; }
.sf-info dt { color: var(--muted); font-weight: 600; }
.sf-info dd { margin: 0; color: var(--sub); }
.sf-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.sf-mark { font-size: 34px; font-weight: 900; letter-spacing: .02em; line-height: .8; color: transparent; -webkit-text-stroke: 1px var(--line2); user-select: none; }
@media (max-width: 860px) {
  .site-foot { margin: 0 16px; }
  .bare + .site-foot { padding-left: 16px; padding-right: 16px; }
  .sf-info { flex-direction: column; }
  .sf-info div + div::before { display: none; }
  .sf-info dt { min-width: 84px; }
  .sf-mark { font-size: 26px; }
}

/* ───────── 휴대폰 화면 정리 ───────── */
.tag { white-space: nowrap; }
@media (max-width: 860px) {
  .card { padding: 18px 16px; }
  .page-head .actions { flex-wrap: wrap; justify-content: flex-end; }
  .page-head .actions input[type=date] { min-width: 0; max-width: 100%; }
  .m-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-stats a { min-width: 0; padding: 6px 10px; gap: 6px; }
  .m-stats small { white-space: nowrap; }
  .m-stats strong { font-size: 13px; }
  .day-head h2 { font-size: 20px; flex-wrap: wrap; }
  .card > .tbl td, .card > .tbl th { white-space: nowrap; }
  .card > .tbl { -webkit-overflow-scrolling: touch; }
  .an-libh { margin: 22px 0 10px; }
  .ma-thumb-top { gap: 8px; align-items: flex-start; }
  .ma-thumb-top span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ma-thumb-top b { flex: none; }
  /* 분석실 화면 위쪽: 제목 한 줄 + 버튼은 아래 줄 */
  .studio-top { flex-wrap: wrap; row-gap: 6px; }
  .studio-top .st-title { flex: 1 1 calc(100% - 52px); }
  .studio-top .st-actions { width: 100%; flex-wrap: wrap; justify-content: flex-end; }
  .studio-top .st-mode { align-self: center; }
  .st-transport { flex-wrap: wrap; row-gap: 2px; }
  .st-transport .st-timeline { order: 10; flex: 1 1 100%; }
  .st-transport .st-time { margin-left: auto; }
  /* 숫자 고르기: 1~10 은 5칸씩 두 줄, 0~10 은 6칸 + 5칸 */
  .scale[data-scale=rpe] { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .scale[data-scale=injury] { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .scale[data-scale=rpe] label, .scale[data-scale=injury] label { min-width: 0; }
}
@media (max-width: 400px) {
  #view { padding-left: 12px; padding-right: 12px; }
  .site-foot { margin: 0 12px; }
  .page-head h1 { font-size: 22px; }
  .scale span { font-size: 15px; }
}
@media (max-width: 860px) {
  .st-canvas-wrap { min-height: 160px; }
  .st-hint { font-size: 10.5px; padding: 4px 8px; left: 6px; top: 6px; max-width: calc(100% - 12px); }
}
@media (max-width: 1100px) and (min-width: 861px) {
  .studio-main { grid-template-columns: 76px minmax(0, 1fr); }
  .studio-main > .st-side { grid-column: 2; position: static; max-height: none; }
}
/* 재생 칸은 얇게 → 아래 타임라인을 더 넓게 */
.studio .st-transport { padding: 1px 8px; margin-top: 6px; gap: 2px; min-height: 0; }
.studio .st-transport .icon-btn { width: 30px; height: 28px; font-size: 16px; }
.studio .st-transport .icon-btn.sm { width: 26px; height: 26px; font-size: 13px; }
.studio .st-transport .st-time { font-size: 11px; min-width: 70px; }
.studio .st-transport .st-timeline { height: 22px; }
.studio .st-transport select { padding: 2px 4px; font-size: 11px; }
.tl { margin-top: 6px; }
.tl-body { max-height: 245px; }
.st-sec .st-follow { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-weight: 700; margin-bottom: 10px; }
.st-follow small { flex-basis: 100%; padding-left: 22px; font-weight: 500; font-size: 11px; }
/* 작전판 임시 보관 알림 */
.pad-draft { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; margin-bottom: 8px; border: 1px solid #ffd400; background: rgba(255,212,0,.08); border-radius: var(--r-sm); font-size: 13px; }
.pad-draft span { flex: 1; min-width: 180px; }
.pad-txt input { width: 160px; }
/* 휴대폰: 창(사용법 등)이 맨 위에 붙지 않고 화면 가운데에 · 길면 스크롤 */
@media (max-width: 860px) {
  .modal-wrap { align-items: flex-start; padding: 16px 12px calc(16px + env(safe-area-inset-bottom)); }
  .modal-wrap > .modal { margin: auto 0; max-height: none; }
}
/* 선수 나열 순서 (번호 · 이름 · 출생연도) */
.sec-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 6px 0 10px; }
.sec-row .sec-title { margin: 0; }
.sort-bar button { white-space: nowrap; }
.sort-h { font-size: 14px; color: var(--sub); margin: 14px 0 8px; }
.sort-h small { color: var(--muted); font-weight: 500; }
.jcards .sort-h { margin: 10px 0 0; }
/* 무료 사용량 초과 안내 */
.quota-bar { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 16px; background: #3a2a00; color: #ffe08a; border-bottom: 1px solid #a67c00; font-size: 13px; }
.quota-bar span { flex: 1; min-width: 200px; }
.quota-bar button { background: none; border: 0; color: inherit; font-size: 16px; }
/* 운영자: 오늘 Firebase 사용량 */
.usage-card .card-head h3 small { font-weight: 500; font-size: 12px; margin-left: 6px; }
.usage-row { margin: 10px 0 14px; }
.usage-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.usage-top span { color: var(--text); font-weight: 700; }
.usage-top small { color: var(--muted); font-weight: 500; }
.usage-top em { margin-left: auto; font-style: normal; color: var(--sub); font-size: 13px; }
.usage-bar { height: 10px; border-radius: 5px; background: var(--surface3); overflow: hidden; margin-top: 6px; }
.usage-bar i { display: block; height: 100%; background: #34c759; border-radius: 5px; }
.usage-row.warm .usage-bar i { background: #ff9f0a; }
.usage-row.hot .usage-bar i { background: #ff3b30; }
.usage-warn { padding: 10px 12px; border-radius: var(--r-sm); background: rgba(255,59,48,.12); border: 1px solid #b91c1c; color: #fca5a5; margin: 0 0 8px; }
/* 선수가 직접 쓰는 훈련 일지 · 코치님께 질문 */
.plan-ref { border: 1px solid var(--line2); border-radius: var(--r); padding: 10px 14px; margin: 6px 0 14px; background: var(--surface2); }
.plan-ref summary { cursor: pointer; font-weight: 700; font-size: 14px; }
.plan-ref summary small { font-weight: 500; margin-left: 6px; }
.plan-ref .jplan.ref { margin-top: 10px; }
.ref-block { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--line); }
.ref-block .sess-vis { width: 140px; flex: none; }
.ref-block p { margin: 2px 0 0; }
.jsess-head { margin-top: 6px; }
.sess.mine header { display: flex; align-items: center; gap: 10px; }
.sess.mine .sess-name { flex: 1; font-weight: 700; padding: 8px 10px; margin: 0; }
.sess-did, .sess-ask { display: block; margin-top: 10px; }
.sess-ask textarea { border-color: #4ea1ff55; }
.sess-ans { margin-top: 8px; padding: 10px 12px; border-left: 3px solid #34c759; background: rgba(52,199,89,.08); border-radius: var(--r-sm); }
.sess-ans p { margin: 6px 0 0; }
.sess-wait { margin: 6px 0 0; }
.sess-q { margin-top: 8px; padding: 8px 10px; border-left: 3px solid #4ea1ff; background: rgba(78,161,255,.08); border-radius: var(--r-sm); }
.sess-q p { margin: 0; }
.sess-a { display: block; margin: 8px 0 0; }
details.legacy { margin-top: 10px; }
@media (max-width: 860px) { .ref-block .sess-vis { width: 100px; } }
/* 홈: 이번 주 한눈에 */
.week-card { margin-bottom: 18px; }
.wk { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.wk-day { display: flex; flex-direction: column; gap: 4px; min-height: 120px; padding: 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface2); text-decoration: none; color: var(--text); }
.wk-day:hover { border-color: var(--muted); }
.wk-day.today { border-color: var(--text); box-shadow: 0 0 0 1px var(--text) inset; }
.wk-day.past { opacity: .55; }
.wk-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 2px; }
.wk-h b { font-size: 12px; color: var(--sub); }
.wk-h span { font-size: 18px; font-weight: 800; }
.wk-day.today .wk-h span::after { content: ' 오늘'; font-size: 10px; font-weight: 700; color: var(--muted); }
.wk-it { display: flex; flex-direction: column; padding: 4px 6px; border-radius: 4px; border-left: 3px solid #8a8a8a; background: rgba(255,255,255,.04); font-size: 12px; line-height: 1.3; }
.wk-it small { color: var(--muted); font-size: 10.5px; }
.wk-it span { font-weight: 700; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.wk-it.k-match { border-left-color: #ef4444; }
.wk-it.k-train { border-left-color: #3b82f6; }
.wk-it.k-plan { border-left-color: #34c759; }
.wk-none { color: var(--line2); font-size: 12px; margin-top: 6px; }
.wk-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: 11px; color: var(--muted); }
.wk-legend span::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; background: #8a8a8a; }
.wk-legend .k-match::before { background: #ef4444; } .wk-legend .k-train::before { background: #3b82f6; } .wk-legend .k-plan::before { background: #34c759; }
/* 홈: 팀 업데이트 */
.list.upd li { padding: 0; }
.list.upd a { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; text-decoration: none; color: inherit; width: 100%; }
.upd-ic { font-size: 18px; width: 26px; text-align: center; flex: none; }
.upd small .tag { margin-right: 4px; }
.upd-new { color: #34c759; font-weight: 700; }
.upd-ed { color: #ff9f0a; font-weight: 700; }
@media (max-width: 860px) {
  .wk { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .wk-day { flex-direction: row; flex-wrap: wrap; align-items: center; min-height: 0; padding: 8px 10px; gap: 6px; }
  .wk-h { flex-direction: column; align-items: center; width: 36px; margin: 0; }
  .wk-it { flex: 1 1 140px; }
  .wk-none { margin: 0; }
}
.list.upd a > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.list.upd a > div strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 커뮤니티 */
.cm-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.cm-bar .tabs { margin: 0; }
.cm-bar input[type=search] { max-width: 260px; margin: 0 0 0 auto; }
.cm-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.cm-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; }
.cm-card:hover { border-color: var(--muted); }
.cm-top { display: flex; gap: 6px; align-items: center; }
.cm-top small { margin-left: auto; }
.cm-card h3 { font-size: 15px; }
.cm-body { color: var(--sub); font-size: 13px; margin: 0; }
.cm-foot { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); margin-top: auto; }
.cm-attach { padding: 10px 12px; border: 1px dashed var(--line2); border-radius: var(--r-sm); font-size: 13px; }
.cm-prog { margin: 14px 0; padding: 14px; border: 1px solid var(--line2); border-radius: var(--r); background: var(--surface2); }
.cm-img { width: 100%; border-radius: var(--r-sm); margin: 8px 0; }
.cm-comments { list-style: none; padding: 0; margin: 0 0 10px; }
.cm-comments li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.cm-comments p { margin: 4px 0 0; font-size: 14px; }
.cm-c-h { display: flex; gap: 6px; align-items: baseline; }
.cm-c-h .link-btn { margin-left: auto; }
.cm-cform { display: flex; gap: 8px; align-items: flex-end; }
.cm-cform textarea { margin: 0; }
@media (max-width: 860px) { .cm-bar input[type=search] { max-width: none; margin: 0; } .cm-list { grid-template-columns: minmax(0, 1fr); } }
.cm-prog .pad-svg { max-height: 380px; }
.cm-prog .pad { max-width: 620px; }
@media (max-width: 860px) { .wk-day.today .wk-h span::after { content: ''; } .wk-it { flex: 1 1 calc(100% - 50px); } }
.sess-padbox { margin-top: 10px; }
.sess-padbox .row { gap: 8px; align-items: center; flex-wrap: wrap; }
.sess-viewpad { margin: 8px 0; max-width: 560px; }
.cm-list.tr { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.cm-card.tr { padding: 0 0 12px; overflow: hidden; }
.cm-card.tr > :not(.cm-thumb) { margin-left: 14px; margin-right: 14px; }
.cm-thumb { aspect-ratio: 16 / 10; background: #0b0b0b; display: grid; place-items: center; overflow: hidden; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.cm-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cm-thumb .pad { margin: 0; width: 100%; height: 100%; pointer-events: none; display: flex; align-items: center; }
.cm-thumb { position: relative; }
.cm-thumb:not(.two) .pad { position: absolute; inset: 0; }
.cm-thumb .pad-svg { border-radius: 0; width: 100%; height: 100%; max-height: none; }
.cm-thumb span { font-size: 34px; }
.cm-pick li { align-items: center; }
.sess-padhead { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.sess-padhead small { flex-basis: 100%; }
.banner.warn { background: #ffb020; color: #1a1200; }
.banner.warn a, .banner.danger a { color: inherit; text-decoration: underline; }
.banner.danger { background: #e5484d; color: #fff; }
.name-note { font-size: 12.5px; color: var(--muted); margin: -4px 0 10px; line-height: 1.5; }
.name-note.on { color: #ffb020; font-weight: 700; }
.tag.danger { border-color: #e5484d; color: #ff6b6f; }
.cm-thumb img { object-fit: contain; }
.cm-thumb.two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.cm-thumb.two > * { width: 100%; height: 100%; min-width: 0; }
.cm-pick li .cm-thumb { width: 120px; flex: none; aspect-ratio: 16 / 10; border: 1px solid var(--line); border-radius: var(--r-sm); margin: 0 12px 0 0; }
.cm-pick li > div:not(.cm-thumb) { flex: 1; min-width: 0; }
.cm-pager { display: flex; gap: 6px; justify-content: center; align-items: center; flex-wrap: wrap; margin: 18px 0 6px; }
.cm-pager .pg { min-width: 34px; height: 34px; border-radius: 17px; border: 1px solid var(--line); background: transparent; color: var(--text); font-weight: 700; cursor: pointer; }
.cm-pager .pg.on { background: var(--pri); color: var(--on-pri); border-color: var(--pri); }
@media (max-width: 640px) { .cm-pick li .cm-thumb { width: 84px; } }
/* 운영자 전체 팀: 버튼 4개는 2줄로 묶고, 이름 · 구분 · 대표는 줄바꿈 없이 */
.admin-table td:last-child { white-space: normal; }
.admin-table .acts { display: grid; grid-template-columns: repeat(2, auto); gap: 6px; justify-content: end; }
.admin-table .acts .btn { white-space: nowrap; }
.admin-table td[data-l="팀"] strong, .admin-table td[data-l="구분"], .admin-table td[data-l="대표"], .admin-table td[data-l="공개"] { white-space: nowrap; }
.admin-table td[data-l="팀"] .tag { margin-top: 4px; }
@media (max-width: 900px) { .admin-table .acts { justify-content: start; grid-template-columns: repeat(2, max-content); } }
/* 운영자 전체 팀: 팀마다 카드 한 장 (정보 4칸 + 버튼 줄) — 버튼이 늘어나도 안 잘림 */
.admin-table thead { display: none; }
.admin-table tbody tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 14px; padding: 14px 4px; border-bottom: 1px solid var(--line); }
.admin-table td { border: 0; padding: 0; font-size: 13px; min-width: 0; }
.admin-table td::before { content: attr(data-l); display: block; font-size: 11px; color: var(--muted); margin-bottom: 2px; }
.admin-table td[data-l="팀"] { grid-column: 1 / -1; font-size: 15px; }
.admin-table td[data-l="팀"]::before, .admin-table td[data-l=""]::before { display: none; }
.admin-table td[data-l="팀"] br { display: none; }
.admin-table td[data-l="팀"] .tag { margin: 0 0 0 6px; vertical-align: 1px; }
.admin-table td:last-child { grid-column: 1 / -1; text-align: left; margin-top: 4px; }
.admin-table .acts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-start; }
@media (max-width: 720px) { .admin-table tbody tr { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.admin-table, .admin-table tbody { display: block !important; width: 100%; }
.admin-table tbody tr:last-child { border-bottom: 0; }
.jsort { flex-wrap: wrap; gap: 10px; }
.jfilter { gap: 6px; flex-wrap: wrap; }
.jfilter .chip b { margin-left: 3px; font-weight: 800; }
.jcard[hidden], .sort-h[hidden] { display: none !important; }
.team-results li.talk { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px; }
.team-results li.talk .icon-btn.sm { width: 32px; height: 32px; font-size: 15px; border-radius: 16px; }
.chat-teams { margin: 4px 0 18px; }
.chat-teams li.talk { border-bottom: 1px solid var(--line); }
/* 오늘은 [훈련] [경기] — 두 버튼 같은 크기, 안내 글은 버튼 안에 */
.kind-pick { gap: 10px; align-items: center; }
.kind-pick label { flex: 0 0 150px; }
.kind-pick label b { width: 100%; height: 58px; padding: 6px 10px; flex-direction: column; justify-content: center; gap: 2px; line-height: 1.2; }
.kind-pick label b small { display: block; margin: 0; font-size: 11px; font-weight: 600; color: var(--muted); }
.kind-pick input:checked + b small { color: inherit; opacity: .7; }
@media (max-width: 640px) {
  .kind-pick > span { flex-basis: 100%; }
  .kind-pick label { flex: 1 1 0; }
  .kind-pick em { flex-basis: 100%; margin-left: 0; }
}
/* 훈련 · 장면 추가: 목록 끝에 크게 */
.add-big { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; margin: 4px 0 18px; padding: 16px 12px; border: 2px dashed var(--line2); border-radius: var(--r); background: transparent; color: var(--text); font: inherit; font-size: 16px; font-weight: 800; cursor: pointer; transition: border-color .15s, background .15s; }
.add-big small { font-size: 12px; font-weight: 500; color: var(--muted); }
.add-big:hover, .add-big:focus-visible { border-color: var(--text); background: var(--surface2); }
/* 스카웃 노트 */
.sc-filter { margin: 4px 0 14px; }
.sc-filter .chip b { margin-left: 3px; }
.scout .sc-top { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.scout .sc-top h3 small { font-size: 13px; color: var(--muted); font-weight: 600; }
.scout p { margin: 6px 0 0; font-size: 14px; line-height: 1.55; }
.sc-badge { font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 12px; border: 1px solid var(--line2); color: var(--sub); white-space: nowrap; }
.scout.st-confirm { border-color: #2f9e63; }
.scout.st-confirm .sc-badge { background: #2f9e63; border-color: #2f9e63; color: #fff; }
.scout.st-hold .sc-badge { border-color: #b45309; color: #fbbf24; }
.scout.st-drop { opacity: .6; }
.scout.st-drop .sc-badge { color: var(--muted); }
.sc-status { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 4px; }
.team-hero .kv { max-width: 360px; margin: 10px 0; }
/* 홈 팀 업데이트: 접기 · 펼치기 */
.upd-card:not(.open) .upd li.more { display: none; }
.upd-more { display: block; width: 100%; margin-top: 6px; padding: 10px; border: 1px dashed var(--line2); border-radius: var(--r-sm); background: transparent; color: var(--sub); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.upd-more:hover { border-color: var(--text); color: var(--text); }
/* 홈 맨 위 날짜 · 인사: 하얀 카드 */
.morning { background: #f5f5f3; border-color: #f5f5f3; color: #111; }
.morning .eyebrow, .morning .m-clock, .morning .m-date strong small { color: #6b6b6b; }
.morning .m-date { border-right-color: #d4d4d0; }
.morning .m-hello h1 { color: #111; }
.morning .m-hello p { color: #444; }
.morning .m-stats a { background: #fff; border-color: #e2e2de; color: #111; }
.morning .m-stats a:hover { border-color: #111; }
.morning .m-stats small { color: #6b6b6b; }
.cm-thumb .cm-noimg { font-size: 14px; font-weight: 800; color: var(--muted); letter-spacing: .1em; }
.inbox-search { margin-bottom: 14px; } .inbox-found { margin: 4px 0 0; }
.op-notice { margin-bottom: 14px; border-width: 2px; }
.op-notice h3 { margin: 8px 0 6px; }
.op-notice p { margin: 0 0 6px; line-height: 1.6; }
.op-notice.warn { border-color: #ffb020; }
.op-notice.warn .tag.solid { background: #ffb020; border-color: #ffb020; color: #1a1200; }
.op-notice.danger { border-color: #e5484d; }
.op-notice.danger .tag.solid { background: #e5484d; border-color: #e5484d; color: #fff; }
.op-notice a { text-decoration: underline; }
#team-notice .banner { margin: 16px 0 0; }
.role-fix input[type=search] { width: 100%; margin: 4px 0 6px; }
.role-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; }
.role-row small { display: block; margin-top: 2px; }
.pcard-manage { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.role-edit { width: 100%; text-align: left; border-top: 1px solid var(--line); padding-top: 10px; }
.role-edit summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--sub); }
.role-edit p { margin: 8px 0; }
.mgr { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.mgr .role-edit + .role-edit { border-top: 0; padding-top: 0; }
.mgr input[type=search] { width: 100%; margin: 4px 0; }
.mgr .team-results li.talk { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; }
/* 경기분석: 세분화 기록 */
.ma-kgroups { display: flex; flex-direction: column; gap: 8px; }
.ma-kgroup { display: grid; grid-template-columns: 52px 1fr; gap: 6px; align-items: start; }
.ma-kgroup > span { font-size: 11px; font-weight: 800; color: var(--muted); padding-top: 9px; letter-spacing: .02em; }
.ma-kgroup .ma-kinds { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.ma-lineopt { margin-left: auto; font-size: 12px; }
.ma-tagpitch svg.wait-end { outline: 2px dashed #ffd400; outline-offset: 2px; border-radius: 4px; }
.ma-pend { animation: maPulse 1s ease-in-out infinite; }
@keyframes maPulse { 50% { opacity: .35; } }
.ma-detail:empty { display: none; }
.ma-detail { background: var(--surface2); border: 1px solid var(--line2); border-radius: var(--r-sm); padding: 10px 12px; margin: 8px 0; display: flex; flex-direction: column; gap: 6px; }
.ma-dhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ma-dhead > small { color: var(--sub); }
.ma-dhead > .muted { margin-left: auto; }
.ma-drow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ma-drow > span:first-child { width: 64px; font-size: 12px; font-weight: 700; color: var(--muted); flex: none; }
.ma-drow input { width: 90px; height: 32px; padding: 4px 8px; font-weight: 800; }
.ma-drow input[data-dtext] { width: auto; flex: 1; font-weight: 500; }
.ma-drow .chip { padding: 5px 10px; font-size: 12px; }
.lu-empty { padding: 18px; text-align: center; border: 1px dashed var(--line2); border-radius: var(--r-sm); }
/* 경기분석 리포트 (한 장에) */
.rp-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; border-left: 4px solid var(--c); }
.rp-head h2 { margin: 4px 0; }
.rp-score { display: flex; align-items: center; gap: 12px; }
.rp-score b { font-size: 34px; font-weight: 900; letter-spacing: -.02em; }
.rp-score span { font-size: 12px; color: var(--muted); font-weight: 700; }
.rp-ai h3 small { font-weight: 500; font-size: 12px; }
.rp-sw { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 10px 0 14px; }
.rp-sw > div { background: var(--surface2); border-radius: var(--r-sm); padding: 10px 12px; }
.rp-sw h4 { margin: 0 0 6px; font-size: 13px; }
.rp-sw ul, .rp-sec ul { margin: 0; padding-left: 18px; line-height: 1.75; font-size: 13.5px; }
.rp-secs { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
.rp-sec { border-top: 1px solid var(--line); padding-top: 8px; }
.rp-sec h4 { margin: 0 0 4px; font-size: 14px; }
.rp-ptbl { font-size: 13px; margin-top: 6px; }
.rp-ptbl td, .rp-ptbl th { padding: 5px 6px; text-align: center; }
.rp-log summary { cursor: pointer; }
.rp-loglist { max-height: 420px; }
@media (max-width: 760px) { .rp-sw { grid-template-columns: 1fr; } .rp-head { flex-direction: column; align-items: flex-start; } .ma-kgroup { grid-template-columns: 1fr; } .ma-kgroup > span { padding-top: 0; } }
@media print {
  .nav, .search-panel, .topbar, .site-foot, .studio-top .st-actions, .ma-tabs, .ma-video, [data-print], .scrim, #sys-notice, #team-notice { display: none !important; }
  .shell, .main-col { display: block !important; }
  .rp-log { display: block; } .rp-log[open] .rp-loglist, .rp-loglist { max-height: none; }
  .card { break-inside: avoid; }
}
.ma-kgroup .ma-kinds { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 4px; }
.ma-kgroup .ma-kinds button { padding: 5px 7px; font-size: 11.5px; gap: 5px; }
.ma-kgroup .ma-kinds button i { width: 8px; height: 8px; }
.ma-kgroups { gap: 5px; margin-top: 6px; }
.ma-kgroup > span { padding-top: 6px; }
/* 자동 분석: 한눈에 */
.rp-ai { margin: 14px 0; }
.rp-aihead { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.rp-aihead h3 { margin: 0; font-size: 18px; }
.rp-sw { margin: 0 0 12px; }
.rp-swc { border-top: 3px solid var(--line2); background: var(--surface) !important; border: 1px solid var(--line); }
.rp-swc.good { border-top: 3px solid #34c759; }
.rp-swc.bad { border-top: 3px solid #ff453a; }
.rp-swc.todo { border-top: 3px solid #4ea1ff; }
.rp-swc ul, .rp-swc ol { font-size: 14px; font-weight: 600; line-height: 1.7; }
.rp-secs { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
.rp-sec { border-top: 0; padding: 14px 16px; margin: 0; }
.rp-sec.empty { opacity: .6; }
.rp-sec header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.rp-sec header h4 { margin: 0; font-size: 15px; }
.rp-no { width: 22px; height: 22px; border-radius: 6px; background: var(--pri); color: var(--on-pri); font-size: 12px; font-weight: 900; display: grid; place-items: center; }
.rp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 6px; margin-bottom: 10px; }
.rp-kpis div { background: var(--surface2); border-radius: var(--r-sm); padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.rp-kpis b { font-size: 19px; font-weight: 900; letter-spacing: -.02em; }
.rp-kpis small { font-size: 11px; color: var(--muted); }
.rp-points { margin: 0; padding-left: 16px; font-size: 13px; line-height: 1.7; color: var(--sub); }
.rp-points b { color: var(--text); }
/* 유튜브로 기록 */
.ma-vwrap.yt { aspect-ratio: 16 / 9; background: #000; }
.ma-vwrap.yt iframe, .ma-vwrap.yt .ma-yt { width: 100%; height: 100%; border: 0; display: block; }
.ma-vwrap.yt .ma-status { pointer-events: none; }
.ma-ytin { display: flex; gap: 6px; margin-top: 12px; }
.ma-ytin input { flex: 1; min-width: 0; }
.ma-ytbar { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.rp-kpis b { white-space: nowrap; }
.ma-src { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; } .ma-src legend { padding: 0 4px; font-weight: 700; font-size: 13px; }
.ma-yterr { color: #fff; padding: 24px; text-align: center; font-size: 14px; }
.ma-moderow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.ma-moderow .switch { margin-left: auto; font-size: 12px; }
.ma-kinds.ma-core { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
.ma-kinds.ma-core button { padding: 12px 10px; font-size: 14px; font-weight: 800; }
.ma-kinds.ma-core button i { width: 12px; height: 12px; }
@media (max-width: 640px) { .ma-kinds.ma-core { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ma-kinds.ma-core button { white-space: nowrap; } .ma-kinds.ma-core kbd { font-size: 9px; }
.ma-veoload { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 14px; padding: 20px; text-align: center; background: #000; margin: 0; } .ma-vwrap { position: relative; }
.ma-hf { font-style: normal; font-size: 10px; font-weight: 900; width: 18px; height: 18px; border-radius: 5px; display: inline-grid; place-items: center; flex: none; background: var(--surface3); color: var(--sub); }
.ma-hf.h2 { background: #4ea1ff33; color: #8ec5ff; }
.ma-half button { min-width: 52px; }
.rp-score small { font-size: 11px; color: var(--muted); flex-basis: 100%; text-align: center; }
.rp-score { flex-wrap: wrap; justify-content: center; max-width: 220px; }
.rp-cmp { overflow-x: auto; }
.rp-cmp table { font-size: 13px; }
@media (max-width: 520px) { .rp-cmp table { font-size: 12px; } .rp-cmp td, .rp-cmp th { padding: 5px 3px; } }
.rp-cmp td, .rp-cmp th { text-align: center; padding: 6px; }
.rp-cmp td.up { color: #34c759; font-weight: 800; }
.ma-flow > div.ht { border-left: 1px dashed var(--line2); padding-left: 3px; }
/* 경기분석: 영상 크게 + 밑에 키보드 그림 */
.ma-body:not(.wide) { grid-template-columns: minmax(0, 1.7fr) minmax(330px, 1fr); }
.ma-vwrap video { max-height: 68vh; }
.ma-kb { margin-top: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px 12px; }
.kb-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin-bottom: 8px; }
.kb-row { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px; margin-bottom: 5px; }
.kb-row.r0 { grid-template-columns: repeat(6, minmax(0, 1fr)) 3.2fr; }
.kb-row.r1 { padding-left: 4%; grid-template-columns: repeat(5, minmax(0, 1fr)) 4fr; }
.kb-row.r2 { padding-left: 7%; grid-template-columns: repeat(5, minmax(0, 1fr)) 4fr; }
.kb-row.r3 { padding-left: 11%; grid-template-columns: repeat(5, minmax(0, 1fr)) 4fr; }
.kb-row.r4 { grid-template-columns: 1.3fr 3fr 1fr; margin-top: 4px; }
.kb-key { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 50px; padding: 6px 7px 6px 9px; background: var(--surface2); border: 1px solid var(--line2); border-bottom-width: 3px; border-radius: 7px; color: var(--text); cursor: pointer; text-align: left; overflow: hidden; }
.kb-key::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c, transparent); }
.kb-key b { font-size: 15px; font-weight: 900; line-height: 1; }
.kb-key span { font-size: 11.5px; font-weight: 700; color: var(--sub); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.kb-key:hover { border-color: var(--c, var(--text)); }
.kb-key.on { background: color-mix(in srgb, var(--c) 28%, var(--surface2)); border-color: var(--c); }
.kb-key.on span { color: var(--text); }
.kb-key.fn { min-height: 40px; flex-direction: row; align-items: center; gap: 8px; }
.kb-key.fn b { font-size: 12px; }
.kb-key[disabled] { opacity: .5; cursor: default; }
.kb-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; color: var(--sub); margin-top: 6px; }
.kb-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; }
.ma-tips { margin-top: 10px; }
.ma-tips h4 { margin: 0 0 6px; }
.ma-tips ol { margin: 0 0 8px; padding-left: 20px; line-height: 1.8; font-size: 13.5px; }
.ma-tips p { margin: 4px 0 0; }
@media (max-width: 1000px) { .kb-row.r1, .kb-row.r2, .kb-row.r3 { padding-left: 0; } .kb-key span { font-size: 10.5px; } }
.kb-row, .kb-row.r0, .kb-row.r1, .kb-row.r2, .kb-row.r3 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.kb-row.r1 { padding-left: 3%; } .kb-row.r2 { padding-left: 6%; } .kb-row.r3 { padding-left: 9%; }
.kb-row.r4 { grid-template-columns: 1.4fr 3fr 1.2fr; padding-left: 0; }
.kb-key span { white-space: normal; font-size: 12px; }
.kb-key { min-height: 54px; }
/* 키보드 그림 · 오른쪽 칸 더 촘촘하게 */
.ma-vwrap video { max-height: 56vh; }
.ma-kb { max-width: 600px; padding: 8px 10px 10px; margin-top: 8px; }
.kb-head { margin-bottom: 6px; }
.kb-head b { font-size: 13px; }
.kb-row { gap: 4px; margin-bottom: 4px; }
.kb-key { min-height: 40px; padding: 4px 5px 4px 8px; border-radius: 6px; border-bottom-width: 2px; }
.kb-key b { font-size: 12.5px; }
.kb-key span { font-size: 10.5px; }
.kb-key.fn { min-height: 32px; }
.kb-legend { margin-top: 4px; font-size: 10.5px; }
.ma-tips { max-width: 600px; padding: 12px 14px; }
.ma-tips ol { font-size: 12.5px; line-height: 1.7; }
.ma-panel { gap: 8px; }
.ma-moderow { margin-top: 0; }
.ma-live .ma-livecard { margin: 0; }
.ma-kb, .ma-tips { max-width: 520px; }
.kb-key { min-height: 36px; }
.ma-panel { gap: 6px; }
.ma-moderow { min-height: 0; margin: -2px 0 0; }
.ma-moderow .switch { padding: 0; min-height: 0; }
.ma-detail { margin: 2px 0; }
.ma-detail:empty { display: none !important; }
/* 단축키: 묶음 색으로 확실히 (공격 파랑 · 수비 빨강 · 전환 초록 · 세트피스 노랑 · 기타 주황) */
.kb-key { background: color-mix(in srgb, var(--c) 16%, var(--surface2)); border-color: color-mix(in srgb, var(--c) 55%, transparent); }
.kb-key::before { display: none; }
.kb-key b { color: var(--c); font-size: 14px; }
.kb-key span { color: var(--text); opacity: .85; }
.kb-key:hover { background: color-mix(in srgb, var(--c) 28%, var(--surface2)); }
.kb-key.on { background: var(--c); border-color: var(--c); }
.kb-key.on b, .kb-key.on span { color: #111; opacity: 1; }
.kb-key.fn { --c: #9a9a9a; }
.kb-legend i { width: 10px; height: 10px; border-radius: 3px; }
.ma-mk { font-size: 2.1px; font-weight: 900; fill: #111; text-anchor: middle; pointer-events: none; }
.ma-mk { font-size: 2.9px; }
.ma-mk { font-size: 1.95px; }
.lu-pos b, .lu-pos input { width: 28px; height: 28px; font-size: 12px; border-width: 2px; }
.lu-pos input { line-height: 24px; }
.lu-pos input::placeholder { font-size: 9px; }
.lu-pos small { font-size: 9px; line-height: 1; }
.lu-pos { gap: 1px; }
.lu-pos.key small::before { content: '★ '; color: #ffd400; }
.ma-h .muted { font-weight: 500; margin-left: 6px; }
@media (max-width: 600px) { .lu-pos b, .lu-pos input { width: 24px; height: 24px; font-size: 11px; } }
/* 전반 · 후반: 색으로 확실히 (전반 하늘색 · 후반 주황) */
.ma-half button small { font-size: 11px; opacity: .7; margin-left: 2px; }
.ma-half button.hb1.on { background: #38bdf8; color: #06202d; }
.ma-half button.hb2.on { background: #fb923c; color: #2a1405; }
.ma-halfbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 12px; border-radius: var(--r-sm); font-size: 13px; }
.ma-halfbar b { font-size: 15px; }
.ma-halfbar span { margin-left: auto; font-size: 12px; opacity: .85; }
.ma-halfbar.h1 { background: #38bdf822; border: 1px solid #38bdf8; color: #bae6fd; }
.ma-halfbar.h2 { background: #fb923c22; border: 1px solid #fb923c; color: #fed7aa; }
.ma-tagpitch.h1 svg { outline: 3px solid #38bdf8; outline-offset: -1px; border-radius: 4px; }
.ma-tagpitch.h2 svg { outline: 3px solid #fb923c; outline-offset: -1px; border-radius: 4px; }
.sthalf { padding: 1px 7px; border-radius: 5px; margin-right: 6px; }
.sthalf.h1 { background: #38bdf8; color: #06202d; } .sthalf.h2 { background: #fb923c; color: #2a1405; }
.ma-hf.h1 { background: #38bdf833; color: #7dd3fc; } .ma-hf.h2 { background: #fb923c33; color: #fdba74; }
/* 전체화면 기록 */
.studio.ma.ma-full { position: fixed; inset: 0; z-index: 300; background: var(--bg, #0b0b0b); margin: 0; padding: 10px 14px; overflow: auto; }
.studio.ma.ma-full .ma-tabs, .studio.ma.ma-full .sample-banner { display: none; }
.studio.ma.ma-full .studio-top { margin-bottom: 6px; }
.studio.ma.ma-full .ma-body { grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); gap: 12px; }
.studio.ma.ma-full .ma-vwrap video { max-height: 60vh; }
.studio.ma.ma-full .ma-tips, .studio.ma.ma-full .kp-edit, .studio.ma.ma-full .ma-live, .studio.ma.ma-full .ma-ytbar { display: none; }
.studio.ma.ma-full .ma-kb { max-width: none; }
.studio.ma.ma-full .ma-log { max-height: 22vh; }
.studio.ma.ma-full .ma-panel { max-height: calc(100vh - 70px); overflow: auto; }
.kb-row.r4 { grid-template-columns: 1.3fr 2.4fr 0.9fr 1.3fr; }
.kb-key.fn.del { --c: #ff453a; }
.kb-key.fn.del.on { background: #ff453a; }
.ma-tagpitch svg.del-mode { outline: 3px dashed #ff453a !important; cursor: crosshair; }
.ma-delhint { color: #ff6b6b; }
.ma-kowarn { margin: 0; padding: 7px 10px; border-radius: var(--r-sm); background: #ffd60a1a; border: 1px solid #ffd60a66; color: #fde68a; font-size: 12px; line-height: 1.5; }
.ma-min { min-width: 34px; font-weight: 800; }
.an-steps { margin: 8px 0 6px; padding-left: 18px; font-size: 12.5px; line-height: 1.7; color: var(--sub); } .an-steps b { color: var(--text); }
.ma-rubber { stroke-width: .6; stroke-dasharray: 1.2 .8; stroke-linecap: round; pointer-events: none; } .ma-tagpitch svg { touch-action: none; }
.danger-btn { color: #ff6b6b !important; border-color: #ff453a66 !important; }
.danger-solid { background: #ff453a !important; border-color: #ff453a !important; color: #fff !important; }
.expel-note { border: 1px solid #ff453a88; background: #ff453a14; border-radius: var(--r-sm); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; line-height: 1.6; }
.expel-note[hidden] { display: none; }
.expel-note > b { color: #ff8a80; font-size: 14.5px; }
.expel-note p { margin: 0; }
.expel-why { background: var(--surface2); border-radius: 6px; padding: 8px 10px; }
.expel-why span { font-size: 11px; font-weight: 800; color: var(--muted); }

/* 로고 · 초록 포인트 (로고 밑줄 색) — 아주 조금만 */
.logo img { display: block; width: 100%; max-width: 188px; height: auto; }
.logo small { margin-top: 10px; }
.logo-sm img { display: block; height: 20px; width: auto; }
.brand img { display: block; width: 230px; max-width: 70vw; height: auto; margin: 0 auto; }
.brand small { margin-top: 6px; }
.page-head .eyebrow::before { content: ''; display: inline-block; width: 16px; height: 2px; background: var(--accent); vertical-align: middle; margin: -2px 7px 0 0; border-radius: 1px; }
.nav-list a.active { box-shadow: inset 3px 0 0 var(--accent); }
input[type=checkbox], input[type=radio], input[type=range] { accent-color: var(--accent); }
:focus-visible { outline-color: var(--accent); }
.sf-brand strong::after { content: ''; display: block; width: 26px; height: 2px; background: var(--accent); margin-top: 6px; border-radius: 1px; }
/* 체험해 보기 */
.try-demo { max-width: 400px; margin: 14px auto 0; display: flex; flex-direction: column; gap: 10px; border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.try-demo b { display: block; font-size: 14px; }
.try-demo small { color: var(--muted); font-size: 12px; }
.try-demo .row { gap: 8px; flex-wrap: wrap; }
.try-demo .btn { flex: 1; text-align: center; justify-content: center; }
.demo-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 0; padding: 8px 12px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); font-size: 13px; }
.demo-bar b { color: var(--accent); }
.demo-bar span { color: var(--sub); flex: 1; min-width: 200px; }
.demo-bar a:not(.btn) { color: var(--text); font-size: 12px; }
@media (max-width: 700px) { .demo-bar { flex-wrap: nowrap; gap: 8px; padding: 6px 10px; margin-top: 8px; } .demo-bar span { display: none; } .demo-bar a:not(.btn) { margin-left: auto; white-space: nowrap; } .demo-bar .btn { white-space: nowrap; } }

/* iPhone: 16px 보다 작은 입력칸은 누를 때 화면이 확대됨 → 휴대폰에선 모든 입력칸 16px */
@media (max-width: 720px) { input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 16px !important; min-width: 0; max-width: 100%; } }
.pad-tsel { display: inline-flex; gap: 6px; align-items: center; }
.pad-tsel[hidden] { display: none; }
/* 만들다 만 것 (임시저장) */
.draft-strip { border: 1px dashed color-mix(in srgb, var(--accent) 55%, var(--line2)); border-radius: var(--r-sm); padding: 10px 12px; margin: 0 0 12px; display: grid; gap: 6px; background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.draft-strip > b { font-size: 13px; }
.draft-strip ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.draft-strip li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.draft-strip li > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.st-colors.st-team { flex-wrap: wrap; gap: 5px; }
.st-colors.st-team button { width: 20px; height: 20px; }
.st-colors.st-team input[type=color] { width: 26px; height: 22px; padding: 0; border: 1px solid var(--line2); border-radius: 4px; background: none; cursor: pointer; }
/* 부분분석: 쉬운 화면 */
.st-tool span { font-size: 11px; }
.st-moretg { border-top: 1px solid var(--line); border-radius: 0; margin-top: 2px; padding-top: 9px; color: var(--muted); }
.st-moretools { display: flex; flex-direction: column; gap: 3px; }
.st-moretools[hidden] { display: none; }
.st-guide { border: 1px dashed color-mix(in srgb, var(--accent) 55%, var(--line2)); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); border-radius: var(--r-sm); padding: 12px 14px; margin-bottom: 12px; }
.st-guide b { color: var(--text); }
.st-guide > b { display: block; font-size: 14px; margin-bottom: 6px; }
.st-guide ol { margin: 0 0 6px; padding-left: 18px; display: grid; gap: 4px; font-size: 13.5px; color: var(--sub); }
.st-guide small { color: var(--muted); }
.st-ptitle { font-size: 15px; color: var(--text); margin: 0 0 10px; }
.st-lab { font-size: 12px; font-weight: 700; color: var(--sub); margin: 10px 0 6px; }
.st-lab small { color: var(--muted); font-weight: 500; margin-left: 4px; }
.st-adv { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 8px; }
.st-adv > summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--muted); list-style: none; padding: 4px 0; }
.st-adv > summary::-webkit-details-marker { display: none; }
.st-adv > summary::before { content: '▸ '; }
.st-adv[open] > summary::before { content: '▾ '; }
.st-adv[open] > summary { margin-bottom: 8px; }
.st-propsec .mini-switch { display: flex; margin: 6px 0; }
.st-propsec:empty { display: none; }
.seg.st-wide { display: flex; width: 100%; margin: 4px 0 6px; }
.seg.st-wide button { flex: 1; padding: 7px 8px; }
/* 부분분석: 색 — 지금 색 하나, 누르면 펼쳐짐 */
.st-crow { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; margin: 2px 0 10px; }
.st-cpick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.st-clab { font-size: 12px; font-weight: 700; color: var(--sub); }
.st-cdot { width: 26px; height: 26px; border-radius: 50%; background: var(--c); border: 2px solid var(--line2); padding: 0; cursor: pointer; box-shadow: 0 0 0 2px var(--surface); }
.st-cdot:hover { border-color: var(--text); }
.st-cswatch { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; padding: 8px; background: var(--surface2); border: 1px solid var(--line); border-radius: var(--r-sm); }
.st-cswatch[hidden] { display: none; }
.st-cswatch button { width: 20px; height: 20px; border-radius: 50%; background: var(--c); border: 1px solid rgba(255,255,255,.18); padding: 0; cursor: pointer; }
.st-cswatch button.on { box-shadow: 0 0 0 2px var(--surface2), 0 0 0 4px #4ea1ff; }
.st-cswatch input[type=color] { width: 24px; height: 22px; padding: 0; border: 1px solid var(--line2); border-radius: 4px; background: none; cursor: pointer; }
/* 부분분석: 왼쪽 도구 작게 — 더보기까지 펼쳐도 화면 안에 */
.st-tools { gap: 1px; padding: 4px; }
.st-tool { padding: 4px 2px 3px; gap: 1px; }
.st-tool b { font-size: 14px; }
.st-tool span { font-size: 10px; letter-spacing: -0.02em; }
.st-moretg { padding-top: 5px; margin-top: 1px; }
.st-moretg b { font-size: 13px; }
.st-moretools { gap: 1px; }
/* 부분분석: 도구를 한 칸씩 나눠 보이게 */
.st-tools, .st-moretools { gap: 3px; }
.st-tool { background: var(--surface2); border: 1px solid var(--line); border-radius: 5px; }
.st-tool:hover { border-color: var(--line2); }
.st-tool.on { border-color: var(--text); }
.st-moretg { background: none; border: 1px dashed var(--line2); margin: 3px 0; }

/* ═══════════ 리모델링 (2026-10): 검정 · 초록 · 흰색 조금 — 보기 편하게 ═══════════ */
body { background: var(--bg); line-height: 1.55; }
/* 왼쪽 메뉴 */
.nav { background: #050606; border-right-color: #151917; }
.nav-sec > span { color: #4a534e; }
.nav-sec a { color: #c3cbc6; font-weight: 600; border-radius: 8px; padding: 9px 12px; }
.nav-sec a:hover { color: var(--text); background: #0f1311; }
.nav-sec a.active { background: var(--pri-soft); color: var(--pri); box-shadow: inset 3px 0 0 var(--pri); }
.nav-list a.active { box-shadow: inset 3px 0 0 var(--pri); }
.team-chip { background: #0d100e; border-color: #1a201c; }
/* 제목 */
.page-head h1 { color: var(--text); letter-spacing: -0.035em; }
.eyebrow { color: var(--pri); }
.page-head .eyebrow::before { background: var(--pri); }
/* 카드: 살짝 떠 보이게 (테두리는 옅게) */
.card { background: var(--surface); border-color: var(--line); box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset; }
.card h3 { color: var(--text); }
/* 버튼 */
.btn { border-radius: 8px; font-weight: 800; }
.btn:hover { opacity: 1; filter: brightness(1.08); }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--line2); }
.btn.ghost:hover { border-color: var(--pri); color: var(--pri); background: var(--pri-soft); filter: none; }
.btn.danger { background: #d92d20; border-color: #d92d20; color: #fff; }
.icon-btn:hover { color: var(--pri); }
/* 칩 · 탭 · 태그 */
.chip { border-radius: 999px; }
.chip:hover { border-color: var(--pri); color: var(--pri); }
.chip.on, .chip.active { background: var(--pri); color: var(--on-pri); border-color: var(--pri); }
.seg { border-radius: 9px; background: var(--surface2); }
.seg button { border-radius: 7px; }
.tag { border-radius: 5px; }
/* 입력칸 */
input, select, textarea { background: #0c0f0d; border-color: var(--line2); border-radius: 8px; }
input:focus, select:focus, textarea:focus { border-color: var(--pri); box-shadow: 0 0 0 3px var(--pri-soft); }
/* 링크 · 강조 */
.link-btn { color: var(--pri); }
.strong { color: var(--pri); }
a.more, .more-link { color: var(--pri); }
/* 표 */
.tbl th { color: var(--muted); }
.tbl tr:hover td { background: rgba(57, 231, 95, 0.03); }
/* 알림 · 모달 */
.modal { background: #101311; border: 1px solid var(--line2); border-radius: 14px; }
#toast { background: var(--pri); color: var(--on-pri); font-weight: 800; }
/* 위 · 아래 영역 */
.site-footer, footer.sf { border-top-color: #151917; }
/* 홈 맨 위: 흰 상자 → 어두운 판 + 초록 빛 */
.morning { background: radial-gradient(600px 220px at 0% 0%, rgba(57,231,95,0.14), transparent 60%), linear-gradient(120deg, #121614, #0c0f0d 60%); border-color: #1f2a23; color: var(--text); }
.morning .eyebrow, .morning .m-clock { color: var(--pri); }
.morning .m-date strong small { color: var(--muted); }
.morning .m-date { border-right-color: var(--line2); }
.morning .m-hello h1 { color: var(--text); }
.morning .m-hello p { color: var(--sub); }
.morning .m-stats a { background: rgba(255,255,255,0.03); border-color: var(--line2); color: var(--text); }
.morning .m-stats a:hover { border-color: var(--pri); }
.morning .m-stats small { color: var(--muted); }
.morning .m-stats strong { color: var(--pri); }
/* 큰 강조 칸: 통째로 초록 → 어두운 바탕 + 초록 숫자 */
.stat-board .big { background: linear-gradient(160deg, rgba(57,231,95,0.16), rgba(57,231,95,0.04)); color: var(--text); box-shadow: inset 3px 0 0 var(--pri); }
.stat-board .big strong { color: var(--pri); }
.stat-board .big small, .stat-board .big strong i { color: var(--sub); }
.goal-summary .gs-main, .plan-goal { background: var(--pri-soft); color: var(--text); border: 1px solid rgba(57,231,95,0.35); }
.goal-summary .gs-main strong, .plan-goal strong { color: var(--pri); }
.banner { background: var(--pri-soft); color: var(--text); border: 1px solid rgba(57,231,95,0.35); }
/* 리모델링 (중간): 카드 맨 위 제목 띠 — 패널 느낌 */
:root { --strip: #151a17; }
.card > .card-head:first-child, .card > h3:first-child {
  margin: -22px -22px 16px; padding: 13px 22px; background: var(--strip); border-bottom: 1px solid var(--line);
  border-radius: var(--r) var(--r) 0 0; align-items: center;
}
.card > h3:first-child { font-size: 15px; }
.card > .card-head:first-child h3 { font-size: 15px; }
.card > .card-head:first-child a, .card > .card-head:first-child .link-btn { font-size: 13px; font-weight: 700; }
.card { padding: 22px; overflow: visible; }
/* 홈 위쪽 '오늘 · 이번 주' 제목 */
.sec-title, .home-sec > h2 { letter-spacing: -0.03em; }
.todo { padding: 22px; }
.todo > .todo-head { margin: -22px -22px 16px; padding: 13px 22px; background: var(--strip); border-bottom: 1px solid var(--line); border-radius: var(--r) var(--r) 0 0; align-items: center; }
.todo > .todo-head .eyebrow { display: none; }
/* 작전판: 글자 줄이기 (TacticalPad 느낌) — 아이콘 막대 · 설정은 ⚙ 안에 */
.pad-tools { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 6px; background: var(--surface2); border: 1px solid var(--line); border-radius: 10px; }
.pad-tools .ptool { min-width: 38px; height: 36px; padding: 0 9px; display: inline-flex; align-items: center; justify-content: center; gap: 3px; border-radius: 8px; }
.pad-tools .ptool b { font-size: 16px; line-height: 1; }
.pad-tools .pcaret { font-style: normal; font-size: 9px; color: var(--muted); }
.pad-tools .ptool.on { background: var(--pri); color: var(--on-pri); border-color: var(--pri); }
.pad-tools .ptool.on .pcaret { color: var(--on-pri); }
.pad-tsep { width: 1px; height: 22px; background: var(--line2); margin: 0 4px; }
.pad-tools .pfull { margin-left: auto; }
.pad-field[hidden] { display: none !important; }
.pad-field { padding: 8px; background: var(--surface2); border: 1px solid var(--line); border-radius: 10px; }
.pad-hint { display: none !important; }
.pad-acts { gap: 6px; }
.chip.pico { min-width: 32px; padding: 5px 8px; text-align: center; }
.chip.pnum { min-width: 32px; padding: 5px 0; text-align: center; font-weight: 800; }
.pad-motion { gap: 6px; }
.pad-num input, .pad-txt input { width: 64px; }
.pad-txt input { width: 140px; }
.pad-teams [data-tlab] { display: none; }
/* 작전판: 아이콘 + 짧은 이름 */
.pad-tools .ptool { flex-direction: column; height: auto; min-width: 50px; padding: 6px 7px 5px; gap: 3px; }
.pad-tools .ptool b { font-size: 16px; }
.pad-tools .plab { font-size: 10.5px; font-weight: 700; line-height: 1.1; white-space: nowrap; color: var(--sub); }
.pad-tools .ptool.on .plab { color: var(--on-pri); }
.pad-tsep { height: 34px; }
.pm-lab { font-size: 12px; font-weight: 800; color: var(--muted); margin-right: 2px; }
.pad-motion .pm-off { margin-left: auto; color: var(--muted); }

/* 부분분석: 놓친 구간 · 화면 밖 구간 */
.st-marks u { position: absolute; bottom: 5px; height: 3px; border-radius: 2px; background: #ff3b30; }
.st-marks u.out { background: repeating-linear-gradient(90deg, #9aa3a0 0 4px, transparent 4px 7px); }
.tr-gaps { width: 100%; padding-left: 18px; flex-basis: 100%; margin-top: 6px; display: grid; gap: 6px; }
.tr-gbar { position: relative; height: 6px; border-radius: 3px; background: var(--pri); opacity: .9; }
.tr-gbar i { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: #ff3b30; }
.tr-gbar i.out { background: #5d6562; }
.tr-gbar i.hid { background: #8a5a57; }
.tr-gap { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 6px 8px; border-radius: var(--r-sm); background: var(--strip, rgba(255,255,255,.04)); }
.tr-gap b { font-size: 12px; font-variant-numeric: tabular-nums; }
.tr-gap small { color: var(--muted); font-size: 11px; }
.tr-gap .gk { font-size: 10.5px; font-weight: 800; padding: 1px 6px; border-radius: 4px; background: #ff3b30; color: #fff; }
.tr-gap .gk.out { background: #5d6562; }
.tr-gacts { display: flex; flex-wrap: wrap; gap: 4px; width: 100%; }
.tr-gacts .chip { font-size: 11px; padding: 3px 9px; }
.tr-gacts .chip.pri { background: var(--pri); color: var(--on-pri); border-color: var(--pri); }
.tr-gaps { flex: 0 0 100%; box-sizing: border-box; }
.st-items li.tr-row > .tr-acts { flex: 0 0 100%; flex-direction: row; }
.st-items li.tr-row > .tr-gaps { flex: 0 0 100%; display: grid; }
.st-items li.tr-row .tr-gap b { overflow: visible; }


/* ═══ 리모델링 조정 (2026-10-19): 초록은 왼쪽 메뉴 위주로, 큰 화면(본문)은 흰색 · 회색 위주 ═══
   본문 안에서는 '주요 색'을 흰색으로 바꿔서 버튼 · 고른 칸 · 알림이 초록으로 꽉 차지 않게.
   초록은 작은 곳에만: 페이지 제목 위 작은 글씨 · 홈 시계 · 숫자 강조 하나 */
:root { --brand: #39e75f; }
.main-col, .search-panel, .modal-wrap {
  --pri: #eef1ef; --on-pri: #0b0d0c; --pri-soft: rgba(255, 255, 255, 0.07); --accent: #8c9690;
}
.main-col .page-head .eyebrow { color: var(--brand); }
.main-col .page-head .eyebrow::before { background: var(--brand); }
.main-col .eyebrow { color: var(--muted); }
.main-col .page-head .eyebrow, .main-col .morning .m-clock { color: var(--brand); }
.main-col .btn.ghost:hover { border-color: var(--muted); color: var(--text); background: rgba(255,255,255,0.05); }
.main-col .chip:hover { border-color: var(--muted); color: var(--text); }
.main-col .link-btn, .main-col a.more, .main-col .more-link { color: var(--text); }
.main-col .strong { color: var(--brand); }
/* 홈 맨 위: 초록 빛 없이 어두운 판 */
.morning { background: linear-gradient(120deg, #131615, #0c0e0d 60%); border-color: var(--line2); }
.morning .eyebrow { color: var(--muted); }
.morning .m-stats strong { color: var(--text); }
.morning .m-stats a:hover { border-color: var(--muted); }
/* 큰 강조 칸: 초록 판 → 어두운 판, 숫자만 초록 */
.stat-board .big { background: #141816; box-shadow: inset 3px 0 0 var(--brand); }
.stat-board .big strong { color: var(--brand); }
.goal-summary .gs-main, .plan-goal { background: #141816; border-color: var(--line2); }
/* 큰 퍼센트 숫자는 기록실 승률처럼 초록 (목표 달성률도 같게) */
.goal-summary .gs-main { box-shadow: inset 3px 0 0 var(--brand); border: 0; }
.goal-summary .gs-main strong, .plan-goal strong { color: var(--brand); }
.goal-summary .gs-main small, .goal-summary .gs-main strong i { color: var(--sub); }
.goal-summary .gs-main .bar { background: #2a302d; }
.goal-summary .gs-main .bar i { background: var(--brand); }
.banner { background: #141816; border-color: var(--line2); color: var(--text); }
.tbl tr:hover td { background: rgba(255, 255, 255, 0.025); }
/* 체험 모드 띠: 회색으로 */
.demo-bar b { color: var(--brand); }
/* 작은 확인 표시는 초록 그대로 (잘 됐다는 뜻) */
.main-col .todo-list li.done .check, .main-col .goals li.done .check, .main-col .res.W, .main-col .jstatus.done, .main-col .gstatus.done, .main-col .jbadge.sent { background: var(--brand); color: #04150a; border-color: var(--brand); }
.main-col .tr-gbar { background: var(--brand); }
.stat-board .big .bar i, .stat-board .big .wr-bar i { background: var(--brand); }
.stat-board .big .bar { background: #2a302d; }

/* ═══ 휴대폰 점검 (2026-10-19) ═══ */
/* 경기분석: 휴대폰 · 태블릿에서는 영상 · 기록판을 위아래로 (가로 2칸 규칙이 뒤에서 덮어써 영상이 찌그러지던 문제) */
@media (max-width: 1000px) {
  .ma-body, .ma-body:not(.wide), .studio.ma.ma-full .ma-body { grid-template-columns: minmax(0, 1fr); }
}
/* 날짜 · 시간 칸: 아이폰 사파리에서 칸 밖으로 튀어나와 옆 칸(인원 등)과 겹치던 문제 */
input[type=date], input[type=time], input[type=datetime-local], input[type=month] {
  -webkit-appearance: none; appearance: none; min-width: 0; max-width: 100%; width: 100%; display: block; box-sizing: border-box;
  min-height: 46px; /* 사파리에서 모양을 풀면 높이가 줄어드는 것 막기 */
}
input[type=date]::-webkit-date-and-time-value, input[type=time]::-webkit-date-and-time-value { text-align: left; margin: 0; }
.grid2 > *, .grid3 > *, .grid4 > * { min-width: 0; }
@media (max-width: 600px) {
  /* 오늘 기록: 아래에 떠 있는 저장 버튼이 칸을 가리지 않게 — 바닥 띠 위에 */
  .daily-save { bottom: 0; margin: 0 -12px; padding: 14px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(8, 9, 10, 0.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-top: 1px solid var(--line); z-index: 4; }
  .daily-save .btn { flex: 1; padding: 12px 10px; }
  /* 평점 1~10: 5개씩 두 줄 (9 · 10만 크게 늘어나지 않게) */
  .scale:has(> label:nth-child(10)) { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .scale label { min-width: 0; }
}
/* 창(모달) 안에서 저장 · 올리기를 누르면: 버튼에 도는 표시 (느린 인터넷에서도 진행 중인 걸 알 수 있게) */
.modal form .btn:disabled:not([type=button]), .daily-save .btn:disabled { opacity: .75; cursor: progress; }
.modal form .btn:disabled:not([type=button])::after { content: ''; display: inline-block; width: 13px; height: 13px; margin-left: 8px; vertical-align: -2px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: btnspin .7s linear infinite; }
@keyframes btnspin { to { transform: rotate(360deg); } }
/* 버전 · 업데이트 내역 */
.sf-ver { margin-left: 8px; background: none; border: 1px solid var(--line2); border-radius: 999px; padding: 1px 9px; font: inherit; font-size: 11.5px; font-weight: 700; color: var(--sub); cursor: pointer; vertical-align: 1px; }
.sf-ver:hover { color: var(--text); border-color: var(--muted); }
.ver-list { display: grid; gap: 14px; margin-top: 12px; }
.ver-list section { border-left: 2px solid var(--line2); padding-left: 14px; }
.ver-list section:first-child { border-left-color: var(--brand, #39e75f); }
.ver-h { display: flex; align-items: baseline; gap: 8px; }
.ver-h b { font-size: 15px; font-weight: 900; }
.ver-h small { color: var(--muted); }
.ver-list ul { margin: 6px 0 0; padding-left: 18px; color: var(--sub); font-size: 13.5px; line-height: 1.6; }
/* 기록판 숫자: 칸이 좁아도 잘리거나 붙어 보이지 않게 */
.stat-board > div { min-width: 0; }
.stat-board strong { white-space: nowrap; } /* 숫자는 중간에 끊지 않음 */
.stat-board strong.duo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 0; font-size: 28px; letter-spacing: -0.02em; }
.stat-board strong.duo > span { white-space: nowrap; }
.stat-board strong.duo em { font-style: normal; font-size: 13px; font-weight: 700; color: var(--muted); margin-right: 5px; letter-spacing: 0; }
.stat-board strong.duo .sep { margin: 0 8px; font-size: 20px; font-weight: 700; color: var(--muted); }
/* 칸이 좁으면 (컴퓨터에서 6칸 한 줄일 때 등) 무 · 패를 두 줄로 — 66.7% / 33.3% 같은 긴 숫자도 안 넘치게 */
.stat-board > div { container-type: inline-size; }
/* 숫자 크기는 칸 너비에 맞춰 (좁은 칸에서도 128 · 66.7% 가 칸 안에) */
.stat-board > div > strong { font-size: clamp(20px, 24cqi, 36px); }
.stat-board .big > strong { font-size: clamp(30px, 24cqi, 60px); }
.stat-board strong.duo { font-size: clamp(15px, 9.5cqi, 28px); }
@container (max-width: 250px) {
  .stat-board strong.duo { flex-direction: column; font-size: clamp(14px, 15cqi, 24px); }
  .stat-board strong.duo .sep { display: none; }
}
@container (max-width: 150px) { .stat-board strong.duo em { font-size: 11px; margin-right: 3px; } }
/* 기록판 · 목표판: 칸 수가 안 맞아 마지막 줄에 빈 칸이 생기지 않게 마지막 칸을 늘림 */
@media (max-width: 1200px) { .stat-board:not(.small) > div:nth-child(6):last-child { grid-column: span 2; } }
@media (max-width: 860px) {
  .stat-board:not(.small) > div:nth-child(6):last-child, .goal-summary > :nth-child(6):last-child, .stat-board.small > :nth-child(5):last-child { grid-column: 1 / -1; }
}
/* 승 · 무 · 패 막대: 승 초록 · 무 회색 · 패 어두운 빨강 */
.stat-board .wdl { background: #2a302d; }
.stat-board .wdl .w { background: var(--brand); }
.stat-board .wdl .d { background: #6b736f; }
.stat-board .wdl .l { background: #8a3b36; }
.stat-board strong.duo i { font-size: 0.62em; }
.stat-board > div > strong i { font-size: 0.5em; }
/* 목표판 숫자도 칸 너비에 맞춰 (100% 같은 긴 숫자) */
.goal-summary > * { container-type: inline-size; min-width: 0; }
.goal-summary > * > strong { white-space: nowrap; font-size: clamp(20px, 24cqi, 36px); }
.goal-summary .gs-main > strong { font-size: clamp(30px, 24cqi, 48px); }
.goal-summary strong i { font-size: 0.5em; }

/* ═══ 휴대폰 작전판 (2026-10-20): 가로 전체화면 · 확대 · 돋보기 · 글 ═══ */
.pad { position: relative; }
html.pad-locked, html.pad-locked body { overflow: hidden; overscroll-behavior: none; }
.modal-wrap.pad-host-full { -webkit-backdrop-filter: none; backdrop-filter: none; overflow: hidden; }
/* 세로일 때 안내 */
.pad-rotate { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--line2); border-radius: 10px; background: #121614; font-size: 13px; color: var(--sub); }
.pad-rotate b { color: var(--brand, #39e75f); }
.pad-rotate span { flex: 1 1 100%; }
.pad-rotate .btn { flex: 1 1 0; min-height: 40px; }
.pad-rotate[hidden], .pad-rotate.gone { display: none; }
/* 확대했을 때 [전체 보기] */
.pad-zoom { position: absolute; z-index: 4; left: 10px; top: 10px; display: inline-flex; gap: 6px; align-items: center; padding: 7px 12px; min-height: 36px; border-radius: 999px; border: 1px solid var(--line2); background: rgba(12,15,13,.92); color: var(--text); font: inherit; font-size: 12px; font-weight: 700; }
.pad-zoom b { color: var(--brand, #39e75f); }
.pad-zoom[hidden] { display: none; }
/* 돋보기 */
.pad-loupe { position: fixed; z-index: 400; width: 112px; height: 112px; border-radius: 50%; border: 3px solid #fff; overflow: hidden; box-shadow: 0 10px 26px rgba(0,0,0,.6); pointer-events: none; }
.pad-loupe[hidden] { display: none; }
.pad-loupe svg { width: 100%; height: 100%; display: block; }
.pad-loupe i { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 1.5px solid rgba(255,255,255,.85); border-radius: 50%; }
/* 글 쓰는 동안 위에 띄우는 작은 그림 */
.pad-mini { position: fixed; z-index: 120; top: calc(64px + env(safe-area-inset-top)); right: 10px; width: 44vw; max-width: 220px; padding: 0; border: 2px solid var(--line2); border-radius: 10px; overflow: hidden; background: #0b0d0c; box-shadow: 0 10px 24px rgba(0,0,0,.6); }
.pad-mini svg { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; }
.pad-mini span { position: absolute; right: 6px; bottom: 6px; padding: 4px 8px; border-radius: 999px; background: #eef1ef; color: #0b0d0c; font-size: 11px; font-weight: 800; }

/* 휴대폰 전체화면 */
.pad.pad-full.pad-phone { --rail: calc(64px + env(safe-area-inset-left)); position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; z-index: 300; margin: 0; padding: 0; display: block; overflow: hidden; background: #0b0d0c; }
.pad-phone .pad-hint, .pad-phone .pad-tools .pad-tsep, .pad-phone .pad-rotate { display: none !important; }
.pad-phone .pad-svg { position: absolute; top: 0; left: var(--rail); width: calc(100% - var(--rail)); height: 100%; max-height: none; border-radius: 0; }
.pad-phone.pad-notes-on .pad-svg { width: calc(100% - var(--rail) - min(44%, 340px)); }
.pad-topbar .pfull { margin-left: 0; }
/* 왼쪽 도구 줄 */
.pad-phone .pad-tools { position: absolute; left: 0; top: 0; bottom: 0; width: var(--rail); margin: 0; z-index: 5; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: space-evenly; gap: 2px;
  padding: calc(4px + env(safe-area-inset-top)) 5px calc(4px + env(safe-area-inset-bottom)) calc(5px + env(safe-area-inset-left)); background: #0e1110; border-right: 1px solid var(--line); }
.pad-phone .pad-tools > .ptool, .pad-phone .pad-tools .pgroup > .ptool { width: 100%; min-width: 0; min-height: 34px; height: auto; flex: 1 1 0; max-height: 52px; padding: 2px 2px; gap: 1px; border-radius: 9px; }
.pad-phone .pad-tools .pgroup { display: flex; flex: 1 1 0; max-height: 52px; min-height: 34px; position: relative; }
.pad-phone .pad-tools .plab { font-size: 9.5px; }
.pad-phone .pad-tools .ptool b { font-size: 15px; }
.pad-phone .pgmenu { top: 0; left: calc(100% + 6px); max-height: calc(100dvh - 16px); overflow-y: auto; grid-template-columns: repeat(2, minmax(120px, 1fr)); }
.pad-phone .pgmenu button { min-height: 40px; font-size: 13px; }
/* 위쪽 줄: 장면 · 재생 · 되돌리기 · 모두 지우기 · 경기장 · 글 · 완료 */
.pad-topbar { position: absolute; z-index: 6; top: calc(6px + env(safe-area-inset-top)); right: calc(6px + env(safe-area-inset-right)); left: calc(var(--rail) + 6px); display: flex; justify-content: flex-end; align-items: center; gap: 5px; pointer-events: none; flex-wrap: nowrap; }
.pad-topbar > * { pointer-events: auto; }
.pad-phone.pad-notes-on .pad-topbar { right: calc(min(44%, 340px) + 6px); }
.pad-topbar .ptool { flex-direction: row !important; height: 38px; min-width: 38px; padding: 0 10px !important; border-radius: 999px; background: rgba(12,15,13,.92); gap: 4px; }
.pad-topbar .ptool .plab { font-size: 11.5px; color: var(--text); }
.pad-topbar .ptool b { font-size: 14px; }
.pad-topbar [data-act="full"] { background: #eef1ef; border-color: #eef1ef; }
.pad-topbar [data-act="full"] b { display: none; }
.pad-topbar [data-act="full"] .plab { color: #0b0d0c; font-weight: 900; }
.pad-topbar [data-act="clear"] .plab, .pad-topbar [data-fieldtg] .plab { display: none; }
.pad-topbar .pad-motion { margin: 0 auto 0 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; padding: 3px 6px; border-radius: 999px; background: rgba(12,15,13,.92); border: 1px solid var(--line2); font-size: 12px; min-width: 0; }
.pad-topbar .pad-motion::-webkit-scrollbar { display: none; }
.pad-topbar .pad-motion small { display: none; }
.pad-topbar .pad-motion .pm-scenes { flex-wrap: nowrap; }
.pad-topbar .pad-motion > *, .pad-topbar .pad-motion .pm-scenes > * { flex: none; }
/* 경기장 설정 */
.pad-phone .pad-field:not([hidden]) { position: absolute; z-index: 7; top: calc(52px + env(safe-area-inset-top)); right: 8px; left: calc(var(--rail) + 8px); max-height: calc(100% - 64px); overflow: auto; padding: 10px; margin: 0; border: 1px solid var(--line2); border-radius: 12px; background: #121614; box-shadow: 0 12px 30px rgba(0,0,0,.6); }
.pad-phone .pad-zoom { left: calc(var(--rail) + 8px); top: calc(52px + env(safe-area-inset-top)); }
/* 아래 설정 줄 (고른 것 색 · 번호 · 크기 · 삭제): 늘 같은 자리 한 줄 — 경기장은 그 위까지만이라 고른 선수를 가리지 않음 */
.pad.pad-full.pad-phone { --sheet: calc(54px + env(safe-area-inset-bottom)); }
.pad-phone .pad-svg { height: calc(100% - var(--sheet)); }
.pad-sheet { position: absolute; z-index: 6; left: var(--rail); right: 0; bottom: 0; height: var(--sheet); display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; overscroll-behavior: contain; scrollbar-width: none;
  padding: 0 calc(10px + env(safe-area-inset-right)) env(safe-area-inset-bottom) 10px; background: #101312; border-top: 1px solid var(--line2); }
.pad-sheet::-webkit-scrollbar { display: none; }
.pad-sheet.empty::after { content: '선수 · 그림을 누르면 여기서 색 · 번호 · 크기 · 두 손가락 확대'; color: var(--mute); font-size: 12px; white-space: nowrap; }
.pad-sheet .pad-acts, .pad-sheet .pad-acts > span, .pad-sheet .pad-teams, .pad-sheet .pad-colors, .pad-sheet .pad-grp, .pad-sheet .pad-tsel { display: flex; flex-wrap: nowrap; align-items: center; gap: 5px; margin: 0; min-height: 0; flex: none; }
.pad-sheet .pad-acts[hidden], .pad-sheet .pad-acts > [hidden], .pad-sheet [hidden] { display: none !important; }
.pad-sheet .pad-acts { gap: 8px; }
.pad-sheet .pad-teams, .pad-sheet .pad-colors { border-right: 1px solid var(--line); padding-right: 8px; }
.pad-sheet .chip, .pad-sheet .pteam { min-height: 38px; white-space: nowrap; flex: none; }
.pad-sheet .pcol { width: 30px; height: 30px; flex: none; }
.pad-sheet input { font-size: 16px; height: 38px; } /* 아이폰: 16px보다 작으면 누를 때 화면이 확대됨 */
.pad-sheet small { white-space: nowrap; }
.pad-phone.pad-notes-on .pad-sheet { right: min(44%, 340px); }
/* 글자 · 번호를 쓰는 동안: 설정 줄이 화면 맨 위로 (키보드에 안 가려지게) · 경기장은 키보드 위 남은 곳에 맞춰 작게 */
.pad-phone.pad-typing .pad-sheet { top: 0; bottom: auto; height: calc(54px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); padding-bottom: 0; border-top: 0; border-bottom: 1px solid var(--line2); }
.pad-phone.pad-typing .pad-svg { top: calc(54px + env(safe-area-inset-top)); height: calc(var(--vvh, 100%) - 54px - env(safe-area-inset-top)); }
.pad-phone.pad-typing .pad-topbar, .pad-phone.pad-typing .pad-zoom { display: none; }
.pad-phone.pad-typing .pad-sel > :not([data-ptxt]):not([data-pnum]):not([data-colors]) { display: none !important; }
.pad-phone.pad-typing .pad-sheet .pad-acts:not(.pad-sel) { display: none !important; }
.pad-phone.pad-typing [data-ptxt] input, .pad-phone.pad-typing [data-pnum] input { width: 46vw; }
/* 오른쪽 글 칸 */
.pad-notes { position: absolute; z-index: 6; top: 0; right: 0; bottom: 0; width: min(44%, 340px); overflow-y: auto; padding: calc(10px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) 12px; background: #101312; border-left: 1px solid var(--line2); }
.pad-notes .pn-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; position: sticky; top: -10px; background: #101312; padding: 4px 0; z-index: 1; }
.pad-notes .pn-head small { flex: 1; font-size: 11px; }
.pad-notes label { display: block; margin: 0 0 10px; font-size: 12.5px; }
.pad-notes textarea, .pad-notes input { font-size: 16px; width: 100%; }
.pad-tools [data-notes][hidden] { display: none; }
.pad-topbar [hidden] { display: none !important; }
.pad-topbar .ptool, .pad-topbar .ptool .plab { flex: none; white-space: nowrap; }
.pad-phone.pad-notes-on .pad-topbar [data-act="undo"] .plab, .pad-phone.pad-notes-on .pad-topbar [data-notes] .plab { display: none; }
@media (max-width: 700px) { .pad-topbar [data-act="undo"] .plab { display: none; } }
/* 휴대폰 전체화면 — 세로로 들고 있을 때: 위쪽 버튼은 따로 한 줄, 글 칸은 아래 절반 */
@media (orientation: portrait) {
  .pad.pad-full.pad-phone { --top: calc(52px + env(safe-area-inset-top)); }
  .pad-phone .pad-topbar { top: 0; left: var(--rail); right: 0; height: var(--top); padding: env(safe-area-inset-top) 8px 0; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; background: #0e1110; border-bottom: 1px solid var(--line); }
  .pad-phone .pad-topbar::-webkit-scrollbar { display: none; }
  .pad-phone .pad-topbar .pad-motion { margin-right: 0; }
  .pad-phone .pad-svg { top: var(--top); height: calc(100% - var(--top) - var(--sheet)); width: calc(100% - var(--rail)); }
  .pad-phone .pad-zoom { top: calc(var(--top) + 8px); }
  .pad-phone .pad-field:not([hidden]) { top: calc(var(--top) + 8px); }
  .pad-phone.pad-notes-on .pad-svg { width: calc(100% - var(--rail)); height: calc(52% - var(--top) - var(--sheet) / 2); }
  .pad-phone.pad-notes-on .pad-notes { top: auto; left: var(--rail); right: 0; bottom: var(--sheet); width: auto; height: 48%; border-left: 0; border-top: 1px solid var(--line2); padding: 8px 12px 12px; }
  .pad-phone.pad-notes-on .pad-topbar, .pad-phone.pad-notes-on .pad-sheet { right: 0; }
  .pad-phone.pad-typing .pad-svg { top: calc(54px + env(safe-area-inset-top)); }
}

.pad-sheet .pad-acts { border: 0; padding: 0; background: none; }

/* ═══ 휴대폰 부분분석 (2026-10-20): 가로로 들면 영상이 화면 가득 ═══ */
.st-ph-only { display: none; }
.st-rotate { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; padding: 10px 12px; border: 1px solid var(--line2); border-radius: 10px; background: #121614; font-size: 13px; color: var(--sub); }
.st-rotate b { color: var(--brand, #39e75f); }
.st-rotate span { flex: 1 1 200px; }
.st-rotate[hidden] { display: none; }
.st-zoom { position: absolute; z-index: 5; left: 8px; top: 8px; display: inline-flex; gap: 6px; align-items: center; min-height: 36px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line2); background: rgba(12,15,13,.92); color: var(--text); font: inherit; font-size: 12px; font-weight: 700; }
.st-zoom b { color: var(--brand, #39e75f); }
.st-zoom[hidden] { display: none; }
.st-canvas-wrap { overflow: hidden; }

.studio.st-phone { --rail: calc(68px + env(safe-area-inset-left)); --hd: calc(46px + env(safe-area-inset-top)); position: fixed; inset: 0; z-index: 250; margin: 0; background: #0b0d0c; height: 100vh; height: 100dvh; overflow: hidden; }
.st-phone .studio-top { position: absolute; top: 0; left: 0; right: 0; height: var(--hd); margin: 0; padding: env(safe-area-inset-top) calc(8px + env(safe-area-inset-right)) 0 calc(6px + env(safe-area-inset-left)); display: flex; align-items: center; gap: 8px; background: #0e1110; border-bottom: 1px solid var(--line); flex-wrap: nowrap; }
.st-phone .studio-top .st-title { min-width: 0; flex: 1 1 auto; }
.st-phone .studio-top .st-title strong { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-phone .studio-top .st-title small { display: none; }
.st-phone .studio-top .st-actions { display: flex; flex-wrap: nowrap; gap: 5px; overflow-x: auto; scrollbar-width: none; flex: 0 1 auto; margin: 0; }
.st-phone .studio-top .st-actions::-webkit-scrollbar { display: none; }
.st-phone .studio-top .st-actions .btn { flex: none; white-space: nowrap; min-height: 34px; padding: 6px 11px; font-size: 12.5px; }
.st-phone .studio-top .st-actions .btn.on { background: var(--text); color: #0b0d0c; border-color: var(--text); }
.st-phone .st-mode { display: none; }
.st-phone .st-ph-only { display: inline-flex; }
.st-phone .studio-main { position: absolute; top: var(--hd); left: 0; right: 0; bottom: 0; display: block; margin: 0; }
/* 왼쪽 도구 줄 */
.st-phone .st-tools { position: absolute; left: 0; top: 0; bottom: 0; width: var(--rail); margin: 0; border-radius: 0; border: 0; border-right: 1px solid var(--line); padding: 4px 5px calc(4px + env(safe-area-inset-bottom)) calc(5px + env(safe-area-inset-left)); display: flex; flex-direction: column; gap: 3px; overflow-y: auto; scrollbar-width: none; background: #0e1110; }
.st-phone .st-tools::-webkit-scrollbar { display: none; }
.st-phone .st-tool { min-height: 44px; flex: none; padding: 3px 2px; }
.st-phone .st-tool span { font-size: 9.5px; }
.st-phone .st-moretools { display: flex; flex-direction: column; gap: 3px; }
.st-phone .st-moretools[hidden] { display: none; }
/* 영상 + 재생바 */
.st-phone .st-stage { position: absolute; left: var(--rail); right: 0; top: 0; bottom: 0; display: flex; flex-direction: column; min-width: 0; }
.st-phone .st-canvas-wrap { flex: 1 1 auto; min-height: 0; border-radius: 0; }
.st-phone .st-transport { flex: none; margin: 0; padding: 4px calc(8px + env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) 8px; gap: 2px; flex-wrap: nowrap; border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; }
.st-phone .st-transport .icon-btn { min-width: 34px; min-height: 34px; }
.st-phone .st-transport .st-time { font-size: 11px; white-space: nowrap; }
.st-phone .st-transport .st-timeline { flex: 1 1 auto; min-width: 80px; }
.st-phone .st-transport select { font-size: 16px; padding: 2px 4px; height: 32px; }
.st-phone .st-rotate { display: none; }
.st-phone .st-aipanel:not([hidden]) { position: absolute; z-index: 8; left: 8px; right: 8px; top: 8px; max-height: 60%; overflow: auto; margin: 0; box-shadow: 0 10px 26px rgba(0,0,0,.6); }
/* 타임라인: 누를 때만 아래에서 */
.st-phone .tl { display: none; }
.st-phone.st-tl-open .tl { display: block; position: absolute; z-index: 7; left: 0; right: 0; bottom: calc(46px + env(safe-area-inset-bottom)); height: 46%; overflow: auto; margin: 0; border-radius: 12px 12px 0 0; background: #101312; box-shadow: 0 -10px 24px rgba(0,0,0,.5); }
/* 설정 · 추적 선수: 누를 때만 오른쪽에서 */
.st-phone .st-side { display: none; }
.st-phone.st-side-open .st-side { display: flex; position: absolute; z-index: 9; top: 0; right: 0; bottom: 0; width: min(46%, 380px); max-height: none; overflow-y: auto; margin: 0; padding: 8px calc(10px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) 10px; background: #101312; border-left: 1px solid var(--line2); box-shadow: -10px 0 24px rgba(0,0,0,.5); }
.st-phone .st-side input, .st-phone .st-side select, .st-phone .st-side textarea { font-size: 16px; }
/* AI 상태 줄의 'loading'이 화면 로딩 표시(.loading) 모양을 물려받지 않게 */
.ai-line.loading { letter-spacing: 0; text-align: left; padding: 0; min-height: 0; font-size: 11px; font-weight: 400; animation: none; display: block; }
/* 설정 · 타임라인을 열면 영상이 그 옆(위)으로 작아짐 — 가려서 안 보이는 곳이 없게 */
.st-phone.st-side-open .st-stage { right: min(46%, 380px); }
.st-phone .st-canvas-wrap { order: 0; }
.st-phone .tl { order: 1; }
.st-phone .st-transport { order: 2; }
.st-phone .st-aipanel { order: 3; }
.st-phone.st-tl-open .tl { position: static; flex: 0 0 44%; height: auto; min-height: 0; border-radius: 0; box-shadow: none; border-top: 1px solid var(--line2); }
.st-phone .studio-main.view-only .st-stage { left: 0; }

/* ═══ 휴대폰 경기분석 (2026-10-20): 가로로 들고 기록 — 왼쪽 영상 · 오른쪽 큰 버튼판 ═══ */
.ma-rotate { margin-bottom: 10px; }
.studio.ma.ma-phone { --hd: calc(46px + env(safe-area-inset-top)); position: fixed; inset: 0; z-index: 250; margin: 0; padding: 0; background: #0b0d0c; height: 100vh; height: 100dvh; overflow: hidden; }
.ma-phone .studio-top { position: absolute; top: 0; left: 0; right: 0; height: var(--hd); margin: 0; padding: env(safe-area-inset-top) calc(8px + env(safe-area-inset-right)) 0 calc(6px + env(safe-area-inset-left)); display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; background: #0e1110; border-bottom: 1px solid var(--line); }
.ma-phone .studio-top .st-title { min-width: 0; flex: 1 1 auto; }
.ma-phone .studio-top .st-title strong { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ma-phone .studio-top .st-title small, .ma-phone [data-full] { display: none; }
.ma-phone .studio-top .st-actions { display: flex; flex-wrap: nowrap; gap: 5px; margin: 0; }
.ma-phone .studio-top .st-actions .btn { flex: none; white-space: nowrap; min-height: 34px; padding: 6px 11px; font-size: 12.5px; }
.ma-phone .ma-tabs, .ma-phone .sample-banner, .ma-phone .ma-rotate, .ma-phone .ma-tips, .ma-phone .kp-edit, .ma-phone .ma-live, .ma-phone .ma-ytbar, .ma-phone .ma-halfbar { display: none !important; }
.ma-phone .ma-body { position: absolute; top: var(--hd); left: 0; right: 0; bottom: 0; display: grid !important; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 0; margin: 0; }
.ma-phone .ma-video { display: none !important; }
.ma-ph-left { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #000; padding-left: env(safe-area-inset-left); }
.ma-ph-left .ma-vwrap { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; border-radius: 0; margin: 0; }
.ma-ph-left .ma-vwrap video, .ma-ph-left .ma-vwrap .ma-yt, .ma-ph-left .ma-vwrap iframe { width: 100%; height: 100%; max-height: none !important; object-fit: contain; }
.ma-ph-left .ma-ctl { flex: none; margin: 0; padding: 4px 8px calc(4px + env(safe-area-inset-bottom)); gap: 4px; flex-wrap: nowrap; background: #0e1110; border-top: 1px solid var(--line); }
.ma-ph-left .ma-ctl .icon-btn { min-width: 36px; min-height: 36px; }
.ma-ph-left .ma-ctl select { font-size: 16px; height: 32px; }
/* 오른쪽: 팀 · 전 · 후반 → 큰 버튼판 → 경기장 · 기록 (위아래로 넘김) */
.ma-ph-right { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px calc(8px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) 8px; border-left: 1px solid var(--line); background: #0e1110; }
.ma-ph-right .ma-panel { display: contents; }
.ma-ph-right .ma-row { order: 0; display: flex; flex-wrap: wrap; gap: 5px; margin: 0; }
.ma-ph-right .ma-row .btn, .ma-ph-right .ma-row .seg button { min-height: 36px; font-size: 12px; }
.ma-ph-right .ma-kowarn { order: 1; margin: 0; font-size: 11.5px; }
.ma-ph-right .ma-kb { order: 2; margin: 0; max-width: none; }
.ma-ph-right .ma-panel > *:not(.ma-row):not(.ma-kowarn) { order: 3; }
.ma-ph-right .kb-key { min-height: 52px; }
.ma-ph-right .kb-key span { font-size: 11px; }
.ma-ph-right .ma-log { max-height: 30vh; }
.ma-ph-right input, .ma-ph-right select, .ma-ph-right textarea { font-size: 16px; }
.ma-phone .ma-body { grid-template-rows: minmax(0, 100%); }
.ma-ph-left, .ma-ph-right { height: 100%; }
.ma-ph-right .kb-key span { white-space: normal; word-break: keep-all; overflow-wrap: normal; line-height: 1.15; text-overflow: clip; }
.ma-ph-right .ma-kb > :is(p, small, .muted) { display: none; }
.ma-ph-right .ma-kb { padding: 8px; }
.ma-ph-right .ma-kowarn { padding: 8px 10px; }
.ma-ph-right .kb-head .muted { display: none; }
/* 휴대폰: 키보드 전용 키(Tab · Space)는 빼고, 취소 · 기록 지우기만 크게 */
.ma-ph-right .kb-row.r4 { display: grid; grid-template-columns: 1fr 1fr; padding: 0; }
.ma-ph-right [data-kbtab], .ma-ph-right [data-kbplay] { display: none; }
.ma-ph-right .kb-key.fn b { display: none; }
.ma-ph-right .kb-key.fn { align-items: center; justify-content: center; min-height: 44px; }
.ma-ph-right .kb-key.fn span { font-size: 12.5px; }
.ma-ph-right .kb-legend .muted { display: none; }
.ma-ph-right .kb-key { padding: 5px 4px 5px 7px; }
.ma-ph-right .kb-key span { font-size: 10.5px; overflow-wrap: anywhere; max-width: 100%; }
.ma-tagpitch svg { touch-action: none; } /* 손가락으로 끌어서 끝 지점 — 화면이 스크롤되지 않게 */
/* 경기분석 기록 목록: 손가락으로 누르기 쉽게 */
.ma-ph-right .ma-log button, .ma-ph-right .ma-log .link-btn { min-height: 36px; min-width: 36px; padding: 6px 8px; display: inline-flex; align-items: center; justify-content: center; }
.ma-ph-right .ma-log li { gap: 6px; }
/* 경기분석 아래 줄(Tab · Space · Esc · Del): Esc 칸이 너무 좁아 '취소'가 안 보이던 것 */
.kb-row.r4:not(.ma-ph-right .kb-row) { grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1.4fr); }
.kb-key.fn { gap: 6px; }
.kb-key.fn span { white-space: normal; word-break: keep-all; overflow: visible; text-overflow: clip; line-height: 1.15; }
@media (max-width: 600px) { .kb-key.fn { flex-direction: column; align-items: flex-start; gap: 1px; } }

/* ═══ 작전판 v3 (2026-10-20): 색 고르기 창 · 3D · 선수 연결 ═══ */
.pad-teams, .pad-colors { position: relative; }
.pcdot { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 3px 10px 3px 5px; border-radius: 999px; border: 1px solid var(--line2); background: var(--surface2); color: var(--text); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.pcdot i { width: 22px; height: 22px; border-radius: 50%; background: var(--c, transparent); border: 2px solid var(--s, rgba(255,255,255,.5)); flex: none; }
.pcdot.def i { background: repeating-linear-gradient(45deg, #fff 0 4px, #222 4px 8px); }
.pad-pop { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; display: grid; grid-template-columns: repeat(5, auto); gap: 6px; padding: 10px; border-radius: 12px; border: 1px solid var(--line2); background: #121614; box-shadow: 0 14px 34px rgba(0,0,0,.55); }
.pad-pop[hidden] { display: none; }
.pad-tpop .pteam { min-width: 52px; min-height: 38px; padding: 4px 8px; border-radius: 10px; background: var(--c); color: var(--t); border: 2px solid var(--s, transparent); font-weight: 800; font-size: 12px; }
.pad-tpop .pteam.on { outline: 2px solid #4ea1ff; outline-offset: 2px; }
.pad-cpop { grid-template-columns: repeat(6, auto); }
.pad-cpop .pcol { width: 30px; height: 30px; }
.pad-phone .pad-pop { position: fixed; top: auto; left: calc(var(--rail) + 8px); bottom: calc(var(--sheet) + 8px); }
.pad-phone.pad-typing .pad-pop { bottom: auto; top: calc(62px + env(safe-area-inset-top)); }
/* 3D: 경기장을 눕혀 보기 */
.pad-3d .pad-svg { transform-origin: 50% 50%; }
.pad-3d { overflow: hidden; }
.pad-tools [data-act="d3"].on, .pad-topbar [data-act="d3"].on { background: var(--text); color: #0b0d0c; border-color: var(--text); }
.pad-tools [data-act="d3"].on .plab, .pad-topbar [data-act="d3"].on .plab { color: #0b0d0c; }
.pad-acts [data-linkopt][hidden] { display: none; }
.pad-acts [data-linkopt] .chip.on, .pad-acts [data-larea].on { background: var(--text); color: #0b0d0c; border-color: var(--text); }
.pad-svg .it-link { cursor: pointer; }
.pad-acts [data-linkopt][hidden], .pad-sel [data-linkopt][hidden] { display: none !important; }
/* 아주 낮은 가로 화면(폴드 접은 화면 등): 도구 줄 버튼을 조금 작게 — 도구가 화면 아래로 넘치지 않게 */
.pad-phone .pad-tools > .ptool, .pad-phone .pad-tools .pgroup > .ptool, .pad-phone .pad-tools .pgroup { min-height: 28px; }
@media (max-height: 380px) {
  .pad-phone .pad-tools { gap: 1px; padding-top: calc(3px + env(safe-area-inset-top)); padding-bottom: calc(3px + env(safe-area-inset-bottom)); }
  .pad-phone .pad-tools .plab { font-size: 8.5px; }
  .pad-phone .pad-tools .ptool b { font-size: 13px; }
}
.pad-phone .pad-tools .pgroup > .ptool { height: auto; align-self: stretch; }
.pad-phone .pad-tools > .ptool, .pad-phone .pad-tools > .pgroup { flex: 1 1 0; min-height: 0; }
.pad-phone .pad-tools .ptool { line-height: 1; overflow: hidden; }
.pad-phone .pad-tools .pgroup > .ptool { flex: 1 1 auto; min-height: 0; }
@media (max-height: 380px) {
  .pad-phone .pad-tools .ptool { padding: 1px 2px; gap: 1px; }
  .pad-phone .pad-tools .ptool b { line-height: 1; font-size: 12px; }
  .pad-phone .pad-tools .plab { font-size: 8.5px; line-height: 1.05; }
}
@media (max-height: 380px) {
  .pad-phone .pad-tools > .ptool, .pad-phone .pad-tools > .pgroup, .pad-phone .pad-tools .pgroup > .ptool { flex: 1 1 0 !important; min-height: 0 !important; height: auto !important; max-height: none !important; }
}
@media (max-height: 380px) {
  .pad-phone .pad-tools > .ptool, .pad-phone .pad-tools > .pgroup { flex: 0 0 calc((100% - 9px) / 10) !important; }
  .pad-phone .pad-tools .pgroup > .ptool { flex: 1 1 auto !important; }
}
/* 도구 줄: 도구가 몇 개든 세로 높이를 똑같이 나눔 (버튼이 글자 크기 때문에 안 줄어들던 것 — contain: size) */
.pad-phone .pad-tools > .ptool, .pad-phone .pad-tools > .pgroup { flex: 1 1 0 !important; min-height: 0 !important; max-height: 52px !important; height: auto !important; }
.pad-phone .pad-tools > .ptool, .pad-phone .pad-tools .pgroup > .ptool { contain: size; }
.pad-phone .pad-tools .pgroup > .ptool { flex: 1 1 auto !important; height: auto !important; min-height: 0 !important; }
.pad-phone .pad-tools > .pgroup { contain: size; overflow: visible; }
.pad-phone .pad-tools > .pgroup { padding: 2px 0; box-sizing: border-box; } .pad-phone .pad-tools > .pgroup > .ptool { margin: -2px 0; }
@media (max-height: 380px) { .pad-phone .pad-tools { gap: 0 !important; } }
/* 휴대폰 전체화면 경기장 높이: 예전 규칙(.pad.pad-full .pad-svg 100%)보다 우선 — 아래 설정 줄 위까지만 */
.pad.pad-full.pad-phone .pad-svg { height: calc(100% - var(--sheet)); }
.pad.pad-full.pad-phone.pad-typing .pad-svg { top: calc(54px + env(safe-area-inset-top)); height: calc(var(--vvh, 100%) - 54px - env(safe-area-inset-top)); }
@media (orientation: portrait) {
  .pad.pad-full.pad-phone .pad-svg { top: var(--top); height: calc(100% - var(--top) - var(--sheet)); }
  .pad.pad-full.pad-phone.pad-notes-on .pad-svg { height: calc(52% - var(--top) - var(--sheet) / 2); }
  .pad.pad-full.pad-phone.pad-typing .pad-svg { top: calc(54px + env(safe-area-inset-top)); height: calc(var(--vvh, 100%) - 54px - env(safe-area-inset-top)); }
}
/* 가로에서도 위쪽 버튼은 따로 한 줄 — 경기장 모서리를 가리지 않게 */
.pad.pad-full.pad-phone { --top: calc(50px + env(safe-area-inset-top)); }
.pad-phone .pad-topbar { top: 0; left: var(--rail); right: 0; height: var(--top); padding: env(safe-area-inset-top) calc(8px + env(safe-area-inset-right)) 0 8px; overflow-x: auto; scrollbar-width: none; background: #0e1110; border-bottom: 1px solid var(--line); }
.pad-phone .pad-topbar::-webkit-scrollbar { display: none; }
.pad.pad-full.pad-phone .pad-svg { top: var(--top); height: calc(100% - var(--top) - var(--sheet)); }
.pad-phone .pad-zoom, .pad-phone .pad-field:not([hidden]) { top: calc(var(--top) + 8px); }
.pad.pad-full.pad-phone.pad-notes-on .pad-topbar { right: min(44%, 340px); }
/* 색이 많아져서: 고르는 창은 칸에 맞춰 여러 줄 */
.pad-pop { max-width: min(460px, calc(100vw - 24px)); }
.pad-tpop { grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); width: min(420px, calc(100vw - 24px)); }
.pad-tpop .pteam { min-width: 0; }
.pad-cpop { grid-template-columns: repeat(auto-fill, minmax(30px, 1fr)); width: min(340px, calc(100vw - 24px)); }
.pad-phone .pad-pop { max-width: calc(100vw - var(--rail) - 24px); }
.pad-phone .pad-tpop { width: min(420px, calc(100vw - var(--rail) - 24px)); }
/* 작은 색 칸 (색상별 · 밝기별) */
.pad-swatch { grid-template-columns: repeat(10, 22px) !important; gap: 4px !important; width: auto !important; padding: 10px !important; }
.pad-swatch .sw { width: 22px; height: 22px; padding: 0; border-radius: 5px; border: 1px solid rgba(255,255,255,.14); background: var(--c); cursor: pointer; }
.pad-swatch .sw:hover { transform: scale(1.15); }
.pad-swatch .sw.on { outline: 2px solid #4ea1ff; outline-offset: 1px; }
.pad-swatch .sw.def { grid-column: 1 / -1; width: auto; height: 26px; background: repeating-linear-gradient(45deg, #2a2f2c 0 6px, #1c201e 6px 12px); color: var(--sub); font: inherit; font-size: 11.5px; font-weight: 700; }
.pad-swatch .sw.def.on { color: var(--text); }
.pcdot.multi i { background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red); }
@media (pointer: coarse) { .pad-swatch { grid-template-columns: repeat(10, 28px) !important; } .pad-swatch .sw { width: 28px; height: 28px; } }
/* 좁은 화면: 색 칸이 화면 폭에 맞게 줄어듦 (10칸 그대로) */
.pad-phone .pad-swatch, .pad-swatch { max-width: calc(100vw - 24px); }
.pad-phone .pad-swatch { grid-template-columns: repeat(10, minmax(0, 1fr)) !important; width: min(340px, calc(100vw - var(--rail) - 24px)) !important; box-sizing: border-box; }
.pad-phone .pad-swatch .sw:not(.def) { width: auto; height: auto; aspect-ratio: 1 / 1; }
/* 재생바: 경기장 맞춘 장면 표시 (하늘색 작은 마름모) */
.st-marks em.cal { position: absolute; bottom: -4px; width: 8px; height: 8px; margin-left: -4px; background: #00d1ff; transform: rotate(45deg); border-radius: 1px; box-shadow: 0 0 0 1.5px #0b0d0c; }

/* ───────── v0.9.3 ───────── */
/* 작전판: 두 번 톡톡 → 선택 알림 */
.pad-toast { position: fixed; left: 50%; top: calc(64px + env(safe-area-inset-top)); transform: translateX(-50%); z-index: 90; background: rgba(8,9,10,.92); color: #fff; border: 1px solid var(--line2); padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; pointer-events: none; animation: padToast 1.3s ease forwards; }
@keyframes padToast { 0% { opacity: 0; } 12% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }

/* 전술보드 */
.tb-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 4px 0 12px; }
.tb-bar p { margin: 0; flex: 1 1 280px; min-width: 0; }
.tb-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.tb-pad { margin-bottom: 24px; }
.tb-empty { border: 1px dashed var(--line2); border-radius: var(--r); padding: 34px 20px; text-align: center; display: grid; justify-items: center; gap: 8px; }
.tb-empty b { font-size: 16px; }
.tb-empty p { max-width: 460px; margin: 0 0 6px; line-height: 1.6; }
.tb-preview { margin: 4px 0 14px; }
.tb-preview small { display: block; margin-bottom: 6px; }
.tb-preview .pad-svg { max-height: 300px; }
.tabs a small { font-size: 11px; color: var(--muted); font-weight: 700; margin-left: 2px; }
@media (max-width: 640px) {
  .tb-acts { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tb-acts .btn { padding-left: 4px; padding-right: 4px; white-space: nowrap; font-size: 13px; }
  .tb-acts .btn { width: 100%; }
  .tb-acts [data-tb-save] { grid-column: 1 / -1; order: -1; }
}

/* 오늘 기록: 오전 · 오후 시간 고르기 */
.tpick-l { margin-bottom: 14px; min-width: 0; }
.tpick-l > span { display: block; font-size: 13px; font-weight: 600; color: var(--sub); margin-bottom: 6px; }
.tpick { display: grid; grid-template-columns: auto 1fr 1fr; gap: 6px; align-items: stretch; }
.tpick-ap { display: flex; background: var(--surface2); border: 1px solid var(--line2); border-radius: var(--r-sm); padding: 2px; }
.tpick-ap button { border: 0; background: none; color: var(--muted); font: inherit; font-size: 14px; font-weight: 700; padding: 8px 10px; border-radius: 5px; min-width: 48px; }
.tpick-ap button.on { background: var(--pri); color: var(--on-pri); }
.tpick select { min-width: 0; padding: 10px 8px; font-size: 15px; font-weight: 700; }
.daily .grid2:has(.tpick-l) { grid-template-columns: 1fr; gap: 0; } /* 취침 · 기상 한 줄씩 — 칸이 넓게 */
.tpick { grid-template-columns: minmax(118px, auto) minmax(0, 1fr) minmax(0, 1fr); max-width: 460px; }
.tpick-ap button { flex: 1; font-size: 15px; padding: 10px 12px; }
.tpick select { font-size: 16px; padding: 11px 10px; min-height: 46px; }
/* 오늘 다쳤나요 */
.hurt-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; }
.hurt-pick label { margin: 0; }
.hurt-pick input { display: none; }
.hurt-pick span { display: grid; place-items: center; text-align: center; min-height: 42px; padding: 6px 4px; border: 1px solid var(--line2); border-radius: var(--r-sm); font-size: 13px; font-weight: 700; color: var(--sub); cursor: pointer; line-height: 1.3; }
.hurt-pick input:checked + span { background: var(--pri); color: var(--on-pri); border-color: var(--pri); }
.hurt-pick label:not(:first-child) input:checked + span { background: #ff5a4f; border-color: #ff5a4f; color: #fff; }
.hurt-box { border: 1px solid rgba(255,90,79,.4); background: rgba(255,90,79,.07); border-radius: var(--r-sm); padding: 12px 12px 4px; margin-bottom: 14px; }
.hurt-box p { margin: 0 0 10px; line-height: 1.55; }
.hurt-tag { display: inline-block; font-size: 11px; font-weight: 800; color: #fff; background: #ff5a4f; padding: 1px 6px; border-radius: 3px; vertical-align: middle; }
.kv.hot strong { color: #ff7a70; }

/* 회원가입 안내 */
.signup-rule { border: 1px solid rgba(255,176,32,.45); background: rgba(255,176,32,.07); border-radius: var(--r-sm); padding: 12px 14px; margin: 0 0 16px; font-size: 13px; line-height: 1.55; color: var(--sub); }
.signup-rule > b { color: #ffb020; display: block; margin-bottom: 4px; }
.signup-rule ul { margin: 0 0 6px; padding-left: 18px; }
.signup-rule p { margin: 0; }
.signup-rule p b, .name-note.real b { color: #ffb020; }
.name-note.real { color: var(--sub); }

/* ───────── 코치 노트 ───────── */
.cn-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; padding: 22px 24px; border: 1px solid var(--line2); border-radius: var(--r); margin-bottom: 14px;
  background: radial-gradient(120% 140% at 0% 0%, rgba(57,231,95,.10), transparent 55%), linear-gradient(180deg, #121614, #0d100e); }
.cn-lock { display: inline-block; font-size: 11.5px; font-weight: 700; color: var(--muted); letter-spacing: .02em; border: 1px solid var(--line2); border-radius: 999px; padding: 3px 10px; }
.cn-q-lab { margin: 16px 0 6px; font-size: 11px; font-weight: 800; letter-spacing: .14em; color: var(--accent); text-transform: uppercase; }
.cn-q { margin: 0 0 14px; font-size: 19px; line-height: 1.5; font-weight: 700; letter-spacing: -0.01em; color: var(--text); border-left: 3px solid var(--accent); padding-left: 14px; max-width: 680px; word-break: keep-all; }
.cn-stats { display: grid; grid-auto-rows: min-content; gap: 10px; align-content: center; min-width: 150px; }
.cn-stats div { border: 1px solid var(--line); background: rgba(255,255,255,.02); border-radius: var(--r-sm); padding: 10px 14px; }
.cn-stats b { display: block; font-size: 24px; font-weight: 900; line-height: 1.1; }
.cn-stats small { color: var(--muted); font-size: 12px; }
.cn-starts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-bottom: 22px; }
.cn-start { text-align: left; background: var(--surface); border: 1px solid var(--line2); border-top: 3px solid var(--cc); border-radius: var(--r-sm); padding: 12px 12px 11px; color: var(--text); font: inherit; cursor: pointer; display: grid; gap: 3px; min-width: 0; transition: background .15s, transform .15s; }
.cn-start:hover { background: var(--surface2); transform: translateY(-1px); }
.cn-start span { font-size: 10px; font-weight: 800; letter-spacing: .12em; color: var(--cc); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-start b { font-size: 14.5px; font-weight: 800; }
.cn-start small { font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.cn-bar { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.cn-cats { display: flex; gap: 6px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
.cn-cats .chip small { color: inherit; opacity: .6; margin-left: 2px; }
.cn-cats .chip.on { background: var(--pri); color: var(--on-pri); border-color: var(--pri); }
.cn-bar input[type=search] { flex: 0 1 260px; min-width: 0; }
.cn-tags { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 6px 0 14px; min-height: 4px; }
.cn-tag { background: none; border: 0; padding: 2px 0; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer; }
.cn-tag:hover, .cn-tag.on { color: var(--accent); }
.cn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.cn-card { position: relative; background: var(--surface); border: 1px solid var(--line2); border-radius: var(--r); padding: 16px 18px 14px 20px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; min-width: 0; overflow: hidden; transition: border-color .15s, background .15s; }
.cn-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--cc); }
.cn-card:hover { border-color: var(--muted); background: var(--surface2); }
.cn-card header { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cn-cat { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; color: var(--cc); }
.cn-pin, .cn-has { font-size: 10.5px; font-weight: 700; color: var(--muted); border: 1px solid var(--line2); border-radius: 3px; padding: 0 5px; }
.cn-pin { color: var(--text); border-color: var(--muted); }
.cn-card h3 { font-size: 16px; font-weight: 800; line-height: 1.4; margin: 2px 0 0; word-break: keep-all; overflow-wrap: anywhere; }
.cn-cite { margin: 0; font-size: 12.5px; color: var(--sub); font-style: italic; }
.cn-ex { margin: 0; font-size: 13px; line-height: 1.6; color: var(--sub); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.cn-card footer { margin-top: auto; padding-top: 8px; display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--muted); }
.cn-card footer span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cn-card footer time { white-space: nowrap; }
.cn-mini { display: flex; gap: 3px; align-items: flex-end; height: 44px; margin: 4px 0 2px; }
.cn-mini i { flex: 1; position: relative; height: 100%; display: flex; align-items: flex-end; }
.cn-mini i::before { content: ''; display: block; width: 100%; height: max(3px, var(--h)); background: var(--cc); opacity: .85; border-radius: 2px 2px 0 0; margin-bottom: 13px; }
.cn-mini b { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; font-size: 8.5px; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; }
.cn-empty { border: 1px dashed var(--line2); border-radius: var(--r); padding: 36px 20px; text-align: center; }
.cn-empty b { font-size: 16px; }
.cn-empty p { max-width: 460px; margin: 8px auto 0; line-height: 1.6; }
/* 읽기 */
.cn-read { max-width: 760px; margin: 0 auto; }
.cn-read > .cn-cat { display: block; margin-bottom: 8px; }
.cn-read h2 { font-size: 26px; line-height: 1.35; letter-spacing: -0.02em; margin: 0 0 6px; word-break: keep-all; overflow-wrap: anywhere; }
.cn-meta { color: var(--muted); font-size: 12.5px; margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.cn-range { color: var(--sub); font-size: 13.5px; font-weight: 700; margin: 0 0 12px; }
.cn-sec { margin: 0 0 20px; }
.cn-sec h4 { font-size: 11px; font-weight: 800; letter-spacing: .12em; color: var(--cc); margin: 0 0 8px; }
.cn-prose { font-size: 15.5px; line-height: 1.85; color: var(--text); }
.cn-ref { border: 1px solid var(--line2); border-left: 3px solid var(--cc); border-radius: var(--r-sm); padding: 10px 14px; margin-bottom: 18px; background: rgba(255,255,255,.02); }
.cn-ref p { margin: 4px 0; font-size: 14px; overflow-wrap: anywhere; }
.cn-ref small { display: inline-block; width: 44px; color: var(--muted); font-weight: 700; }
.cn-cycle { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 6px; }
.cn-day { border: 1px solid var(--line2); border-radius: var(--r-sm); padding: 10px; background: var(--surface2); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cn-md { font-size: 13px; font-weight: 900; color: var(--cc); }
.cn-day > small { color: var(--muted); font-size: 11px; }
.cn-load { height: 46px; background: rgba(255,255,255,.04); border-radius: 3px; display: flex; align-items: flex-end; margin: 4px 0 2px; overflow: hidden; }
.cn-load i { width: 100%; height: max(2px, var(--h)); background: linear-gradient(180deg, var(--cc), rgba(57,231,95,.25)); }
.cn-day em { font-style: normal; font-size: 11px; color: var(--muted); font-weight: 700; }
.cn-day b { font-size: 13px; line-height: 1.35; }
.cn-day p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--sub); overflow-wrap: anywhere; }
/* 쓰기 */
.cn-edit-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; padding-right: 34px; }
.cn-pick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.cn-pick button { border: 1px solid var(--line2); background: transparent; color: var(--sub); font: inherit; font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.cn-pick button.on { border-color: var(--cc); color: var(--text); background: color-mix(in srgb, var(--cc) 16%, transparent); box-shadow: inset 0 0 0 1px var(--cc); }
.cn-title { font-size: 22px !important; font-weight: 800; border: 0 !important; border-bottom: 1px solid var(--line2) !important; border-radius: 0 !important; background: transparent !important; padding: 8px 2px 10px !important; margin-bottom: 16px; letter-spacing: -0.01em; }
.cn-title:focus { border-bottom-color: var(--cc) !important; }
.cn-body { font-size: 15.5px; line-height: 1.8; }
.cn-edit .grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 10px; }
.cn-rows-h { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin: 2px 0 8px; font-size: 13px; }
.cn-rows { display: grid; gap: 6px; margin-bottom: 8px; }
.cn-row { display: grid; grid-template-columns: 70px 56px minmax(0, 1.1fr) auto minmax(0, 2fr) 30px; gap: 6px; align-items: start; }
.cn-row input, .cn-row textarea { padding: 8px; font-size: 13.5px; min-width: 0; }
.cn-row textarea { resize: none; min-height: 38px; line-height: 1.45; }
.cn-row-md { font-weight: 800; color: var(--cc); }
.cn-lv { display: flex; gap: 2px; align-items: flex-end; height: 38px; padding: 3px 4px; border: 1px solid var(--line2); border-radius: var(--r-sm); background: var(--surface2); }
.cn-lv button { width: 9px; height: calc(6px + var(--lv) * 5px); border: 0; border-radius: 2px; background: var(--line2); padding: 0; cursor: pointer; }
.cn-lv button.on, .cn-lv button:has(~ .on) { background: var(--cc); }
.cn-row-x { width: 30px; height: 38px; }
.modal.cn-focus { max-width: 860px; background: #0b0d0c; border-color: transparent; box-shadow: none; }
.modal-wrap.cn-focus-wrap { background: rgba(0,0,0,.96); }
.modal.cn-focus .cn-pick, .modal.cn-focus [data-fields], .modal.cn-focus label:has([data-tagsin]), .modal.cn-focus .switch, .modal.cn-focus [data-pad] { display: none; }
.modal.cn-focus .cn-body { min-height: 62vh; background: transparent; border-color: transparent; font-size: 17px; line-height: 1.95; padding: 6px 2px; }
@media (max-width: 1100px) { .cn-starts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .cn-hero { grid-template-columns: 1fr; padding: 18px 16px; }
  .cn-q { font-size: 16.5px; }
  .cn-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); min-width: 0; }
  .cn-stats div { padding: 8px 10px; }
  .cn-stats b { font-size: 20px; }
  .cn-stats small { font-size: 11px; display: block; line-height: 1.3; }
  .cn-starts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cn-bar input[type=search] { flex: 1 1 100%; }
  .cn-grid { grid-template-columns: 1fr; }
  .cn-read h2 { font-size: 21px; }
  .cn-edit .grid3 { grid-template-columns: 1fr 1fr; }
  .cn-edit .grid3 > label:first-child { grid-column: 1 / -1; }
  .cn-row { grid-template-columns: 62px 50px minmax(0, 1fr) 30px; padding: 8px; border: 1px solid var(--line); border-radius: var(--r-sm); }
  .cn-row .cn-lv { grid-column: 1 / 3; }
  .cn-row textarea { grid-column: 3 / 5; }
  .cn-row .cn-row-x { grid-row: 1; grid-column: 4; }
  .cn-row [data-r=focus] { grid-column: 3; }
  .cn-cycle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ───────── 경기 기록실 ───────── */
.rec-hero { display: grid; grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.6fr); gap: 12px; margin-bottom: 12px; }
.rec-ring { display: flex; align-items: center; gap: 20px; background: var(--surface); border: 1px solid var(--line2); border-radius: var(--r); padding: 18px 20px; min-width: 0; }
.rec-ring-fig { position: relative; width: 150px; flex: 0 0 150px; aspect-ratio: 1; }
.rec-donut { width: 100%; height: 100%; transform: rotate(-90deg); }
.rec-donut circle { fill: none; stroke-width: 12; }
.rec-donut .bg { stroke: #222926; }
.rec-donut .w { stroke: var(--brand); }
.rec-donut .d { stroke: #7d8681; }
.rec-donut .l { stroke: #d2524a; }
.rec-ring-c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.rec-ring-c strong { font-size: 34px; font-weight: 900; line-height: 1; letter-spacing: -0.03em; }
.rec-ring-c strong i { font-size: 16px; font-style: normal; font-weight: 700; color: var(--sub); margin-left: 1px; }
.rec-ring-c small { color: var(--muted); font-size: 12px; font-weight: 700; margin-top: 4px; }
.rec-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; flex: 1; min-width: 0; }
.rec-legend li { display: grid; grid-template-columns: 10px 22px 1fr auto; align-items: center; gap: 6px; font-size: 13.5px; }
.rec-legend li > i { width: 10px; height: 10px; border-radius: 3px; }
.rec-legend .w > i { background: var(--brand); } .rec-legend .d > i { background: #7d8681; } .rec-legend .l > i { background: #d2524a; }
.rec-legend li span { color: var(--muted); font-weight: 700; }
.rec-legend li b { font-size: 18px; font-weight: 900; }
.rec-legend li em { font-style: normal; color: var(--sub); font-weight: 700; font-size: 12.5px; text-align: right; white-space: nowrap; }
.rec-legend li.g { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line); }
.rec-legend li.g span { color: var(--sub); }
.rec-streak { font-size: 12px !important; font-weight: 800 !important; color: var(--on-pri); background: var(--brand); padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.rec-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; min-width: 0; }
.rk strong.rk-name { font-size: clamp(17px, 14cqi, 24px); overflow: hidden; text-overflow: ellipsis; }
.rk { background: var(--surface); border: 1px solid var(--line2); border-radius: var(--r); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; container-type: inline-size; }
.rk small { color: var(--muted); font-size: 12px; font-weight: 700; }
.rk strong { font-size: clamp(22px, 22cqi, 34px); font-weight: 900; line-height: 1.1; letter-spacing: -0.02em; white-space: nowrap; }
.rk span { color: var(--muted); font-size: 12px; margin-top: auto; }
.rk span b { color: var(--sub); }
.rk.pos strong { color: var(--brand); } .rk.neg strong { color: #ff7a70; }
.rk-split { display: flex; height: 6px; border-radius: 3px; overflow: hidden; gap: 2px; margin-top: auto; }
.rk-split .f { background: var(--brand); } .rk-split .a { background: #d2524a; }
.rk-prog { height: 6px; border-radius: 3px; background: #222926; overflow: hidden; margin-top: auto; }
.rk-prog i { display: block; height: 100%; background: #4ea1ff; }
.rec-flow .card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.rec-flow h3 { margin: 0; }
.rf-key { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.rf-key i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; margin-left: 6px; }
.rf-key .f { background: var(--brand); } .rf-key .a { background: #d2524a; }
.rec-form { display: grid; grid-template-columns: repeat(var(--n, 10), minmax(0, 84px)); justify-content: space-around; gap: 6px; margin-top: 14px; }
.rf-col { display: flex; flex-direction: column; align-items: center; gap: 0; min-width: 0; }
.rf-up, .rf-dn { width: 100%; height: 54px; display: flex; flex-direction: column; align-items: center; position: relative; }
.rf-up { justify-content: flex-end; border-bottom: 1px solid var(--line2); }
.rf-dn { justify-content: flex-start; }
.rf-up i, .rf-dn i { display: block; width: min(26px, 70%); }
.rf-up i { background: var(--brand); border-radius: 3px 3px 0 0; }
.rf-dn i { background: #d2524a; border-radius: 0 0 3px 3px; }
.rf-up b, .rf-dn b { font-size: 11px; font-weight: 800; color: var(--sub); line-height: 1; }
.rf-up b { order: -1; margin-bottom: 2px; } .rf-dn b { margin-top: 2px; }
.rf-col .res { margin-top: 6px; }
.rf-col small { font-size: 10.5px; color: var(--muted); margin-top: 3px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rec-rank li { display: grid; grid-template-columns: 26px minmax(60px, 0.9fr) minmax(40px, 1.4fr) auto; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.rec-rank em { font-style: normal; font-weight: 900; color: var(--muted); text-align: center; font-size: 13px; }
.rec-rank li.top em { color: var(--on-pri); background: var(--brand); border-radius: 50%; width: 22px; height: 22px; display: grid; place-items: center; font-size: 12px; }
.rec-rank li.t2 em { background: #c9d1cc; } .rec-rank li.t3 em { background: #b08a5a; color: #fff; }
.rec-rank span { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.rr-bar { height: 8px; background: #1c2220; border-radius: 4px; overflow: hidden; }
.rr-bar i { display: block; height: 100%; background: linear-gradient(90deg, rgba(57,231,95,.45), var(--brand)); border-radius: 4px; }
.rec-rank strong { font-size: 17px; font-weight: 900; white-space: nowrap; }
.rec-rank strong i { font-size: 11px; font-style: normal; color: var(--muted); margin-left: 2px; font-weight: 700; }
.wdl-mini { display: flex; height: 4px; border-radius: 2px; overflow: hidden; margin-top: 4px; min-width: 52px; background: #222926; }
.wdl-mini .w { background: var(--brand); } .wdl-mini .d { background: #7d8681; } .wdl-mini .l { background: #d2524a; }
.rec-tbl .wr { font-weight: 800; }
.tbl-scroll { overflow-x: auto; }
@media (max-width: 900px) { .rec-hero { grid-template-columns: 1fr; } }
@media (max-width: 520px) {
  .rec-ring { gap: 14px; padding: 14px; }
  .rec-ring-fig { width: 116px; flex-basis: 116px; }
  .rec-ring-c strong { font-size: 26px; }
  .rec-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .rk { padding: 12px; }
  .rec-form { gap: 3px; }
  .rf-up, .rf-dn { height: 40px; }
  .rf-col small { display: none; }
  .rf-col .res { width: 20px; height: 20px; font-size: 10px; }
}

/* ───────── 목표 (기록실과 같은 모양) ───────── */
.goal-hero { margin-bottom: 14px; }
.goal-hero .rec-ring-c strong { font-size: 30px; }
.goal-cats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.rk strong i { font-size: 0.5em; font-style: normal; color: var(--muted); margin-left: 2px; font-weight: 700; }
.rk.empty strong { color: var(--muted); }
.rk-prog.g i { background: linear-gradient(90deg, rgba(57,231,95,.45), var(--brand)); }
.rec-streak.warn { background: #ffb020 !important; color: #1a1200 !important; }
.goal-near { margin-bottom: 14px; }
.goal-near ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.goal-near li { display: grid; grid-template-columns: 58px minmax(0, 1.4fr) minmax(60px, 1fr) 40px; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.goal-near li b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-size: 14px; }
.goal-near li em { font-style: normal; font-weight: 800; text-align: right; font-size: 13px; }
.goal-near .dday { text-align: center; }
.goal-card { position: relative; overflow: hidden; }
.goal-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #7d8681; }
.goal-card.done::before { background: var(--brand); }
.goal-card.miss::before { background: #d2524a; }
.gnums .gpct { font-size: 26px; font-weight: 900; letter-spacing: -0.03em; line-height: 1; }
.gnums .gpct i { font-size: 13px; font-style: normal; color: var(--muted); margin-left: 1px; }
.gprog .bar { height: 8px; border-radius: 4px; }
.gprog .bar i { background: linear-gradient(90deg, rgba(57,231,95,.45), var(--brand)); border-radius: 4px; }
.pgoal header .pg-bar { width: 90px; flex: 0 0 90px; }
@media (max-width: 520px) {
  .goal-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .goal-near li { grid-template-columns: 52px minmax(0, 1fr) 40px; }
  .goal-near li .rk-prog { display: none; }
  .pgoal header .pg-bar { display: none; }
}
.goal-hero .rec-legend li { grid-template-columns: 10px auto 1fr auto; }
.rec-legend li span { white-space: nowrap; }
.goal-cats { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
.goal-cats .rk { text-align: left; align-items: stretch; }
.goal-cats .rk strong { font-size: clamp(20px, 20cqi, 30px); }
.goal-cats { grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); }
@media (max-width: 1280px) and (min-width: 901px) { .goal-cats { grid-template-columns: repeat(min(var(--n, 5), 3), minmax(0, 1fr)); } }
@media (max-width: 700px) { .goal-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .goal-cats .rk:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.goal-cats .rk span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ───────── 데이터실 · 기록실 느낌을 사이트 전체에 (과하지 않게) ───────── */
/* 화면 위 숫자 칸 줄 */
.kpi-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0 0 18px; }
.kpi { background: linear-gradient(160deg, rgba(57,231,95,.06), transparent 55%), var(--surface); border: 1px solid var(--line2); border-radius: var(--r); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; container-type: inline-size; }
.kpi small { color: var(--muted); font-size: 12px; font-weight: 700; }
.kpi strong { font-size: clamp(20px, 18cqi, 28px); font-weight: 900; line-height: 1.1; letter-spacing: -0.02em; color: var(--kc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi strong i { font-size: 0.5em; font-style: normal; color: var(--muted); margin-left: 2px; font-weight: 700; }
.kpi > span { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi > span b { color: var(--sub); }
.kpi-bar { height: 6px; border-radius: 3px; background: #222926; overflow: hidden; margin-top: 2px; }
.kpi-bar i { display: block; height: 100%; background: var(--kc, var(--accent)); border-radius: 3px; }
.kpi-stack { display: flex; gap: 2px; height: 6px; border-radius: 3px; overflow: hidden; margin-top: 2px; background: #222926; }
.kpi-stack i { display: block; height: 100%; min-width: 3px; }
@media (max-width: 520px) { .kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .kpi { padding: 10px 12px; } }
/* 카드: 왼쪽 위에 아주 옅은 초록빛 · 제목 앞 짧은 막대 */
.card { background-image: linear-gradient(160deg, rgba(57,231,95,.035), transparent 42%); }
.card-head h3::before, .card > h3:first-child::before { content: ''; display: inline-block; width: 3px; height: 0.9em; margin-right: 8px; border-radius: 2px; background: var(--accent); vertical-align: -0.08em; opacity: .85; }
/* 락커룸: 포지션 줄 색 (GK 노랑 · 수비 파랑 · 미드 초록 · 공격 빨강) */
.pcard.has-pg { position: relative; }
.pcard.has-pg::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--pg); border-radius: var(--r) var(--r) 0 0; pointer-events: none; }
.pcard.has-pg .pos { color: var(--pg); }
/* 공지 · 미팅: 고정 글은 주황 줄 */
.post-card { position: relative; overflow: hidden; }
.post-card.pinned::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #ffb020; }
/* 전술보드: 느낌만 살짝 — 카드 위 얇은 초록 줄 */
.lib-card { position: relative; }
.lib-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--accent), transparent 70%); z-index: 1; opacity: .7; }
.kpi > span { white-space: normal; line-height: 1.45; overflow: visible; word-break: keep-all; }

/* 작전판 도구: 모든 작전판에서 한 줄에 같은 크기로 (폭에 맞춰 조금 작게) · 아주 좁은 곳(휴대폰 등)만 같은 크기로 두 줄 */
.pad { container-type: inline-size; }
.pad:not(.pad-phone) .pad-tools { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 6px; align-items: stretch; }
.pad:not(.pad-phone) .pad-tools .pad-tsep { display: none; }
.pad:not(.pad-phone) .pad-tools > :not(.pad-tsep) { min-width: 0; }
.pad:not(.pad-phone) .pad-tools > :not(.pad-tsep) > .ptool, .pad:not(.pad-phone) .pad-tools > .ptool { width: 100%; height: 50px; min-width: 0; margin: 0; padding: 5px 1px 4px; justify-content: center; gap: 2px; }
.pad:not(.pad-phone) .pad-tools .pfull { margin-left: 0; }
.pad:not(.pad-phone) .pad-tools .ptool b { font-size: 15px; }
.pad:not(.pad-phone) .pad-tools .plab { font-size: 10px; letter-spacing: -0.03em; max-width: 100%; overflow: hidden; text-overflow: clip; }
.pad:not(.pad-phone) .pad-tools .pcaret { font-size: 8px; }
@container (max-width: 790px) {
  .pad:not(.pad-phone) .pad-tools { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, 58px); grid-auto-columns: auto; justify-content: center; }
  .pad:not(.pad-phone) .pad-tools > :not(.pad-tsep) > .ptool, .pad:not(.pad-phone) .pad-tools > .ptool { height: 52px; }
}

/* 작전판 [크게]: 도구를 바꿔도 경기장 크기가 그대로 — 아래 설정 줄 자리를 항상 같은 높이로 비워 둠 */
.pad.pad-full:not(.pad-phone) > .pad-acts { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; height: 34px; min-height: 34px; margin-bottom: 4px; scrollbar-width: thin; flex: 0 0 auto; }
.pad.pad-full:not(.pad-phone) > .pad-sel[hidden] { display: flex; visibility: hidden; }
.pad.pad-full:not(.pad-phone) > .pad-acts > * { flex-shrink: 0; }

/* 작전판 도구 색: 되돌리기 · 모두 지우기(주황 테두리) · 크게(초록 테두리) · 저장(파랑 테두리, 크게 화면에서만) */
.pad-tools .ptool.pact { border-color: rgba(255,176,32,.55); }
.pad-tools .ptool.pact b { color: #ffb020; }
.pad-tools .ptool.pfull { border-color: rgba(57,231,95,.6); }
.pad-tools .ptool.pfull b { color: var(--accent); }
.pad-tools .ptool.pexp { border-color: rgba(78,161,255,.6); }
.pad-tools .ptool.pexp b { color: #4ea1ff; }
.pad-tools .ptool.pact:hover { background: rgba(255,176,32,.08); }
.pad-tools .ptool.pfull:hover { background: rgba(57,231,95,.08); }
.pad-tools .ptool.pexp:hover { background: rgba(78,161,255,.08); }
.pad:not(.pad-full) .pad-tools .pexp, .pad-phone .pad-tools .pexp { display: none !important; }
/* 게임모델 편집 · 패턴: 전술보드와 같은 버튼 줄 */
.card-head .gm-acts { display: flex; flex-wrap: wrap; gap: 6px; width: auto; }
.pat-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
@media (max-width: 640px) { .card-head:has(.gm-acts) { flex-wrap: wrap; } .card-head .gm-acts, .pat-bar .gm-acts { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 얇은 요약 줄 (공지 · 미팅룸): 아래 글 카드와 다르게 — 한 줄 띠 · 칸 사이 세로선 · 카드 테두리 없음 */
.kpi-strip.mini { display: flex; flex-wrap: wrap; gap: 0; padding: 4px 6px; border-radius: 999px; background: var(--surface2); border: 1px solid var(--line); width: fit-content; max-width: 100%; margin-bottom: 16px; }
.kpi-strip.mini .kpi { flex-direction: row; align-items: baseline; gap: 8px; background: none; border: 0; border-radius: 0; padding: 6px 16px; container-type: normal; }
.kpi-strip.mini .kpi + .kpi { border-left: 1px solid var(--line2); }
.kpi-strip.mini .kpi strong { font-size: 18px; }
.kpi-strip.mini .kpi small { font-size: 12.5px; }
.kpi-strip.mini .kpi > span, .kpi-strip.mini .kpi-bar, .kpi-strip.mini .kpi-stack { display: none; }
.post-list-h { margin-top: 4px; }
@media (max-width: 520px) { .kpi-strip.mini { border-radius: var(--r); width: 100%; } .kpi-strip.mini .kpi { padding: 6px 10px; flex: 1 1 auto; justify-content: center; } }
.post-card .post-att { display: inline-block; margin-top: 2px; font-size: 12px; font-weight: 700; color: #4ea1ff; }

/* 소셜 로그인 버튼 (카카오 · 구글 안내 색) */
.social-login { display: grid; gap: 8px; margin: 4px 0 14px; }
.soc-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 48px; border-radius: 10px; border: 0; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.soc-btn:disabled { opacity: .6; }
.soc-btn .soc-ic { width: 20px; height: 20px; flex: 0 0 20px; background: center / contain no-repeat; }
.soc-btn.kakao { background: #FEE500; color: rgba(0,0,0,.85); }
.soc-btn.kakao .soc-ic { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 3C6.48 3 2 6.48 2 10.77c0 2.77 1.86 5.2 4.66 6.57l-.95 3.48c-.08.3.26.54.52.37l4.13-2.73c.53.06 1.08.1 1.64.1 5.52 0 10-3.48 10-7.79S17.52 3 12 3z'/%3E%3C/svg%3E"); }
.soc-btn.google { background: #ffffff; color: #1f1f1f; border: 1px solid #dadce0; }
.soc-btn.google .soc-ic { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'/%3E%3Cpath fill='%23FBBC05' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/%3E%3C/svg%3E"); }
.soc-or { display: flex; align-items: center; gap: 10px; margin: 6px 0 2px; color: var(--muted); font-size: 12.5px; }
.soc-or::before, .soc-or::after { content: ''; flex: 1; height: 1px; background: var(--line2); }
/* 업데이트 내역: 파트 · 한 줄 요약 */
.ver-list li.ver-it { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; align-items: baseline; list-style: none; padding: 6px 0; border-bottom: 1px solid var(--line); }
.ver-list li.ver-it b { font-size: 13px; color: var(--accent); white-space: nowrap; }
.ver-list li.ver-it span { font-size: 14px; color: var(--text); line-height: 1.5; }
.ver-list ul:has(.ver-it) { padding-left: 0; margin: 4px 0 0; }
@media (max-width: 520px) { .ver-list li.ver-it { grid-template-columns: 76px minmax(0, 1fr); gap: 8px; } }