/* 웹사이트 모듈 전용 소유 CSS
   - 공통 모듈 높이/기본 버튼은 module-common.css가 담당한다.
   - 웹사이트 탭 색상, 웹사이트 카드, 즐겨찾기 표시는 이 파일 한 곳에서 관리한다. */

#web-view .web-cats {
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
}

#web-view .web-cat-btn.on {
  color: var(--v4-surface-white);
  border-color: transparent;
  box-shadow: none;
}
#web-view .web-cat-btn.on[data-cat-color="사제찾기"] { background: #0F766E; }
#web-view .web-cat-btn.on[data-cat-color="전체"] { background: #0e1a3a; }
#web-view .web-cat-btn.on[data-cat-color="중앙기구"] { background: #8B1C2A; }
#web-view .web-cat-btn.on[data-cat-color="신앙 포털"] { background: #1A6B3C; }
#web-view .web-cat-btn.on[data-cat-color="미디어"] { background: #1A4F8B; }
#web-view .web-cat-btn.on[data-cat-color="뉴스"] { background: #5A3E8B; }
#web-view .web-cat-btn.on[data-cat-color="출판·교육"] { background: #7A5230; }
#web-view .web-cat-btn.on[data-cat-color="교구"] { background: #2e5a3a; }

#web-view .web-cat-btn .cnt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}
#web-view .web-cat-btn.on .cnt {
  background: rgba(255,255,255,.24);
  color: var(--v4-surface-white);
}

#web-view .web-cat-btn[data-web-cat="⭐ 즐겨찾기"] {
  order: -1;
  color: var(--v4-header-navy);
  border-color: rgba(31,42,68,.35);
  background: #f4f6fb;
}
#web-view .web-cat-btn[data-web-cat="⭐ 즐겨찾기"].on {
  background: var(--v4-header-navy);
  color: var(--v4-surface-white);
  border-color: transparent;
  box-shadow: none;
}

#web-view .web-list {
  display: block;
}

#web-view .web-card {
  display: block;
  width: 100%;
  overflow: hidden;
  background: var(--v4-card-bg-warm);
  border: 1.25px solid var(--v4-card-border-warm);
  border-radius: var(--v4-radius-card);
  box-shadow: var(--v4-card-shadow-soft);
  cursor: pointer;
  margin-bottom: var(--v4-card-gap);
  transition: transform .12s, box-shadow .12s, filter .12s;
}
#web-view .web-card.app-pressing {
  transform: translateY(5px) scale(.985);
  box-shadow: none;
  filter: brightness(.96);
}

#web-view .web-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px 0;
}
#web-view .web-card-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 7px;
  color: var(--v4-surface-white);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
  flex-shrink: 0;
}
#web-view .web-card-op {
  display: flex;
  min-width: 0;
  flex: 1;
  justify-content: flex-end;
  align-items: center;
  color: #8b91ad;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.35;
  overflow: hidden;
  white-space: nowrap;
}

#web-view .web-card-body {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 11px;
}
#web-view .web-card-ico {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  line-height: 1;
  background: var(--v4-bg-cream);
  box-shadow: none;
}
#web-view .web-card.web-priest-card .web-card-ico {
  background: var(--v4-bg-cream);
  color: #0F766E;
  font-size: 31px;
  font-weight: 900;
  font-family: Georgia, "Times New Roman", serif;
}
#web-view .web-card-info {
  flex: 1;
  min-width: 0;
  display: block;
}
#web-view .web-card-name {
  display: block;
  color: #1a1a2e;
  font-size: 17px;
  font-weight: 850;
  line-height: 1.36;
  letter-spacing: -.02em;
  margin: 0 0 4px;
  word-break: keep-all;
}
#web-view .web-card-desc {
  display: block;
  color: #555577;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.52;
  letter-spacing: -.01em;
  word-break: keep-all;
  white-space: normal;
}

#web-view .web-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 14px;
  background: #faf8f4;
  border-top: 1px solid #ede8e2;
}
#web-view .web-card-url {
  display: block;
  min-width: 0;
  flex: 1;
  color: var(--v4-header-navy);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#web-view .web-card-arrow {
  flex-shrink: 0;
  color: #8b91ad;
  font-size: 15px;
  line-height: 1;
}

#web-view .web-fav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  background: transparent;
  border: 0;
  padding: 4px;
  cursor: pointer;
  color: #c8cbd8;
  font-size: 20px;
  line-height: 1;
  transition: color .14s, transform .14s;
  border-radius: 8px;
  user-select: none;
}
#web-view .web-fav-btn:active { transform: scale(.88); }
#web-view .web-fav-btn.on { color: #f59e0b; }

#web-view .web-empty {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  gap: 12px;
  color: #94a3b8;
  font-size: 13px;
  text-align: center;
}
#web-view .web-empty.show { display: flex; }

#web-view .web-my-diocese-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 7px;
  padding: 4px 11px;
  border-radius: 999px;
  background: #FFF3D8;
  border: 1.5px solid rgba(183,121,31,.52);
  color: #7A4F10;
  font-size: 12.8px;
  font-weight: 950;
  line-height: 1.15;
  letter-spacing: -.035em;
  vertical-align: 2px;
  white-space: nowrap;
}
#web-view .web-province-inline { display: none; }
#web-view .web-card-name-tail { margin-left: 4px; }
#web-view .web-card.web-my-diocese-card {
  border-color: var(--v4-brown);
  border-width: 2px;
  box-shadow: 0 8px 18px rgba(183,121,31,.12), 0 2px 8px rgba(31,42,68,.07);
}

#web-view .web-prov-hd {
  padding: 14px 16px 6px;
  display: none;
  align-items: center;
}
#web-view .web-prov-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 14px;
  border-radius: 999px;
  background: #2e5a3a;
  color: var(--v4-surface-white);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
}

html.ios-device #web-view .web-card {
  border-radius: 12px;
  margin-bottom: 12px;
}
html.ios-device #web-view .web-card-top { padding: 9px 11px 0; }
html.ios-device #web-view .web-card-body {
  padding: 8px 12px 9px;
  gap: 9px;
}
html.ios-device #web-view .web-card-foot { padding: 7px 11px; }
html.ios-device #web-view .web-card-ico {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  font-size: 23px;
}
html.ios-device #web-view .web-card-badge {
  min-height: 21px;
  padding: 0 8px;
}

html.oai-font-global #web-view .web-card-name {
  font-size: calc(17px * var(--app-inner-font-scale,1));
}
html.oai-font-global #web-view .web-card-desc {
  font-size: calc(15px * var(--app-inner-font-scale,1));
}

html.oai-font-global #web-view .web-card-op,
html.oai-font-global #web-view .web-card-url {
  font-size: var(--app-fs-sub);
  line-height: 1.35;
}
html.oai-font-global #web-view .web-cat-btn {
  font-size: calc(15px * var(--app-inner-font-scale,1));
}
html.oai-font-global #web-view .web-card-badge {
  font-size: calc(11px * var(--app-inner-font-scale,1));
}

html:not(.ios-device).oai-screen-compact-short #web-view .web-cat-btn .cnt {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
}
html:not(.ios-device).oai-screen-compact-short #web-close-btn {
  width: 34px;
  height: 34px;
  min-width: 34px;
  flex-basis: 34px;
}