/*
 * ログイン後の旧画面（.legacy-app）を、公開側（hub.css）の配色・書体・角丸に揃えるための上書き。
 * 読み込み順: hub.css → legacy-app.css → このファイル。変数は hub.css の :root を使う。
 */
.legacy-app {
    font-family: var(--f-jp);
    color: var(--ink);
    background: transparent;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.legacy-app-inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: clamp(32px, 5vw, 64px) var(--pad) clamp(48px, 7vw, 96px);
}
.legacy-notice {
    margin: 0 0 24px;
    padding: 14px 20px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--ok);
    border-radius: var(--r-sm);
    background: var(--card);
    color: var(--ink);
    font-size: 14px;
    font-weight: 500;
}

/* 見出し：公開側と同じ明朝系の見出し書体 */
.legacy-app h1, .legacy-app h2, .legacy-app h3 {
    font-family: var(--f-disp);
    letter-spacing: -.01em;
    color: var(--ink);
}
.legacy-app .text-4xl, .legacy-app .text-3xl, .legacy-app .text-2xl { font-family: var(--f-disp); font-weight: 700; letter-spacing: -.015em; }

/* 文字色 */
.legacy-app .text-gray-900, .legacy-app .text-gray-800, .legacy-app .text-black { color: var(--ink); }
.legacy-app .text-gray-700 { color: var(--ink-2); }
.legacy-app .text-gray-600, .legacy-app .text-gray-500, .legacy-app .text-gray-400 { color: var(--mute); }
.legacy-app .text-blue-600, .legacy-app .text-blue-700, .legacy-app .text-blue-800, .legacy-app .text-indigo-600, .legacy-app .text-purple-600 { color: var(--sea-ink); }
.legacy-app .text-red-500, .legacy-app .text-red-600, .legacy-app .text-red-700 { color: var(--err); }
.legacy-app .text-green-600, .legacy-app .text-green-700, .legacy-app .text-green-800 { color: var(--ok); }
.legacy-app .hover\:text-gray-900:hover, .legacy-app .hover\:text-blue-800:hover, .legacy-app .hover\:text-blue-700:hover { color: var(--sea-ink); }
.legacy-app .hover\:text-red-800:hover, .legacy-app .hover\:text-red-700:hover { color: var(--err); }

