:root {
            --cream: #FBF7F1;
            --card: #FFFFFF;
            --ink: #17140F;
            --ink-soft: #4A463E;
            --line: #E7E1D6;
            --line-soft: #F0EBE0;
            --clay: #E0733C;
            --danger: #C6412B;
            --danger-soft: #FBE9E6;
        }
        * { box-sizing: border-box; }
        html, body { height: 100%; }
        body {
            margin: 0;
            font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
            background: var(--cream);
            background-image:
                radial-gradient(circle at 12% 8%, rgba(224,115,60,0.07), transparent 40%),
                radial-gradient(circle at 88% 92%, rgba(224,115,60,0.06), transparent 42%);
            color: var(--ink);
            display: flex;
            align-items: flex-start;
            justify-content: center;
            padding: 56px 20px 64px;
            padding-top: calc(56px + env(safe-area-inset-top, 0px));
            padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
            -webkit-font-smoothing: antialiased;
        }
        .stage { width: 100%; max-width: 400px; }

        .brand { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 28px; }
        .brand-mark svg { width: 34px; height: 34px; display: block; }
        .brand-name { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }

        .tabbar {
            display: flex;
            background: var(--line-soft);
            border: 1px solid var(--line);
            border-radius: 999px;
            padding: 4px;
            margin-bottom: 20px;
        }
        .tabbar a {
            flex: 1;
            text-align: center;
            padding: 10px 8px;
            font-size: 13.5px;
            font-weight: 600;
            color: #9C9585;
            border-radius: 999px;
            text-decoration: none;
            transition: background 0.2s ease, color 0.2s ease;
        }
        .tabbar a.active { background: var(--ink); color: #fff; }
        .tabbar a:not(.active):hover { color: var(--ink-soft); }

        .card {
            background: var(--card);
            border: 1px solid var(--line);
            border-radius: 20px;
            padding: 34px 30px 28px;
            box-shadow: 0 1px 2px rgba(23,20,15,0.04), 0 16px 40px -20px rgba(23,20,15,0.18);
        }
        .panel-head { text-align: center; margin-bottom: 26px; }
        .panel-head h1 { font-size: 21px; font-weight: 700; margin: 0 0 6px; letter-spacing: -0.01em; }
        .panel-head p { font-size: 13px; color: var(--ink-soft); margin: 0; line-height: 1.5; }

        .global-msg {
            display: flex; gap: 8px; align-items: flex-start;
            background: var(--danger-soft); color: var(--danger);
            padding: 11px 13px; border-radius: 10px; font-size: 12.5px;
            margin-bottom: 18px; line-height: 1.5;
        }

        .field { margin-bottom: 16px; }
        .field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); margin-bottom: 7px; }
        .field input[type="email"],
        .field input[type="password"] {
            width: 100%;
            padding: 12px 14px;
            border: 1px solid var(--line);
            border-radius: 10px;
            font-size: 14.5px;
            font-family: inherit;
            background: #fff;
            color: var(--ink);
            transition: border-color 0.15s ease, box-shadow 0.15s ease;
        }
        .field input::placeholder { color: #BFB8A8; }
        .field input:focus {
            outline: none;
            border-color: var(--ink);
            box-shadow: 0 0 0 3px rgba(23,20,15,0.06);
        }

        .toggle-eye { position: relative; }
        .toggle-eye input { padding-right: 52px !important; }
        .toggle-eye .eye-btn {
            position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
            background: none; border: none; cursor: pointer; padding: 4px;
            color: #B4AC9C; font-size: 12px; font-weight: 600; font-family: inherit;
        }
        .toggle-eye .eye-btn:hover { color: var(--ink-soft); }

        .remember { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); cursor: pointer; user-select: none; }
        .remember input { width: 16px; height: 16px; margin: 0; accent-color: var(--ink); cursor: pointer; }

        .btn-row { margin-top: 22px; }
        .btn {
            width: 100%;
            padding: 13px;
            border-radius: 10px;
            font-size: 14.5px;
            font-weight: 700;
            border: none;
            cursor: pointer;
            font-family: inherit;
            transition: opacity 0.15s ease, transform 0.05s ease;
        }
        .btn:active { transform: scale(0.98); }
        .btn-primary { background: var(--ink); color: #fff; }
        .btn-primary:hover { opacity: 0.88; }

        .divider { display: flex; align-items: center; gap: 12px; margin: 22px 0 4px; }
        .divider .line { flex: 1; height: 1px; background: var(--line); }
        .divider span { font-size: 11px; color: #B4AC9C; white-space: nowrap; }

        .social-stack { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
        .social-btn {
            width: 100%;
            display: flex; align-items: center; justify-content: center; gap: 9px;
            padding: 12px; border-radius: 10px; font-size: 14px; font-weight: 600;
            font-family: inherit; cursor: pointer; border: 1px solid transparent;
            text-decoration: none;
            transition: filter 0.15s ease, transform 0.05s ease;
        }
        .social-btn:active { transform: scale(0.98); }
        .social-btn:hover { filter: brightness(0.97); }
        .social-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
        .social-kakao { background: #FEE500; color: #191600; }
        .social-naver { background: #03C75A; color: #fff; }
        .social-google { background: #fff; color: #1F1B14; border-color: var(--line); }

        .switch-line { text-align: center; margin-top: 18px; font-size: 13px; color: var(--ink-soft); }
        .switch-line a { color: var(--clay); font-weight: 600; text-decoration: none; }
        .switch-line a:hover { text-decoration: underline; }

        @media (max-width: 420px) {
            .card { padding: 28px 20px 24px; border-radius: 16px; }
        }


        /* ===== 입력창 커스텀 (모바일 우선, 가입 화면과 동일) ===== */
        .field { margin-bottom: 18px; }
        .field > label { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 8px; letter-spacing: -0.01em; }

        .field input[type="text"],
        .field input[type="email"],
        .field input[type="password"] {
            -webkit-appearance: none; appearance: none;
            display: block; width: 100%; min-height: 54px;
            padding: 0 16px;
            font-size: 16px;            /* 16px 미만이면 iOS에서 입력 시 화면이 확대됨 */
            font-weight: 500; letter-spacing: -0.01em;
            color: var(--ink);
            background: #F8F4EC;
            border: 1.5px solid transparent;
            border-radius: 14px;
            transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
            -webkit-tap-highlight-color: transparent;
        }
        .field input::placeholder { color: #B3AB99; font-weight: 400; }
        .field input:hover { background: #F4EFE5; }
        .field input:focus {
            outline: none; background: #fff;
            border-color: var(--clay);
            box-shadow: 0 0 0 4px rgba(224,115,60,0.14);
        }
        /* 브라우저 자동완성 노란/파란 배경 제거 */
        .field input:-webkit-autofill,
        .field input:-webkit-autofill:focus {
            -webkit-text-fill-color: var(--ink);
            -webkit-box-shadow: 0 0 0 100px #F8F4EC inset;
            transition: background-color 9999s ease-out 0s;
        }

        .toggle-eye input { padding-right: 64px !important; }
        .toggle-eye .eye-btn {
            right: 8px; padding: 8px 10px; border-radius: 10px;
            font-size: 12.5px; font-weight: 700; color: #8A8272;
        }
        .toggle-eye .eye-btn:active { background: rgba(23,20,15,0.06); }

        /* 자동 로그인 체크박스 */
        .remember { gap: 10px; padding: 4px 0; font-size: 14px; -webkit-tap-highlight-color: transparent; }
        .remember input[type="checkbox"] {
            -webkit-appearance: none; appearance: none; flex: 0 0 22px;
            width: 22px; height: 22px; margin: 0; border-radius: 7px;
            border: 1.5px solid #CFC7B6; background: #fff; cursor: pointer;
            transition: background 0.15s ease, border-color 0.15s ease;
        }
        .remember input[type="checkbox"]:checked {
            background-color: var(--clay); border-color: var(--clay);
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5l3 3 6-7' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
            background-position: center; background-repeat: no-repeat; background-size: 16px;
        }
        .remember input[type="checkbox"]:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(224,115,60,0.2); }

        /* 버튼 */
        .btn { min-height: 54px; border-radius: 14px; font-size: 16px; -webkit-tap-highlight-color: transparent; }
        .btn-primary { background: var(--clay); box-shadow: 0 8px 18px -8px rgba(224,115,60,0.6); }
        .social-btn { min-height: 52px; border-radius: 14px; font-size: 15px; -webkit-tap-highlight-color: transparent; }

        @media (max-width: 420px) {
            .card { padding: 26px 18px 22px; }
        }