h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/*****************/
/* CSS for K-ARC */
/*****************/
/* ── CSS Reset / Base ── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

img, video {
    display: block;
    max-width: 100%;
}

button, input, textarea, select {
    font: inherit;
}

button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

a {
    color: inherit;
    text-decoration: none;
}

/* ── Design Tokens ── */
:root {
    --apple-dark: #1D1D1F;
    --apple-gray: #86868B;
    --apple-lightgray: #F5F5F7;
    --apple-border: #D2D2D7;
    --apple-blue: #0071E3;
    --apple-blue-h: #0077ED;
    --apple-max: 980px;
    --apple-max-w: 1200px;
}

/* ── Base Typography ── */
body {
    font-family: 'Pretendard', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-font-smoothing: antialiased;
    color: var(--apple-dark);
}

h1, h2, h3, h4, h5, h6, .font-display {
    font-family: 'Inter', 'Pretendard', -apple-system, sans-serif;
}

code, .font-mono {
    font-family: 'JetBrains Mono', monospace;
}

.font-body {
    font-family: 'Pretendard', 'Inter', sans-serif;
}


/* ============================================================
   LAYOUT
   ============================================================ */
.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.fixed {
    position: fixed;
}

.inset-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.inset-x-0 {
    left: 0;
    right: 0;
}

.top-0 {
    top: 0;
}

.top-5 {
    top: 1.25rem;
}

.top-\[2\.15rem\] {
    top: 2.15rem;
}

.bottom-0 {
    bottom: 0;
}

.left-0 {
    left: 0;
}

.left-1\/2 {
    left: 50%;
}

.right-1\/2 {
    right: 50%;
}

.right-\[-1rem\] {
    right: -1rem;
}

.left-\[calc\(33\.33\%-24px\)\] {
    left: calc(33.33% - 24px);
}

.right-\[calc\(33\.33\%-24px\)\] {
    right: calc(33.33% - 24px);
}

.-bottom-8 {
    bottom: -2rem;
}

.-left-8 {
    left: -2rem;
}

.-right-8 {
    right: -2rem;
}

.-top-8 {
    top: -2rem;
}

.z-10 {
    z-index: 10;
}

.z-50 {
    z-index: 50;
}

.z-\[60\] {
    z-index: 60;
}

.flex {
    display: flex;
}

.inline-flex {
    display: inline-flex;
}

.block {
    display: block;
}

.inline-block {
    display: inline-block;
}

.hidden {
    display: none;
}

.grid {
    display: grid;
}

