:root {
            --primary-pink: #FFB6D9;
            --primary-blue: #B6D9FF;
            --primary-purple: #D9B6FF;
            --accent-rose: #FF9EC7;
            --accent-mint: #B6FFD9;
            --accent-peach: #FFDAB6;
            --accent-lavender: #E6CCFF;
            --bg-white: #FFFFFF;
            --text-dark: #4A4A4A;
            --text-medium: #707070;
            --text-light: #A0A0A0;
            --badge-green: #6FCF97;
            --badge-blue: #56CCF2;
            --badge-gold: #F2C94C;
            --shadow-soft: 0 4px 20px rgba(255, 182, 217, 0.2);
            --shadow-medium: 0 8px 30px rgba(182, 217, 255, 0.25);
            --shadow-strong: 0 12px 40px rgba(217, 182, 255, 0.3);

            /* 강렬한 그라데이션 배경 색상 */
            --gradient-cyan: #20B8FF;
            --gradient-blue: #4DB8FF;
            --gradient-purple: #9B59FF;
            --gradient-violet: #B47BFF;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Nunito', sans-serif;
            /* dressup_game_prev_20260626.php 와 같은 상하 그라데이션 */
            background: linear-gradient(180deg, #CBFBFF 0%, #B3EEFE 35%, #B3C6FF 72%, #D5A2FF 100%);
            background-attachment: fixed;
            color: var(--text-dark);
            line-height: 1.6;
            overflow-x: hidden;
        }

        @media (min-width: 1500px) {
            body::before {
                content: '';
                position: fixed;
                left: 0;
                top: 111px;
                width: min(420px, calc((100vw - 1100px) / 2 + 12px));
                height: calc(100vh - 111px);
                background-image: url('/img/main/ny-fashion-street-left.jpg');
                background-repeat: no-repeat;
                background-position: left -48px;
                background-size: cover;
                opacity: 0.9;
                -webkit-mask-image: linear-gradient(to right, black 0%, black 58%, rgba(0, 0, 0, 0.82) 72%, transparent 100%);
                mask-image: linear-gradient(to right, black 0%, black 58%, rgba(0, 0, 0, 0.82) 72%, transparent 100%);
                pointer-events: none;
                z-index: 0;
            }
        }

        /* Marquee Section */
        .top-marquee {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.15));
            backdrop-filter: blur(10px);
            padding: 6px 0;
            border-bottom: 2px solid rgba(255, 255, 255, 0.3);
            display: flex;
            align-items: center;
            gap: 15px;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .top-marquee.hidden {
            max-height: 0;
            padding: 0;
            border-bottom-width: 0;
            opacity: 0;
        }

        .marquee-container {
            flex: 1;
            overflow: hidden;
        }

        .marquee-text {
            display: inline-block;
            white-space: nowrap;
            animation: marquee 40s linear infinite;
            font-size: 12px;
            color: rgba(255, 255, 255, 0.9);
            font-style: italic;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        }

        @keyframes marquee {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

        .sns-buttons {
            display: flex;
            gap: 6px;
            padding: 0 10px;
            flex-shrink: 0;
        }

        .sns-btn {
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
            display: inline-block;
        }

        .sns-btn.blog {
            background: #03C75A;
            color: white;
        }

        .sns-btn.facebook {
            background: #1877F2;
            color: white;
        }

        .sns-btn.instagram {
            background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF);
            color: white;
        }

        .sns-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
        }

        .toggle-marquee {
            width: 30px;
            height: 30px;
            background: white;
            border: 2px solid rgba(255, 255, 255, 0.5);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            flex-shrink: 0;
            margin-right: 10px;
            color: var(--gradient-purple);
            font-size: 12px;
        }

        .toggle-marquee:hover {
            background: rgba(255, 255, 255, 0.9);
            border-color: white;
            transform: scale(1.1);
        }

        .toggle-marquee.collapsed {
            position: fixed;
            top: 10px;
            right: 20px;
            z-index: 1001;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }

        /* Container */
        .container {
            max-width: 1100px;
            margin: 0 auto;
            padding: 0 20px;
            position: relative;
            z-index: 1;
        }

        /* Header - Hot Pink Style */
        header {
            background: linear-gradient(135deg, #FF1493 0%, #FF69B4 50%, #FF85C1 100%);
            backdrop-filter: blur(10px);
            box-shadow: 0 4px 30px rgba(255, 20, 147, 0.4);
            border-bottom: 3px solid rgba(255, 255, 255, 0.3);
            position: sticky;
            top: 0;
            z-index: 1000;
            animation: slideDown 0.6s ease-out;
        }

        @keyframes slideDown {
            from {
                transform: translateY(-100%);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        .header-content {
            padding: 14px 0 11px;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            flex-wrap: nowrap;
            gap: 18px;
        }

        .header-nav {
            display: flex;
            flex: 1 1 auto;
            min-width: 0;
            flex-direction: column;
            align-items: stretch;
            gap: 4px;
            padding-top: 1px;
        }

        .logo-area {
            display: flex;
            align-items: center;
            gap: 15px;
            animation: fadeIn 0.8s ease-out 0.2s both;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .logo-container {
            width: 172px;
            height: 56px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: visible;
        }

        .logo-base {
            width: 100%;
            height: 100%;
            object-fit: contain;
            position: relative;
            z-index: 1;
        }

        .logo-flower {
            position: absolute;
            top: -2px;
            left: 41%;
            transform: translateX(-50%);
            width: 18px;
            height: 18px;
            object-fit: contain;
            animation: spin 2s linear infinite;
            z-index: 2;
        }

        @keyframes spin {
            from { transform: translateX(-50%) rotate(0deg); }
            to { transform: translateX(-50%) rotate(360deg); }
        }

        nav {
            animation: fadeIn 0.8s ease-out 0.4s both;
            width: 100%;
            align-self: flex-end;
        }

        .main-menu {
            list-style: none;
            display: flex;
            gap: 30px;
            flex-wrap: nowrap;
            justify-content: flex-start;
        }

        .main-menu li a {
            font-family: 'Fredoka', sans-serif;
            font-size: 14px;
            font-weight: 600;
            color: white;
            text-decoration: none;
            padding: 5px 14px;
            border-radius: 20px;
            transition: all 0.3s ease;
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1px;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
        }

        .main-menu li a .menu-eng {
            font-size: 9px;
            font-weight: 400;
            opacity: 0.85;
            font-style: italic;
        }

        .main-menu li a::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%) scaleX(0);
            width: 80%;
            height: 3px;
            background: white;
            border-radius: 2px;
            transition: transform 0.3s ease;
        }

        .main-menu li a:hover {
            background: rgba(255, 255, 255, 0.25);
            transform: translateY(-2px);
        }

        .main-menu li a:hover::before {
            transform: translateX(-50%) scaleX(1);
        }

        .main-menu li.new a::after {
            content: 'NEW';
            position: absolute;
            top: -5px;
            right: -5px;
            background: #FF6B6B;
            color: white;
            font-size: 9px;
            padding: 2px 6px;
            border-radius: 8px;
            font-weight: 700;
        }

        .header-marquee {
            width: 100%;
            display: flex;
            align-items: center;
            gap: 14px;
            justify-content: flex-end;
            padding: 1px 0 0;
            overflow: hidden;
        }

        .header-marquee .marquee-container {
            flex: 1;
            min-width: 0;
            position: relative;
            overflow: hidden;
            mask-image: linear-gradient(to right, transparent 0, black 36px, black calc(100% - 48px), transparent 100%);
            -webkit-mask-image: linear-gradient(to right, transparent 0, black 36px, black calc(100% - 48px), transparent 100%);
        }

        .header-marquee .marquee-text {
            font-size: 10px;
            color: rgba(255, 255, 255, 0.96);
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
            padding-left: 2px;
            letter-spacing: 0.45px;
        }

        .header-marquee .sns-buttons {
            padding: 0 0 0 10px;
            gap: 10px;
            min-width: 170px;
            justify-content: flex-end;
        }

        .header-marquee .sns-btn {
            padding: 4px 9px;
            border-radius: 13px;
            font-size: 10px;
            white-space: nowrap;
            box-shadow: 0 3px 12px rgba(0, 0, 0, 0.16);
        }

        /* Main Layout Grid - Ultra Compact (10px spacing) */
        .main-layout {
            display: grid;
            grid-template-columns: 240px auto 240px;
            gap: 10px;
            margin: 10px 0;
            align-items: stretch;
            position: relative;
        }

        .newcomer-guide-rail {
            position: absolute;
            top: 0;
            right: -292px;
            width: 268px;
            height: 100%;
            pointer-events: none;
            z-index: 3;
        }

        .right-info-stack {
            position: sticky;
            top: 116px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            width: 100%;
            pointer-events: auto;
            animation: fadeIn 0.65s ease-out 0.3s both;
        }

        .newcomer-guide-float {
            width: 100%;
            padding: 14px 16px 15px;
            border-radius: 24px;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 248, 253, 0.82));
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.6);
            box-shadow: 0 14px 34px rgba(119, 172, 255, 0.22);
            text-align: left;
            cursor: pointer;
            transition: transform 0.25s ease, box-shadow 0.25s ease;
        }

        .newcomer-guide-float:hover {
            transform: translateY(-3px);
            box-shadow: 0 18px 42px rgba(119, 172, 255, 0.28);
        }

        .newcomer-guide-float:focus-visible {
            outline: 3px solid rgba(255, 182, 217, 0.8);
            outline-offset: 3px;
        }

        .newcomer-guide-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 5px 11px;
            border-radius: 999px;
            background: linear-gradient(135deg, #FFD8EB, #CDEBFF);
            color: #7A4A76;
            font-family: 'Fredoka', sans-serif;
            font-size: 11px;
            font-weight: 700;
            margin-bottom: 9px;
        }

        .newcomer-guide-title {
            font-family: 'Fredoka', sans-serif;
            font-size: 20px;
            line-height: 1.2;
            color: var(--text-dark);
            margin-bottom: 6px;
        }

        .newcomer-guide-text {
            font-size: 12px;
            line-height: 1.45;
            color: #666;
            margin-bottom: 8px;
        }

        .newcomer-guide-points {
            list-style: none;
            padding: 0;
            margin: 0 0 10px;
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        .newcomer-guide-points li {
            position: relative;
            padding-left: 16px;
            font-size: 12px;
            line-height: 1.35;
            color: #5F5F73;
        }

        .newcomer-guide-points li::before {
            content: '•';
            position: absolute;
            left: 0;
            top: 0;
            color: #FF79B0;
            font-weight: 700;
        }

        .newcomer-guide-btn {
            width: 100%;
            padding: 9px 14px;
            border: none;
            border-radius: 18px;
            background: linear-gradient(135deg, #FF8DBB, #A67DFF);
            color: white;
            font-family: 'Fredoka', sans-serif;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            box-shadow: 0 8px 20px rgba(166, 125, 255, 0.25);
        }

        .rail-info-card {
            width: 100%;
            padding: 14px 16px 13px;
            border-radius: 22px;
            background: rgba(255, 255, 255, 0.88);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.58);
            box-shadow: 0 12px 30px rgba(119, 172, 255, 0.18);
            pointer-events: auto;
        }

        .rail-info-title {
            display: flex;
            align-items: center;
            gap: 6px;
            margin: 0 0 8px;
            padding-bottom: 8px;
            border-bottom: 2px solid rgba(255, 182, 217, 0.58);
            font-family: 'Fredoka', sans-serif;
            font-size: 17px;
            line-height: 1.1;
            color: var(--text-dark);
        }

        .rail-info-title span {
            color: #777;
            font-size: 16px;
        }

        .rail-info-list {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 0;
            margin: 0;
            padding: 0;
        }

        .rail-info-list li {
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            border-radius: 8px;
            overflow: hidden;
        }

        .rail-info-list li:nth-child(odd) {
            background: rgba(255, 235, 246, 0.46);
        }

        .rail-info-list li:nth-child(even) {
            background: rgba(229, 244, 255, 0.42);
        }

        .rail-info-list li:last-child {
            border-bottom: none;
        }

        .rail-info-list a {
            display: block;
            padding: 5px 8px;
            color: var(--text-dark);
            text-decoration: none;
            font-size: 12px;
            line-height: 1.28;
            font-weight: 700;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .rail-info-list a:hover {
            color: #D84C94;
            background: rgba(255, 255, 255, 0.48);
        }

        /* Login Sidebar Column */
        .login-column {
            display: flex;
            flex-direction: column;
            gap: 10px;
            animation: fadeIn 0.65s ease-out 0.12s both;
            min-height: 737px;
            height: 737px;
        }

        .login-column.logged-in {
            gap: 10px;
        }

        .login-box {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 249, 253, 0.98));
            backdrop-filter: blur(10px);
            border-radius: 25px;
            padding: 22px 20px 18px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            flex: 0 0 auto;
        }

        .login-title {
            font-family: 'Fredoka', sans-serif;
            font-size: 18px;
            font-weight: 700;
            color: var(--text-dark);
            margin-bottom: 12px;
            text-align: center;
        }

        .member-welcome {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            margin-bottom: 8px;
        }

        .member-visual {
            position: relative;
            margin-bottom: 6px;
        }

        .member-avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 25px;
            color: #ff6ea8;
            background: radial-gradient(circle at 30% 30%, #fff6fb, #ffe2f0 60%, #ffd0e6 100%);
            box-shadow: 0 6px 14px rgba(255, 158, 199, 0.2);
            border: 2px solid rgba(255, 255, 255, 0.95);
        }

        .member-badge {
            position: absolute;
            right: -8px;
            bottom: 0;
            padding: 3px 8px;
            border-radius: 999px;
            font-size: 9px;
            font-weight: 700;
            color: #fff;
            background: linear-gradient(135deg, #ff8dbb, #b97cff);
            box-shadow: 0 4px 10px rgba(185, 124, 255, 0.25);
            white-space: nowrap;
        }

        .member-name {
            color: var(--primary-pink);
        }

        .member-subtitle {
            font-size: 11px;
            line-height: 1.45;
            color: var(--text-medium);
            max-width: 180px;
        }

        .member-stats {
            display: grid;
            grid-template-columns: 1fr;
            gap: 6px;
            margin: 0 0 8px;
        }

        .member-stat {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            padding: 7px 11px;
            border-radius: 16px;
            background: rgba(255, 255, 255, 0.9);
            border: 1px solid rgba(217, 182, 255, 0.35);
        }

        .member-stat-label {
            font-size: 12px;
            font-weight: 700;
            color: var(--text-medium);
        }

        .member-stat-value {
            font-size: 12px;
            font-weight: 800;
            color: var(--text-dark);
            text-align: right;
        }

        .input-group {
            margin-bottom: 9px;
        }

        .input-group input {
            width: 100%;
            padding: 11px 14px;
            border: 2px solid rgba(182, 217, 255, 0.3);
            border-radius: 18px;
            font-size: 13px;
            font-family: 'Nunito', sans-serif;
            transition: all 0.3s ease;
            background: white;
        }

        .input-group input:focus {
            outline: none;
            border-color: var(--primary-blue);
            box-shadow: 0 0 0 3px rgba(182, 217, 255, 0.2);
        }

        .remember-me {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 10px;
            font-size: 12px;
            color: var(--text-medium);
        }

        .btn-primary {
            width: 100%;
            padding: 11px;
            background: linear-gradient(135deg, var(--primary-pink), var(--accent-rose));
            color: white;
            border: none;
            border-radius: 18px;
            font-family: 'Fredoka', sans-serif;
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(255, 158, 199, 0.3);
            margin-bottom: 7px;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(255, 158, 199, 0.4);
        }

        .btn-secondary {
            width: 100%;
            padding: 11px;
            background: white;
            color: var(--text-dark);
            border: 2px solid var(--primary-purple);
            border-radius: 18px;
            font-family: 'Fredoka', sans-serif;
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-bottom: 8px;
        }

        .btn-secondary:hover {
            background: linear-gradient(135deg, rgba(217, 182, 255, 0.1), rgba(230, 204, 255, 0.1));
        }

        .link-small {
            text-align: center;
            margin-bottom: 8px;
        }

        .link-small a {
            color: var(--text-medium);
            font-size: 12px;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .link-small a:hover {
            color: var(--primary-purple);
        }

        .social-login {
            display: flex;
            flex-direction: column;
            gap: 6px;
            padding-top: 10px;
            border-top: 1px solid rgba(0, 0, 0, 0.05);
        }

        .social-btn {
            padding: 8px;
            border: none;
            border-radius: 18px;
            font-family: 'Fredoka', sans-serif;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .social-btn.naver {
            background: #03C75A;
            color: white;
        }

        .social-btn.facebook {
            background: #1877F2;
            color: white;
        }

        .social-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }

        /* Usage Guide Box */
        .usage-box {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 249, 253, 0.98));
            backdrop-filter: blur(10px);
            border-radius: 25px;
            padding: 10px 12px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            text-align: center;
            flex: 0 0 auto;
        }

        .usage-box h3 {
            font-family: 'Fredoka', sans-serif;
            font-size: 15px;
            font-weight: 700;
            color: var(--text-dark);
            margin-bottom: 10px;
        }

        .usage-box p {
            font-size: 11px;
            color: var(--text-medium);
            line-height: 1.4;
            margin-bottom: 4px;
        }

        .login-box.logged-in {
            padding: 24px 20px 22px;
        }

        .login-box.logged-in .login-title {
            margin-bottom: 12px;
            font-size: 16px;
        }

        .login-box.logged-in .member-welcome {
            margin-bottom: 12px;
        }

        .login-box.logged-in .member-visual {
            margin-bottom: 8px;
        }

        .login-box.logged-in .member-avatar {
            width: 64px;
            height: 64px;
            font-size: 27px;
        }

        .login-box.logged-in .member-subtitle {
            font-size: 12px;
            line-height: 1.6;
        }

        .login-box.logged-in .member-stats {
            margin-bottom: 10px;
            gap: 6px;
        }

        .login-box.logged-in .member-stat {
            padding: 8px 11px;
        }

        .login-box.logged-in .member-stat-label,
        .login-box.logged-in .member-stat-value {
            font-size: 13px;
        }

        .premium-cta-row {
            border-top: 1px solid rgba(0, 0, 0, 0.1);
            margin: 4px 0 8px;
            padding-top: 5px;
        }

        .btn-premium {
            width: 100%;
            padding: 10px;
            background: linear-gradient(135deg, var(--badge-gold), #E8B938);
            color: white;
            border: none;
            border-radius: 18px;
            font-family: 'Fredoka', sans-serif;
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            margin: 6px 0 4px;
            box-shadow: 0 4px 15px rgba(242, 201, 76, 0.3);
            transition: all 0.3s ease;
        }

        .btn-premium:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(242, 201, 76, 0.38);
        }

        .btn-detail {
            padding: 8px 20px;
            background: linear-gradient(135deg, var(--primary-blue), var(--badge-blue));
            color: white;
            border: none;
            border-radius: 18px;
            font-family: 'Fredoka', sans-serif;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .btn-detail:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(86, 204, 242, 0.3);
        }

        /* Modal */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 2000;
            align-items: center;
            justify-content: center;
        }

        .modal.active {
            display: flex;
        }

        .modal-content {
            background: white;
            border-radius: 30px;
            padding: 0;
            max-width: 600px;
            width: 90%;
            max-height: 80vh;
            overflow: hidden;
            box-shadow: var(--shadow-strong);
            position: relative;
            animation: modalIn 0.3s ease-out;
            display: flex;
            flex-direction: column;
        }

        .modal-scroll {
            max-height: 80vh;
            overflow-y: auto;
            padding: 38px 18px 34px 40px;
            scrollbar-gutter: stable;
            overscroll-behavior: contain;
            scrollbar-width: thin;
            scrollbar-color: rgba(233, 165, 213, 0.72) rgba(214, 232, 255, 0.16);
        }

        .modal-scroll::-webkit-scrollbar {
            width: 10px;
        }

        .modal-scroll::-webkit-scrollbar-track {
            background: rgba(214, 232, 255, 0.16);
            border-radius: 999px;
            margin: 18px 0 20px;
        }

        .modal-scroll::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, rgba(255, 187, 221, 0.88), rgba(213, 175, 255, 0.82));
            border-radius: 999px;
            border: 2px solid rgba(255, 255, 255, 0.98);
            background-clip: padding-box;
        }

        .modal-scroll::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(180deg, rgba(255, 173, 211, 0.96), rgba(197, 160, 248, 0.9));
        }

        .modal-scroll::-webkit-scrollbar-corner {
            background: transparent;
        }

        @keyframes modalIn {
            from {
                opacity: 0;
                transform: scale(0.9);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        .modal-close {
            position: absolute;
            top: 18px;
            right: 22px;
            width: 35px;
            height: 35px;
            border-radius: 50%;
            background: var(--primary-pink);
            color: white;
            border: none;
            font-size: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .modal-close:hover {
            background: var(--accent-rose);
            transform: rotate(90deg);
        }

        .modal-content h3 {
            font-family: 'Fredoka', sans-serif;
            font-size: 24px;
            margin-bottom: 25px;
            color: var(--text-dark);
        }

        .modal-content h4 {
            font-family: 'Fredoka', sans-serif;
            font-size: 18px;
            margin: 20px 0 12px;
            color: var(--text-dark);
        }

        .modal-content ul {
            list-style: none;
            padding-left: 0;
        }

        .modal-content li {
            padding: 8px 0 8px 25px;
            position: relative;
            color: var(--text-medium);
            font-size: 14px;
        }

        .modal-content li::before {
            content: '✓';
            position: absolute;
            left: 0;
            color: var(--badge-green);
            font-weight: 700;
        }

        .modal-content li.prohibited::before {
            content: '✗';
            color: #EB5757;
        }

        .welcome-modal-content {
            max-width: 640px;
        }

        .notice-modal-content {
            max-width: 680px;
            width: min(680px, calc(100% - 32px));
            height: min(720px, calc(100vh - 56px));
            padding: 28px 28px 22px;
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        .notice-modal-head {
            padding-right: 42px;
        }

        .notice-modal-badge {
            display: inline-flex;
            align-items: center;
            padding: 6px 12px;
            border-radius: 999px;
            background: linear-gradient(135deg, rgba(255, 182, 217, 0.42), rgba(182, 217, 255, 0.38));
            color: #8f4a88;
            font-size: 12px;
            font-weight: 800;
            margin-bottom: 8px;
        }

        .notice-modal-head h3 {
            margin: 0;
        }

        .notice-modal-frame {
            flex: 1 1 auto;
            width: 100%;
            min-height: 0;
            border: 1px solid rgba(255, 182, 217, 0.32);
            border-radius: 18px;
            background: #fff;
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75);
        }

        .welcome-intro {
            margin-bottom: 22px;
            padding: 18px 20px;
            border-radius: 18px;
            background: linear-gradient(135deg, rgba(255, 230, 242, 0.55), rgba(217, 239, 255, 0.48));
            font-size: 14px;
            color: var(--text-medium);
            line-height: 1.7;
        }

        .welcome-steps {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            margin: 16px 0 24px;
        }

        .welcome-step {
            padding: 16px 16px 14px;
            border-radius: 18px;
            background: linear-gradient(135deg, #fff, #fff7fb);
            border: 1px solid rgba(255, 182, 217, 0.25);
            box-shadow: 0 6px 18px rgba(217, 182, 255, 0.12);
        }

        .welcome-step-no {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: linear-gradient(135deg, #FF8DBB, #B97CFF);
            color: white;
            font-family: 'Fredoka', sans-serif;
            font-size: 13px;
            font-weight: 700;
            margin-bottom: 10px;
        }

        .welcome-step h4 {
            margin: 0 0 7px;
            font-size: 16px;
        }

        .welcome-step p {
            font-size: 13px;
            line-height: 1.6;
            color: var(--text-medium);
        }

        .welcome-tip-box {
            margin-top: 24px;
            padding: 18px 20px;
            border-radius: 18px;
            background: rgba(182, 217, 255, 0.14);
            font-size: 13px;
            line-height: 1.7;
            color: var(--text-medium);
        }

        /* Today's Fashion (Center) */
        .fashion-center {
            display: flex;
            flex-direction: column;
            animation: fadeIn 0.65s ease-out 0.18s both;
            position: relative;
        }

        .today-fashion {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 249, 253, 0.98));
            backdrop-filter: blur(10px);
            border-radius: 30px;
            padding: 0;
            box-shadow: 0 10px 34px rgba(122, 94, 200, 0.18), 0 0 0 1px rgba(255, 182, 217, 0.28);
            border: 7px solid rgba(255, 255, 255, 0.96);
            text-align: center;
            position: relative;
            background-clip: padding-box;
            overflow: hidden;
            min-height: 689px;
            height: 689px;
        }

        /* Today card uses a soft white frame so the vivid stage artwork stays the focus. */

        .today-label {
            font-family: 'Fredoka', sans-serif;
            font-size: 20px;
            font-weight: 700;
            margin: 0;
            padding: 12px 0 12px 22px;
            color: #f4b5ef;
            position: absolute;
            top: 0;
            left: 0;
            right: auto;
            z-index: 10;
            text-align: left;
            text-shadow:
                -1px 0 0 rgba(255, 255, 255, 0.95),
                1px 0 0 rgba(255, 255, 255, 0.95),
                0 -1px 0 rgba(255, 255, 255, 0.95),
                0 1px 0 rgba(255, 255, 255, 0.95),
                -1px -1px 0 rgba(255, 255, 255, 0.9),
                1px -1px 0 rgba(255, 255, 255, 0.9),
                -1px 1px 0 rgba(255, 255, 255, 0.9),
                1px 1px 0 rgba(255, 255, 255, 0.9),
                0 2px 4px rgba(0, 0, 0, 0.18);
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
        }

        .today-image {
            width: 100%;
            height: 100%;
            border-radius: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            cursor: pointer;
            position: relative;
        }

        /* 슬라이드 모델 이미지 */
        .model-slide {
            position: absolute;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
        }

        .model-slide.slide-enter {
            transform: translateX(100%);
            opacity: 0;
        }

        .model-slide.slide-active {
            transform: translateX(0);
            opacity: 1;
        }

        .model-slide.slide-exit {
            transform: translateX(-100%);
            opacity: 0;
        }

        .model-slide .model-img {
            max-width: none;
            height: 88%;
            object-fit: contain;
        }

        .model-slide .note-img {
            position: absolute;
            bottom: 12%;
            left: 50%;
            transform: translateX(-50%) scale(0.7);
            max-width: 52%;
            height: auto;
            z-index: 10;
        }

        .today-title {
            font-family: 'Fredoka', sans-serif;
            font-size: 20px;
            font-weight: 700;
            color: #7B2D9E;
            margin: 0;
            padding: 0 15px;
            position: absolute;
            bottom: 2px;
            left: 0;
            right: 0;
            z-index: 20;
            text-shadow:
                -2px 0 0 #fff,
                2px 0 0 #fff,
                0 -2px 0 #fff,
                0 2px 0 #fff,
                -2px -2px 0 #fff,
                2px -2px 0 #fff,
                -2px 2px 0 #fff,
                2px 2px 0 #fff,
                0 0 8px rgba(255, 255, 255, 0.92);
        }

        .today-date {
            display: none;
        }

        .fashion-buttons {
            display: flex;
            justify-content: space-between;
            position: absolute;
            bottom: 12px;
            left: 12px;
            right: 12px;
            z-index: 20;
            flex-wrap: wrap;
        }

        .fashion-btn {
            display: inline-block;
            padding: 10px 24px;
            background: linear-gradient(135deg, var(--primary-pink), var(--accent-rose));
            color: white;
            text-decoration: none;
            border-radius: 20px;
            font-family: 'Fredoka', sans-serif;
            font-weight: 600;
            font-size: 13px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(255, 158, 199, 0.3);
            border: none;
            cursor: pointer;
        }

        .fashion-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(255, 158, 199, 0.4);
        }

        .fashion-btn.helper {
            background: linear-gradient(135deg, var(--accent-mint), #89E0B8);
        }

        .fashion-btn.helper:hover {
            box-shadow: 0 6px 20px rgba(182, 255, 217, 0.4);
        }

        .fashion-btn.run-fashion {
            background: linear-gradient(135deg, #FF6B9D, #FF4081);
        }

        .fashion-btn.run-fashion:hover {
            box-shadow: 0 6px 20px rgba(255, 64, 129, 0.4);
        }

        .fashion-nav {
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            transform: translateY(-50%);
            display: flex;
            justify-content: space-between;
            padding: 0 10px;
            pointer-events: none;
        }

        .nav-arrow {
            width: 50px;
            height: 50px;
            border-radius: 0;
            background: transparent;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 40px;
            color: var(--primary-pink);
            pointer-events: auto;
            text-shadow:
                -1px -1px 2px #fff,
                1px -1px 2px #fff,
                -1px 1px 2px #fff,
                1px 1px 2px #fff,
                0 0 8px rgba(255, 255, 255, 0.9);
        }

        .nav-arrow:hover {
            color: var(--accent-rose);
            transform: scale(1.2);
        }

        /* Side Fashion Column (Right Sidebar) - Flex Spacer Pattern */
        .fashion-column {
            display: flex;
            flex-direction: column;
            gap: 10px;
            animation: fadeIn 0.65s ease-out 0.24s both;
            min-height: 689px;
            height: 689px;
        }

        .spacer {
            display: none; /* Disabled for uniform 10px gaps */
        }

        .side-fashion {
            background: rgba(255, 255, 255, 0.98);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 9px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            flex: 1 1 0;
            text-align: center;
            display: flex;
            flex-direction: column;
            cursor: pointer;
        }

        .side-fashion:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
        }

        .side-fashion:focus-visible {
            outline: 3px solid rgba(255, 255, 255, 0.95);
            outline-offset: 2px;
        }

        .side-label {
            font-family: 'Fredoka', sans-serif;
            font-size: 10px;
            font-weight: 600;
            color: var(--text-medium);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 2px;
        }

        .side-image {
            width: 100%;
            height: 194px;
            background: linear-gradient(135deg, #F5F5F5, #FAFAFA);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 2px;
            font-size: 20px;
            overflow: hidden;
            flex: 1 1 auto;
            position: relative;
        }

        .side-fashion.yesterday .side-image {
            background-image: url('/img/side/side-fashion-bg.jpg?v=20260703b');
        }

        .side-fashion.tomorrow .side-image {
            background-image: url('/img/side/side-fashion-bg-mint.jpg?v=20260703b');
        }

        .side-image img {
            max-width: 98%;
            max-height: 92%;
            object-fit: contain;
            position: relative;
            z-index: 1;
        }

        .side-fashion.preparing {
            cursor: default;
        }

        .side-fashion.preparing .side-image img {
            opacity: 0.82;
            filter: saturate(0.9);
        }

        .preparing-bubble {
            position: absolute;
            left: 55%;
            top: 45%;
            transform: translate(-50%, -50%);
            z-index: 3;
            min-width: 104px;
            padding: 14px 16px 15px;
            border-radius: 48% 52% 46% 54% / 55% 50% 50% 45%;
            background: rgba(255, 255, 255, 0.78);
            border: 4px solid rgba(255, 151, 181, 0.58);
            box-shadow: 0 8px 20px rgba(255, 151, 181, 0.18), inset 0 0 0 2px rgba(255, 255, 255, 0.42);
            color: #7d5777;
            font-family: 'Fredoka', 'Nunito', sans-serif;
            font-size: 15px;
            font-weight: 800;
            line-height: 1.25;
            text-align: center;
            letter-spacing: -0.2px;
            text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
            pointer-events: none;
        }

        .preparing-text {
            position: relative;
            z-index: 2;
            display: block;
        }

        .thought-dot {
            position: absolute;
            border-radius: 50%;
            box-sizing: border-box;
            pointer-events: none;
        }

        .thought-dot-large {
            left: 40%;
            top: -16px;
            width: 22px;
            height: 22px;
            background: rgba(255, 255, 255, 0.74);
            border: 3px solid rgba(255, 151, 181, 0.52);
            box-shadow: 0 5px 12px rgba(255, 151, 181, 0.12);
            transform: translateX(-50%);
            z-index: 1;
        }

        .thought-dot-large::after {
            content: '';
            position: absolute;
            left: 2px;
            right: 2px;
            bottom: -4px;
            height: 9px;
            background: rgba(255, 255, 255, 0.78);
            border-radius: 0 0 12px 12px;
        }

        .thought-dot-small {
            left: 32%;
            top: -30px;
            width: 12px;
            height: 12px;
            background: rgba(255, 255, 255, 0.68);
            border: 3px solid rgba(255, 151, 181, 0.46);
            box-shadow: 0 4px 10px rgba(255, 151, 181, 0.1);
            transform: translateX(-50%);
            z-index: 2;
        }

        .side-fashion.yesterday .side-image::before,
        .side-fashion.tomorrow .side-image::before {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 0;
            pointer-events: none;
        }

        .side-fashion.yesterday .side-image::before {
            background:
                radial-gradient(circle at 22% 18%, rgba(255, 214, 230, 0.55), transparent 20%),
                radial-gradient(circle at 82% 78%, rgba(255, 244, 201, 0.45), transparent 24%),
                linear-gradient(180deg, rgba(255, 236, 244, 0.16), rgba(255, 255, 255, 0.02));
        }

        .side-fashion.tomorrow .side-image::before {
            background:
                radial-gradient(circle at 20% 78%, rgba(217, 239, 255, 0.48), transparent 22%),
                radial-gradient(circle at 82% 18%, rgba(223, 250, 233, 0.42), transparent 22%),
                linear-gradient(180deg, rgba(236, 247, 255, 0.14), rgba(255, 255, 255, 0.02));
        }

        .side-title {
            font-family: 'Fredoka', sans-serif;
            font-size: 12px;
            font-weight: 700;
            color: var(--text-dark);
            margin-top: 1px;
            margin-bottom: 0;
        }

        .side-date {
            font-size: 10px;
            color: var(--text-medium);
            margin-bottom: 1px;
        }

        .side-btn {
            display: inline-block;
            padding: 5px 12px;
            background: linear-gradient(135deg, var(--primary-blue), var(--badge-blue));
            color: white;
            text-decoration: none;
            border-radius: 15px;
            font-family: 'Fredoka', sans-serif;
            font-weight: 600;
            font-size: 9px;
            transition: all 0.3s ease;
        }

        .side-btn:hover {
            transform: translateY(-2px);
        }

        /* Preview Section (맛보기) */
        .preview-section {
            grid-column: 1 / -1;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 25px;
            padding: 20px 26px 18px;
            margin: -52px 0 0 0;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            animation: fadeIn 0.7s ease-out 0.38s both;
        }

        .section-title {
            font-family: 'Fredoka', sans-serif;
            font-size: 22px;
            font-weight: 700;
            color: var(--text-dark);
            margin-bottom: 14px;
            padding-bottom: 10px;
            border-bottom: 3px solid transparent;
            border-image: linear-gradient(90deg, var(--primary-pink), transparent) 1;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .section-title .section-desc {
            flex: 1 1 auto;
            min-width: 0;
            font-family: 'Nunito', sans-serif;
            font-size: 12px;
            font-weight: 600;
            color: rgba(122, 122, 145, 0.88);
            letter-spacing: 0.1px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            transform: translateY(1px);
        }

        .preview-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
        }

        .preview-card {
            background: white;
            border-radius: 18px;
            padding: 14px 18px 13px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
            position: relative;
            border: 2px solid transparent;
        }

        .preview-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
            border-color: var(--accent-mint);
        }

        .access-badge {
            display: inline-block;
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 10px;
            font-weight: 600;
            margin-bottom: 0;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            border: 1.5px solid;
            flex-shrink: 0;
        }

        .badge-free {
            background: rgba(111, 207, 151, 0.12);
            color: #2D8F5A;
            border-color: rgba(111, 207, 151, 0.3);
        }

        .badge-member {
            background: rgba(86, 204, 242, 0.12);
            color: #2B7FA8;
            border-color: rgba(86, 204, 242, 0.3);
        }

        .badge-premium {
            background: rgba(242, 201, 76, 0.12);
            color: #B8920C;
            border-color: rgba(242, 201, 76, 0.3);
        }

        .badge-dictionary {
            background: rgba(255, 182, 217, 0.16);
            color: #B64B8B;
            border-color: rgba(255, 182, 217, 0.35);
        }

        .preview-thumb {
            width: 100%;
            height: 140px;
            background: linear-gradient(135deg, #F8F8F8, #FAFAFA);
            border-radius: 15px;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 40px;
            overflow: hidden;
        }

        .preview-thumb img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .preview-title-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 4px;
        }

        .preview-title {
            font-family: 'Fredoka', sans-serif;
            font-size: 16px;
            font-weight: 700;
            color: var(--text-dark);
            margin-bottom: 0;
            line-height: 1.2;
        }

        .preview-desc {
            font-size: 13px;
            color: var(--text-medium);
            line-height: 1.3;
            margin-bottom: 6px;
        }

        .preview-date {
            font-size: 12px;
            color: var(--text-light);
        }

        /* Update Corner Section */
        .update-section {
            grid-column: 1 / -1;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 25px;
            padding: 24px 26px 22px;
            margin: 4px 0 0 0;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            animation: fadeIn 0.7s ease-out 0.48s both;
        }

        .update-section .preview-grid {
            grid-template-columns: repeat(4, 1fr);
            gap: 8px;
        }

        .update-section .preview-card {
            padding: 14px 14px 12px;
        }

        .update-section .preview-thumb {
            height: 112px;
            margin-bottom: 9px;
        }

        .update-section .preview-title {
            font-size: 15px;
        }

        .update-section .preview-desc {
            font-size: 12px;
            line-height: 1.25;
            margin-bottom: 5px;
        }

        .update-section .preview-date {
            font-size: 11px;
        }

        /* Content Grid */
        .content-grid {
            grid-column: 1 / -1;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            margin: 6px 0 0 0;
        }

        .content-section {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 25px;
            padding: 24px 24px 22px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            animation: fadeIn 0.7s ease-out 0.58s both;
        }

        .info-list {
            list-style: none;
        }

        .info-item {
            padding: 8px 0;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
        }

        .info-item:last-child {
            border-bottom: none;
        }

        .info-item:hover {
            padding-left: 10px;
            background: linear-gradient(90deg, rgba(255, 182, 217, 0.1), transparent);
        }

        .info-item a {
            color: var(--text-dark);
            text-decoration: none;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            line-height: 1.2;
        }

        .info-item .title {
            flex: 1;
            font-weight: 600;
            line-height: 1.2;
        }

        .info-item .date {
            font-size: 12px;
            color: var(--text-light);
            white-space: nowrap;
        }

        .info-item .source {
            font-size: 11px;
            color: var(--text-medium);
            background: rgba(182, 217, 255, 0.2);
            padding: 3px 8px;
            border-radius: 8px;
        }

        .content-grid .content-section:nth-child(2) .info-item a {
            display: block;
        }

        .content-grid .content-section:nth-child(2) .info-item .title {
            display: block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Footer */
        footer {
            background: linear-gradient(180deg, #74698d 0%, #655b7d 48%, #574f6e 100%);
            color: #F7F2FB;
            padding: 24px 0 20px;
            margin-top: 8px;
            position: relative;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
        }

        footer::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--primary-pink), var(--primary-blue), var(--primary-purple));
        }

        .footer-menu-top {
            text-align: center;
            padding: 10px 0 12px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.16);
            margin-bottom: 16px;
        }

        .footer-menu-top a {
            color: #FFF7FF;
            text-decoration: none;
            font-size: 13px;
            transition: color 0.3s ease;
            padding: 0 10px;
            border-right: 1px solid rgba(255, 255, 255, 0.24);
        }

        .footer-menu-top a:last-child {
            border-right: none;
        }

        .footer-menu-top a:hover {
            color: var(--primary-pink);
        }

        .footer-info {
            text-align: center;
            font-size: 13px;
            line-height: 1.75;
            color: rgba(250, 246, 255, 0.92);
        }

        .footer-info p {
            margin-bottom: 7px;
        }

        .footer-info a {
            color: #FFE8F7;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .footer-info a:hover {
            color: var(--primary-pink);
        }

        .footer-bottom {
            text-align: center;
            padding-top: 14px;
            margin-top: 14px;
            border-top: 1px solid rgba(255, 255, 255, 0.16);
            font-size: 13px;
            color: rgba(242, 236, 250, 0.82);
        }

        /* Responsive Design */
        @media (max-width: 1200px) {
            .main-layout {
                grid-template-columns: 250px 1fr 250px;
                gap: 20px;
            }

            .newcomer-guide-rail {
                display: none;
            }
        }

        @media (max-width: 1499px) {
            .newcomer-guide-rail {
                display: none;
            }
        }

        @media (max-width: 1024px) {
            .main-layout {
                grid-template-columns: 1fr;
                align-items: start;
            }

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

            .header-marquee {
                width: 100%;
            }

            nav {
                width: 100%;
                align-self: auto;
            }

            .fashion-column {
                flex-direction: row;
            }

            .content-grid, .preview-grid {
                grid-template-columns: 1fr;
            }

            .welcome-steps {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 768px) {
            /* Container 100% 폭 */
            .container {
                max-width: 100%;
                padding: 0 10px;
            }

            /* 헤더 - sticky 제거 */
            header {
                position: relative;
            }

            .header-content {
                flex-direction: column;
                text-align: center;
                padding: 9px 0 10px;
                gap: 8px;
                align-items: center;
            }

            .logo-container {
                width: 148px;
                height: 48px;
            }

            .header-nav {
                width: 100%;
                align-items: stretch;
                padding-top: 0;
                gap: 0;
            }

            .main-menu {
                display: grid;
                grid-template-columns: repeat(6, minmax(0, 1fr));
                justify-content: stretch;
                align-items: start;
                flex-wrap: nowrap;
                gap: 0;
                width: 100%;
            }

            .main-menu li a {
                padding: 4px 0;
                font-size: 10.5px;
                line-height: 1.15;
                border-radius: 12px;
            }

            .main-menu li a .menu-eng {
                font-size: 6.5px;
                letter-spacing: -0.2px;
            }

            .header-marquee {
                display: none;
            }

            /* 메인 레이아웃: 오늘의 빠숑만 표시 */
            .main-layout {
                grid-template-columns: minmax(0, 1fr);
                gap: 10px;
                margin: 8px 0 10px;
                width: 100%;
            }

            /* 로그인 컬럼 숨기기 */
            .login-column {
                display: none;
            }

            /* 어제/내일 빠숑 숨기기 */
            .fashion-column {
                display: none;
            }

            .fashion-center {
                width: 100%;
                min-width: 0;
                max-width: 100%;
                justify-self: stretch;
                position: relative;
                z-index: 2;
            }

            /* 오늘의 빠숑 */
            .today-fashion {
                border-radius: 20px;
                width: 100%;
                max-width: 100%;
                min-height: 0;
                height: clamp(535px, 150vw, 640px);
                border-width: 5px;
            }

            .today-image {
                width: 100%;
                max-width: none;
                height: 100%;
                margin: 0;
                border-radius: 18px;
            }

            .today-label {
                font-size: 17px;
                padding: 9px 0 8px 13px;
            }

            .model-slide .model-img {
                height: 86%;
            }

            .model-slide .note-img {
                bottom: 13%;
                max-width: 46%;
                transform: translateX(-50%) scale(0.66);
            }

            .today-title {
                font-size: 18px;
                bottom: 3px;
            }

            .fashion-buttons {
                left: 10px;
                right: 10px;
                bottom: 10px;
            }

            .fashion-btn {
                padding: 9px 18px;
                font-size: 12px;
            }

            .fashion-nav {
                width: calc(100% - 22px);
                max-width: none;
                left: 11px;
                right: 11px;
                top: 50%;
                transform: translateY(-50%);
            }

            .nav-arrow {
                width: 34px;
                height: 44px;
            }

            /* 하단 섹션들 */
            .preview-section,
            .update-section,
            .content-section {
                padding: 20px;
                border-radius: 20px;
            }

            .preview-section {
                position: relative;
                z-index: 1;
                margin: 18px 0 0;
            }

            .update-section {
                margin-top: 10px;
            }

            .update-section .preview-grid {
                grid-template-columns: 1fr;
                gap: 14px;
            }

            .update-section .preview-card {
                padding: 16px;
            }

            .update-section .preview-thumb {
                height: 160px;
            }

            .section-title {
                flex-wrap: wrap;
                align-items: flex-start;
            }

            .section-title .section-desc {
                flex-basis: 100%;
                white-space: normal;
                font-size: 11px;
                margin-top: -4px;
            }

            .notice-modal-content {
                width: calc(100% - 22px);
                height: calc(100vh - 38px);
                padding: 22px 14px 14px;
                border-radius: 22px;
            }

            .notice-modal-head {
                padding-right: 36px;
            }

            .preview-grid {
                grid-template-columns: 1fr;
                gap: 15px;
            }

            .content-grid {
                grid-template-columns: 1fr;
                gap: 10px;
            }

            /* 푸터 */
            footer {
                padding: 30px 0 20px;
            }

            .footer-menu-top {
                padding: 15px 0;
            }

            .footer-menu-top a {
                font-size: 12px;
                padding: 0 8px;
            }

            .footer-info {
                font-size: 12px;
            }
        }