@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Noto+Sans+KR:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&display=swap');

:root {
    --ink: #111013;
    --paper: #fcfaff;
    --lilac: #d8c7f4;
    --lilac-light: #f0eaff;
    --violet: #7751ba;
}

* { box-sizing: border-box; }

body {
    min-width: 320px;
    margin: 0;
    color: var(--paper);
    font-family: "Noto Sans KR", sans-serif;
    background: var(--ink);
}

.landing {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 27px 38px 22px;
    overflow: hidden;
    background:
        radial-gradient(circle at 88% 10%, rgba(119, 81, 186, .5), transparent 26rem),
        radial-gradient(circle at 5% 95%, rgba(216, 199, 244, .2), transparent 24rem),
        var(--ink);
}

.minimal-landing { display: flex; flex-direction: column; min-height: 100vh; padding: 27px 38px; overflow: hidden; background: radial-gradient(circle at 82% 18%, rgba(119, 81, 186, .52), transparent 30rem), radial-gradient(circle at 5% 94%, rgba(216, 199, 244, .18), transparent 28rem), var(--ink); }.minimal-landing h1 { display: grid; flex: 1; margin: 0; color: var(--lilac); font-family: "Playfair Display", serif; font-size: clamp(84px, 23vw, 370px); font-weight: 500; letter-spacing: -.1em; line-height: .72; place-items: center; }

.navigation { display: flex; align-items: center; justify-content: space-between; }
.logo { color: var(--paper); font-family: "Playfair Display", serif; font-size: 28px; font-weight: 600; letter-spacing: -.06em; text-decoration: none; }
.logo span { color: var(--lilac); }
.nav-links { display: flex; align-items: center; gap: 23px; }
.nav-links a { color: var(--paper); font-size: 13px; font-weight: 600; text-decoration: none; }
.login-link:hover { color: var(--lilac); }
.signup-link { padding: 11px 17px; background: var(--lilac); color: var(--ink) !important; border-radius: 7px; transition: background .2s, transform .2s; }
.signup-link:hover { background: var(--paper); transform: translateY(-2px); }