.flex-col {
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

.flex-1 {
    flex: 1 1 0%;
}

.flex-grow {
    flex-grow: 1;
}

.shrink-0 {
    flex-shrink: 0;
}

.min-w-0 {
    min-width: 0;
}

.w-auto {
    width: auto;
}

.w-fit {
    width: fit-content;
}

.w-full {
    width: 100%;
}

.w-px {
    width: 1px;
}

.w-1\.5 {
    width: 0.375rem;
}

.w-4 {
    width: 1rem;
}

.w-5 {
    width: 1.25rem;
}

.w-6 {
    width: 1.5rem;
}

.w-8 {
    width: 2rem;
}

.w-9 {
    width: 2.25rem;
}

.w-10 {
    width: 2.5rem;
}

.w-12 {
    width: 3rem;
}

.w-14 {
    width: 3.5rem;
}

.w-48 {
    width: 12rem;
}

.w-\[18px\] {
    width: 18px;
}

.w-\[700px\] {
    width: 700px;
}

.h-px {
    height: 1px;
}

.h-1\.5 {
    height: 0.375rem;
}

.h-4 {
    height: 1rem;
}

.h-5 {
    height: 1.25rem;
}

.h-6 {
    height: 1.5rem;
}

.h-8 {
    height: 2rem;
}

.h-9 {
    height: 2.25rem;
}

.h-10 {
    height: 2.5rem;
}

.h-12 {
    height: 3rem;
}

.h-14 {
    height: 3.5rem;
}

.h-48 {
    height: 12rem;
}

.h-full {
    height: 100%;
}

.h-\[18px\] {
    height: 18px;
}

.h-\[300px\] {
    height: 300px;
}

.h-\[72px\] {
    height: 72px;
}

.min-h-screen {
    min-height: 100vh;
}

.min-h-\[32px\] {
    min-height: 32px;
}

.items-center {
    align-items: center;
}

.items-start {
    align-items: flex-start;
}

.items-stretch {
    align-items: stretch;
}

.self-stretch {
    align-self: stretch;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gap-0 {
    gap: 0;
}

.gap-1 {
    gap: 0.25rem;
}

.gap-1\.5 {
    gap: 0.375rem;
}

.gap-2 {
    gap: 0.5rem;
}

.gap-3 {
    gap: 0.75rem;
}

.gap-4 {
    gap: 1rem;
}

.gap-5 {
    gap: 1.25rem;
}

.gap-6 {
    gap: 1.5rem;
}

.gap-7 {
    gap: 1.75rem;
}

.gap-8 {
    gap: 2rem;
}

.gap-10 {
    gap: 2.5rem;
}

.gap-12 {
    gap: 3rem;
}

.gap-16 {
    gap: 4rem;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.ml-auto {
    margin-left: auto;
}

.ml-0\.5 {
    margin-left: 0.125rem;
}

.ml-1\.5 {
    margin-left: 0.375rem;
}

.ml-4 {
    margin-left: 1rem;
}

.mt-0\.5 {
    margin-top: 0.125rem;
}

.mt-1 {
    margin-top: 0.25rem;
}

.mt-1\.5 {
    margin-top: 0.375rem;
}

.mt-2 {
    margin-top: 0.5rem;
}

.mt-4 {
    margin-top: 1rem;
}

.mt-5 {
    margin-top: 1.25rem;
}

.mt-6 {
    margin-top: 1.5rem;
}

.mt-8 {
    margin-top: 2rem;
}

.mb-0 {
    margin-bottom: 0;
}

.mb-1 {
    margin-bottom: 0.25rem;
}

.mb-2 {
    margin-bottom: 0.5rem;
}

.mb-3 {
    margin-bottom: 0.75rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

.mb-5 {
    margin-bottom: 1.25rem;
}

.mb-6 {
    margin-bottom: 1.5rem;
}

.mb-8 {
    margin-bottom: 2rem;
}

.mb-10 {
    margin-bottom: 2.5rem;
}

.mb-12 {
    margin-bottom: 3rem;
}

.mb-14 {
    margin-bottom: 3.5rem;
}

.mb-16 {
    margin-bottom: 4rem;
}

.my-8 {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.-mt-0\.5 {
    margin-top: -0.125rem;
}

.-ml-px {
    margin-left: -1px;
}

.p-1 {
    padding: 0.25rem;
}

.p-2 {
    padding: 0.5rem;
}

.p-4 {
    padding: 1rem;
}

.p-5 {
    padding: 1.25rem;
}

.p-6 {
    padding: 1.5rem;
}

.p-8 {
    padding: 2rem;
}

.px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.px-2\.5 {
    padding-left: 0.625rem;
    padding-right: 0.625rem;
}

.px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.px-7 {
    padding-left: 1.75rem;
    padding-right: 1.75rem;
}

.px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
}

.py-0\.5 {
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
}

.py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.py-3\.5 {
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
}

.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

.py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.py-7 {
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
}

.py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.py-\[14px\] {
    padding-top: 14px;
    padding-bottom: 14px;
}

.pt-4 {
    padding-top: 1rem;
}

.pt-5 {
    padding-top: 1.25rem;
}

.pt-6 {
    padding-top: 1.5rem;
}

.pt-16 {
    padding-top: 4rem;
}

.pt-\[80px\] {
    padding-top: 80px;
}

.pt-\[100px\] {
    padding-top: 100px;
}

.pb-4 {
    padding-bottom: 1rem;
}

.pb-6 {
    padding-bottom: 1.5rem;
}

.pb-\[72px\] {
    padding-bottom: 72px;
}

.pb-\[80px\] {
    padding-bottom: 80px;
}

.pl-6 {
    padding-left: 1.5rem;
}

.max-w-xl {
    max-width: 36rem;
}

.max-w-2xl {
    max-width: 42rem;
}

.max-w-apple {
    max-width: 980px;
}

.max-w-apple-w {
    max-width: 1200px;
}

.max-w-\[960px\] {
    max-width: 960px;
}

.order-2 {
    order: 2;
}

.order-3 {
    order: 3;
}

.order-first {
    order: -9999;
}

.overflow-hidden {
    overflow: hidden;
}

.overflow-x-auto {
    overflow-x: auto;
}

.overflow-x-hidden {
    overflow-x: hidden;
}

.space-y-2\.5 > * + * {
    margin-top: 0.625rem;
}

.space-y-3 > * + * {
    margin-top: 0.75rem;
}

.space-y-4 > * + * {
    margin-top: 1rem;
}

.space-y-5 > * + * {
    margin-top: 1.25rem;
}

.space-y-6 > * + * {
    margin-top: 1.5rem;
}

.divide-y > * + * {
    border-top-width: 1px;
    border-top-style: solid;
}

.divide-apple-border > * + * {
    border-color: var(--apple-border);
}

.list-decimal {
    list-style-type: decimal;
}

.list-inside {
    list-style-position: inside;
}


/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
}

.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.text-base {
    font-size: 1rem;
    line-height: 1.5rem;
}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}

.text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
}

.text-5xl {
    font-size: 3rem;
    line-height: 1;
}

.text-\[10px\] {
    font-size: 10px;
}

.text-\[11px\] {
    font-size: 11px;
}

.text-\[12px\] {
    font-size: 12px;
}

.text-\[13px\] {
    font-size: 13px;
}

.text-\[14px\] {
    font-size: 14px;
}

.text-\[15px\] {
    font-size: 15px;
}

.text-\[16px\] {
    font-size: 16px;
}

.text-\[17px\] {
    font-size: 17px;
}

.text-\[18px\] {
    font-size: 18px;
}

.text-\[20px\] {
    font-size: 20px;
}

.text-\[22px\] {
    font-size: 22px;
}

.text-\[28px\] {
    font-size: 28px;
}

.text-\[32px\] {
    font-size: 32px;
}

.font-normal {
    font-weight: 400;
}

.font-medium {
    font-weight: 500;
}

.font-semibold {
    font-weight: 600;
}

.font-bold {
    font-weight: 700;
}

.font-extrabold {
    font-weight: 800;
}

.leading-none {
    line-height: 1;
}

.leading-snug {
    line-height: 1.375;
}

.leading-relaxed {
    line-height: 1.625;
}

.leading-\[1\.05\] {
    line-height: 1.05;
}

.leading-\[1\.08\] {
    line-height: 1.08;
}

.leading-\[1\.15\] {
    line-height: 1.15;
}

.leading-\[1\.2\] {
    line-height: 1.2;
}

.leading-\[1\.35\] {
    line-height: 1.35;
}

.leading-\[1\.5\] {
    line-height: 1.5;
}

.leading-\[1\.55\] {
    line-height: 1.55;
}

.leading-\[1\.6\] {
    line-height: 1.6;
}

.leading-\[1\.65\] {
    line-height: 1.65;
}

.leading-\[1\.7\] {
    line-height: 1.7;
}

.leading-\[1\.75\] {
    line-height: 1.75;
}

.leading-\[1\.85\] {
    line-height: 1.85;
}

.tracking-tight {
    letter-spacing: -0.025em;
}

.tracking-wide {
    letter-spacing: 0.025em;
}

.tracking-widest {
    letter-spacing: 0.1em;
}

.tracking-\[-0\.03em\] {
    letter-spacing: -0.03em;
}

.tracking-\[0\.04em\] {
    letter-spacing: 0.04em;
}

.tracking-\[0\.14em\] {
    letter-spacing: 0.14em;
}

.tracking-\[0\.18em\] {
    letter-spacing: 0.18em;
}

.uppercase {
    text-transform: uppercase;
}

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tabular-nums {
    font-variant-numeric: tabular-nums;
}

.select-none {
    user-select: none;
}

.resize-none {
    resize: none;
}


/* ============================================================
   COLORS - Text
   ============================================================ */
.text-white {
    color: #ffffff;
}

.text-apple-dark {
    color: var(--apple-dark);
}

.text-apple-gray {
    color: var(--apple-gray);
}

.text-apple-blue {
    color: var(--apple-blue);
}

.text-apple-border {
    color: var(--apple-border);
}

.text-apple-dark\/55 {
    color: rgba(29, 29, 31, 0.55);
}

.text-apple-dark\/60 {
    color: rgba(29, 29, 31, 0.60);
}

.text-apple-dark\/65 {
    color: rgba(29, 29, 31, 0.65);
}

.text-apple-dark\/70 {
    color: rgba(29, 29, 31, 0.70);
}

.text-apple-dark\/75 {
    color: rgba(29, 29, 31, 0.75);
}

.text-apple-dark\/80 {
    color: rgba(29, 29, 31, 0.80);
}

.text-apple-gray\/70 {
    color: rgba(134, 134, 139, 0.70);
}

.text-white\/20 {
    color: rgba(255,255,255,0.20);
}

.text-white\/30 {
    color: rgba(255,255,255,0.30);
}

.text-white\/40 {
    color: rgba(255,255,255,0.40);
}

.text-white\/50 {
    color: rgba(255,255,255,0.50);
}

.text-white\/60 {
    color: rgba(255,255,255,0.60);
}

.text-white\/65 {
    color: rgba(255,255,255,0.65);
}

.text-white\/70 {
    color: rgba(255,255,255,0.70);
}

.text-white\/75 {
    color: rgba(255,255,255,0.75);
}

.text-white\/80 {
    color: rgba(255,255,255,0.80);
}


/* ============================================================
   COLORS - Background
   ============================================================ */
.bg-white {
    background-color: #ffffff;
}

.bg-apple-dark {
    background-color: var(--apple-dark);
}

.bg-apple-lightgray {
    background-color: var(--apple-lightgray);
}

.bg-apple-blue {
    background-color: var(--apple-blue);
}

.bg-apple-border {
    background-color: var(--apple-border);
}

.bg-white\/10 {
    background-color: rgba(255,255,255,0.10);
}

.bg-white\/97 {
    background-color: rgba(255,255,255,0.97);
}

.bg-white\/\[0\.04\] {
    background-color: rgba(255,255,255,0.04);
}

.bg-white\/\[0\.08\] {
    background-color: rgba(255,255,255,0.08);
}

.bg-white\/\[0\.12\] {
    background-color: rgba(255,255,255,0.12);
}

.bg-apple-blue\/5 {
    background-color: rgba(0,113,227,0.05);
}

.bg-apple-blue\/8 {
    background-color: rgba(0,113,227,0.08);
}

.bg-apple-blue\/10 {
    background-color: rgba(0,113,227,0.10);
}

.bg-apple-blue\/15 {
    background-color: rgba(0,113,227,0.15);
}

.bg-apple-blue\/\[0\.05\] {
    background-color: rgba(0,113,227,0.05);
}

.bg-apple-lightgray\/40 {
    background-color: rgba(245,245,247,0.40);
}

.bg-apple-lightgray\/50 {
    background-color: rgba(245,245,247,0.50);
}

.bg-apple-border\/20 {
    background-color: rgba(210,210,215,0.20);
}

.bg-apple-border\/40 {
    background-color: rgba(210,210,215,0.40);
}

.bg-apple-border\/50 {
    background-color: rgba(210,210,215,0.50);
}

.bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-from), var(--tw-gradient-via, transparent), var(--tw-gradient-to));
}

