@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
@import url('home-modern.css');

html,
body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1:focus {
    outline: none;
}

a,
.btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.google-login-btn {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

.google-login-btn img {
    display: block;
    /* 이미지 주변 여백 제거 */
}

.external-login-button {
    all: unset;
    /* 버튼의 기본 스타일 완-전-히 제거 */
    cursor: pointer;
    display: inline-block;
}

.external-login-button img {
    display: block;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}


.home-container {
    max-width: 900px;
    margin: 60px auto;
    /* 페이지 전체 아래로 내림 */
}

.product-title {
    font-size: 6rem;
    /* 크게 */
    font-weight: 700;
    margin-bottom: 100px;
    /* 제품 설명과 간격 */
}

.product-subtitle {
    font-size: 3rem;
    color: #555;
    margin-bottom: 25px;
    /* 한국어 설명과 간격 */
}

.product-subtitle-kr {
    font-size: 2rem;
    color: #666;
    margin-bottom: 100px;
    /* 특징 목록과의 간격 */
}

.feature-list {
    font-size: 1.5rem;
    list-style: disc;
    text-align: center;
    /* 목록은 왼쪽 정렬이 더 예쁨 */
    margin: 0 auto;
    max-width: 600px;
    /* 너무 넓지 않게 제한 */
    line-height: 2;
    /* 목록 간격 넉넉하게 */
}

.sidebar {
    background: linear-gradient(180deg, #6c4cff 0%, #372ba3 100%);
}

.nav-link.text-danger {
    color: #e84cff !important;
}

/* LocForge 상단 네비게이션 바 */

.lf-navbar {
    background-image: linear-gradient(90deg, rgb(5, 39, 103) 0%, #3a0647 70%);
    color: #ffffff;
}

.lf-navbar .navbar-brand {
    font-weight: 700;
    font-size: 1.3rem;
}

.lf-navbar .nav-link {
    font-weight: 500;
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.85);
    margin-right: 0.5rem;
}

.lf-navbar .nav-link:hover {
    color: #ffffff;
}

.lf-navbar .nav-link.active {
    color: #ffffff;
    border-bottom: 2px solid #ffffff;
}

/* 우측 사용자 정보 텍스트 */

.lf-user-info {
    color: #f5f5f5;
    font-size: 0.95rem;
}

.lfc-root {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.lfc-topbar {
    height: 64px;
    padding: 0 32px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    background: linear-gradient(90deg, #5b3df5, #8a5bff);
    color: white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.lfc-logo {
    font-weight: 700;
    font-size: 1.3rem;
}

.lfc-logo span {
    opacity: 0.9;
}

.lfc-nav {
    display: flex;
    gap: 16px;
}

.lfc-nav-link {
    font-size: 0.98rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 999px;
}

.lfc-nav-link.active {
    background-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

.lfc-nav-link:hover {
    background-color: rgba(0, 0, 0, 0.12);
    color: #ffffff;
}

.lfc-user {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
}

.lfc-user-email {
    max-width: 200px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0.9;
}

.lfc-user-link {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.8rem;
}

.lfc-main {
    flex: 1;
    padding: 32px 40px 40px;
    /* 상단 / 좌우 / 하단 여백 */
}

/* 제목 - My Account */
.account-title {
    margin: 32px 0 20px;
    /* 위에 살짝 띄우고 아래 여백 */
    font-size: 2rem;
    font-weight: 600;
}

/* 정보 박스 카드 */
.account-card {
    max-width: 520px;
    padding: 24px 28px;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
}

/* 각 라인 */
.account-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 0.98rem;
}

.account-row+.account-row {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    margin-top: 6px;
    padding-top: 12px;
}

/* 라벨 / 값 스타일 */
.account-label {
    font-weight: 600;
    color: #555;
}

.account-value {
    color: #222;
    text-align: right;
    word-break: break-all;
}

/* 홈 전체 컨테이너 – 가운데 정렬 */
.home-wrapper {
    max-width: 1200px;
    margin: 0px auto 0 auto;
    text-align: center;
    padding: 0 40px;
    /* 좌우 여백 추가 */
}

/* START 버튼이 들어가는 영역 */
.home-start-container {
    width: 100%;
    display: flex;
    justify-content: center;
    /* 수평 가운데 정렬 */
    margin-top: 60px;
}

/* Getting started 버튼 스타일 */
.home-start-btn {
    padding: 25px 50px;
    /* 세로 1.5배, 가로 2배 정도 느낌 */
    font-size: 1.6rem;
    font-weight: bold;
    background: #6A5BFF;
    /* 상단바 보라색과 톤 맞추기 */
    color: #fff;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    transition: 0.15s ease;
}

.home-start-btn:hover {
    background: #594AE2;
    transform: translateY(-2px);
}

/* 메인 타이틀 */
.home-title {
    font-size: 4rem;
    font-weight: 700;
    margin-top: 10px;
    margin-bottom: 30px;
}

/* 서브 타이틀 */
.home-subtitle {
    font-size: 1.9rem;
    font-weight: 300;
    margin-top: 20px;
    line-height: 1.7;
    color: darkred
}

.home-feature-list {
    margin: 30px auto 0 auto;
    /* 위쪽 여백 + 가운데 정렬 */
    padding-left: 0;
    /* 기본 들여쓰기 제거 */
    width: fit-content;
    /* 내용만큼만 폭 차지해서 중앙 유지 */
    list-style-position: inside;
    text-align: left;
    /* 글자는 왼쪽 정렬 */
}

.home-feature-list li {
    font-size: 1.3rem;
    margin-top: 18px;
    list-style-type: disc;
}

/* 전체 위쪽 여백 */
.home-wrapper {
    padding-top: 0px;
}

/* 로그인/로그아웃, 로그인 버튼 공통 */
.lfc-btn-auth {
    padding: 0.6rem 1.5rem;
    /* 버튼 크기 ↑ */
    font-size: 1.1rem;
    border-radius: 999px;
    margin-left: 0.75rem;
}

.lfc-btn-logout,
.lfc-btn-login {
    padding: 8px 16px;
    /* 버튼 크기 증가 */
    font-size: 14px;
    font-weight: 600;
    border-radius: 6px;
    border: none;
    background: white;
    color: #5b3df5;
    cursor: pointer;
    transition: all 0.2s ease;
}

.lfc-btn-logout:hover,
.lfc-btn-login:hover {
    background: #f0f0f0;
    transform: translateY(-1px);
}

/* 오른쪽 이메일 / 프로필 쪽 */
.lfc-user-email {
    margin-right: 0.75rem;
    font-size: 0.9rem;
}

/* Profile 링크 색상 강조 */
.lfc-user-link {
    color: #ffd86b !important;
    /* 노란색 계열 */
    font-size: 16px;
    margin-right: 0.75rem;
    font-weight: 600;
    text-decoration: none;
}

.lfc-user-link:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* 토스트 알림 위치 */
.lfc-toast {
    position: fixed;
    top: 70px;
    /* 상단바 바로 아래 */
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    min-width: 260px;
    text-align: center;
    font-size: 0.95rem;
}

.lfc-alert {
    position: fixed;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    min-width: 260px;
}

.logout-alert {
    position: fixed;
    top: 80px;
    right: 30px;
    width: 280px;
    z-index: 2000;
}

/* 상단 네비게이션 오른쪽 Login / Profile 링크 스타일 */
.lfc-user a,
.lfc-user button {
    font-size: 1rem;
    /* 글자 크게 */
    font-weight: 600;
    /* 굵게 */
    color: rgba(0, 0, 0, 0.06);
    padding: 6px 14px;
}

/* Hover 효과 */
.lfc-user a:hover,
.lfc-user button:hover {
    color: #FFE57A !important;
    transform: translateY(-1px);
}

/* ===== Pricing section ===== */

.pricing-section {
    max-width: 1100px;
    margin: 40px auto 120px;
    text-align: center;
}

.pricing-title {
    font-size: 2.4rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.pricing-subtitle {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 40px;
}

.pricing-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    justify-content: center;
}

/* 카드 기본 */
.pricing-card {
    flex: 1 1 260px;
    max-width: 340px;
    background: white;
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.06);
    padding: 28px 26px 32px;
    text-align: left;
    position: relative;
}

/* Studio 강조 카드 */
.pricing-card--highlight {
    border: 2px solid #6A5BFF;
}

.pricing-badge {
    position: absolute;
    top: 18px;
    right: 22px;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    background: #6A5BFF;
    color: #fff;
}

.pricing-name {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.pricing-price {
    font-size: 2.1rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.pricing-price span {
    font-size: 0.9rem;
    font-weight: 400;
    color: #777;
}

.pricing-desc {
    font-size: 0.95rem;
    color: #666;
    margin-bottom: 16px;
}

/* 플랜 feature 리스트 */
.pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
}

.pricing-features li {
    font-size: 0.95rem;
    margin-top: 8px;
    padding-left: 18px;
    position: relative;
}

.pricing-features li::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 0;
    color: #6A5BFF;
}

/* 버튼 */
.pricing-btn {
    width: 100%;
    padding: 12px 0;
    border-radius: 999px;
    border: 1px solid #6A5BFF;
    background: white;
    color: #6A5BFF;
    font-weight: 600;
    cursor: pointer;
    transition: 0.15s ease;
}

.pricing-btn.primary {
    background: #6A5BFF;
    color: #fff;
}

.pricing-btn:hover {
    transform: translateY(-1px);
}

.plan-compare-sub {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 40px;
}

/* 테이블 영역 전체 */
.plan-compare-table table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

/* 테이블 Header */
.plan-compare-table th {
    background: #f5f3ff;
    padding: 18px 12px;
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
}

/* 테이블 Body */
.plan-compare-table td {
    padding: 18px 12px;
    font-size: 1rem;
    border-bottom: 1px solid #efefef;
}

/* 마지막 줄의 border 제거 */
.plan-compare-table tbody tr:last-child td {
    border-bottom: none;
}

/* 체크 표시 강조 */
.plan-compare-table .ok {
    color: #5A43FF;
    font-weight: 600;
}

/* ===========================
   FAQ Section
   =========================== */

.faq-section {
    max-width: 900px;
    margin: 80px auto 0;
    padding: 0 16px;
}

.faq-title {
    text-align: center;
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.faq-subtitle {
    text-align: center;
    color: #777;
    margin-bottom: 32px;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.faq-item {
    margin-bottom: 24px;
}

.faq-question {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 6px;
}

.faq-answer {
    line-height: 1.6;
    color: #444;
}

/* ===========================
   Bottom CTA Banner
   =========================== */

.cta-banner {
    max-width: 980px;
    margin: 96px auto 120px;
    padding: 32px 28px;
    border-radius: 18px;
    background: linear-gradient(135deg, #6A5BFF, #9D7BFF);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    color: #fff;
}

.cta-text h2 {
    font-size: 1.8rem;
    margin-bottom: 8px;
}

.cta-text p {
    margin: 0;
    opacity: 0.9;
}

.cta-btn {
    padding: 14px 28px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    background: #ffffff;
    color: #5A46FF;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
    white-space: nowrap;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 26px rgba(0, 0, 0, 0.18);
    background: #F5F2FF;
}

/* ProjectDetails - top controls sticky */
.project-topbar {
    position: sticky;
    top: 60px;
    /* 네 상단 네비가 fixed면 60px 정도로 바꿔 */
    z-index: 1030;
}

.pricing-price span {
    font-size: 0.9rem;
    font-weight: 400;
    color: #777;
}

.pricing-desc {
    font-size: 0.95rem;
    color: #666;
    margin-bottom: 16px;
}

/* 플랜 feature 리스트 */
.pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
}

.pricing-features li {
    font-size: 0.95rem;
    margin-top: 8px;
    padding-left: 18px;
    position: relative;
}

.pricing-features li::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 0;
    color: #6A5BFF;
}

/* 버튼 */
.pricing-btn {
    width: 100%;
    padding: 12px 0;
    border-radius: 999px;
    border: 1px solid #6A5BFF;
    background: white;
    color: #6A5BFF;
    font-weight: 600;
    cursor: pointer;
    transition: 0.15s ease;
}

.pricing-btn.primary {
    background: #6A5BFF;
    color: #fff;
}

.pricing-btn:hover {
    transform: translateY(-1px);
}

.plan-compare-sub {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 40px;
}

/* 테이블 영역 전체 */
.plan-compare-table table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

/* 테이블 Header */
.plan-compare-table th {
    background: #f5f3ff;
    padding: 18px 12px;
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
}

/* 테이블 Body */
.plan-compare-table td {
    padding: 18px 12px;
    font-size: 1rem;
    border-bottom: 1px solid #efefef;
}

/* 마지막 줄의 border 제거 */
.plan-compare-table tbody tr:last-child td {
    border-bottom: none;
}

/* 체크 표시 강조 */
.plan-compare-table .ok {
    color: #5A43FF;
    font-weight: 600;
}

/* ===========================
   FAQ Section
   =========================== */

.faq-section {
    max-width: 900px;
    margin: 80px auto 0;
    padding: 0 16px;
}

.faq-title {
    text-align: center;
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.faq-subtitle {
    text-align: center;
    color: #777;
    margin-bottom: 32px;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.faq-item {
    margin-bottom: 24px;
}

.faq-question {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 6px;
}

.faq-answer {
    line-height: 1.6;
    color: #444;
}

/* ===========================
   Bottom CTA Banner
   =========================== */

.cta-banner {
    max-width: 980px;
    margin: 96px auto 120px;
    padding: 32px 28px;
    border-radius: 18px;
    background: linear-gradient(135deg, #6A5BFF, #9D7BFF);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    color: #fff;
}

.cta-text h2 {
    font-size: 1.8rem;
    margin-bottom: 8px;
}

.cta-text p {
    margin: 0;
    opacity: 0.9;
}

.cta-btn {
    padding: 14px 28px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    background: #ffffff;
    color: #5A46FF;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
    white-space: nowrap;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 26px rgba(0, 0, 0, 0.18);
    background: #F5F2FF;
}

/* ProjectDetails - top controls sticky */
.project-topbar {
    position: sticky;
    top: 60px;
    /* 네 상단 네비가 fixed면 60px 정도로 바꿔 */
    z-index: 1030;
    background: #fff;
    /* 뒤가 비치지 않게 */
    border-bottom: 1px solid #e5e5e5;
}

/* Translation table scroll container */
.table-container {
    /* max-height: calc(100vh - 560px); */
    /* Commented out for Hide Controls feature */
    /* 화면 높이에서 상단 영역 제외 */
    overflow: auto;
    /* 세로/가로 스크롤 모두 여기서 */
    border: 1px solid #dee2e6;
    border-radius: 8px;
}

/* Sticky header inside scroll container */
.table-container thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #f8f9fa;
}

/* Override: login 버튼 가독성 향상 */
.lfc-btn-login {
    background: transparent;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.7);
}

.lfc-btn-login:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff !important;
}

/* 상단 사용자 영역 기본 색상을 상속하도록 수정 */
.lfc-user a,
.lfc-user button {
    color: inherit;
}