/* 모바일 전 화면 공통 한지 테마. 기능별 규칙은 mobile.css에 두고 색과 표면만 여기서 맞춘다. */
:root {
    --hanji-paper: #f1e9d8;
    --hanji-paper-2: #ece2cd;
    --hanji-surface: #fbf7ec;
    --hanji-ink: #2b2622;
    --hanji-ink-soft: #786d5e;
    --hanji-line: #e0d5be;
    --hanji-ochre: #b07d2b;
    --hanji-ochre-deep: #8f6418;
    --hanji-cream: #f6efe0;
    --hanji-serif: "Nanum Myeongjo", "AppleMyungjo", "Batang", Georgia, serif;
    --mobile-ink: var(--hanji-ink);
    --mobile-muted: var(--hanji-ink-soft);
    --mobile-line: var(--hanji-line);
    --mobile-soft: var(--hanji-paper);
    --mobile-surface: var(--hanji-surface);
    --mobile-navy: var(--hanji-ink);
    --mobile-blue: var(--hanji-ochre-deep);
    --mobile-teal: #766441;
    --mobile-green: #60744b;
    --mobile-red: #a0483e;
    --mobile-shadow: 0 12px 28px rgba(43, 38, 34, 0.10);
    --mobile-shadow-soft: 0 8px 20px rgba(43, 38, 34, 0.06);
    --mobile-brand-gradient: linear-gradient(135deg, #2b2622, #4b3b2d);
    --mobile-radius-xl: 16px;
    --mobile-radius-lg: 12px;
    --mobile-radius-md: 10px;
}

html { background: var(--hanji-paper-2); }
body, .mobile-body--guest {
    color: var(--hanji-ink);
    background: var(--hanji-paper-2);
}

.mobile-shell {
    padding-bottom: calc(146px + env(safe-area-inset-bottom));
    background-color: var(--hanji-paper);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
    box-shadow: none;
}

.mobile-content { gap: 22px; padding: 22px 20px 16px; }
.mobile-content > * { min-width: 0; }

.mobile-topbar {
    min-height: 72px;
    border-bottom: 0;
    padding: 10px 20px;
    background: var(--hanji-ink);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.mobile-topbar button,
.mobile-topbar .mobile-icon-button,
.mobile-topbar a {
    border: 0;
    border-radius: 8px;
    color: var(--hanji-cream);
    background: transparent;
}

.mobile-topbar .mobile-icon-button:active,
.mobile-topbar button:active { background: rgba(246, 239, 224, 0.12); }
.mobile-brand { font-size: 22px; letter-spacing: 0; }
.mobile-brand strong { color: var(--hanji-cream); font-family: var(--hanji-serif); letter-spacing: 0.06em; }
.mobile-brand span svg { width: 30px; height: 30px; border: 0; border-radius: 8px; box-shadow: none; }

:is(a, button, input, select, textarea):focus-visible {
    outline-color: rgba(176, 125, 43, 0.50);
}

.mobile-section-heading h2,
.mobile-approval-title h1,
.mobile-approval-detail-head h1,
.mobile-notice-detail__head h1,
.mobile-menu-heading h1,
.mobile-auth-heading h1,
.alarm-page__hero h1,
.mobile-fee-notice-header h1 {
    color: var(--hanji-ink);
    font-family: var(--hanji-serif);
    letter-spacing: 0.01em;
}

.mobile-section-heading h2 svg,
.mobile-home-title svg,
.mobile-rhwp-card h2 svg,
.mobile-approval-line-card h2 svg,
.mobile-approval-attachment-card h2 svg { color: var(--hanji-ochre); }
.mobile-section-heading a,
.mobile-section-heading span { color: var(--hanji-ink-soft); }

/* 종이 카드와 상태 표식 */
:is(.mobile-notice-card, .mobile-document-card, .mobile-directory-card,
    .mobile-balance-card, .mobile-approval-stats article,
    .mobile-approval-summary a, .mobile-approval-box-grid a,
    .mobile-approval-settings-card, .mobile-approval-detail-head,
    .mobile-rhwp-card, .mobile-approval-line-card,
    .mobile-approval-attachment-card, .mobile-approval-history-card,
    .mobile-approval-action-panel, .mobile-notice-feed-card,
    .mobile-notice-detail, .mobile-notice-attachment-card,
    .mobile-notice-neighbors, .mobile-fee-admin-card,
    .mobile-fee-admin-metric, .mobile-fee-history article,
    .mobile-fee-notice-breakdown, .mobile-fee-notice-account) {
    border: 1px solid var(--hanji-line);
    border-radius: 12px;
    background: var(--hanji-surface);
    box-shadow: 0 8px 20px rgba(43, 38, 34, 0.06);
}

.mobile-empty {
    border: 1px dashed var(--hanji-line);
    border-radius: 12px;
    color: var(--hanji-ink-soft);
    background: var(--hanji-surface);
}
.mobile-empty svg { color: var(--hanji-ochre); }

.mobile-chip,
.mobile-status {
    color: var(--hanji-ochre-deep);
    background: rgba(176, 125, 43, 0.13);
}
.mobile-chip--blue,
.mobile-chip--sky,
.mobile-chip--navy,
.mobile-status--in_progress,
.mobile-approval-line-item--pending em {
    color: var(--hanji-ochre-deep);
    background: #f0e2c3;
}
.mobile-chip--green,
.mobile-status--completed,
.mobile-approval-line-item--approved em { color: #52653e; background: #e8eddd; }
.mobile-chip--red,
.mobile-status--rejected,
.mobile-status--returned { color: #963c34; background: #f5e2db; }
.mobile-status--draft,
.mobile-status--canceled { color: var(--hanji-ink-soft); background: var(--hanji-paper-2); }

.mobile-wide-button,
.mobile-primary-button,
.mobile-floating-button,
.mobile-notice-compose-button,
.mobile-fee-admin-submit-btn,
.mobile-balance-card a,
.mobile-approval-btn-approve,
.mobile-approval-action-form--approve button {
    border: 0;
    border-radius: 10px;
    color: var(--hanji-cream);
    background: var(--hanji-ink);
    box-shadow: 0 6px 14px rgba(43, 38, 34, 0.18);
}
.mobile-document-card::before { background: var(--hanji-ochre); }

/* 공통 하단 메뉴와 보조 작업 */
.mobile-bottom-nav {
    border-top: 1px solid var(--hanji-line);
    background: var(--hanji-paper);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.mobile-bottom-nav a { color: var(--hanji-ink-soft); }
.mobile-bottom-nav a.is-active {
    border-radius: 0;
    color: var(--hanji-ink);
    background: transparent;
}
.mobile-utility-bar {
    position: fixed;
    right: max(10px, calc((100vw - 480px) / 2 + 10px));
    bottom: calc(78px + env(safe-area-inset-bottom));
    left: max(10px, calc((100vw - 480px) / 2 + 10px));
    width: auto;
    margin: 0;
    border: 1px solid var(--hanji-line);
    border-radius: 12px;
    background: var(--hanji-cream);
    box-shadow: 0 10px 26px rgba(43, 38, 34, 0.14);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.mobile-utility-bar button,
.mobile-utility-bar a { color: var(--hanji-ink); }
.mobile-utility-bar > a:first-child,
.mobile-utility-bar form:first-child button { border-right-color: var(--hanji-line); }

/* 메뉴 */
.mobile-menu-panel { min-height: 0; padding: 20px 4px 28px; }
.mobile-menu-heading h1 { font-size: 28px; }
.mobile-menu-heading a {
    border-color: var(--hanji-line);
    color: var(--hanji-ink-soft);
    background: var(--hanji-surface);
}
.mobile-menu-grid a,
.mobile-menu-grid a span { color: var(--hanji-ink); }
.mobile-menu-grid a svg,
.mobile-menu-grid a:nth-child(3n + 2) svg,
.mobile-menu-grid a:nth-child(3n) svg {
    border: 1px solid var(--hanji-line);
    border-radius: 14px;
    color: var(--hanji-ink);
    background: var(--hanji-surface);
    box-shadow: none;
    stroke-width: 1.6;
}
.mobile-menu-grid a.is-active svg {
    border-color: var(--hanji-ink);
    color: var(--hanji-cream);
    background: var(--hanji-ink);
    box-shadow: none;
}

/* 결재 목록과 상세 */
.mobile-approval-hero {
    border: 0;
    padding: 0;
    color: var(--hanji-ink);
    background: transparent;
    box-shadow: none;
}
.mobile-segmented { background: var(--hanji-paper-2); }
.mobile-notice-categories a,
.mobile-segmented a,
.mobile-approval-quick a { border-color: var(--hanji-line); color: var(--hanji-ink-soft); background: var(--hanji-surface); }
.mobile-notice-categories a.is-active,
.mobile-segmented a.is-active,
.mobile-approval-quick a.is-active {
    border-color: var(--hanji-ink);
    color: var(--hanji-cream);
    background: var(--hanji-ink);
    box-shadow: none;
}
.mobile-approval-stats article.is-dark,
.mobile-approval-summary a.is-primary,
.mobile-approval-box-grid a.is-active {
    border-color: var(--hanji-ink);
    color: var(--hanji-cream);
    background: var(--hanji-ink);
    box-shadow: none;
}
.mobile-approval-stats article.is-dark strong,
.mobile-approval-summary a.is-primary strong { color: var(--hanji-cream); }
.mobile-approval-stats article:not(.is-dark) strong { color: var(--hanji-ink); }

.mobile-search-row label,
.mobile-notice-search,
.mobile-approval-search,
.mobile-fee-admin-filter-row :is(input, select) {
    border-color: var(--hanji-line);
    border-radius: 10px;
    color: var(--hanji-ink);
    background: var(--hanji-surface);
    box-shadow: none;
}
.mobile-search-row button { border-color: var(--hanji-line); color: var(--hanji-ink); background: var(--hanji-surface); }
.mobile-document-card > strong,
.mobile-notice-feed-card > strong { color: var(--hanji-ink); font-family: var(--hanji-serif); }
.mobile-document-card time,
.mobile-document-card header em,
.mobile-document-card > small,
.mobile-document-card footer time,
.mobile-approval-detail-head small,
.mobile-approval-detail-head dt,
.mobile-approval-line-item small,
.mobile-approval-history-card span { color: var(--hanji-ink-soft); }
.mobile-document-card footer :is(span, em),
.mobile-approval-line-item :is(strong, p),
.mobile-approval-detail-head dd { color: var(--hanji-ink); }
.mobile-document-card footer + footer { border-top-color: var(--hanji-line); }
.mobile-approval-detail-head dl div,
.mobile-rhwp-body,
.mobile-rhwp-paper,
.mobile-approval-line-item p,
.mobile-approval-attachment-card :is(a, div),
.mobile-approval-action-form textarea {
    border-color: var(--hanji-line);
    color: var(--hanji-ink);
    background: var(--hanji-surface);
}
.mobile-approval-detail-head dl div,
.mobile-approval-attachment-card :is(a, div) { background: var(--hanji-paper); }
.mobile-approval-line-list { background: var(--hanji-paper-2); }
.mobile-approval-line-item + .mobile-approval-line-item { border-top-color: var(--hanji-line); }
.mobile-approval-line-item > span { background: var(--hanji-ink); }
.mobile-approval-attachment-card :is(a, div) > svg,
.mobile-rhwp-card header a { color: var(--hanji-ochre-deep); }
.mobile-approval-action-form textarea:focus,
.mobile-field input:focus { border-color: var(--hanji-ochre); box-shadow: 0 0 0 3px rgba(176, 125, 43, 0.16); }
.mobile-approval-btn-neutral,
.mobile-approval-action-form--neutral button,
.mobile-approval-resubmit-link { color: var(--hanji-ink); background: var(--hanji-paper-2); }
.mobile-approval-btn-reject,
.mobile-approval-action-form--reject button { color: var(--hanji-cream); background: #963c34; }
.mobile-detail-back a { color: var(--hanji-ink-soft); }

/* 알림 */
.mobile-notif__backdrop { background: rgba(43, 38, 34, 0.42); }
.mobile-notif__sheet { border: 1px solid var(--hanji-line); background: var(--hanji-surface); box-shadow: var(--mobile-shadow); }
.mobile-notif__head { border-bottom-color: var(--hanji-line); }
.mobile-notif__link:hover,
.mobile-notif__link:active { background: var(--hanji-paper); }
.mobile-notif__chip { background: var(--hanji-ink-soft); }
.is-approval .mobile-notif__chip { background: var(--hanji-ochre-deep); }
.is-chat .mobile-notif__chip { background: #766441; }
.alarm-page__hero h1 { font-size: 28px; }
.alarm-page { width: 100%; min-width: 0; }
.alarm-page__filters { width: 100%; max-width: 100%; }
.alarm-chip { border-color: var(--hanji-line); color: var(--hanji-ink-soft); background: var(--hanji-surface); }
.alarm-chip__count { color: var(--hanji-ink); background: var(--hanji-paper-2); }
.alarm-chip.is-active { border-color: var(--hanji-ink); color: var(--hanji-cream); background: var(--hanji-ink); }
.alarm-card > a,
.alarm-pager__num,
.alarm-pager__edge { border-color: var(--hanji-line); background: var(--hanji-surface); box-shadow: none; }
.alarm-card.is-approval .alarm-card__avatar { background: #f0e2c3; }
.alarm-card.is-chat .alarm-card__avatar { background: #e8e5d8; }
.alarm-card.is-approval .alarm-card__type { color: var(--hanji-ochre-deep); }
.alarm-card.is-chat .alarm-card__type { color: #635534; }
.alarm-pager__num.is-active { border-color: var(--hanji-ink); color: var(--hanji-cream); background: var(--hanji-ink); }

/* 공지 목록과 본문 */
.mobile-notice-hero,
.mobile-fee-admin-hero,
.mobile-notice-editor-hero {
    border-radius: 12px;
    color: var(--hanji-cream);
    background: var(--hanji-ink);
    box-shadow: none;
}
.mobile-notice-hero {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 6px;
    padding: 22px;
}
.mobile-notice-hero p,
.mobile-notice-hero span { margin: 0; }
.mobile-notice-hero :is(h1, p, span),
.mobile-fee-admin-hero :is(h1, p, span),
.mobile-notice-editor-hero :is(h1, p, span) { color: var(--hanji-cream); }
.mobile-notice-hero h1,
.mobile-fee-admin-hero h1,
.mobile-notice-editor-hero h1 { font-family: var(--hanji-serif); letter-spacing: 0.02em; }
.mobile-notice-feed-card footer { border-top-color: var(--hanji-line); }
.mobile-notice-search svg,
.mobile-notice-feed-card p,
.mobile-notice-feed-card time,
.mobile-notice-author,
.mobile-notice-author time,
.mobile-notice-detail__body p { color: var(--hanji-ink-soft); }
.mobile-notice-feed-card footer,
.mobile-notice-feed-card footer span,
.mobile-notice-author strong,
.mobile-notice-detail__body { color: var(--hanji-ink); }
.mobile-notice-author > span { color: var(--hanji-ochre-deep); background: var(--hanji-paper); }
.mobile-notice-pagination a,
.mobile-notice-attachment-card a,
.mobile-notice-neighbors a { border-color: var(--hanji-line); color: var(--hanji-ink); background: var(--hanji-surface); }
.mobile-notice-pagination a.is-active { border-color: var(--hanji-ink); color: var(--hanji-cream); background: var(--hanji-ink); }
.mobile-notice-detail__body,
.mobile-notice-html-content blockquote,
.mobile-notice-html-content :is(th, td) { border-color: var(--hanji-line); }
.mobile-notice-html-content :is(blockquote, th, tr:nth-child(even) td, pre) { background: var(--hanji-paper); }
.mobile-notice-html-content :is(a, blockquote) { color: var(--hanji-ochre-deep); }

/* 명부와 회비 */
.mobile-avatar { color: var(--hanji-cream); background: var(--hanji-ochre-deep); box-shadow: none; }
.mobile-directory-card :is(span, small) { color: var(--hanji-ink-soft); }
.mobile-fee-summary,
.mobile-fee-notice-amount { border-radius: 12px; color: var(--hanji-cream); background: var(--hanji-ink); box-shadow: none; }
.mobile-fee-summary :is(h1, dt, dd, span),
.mobile-fee-notice-amount :is(strong, small, span) { color: var(--hanji-cream); }
.mobile-fee-check { color: var(--hanji-cream); background: var(--hanji-ochre-deep); }
.mobile-balance-card span,
.mobile-fee-history small { color: var(--hanji-ink-soft); }
.mobile-fee-notice-header { border-bottom-color: var(--hanji-line); }
.mobile-fee-notice-header p,
.mobile-fee-notice-breakdown > div span,
.mobile-fee-notice-account > div span,
.mobile-fee-notice-footer > div span { color: var(--hanji-ink-soft); }
.mobile-fee-notice-breakdown > div strong,
.mobile-fee-notice-account > div strong,
.mobile-fee-notice-footer > div span:last-child { color: var(--hanji-ink); }
.mobile-fee-history article > span { background: var(--hanji-paper-2); }
.mobile-fee-history em,
.mobile-fee-admin-badge.is-paid,
.mobile-fee-notice-status.is-paid { color: #52653e; background: #e8eddd; }
.mobile-fee-history article.is-unpaid em,
.mobile-fee-admin-badge.is-unpaid,
.mobile-fee-notice-status.is-unpaid { color: #963c34; background: #f5e2db; }
.mobile-fee-admin-metric.is-green strong,
.mobile-fee-notice-breakdown > div strong.is-paid { color: #52653e; }
.mobile-fee-admin-metric.is-red strong,
.mobile-fee-notice-breakdown > div strong.is-unpaid { color: #963c34; }
.mobile-fee-month-dot.is-paid { background: #67794f; }
.mobile-fee-month-dot.is-unpaid { background: #a0483e; }
.mobile-fee-notice-breakdown > div,
.mobile-fee-notice-account > div,
.mobile-fee-admin-card__head,
.mobile-fee-admin-card__summary { border-color: var(--hanji-line); }
.mobile-fee-notice-account > div a,
.mobile-fee-admin-card__notice-link { color: var(--hanji-ochre-deep); }
.mobile-fee-admin-controls {
    border: 1px solid var(--hanji-line);
    border-radius: 12px;
    background: var(--hanji-surface);
}
.mobile-fee-admin-status-btn { border-color: var(--hanji-line); color: var(--hanji-ink-soft); background: var(--hanji-surface); }
.mobile-fee-admin-status-btn.is-active { border-color: var(--hanji-ink); color: var(--hanji-cream); background: var(--hanji-ink); }
.mobile-fee-admin-filter-row input[type="search"],
.mobile-fee-admin-filter-row select { border-color: var(--hanji-line); color: var(--hanji-ink); background: var(--hanji-paper); }
.mobile-fee-admin-metric span,
.mobile-fee-admin-list-header,
.mobile-fee-admin-card__summary span { color: var(--hanji-ink-soft); }
.mobile-fee-admin-card__name,
.mobile-fee-admin-card__summary strong { color: var(--hanji-ink); }
.mobile-fee-admin-card__summary { background: var(--hanji-paper); }
.mobile-fee-admin-metric.is-blue strong,
.mobile-fee-admin-metric.is-purple strong { color: var(--hanji-ochre-deep); }

/* 로그인 */
.mobile-auth-card { border: 1px solid var(--hanji-line); background: var(--hanji-surface); box-shadow: var(--mobile-shadow); backdrop-filter: none; }
.mobile-auth-card::before { background: var(--hanji-ochre); }
.mobile-auth-heading p { color: var(--hanji-ochre-deep); background: var(--hanji-paper); }
.mobile-field span { color: var(--hanji-ink); }
.mobile-field input { border-color: var(--hanji-line); color: var(--hanji-ink); background: var(--hanji-paper); }
.mobile-auth-links a { color: var(--hanji-ochre-deep); }
.mobile-body--guest .mobile-utility-bar {
    position: fixed;
    bottom: calc(20px + env(safe-area-inset-bottom));
    left: 50%;
    width: min(calc(100% - 40px), 440px);
    transform: translateX(-50%);
}

@media (max-width: 360px) {
    .mobile-content { padding-inline: 14px; }
    .mobile-topbar { padding-inline: 12px; }
    .mobile-menu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}