.from-apple-blue\/10 {
    --tw-gradient-from: rgba(0,113,227,0.10);
}

.from-white\/\[0\.06\] {
    --tw-gradient-from: rgba(255,255,255,0.06);
}

.via-transparent {
    --tw-gradient-via: transparent;
}

.to-transparent {
    --tw-gradient-to: transparent;
}


/* ============================================================
   BORDERS
   ============================================================ */
.border {
    border-width: 1px;
    border-style: solid;
}

.border-t {
    border-top-width: 1px;
    border-top-style: solid;
}

.border-b {
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

.border-b-2 {
    border-bottom-width: 2px;
    border-bottom-style: solid;
}

.border-l-2 {
    border-left-width: 2px;
    border-left-style: solid;
}

.border-r-2 {
    border-right-width: 2px;
    border-right-style: solid;
}

.border-\[3px\] {
    border-width: 3px;
    border-style: solid;
}

.border-\[6px\] {
    border-width: 6px;
    border-style: solid;
}

.border-apple-blue {
    border-color: var(--apple-blue);
}

.border-apple-blue\/15 {
    border-color: rgba(0,113,227,0.15);
}

.border-apple-blue\/25 {
    border-color: rgba(0,113,227,0.25);
}

.border-apple-border {
    border-color: var(--apple-border);
}

.border-apple-border\/50 {
    border-color: rgba(210,210,215,0.50);
}

.border-apple-border\/60 {
    border-color: rgba(210,210,215,0.60);
}

.border-apple-border\/70 {
    border-color: rgba(210,210,215,0.70);
}

.border-apple-dark {
    border-color: var(--apple-dark);
}

.border-white {
    border-color: #ffffff;
}

.border-white\/5 {
    border-color: rgba(255,255,255,0.05);
}

.border-white\/\[0\.08\] {
    border-color: rgba(255,255,255,0.08);
}

.rounded-md {
    border-radius: 0.375rem;
}

.rounded-lg {
    border-radius: 0.5rem;
}

.rounded-xl {
    border-radius: 0.75rem;
}

.rounded-2xl {
    border-radius: 1rem;
}

.rounded-3xl {
    border-radius: 1.5rem;
}

.rounded-full {
    border-radius: 9999px;
}

.rounded-\[1\.5rem\] {
    border-radius: 1.5rem;
}

.ring-2 {
    box-shadow: 0 0 0 2px var(--tw-ring-color);
}

.ring-apple-blue\/40 {
    --tw-ring-color: rgba(0,113,227,0.40);
}

.ring-apple-border\/40 {
    --tw-ring-color: rgba(210,210,215,0.40);
}

.ring-white\/40 {
    --tw-ring-color: rgba(255,255,255,0.40);
}


/* ============================================================
   SHADOWS
   ============================================================ */
.shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
}

