/* ==========================================================================
   일본탐험 — Auth (login / register) standalone stylesheet
   - Email-based account flow + Yoasobi nationality selector
   - Mobile-first; scales up at >= 640px.
   ========================================================================== */

:root {
    --o-bg: #f8fafc;
    --o-card: #ffffff;
    --o-border: #33435e;
    --o-border-soft: #b8c0cf;
    --o-divider: #dfe3ec;
    --o-text: #1e293b;
    --o-text-sub: #64748b;
    --o-text-muted: #94a3b8;
    --o-primary: #33435e;
    --o-primary-hover: #253245;
    --o-primary-soft: #eef2f9;
    --o-accent: #0ea5a4;
    --o-accent-hover: #0d9488;
    --o-danger: #dc2626;
    --o-danger-soft: #fef2f2;
    --o-success: #059669;
    --o-success-soft: #ecfdf5;
    --o-radius-sm: 0;
    --o-radius: 0;
    --o-radius-lg: 0;
    --o-shadow: none;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    background: var(--o-bg);
    color: var(--o-text);
    font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
        "Noto Sans KR", "Malgun Gothic", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-size: 14px;
    line-height: 1.5;
}

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

button {
    font: inherit;
    cursor: pointer;
}

h1 {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

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

/* --------------------------------------------------------------------------
   Wrapper / header / footer — matching 오피요 home chrome tone
   -------------------------------------------------------------------------- */

#wrap {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--o-bg);
}

.header {
    position: relative;
    width: 100%;
}

.mini-topbar {
    background: #0b0c0d;
    margin: 0 0 12px;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    border-bottom: 1px solid #1c1f24;
}

.mini-topbar-inner {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(1160px, 100%);
    margin: 0 auto;
    padding: 0 14px;
    box-sizing: border-box;
}

.mini-topbar-left {
    display: inline-flex;
    align-items: center;
}

.mini-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.mini-brand-mark {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #f7d06a 0%, #dc9f1d 100%);
    color: #0f1218;
    font-size: 16px;
}

.mini-brand-text {
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 0.02em;
    color: #f7f9fc;
    text-shadow: 0 1px 10px rgba(247, 208, 106, 0.28);
    line-height: 1;
}

.mini-lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.mini-lang-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: #d5d9df;
    font-size: 14px;
}

.mini-lang-switch a {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    border: 1px solid #353a43;
    color: #d7dbe2;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    background: transparent;
    line-height: 1;
}

.mini-lang-switch a:hover {
    border-color: #4a5361;
    color: #ffffff;
}

.mini-lang-switch a.active {
    background: #ffffff;
    border-color: #ffffff;
    color: #13151a;
}

.mini-topbar-right {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    white-space: nowrap;
}

.mini-top-link {
    color: #f4f5f6;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    padding-right: 2px;
}

.mini-top-link:hover {
    color: #ffffff;
    text-decoration: underline;
}

.mini-topbar-right > a {
    color: #f4f5f6;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
}

.mini-topbar-right > a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.footer {
    margin-top: auto;
    padding: 20px 18px 28px;
    text-align: center;
    font-size: 11px;
    color: var(--o-text-muted);
}

.footer address {
    font-style: normal;
}

.footer strong {
    color: #3f4c63;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* decorative orbs kept subtle (in-brand) */

.bg-decoration {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    opacity: 0.35;
    z-index: 0;
}

.bg-decoration.orb-1 {
    top: -120px;
    right: -100px;
    width: 260px;
    height: 260px;
    background: radial-gradient(circle, rgba(51, 67, 94, 0.45), transparent 70%);
}

.bg-decoration.orb-2 {
    bottom: -80px;
    left: -80px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(14, 165, 164, 0.35), transparent 70%);
}

.bg-decoration.orb-3 {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(51, 67, 94, 0.22), transparent 70%);
}

/* --------------------------------------------------------------------------
   Card layout
   -------------------------------------------------------------------------- */

#login,
#register {
    position: relative;
    z-index: 2;
    flex: 1 1 auto;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    padding: 20px 18px 28px;
    display: flex;
    flex-direction: column;
}

#login .form,
#register .form {
    background: var(--o-card);
    border: 1px solid var(--o-border);
    border-radius: var(--o-radius-lg);
    box-shadow: var(--o-shadow);
    padding: 24px 20px 22px;
}

