.module-view {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1800;
  background: linear-gradient(180deg, #d8d0c8, #c8bfb7);
  flex-direction: column;
  align-items: stretch;
  will-change: auto;
}
.module-view.open {
  display: flex;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100vw;
  height: auto;
  min-height: 0;
  max-width: none;
  overflow: hidden;
  transform: none;
  transition: none;
  animation: none;
  contain: layout paint size;
}
#web-view.module-view.open,
#trail-view.module-view.open,
#qna-view.module-view.open { display: flex; flex-direction: column; align-items: stretch; }

/* V8-1-14-528: 문의·건의 부모 화면은 qna-view + qna-frame iframe 구조만 module-common.css에서 관리한다. */
#qna-view .qna-frame {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  border: 0;
  background: #ede8e0;
}

.module-bar,
#prayer-bar,
#diocese-bar {
  display: flex;
  align-items: center;
  gap: 0;
  height: calc(var(--oai-std-header-h) + env(safe-area-inset-top, 0px));
  min-height: calc(var(--oai-std-header-h) + env(safe-area-inset-top, 0px));
  max-height: calc(var(--oai-std-header-h) + env(safe-area-inset-top, 0px));
  padding: var(--oai-std-hdr-pad) 16px 10px;
  box-sizing: border-box;
  flex-shrink: 0;
  width: 100%;
  max-width: none;
  background: #0e1535;
  color: var(--v4-surface-white);
  border-bottom: 2px solid var(--gold);
  box-shadow: 0 4px 16px rgba(14,21,53,.22);
  contain: layout;
}
.module-bar::before, .module-bar::after,
#prayer-bar::before, #prayer-bar::after,
#diocese-bar::before, #diocese-bar::after { content: none; display: none; }

.module-bar-main {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}
.module-bar-ico {
  width: 42px;
  height: 42px;
  min-width: 42px;
  flex: 0 0 42px;
  border-radius: 12px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--oai-std-icon-sz);
  line-height: 1;
  color: var(--v4-surface-white);
}
.module-bar-ico svg { width: 22px; height: 22px; display: none; }
.module-bar-txt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  gap: 2px;
}
.module-bar-title {
  font-size: var(--oai-std-title-fs);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--v4-surface-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}
.module-bar-sub {
  font-size: var(--oai-std-sub-fs);
  font-weight: 500;
  line-height: 1.2;
  color: rgba(255,255,255,.65);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  opacity: 1;
}
.module-bar-sub:empty { display: none; }
.module-close,
#prayer-close {
  width: var(--oai-std-close-sz);
  height: var(--oai-std-close-sz);
  min-width: var(--oai-std-close-sz);
  flex: 0 0 var(--oai-std-close-sz);
  border-radius: 999px;
  background: transparent;
  border: 1.5px solid currentColor;
  color: rgba(212,170,106,.9);
  font-size: 28px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: none;
}
.module-count { display: none; }

#web-view .module-bar-ico,
#trail-view .module-bar-ico,
#qna-view .module-bar-ico,
#diocese-view .module-bar-ico {
  font-size: 0;
  position: relative;
  overflow: visible;
}
#web-view .module-bar-ico::before,
#trail-view .module-bar-ico::before,
#qna-view .module-bar-ico::before,
#diocese-view .module-bar-ico::before {
  content: "";
  display: block;
  position: absolute;
  left: 50%; top: 50%;
  width: 3px; height: 24px;
  border-radius: 2px;
  background: var(--v4-surface-white);
  transform: translate(-50%, -50%);
}
#web-view .module-bar-ico::after,
#trail-view .module-bar-ico::after,
#qna-view .module-bar-ico::after,
#diocese-view .module-bar-ico::after {
  content: "";
  display: block;
  position: absolute;
  left: 50%; top: 42%;
  width: 14px; height: 3px;
  border-radius: 2px;
  background: var(--v4-surface-white);
  transform: translate(-50%, -50%);
}

#prayer-tabs,
#web-view .web-cats,
#trail-view .trail-tabs {
  height: 55px;
  min-height: 55px;
  max-height: 55px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  flex-shrink: 0;
  box-sizing: border-box;
  scrollbar-width: none;
  background: #fffbf2;
  border-top: 1px solid #ddd5c8;
  border-bottom: 2px solid #ddd5c8;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  -webkit-overflow-scrolling: touch;
  touch-action: auto;
}
#prayer-tabs::-webkit-scrollbar,
#web-view .web-cats::-webkit-scrollbar,
#trail-view .trail-tabs::-webkit-scrollbar { display: none; }

#prayer-tabs .pr-tab,
#web-view .web-cat-btn,
#trail-view .trail-tab {
  height: 40px;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1.5px solid var(--v4-header-navy);
  background: var(--v4-bg-cream);
  color: var(--v4-header-navy);
  box-shadow: none;
  font-size: calc(15px * var(--app-inner-font-scale));
  font-weight: 700;
  font-family: inherit;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
  box-sizing: border-box;
  flex-shrink: 0;
  cursor: pointer;
  transition: background .16s, color .16s, border-color .16s;
  scroll-margin-inline: 18px;
}
#trail-view .trail-tab { flex: 1 1 0; }

#prayer-tabs .pr-tab.on,
#prayer-tabs .pr-tab.active,
#web-view .web-cat-btn.on,
#trail-view .trail-tab.on {
  color: var(--v4-surface-white);
  border-color: transparent;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(31,42,68,.28);
  background: #0e1535;
}

.web-body, .trail-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: var(--bg-unified);
  width: 100%;
  max-width: none;
  transform: none;
  transition: none;
  animation: none;
}
.web-list, #trail-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 14px var(--v4-list-pad-x) var(--v4-list-pad-bottom);
  background: var(--v4-bg-ivory);
  max-width: 100vw;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  touch-action: pan-y;
  transform: none;
}
#trail-list {
  display: flex;
  flex-direction: column;
  gap: var(--v4-card-gap);
  align-items: stretch;
}
#trail-list::-webkit-scrollbar, .web-list::-webkit-scrollbar { display: none; }

html:not(.ios-device).oai-screen-compact-short #prayer-tabs,
html:not(.ios-device).oai-screen-compact-short #web-view .web-cats,
html:not(.ios-device).oai-screen-compact-short #trail-view .trail-tabs{
  height:var(--oai-std-tabbar-h,46px)!important;
  min-height:var(--oai-std-tabbar-h,46px)!important;
  max-height:var(--oai-std-tabbar-h,46px)!important;
  padding:0 8px!important;
  gap:5px!important;
}
html:not(.ios-device).oai-screen-compact-short #prayer-tabs .pr-tab,
html:not(.ios-device).oai-screen-compact-short #web-view .web-cat-btn,
html:not(.ios-device).oai-screen-compact-short #trail-view .trail-tab{
  height:var(--oai-std-tab-h,33px)!important;
  min-height:var(--oai-std-tab-h,33px)!important;
  padding:0 10px!important;
  border-radius:10px!important;
  line-height:1!important;
  gap:4px!important;
}
html:not(.ios-device).oai-screen-compact-short .module-close,
html:not(.ios-device).oai-screen-compact-short #prayer-close{
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  flex:0 0 34px!important;
  
  line-height:1!important;
}