.shadow-md {
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.10);
}

.shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -4px rgba(0,0,0,0.10);
}

.shadow-apple-blue\/25 {
    --tw-shadow-color: rgba(0,113,227,0.25);
}

.shadow-black\/10 {
    --tw-shadow-color: rgba(0,0,0,0.10);
}

.hover\:shadow-\[0_8px_40px_rgba\(0\,113\,227\,0\.1\)\]:hover {
    box-shadow: 0 8px 40px rgba(0,113,227,0.1);
}

.hover\:shadow-\[0_8px_40px_rgba\(0\,113\,227\,0\.15\)\]:hover {
    box-shadow: 0 8px 40px rgba(0,113,227,0.15);
}

.hover\:shadow-md:hover {
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.10);
}

.hover\:shadow-sm:hover {
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
}


/* ============================================================
   FILTERS / EFFECTS
   ============================================================ */
.backdrop-blur-xl {
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
}

.backdrop-blur-2xl {
    -webkit-backdrop-filter: blur(40px);
    backdrop-filter: blur(40px);
}

.blur-\[60px\] {
    filter: blur(60px);
}

.opacity-0 {
    opacity: 0;
}

.opacity-40 {
    opacity: 0.40;
}

.opacity-50 {
    opacity: 0.50;
}

.pointer-events-none {
    pointer-events: none;
}

