/* 홈 배너 진입과 PC·모바일 공용 모드 선택창 */
.tc-ball-board, .tc-mh-ball-board { position: relative; }
.tc-mode-trigger { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; padding: 0; border: 0; border-radius: inherit; background: transparent; cursor: pointer; touch-action: manipulation; }
.tc-mode-trigger:hover { box-shadow: inset 0 0 0 2px #a5b4fc; }
.tc-mode-trigger:focus-visible { outline: 3px solid #a5b4fc; outline-offset: -4px; }
.tc-mode-invite { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; color: #fff; font-size: .875rem; font-weight: 700; }
.tc-mode-invite i { font-size: .75rem; }
.tc-mode-picker { --tc-mode-accent: var(--accent-primary, #4f46e5); width: min(580px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 1px solid #e4e4e7; border-radius: 20px; background: #fff; color: #18181b; font-family: inherit; box-shadow: 0 24px 80px rgba(24,24,27,.18); overflow-y: auto; overscroll-behavior: contain; word-break: keep-all; overflow-wrap: anywhere; }
.tc-mode-picker::backdrop { background: rgba(21,24,61,.48); }
.tc-mode-picker[open] { animation: tc-mode-enter .18s ease-out; }
.tc-mode-surface { padding: 28px; }
.tc-mode-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.tc-mode-head h2 { margin: 0; font-size: 1.35rem; font-weight: 800; line-height: 1.45; letter-spacing: -.035em; }
.tc-mode-head p { margin: 8px 0 0; color: #71717a; font-size: .875rem; line-height: 1.6; }
.tc-mode-close { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; margin: -8px -8px 0 0; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #52525b; font-size: 1.15rem; cursor: pointer; touch-action: manipulation; }
.tc-mode-close:hover { background: #f4f4f5; color: #18181b; }
.tc-mode-list { display: flex; flex-direction: column; gap: 12px; }
.tc-mode-picker .tc-mode-option { display: flex; align-items: center; gap: 16px; padding: 20px 18px; border: 1px solid #e4e4e7; border-radius: 12px; color: #18181b; background: #fff; text-decoration: none; touch-action: manipulation; transition: border-color .15s ease, background-color .15s ease; }
.tc-mode-picker .tc-mode-option:hover { border-color: #a5b4fc; background: #f5f6ff; }
.tc-mode-icon { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border-radius: 10px; color: var(--tc-mode-accent); background: #eef2ff; font-size: 1.15rem; }
.tc-mode-copy { display: flex; flex: 1; flex-direction: column; min-width: 0; gap: 4px; }
.tc-mode-copy b { font-size: 1.05rem; font-weight: 750; }
.tc-mode-copy small { font-size: .75rem; font-weight: 600; color: var(--tc-mode-accent); }
.tc-mode-copy > span { margin-top: 3px; color: #71717a; font-size: .8125rem; line-height: 1.6; }
.tc-mode-arrow { flex-shrink: 0; color: #a1a1aa; font-size: .85rem; }
.tc-mode-picker :is(a,button):focus-visible { outline: 3px solid var(--tc-mode-accent); outline-offset: 3px; }
html.tc-mode-open { overflow: hidden; scrollbar-gutter: stable; }
@keyframes tc-mode-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 600px) {
    .tc-mode-picker { width: calc(100% - 24px); max-height: calc(100dvh - 24px); border-radius: 16px; }
    .tc-mode-surface { padding: 22px 18px; }
    .tc-mode-head { gap: 10px; margin-bottom: 18px; }
    .tc-mode-head h2 { font-size: 1.2rem; }
    .tc-mode-head p { font-size: .8125rem; }
    .tc-mode-picker .tc-mode-option { padding: 16px 12px; gap: 12px; }
    .tc-mode-icon { flex-basis: 34px; width: 34px; height: 34px; font-size: 1rem; }
    .tc-mode-copy b { font-size: 1rem; }
    .tc-mode-copy small { font-size: .6875rem; }
    .tc-mode-copy > span { font-size: .75rem; }
}
@media (prefers-reduced-motion: reduce) { .tc-mode-picker[open] { animation: none; } .tc-mode-picker .tc-mode-option { transition: none; } }