.field-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* --------------------------------------------------------------------------
   Floating-label field
   -------------------------------------------------------------------------- */

.floating-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.input-icon-wrapper {
    position: relative;
    display: flex;
}

.input-icon {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    color: var(--o-text-muted);
    pointer-events: none;
    transition: color 0.15s ease;
    z-index: 2;
}

.floating-input {
    width: 100%;
    height: 48px;
    padding: 0 14px 0 44px;
    margin: 0;
    font-size: 14px;
    line-height: 1.2;
    color: var(--o-text);
    background: #ffffff;
    border: 1px solid var(--o-border-soft);
    border-radius: var(--o-radius-sm);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
    vertical-align: middle;
}

.floating-select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 44px;
}

.floating-select:invalid {
    color: var(--o-text-muted);
}

.floating-select option {
    color: var(--o-text);
}

.input-icon-wrapper-select::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 14px;
    width: 8px;
    height: 8px;
    margin-top: -5px;
    border-right: 1.5px solid var(--o-text-sub);
    border-bottom: 1.5px solid var(--o-text-sub);
    transform: rotate(45deg);
    pointer-events: none;
}

.field-help {
    margin: 0;
    padding: 0 2px;
    font-size: 11px;
    line-height: 1.35;
    color: var(--o-text-sub);
}

.floating-field.has-icon-right .floating-input {
    padding-right: 44px;
}

.floating-input::placeholder {
    color: transparent;
}

.floating-input:focus {
    border-color: var(--o-primary);
    box-shadow: 0 0 0 3px rgba(51, 67, 94, 0.1);
}

.floating-input:focus ~ .input-icon,
.input-icon-wrapper:focus-within .input-icon {
    color: var(--o-primary);
}

.floating-input.error {
    border-color: var(--o-danger);
    background: var(--o-danger-soft);
}

.floating-input.error:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.floating-label {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 0 4px;
    font-size: 14px;
    color: var(--o-text-muted);
    background: transparent;
    pointer-events: none;
    transition: top 0.15s ease, font-size 0.15s ease, color 0.15s ease,
        background 0.15s ease, left 0.15s ease;
    max-width: calc(100% - 56px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* float state */
.floating-input:focus + .floating-label,
.floating-input:not(:placeholder-shown) + .floating-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 11px;
    color: var(--o-primary);
    background: #ffffff;
    left: 10px !important; /* override inline left: 3rem */
}

/* password eye toggle */

.password-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    background: transparent;
    color: var(--o-text-muted);
    border: 0;
    border-radius: var(--o-radius-sm);
    font-size: 18px;
    transition: color 0.15s ease, background 0.15s ease;
    z-index: 3;
}

.password-toggle .iconify {
    display: inline-flex;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
}

.password-toggle:hover,
.password-toggle:focus {
    color: var(--o-primary);
    background: var(--o-primary-soft);
    outline: none;
}

/* --------------------------------------------------------------------------
   Submit button — brand primary #33435e
   -------------------------------------------------------------------------- */

.submit {
    margin-top: 6px;
    width: 100%;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 20px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #ffffff;
    background: var(--o-primary);
    border: 0;
    border-radius: var(--o-radius-sm);
    transition: background 0.15s ease, transform 0.12s ease;
}

.submit .iconify {
    font-size: 18px;
}

.submit:hover {
    background: var(--o-primary-hover);
}

.submit:active {
    transform: translateY(1px);
}

.submit:disabled,
.submit.loading {
    opacity: 0.7;
    cursor: wait;
    transform: none;
}

.submit.loading::after {
    content: "";
    width: 14px;
    height: 14px;
    margin-left: 6px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: o-spin 0.7s linear infinite;
}

@keyframes o-spin {
    to { transform: rotate(360deg); }
}

/* --------------------------------------------------------------------------
   Alert banners
   -------------------------------------------------------------------------- */

.alert-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: 14px;
    border-radius: var(--o-radius-sm);
    font-size: 13px;
    font-weight: 500;
    border: 1px solid transparent;
}

.alert-banner .iconify {
    font-size: 16px;
    flex: 0 0 auto;
}

.alert-banner .alert-text {
    flex: 1 1 auto;
    line-height: 1.4;
}

.alert-banner.alert-error {
    background: var(--o-danger-soft);
    border-color: #fecaca;
    color: #991b1b;
}