.object-cover {
    object-fit: cover;
}

.object-contain {
    object-fit: contain;
}

.object-center {
    object-position: center;
}


/* ============================================================
   TRANSITIONS
   ============================================================ */
.transition-all {
    transition: all 0.15s cubic-bezier(0.4,0,0.2,1);
}

.transition-colors {
    transition: color 0.15s cubic-bezier(0.4,0,0.2,1), background-color 0.15s cubic-bezier(0.4,0,0.2,1), border-color 0.15s cubic-bezier(0.4,0,0.2,1);
}

.transition-opacity {
    transition: opacity 0.15s cubic-bezier(0.4,0,0.2,1);
}

.transition-shadow {
    transition: box-shadow 0.15s cubic-bezier(0.4,0,0.2,1);
}

.transition-transform {
    transition: transform 0.15s cubic-bezier(0.4,0,0.2,1);
}

.duration-300 {
    transition-duration: 300ms;
}

.duration-500 {
    transition-duration: 500ms;
}

.-translate-x-1\/2 {
    transform: translateX(-50%);
}


/* ============================================================
   HOVER / FOCUS / DISABLED STATES
   ============================================================ */
.hover\:bg-apple-blue-h:hover {
    background-color: var(--apple-blue-h);
}

.hover\:bg-apple-dark\/80:hover {
    background-color: rgba(29,29,31,0.80);
}

