:root {
    /* Font */
    --font-kr: "SUIT", sans-serif;
    --font-en: "Inter", "SUIT", sans-serif;

    /* Background */
    --color-page-bg: #F7F1E8;
    --color-paper: #FEFCF8;
    --color-paper-soft: #FDFBF7;
    --color-paper-deep: #F8F2E9;

    /* Border */
    --color-border: #E7DDD0;
    --color-border-soft: #ECE3D7;

    /* Text */
    --color-text-main: #2F2A24;
    --color-text-sub: #6F6257;
    --color-text-muted: #8A7B6A;

    /* Primary */
    --color-primary: #5F7F44;
    --color-primary-dark: #526F3B;
    --color-primary-soft: #EEF6E6;
    --color-primary-border: #D7E5C9;

    /* Blue Accent */
    --color-blue: #5E86C5;
    --color-blue-soft: #EEF4FB;

    /* Danger */
    --color-danger: #B14D42;
    --color-danger-soft: #FFF1F0;
    --color-danger-border: #F2D4CF;

    /* Shadow */
    --shadow-card: 0 10px 22px rgba(97, 73, 43, 0.06),
                   0 22px 48px rgba(97, 73, 43, 0.08);

    --shadow-button: 0 6px 14px rgba(97, 73, 43, 0.07);

        /* Notebook */

    --color-notebook: #FFF9EF;

    --color-notebook-inner: #FDFBF7;

    --color-line: #EDE2D3;

    --color-grid: rgba(95,127,68,.04);
}

body {
    max-width: none;
    margin: 0;
    background: #f5efe4;
    color: #2f2a24;
    font-family: var(--font-kr);

}

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

.app-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 20px;
    padding: 20px;
    box-sizing: border-box;
}

.app-main {
    min-width: 0;
    background: #fff8ed;
    border: 1px solid #eadcc8;
    border-radius: 28px;
    padding: 28px;
    box-shadow: 0 14px 36px rgba(88, 62, 34, 0.08);
}

/* =========================
   Typography
========================= */

/* 기본 UI는 한글 서비스용 SUIT */
body,
button,
select,
.korean-ui {
    font-family: var(--font-kr);
}

/* 입력/영어 콘텐츠는 Inter */
input,
textarea,
.font-en,
.english-title,
.english-text,
.english-content {
    font-family: var(--font-en);
}

/* 영어 제목/짧은 UI 문구 */
.english-title {
    font-weight: 800;
    letter-spacing: -0.03em;
}

/* 영어 일기/AI 첨삭/입력 본문 공통 */
.english-content {
    font-size: 17px;
    font-weight: 500;
    line-height: 1.75;
    color: #2F2F2F;
}

/* 영어 입력창 공통 */
input.english-content,
textarea.english-content {
    font-family: var(--font-en);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.75;
}

/* 한글 UI를 명시적으로 써야 할 때 */
.font-kr {
    font-family: var(--font-kr);
}

/* 영어 폰트를 명시적으로 써야 할 때 */
.font-en {
    font-family: var(--font-en);
}


/* =========================
   Mobile app frame
========================= */
.mobile-topbar,
.mobile-sidebar-backdrop,
.mobile-sidebar-close { display: none; }

@media (max-width: 820px) {
    html { background: #f5efe4; }
    body { min-width: 0; overflow-x: hidden; }

    .mobile-topbar {
        position: sticky;
        top: 0;
        z-index: 90;
        display: grid;
        grid-template-columns: 44px 1fr 44px;
        align-items: center;
        height: 64px;
        padding: max(8px, env(safe-area-inset-top)) 14px 8px;
        box-sizing: border-box;
        background: rgba(255, 250, 242, .94);
        border-bottom: 1px solid #eadcc8;
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

    .mobile-menu-button,
    .mobile-write-button,
    .mobile-sidebar-close {
        width: 40px;
        height: 40px;
        display: grid;
        place-items: center;
        padding: 0;
        border: 1px solid #e5d8c7;
        border-radius: 13px;
        background: #fffdf8;
        color: #5f7445;
        box-shadow: 0 4px 12px rgba(88,62,34,.06);
        cursor: pointer;
    }

    .mobile-menu-button .lucide,
    .mobile-write-button .lucide,
    .mobile-sidebar-close .lucide { width: 21px; height: 21px; }

    .mobile-brand {
        justify-self: center;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
        font-family: var(--font-en);
        color: #2f2a24;
    }
    .mobile-brand-icon {
        width: 30px;
        height: 30px;
        display: grid;
        place-items: center;
        border-radius: 10px;
        background: #fff;
        color: #6e8451;
        box-shadow: 0 4px 12px rgba(88,62,34,.07);
    }
    .mobile-brand-icon .lucide { width: 17px; height: 17px; }
    .mobile-brand strong { font-size: 18px; font-style: italic; letter-spacing: -.03em; }

    .app-shell {
        display: block;
        width: 100%;
        min-height: 0;
        height: auto;
        padding: 0;
    }

    .app-main {
        display: block;
        width: 100%;
        min-height: 0;
        height: auto;
        padding: 14px 14px 26px;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        box-sizing: border-box;
        background: #fff8ed;
    }

    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 110;
        width: min(84vw, 320px);
        height: 100dvh;
        max-height: none;
        top: 0;
        padding: calc(22px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom));
        border-radius: 0 24px 24px 0;
        transform: translateX(-105%);
        transition: transform .24s ease;
        box-shadow: 18px 0 48px rgba(47,42,36,.18);
        overflow: hidden;
    }

    body.mobile-menu-open { overflow: hidden; }
    body.mobile-menu-open .sidebar { transform: translateX(0); }

    .mobile-sidebar-close {
        position: absolute;
        top: calc(14px + env(safe-area-inset-top));
        right: 14px;
        z-index: 2;
    }

    .mobile-sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 100;
        display: block;
        background: rgba(47,42,36,.35);
        opacity: 0;
        transition: opacity .2s ease;
    }
    .mobile-sidebar-backdrop[hidden] { display: none; }
    body.mobile-menu-open .mobile-sidebar-backdrop { opacity: 1; }

    .sidebar-logo { padding-right: 52px; }
    .sidebar-menu a { min-height: 46px; }
}