.alert-banner.alert-success {
    background: var(--o-success-soft);
    border-color: #a7f3d0;
    color: #065f46;
}

/* inline field error */

.error-message {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--o-danger);
    padding: 2px 4px;
}

/* --------------------------------------------------------------------------
   Password strength bar
   -------------------------------------------------------------------------- */

.password-strength {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px 2px 2px;
}

.strength-bars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}

.strength-bar {
    height: 3px;
    border-radius: 999px;
    background: var(--o-border);
    transition: background 0.2s ease;
}

.strength-bar.active.weak   { background: #dc2626; }
.strength-bar.active.fair   { background: #f59e0b; }
.strength-bar.active.good   { background: var(--o-primary); }
.strength-bar.active.strong { background: var(--o-accent); }

.strength-text {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--o-text-sub);
}

.strength-text .iconify {
    font-size: 13px;
}

.strength-text.weak   { color: #dc2626; }
.strength-text.fair   { color: #f59e0b; }
.strength-text.good   { color: var(--o-primary); }
.strength-text.strong { color: var(--o-accent); }

/* --------------------------------------------------------------------------
   Link area
   -------------------------------------------------------------------------- */

.link-area {
    margin-top: 14px;
    text-align: center;
}

.link-list ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 12px;
}

.link-list li {
    position: relative;
}

.link-list li + li::before {
    content: "";
    position: absolute;
    left: -7px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: var(--o-border-soft);
}

.link-list a {
    display: inline-block;
    padding: 4px 2px;
    font-size: 12px;
    color: var(--o-text-sub);
    font-weight: 500;
    transition: color 0.15s ease;
}

.link-list a:hover,
.link-list a:focus {
    color: var(--o-primary);
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   SNS auth
   -------------------------------------------------------------------------- */

.sns-auth {
    margin-top: 12px;
    padding-top: 14px;
    border-top: 1px dashed var(--o-divider);
}

.sns-title {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--o-text-sub);
    text-align: center;
}

.sns-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.sns-btn {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    transition: transform 0.12s ease;
}

.sns-btn-img {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    object-fit: cover;
    display: block;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.15);
}

.sns-btn:hover {
    filter: none;
}

.sns-btn:active {
    transform: translateY(1px);
}

.sns-btn.disabled,
.sns-btn:disabled {
    opacity: 1;
    cursor: not-allowed;
    transform: none;
    filter: none;
}

.sns-google {
    background: transparent;
}

.sns-line {
    background: transparent;
}

.sns-facebook {
    background: transparent;
}

.sns-twitter {
    background: transparent;
}

.sns-kakao {
    background: transparent;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (min-width: 640px) {
    body {
        font-size: 14px;
    }

    #login,
    #register {
        padding: 32px 24px 40px;
    }

    #login .form,
    #register .form {
        padding: 32px 28px 28px;
    }

    .footer {
        padding: 28px 24px 32px;
    }

    .bg-decoration.orb-1 {
        top: -160px;
        right: -140px;
        width: 360px;
        height: 360px;
    }

    .bg-decoration.orb-2 {
        width: 300px;
        height: 300px;
    }
}

@media (max-width: 400px) {
    .mini-topbar-inner {
        min-height: 44px;
        padding: 0 10px;
    }

    .mini-brand {
        gap: 6px;
    }

    .mini-brand-mark {
        width: 22px;
        height: 22px;
        font-size: 13px;
    }

    .mini-brand-text {
        font-size: 13px;
    }

    .mini-top-link {
        font-size: 11px;
    }

    .mini-lang-icon {
        width: 18px;
        height: 18px;
        font-size: 13px;
    }

    .mini-lang-switch {
        gap: 4px;
    }

    .mini-lang-switch a {
        height: 22px;
        padding: 0 7px;
        font-size: 10px;
    }

    .mini-topbar-right {
        gap: 10px;
    }

    .mini-topbar-right > a {
        font-size: 12px;
    }

    #login,
    #register {
        padding: 14px 14px 22px;
    }

    #login .form,
    #register .form {
        padding: 20px 16px 20px;
        border-radius: var(--o-radius);
    }

    .floating-input {
        height: 46px;
    }

    .submit {
        height: 46px;
    }

    .sns-grid { gap: 8px; }
}