/* 參考 style.css、menu.css：綠色頁首、灰色導覽、768/480px 斷點。
   兩頁共用外部樣式；RWD 與漢堡選單完全由 CSS 控制。 */
*, *::before, *::after {box-sizing:border-box;}
html {width:100%;}
body {margin:0 auto;width:100%;max-width:920px;padding:0 10px;color:#222;background:#fff;font-family:Arial,'Microsoft JhengHei',sans-serif;line-height:1.6;}
img {border:0;max-width:100%;height:auto;}
#xo-banner {position:relative;width:100%;background:#c2ce99;color:#fff;}
.banner-link {display:flex;align-items:center;justify-content:center;gap:24px;min-height:110px;padding:10px 20px;}
#logo {flex:0 0 auto;width:90px;height:90px;}
#title {display:block;width:480px;max-width:calc(100% - 114px);height:auto;}
#menu-switcher,#menu-toggle {display:none;}
#xo-globalnav {margin:0;padding:4px 12px;background:#eee;color:#000;}
#xo-globalnav ul {display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0;}
#xo-globalnav li {margin:0;padding:0;}
#xo-globalnav a {display:block;padding:8px 16px;color:#000;text-decoration:none;min-height:44px;}
#xo-globalnav a:hover {background:#ddd;color:#654321;}
a:focus-visible {outline:3px solid #1251c6;outline-offset:2px;}
/* list 容器固定保留，AJAX 替換內容後仍套用同一組樣式。 */
#list {width:100%;min-width:0;overflow-x:auto;padding:12px 0;-webkit-overflow-scrolling:touch;}
#list img,#list video {max-width:100%;height:auto;}
#list table {width:100%;}
#list td,#list th {overflow-wrap:anywhere;}
#list input:not([type=checkbox]):not([type=radio]):not([type=hidden]),#list textarea,#list select {max-width:100%;font:inherit;}
#list textarea {width:100%;}
#list pre {max-width:100%;overflow:auto;}
#calendar_tbl {border-collapse:collapse;table-layout:fixed;}
#calendar_tbl th,#calendar_tbl td {border:1px solid #000;padding:8px;vertical-align:top;}
body.page-ost #calendar_tbl thead th {background:#eee;text-align:center;vertical-align:middle;}
body.page-ost #calendar_tbl tbody th {background:#f1f3f2;width:4%;text-align:center;}
body.page-ost #calendar_tbl tbody tr {height:120px;}
body.page-ost #calendar_tbl .convener {text-align:right;color:brown;}
.table-hint {margin:0 0 8px;color:#555;font-size:.9em;}
.list table.outer,#list table.outer {background:#fff;padding:2px;border:1px solid #c2e2e2;}
.list table.outer th,#list table.outer th {background:#ccc;padding:4px;}
.odd {background:#eee;padding:2px;}
.even {background:#f1f3f2;padding:2px;}
#footer {padding:6px 10px;background:#999;color:#fff;text-align:center;font-size:.875rem;}
@media screen and (max-width:768px) {
 body {padding:0;}
 .banner-link {justify-content:flex-start;gap:14px;padding:10px 72px 10px 12px;min-height:90px;}
 #logo {width:70px;height:70px;}
 #title {width:480px;max-width:calc(100% - 84px);}
 #menu-switcher {display:block;position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0;}
 #menu-switcher:focus-visible ~ #xo-banner #menu-toggle {outline:3px solid #1251c6;outline-offset:2px;}
 #menu-toggle {display:flex;align-items:center;justify-content:center;position:absolute;right:12px;top:50%;transform:translateY(-50%);width:48px;height:48px;padding:10px;border:0;border-radius:4px;background:#000;color:#fff;cursor:pointer;}
 .hamburger-line {display:block;width:28px;height:3px;background:#fff;margin:auto;box-shadow:0 9px 0 #fff,0 -9px 0 #fff;}
 /* 原生 checkbox 保留鍵盤操作：Tab 移至開關，空白鍵切換。 */
 #xo-globalnav {display:none;}
 #menu-switcher:checked ~ #xo-globalnav {display:block;}
 #menu-switcher:checked ~ #xo-banner .hamburger-line {background:transparent;box-shadow:none;position:relative;}
 #menu-switcher:checked ~ #xo-banner .hamburger-line::before,
 #menu-switcher:checked ~ #xo-banner .hamburger-line::after {content:'';position:absolute;left:0;top:0;width:28px;height:3px;background:#fff;}
 #menu-switcher:checked ~ #xo-banner .hamburger-line::before {transform:rotate(45deg);}
 #menu-switcher:checked ~ #xo-banner .hamburger-line::after {transform:rotate(-45deg);}
 #xo-globalnav {padding:4px 12px;}
 #xo-globalnav ul {display:block;}
 #xo-globalnav li+li {border-top:1px solid #ccc;}
 #xo-globalnav a {padding:12px;text-align:left;}
 #list {padding:12px;}
 #calendar_tbl {min-width:640px;}
 #list input,#list textarea,#list select {font-size:16px;}
}
@media screen and (max-width:480px) {
 .banner-link {gap:10px;min-height:74px;padding-right:68px;}
 #logo {width:50px;height:50px;}
 #title {max-width:calc(100% - 60px);}
 #menu-toggle {right:10px;width:44px;height:44px;padding:8px;}
 #list {padding:10px;}
}
@media (prefers-reduced-motion:reduce) {html {scroll-behavior:auto;}}

/* IALOM 沿用原本無 thead 的表格結構與 760px 手機表格寬度。 */
body.page-ialom #calendar_tbl tr:first-child th {background:#eee;text-align:center;vertical-align:middle;}
body.page-ialom #calendar_tbl tr > th:first-child {background:#f1f3f2;width:4%;text-align:center;}
body.page-ialom #calendar_tbl tr:not(:first-child) {height:120px;}
body.page-ialom #window1 {width:100%;}
body.page-ialom #mobile {display:none;}
@media screen and (max-width:768px) {
 body.page-ialom #calendar_tbl {min-width:760px;}
}
@media screen and (max-width:480px) {
 body.page-ialom #window1 {display:none;}
 body.page-ialom #mobile {display:block;}
}