.hover\:bg-apple-lightgray:hover {
    background-color: var(--apple-lightgray);
}

.hover\:bg-white\/\[0\.08\]:hover {
    background-color: rgba(255,255,255,0.08);
}

.hover\:border-apple-blue\/30:hover {
    border-color: rgba(0,113,227,0.30);
}

.hover\:border-apple-border:hover {
    border-color: var(--apple-border);
}

.hover\:border-white\/\[0\.15\]:hover {
    border-color: rgba(255,255,255,0.15);
}

.hover\:text-apple-blue:hover {
    color: var(--apple-blue);
}

.hover\:text-apple-dark:hover {
    color: var(--apple-dark);
}

.hover\:text-white:hover {
    color: #ffffff;
}

.hover\:underline:hover {
    text-decoration: underline;
}

.focus\:border-apple-blue:focus {
    border-color: var(--apple-blue);
}

.focus\:outline-none:focus {
    outline: none;
}

.disabled\:cursor-not-allowed:disabled {
    cursor: not-allowed;
}

.disabled\:opacity-60:disabled {
    opacity: 0.60;
}

.placeholder\:text-apple-gray::placeholder {
    color: var(--apple-gray);
}

.group { /* marker class */
}

.group-hover\:opacity-100 {
    opacity: 1;
}
/* applied on group:hover below */
.group-hover\:text-apple-blue {
    color: var(--apple-blue);
}

.group-hover\:text-white\/55 {
    color: rgba(255,255,255,0.55);
}

.group:hover .group-hover\:opacity-100 {
    opacity: 1;
}

.group:hover .group-hover\:text-apple-blue {
    color: var(--apple-blue);
}

.group:hover .group-hover\:text-white\/55 {
    color: rgba(255,255,255,0.55);
}


/* ============================================================
   RESPONSIVE BREAKPOINTS
   sm: 640px  /  md: 768px  /  lg: 1024px
   ============================================================ */
@media (min-width: 640px) {
    .sm\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .sm\:px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .sm\:text-6xl {
        font-size: 3.75rem;
        line-height: 1;
    }
}

@media (min-width: 768px) {
    .md\:block {
        display: block;
    }

    .md\:flex {
        display: flex;
    }

    .md\:flex-row {
        flex-direction: row;
    }

    .md\:gap-0 {
        gap: 0;
    }

    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0,1fr));
    }

    .md\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0,1fr));
    }

    .md\:items-stretch {
        align-items: stretch;
    }

    .md\:justify-start {
        justify-content: flex-start;
    }

    .md\:col-span-1 {
        grid-column: span 1 / span 1;
    }

    .md\:table-cell {
        display: table-cell;
    }

    .md\:p-5 {
        padding: 1.25rem;
    }

    .md\:p-8 {
        padding: 2rem;
    }

    .md\:px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .md\:px-10 {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }

    .md\:px-12 {
        padding-left: 3rem;
        padding-right: 3rem;
    }

    .md\:py-5 {
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
    }

    .md\:py-10 {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }

    .md\:py-\[100px\] {
        padding-top: 100px;
        padding-bottom: 100px;
    }

    .md\:text-4xl {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }

    .md\:text-\[22px\] {
        font-size: 22px;
    }

    .md\:text-\[34px\] {
        font-size: 34px;
    }

    .md\:text-\[38px\] {
        font-size: 38px;
    }

    .md\:text-\[44px\] {
        font-size: 44px;
    }
}

