/**
 * NSKit 메일 (nsmail) — 토큰 + 앱 골격
 *
 * 팔레트 = 너울소프트 로고 실측 5색에서 **도출**(BRIEF §3, 2026-11-01 대표 결정).
 *   하늘 #64c5d8 · 밝은 시안 #43bdea · 파랑 #3a61ac · 짙은 파랑 #264a9b · 남색 #1f2d5e
 * 면·선·글자색은 남색을 흰 바탕에 옅게 섞은 값이다. 색은 여기 :root 에만 둔다 — 화면 파일은 var() 만 쓴다.
 */
:root {
    /* 로고 원색 */
    --brand-sky: #64c5d8;
    --brand-cyan: #43bdea;
    --brand-blue: #3a61ac;
    --brand-deep: #264a9b;
    --brand-navy: #1f2d5e;

    /* 면 · 선 (남색 2~14% on white) */
    --ml-bg: #f3f5f9;
    --ml-surface: #ffffff;
    --ml-surface-2: #eef1f7;
    --ml-surface-sel: #e4ebf7;
    --ml-line: #dde2ec;
    --ml-line-strong: #c4ccdc;

    /* 글자 (남색 계열) */
    --ml-ink: #16203d;
    --ml-ink-2: #46506d;
    --ml-ink-3: #7a839c;
    --ml-ink-inverse: #ffffff;

    /* 동작 */
    --ml-accent: var(--brand-deep);
    --ml-accent-hover: var(--brand-navy);
    --ml-unread: var(--brand-cyan);
    --ml-star: var(--brand-blue);
    --ml-focus: rgba(67, 189, 234, 0.45);
    --ml-danger: #b3263e;
    --ml-danger-bg: #fbecef;
    --ml-notice-bg: #e9f6fb;
    --ml-notice-ink: #145f7d;

    /* 왼쪽 사서함 칸 (남색 바탕) */
    --ml-nav-bg: var(--brand-navy);
    --ml-nav-ink: #e3e8f4;
    --ml-nav-ink-2: #9ba7c6;
    --ml-nav-hover: rgba(255, 255, 255, 0.06);
    --ml-nav-sel: rgba(100, 197, 216, 0.18);
    --ml-nav-count: var(--brand-sky);
    --ml-nav-line: rgba(255, 255, 255, 0.08);

    /* 도메인 배지 — 로고 그라데이션(남색→하늘) 위의 7점 */
    --dom-nskit-fg: #ffffff;        --dom-nskit-bg: var(--brand-navy);
    --dom-rightmind-fg: #2d4f93;    --dom-rightmind-bg: #e3e9f6;
    --dom-singon-fg: #0b6d93;       --dom-singon-bg: #def3fb;
    --dom-piwooda-fg: #1b7586;      --dom-piwooda-bg: #e0f3f6;
    --dom-bigfoot-fg: #ffffff;      --dom-bigfoot-bg: var(--brand-deep);
    --dom-hellokpop-fg: #22679f;    --dom-hellokpop-bg: #e1edf8;
    --dom-ssaemnote-fg: #4a5781;    --dom-ssaemnote-bg: #eaedf5;
    --dom-other-fg: var(--ml-ink-2); --dom-other-bg: var(--ml-surface-2);

    /* 치수 */
    --ml-radius: 8px;
    --ml-radius-sm: 5px;
    --ml-nav-w: 248px;
    --ml-list-w: 392px;
    --ml-shadow: 0 1px 2px rgba(22, 32, 61, 0.06), 0 4px 16px rgba(22, 32, 61, 0.06);
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);

    /* 스캐폴드 다이얼로그가 읽는 이름 */
    --nsmail-primary: var(--ml-accent);
}

html, body {
    background: var(--ml-bg);
}

body {
    font-family: 'Spoqa Han Sans Neo', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
    color: var(--ml-ink);
    -webkit-font-smoothing: antialiased;
}

button, input {
    font-family: inherit;
}

/* 엔진 토스트를 앱 글꼴·색으로 */
.nskit-toast {
    font-family: 'Spoqa Han Sans Neo', -apple-system, sans-serif !important;
    background: var(--ml-ink) !important;
    color: var(--ml-ink-inverse) !important;
    border-radius: var(--ml-radius) !important;
    letter-spacing: 0 !important;
    bottom: calc(32px + var(--safe-bottom)) !important;
}

/* 도메인 배지 (목록·본문 공용) */
.ml-dom {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1;
    white-space: nowrap;
    color: var(--dom-other-fg);
    background: var(--dom-other-bg);
}
.ml-dom[data-dom="nskit"]     { color: var(--dom-nskit-fg);     background: var(--dom-nskit-bg); }
.ml-dom[data-dom="rightmind"] { color: var(--dom-rightmind-fg); background: var(--dom-rightmind-bg); }
.ml-dom[data-dom="singon"]    { color: var(--dom-singon-fg);    background: var(--dom-singon-bg); }
.ml-dom[data-dom="piwooda"]   { color: var(--dom-piwooda-fg);   background: var(--dom-piwooda-bg); }
.ml-dom[data-dom="bigfootcamp"] { color: var(--dom-bigfoot-fg); background: var(--dom-bigfoot-bg); }
.ml-dom[data-dom="hellokpop"] { color: var(--dom-hellokpop-fg); background: var(--dom-hellokpop-bg); }
.ml-dom[data-dom="ssaemnote"] { color: var(--dom-ssaemnote-fg); background: var(--dom-ssaemnote-bg); }

/* 아이콘 버튼 */
.ml-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: var(--ml-radius-sm);
    background: transparent;
    color: var(--ml-ink-2);
    cursor: pointer;
    font-size: 18px;
    flex-shrink: 0;
}
.ml-icon-btn:hover { background: var(--ml-surface-2); color: var(--ml-ink); }
.ml-icon-btn:focus-visible { outline: 2px solid var(--ml-focus); outline-offset: 1px; }
.ml-icon-btn.is-on { color: var(--ml-star); }
.ml-icon-btn[hidden] { display: none; }

/* 사이드 패널(좁은 화면의 사서함) — 남색 면을 가장자리까지(엔진 기본 여백·흰 바탕을 덮는다). 이 앱의 패널은 이것 하나다 */
#side-panel-area .side-panel-container {
    background: var(--ml-nav-bg);
}
#side-panel-area .side-panel-container .side-panel-content {
    padding: 0 !important;
    height: 100%;
    overflow: hidden;
}
#side-panel-area .ml-panel-nav {
    height: 100%;
    background: var(--ml-nav-bg);
}

/* 앱 골격 — 씬이 화면 전체를 쓴다(스크롤은 각 칸 안에서) */
.ml-app, .ml-app #scene-area, .ml-app #scene-area > [include-scene] {
    position: absolute;
    inset: 0;
    overflow: hidden;
}