/* 背景 */
.legacy-app .bg-white { background-color: var(--card); }
.legacy-app .bg-gray-50 { background-color: var(--paper-2); }
.legacy-app .bg-gray-100 { background-color: var(--paper-3); }
.legacy-app .bg-gray-900, .legacy-app .bg-black { background-color: var(--ink); color: var(--paper); }
.legacy-app .hover\:bg-gray-800:hover { background-color: var(--ink-2); }
.legacy-app .hover\:bg-gray-50:hover { background-color: var(--paper-2); }
.legacy-app .hover\:bg-gray-100:hover { background-color: var(--paper-3); }
.legacy-app .bg-blue-600 { background-color: var(--sea); color: #fff; }
.legacy-app .hover\:bg-blue-700:hover { background-color: var(--sea-ink); }
.legacy-app .bg-blue-50, .legacy-app .bg-blue-100 { background-color: #E6EAFF; color: var(--sea-ink); }
.legacy-app .bg-green-50, .legacy-app .bg-green-100 { background-color: #E3F3EA; color: var(--ok); }
.legacy-app .bg-red-50, .legacy-app .bg-red-100 { background-color: #FBE6E4; color: var(--err); }
.legacy-app .bg-yellow-50, .legacy-app .bg-yellow-100 { background-color: #FFF1D6; color: #8A5A00; }
.legacy-app .bg-purple-50, .legacy-app .bg-purple-100 { background-color: #ECE6FF; color: #4B2FB5; }
.legacy-app .bg-orange-50, .legacy-app .bg-orange-100 { background-color: var(--lens); color: var(--sun-ink); }

/* 罫線・角丸・影 */
.legacy-app .border-gray-100, .legacy-app .border-gray-200, .legacy-app .border-gray-300, .legacy-app .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--line); }
.legacy-app .border-gray-900 { border-color: var(--ink); }
.legacy-app .rounded-3xl, .legacy-app .rounded-2xl, .legacy-app .rounded-xl { border-radius: var(--r); }
.legacy-app .rounded-lg { border-radius: var(--r-sm); }
.legacy-app .rounded-md, .legacy-app .rounded { border-radius: 10px; }
.legacy-app .shadow-sm, .legacy-app .shadow, .legacy-app .shadow-md, .legacy-app .shadow-lg { box-shadow: none; }

/* フォーム：公開側の入力欄に近い見た目 */
.legacy-app input[type="text"], .legacy-app input[type="email"], .legacy-app input[type="url"], .legacy-app input[type="password"],
.legacy-app input[type="number"], .legacy-app input[type="date"], .legacy-app input[type="datetime-local"], .legacy-app input[type="search"],
.legacy-app input[type="tel"], .legacy-app select, .legacy-app textarea {
    font-family: var(--f-jp);
    color: var(--ink);
    background-color: var(--card);
    border-color: var(--line);
}
.legacy-app input:focus, .legacy-app textarea:focus, .legacy-app select:focus {
    outline: none;
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(21, 17, 14, .12);
}
.legacy-app input::placeholder, .legacy-app textarea::placeholder { color: var(--mute); opacity: .7; }
.legacy-app select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%23655D52' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-position: right 1rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 3rem;
    -webkit-appearance: none;
    appearance: none;
}
.legacy-app input[type="checkbox"], .legacy-app input[type="radio"] { accent-color: var(--ink); }
.legacy-app .focus\:ring-gray-900:focus, .legacy-app .focus\:ring-blue-500:focus, .legacy-app .focus\:ring-purple-500:focus { --tw-ring-color: var(--ink); }
.legacy-app .focus\:border-blue-500:focus { border-color: var(--ink); }

/* ボタン・カードの動き（旧 .apple-* を踏襲） */
.legacy-app .apple-card { transition: transform .3s cubic-bezier(.4, 0, .2, 1), box-shadow .3s cubic-bezier(.4, 0, .2, 1); }
.legacy-app .apple-card:hover { transform: translateY(-2px); box-shadow: 0 18px 30px -16px rgba(21, 17, 14, .28); }
.legacy-app .apple-button { transition: transform .2s ease-in-out, background-color .2s ease-in-out; }
.legacy-app .apple-button:hover { transform: scale(1.02); }
.legacy-app .apple-button:active { transform: scale(.98); }

/* 表 */
.legacy-app table { width: 100%; }
.legacy-app thead { background: var(--paper-2); }
.legacy-app th { color: var(--mute); font-weight: 500; }
.legacy-app tbody tr:hover { background: var(--paper-2); }

/* 記事本文（プレスリリース詳細など） */
.legacy-app .prose { color: var(--ink-2); max-width: 70ch; line-height: 1.9; }
.legacy-app .prose img { max-width: 100%; height: auto; border-radius: var(--r-sm); margin: 2rem 0; }
.legacy-app .prose p { margin-bottom: 1.5rem; }
.legacy-app .prose h1, .legacy-app .prose h2, .legacy-app .prose h3, .legacy-app .prose h4 { font-family: var(--f-disp); font-weight: 700; margin-top: 2rem; margin-bottom: 1rem; color: var(--ink); }
.legacy-app .prose a { color: var(--sea-ink); text-decoration: underline; }
.legacy-app .prose ul, .legacy-app .prose ol { margin: 1.5rem 0; padding-left: 2rem; list-style: revert; }
.legacy-app .prose li { margin: .5rem 0; }
.legacy-app .prose blockquote { border-left: 4px solid var(--line); padding-left: 1.5rem; margin: 1.5rem 0; color: var(--mute); }