.hero { display: flex; flex: 1; flex-direction: column; justify-content: center; max-width: 1190px; padding: 78px 7vw 58px; }
.eyebrow { margin: 0 0 24px; color: var(--lilac); font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: .14em; }
.hero h1 { margin: 0; font-family: "Playfair Display", "Noto Sans KR", serif; font-size: clamp(56px, 8.7vw, 130px); font-weight: 500; letter-spacing: -.08em; line-height: 1.05; }
.hero h1 em { color: var(--lilac); font-style: italic; }
.hero-footer { display: flex; align-items: end; justify-content: space-between; max-width: 835px; margin-top: clamp(48px, 7vw, 94px); }
.hero-footer p { margin: 0; color: #ded7e7; font-size: 15px; font-weight: 500; line-height: 1.8; }
.hero-button { display: flex; gap: 28px; align-items: center; padding: 13px 16px; color: var(--ink); font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: .04em; text-decoration: none; background: var(--lilac); border-radius: 7px; box-shadow: 0 12px 26px rgba(0, 0, 0, .25); transition: transform .2s, background .2s; }
.hero-button span { font-size: 18px; }.hero-button:hover { background: var(--paper); transform: translateY(-3px); }

.feature-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border-top: 1px solid rgba(216, 199, 244, .35); background: rgba(216, 199, 244, .35); }
.feature-strip article { min-height: 125px; padding: 20px 21px; background: rgba(17, 16, 19, .82); }.feature-strip span { color: var(--lilac); font-family: "DM Mono", monospace; font-size: 9px; }.feature-strip h2 { margin: 14px 0 6px; font-family: "Playfair Display", serif; font-size: 20px; font-weight: 500; }.feature-strip p { margin: 0; color: #d5cddc; font-size: 11px; }

footer { display: flex; justify-content: space-between; padding-top: 20px; color: #a89fb0; font-family: "DM Mono", monospace; font-size: 9px; letter-spacing: .06em; }

@media (max-width: 680px) {
    .landing { padding: 21px 20px 18px; }
    .hero { padding: 70px 0 55px; }
    .hero h1 { font-size: clamp(49px, 14vw, 78px); }
    .hero-footer { flex-direction: column; gap: 31px; align-items: flex-start; }
    .feature-strip { grid-template-columns: 1fr; }.feature-strip article { min-height: auto; padding: 15px; }
    .feature-strip h2 { margin: 7px 0 3px; }
    footer { gap: 18px; font-size: 8px; }
}

/* Login and sign-up screens */
.account-page, .home-page { display: grid; min-height: 100vh; padding: 25px; color: var(--ink); background: radial-gradient(circle at 86% 13%, rgba(119, 81, 186, .27), transparent 25rem), var(--paper); place-items: center; }
.account-card, .home-card { position: relative; width: min(100%, 430px); padding: 37px 38px 32px; background: rgba(255, 255, 255, .83); border: 1px solid #e2d8ed; border-radius: 18px; box-shadow: 0 24px 65px rgba(46, 27, 67, .14); }.back { display: inline-block; margin-bottom: 27px; color: #655a6d; font-size: 11px; text-decoration: none; }.back:hover { color: var(--violet); }.account-logo { display: block; color: var(--ink); font-family: "Playfair Display", serif; font-size: 28px; font-weight: 600; letter-spacing: -.06em; text-decoration: none; }.account-logo span { color: var(--violet); }.account-card .eyebrow, .home-card .eyebrow { margin: 28px 0 8px; color: var(--violet); }.account-card h1, .home-card h1 { margin: 0; font-family: "Playfair Display", "Noto Sans KR", serif; font-size: 27px; font-weight: 500; letter-spacing: -.05em; }.home-card h1 span { color: var(--violet); }.account-intro, .home-card > p:not(.eyebrow) { margin: 11px 0 28px; color: #766b80; font-size: 12px; }.account-card form { display: grid; }.account-card label { margin: 0 0 8px; font-size: 12px; font-weight: 700; }.account-card input { height: 47px; margin: 0 0 18px; padding: 0 13px; font: inherit; font-size: 12px; background: var(--paper); border: 1px solid #ded2e9; border-radius: 8px; outline: none; }.account-card input:focus { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(119, 81, 186, .12); }.account-card button, .home-card button { height: 48px; color: var(--paper); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; background: linear-gradient(100deg, #3e244f, var(--violet)); border: 0; border-radius: 8px; }.account-card button:disabled { opacity: .7; cursor: wait; }.account-switch { margin: 22px 0 0; color: #766b80; font-size: 12px; text-align: center; }.account-switch a { color: var(--violet); font-weight: 700; text-decoration: none; }.form-message { min-height: 18px; margin: -5px 0 10px; color: #8f4a63; font-size: 11px; line-height: 1.4; }.form-message.error { color: #a23f5b; }

/* Authenticated Trend space */
.dashboard-page { min-height: 100vh; color: var(--ink); background: #fdfbff; }.dashboard-nav { display: flex; align-items: center; justify-content: space-between; max-width: 1180px; margin: 0 auto; padding: 24px 32px; border-bottom: 1px solid #e4dced; }.logo.dark { color: var(--ink); }.dashboard-nav nav { display: flex; gap: 23px; align-items: center; }.dashboard-nav nav a, .dashboard-nav button { padding: 7px 0; color: #625a69; font: inherit; font-size: 12px; font-weight: 600; text-decoration: none; background: none; border: 0; cursor: pointer; }.dashboard-nav nav a.active, .dashboard-nav nav a:hover, .dashboard-nav button:hover { color: var(--violet); }.dashboard-main { max-width: 1010px; margin: 0 auto; padding: 78px 32px; }.dashboard-intro .eyebrow, .profile-editor .eyebrow { color: var(--violet); }.dashboard-intro h1, .profile-editor h1 { margin: 0; font-family: "Playfair Display", serif; font-size: clamp(38px, 5vw, 62px); font-weight: 500; letter-spacing: -.07em; }.dashboard-intro h1 span { color: var(--violet); }.dashboard-intro > p:not(.eyebrow), .editor-intro { margin: 14px 0 42px; color: #716777; font-size: 14px; }.dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }.profile-summary, .people-search, .profile-editor { padding: 29px; background: #fff; border: 1px solid #e7deef; border-radius: 16px; box-shadow: 0 12px 30px rgba(64, 38, 84, .06); }.profile-summary { display: flex; gap: 19px; align-items: flex-start; }.avatar { display: grid; flex: 0 0 auto; width: 40px; height: 40px; overflow: hidden; color: var(--paper); font-family: "Playfair Display", serif; font-size: 16px; background: linear-gradient(135deg, #4e2b62, var(--violet)); border-radius: 50%; place-items: center; }.avatar img { width: 100%; height: 100%; object-fit: cover; }.avatar.large { width: 78px; height: 78px; font-size: 28px; }.profile-summary .eyebrow { margin: 3px 0 8px; color: var(--violet); }.profile-summary h2, .people-search h2 { margin: 0; font-family: "Playfair Display", serif; font-size: 25px; font-weight: 500; }.profile-summary p:not(.eyebrow) { margin: 7px 0 16px; color: #786d80; font-size: 12px; }.profile-stat { display: grid; margin-bottom: 17px; }.profile-stat strong { font-family: "Playfair Display", serif; font-size: 24px; }.profile-stat span { color: #786d80; font-size: 10px; }.outline-button { display: inline-block; padding: 9px 12px; color: var(--violet); font-size: 11px; font-weight: 700; text-decoration: none; border: 1px solid #cdbce9; border-radius: 7px; }.outline-button:hover { color: var(--paper); background: var(--violet); }.people-search .eyebrow { margin: 0 0 8px; color: var(--violet); }.people-search form { display: flex; gap: 8px; margin: 19px 0 17px; }.people-search input, .profile-editor input, .profile-editor textarea { width: 100%; padding: 11px 12px; font: inherit; font-size: 12px; background: #fdfbff; border: 1px solid #dfd2e9; border-radius: 8px; outline: none; }.people-search input:focus, .profile-editor input:focus, .profile-editor textarea:focus { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(119, 81, 186, .1); }.people-search button, .profile-editor button { padding: 0 15px; color: var(--paper); font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; background: linear-gradient(100deg, #3e244f, var(--violet)); border: 0; border-radius: 8px; }.search-results { display: grid; gap: 9px; min-height: 110px; color: #877b8c; font-size: 11px; }.search-results > p { margin: 12px 0; }.search-member { display: flex; gap: 10px; align-items: center; padding: 7px; background: #f8f3ff; border-radius: 8px; }.search-member strong, .search-member small { display: block; }.search-member strong { font-size: 11px; }.search-member small { margin-top: 3px; color: #83768b; font-size: 10px; }.profile-page-main { max-width: 650px; margin: 0 auto; padding: 65px 24px; }.profile-editor .eyebrow { margin: 0 0 9px; }.profile-editor h1 { font-size: 43px; }.profile-editor form { display: grid; }.profile-editor label { margin: 15px 0 7px; font-size: 12px; font-weight: 700; }.profile-editor textarea { min-height: 100px; resize: vertical; }.profile-photo-row { display: flex; gap: 16px; align-items: center; margin: 20px 0 5px; padding: 15px; background: #f8f3ff; border-radius: 11px; }.editor-avatar { width: 68px; height: 68px; font-size: 25px; }.profile-photo-row label { display: block; margin: 0 0 6px; }.profile-photo-row input { padding: 0; border: 0; background: transparent; }.profile-photo-row small, .friend-card small { display: block; margin-top: 5px; color: #82758b; font-size: 10px; }.friend-card { display: grid; grid-template-columns: auto 1fr; column-gap: 7px; align-items: baseline; margin: 18px 0; padding: 14px; background: #f5f0ff; border-radius: 10px; }.friend-card strong { font-family: "Playfair Display", serif; font-size: 27px; }.friend-card span { font-size: 12px; font-weight: 700; }.friend-card small { grid-column: 1 / -1; }.profile-editor button { height: 48px; }.form-message.success { color: #547a63; }
@media (max-width: 700px) { .minimal-landing { padding: 21px 20px; }.minimal-landing h1 { font-size: clamp(76px, 26vw, 150px); }.dashboard-nav { padding: 18px; }.dashboard-nav nav { gap: 14px; }.dashboard-main { padding: 50px 18px; }.dashboard-grid { grid-template-columns: 1fr; }.profile-summary { padding: 21px; }.profile-page-main { padding: 42px 18px; } }