.site-inner { width: min(100% - (var(--site-gutter) * 2), var(--site-width)); margin: 0 auto; }
.header-utility { height: 50px; border-bottom: 1px solid var(--line-color); }
.utility-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.utility-meta { display: flex; align-items: center; gap: 10px; font-size:15px; white-space: nowrap; }
.utility-favorite { padding: 0; border: 0; background: transparent; color: inherit; font-size: inherit; font-weight: inherit; cursor: pointer; }
.utility-divider { color: #888; }

.utility-search { width: 245px; height: 34px; padding: 2px; border-radius: 17px; background: linear-gradient(90deg, #ff4545, #ff963d); }
.utility-search > .wrap { display: flex; align-items: center; width: 100%; height: 100%; border-radius: 15px; overflow: hidden; background: #fff; }
.utility-search input { min-width: 0; flex: 1; height: 100%; padding: 0 8px 0 12px; border: 0; outline: 0; background: transparent; color: inherit; }
.utility-search input::placeholder { color: #aaa; }
.utility-search button { display: flex; align-items: center; justify-content: center; width: 34px; height: 100%; padding: 0; border: 0; background: transparent; color: #ff5b5b; cursor: pointer; }
.utility-search button img { display: block; width: 18px; height: 18px; object-fit: contain; }

.header-main { border-bottom: 1px solid var(--line-color); }
.header-main .site-inner { display: flex; align-items: center; justify-content: space-between; height: 142px; }
.mobile-header-button { display: none; }
.mobile-menu-drawer { display: none; }
.site-logo { display: flex; align-items: center; height: 100%; font-size: 28px; font-weight: 800; letter-spacing: -0.05em; }
.site-logo-image { display: block; width: auto; height: auto; object-fit: contain; }
.header-main .site-logo-image { width: 180px; height: auto; }
.header-main .site-nav { margin-left: auto; border: 0; }
.site-nav { border-bottom: 1px solid var(--line-color); }

.site-menu { display: flex; align-items: center; gap: 34px; }
.site-menu-item { position: relative; }
.site-menu-item > a { display: block; padding: 17px 0; font-size: 18px; font-weight: 700; white-space: nowrap; }
.site-menu-item > a:hover, .site-menu-item > a:focus, .site-menu-item.is-active > a { color: #ff5b5b; }
.site-menu-item.has-submenu > a::after { display: inline-block; width: 6px; height: 6px; margin: 0 0 3px 8px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); content: ""; }
.site-submenu { display: none; position: absolute; top: 100%; left: 50%; z-index: 20; min-width: 150px; padding: 8px; border: 1px solid var(--line-color); border-radius: var(--card-radius); background: var(--surface-color); transform: translateX(-50%); }
.site-submenu a { display: block; padding: 9px 10px; white-space: nowrap; }
.site-submenu a:hover, .site-submenu a:focus { background: var(--muted-color); color: #ff5b5b; }
.site-menu-item:hover .site-submenu, .site-menu-item:focus-within .site-submenu { display: block; }
.site-menu-empty { padding: 17px 0; color: #888; }
.site-menu-empty a { margin-left: 8px; color: #ff5b5b; text-decoration: underline; }
.site-layout { display: grid; grid-template-columns: minmax(0, 1fr) 383px; gap: 16px; align-items: start; width: min(100% - (var(--site-gutter) * 2), var(--site-width)); min-height: 60vh; margin: 24px auto 0; }
.site-main { min-width: 0; }
.site-aside { display: grid; gap: 14px; }
.aside-banner img { display: block; width: 100%; height: auto; }
.site-aside > section:not(.aside-banner) { height: 100%; padding: 2px; border-radius: 8px; background: linear-gradient(127deg, #f7323f, #ff914d); }
.site-aside > section:not(.aside-banner) > .wrap { min-width: 0; height: 100%; padding: 18px 14px; border-radius: 6px; background: #fff; }
.site-aside h2 { margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid #dcdcdc; font-size: 16px; }
.aside-login { background: linear-gradient(127deg, #f7323f, #ff914d); }
.aside-notice, .aside-latest, .aside-popular, .aside-ranking { background: linear-gradient(-45deg, #ff8e4d, #f7343f); }
.aside-notice .aside-list b { padding: 2px 6px; border-radius: 5px; background: linear-gradient(90deg, #f7323f, #ff8e4d, #f7323f); color: #fff; }
.site-aside > section.aside-notice > .wrap { padding: 15px; }
.aside-notice .aside-list li { gap: 10px; padding: 7px 0; border-bottom: 0; }
.aside-notice .aside-list a { color: #222; font-size: 16px; font-weight: 600; }
.notice-badge { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 78px; height: 30px; border-radius: 7px; background: linear-gradient(180deg, #f7323f 0%, #ff8e4d 50%, #f7323f 100%); color: #fff; font-size: 16px; font-weight: 700; }
.aside-login form { display: grid; gap: 7px; }
.aside-login input[type="text"], .aside-login input[type="password"] { width: 100%; height: 38px; padding: 0 10px; border: 1px solid #eaeaea; border-radius: 5px; color: #a8a8a8; }
.aside-login input::placeholder, .aside-login-options, .aside-login-options a { color: #a8a8a8; }
.aside-login button { height: 38px; border: 0; border-radius: 5px; background: linear-gradient(90deg, #000, #3a3a3a, #000); color: #fff; cursor: pointer; }
.aside-login-options { display: flex; align-items: center; justify-content: space-between;  }
.aside-login-options input { accent-color: #f7323f; }
.aside-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.aside-list li { display: flex; align-items: center; gap: 4px; min-width: 0; padding: 7px 0; border-bottom: 1px solid #dcdcdc;  }
.aside-list li:last-child { border-bottom: 0; }
.aside-latest .aside-list li, .aside-popular .aside-list li { border-bottom: 0; }
.aside-list a { overflow: hidden; flex: 1; color: #333; text-overflow: ellipsis; white-space: nowrap; }
.aside-list b { flex: 0 0 auto; color: #f7323f; font-weight: 400; }
.aside-ranking-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: ranking; }
.aside-ranking-list li { display: flex; align-items: center; gap: 8px;  counter-increment: ranking; }
.aside-ranking-list li::before { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 4px; background: #dcdcdc; color: #696969; content: counter(ranking); }
.aside-ranking-list li:nth-child(1)::before, .aside-ranking-list li:nth-child(2)::before, .aside-ranking-list li:nth-child(3)::before { width: 24px; height: 24px; border-radius: 0; background-color: transparent; background-position: center; background-repeat: no-repeat; background-size: contain; content: ""; }
.aside-ranking-list li:nth-child(1)::before { background-image: url('../img/icon_rank_1.png'); }
.aside-ranking-list li:nth-child(2)::before { background-image: url('../img/icon_rank_2.png'); }
.aside-ranking-list li:nth-child(3)::before { background-image: url('../img/icon_rank_3.png'); }
.aside-ranking-list li:nth-child(-n + 3) b { color: #ffc514; }
.aside-ranking-list li:nth-child(n + 4) b { color: #797979; }
.aside-ranking-list b { display: inline-flex; align-items: center; gap: 4px; }
.aside-ranking-list b::before { display: inline-block; width: 14px; height: 14px; background: url('../img/icon_p_silver.png') center / contain no-repeat; content: ""; }
.aside-ranking-list li:nth-child(-n + 3) b::before { background-image: url('../img/icon_p_gold.png'); }
.aside-ranking-list li span { overflow: hidden; flex: 1; text-overflow: ellipsis; white-space: nowrap; }
.aside-ranking-list b { font-weight: 600; }
.site-footer { margin-top: 60px; border-top: 1px solid var(--line-color); }

.footer-layout { display: grid; grid-template-columns: 600px minmax(0, 1fr); gap: 72px; padding: 36px 0 44px; }
.footer-brand-zone, .footer-navigation-zone { min-height: 280px; }
.footer-brand-zone { padding: 0 12px 0 0; }
.footer-navigation-zone { padding: 18px 0 0; }
.footer-logo { display: inline-flex; height: auto; margin-bottom: 38px; }
.footer-logo .site-logo-image { width: 180px; height: auto; }
.footer-brand-zone hr { margin: 0 0 28px; border: 0; border-top: 1px solid var(--line-color); }
.footer-brand-zone p { margin: 0; color: #777; line-height: 1.65; }
.footer-social-links { display: flex; align-items: center; gap: 18px; margin-top: 22px; }
.footer-social-links a { display: inline-flex; align-items: center; justify-content: center; }
.footer-social-links img { display: block; width: 34px; height: 34px; object-fit: contain; }
.footer-menu-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 30px 34px; }
.footer-menu-group { min-width: 0; }
.footer-menu-title { display: block; margin-bottom: 18px; font-size: 17px; font-weight: 800; white-space: nowrap; }
.footer-menu-group ul { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; }
.footer-menu-group li a { color: #222; white-space: nowrap; }
.footer-menu-group a:hover, .footer-menu-group a:focus { color: #ff5b5b; }
.copyright { width: min(100% - (var(--site-gutter) * 2), var(--site-width)); margin: 0 auto; padding: 20px 0; border-top: 1px solid var(--line-color); color: #666; text-align: center; }

@media (max-width: 1024px) {
	:root { --site-gutter: 16px; }
	.header-utility { display: none; }
	.header-main .site-inner { display: grid; position: relative; grid-template-rows: 54px 1fr; justify-content: normal; height: 164px; }
	.header-main .site-logo { grid-row: 2; justify-self: center; align-self: start; height: auto; }
	.header-main .site-logo-image { width: 180px; max-width: none; }
	.header-main .site-nav { display: none; }
	.mobile-header-button { display: flex; position: absolute; top: 12px; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; }
	.mobile-header-button img { width: 28px; height: 28px; object-fit: contain; }
	.mobile-menu-button { left: 0; }
	.mobile-login-button { right: 0; }
	.mobile-menu-drawer { display: block; position: fixed; inset: 0; z-index: 1000; visibility: hidden; pointer-events: none; }
	.mobile-menu-drawer.is-open { visibility: visible; pointer-events: auto; }
	.mobile-menu-dim { position: absolute; inset: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .35); opacity: 0; transition: opacity .25s ease; }
	.mobile-menu-panel { display: flex; position: relative; flex-direction: column; width: min(100%, 420px); height: 100%; overflow: hidden; background: #fff; transform: translateX(-100%); transition: transform .25s ease; }
	.mobile-menu-drawer.is-open .mobile-menu-dim { opacity: 1; }
	.mobile-menu-drawer.is-open .mobile-menu-panel { transform: translateX(0); }
	.mobile-menu-header { display: flex; align-items: flex-start; justify-content: space-between; height: 172px; padding: 34px 30px; border-bottom: 1px solid #ddd; }
	.mobile-menu-logo img { width: 180px; height: auto; }
	.mobile-menu-close { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; }
	.mobile-menu-close img { width: 32px; height: 32px; object-fit: contain; }
	.mobile-menu-content { -webkit-overflow-scrolling: touch; overflow-y: auto; flex: 1; min-height: 0; }
	.mobile-menu-nav > ul > li { border-bottom: 1px solid #e5e5e5; }
	.mobile-menu-nav a, .mobile-menu-toggle { display: block; width: 100%; padding: 23px 34px; color: #111; font-size: 22px; font-weight: 700; text-align: left; }
	.mobile-menu-toggle { position: relative; }
	.mobile-menu-toggle::after { position: absolute; top: 50%; right: 38px; width: 10px; height: 10px; margin-top: -7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); content: ""; }
	.mobile-menu-toggle[aria-expanded="true"]::after { margin-top: -2px; transform: rotate(225deg); }
	.mobile-submenu { background: #f7f7f7; }
	.mobile-submenu li { border-top: 1px solid #e5e5e5; }
	.mobile-submenu a { padding: 17px 50px; font-size: 20px; font-weight: 400; }
	.mobile-menu-banners { display: grid; gap: 16px; padding: 38px; }
	.mobile-menu-banners img { width: 100%; height: auto; border-radius: 8px; }
	body.mobile-menu-open { overflow: hidden; }
	.site-layout { grid-template-columns: 1fr; gap: 14px; margin-top: 16px; }
	.footer-layout { grid-template-columns: 1fr; gap: 24px; padding: 24px 0; }
	.footer-brand-zone, .footer-navigation-zone { min-height: 0; padding: 0; }
	.footer-logo { margin-bottom: 24px; }
	.footer-menu-grid { display: block; column-count: 3; column-gap: 16px; }
	.footer-menu-group { -webkit-column-break-inside: avoid; break-inside: avoid; margin-bottom: 24px; }
	.footer-menu-title { margin-bottom: 12px; }
	.footer-menu-group ul { gap: 9px; }
	.footer-menu-group li a { }
}


.skip-link { position: fixed; top: 0; left: 0; z-index: 10000; padding: 10px 16px; background: #000; color: #fff; transform: translateY(-100%); }
.skip-link:focus { transform: translateY(0); }

.sound_only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
#hd_pop { position: relative; z-index: 1000; width: min(100% - (var(--site-gutter) * 2), var(--site-width)); height: 0; margin: 0 auto; }
#hd_pop > h2 { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.hd_pops { position: absolute; border: 1px solid #e9e9e9; background: #fff; }
.hd_pops img { max-width: 100%; }
.hd_pops_footer { position: relative; padding: 0; background: #000; color: #fff; text-align: left; }
.hd_pops_footer::after { display: block; visibility: hidden; clear: both; content: ""; }
.hd_pops_footer button { padding: 10px; border: 0; color: #fff; }
.hd_pops_footer .hd_pops_reject { background: #000; text-align: left; }
.hd_pops_footer .hd_pops_close { position: absolute; top: 0; right: 0; background: #393939; }