:root { --swipe-top: 56px; --swipe-bottom: 76px; color-scheme: light; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; font-family: Arial, "Malgun Gothic", sans-serif; background: #fff; color: #222; }
.swipe-header { position: fixed; z-index: 20; inset: 0 0 auto; height: var(--swipe-top); display: flex; align-items: center; border-bottom: 1px solid #e4e7eb; background: #fff; }
.swipe-home, .swipe-search-button { flex: 0 0 48px; display: grid; place-items: center; height: 36px; padding: 8px; color: #222; }
.swipe-home { height: 40px; margin-left: 8px; padding: 4px; border-right: 1px solid #e4e7eb; }
.swipe-home img { width: 32px; height: 32px; object-fit: contain; border-radius: 6px; }
.swipe-search-button { border: 0; border-left: 1px solid #e4e7eb; background: white; cursor: pointer; }
.swipe-search-button svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 2; }
.swipe-tabs { display: flex; flex: 1; min-width: 0; height: 100%; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.swipe-tabs::-webkit-scrollbar { display: none; }
.swipe-tabs a { position: relative; display: flex; align-items: center; flex: 0 0 auto; padding: 0 13px; color: #555; text-decoration: none; font-family: "Noto Sans KR", "Apple SD Gothic Neo", sans-serif; font-size: 17px; font-weight: 600; white-space: nowrap; }
.swipe-tabs a[aria-current="page"] { color: #bc001d; font-weight: 700; }
.swipe-tabs a[aria-current="page"]::after { content: ""; position: absolute; inset: auto 12px 0; height: 3px; background: #bc001d; border-radius: 3px; }
.swipe-viewport { position: fixed; inset: 0; display: flex; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; touch-action: pan-x pan-y pinch-zoom; -webkit-overflow-scrolling: touch; }
.swipe-viewport::-webkit-scrollbar { display: none; }
.swipe-slot { position: relative; flex: 0 0 100%; min-width: 0; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.swipe-panel { display: block; position: absolute; inset: 0; width: 100%; height: 100%; padding: var(--swipe-top) 0 calc(var(--swipe-bottom) + env(safe-area-inset-bottom)); overflow: auto; overflow-x: hidden; overscroll-behavior-y: contain; touch-action: pan-x pan-y pinch-zoom; background: #fff; scrollbar-width: thin; }
.swipe-panel[aria-hidden="true"] { pointer-events: none; }
.swipe-loading, .swipe-failure { padding: 60px 24px; text-align: center; color: #555; line-height: 1.8; }
.swipe-failure button, .swipe-failure a { display: inline-block; margin: 8px; padding: 8px 14px; font: inherit; color: #9e0019; background: white; border: 1px solid #ccd2da; border-radius: 8px; cursor: pointer; }
.swipe-header,.swipe-chrome .ag-v3-bottom-nav { will-change: transform; transition: transform .24s cubic-bezier(.22,.61,.36,1); }
.swipe-top-hidden .swipe-header { transform: translateY(-100%); pointer-events: none; }
.swipe-bottom-hidden .swipe-chrome .ag-v3-bottom-nav { transform: translateY(100%); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .swipe-header,.swipe-chrome .ag-v3-bottom-nav { transition: none; } }
.swipe-search { position: fixed; z-index: 30; inset: var(--swipe-top) 0 auto; display: flex; align-items: center; gap: 8px; padding: 12px; background: #fff; border-bottom: 1px solid #ddd; box-shadow: 0 4px 12px #0001; }
.swipe-search[hidden] { display: none; }
.swipe-search label { font-size: 13px; white-space: nowrap; }
.swipe-search input { flex: 1; min-width: 0; padding: 10px; border: 1px solid #aaa; border-radius: 6px; font-size: 16px; }
.swipe-search button { padding: 10px; background: #a6001b; color: #fff; border: 0; border-radius: 6px; }
.swipe-announcement { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (prefers-reduced-motion: reduce) { .swipe-panel { scroll-behavior: auto; } }

/* Existing footer menus stay outside the horizontally scrolling page bodies. */
.swipe-chrome .ag-v3-bottom-nav { z-index: 20; }
.swipe-chrome .ag-v3-float-tools { z-index: 21; }
.swipe-chrome .ag-v3-bottom-nav a[aria-current="page"] { color: #b4000b; }