:root{--purple:#5964dc;--purple-dark:#444dc2;--ink:#272c48;--muted:#8b94b0;--line:#e7e9f4;--pale:#f7f8ff;--lavender:#eceeff}
*{box-sizing:border-box}
body{margin:0;background:var(--pale);color:var(--ink);font-family:Pretendard,'Noto Sans KR',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
a{text-decoration:none;color:inherit}
button{font:inherit;cursor:pointer}
.site-header{height:78px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.header-inner{height:100%;max-width:1320px;padding:0 30px;margin:auto;display:flex;align-items:center;justify-content:space-between}
.brand{font-size:32px;font-weight:900;letter-spacing:-1.7px;color:#323d93}.brand span{color:#7882eb}
.header-actions{display:flex;align-items:center;gap:24px}.header-actions form{margin:0}
.header-link{background:none;border:0;color:#59617c;font-size:15px;padding:10px 0}
.header-welcome{color:#8b94b0;font-size:13px}.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 22px;border-radius:11px;font-weight:700;font-size:14px;white-space:nowrap;border:1px solid transparent}
.btn-primary{background:var(--purple);color:#fff}
.btn-primary:hover{background:var(--purple-dark)}.btn-outline{border-color:#c8cdf7;background:white;color:var(--purple)}
.btn-large{padding:17px 26px;font-size:16px}.eyebrow{display:inline-block;background:#e9ecff;color:#515dcc;border-radius:50px;padding:9px 17px;font-size:13px;font-weight:800}
.landing{max-width:1240px;margin:auto;padding:0 28px}
.hero{min-height:580px;display:grid;grid-template-columns:1.03fr .97fr;align-items:center;gap:30px}
.hero h1{font-size:clamp(37px,4.2vw,62px);letter-spacing:-2.5px;line-height:1.32;margin:26px 0}
.hero h1 em{font-style:normal;color:var(--purple)}.hero-copy>p{font-size:18px;line-height:1.9;color:#7d87a7}
.hero-actions{display:flex;gap:12px;margin-top:34px}.hero-visual img{width:100%;height:auto;display:block}
.feature-section{padding:20px 0 75px}.section-heading{text-align:center;margin-bottom:26px}
.section-heading h2{font-size:29px;letter-spacing:-1px}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.feature-card,.dashboard-card{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 12px 35px rgba(61,64,122,.035)}
.feature-card{padding:30px}
.feature-icon{width:52px;height:52px;background:var(--lavender);color:var(--purple);border-radius:15px;display:grid;place-items:center;font-size:26px;font-weight:bold}
.feature-card h3{font-size:19px;margin:22px 0 10px}
.feature-card p{font-size:15px;color:var(--muted);line-height:1.8;margin:0}
.landing-bottom{text-align:center;background:#eeeefe;border-radius:22px;padding:52px 20px;margin-bottom:60px}
.landing-bottom h2{font-size:29px;margin:0 0 12px}
.landing-bottom p{color:#858eaa;margin-bottom:26px}
.app-shell{display:flex;min-height:calc(100vh - 78px)}
.sidebar{width:244px;flex:none;background:#fff;border-right:1px solid var(--line);padding:30px 18px;display:flex;flex-direction:column}
.sidebar-label{font-size:11px;color:#a5aac0;letter-spacing:1.8px;font-weight:800;padding-left:16px}
.sidebar-nav{display:grid;gap:8px;margin-top:14px}
.sidebar-link{display:flex;align-items:center;gap:12px;padding:15px 16px;border-radius:12px;font-size:14px;font-weight:700;color:#646c8b}
.sidebar-link.active,.sidebar-link:hover{background:var(--lavender);color:var(--purple)}
.nav-icon{font-size:21px;line-height:1}
.sidebar-bottom{margin-top:auto;border-top:1px solid var(--line);padding:22px 12px 0;font-size:12px;color:#9aa0b9}
.sidebar-dot{display:inline-block;width:8px;height:8px;background:#8c80ee;border-radius:50%;margin-right:7px}
.dashboard-main{flex:1;max-width:1250px;margin:0 auto;padding:48px 48px 70px;width:100%;min-width:0}
.page-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:28px}
.page-heading .eyebrow{font-size:11px;padding:7px 12px}
.page-heading h1{font-size:32px;letter-spacing:-1.1px;margin:14px 0 9px}
.page-heading p{color:var(--muted);margin:0}
.dashboard-card{padding:28px;margin-bottom:22px}
.card-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px}
.card-heading h2{font-size:19px;margin:0}
.muted{color:#a0a7bf;font-size:13px}
.text-link{color:var(--purple);font-size:13px;font-weight:700}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.stat{padding:25px;background:var(--pale);border-radius:15px;display:flex;flex-direction:column;gap:9px}
.stat span{color:#717c9e;font-size:14px}
.stat strong{font-size:38px;color:var(--purple);line-height:1}
.stat small{color:#a3abc2;font-size:12px}
.empty-state{border:1px dashed #d8dcf0;border-radius:15px;text-align:center;padding:43px 20px}
.empty-icon{margin:auto;background:#eceeff;color:var(--purple);font-size:34px;width:68px;height:68px;border-radius:20px;display:grid;place-items:center}
.empty-state h3{margin:18px 0 8px}
.empty-state p{color:var(--muted);font-size:14px;margin-bottom:22px}

@media(max-width:850px){.hero{grid-template-columns:1fr;padding:55px 0 25px;gap:0}
	.hero-visual{max-width:520px;margin:auto}.feature-grid{grid-template-columns:1fr}
	.sidebar{width:190px}.dashboard-main{padding:30px 24px}}

@media(max-width:600px){.site-header{height:68px}
	.header-inner{padding:0 18px}
	.header-actions{gap:12px}
	.header-welcome{display:none}
	.brand{font-size:27px}
	.hero h1{letter-spacing:-1.5px}
	.hero-copy>p{font-size:16px}.hero-actions{flex-wrap:wrap}
	.sidebar{width:66px;padding:20px 8px}
	.sidebar-label,.sidebar-bottom{display:none}
	.sidebar-link{font-size:0;justify-content:center;padding:15px 0}
	.nav-icon{font-size:23px}.dashboard-main{padding:24px 14px}
	.page-heading{align-items:flex-start;flex-direction:column}
	.page-heading h1{font-size:26px}
	.stats-grid{grid-template-columns:1fr;gap:10px}
	.stat{padding:18px}
	.dashboard-card{padding:18px}
	.landing{padding:0 18px}}
	
	/* 프로젝트 목록 */

	.project-grid {
	    display: grid;
	    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	    gap: 18px;
	    margin-top: 20px;
	}

	.project-card {
	    background: #ffffff;
	    border: 1px solid #ebe5f5;
	    border-radius: 16px;
	    padding: 24px;
	    transition: transform 0.2s, box-shadow 0.2s;
	}

	.project-card:hover {
	    transform: translateY(-3px);
	    box-shadow: 0 8px 24px rgba(115, 87, 216, 0.1);
	}

	.project-card-top {
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
	    margin-bottom: 18px;
	}

	.project-icon {
	    display: inline-flex;
	    align-items: center;
	    justify-content: center;
	    width: 42px;
	    height: 42px;
	    border-radius: 12px;
	    background: #f0ebff;
	    color: #7357d8;
	    font-size: 22px;
	}

	.project-role {
	    padding: 5px 10px;
	    border-radius: 20px;
	    background: #f5f2ff;
	    color: #7357d8;
	    font-size: 11px;
	    font-weight: 700;
	}

	.project-card h3 {
	    margin: 0 0 10px;
	    color: #252238;
	    font-size: 17px;
	}

	.project-card p {
	    margin: 0;
	    min-height: 42px;
	    color: #827c92;
	    font-size: 13px;
	    line-height: 1.6;
	    overflow-wrap: anywhere;
	}

	.project-card-footer {
	    margin-top: 20px;
	    padding-top: 15px;
	    border-top: 1px solid #f0edf5;
	    color: #958ca9;
	    font-size: 12px;
	}

	.project-card-link {
	    display: block;
	    color: inherit;
	    text-decoration: none;
	    border-radius: 16px;
	}

	.project-card-link .project-card {
	    height: 100%;
	}

	.project-card-link:hover .project-card {
	    transform: translateY(-3px);
	    box-shadow: 0 8px 24px rgba(115, 87, 216, 0.15);
	    border-color: #a78bfa;
	}

	.project-card-link:focus-visible {
	    outline: 3px solid #7357d8;
	    outline-offset: 3px;
	}
	
	/* 공통 삭제 버튼 */
	.btn-danger {
	    background: #dc3545;
	    color: #ffffff;
	    border: 1px solid #dc3545;
	}

	.btn-danger:hover {
	    background: #bb2d3b;
	    border-color: #b02a37;
	    color: #ffffff;
	}
	
	
	/* 사이드바 프로젝트 목록 */
	.sidebar-projects {
	    margin-top: 28px;
	    padding-top: 20px;
	    border-top: 1px solid #e9e9f4;
	}

	.sidebar-projects .sidebar-label {
	    margin-bottom: 12px;
	}

	.sidebar-project-link {
	    gap: 10px;
	    min-width: 0;
	}

	.sidebar-project-name {
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	    min-width: 0;
	}

	.sidebar-empty {
	    padding: 10px 18px;
	    font-size: 13px;
	    color: #9a9fb9;
	}
	
	.project-mini-stats {
	    margin-top: 20px;
	    padding-top: 16px;
	    border-top: 1px solid #ececf5;
	}

	.project-mini-counts {
	    display: flex;
	    gap: 20px;
	    color: #858eae;
	    font-size: 13px;
	}

	.project-mini-counts strong {
	    color: #303653;
	    margin-left: 5px;
	}

	.project-mini-progress {
	    display: flex;
	    justify-content: space-between;
	    margin-top: 14px;
	    margin-bottom: 8px;
	    font-size: 12px;
	    color: #858eae;
	}

	.project-mini-progress strong {
	    color: #625ee4;
	}

	.project-progress-track {
	    width: 100%;
	    height: 6px;
	    background: #eeeefa;
	    border-radius: 20px;
	    overflow: hidden;
	}

	.project-progress-fill {
	    height: 100%;
	    background: #6865e8;
	    border-radius: 20px;
	    transition: width .25s ease;
	}
/* Project list pagination */
.project-pagination { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px; margin-top:26px; }
.project-page-link { display:inline-flex; justify-content:center; align-items:center; min-width:36px; height:36px; padding:0 12px; border:1px solid #e0e2f2; border-radius:10px; color:#606b92; background:#fff; text-decoration:none; font-weight:600; font-size:14px; }
.project-page-link:hover { background:#f3f4ff; border-color:#9b9fea; }
.project-page-link.is-current { background:#5d5fe4; border-color:#5d5fe4; color:#fff; }
.sidebar-view-all { margin-top:8px; font-size:13px; }


/* 로그인 / 회원가입 공통 */

.auth-main {
    min-height: calc(100vh - 78px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 48px 20px;
}

.auth-card {
    width: 100%;
    max-width: 460px;
    padding: 42px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: 0 12px 35px rgba(61, 64, 122, .05);
}

.auth-heading {
    text-align: center;
    margin-bottom: 32px;
}

.auth-heading h1 {
    margin: 0 0 12px;
    font-size: 28px;
    letter-spacing: -1px;
}

.auth-heading p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.7;
}

.auth-field {
    margin-bottom: 20px;
}

.auth-field label {
    display: block;
    margin-bottom: 9px;
    font-size: 14px;
    font-weight: 700;
}

.auth-input {
    width: 100%;
    height: 50px;
    padding: 0 15px;
    border: 1px solid #dce0ef;
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: 14px;
    outline: none;
}

.auth-input:focus {
    border-color: var(--purple);
    box-shadow: 0 0 0 3px rgba(89, 100, 220, .1);
}

.auth-input::placeholder {
    color: #a0a7bf;
}

.auth-input.is-invalid {
    border-color: #dc3545;
}

.auth-hint {
    margin: 7px 0 0;
    color: var(--muted);
    font-size: 12px;
}

.auth-error {
    margin: 7px 0 0;
    color: #dc3545;
    font-size: 12px;
}

.auth-server-error {
    margin-bottom: 18px;
    text-align: center;
}

.auth-submit {
    width: 100%;
    min-height: 52px;
    margin-top: 8px;
    font-size: 15px;
}

.auth-bottom {
    margin: 26px 0 0;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
}

.auth-bottom a {
    color: var(--purple);
    font-weight: 700;
}

@media (max-width: 600px) {
    .auth-main {
        min-height: calc(100vh - 68px);
        padding: 30px 16px;
    }

    .auth-card {
        padding: 30px 24px;
    }

    .auth-heading h1 {
        font-size: 25px;
    }
}

html {
    scrollbar-gutter: stable;
}


/* 회원가입 이메일 인증 */

.auth-input-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.auth-input-row > .auth-input,
.auth-code-wrap {
    flex: 1;
    min-width: 0;
}

.auth-side-btn {
    flex-shrink: 0;
    min-width: 112px;
    padding: 0 12px;
    font-size: 12px;
    border-radius: 10px;
}

.auth-code-wrap {
    position: relative;
}

.auth-code-wrap .auth-input {
    padding-right: 65px;
}

.auth-timer {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #dc3545;
    font-size: 12px;
    font-weight: 700;
    pointer-events: none;
}

.auth-success {
    margin: 8px 0 0;
    color: #198754;
    font-size: 12px;
    font-weight: 400;
}

.auth-side-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.auth-input:disabled {
    background: #f7f8fc;
    color: #8b94b0;
}

@media (max-width: 420px) {
    .auth-side-btn {
        min-width: 98px;
        padding: 0 8px;
        font-size: 11px;
    }
}