/* 대화상자·제출·오류 피드백 전용. 기존 화면 레이아웃은 변경하지 않는다. */
html.modal-open, body.modal-open { overflow: hidden; overscroll-behavior: none; }
.tn-sheet.modal { z-index: 3000; padding: 16px; align-items: flex-end; justify-content: center; background: rgb(16 24 40 / 42%); }
.tn-sheet.modal.active { display: flex; }
.tn-sheet > .tn-sheet-content {
    display: flex; flex-direction: column;
    box-sizing: border-box; width: 100%; max-width: 398px; max-height: calc(100dvh - 32px);
    overflow-y: auto; overscroll-behavior: contain; margin: 0;
    padding: 24px 20px max(20px, env(safe-area-inset-bottom)); border-radius: 20px;
    background: var(--tn-surface, #fff); color: var(--tn-text, #172238);
    box-shadow: var(--tn-shadow-modal); animation: tn-sheet-in 200ms ease-out;
}
.tn-sheet-title { flex-shrink: 0; margin: 0 0 12px; font: 700 20px/1.45 var(--tn-font-heading, sans-serif); word-break: keep-all; overflow-wrap: anywhere; }
.tn-sheet-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 0 24px; font-size: var(--tn-text-base); line-height: 1.65; white-space: pre-line; overflow-wrap: anywhere; word-break: keep-all; }
.tn-sheet-actions { display: flex; flex-shrink: 0; flex-direction: column; gap: 8px; }
.tn-sheet .tn-sheet-button {
    width: 100%; min-height: 48px; padding: 12px 16px; border: 0; border-radius: 12px;
    font: 700 16px/1.5 var(--tn-font-reading, sans-serif); cursor: pointer;
    background: var(--tn-primary, #3566d6); color: #fff;
}
.tn-sheet .tn-sheet-button.tn-destructive { background: var(--tn-danger, #c83251); color: #fff; }
.tn-sheet .tn-sheet-button.tn-cancel { background: var(--tn-surface-muted, #f1f3f7); color: var(--tn-text, #172238); }
.tn-sheet .tn-sheet-button:disabled { background: var(--tn-surface-muted, #f1f3f7); color: var(--tn-text-muted, #69758a); cursor: not-allowed; }
.tn-sheet-button:not(:disabled):active { filter: brightness(.92); }
.tn-confirm-field { display: block; margin: 16px 0 20px; font-size: 14px; line-height: 1.6; }
.tn-confirm-field input { display: block; width: 100%; box-sizing: border-box; margin-top: 8px; min-height: 48px; padding: 12px; border: 1px solid var(--tn-border, #ccd3df); border-radius: 10px; font: inherit; font-size: 16px; }
.tn-confirm-hint { display: block; margin-top: 6px; color: var(--tn-text-muted, #69758a); font-size: 13px; }
.tn-toast-host { position: fixed; z-index: 3100; left: 50%; bottom: calc(80px + env(safe-area-inset-bottom)); width: calc(100% - 32px); max-width: 398px; transform: translateX(-50%); pointer-events: none; }
.tn-toast { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 14px; background: #202b3e; color: #fff; box-shadow: 0 6px 24px rgb(16 24 40 / 18%); font-size: var(--tn-text-base); line-height: 1.55; word-break: keep-all; overflow-wrap: anywhere; animation: tn-toast-in 240ms ease-out; }
.tn-toast::before { content: '✓'; flex: none; font-size: var(--tn-text-lg); }
.tn-toast.tn-leaving { opacity: 0; transform: translateY(12px); transition: opacity 200ms, transform 200ms; }
.tn-field-error { display: block; flex-basis: 100%; margin: 6px 0 0; color: var(--tn-danger-strong, #b02e49); font-size: 13px; line-height: 1.5; word-break: keep-all; }
body :is(input, select, textarea)[aria-invalid="true"],
body.auth-shell .form-group .form-input[aria-invalid="true"],
body .form-group :is(input, select, textarea)[aria-invalid="true"]:focus { border-color: var(--tn-danger, #c83251); box-shadow: 0 0 0 1px var(--tn-danger, #c83251); }
body :is(input, select, textarea)[aria-invalid="true"]:focus-visible,
body.auth-shell .form-group .form-input[aria-invalid="true"]:focus-visible { outline-color: var(--tn-danger, #c83251); }
.tn-form-error { margin: 12px 0; padding: 12px 14px; background: var(--tn-danger-tint, #fff0f2); border: 1px solid var(--tn-danger-border, #edbac5); border-radius: 12px; color: var(--tn-danger-strong, #b02e49); font-size: 14px; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
.tn-page-error { position: fixed; z-index: 3200; top: max(16px, env(safe-area-inset-top)); left: 50%; width: calc(100% - 32px); max-width: 398px; box-sizing: border-box; transform: translateX(-50%); box-shadow: var(--tn-shadow-modal); }
.tn-error-dismiss { display: block; min-height: 44px; margin-top: 4px; padding: 4px 0; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 700; text-decoration: underline; }
body button.tn-is-loading, body .btn.tn-is-loading { position: relative; pointer-events: none; cursor: wait; opacity: .8; }
body .btn.btn-primary.tn-is-loading { background: var(--tn-primary, #3566d6); border-color: var(--tn-primary, #3566d6); color: #fff; opacity: 1; }
body .btn.btn-danger.tn-is-loading { background: var(--tn-danger, #c83251); border-color: var(--tn-danger, #c83251); color: #fff; opacity: 1; }
.tn-is-loading::before { content: ''; display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: tn-spin 700ms linear infinite; }
.tn-copy-field { width: 100%; min-height: 92px; margin: 0 0 16px; padding: 12px; box-sizing: border-box; border: 1px solid var(--tn-border, #ccd3df); border-radius: 10px; font: 16px/1.5 var(--tn-font-reading, sans-serif); overflow-wrap: anywhere; resize: none; }
@keyframes tn-spin { to { transform: rotate(360deg); } }
@keyframes tn-sheet-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes tn-toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
    .tn-sheet-content, .tn-toast, .tn-is-loading::before { animation: none !important; }
    .tn-toast.tn-leaving { transition: none; }
}

/* 고르기 시트는 설명이 필요 없을 때가 있다. 빈 <p> 가 24px 여백만 남기고 있었다 (2026-09-13) */
.tn-sheet-body:empty { display: none; }