/* MoC unified design system (Apple HIG-inspired). Loaded last; owns tokens, chrome, controls and materials for every MoC page. */
.moc-app{
  --moc-primary:#0a0a0a;--moc-secondary:#0a0a0a;--moc-bg:#f5f5f5;--moc-card:#fff;
  --moc-text:#0a0a0a;--moc-text-sub:#6b6b6b;--moc-border:#e5e5e5;--moc-surface:#f5f5f5;
  --moc-accent:#ff8009;--moc-accent-hover:#e67300;--moc-link:#0a0a0a;
  --moc-radius:18px;--moc-radius-md:12px;--moc-radius-sm:10px;
  --moc-ease:cubic-bezier(.32,.72,0,1);--moc-fast:.18s;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Pretendard","Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  background:var(--moc-bg);color:var(--moc-text);letter-spacing:-.01em;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
.moc-app h1,.moc-app h2,.moc-app h3{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Pretendard","Apple SD Gothic Neo","Noto Sans KR",sans-serif;word-break:keep-all;text-wrap:balance}
.moc-app h1{font-size:clamp(28px,4vw,40px);line-height:1.2;letter-spacing:-.03em;font-weight:700}
.moc-app h2{font-size:clamp(21px,2.6vw,26px);line-height:1.25;letter-spacing:-.025em;font-weight:650}
.moc-app h3{font-size:18px;line-height:1.35;letter-spacing:-.02em;font-weight:600}
.moc-app p{color:var(--moc-text-sub)}
.moc-app a:hover{color:var(--moc-link)}
.moc-app :focus-visible{outline:2px solid var(--moc-accent);outline-offset:3px;border-radius:6px}
.moc-app :where(input,select,textarea):focus-visible{outline:none;border-color:var(--moc-accent);box-shadow:0 0 0 4px #ff800933}
.moc-app .moc-eyebrow{color:var(--moc-text-sub);font-size:12px;font-weight:600;letter-spacing:.06em}
.moc-app .moc-small,.moc-app .moc-muted{color:var(--moc-text-sub)}

/* Header: translucent material, content scrolls beneath */
.moc-app .moc-header{height:64px;background:#fffffff0;background:rgba(255,255,255,.72);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:0;box-shadow:0 .5px 0 rgba(0,0,0,.14)}
.moc-app .moc-logo img{width:34px;height:40px}
.moc-app .moc-logo{gap:8px}
.moc-app .moc-brand-name{font-size:18px;font-weight:700;letter-spacing:-.04em}
.moc-app .moc-brand-name small{font-size:9px;font-weight:500;letter-spacing:.12em;color:var(--moc-text-sub)}
.moc-app .moc-desktop-nav{font-size:13px;font-weight:500;color:#424245}
.moc-app .moc-desktop-nav a{padding:22px 0;transition:color var(--moc-fast)}
.moc-app .moc-desktop-nav a:hover,.moc-app .moc-desktop-nav .is-active{color:var(--moc-text)}
.moc-app .moc-desktop-nav .is-active{font-weight:600}
.moc-app .moc-desktop-nav .is-active:after{height:2px;background:var(--moc-text)}
.moc-app .moc-my-button{background:var(--moc-surface);border-radius:980px;padding:6px 14px;color:var(--moc-text)!important}
.moc-app .moc-login-link,.moc-app .moc-user-link{font-weight:500;color:var(--moc-link)}
.moc-app .moc-demo-note{color:var(--moc-text-sub)}
.moc-app .moc-status-dot{background:#808080}

/* Buttons: pill, blue primary, grey secondary, instant press feedback */
.moc-app .moc-button{background:var(--moc-accent);border-color:var(--moc-accent);color:#fff!important;border-radius:980px;min-height:44px;padding:10px 22px;font-weight:500;box-shadow:none;transition:background-color var(--moc-fast),transform var(--moc-fast) var(--moc-ease)}
.moc-app .moc-button:hover{background:var(--moc-accent-hover);border-color:var(--moc-accent-hover);color:#fff!important}
.moc-app .moc-button:active{transform:scale(.97);transition-duration:.08s}
.moc-app .moc-button-outline,.moc-app .moc-button-soft{background:#e8e8e8;border-color:#e8e8e8;color:var(--moc-text)!important}
.moc-app .moc-button-outline:hover,.moc-app .moc-button-soft:hover{background:#dcdce1;border-color:#dcdce1;color:var(--moc-text)!important}
.moc-app .moc-text-button{color:var(--moc-link)}
.moc-app .moc-save-button{border-radius:980px;transition:background-color var(--moc-fast),transform var(--moc-fast) var(--moc-ease)}
.moc-app .moc-save-button:active{transform:scale(.9)}
.moc-app .moc-more-link,.moc-app .moc-section-title>a,.moc-app .moc-plan-inline-link,.moc-app .moc-reader-back,.moc-app .moc-community-back,.moc-app .moc-continue a{color:var(--moc-link)}

/* Surfaces: white cards on grey canvas, no hard borders */
.moc-app .moc-card,.moc-app .moc-detail-panel,.moc-app .moc-reading,.moc-app .moc-auth,.moc-app .moc-practice-card,.moc-app .moc-price-card,.moc-app .moc-order,
.moc-app .moc-metrics>div,.moc-app .moc-bible-page,.moc-app .moc-typing-panel,.moc-app .moc-bible-select,.moc-app .moc-journal-entry,.moc-app .moc-reading-records>a,.moc-app .moc-reading-records>div,
.moc-app .moc-plan-card,.moc-app .moc-shop-panel,.moc-app .moc-shop-summary,.moc-app .moc-shop-cart-item,.moc-app .moc-shop-order-list>a,.moc-app .moc-shop-admin-products>article,
.moc-app .moc-community-board-card,.moc-app .moc-community-post-card,.moc-app .moc-community-form,.moc-app .moc-community-article,.moc-app .moc-community-comments,.moc-app .moc-community-review,
.moc-app .moc-my-summary,.moc-app .moc-recent-list,.moc-app .moc-filter-form,.moc-app .moc-reader-sidebar,.moc-app .moc-empty,.moc-app .moc-shop-empty,.moc-app .moc-community-empty{background:#fff;border-color:transparent;border-radius:var(--moc-radius);box-shadow:none}
.moc-app .moc-detail-panel,.moc-app .moc-bible-select,.moc-app .moc-reading-records>a,.moc-app .moc-reading-records>div,.moc-app .moc-community-post-card,.moc-app .moc-shop-cart-item,.moc-app .moc-shop-order-list>a,.moc-app .moc-shop-admin-products>article,.moc-app .moc-order{border-radius:var(--moc-radius-md)}
.moc-app .moc-info-list,.moc-app .moc-verification,.moc-app .moc-community-listing-info,.moc-app .moc-community-form fieldset,.moc-app .moc-plan-preview,.moc-app .moc-shop-payment,.moc-app .moc-passage,.moc-app .moc-passage-card,.moc-app .moc-scripture,.moc-app .moc-map-placeholder,.moc-app .moc-departments>div{background:var(--moc-surface);border-color:transparent;border-radius:var(--moc-radius-md)}
.moc-app .moc-payment-notice,.moc-app .moc-shop-payment-banner,.moc-app .moc-plus-banner,.moc-app .moc-faith-banner,.moc-app .moc-shop-support,.moc-app .moc-inline-note{background:#fff;border-color:transparent;border-radius:var(--moc-radius)}
.moc-app .moc-payment-notice strong,.moc-app .moc-shop-payment-banner h2{color:var(--moc-text)}
.moc-app .moc-payment-notice p,.moc-app .moc-shop-payment-banner p,.moc-app .moc-shop-payment p{color:var(--moc-text-sub)}
.moc-app .moc-scripture,.moc-app .moc-plan-preview,.moc-app .moc-verse-heading{color:var(--moc-text)}
@media(hover:hover){
  .moc-app .moc-card,.moc-app .moc-practice-card,.moc-app .moc-community-board-card,.moc-app .moc-plan-summary,.moc-app .moc-community-post-card,.moc-app .moc-shop-order-list>a{transition:box-shadow .25s var(--moc-ease),transform .25s var(--moc-ease)}
  .moc-app .moc-card:hover,.moc-app .moc-practice-card:hover,.moc-app .moc-community-board-card:hover,.moc-app .moc-plan-summary:hover,.moc-app .moc-community-post-card:hover,.moc-app .moc-shop-order-list>a:hover{transform:none;border-color:transparent;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
}
.moc-app a.moc-practice-card:active,.moc-app a.moc-community-board-card:active,.moc-app a.moc-card:active{transform:scale(.985);transition-duration:.08s}
.moc-app .moc-price-featured{border:2px solid var(--moc-accent);padding:26px}
.moc-app .moc-practice-card>span:last-child,.moc-app .moc-card-number,.moc-app .moc-tag,.moc-app .moc-badge,.moc-app .moc-verse-number,.moc-app .moc-search-verse strong,.moc-app .moc-community-board-card>span:last-child{color:var(--moc-link)}
.moc-app .moc-category,.moc-app .moc-tags span{color:var(--moc-text-sub)}

/* Dark feature panels: one recipe for every hero */
.moc-app .moc-faith-hero,.moc-app .moc-service-hero,.moc-app .moc-shop-home{background:#0a0a0a radial-gradient(120% 140% at 100% 0,#323236 0,#0a0a0a 62%);color:#f5f5f5;border-radius:12px;padding:clamp(32px,6vw,72px)}
.moc-app .moc-faith-hero:after,.moc-app .moc-service-hero:after{display:none}
.moc-app .moc-faith-hero h1,.moc-app .moc-service-hero h1,.moc-app .moc-shop-home h2{color:#f5f5f5;font-size:clamp(32px,5vw,52px);line-height:1.12;letter-spacing:-.035em;font-weight:700;margin:14px 0 16px}
.moc-app .moc-faith-hero h1 span,.moc-app .moc-service-hero h1 span,.moc-app .moc-shop-hero h1>span{color:#808080}
.moc-app .moc-faith-hero p,.moc-app .moc-service-hero p,.moc-app .moc-shop-home p{color:#a3a3a3;font-size:17px;line-height:1.55}
.moc-app .moc-faith-hero .moc-eyebrow,.moc-app .moc-service-hero .moc-eyebrow,.moc-app .moc-shop-home .moc-eyebrow{color:#a3a3a3}
.moc-app .moc-faith-hero .moc-button,.moc-app .moc-shop-home .moc-button{background:var(--moc-accent);border-color:var(--moc-accent);color:#fff!important}
.moc-app .moc-free-label{color:#808080}
.moc-app .moc-shop-home-art{background:rgba(255,255,255,.1);color:#f5f5f5!important;transform:none;border-radius:12px}
.moc-app .moc-shop-hero{background:#fff;border-radius:12px}
.moc-app .moc-shop-hero p{color:var(--moc-text-sub)}
.moc-app .moc-shop-hero-art:before{background:var(--moc-surface)}
.moc-app .moc-shop-book{background:#294d3a;border-left-color:#1d3929;box-shadow:-9px 4px 0 #d8d8dc,18px 18px 32px rgba(0,0,0,.18)}
.moc-app .moc-shop-art-tag{background:#fff;border-color:var(--moc-border);color:var(--moc-text-sub)}
.moc-app .moc-plus-banner,.moc-app .moc-faith-banner{padding:clamp(24px,4vw,40px)}

/* Segmented chips: tabs, categories, boards */
.moc-app .moc-faith-tabs,.moc-app .moc-shop-admin-nav{background:#e8e8e8;border-radius:12px;padding:4px;gap:2px}
.moc-app .moc-faith-tabs a,.moc-app .moc-shop-admin-nav a{border-radius:9px;background:transparent;color:var(--moc-text);font-weight:500;transition:background-color var(--moc-fast),box-shadow var(--moc-fast)}
.moc-app .moc-faith-tabs .is-active{background:#fff;color:var(--moc-text);box-shadow:0 1px 3px rgba(0,0,0,.14);font-weight:600}
.moc-app .moc-shop-admin-nav a:hover{background:#fff}
.moc-app .moc-community-nav,.moc-app .moc-church-detail-nav{border-bottom-color:var(--moc-border)}
.moc-app .moc-community-nav a,.moc-app .moc-shop-categories a,.moc-app .moc-region-tabs a,.moc-app .moc-plan-presets button{background:#e8e8e8;border-color:transparent;color:var(--moc-text);border-radius:980px;transition:background-color var(--moc-fast),color var(--moc-fast),transform var(--moc-fast) var(--moc-ease)}
.moc-app .moc-community-nav a.is-active,.moc-app .moc-shop-categories .is-active,.moc-app .moc-pagination .is-active,.moc-app .moc-shop-pagination [aria-current]{background:var(--moc-text);border-color:var(--moc-text);color:#fff!important}
.moc-app .moc-community-nav a:active,.moc-app .moc-shop-categories a:active{transform:scale(.96)}
.moc-app .moc-plan-presets [aria-pressed=true],.moc-app .moc-plan-weekdays input:checked+span{background:var(--moc-text);color:#fff;border-color:var(--moc-text)}
.moc-app .moc-community-pagination .is-active{background:var(--moc-text);color:#fff}
.moc-app .moc-church-detail-nav a.is-active{border-bottom:2px solid var(--moc-text)}

/* Icon chips share one neutral treatment */
.moc-app .moc-quick-icon,.moc-app .moc-community-board-icon,.moc-app .moc-community-post-icon,.moc-app .moc-register-art,.moc-app .moc-avatar{background:var(--moc-surface);color:var(--moc-link)}
.moc-app .moc-quick-menu a:nth-child(n) .moc-quick-icon,.moc-app .moc-community-board-card:nth-child(n) .moc-community-board-icon{background:var(--moc-surface);color:var(--moc-link)}
.moc-app .moc-register-art{transform:none;border:0}
.moc-app .moc-empty>.moc-icon,.moc-app .moc-shop-empty>.moc-icon,.moc-app .moc-community-empty>.moc-icon,.moc-app .moc-plan-empty svg{color:#a3a3a3}
.moc-app .moc-plan-summary:hover{transform:none}

/* Progress & selection accent */
.moc-app progress,.moc-app input[type=checkbox],.moc-app input[type=radio],.moc-app input[type=range]{accent-color:var(--moc-accent)}
.moc-app .moc-plan-card progress::-webkit-progress-value,.moc-app .moc-plan-total-progress::-webkit-progress-value{background:var(--moc-accent)}
.moc-app .moc-plan-card progress::-moz-progress-bar,.moc-app .moc-plan-total-progress::-moz-progress-bar{background:var(--moc-accent)}
.moc-app .moc-plan-progress-label strong,.moc-app .moc-mccheyne-year>strong,.moc-app .moc-mccheyne-year>a{color:var(--moc-accent)}

/* Form fields */
.moc-app :where(input:not([type=checkbox],[type=radio],[type=range],[type=hidden],[type=file]),select,textarea){border-color:#d4d4d4;border-radius:var(--moc-radius-sm);background-color:#fff;transition:border-color var(--moc-fast),box-shadow var(--moc-fast)}

/* Footer & mobile tab bar */
.moc-app .moc-footer{background:var(--moc-surface);border-top:.5px solid #d4d4d4;margin-top:72px}
.moc-app .moc-footer-top p,.moc-app .moc-footer-top>div,.moc-app .moc-footer-bottom{color:var(--moc-text-sub);border-color:#d4d4d4}
.moc-app .moc-mobile-nav{background:rgba(255,255,255,.78);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-top:0;box-shadow:0 -.5px 0 rgba(0,0,0,.14)}
.moc-app .moc-mobile-nav a{color:#6b6b6b;transition:color var(--moc-fast)}
.moc-app .moc-mobile-nav a:active{opacity:.6}
.moc-app .moc-mobile-nav .is-active{color:var(--moc-accent);font-weight:600}
.moc-app .moc-toast{background:rgba(29,29,31,.88);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:980px;box-shadow:0 8px 30px rgba(0,0,0,.2)}
.moc-app .moc-error{background:#fff1f0;color:#d70015!important}
.moc-app .moc-success{background:#eefaf1;color:#1d7a3a!important}

@media(max-width:760px){
  .moc-app .moc-header{height:56px}
  .moc-app .moc-logo img{width:30px;height:36px}
  .moc-app .moc-brand-name{font-size:16px}
  .moc-app .moc-faith-hero,.moc-app .moc-service-hero,.moc-app .moc-shop-home{border-radius:12px}
  .moc-app .moc-faith-hero p,.moc-app .moc-service-hero p{font-size:15px}
}
@media(prefers-reduced-motion:reduce){
  .moc-app *,.moc-app *:before,.moc-app *:after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .moc-app .moc-button:active,.moc-app .moc-save-button:active,.moc-app a:active{transform:none!important}
}
@media(prefers-reduced-transparency:reduce){
  .moc-app .moc-header,.moc-app .moc-mobile-nav,.moc-app .moc-toast{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
  .moc-app .moc-toast{background:#0a0a0a}
}
@media(prefers-contrast:more){
  .moc-app{--moc-text-sub:#424245;--moc-border:#808080}
  .moc-app .moc-header,.moc-app .moc-mobile-nav{background:#fff}
  .moc-app .moc-card,.moc-app .moc-detail-panel,.moc-app .moc-plan-card,.moc-app .moc-shop-panel{border-color:#808080}
}
@media print{.moc-app .moc-header,.moc-app .moc-mobile-nav{position:static}}

/* Empty states and MY profile: padded white cards (discovery.css zeroes horizontal padding) */
.moc-app .moc-empty,.moc-app .moc-shop-empty,.moc-app .moc-community-empty{padding:40px 24px;text-align:center;border:0}
.moc-app .moc-empty-small{padding:24px}
.moc-app .moc-empty h3{color:var(--moc-text)}
.moc-app .moc-profile,.moc-app .moc-saved-verse{background:#fff;border-color:transparent;border-radius:var(--moc-radius)}
.moc-app .moc-profile{padding:28px 32px}
.moc-app .moc-avatar{background:var(--moc-surface);color:var(--moc-text)}
.moc-app .moc-my-summary{padding:28px 32px}
@media(max-width:760px){.moc-app .moc-empty{padding:32px 20px}.moc-app .moc-profile,.moc-app .moc-my-summary{padding:22px 20px}}

/* Business information in the footer */
.moc-app .moc-footer-company{display:flex;flex-wrap:wrap;gap:4px 16px;margin:28px 0 0;padding-top:20px;border-top:.5px solid #d4d4d4;font-style:normal;font-size:12px;line-height:1.7;color:var(--moc-text-sub)}
.moc-app .moc-footer-company strong{flex:0 0 100%;font-weight:600;color:var(--moc-text)}
.moc-app .moc-footer-company span{white-space:nowrap}
@media(max-width:760px){.moc-app .moc-footer-company{flex-direction:column;gap:2px;margin-top:20px}.moc-app .moc-footer-company span{white-space:normal}}