@media (min-width: 1024px) {
    .lg\:flex {
        display: flex;
    }

    .lg\:grid {
        display: grid;
    }

    .lg\:hidden {
        display: none;
    }

    .lg\:flex-row {
        flex-direction: row;
    }

    .lg\:flex-1 {
        flex: 1 1 0%;
    }

    .lg\:flex-grow {
        flex-grow: 1;
    }

    .lg\:shrink-0 {
        flex-shrink: 0;
    }

    .lg\:ml-auto {
        margin-left: auto;
    }

    .lg\:mr-auto {
        margin-right: auto;
    }

    .lg\:order-1 {
        order: 1;
    }

    .lg\:order-2 {
        order: 2;
    }

    .lg\:order-3 {
        order: 3;
    }

    .lg\:justify-start {
        justify-content: flex-start;
    }

    .lg\:gap-16 {
        gap: 4rem;
    }

    .lg\:gap-20 {
        gap: 5rem;
    }

    .lg\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0,1fr));
    }

    .lg\:grid-cols-\[1fr_auto_1fr\] {
        grid-template-columns: 1fr auto 1fr;
    }

    .lg\:p-7 {
        padding: 1.75rem;
    }

    .lg\:pt-3 {
        padding-top: 0.75rem;
    }

    .lg\:px-12 {
        padding-left: 3rem;
        padding-right: 3rem;
    }

    .lg\:pb-\[100px\] {
        padding-bottom: 100px;
    }

    .lg\:pb-\[120px\] {
        padding-bottom: 120px;
    }

    .lg\:pt-\[120px\] {
        padding-top: 120px;
    }

    .lg\:pt-\[180px\] {
        padding-top: 180px;
    }

    .lg\:h-auto {
        height: auto;
    }

    .lg\:max-w-\[300px\] {
        max-width: 300px;
    }

    .lg\:w-\[220px\] {
        width: 220px;
    }

    .lg\:w-\[300px\] {
        width: 300px;
    }

    .lg\:w-\[490px\] {
        width: 490px;
    }

    .lg\:text-\[16px\] {
        font-size: 16px;
    }

    .lg\:text-\[46px\] {
        font-size: 46px;
    }

    .lg\:text-\[72px\] {
        font-size: 72px;
    }
}


/* ============================================================
   NAV
   ============================================================ */
#main-nav {
    transition: background 0.3s ease, box-shadow 0.3s ease, height 0.3s ease;
}

.nav-scrolled {
    background: rgba(255,255,255,0.9) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0,0,0,0.06);
    height: 56px !important;
}

    .nav-scrolled .nav-link {
        color: var(--apple-dark) !important;
    }

    .nav-scrolled .nav-wordmark {
        color: var(--apple-dark) !important;
    }

    .nav-scrolled #mobile-menu-btn {
        color: var(--apple-dark);
    }

    .nav-scrolled .lang-toggle {
        border-color: rgba(0,0,0,0.15) !important;
    }

        .nav-scrolled .lang-toggle span {
            color: var(--apple-dark) !important;
        }

            .nav-scrolled .lang-toggle span.lang-active {
                color: #ffffff !important;
            }


/* ============================================================
   LANG TOGGLE
   ============================================================ */
.lang-toggle {
    display: flex;
    align-items: center;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 100px;
    padding: 3px;
    transition: border-color 0.3s ease;
}

    .lang-toggle span {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.06em;
        padding: 3px 10px;
        border-radius: 100px;
        cursor: pointer;
        color: rgba(255,255,255,0.45);
        transition: all 0.2s ease;
        user-select: none;
    }

        .lang-toggle span.lang-active {
            background: rgba(255,255,255,0.15);
            color: #ffffff;
        }

.nav-scrolled .lang-toggle span.lang-active {
    background: var(--apple-blue);
    color: #ffffff;
}


/* ============================================================
   EN BANNER
   ============================================================ */
#lang-en-banner {
    display: none;
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    z-index: 40;
    background: rgba(0,113,227,0.95);
    backdrop-filter: blur(8px);
    text-align: center;
    padding: 8px 16px;
    font-size: 13px;
    color: rgba(255,255,255,0.9);
    font-weight: 500;
    transition: top 0.3s ease;
}

    #lang-en-banner.show {
        display: block;
    }


/* ============================================================
   TAB ACTIVE STATE
   ============================================================ */
[data-tab].active {
    color: var(--apple-blue) !important;
}


/* ============================================================
   GRADIENT TEXT
   ============================================================ */
.gradient-text {
    background: linear-gradient(90deg, #0071E3 0%, #34C3FF 55%, #5E5CE6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* ============================================================
   HERO
   ============================================================ */
.hero-glow {
    background: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(0,113,227,0.16) 0%, transparent 70%);
}

#hero-wrapper {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 72px;
    clip-path: inset(0);
}

