/* Minimal Kyoto Aquarium-like layout system for youyaku3
   Uses project color tokens defined in main.css (Tailwind build)
   Focus: header height, section padding, news cards, footer bottom bar. */

/* Wrapper and section spacing */
.wrap { padding-top: 80px; }
.section { padding: 60px 0; position: relative; }
.section.bgWhite { background: var(--color-white); }
.section.bgGray { background: var(--color-primary-50); }
.section .inner { width: 1000px; margin: 0 auto; text-align: left; }

/* Simple utility from the reference */
.hoverAlpha { transition: opacity .2s ease; }
.hoverAlpha:hover { opacity: .85; }

/* Header (Kyoto style, simplified) */
header.mainHeader { background: var(--color-primary-600); height: 80px; width: 100%; position: fixed; left: 0; top: 0; z-index: 100; box-shadow: 0 0 5px rgba(0,0,0,.05); }
header.mainHeader .inner { width: 1000px; margin: 0 auto; position: relative; display: flex; align-items: center; justify-content: space-between; }
header.mainHeader .siteTitle a { color: #fff; text-decoration: none; font-weight: 700; }
header.mainHeader ul.subMenu { display: flex; gap: 8px; margin: 0 12px 0 0; }
header.mainHeader ul.subMenu li a { display: block; color: #fff; background: var(--color-primary-400); padding: 10px 12px; border-radius: 8px; text-decoration: none; font-size: 13px; }
header.mainHeader ul.subMenu li:last-child a { background: var(--color-primary-300); }

/* Language dropdown */
.langSelectBlock { position: relative; }
.langSelectBlock > button.lang { color: #fff; background: var(--color-primary-500); padding: 10px 12px; border-radius: 8px; }
.langSelectBlock .langList { display: none; position: absolute; right: 0; top: calc(100% + 6px); background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: 8px; min-width: 160px; box-shadow: 0 8px 16px rgba(0,0,0,.08); overflow: hidden; }
.langSelectBlock:hover .langList { display: block; }
.langSelectBlock .langList li { border-bottom: 1px solid rgba(0,0,0,.04); }
.langSelectBlock .langList li:last-child { border-bottom: none; }
.langSelectBlock .langList a, .langSelectBlock .langList span { display: block; padding: 10px 12px; font-size: 14px; color: #0f172a; text-decoration: none; }
.langSelectBlock .langList span { color: #94a3b8; }

/* News wrap (2-column media cards) */
.newsWrap { position: relative; width: 920px; margin: 0 auto; }
.newsWrap h2 { font-size: 22px; padding: 0; margin-bottom: 16px; }
.newsWrap .tabList { font-size: 14px; margin: 0 0 24px; }
.newsWrap .tabList li { display: inline-block; padding-right: 20px; margin-right: 20px; position: relative; }
.newsWrap .tabList li::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; margin: auto 0; height: 14px; border-right: 1px solid var(--color-primary-600); }
.newsWrap .tabList li:last-child { padding-right: 0; margin-right: 0; }
.newsWrap .tabList li:last-child::after { display: none; }
.newsWrap .archiveBlock ul { display: flex; flex-wrap: wrap; justify-content: space-between; text-align: left; gap: 20px 0; margin: 0 0 30px; }
.newsWrap .archiveBlock li { width: 440px; background: #fff; border-radius: 10px; overflow: hidden; }
.newsWrap .archiveBlock li a { display: flex; justify-content: space-between; padding: 24px 30px; color: var(--color-primary-600); text-decoration: none; }
.newsWrap .archiveBlock li p.img { width: 160px; margin: 0; }
.newsWrap .archiveBlock li p.title { width: 200px; font-size: 14px; line-height: 1.8; margin: 0; }
.newsWrap .archiveBlock li span.date { display: block; margin-bottom: 8px; color: #64748b; }
.newsWrap p.btnMore { position: absolute; right: 0; top: 5px; }

/* Footer (bottom bar) */
footer.mainFooter { background: var(--color-primary-900); }
footer.mainFooter .bottomBar { width: 1000px; margin: 0 auto; padding: 18px 0; display: flex; align-items: center; justify-content: space-between; }
footer.mainFooter .bottomBar a, footer.mainFooter .bottomBar p { color: #fff; text-decoration: none; }
footer.mainFooter .bottomBar ul { display: flex; gap: 16px; flex-wrap: wrap; }

/* Hero simplified */
.topVisualWrap { background: linear-gradient(180deg, var(--color-primary-600), var(--color-primary-500)); color: #fff; padding: 72px 0; position: relative; }
.topVisualWrap .titleBlock { text-align: center; }
.topVisualWrap .bottomBar { position: relative; width: 1000px; margin: 24px auto 0; display: flex; gap: 16px; }
.topVisualWrap .timeBlock, .topVisualWrap .programBlock { flex: 1; background: rgba(255,255,255,.12); border-radius: 10px; color: #fff; }
.topVisualWrap .timeBlock .inner, .topVisualWrap .programBlock .inner { padding: 16px; }

@media (max-width: 1024px) { .section .inner, .newsWrap, footer.mainFooter .bottomBar, header.mainHeader .inner, .topVisualWrap .bottomBar { width: 90%; } }