:root {
            --bg: #ffffff;
            --surface: #ffffff;
            --text: #273847;
            --muted: #73808c;
            --line: #e7ebef;
            --line-strong: #d9e0e6;
            --button: #8e98a2;
            --button-hover: #7b8792;
            --button-text: #ffffff;
            --badge-bg: #f7f9fb;
            --badge-text: #5e6c79;
            --shadow: 0 18px 42px rgba(34, 48, 62, 0.08);
            --radius: 28px;
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            min-height: 100vh;
            display: grid;
            place-items: center;
            padding: 16px;
            font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
            color: var(--text);
            background: linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
        }

        .wrap {
            width: min(860px, 100%);
        }

        .panel {
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            padding: 0 30px 32px;
            text-align: center;
        }

        .badge {
            display: inline-block;
            padding: 9px 15px;
            border-radius: 999px;
            background: var(--badge-bg);
            border: 1px solid var(--line-strong);
            color: var(--badge-text);
            font-size: 0.78rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            margin-bottom: 15px;
        }

        .panel-header {
            margin: 0 -30px;
            padding: 14px 26px;
            background: #ffffff;
            border-bottom: 1px solid #edf1f5;
            border-radius: 28px 28px 0 0;
            text-align: center;
        }

        .logo-box {
            width: auto;
            margin: 0;
            padding: 0;
            border: 0;
            box-shadow: none;
            display: inline-flex;
            align-items: center;
            justify-content: flex-start;
            gap: 14px;
        }

        .logo {
            width: 74px;
            height: auto;
            display: block;
        }

        .logo-text {
            display: flex;
            flex-direction: column;
            gap: 1px;
            color: #233247;
            font-weight: 700;
            line-height: 1.02;
        }

        .logo-text span {
            display: block;
            font-size: 0.98rem;
            letter-spacing: -0.02em;
        }

        .hero {
            padding-top: 34px;
        }

        .notice {
            margin: 0 auto 26px;
            max-width: 720px;
            padding: 22px 24px;
            border: 1px solid #f1c7c7;
            border-radius: 24px;
            background:
                linear-gradient(135deg, rgba(189, 28, 28, 0.07), rgba(255, 255, 255, 0.98)),
                #ffffff;
            box-shadow: 0 20px 40px rgba(145, 34, 34, 0.12);
        }

        .notice-kicker {
            display: inline-block;
            margin-bottom: 12px;
            padding: 7px 12px;
            border-radius: 999px;
            background: #8f1d1d;
            color: #ffffff;
            font-size: 0.76rem;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .notice-title {
            margin: 0;
            color: #7c1515;
            font-size: clamp(1.55rem, 2.8vw, 2rem);
            font-weight: 800;
            letter-spacing: -0.03em;
            text-transform: uppercase;
        }

        .notice-copy {
            margin-top: 14px;
            max-width: 100%;
            color: #3f2a2a;
            font-size: clamp(1rem, 1.6vw, 1.1rem);
            line-height: 1.55;
        }

        .notice-copy strong {
            color: #7c1515;
        }

        h1 {
            margin: 0;
            font-size: clamp(1.8rem, 3.2vw, 2.50rem);
            line-height: 1.05;
            letter-spacing: -0.03em;
        }

        p {
            margin: 16px auto 0;
            max-width: 610px;
            color: var(--muted);
            font-size: clamp(0.95rem, 1.4vw, 1.04rem);
            line-height: 1.65;
        }

        .actions {
            margin-top: 28px;
            display: flex;
            justify-content: center;
        }

        .button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 290px;
            padding: 16px 26px;
            border-radius: 999px;
            background: var(--button);
            color: var(--button-text);
            text-decoration: none;
            font-size: 0.94rem;
            font-weight: 700;
            box-shadow: 0 12px 24px rgba(142, 152, 162, 0.22);
            transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
        }

        .button:hover {
            transform: translateY(-2px);
            background: var(--button-hover);
            box-shadow: 0 15px 28px rgba(123, 135, 146, 0.24);
        }

        .button:active {
            transform: translateY(0);
        }

        .hint {
            margin-top: 14px;
            font-size: 0.88rem;
            color: #8a96a2;
        }

        .social {
            margin-top: 34px;
            padding-top: 28px;
            border-top: 1px solid var(--line);
        }

        .social-copy {
            max-width: 580px;
            margin-top: 10px;
            font-size: 0.94rem;
        }

        .social-actions {
            margin-top: 20px;
            display: flex;
            justify-content: center;
        }

        .button-secondary {
            gap: 10px;
            background: linear-gradient(135deg, #405de6 0%, #5851db 18%, #833ab4 38%, #c13584 58%, #e1306c 76%, #fd1d1d 90%, #fcaf45 100%);
            color: #ffffff;
            box-shadow: 0 14px 28px rgba(193, 53, 132, 0.24);
        }

        .button-secondary:hover {
            background: linear-gradient(135deg, #3551dd 0%, #4f47d2 18%, #7831ab 38%, #b92d7d 58%, #d62967 76%, #f51b1b 90%, #f7a23a 100%);
            box-shadow: 0 16px 32px rgba(193, 53, 132, 0.3);
        }

        .button-secondary svg {
            width: 18px;
            height: 18px;
            flex: 0 0 18px;
        }

        .feed {
            margin-top: 24px;
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 16px;
        }

        .feed-card {
            text-align: left;
            border: 1px solid var(--line);
            border-radius: 22px;
            overflow: hidden;
            background: #fff;
            box-shadow: 0 10px 24px rgba(34, 48, 62, 0.05);
            text-decoration: none;
            color: inherit;
            transition: transform 0.22s ease, box-shadow 0.22s ease;
        }

        .feed-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 16px 30px rgba(34, 48, 62, 0.1);
        }

        .feed-thumb {
            aspect-ratio: 1 / 1;
            position: relative;
            overflow: hidden;
        }

        .feed-thumb img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
        }

        .feed-thumb::after {
            content: "Instagram";
            position: absolute;
            left: 14px;
            bottom: 14px;
            padding: 6px 10px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.96);
            color: #8c2d89;
            font-size: 0.73rem;
            font-weight: 700;
            letter-spacing: 0.04em;
        }

        .feed-body {
            padding: 14px 14px 16px;
        }

        .feed-title {
            margin: 0;
            font-size: 0.94rem;
            font-weight: 700;
            color: var(--text);
        }

        .feed-text {
            margin: 8px 0 0;
            font-size: 0.86rem;
            line-height: 1.55;
            color: var(--muted);
        }

        @media (max-width: 640px) {
            .panel {
                padding: 0 20px 24px;
            }

            .panel-header {
                margin: 0 -20px;
                padding: 12px 18px;
            }

            .logo-box {
                gap: 10px;
            }

            .logo {
                width: 64px;
            }

            .logo-text span {
                font-size: 0.8rem;
            }

            .hero {
                padding-top: 26px;
            }

            .notice {
                padding: 18px 16px;
                margin-bottom: 22px;
            }

            .button {
                width: 100%;
                min-width: 0;
            }

            .feed {
                grid-template-columns: 1fr;
            }
        }