.hero-typing-cursor {
    display: inline-block;
    width: 3px;
    background: #34C3FF;
    border-radius: 2px;
    margin-left: 4px;
    vertical-align: baseline;
    animation: cursorBlink 0.9s step-end infinite;
}

@keyframes cursorBlink {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

.hero-after-type {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s cubic-bezier(0.25,0.1,0.25,1), transform 0.7s cubic-bezier(0.25,0.1,0.25,1);
}

    .hero-after-type.revealed {
        opacity: 1;
        transform: none;
    }

#hero-inner {
    transition: transform 0s linear, opacity 0s linear;
    will-change: transform, opacity;
}

.hero-scroll-hint {
    position: fixed;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 40;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,0.45);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

@media (min-width: 640px) {
    .hero-scroll-hint {
        display: flex;
    }
}

.hero-scroll-mouse {
    width: 22px;
    height: 34px;
    border: 1.5px solid rgba(255,255,255,0.3);
    border-radius: 11px;
    position: relative;
}

.hero-scroll-dot {
    width: 3px;
    height: 7px;
    background: rgba(255,255,255,0.55);
    border-radius: 2px;
    position: absolute;
    left: 50%;
    top: 6px;
    transform: translateX(-50%);
    animation: heroScrollDot 2.2s ease-in-out infinite;
}

@keyframes heroScrollDot {
    0% {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }

    75% {
        transform: translateX(-50%) translateY(12px);
        opacity: 0;
    }

    100% {
        transform: translateX(-50%) translateY(0);
        opacity: 0;
    }
}


/* ============================================================
   APPLE CARD
   ============================================================ */
.apple-card {
    transition: transform 0.3s cubic-bezier(0.25,0.1,0.25,1), box-shadow 0.3s cubic-bezier(0.25,0.1,0.25,1);
}

    .apple-card:hover {
        transform: scale(1.02);
        box-shadow: 0 12px 40px rgba(0,0,0,0.10);
    }


/* ============================================================
   BENTO GRID
   ============================================================ */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

@media (max-width: 1023px) {
    .bento-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 639px) {
    .bento-grid {
        grid-template-columns: 1fr;
    }
}

.bento-span-2 {
    grid-column: span 2;
}

@media (max-width: 639px) {
    .bento-span-2 {
        grid-column: span 1;
    }
}


/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.75s cubic-bezier(0.25,0.1,0.25,1), transform 0.75s cubic-bezier(0.25,0.1,0.25,1);
}

    .reveal.revealed {
        opacity: 1;
        transform: none;
    }


/* ============================================================
   ACCORDION
   ============================================================ */
.accordion-body {
    display: none;
}

    .accordion-body.open {
        display: block;
    }


/* ============================================================
   DATA TABLE
   ============================================================ */
.data-table th {
    font-family: 'JetBrains Mono', monospace;
}


/* ============================================================
   SECTION LABEL
   ============================================================ */
.section-label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--apple-gray);
}


/* ============================================================
   GOAL CAROUSEL / GC CARD
   ============================================================ */
#vm-collage {
    height: 300px;
}

@media (min-width: 768px) {
    #vm-collage {
        height: 380px;
    }
}

@media (min-width: 1024px) {
    #vm-collage {
        height: 460px;
    }
}

.gc-card {
    width: 200px !important;
    height: 270px !important;
}

@media (min-width: 768px) {
    .gc-card {
        width: 240px !important;
        height: 320px !important;
    }
}


/* ============================================================
   MISSING UTILITIES (補完)
   ============================================================ */

/* hover:shadow */
.hover\:shadow-sm:hover {
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
}

.hover\:shadow-md:hover {
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.10);
}

/* group-hover:opacity-100 */
.group:hover .group-hover\:opacity-100 {
    opacity: 1;
}

/* md:block */
@media (min-width: 768px) {
    .md\:block {
        display: block;
    }
}

/* lg:h-auto */
@media (min-width: 1024px) {
    .lg\:h-auto {
        height: auto;
    }
}

@media (min-width: 1024px) {
    .gc-card {
        width: 300px !important;
        height: 400px !important;
    }
}