/* Media Center only. Desktop artwork and all other page styles remain unchanged. */
:root { color-scheme:dark; font-family:Arial,'PingFang TC','Microsoft JhengHei',sans-serif; color:#eff8ff; background:#020919; }
* { box-sizing:border-box; }
body { isolation:isolate; margin:0; background:radial-gradient(ellipse at 20% 0,#13538a66,transparent 45%),radial-gradient(ellipse at 90% 65%,#0c367155,transparent 50%),#020919; }
body::before { content:''; position:fixed; inset:0; z-index:-1; background-image:radial-gradient(1px 1px at 18px 25px,#bbe5ffb3 99%,transparent),radial-gradient(1px 1px at 94px 77px,#719acf88 99%,transparent); background-size:173px 137px,251px 199px; }
a { color:inherit; text-decoration:none; }
a:focus-visible { outline:3px solid #d2f6ff; outline-offset:5px; }
.skip { position:absolute; left:16px; top:-80px; z-index:5; padding:12px; background:#061a39; }
.skip:focus { top:12px; }
.media-header { max-width:1520px; margin:auto; padding:24px 40px 12px; display:flex; justify-content:space-between; align-items:center; gap:24px; }
.media-brand { display:flex; align-items:center; gap:12px; font-size:20px; font-weight:600; letter-spacing:.04em; }
.media-brand img { width:58px; height:63px; object-fit:contain; }
.media-brand span[lang=en] { display:block; margin-top:5px; font-size:11px; font-weight:400; letter-spacing:0; color:#c9e3f6; }
.media-header nav { display:flex; flex-wrap:wrap; gap:10px; align-items:center; font-size:12px; color:#bdd9ec; }
.media-header nav a { display:inline-flex; align-items:center; min-height:44px; }
main { max-width:1520px; margin:auto; padding:0 40px; }
.media-hero { text-align:center; padding:28px 20px 34px; position:relative; }
.media-hero::after { content:''; display:block; width:min(560px,90%); height:1px; margin:26px auto 0; background:linear-gradient(90deg,transparent,#7ddaff,transparent); box-shadow:0 0 12px #078bff; }
.media-hero h1 { margin:0 0 20px; font-size:clamp(42px,4.7vw,70px); letter-spacing:.12em; color:#f4fcff; text-shadow:0 0 18px #1697e477; }
.media-hero h1 span { display:block; margin-top:9px; font-size:.4em; letter-spacing:.2em; font-weight:400; }
.media-hero p { margin:0; font-size:18px; line-height:1.7; color:#e1eff9; }
.media-hero p span { display:block; margin:7px auto 0; max-width:950px; font-size:14px; color:#b9d2e9; }
.media-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:22px; align-items:stretch; }
.media-card { grid-column:span 2; min-width:0; overflow:hidden; display:flex; flex-direction:column; border:1px solid #64c7ff; border-radius:17px; background:linear-gradient(135deg,#061f40ee,#030e25f5); box-shadow:0 0 7px #399fff66,inset 0 0 16px #0d73c422; }
.media-card:nth-child(-n+2) { grid-column:span 3; }
.media-art { position:relative; overflow:hidden; aspect-ratio:16/9; background:#04132a; border-bottom:1px solid #4289b988; }
.media-art img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; }
.media-copy { padding:20px; flex:1; }
.card-meta { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:14px; }
.card-number { font-size:23px; font-weight:700; color:#9cdeff; }
.media-status { padding:6px 9px; border:1px solid #477da7; border-radius:20px; font-size:11px; line-height:1.4; color:#c1d8e9; }
.is-available .media-status { border-color:#66cfff; color:#e2f7ff; }
.is-available:hover { border-color:#cbf1ff; box-shadow:0 0 20px #2197ff88; }
.media-copy h2 { margin:0 0 16px; font-size:23px; line-height:1.4; color:#fff; }
.media-copy h2 span { display:block; margin-top:5px; font-size:15px; font-weight:400; color:#c6e6ff; line-height:1.5; }
.media-copy p { margin:0 0 12px; font-size:15px; line-height:1.85; }
.media-copy p.english { margin:0; font-size:13px; line-height:1.7; color:#bcd3e8; }
.home-return { display:flex; justify-content:center; padding:36px 0; }
.home-return a { display:inline-flex; align-items:center; min-height:48px; padding:12px 28px; border:1px solid #8ddcff; border-radius:30px; background:linear-gradient(120deg,#0b3f75,#05204a); box-shadow:0 0 15px #1687ef66; font-size:15px; }
footer { max-width:1440px; margin:auto; padding:22px 40px; border-top:1px solid #28517a; font-size:13px; color:#b7cfe1; }
footer span { display:block; margin-top:5px; font-size:11px; }
@media(max-width:760px) {
 .media-header { padding:18px 18px 0; flex-direction:column; align-items:flex-start; gap:8px; }
 .media-brand { font-size:17px; }
 .media-brand img { width:45px; height:50px; }
 .media-brand span[lang=en] { font-size:10px; }
 main { padding:0 18px; }
 .media-hero { padding:24px 0 28px; }
 .media-hero h1 { font-size:44px; }
 .media-hero p { font-size:16px; }
 .media-hero p span { font-size:13px; }
 .media-grid { grid-template-columns:minmax(0,1fr); gap:22px; }
 .media-card,.media-card:nth-child(-n+2) { grid-column:auto; }
 .media-copy { padding:18px; }
 .media-copy h2 { font-size:23px; }
 .media-copy h2 span { font-size:15px; }
 .media-copy p { font-size:16px; }
 .media-copy p.english { font-size:14px; }
 footer { padding:20px 18px; }
}

/* Media Center header navigation only; reuse the established Page 3 menu. */

.travel-main-nav{display:flex;align-items:center;justify-content:flex-end;gap:12px 20px;font-size:14px;line-height:1.4;min-width:0}
.travel-main-nav>a,.travel-areas-menu>summary{display:block;padding:8px 0;color:inherit;cursor:pointer;text-decoration:none;white-space:nowrap}
.travel-main-nav span[lang=en]{display:block;font-size:10px;color:#bfd8ef;margin-top:3px}
.travel-areas-menu{position:relative}
.travel-areas-menu>summary{list-style:none}
.travel-areas-menu>summary{position:relative;padding-right:12px}.travel-areas-menu>summary:after{content:'▾';position:absolute;right:0;top:8px;font-size:10px}
.travel-areas-menu>div{position:absolute;right:0;top:100%;z-index:10;min-width:240px;padding:8px;background:#06182f;border:1px solid #63bfff;border-radius:10px;box-shadow:0 6px 20px #0006}
.travel-areas-menu>div a{display:block;padding:12px;font-size:14px}
.travel-main-nav a:focus-visible,.travel-areas-menu>summary:focus-visible{outline:2px solid #9bdfff;outline-offset:3px}
@media(max-width:1050px){.travel-main-nav{justify-content:flex-start;flex-wrap:wrap}}
@media(max-width:760px){.travel-main-nav{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 14px;border:1px solid #4c8eb066;border-radius:12px;padding:12px;font-size:13px}.travel-main-nav>a,.travel-areas-menu>summary{min-height:44px;padding:4px 0}.travel-areas-menu>div{right:auto;left:0;min-width:220px;max-width:85vw}}

.media-header .travel-main-nav{flex-wrap:nowrap;gap:12px 20px;font-size:14px;color:#eff8ff}.media-header .travel-main-nav>a{display:block}.media-header .travel-main-nav .travel-areas-menu>div a{display:block}.media-brand{flex-shrink:0}
@media(min-width:761px) and (max-width:1050px){.media-header{flex-wrap:wrap}.media-header .travel-main-nav{margin-left:auto}}
@media(max-width:760px){.media-header .travel-main-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:8px 14px;font-size:13px}.media-header .travel-areas-menu>div{left:auto;right:0}.media-header .travel-main-nav>a{display:block}}
