/* LINE's official icon and button guidance: https://developers.line.biz/en/docs/line-login/login-button/ */
#line-login-section { margin-top: 16px; }
#line-login-button {
    width: 100%; min-height: 44px; display: flex; align-items: center;
    padding: 0; border: 1px solid transparent; border-radius: 4px;
    background: #06c755; color: #fff; cursor: pointer;
    font: 500 14px/20px Arial, sans-serif;
}
#line-login-button img { width: 44px; height: 44px; flex: 0 0 44px; object-fit: contain; border-right: 1px solid rgb(0 0 0 / 8%); }
#line-login-label { flex: 1; padding: 12px 24px; white-space: nowrap; }
#line-login-button:hover { background: linear-gradient(rgb(0 0 0 / 10%), rgb(0 0 0 / 10%)), #06c755; }
#line-login-button:active { background: linear-gradient(rgb(0 0 0 / 30%), rgb(0 0 0 / 30%)), #06c755; }
#line-login-button:disabled { cursor: wait; background: #fff; color: rgb(30 30 30 / 20%); border-color: rgb(229 229 229 / 60%); }
#line-login-button:disabled img { opacity: .2; filter: brightness(0); }
#line-login-button:focus-visible { outline: 2px solid #06c755; outline-offset: 3px; }
#line-email-use { margin: 16px 0 0; font-size: 12px; line-height: 1.65; }
#line-email-check { margin-top: 14px; }
#line-email-check .field { margin: 12px 0; }
.line-email-row { display: flex; align-items: flex-end; gap: 8px; margin: 12px 0; }
#line-email-check .line-email-row .field { flex: 1; min-width: 0; margin: 0; }
#line-email-send {
    flex: 0 0 108px; min-height: 44px; margin: 0; padding: 10px 8px;
    border: 1px solid #b8995b; border-radius: 6px; background: #d2b57c; color: #17140f;
    font: 600 12px/1.5 sans-serif; white-space: nowrap; letter-spacing: 0; cursor: pointer;
}
#line-email-send:hover:not(:disabled) { background: #e1c994; }
#line-email-send:focus-visible { outline: 2px solid #e1c994; outline-offset: 3px; }
#line-email-send:disabled { background: #302c23; border-color: #5d5037; color: #b4a78d; cursor: default; }
#line-login-error { font-size: 13px; line-height: 1.6; }
body.line-auth-open { overflow: hidden; }
#line-auth-dialog {
    box-sizing: border-box; width: min(440px, calc(100% - 32px));
    max-height: calc(100dvh - 32px); margin: auto; padding: 28px;
    overflow: auto; overscroll-behavior: contain;
    border: 1px solid rgb(210 181 124 / 35%); border-radius: 20px;
    background: #111219; color: #eee7dc; font-family: inherit; font-size: 14px; line-height: 1.7;
    box-shadow: 0 24px 80px rgb(0 0 0 / 50%);
}
#line-auth-dialog::backdrop { background: rgb(4 5 10 / 75%); backdrop-filter: blur(8px); }
#line-auth-title { margin: 8px 0 16px; font-size: 22px; line-height: 1.4; }
.line-auth-brand { margin: 0; color: #d2b57c; font-size: 11px; letter-spacing: .16em; }
#line-email-hint, #line-auth-progress { color: #c8c4be; font-size: 14px; line-height: 1.8; overflow-wrap: anywhere; }
#line-auth-dialog input { box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; font-size: 16px; }
#line-auth-dialog .btn-enter { width: 100%; margin-top: 12px; }
#line-auth-dialog .login-alt-link { white-space: normal; min-height: 44px; }
.line-auth-note { margin: 16px 0 0; color: #aaa6a0; font-size: 12px; line-height: 1.7; }
#line-auth-dialog a { color: #dbc38e; }
.line-auth-cancel {
    display: block; min-height: 44px; margin: 16px auto 0; padding: 8px 16px;
    border: 0; border-radius: 6px; background: transparent; color: #c8c4be;
    font: inherit; cursor: pointer;
}
.line-auth-cancel:hover { background: rgb(255 255 255 / 6%); }
.line-auth-cancel:disabled { opacity: .45; cursor: wait; }
@media (max-width: 360px) { #line-auth-dialog { padding: 22px; } }
