:root { --navy: #062f38; --navy-dark: #03242b; --navy-soft: #0a4650; --lime: #d6ff38; --lime-dark: #b7e51e; --mint: #ecffc3; --cream: #fbfff1; --white: #ffffff; --ink: #102c32; --muted: #647b7f; --line: rgba(9, 74, 82, 0.13); --orange: #ff8b4a; --shadow: 0 20px 50px rgba(3, 47, 56, 0.13); --radius-large: 32px; --radius-medium: 22px; --radius-small: 14px; }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body { margin: 0; background: var(--cream); color: var(--ink); font-family: "Noto Sans TC", sans-serif; overflow-x: hidden; }

img { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

header { position: sticky; top: 0; z-index: 30; background: rgba(251, 255, 241, 0.9); border-bottom: 1px solid transparent; backdrop-filter: blur(18px); transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; }
header.is-scrolled { background: rgba(251, 255, 241, 0.97); border-color: var(--line); box-shadow: 0 8px 28px rgba(3, 47, 56, 0.08); }
header .header-inner { width: min(1420px, 92%); min-height: 78px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
header .site-title { margin: 0; font-size: 22px; font-weight: 900; letter-spacing: -0.04em; }
header .site-title a { display: flex; align-items: center; gap: 10px; }
header .logo-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 16px; background: var(--navy); color: var(--lime); font-size: 21px; box-shadow: 0 8px 18px rgba(3, 47, 56, 0.2); transform: rotate(-7deg); transition: transform 0.3s ease; }
header .site-title a:hover .logo-mark { transform: rotate(5deg) scale(1.06); }
header .logo-text { color: var(--navy); }
header .logo-text span { color: #4d8500; }
header .header-nav { display: flex; align-items: center; gap: 8px; }
header .header-nav a { padding: 10px 13px; border-radius: 999px; color: var(--navy-soft); font-size: 14px; font-weight: 700; transition: color 0.25s ease, background 0.25s ease, transform 0.25s ease; }
header .header-nav a:hover { background: var(--mint); color: var(--navy); transform: translateY(-2px); }
header .header-action { display: flex; align-items: center; gap: 10px; }
header .header-action a { display: inline-flex; align-items: center; gap: 7px; padding: 11px 16px; border-radius: 999px; background: var(--navy); color: var(--white); font-size: 14px; font-weight: 800; box-shadow: 0 10px 22px rgba(3, 47, 56, 0.18); transition: transform 0.25s ease, background 0.25s ease; }
header .header-action a:hover { background: var(--navy-soft); transform: translateY(-3px); }

main { display: block; }

#hero-section { position: relative; overflow: hidden; padding: 66px 0 54px; }
#hero-section::before { content: ""; position: absolute; width: 560px; height: 560px; top: -260px; right: -130px; border-radius: 50%; background: rgba(214, 255, 56, 0.44); filter: blur(3px); }
#hero-section::after { content: ""; position: absolute; width: 260px; height: 260px; bottom: -160px; left: -80px; border-radius: 50%; border: 42px solid rgba(10, 70, 80, 0.08); }
#hero-section .hero-content { position: relative; z-index: 2; width: min(1420px, 92%); margin: 0 auto; display: grid; grid-template-columns: 1.04fr 0.96fr; align-items: center; gap: 54px; }
#hero-section .hero-left { padding: 18px 0; }
#hero-section .hero-label { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 999px; background: var(--mint); color: var(--navy); font-size: 13px; font-weight: 800; letter-spacing: 0.05em; }
#hero-section .hero-label::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #66b20a; box-shadow: 0 0 0 5px rgba(102, 178, 10, 0.14); animation: pulse-dot 1.8s ease infinite; }
#hero-section .hero-title { max-width: 690px; margin: 18px 0 16px; color: var(--navy); font-size: clamp(47px, 6vw, 90px); font-weight: 900; letter-spacing: -0.095em; line-height: 0.99; }
#hero-section .hero-title span { display: block; color: #5d9e08; }
#hero-section .hero-text { max-width: 640px; margin: 0; color: var(--muted); font-size: 18px; line-height: 1.9; }
#hero-section .hero-action { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
#hero-section .hero-action a { display: inline-flex; align-items: center; gap: 9px; padding: 15px 22px; border-radius: 999px; font-size: 15px; font-weight: 800; transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease; }
#hero-section .hero-action .primary-action { background: var(--navy); color: var(--white); box-shadow: 0 14px 28px rgba(3, 47, 56, 0.2); }
#hero-section .hero-action .secondary-action { background: var(--white); color: var(--navy); border: 1px solid var(--line); }
#hero-section .hero-action a:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(3, 47, 56, 0.2); }
#hero-section .hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 34px; }
#hero-section .hero-tags span { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--navy-soft); font-size: 13px; font-weight: 700; }
#hero-section .hero-media { position: relative; min-height: 590px; }
#hero-section .hero-figure { position: absolute; inset: 10px 0 10px 28px; margin: 0; overflow: hidden; border-radius: 42px; background: var(--navy); box-shadow: 0 26px 55px rgba(3, 47, 56, 0.22); transform: rotate(2.5deg); }
#hero-section .hero-figure img { width: 100%; height: 100%; object-fit: cover; opacity: 0.83; }
#hero-section .hero-figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(3, 47, 56, 0.02), rgba(3, 47, 56, 0.62) ); }
#hero-section .hero-score { position: absolute; z-index: 3; top: 44px; left: -26px; width: 190px; padding: 17px; border-radius: 20px; background: rgba(255, 255, 255, 0.92); box-shadow: var(--shadow); backdrop-filter: blur(12px); animation: float-card 4s ease-in-out infinite; }
#hero-section .hero-score-title { margin: 0; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: 0.12em; }
#hero-section .hero-score-result { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; color: var(--navy); font-size: 26px; font-weight: 900; }
#hero-section .hero-score-result span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--mint); font-size: 17px; }
#hero-section .hero-badge { position: absolute; z-index: 3; right: -18px; bottom: 54px; width: 176px; padding: 17px; border-radius: 20px; background: var(--lime); color: var(--navy); box-shadow: var(--shadow); animation: float-card 4.4s ease-in-out infinite reverse; }
#hero-section .hero-badge strong { display: block; margin-top: 3px; font-size: 25px; font-weight: 900; }
#hero-section .hero-badge span { font-size: 13px; font-weight: 800; }

#category-section { padding: 26px 0 74px; }
#category-section .category-content { width: min(1420px, 92%); margin: 0 auto; }
#category-section .category-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
#category-section .category-item { position: relative; overflow: hidden; display: flex; align-items: center; gap: 11px; min-height: 92px; padding: 16px; border: 1px solid var(--line); border-radius: 19px; background: rgba(255, 255, 255, 0.68); transition: transform 0.28s ease, border-color 0.28s ease, background 0.28s ease, box-shadow 0.28s ease; }
#category-section .category-item::after { content: ""; position: absolute; width: 70px; height: 70px; right: -28px; bottom: -38px; border-radius: 50%; background: rgba(214, 255, 56, 0.45); transition: transform 0.28s ease; }
#category-section .category-item:hover { transform: translateY(-7px); border-color: rgba(93, 158, 8, 0.35); background: var(--white); box-shadow: 0 14px 26px rgba(3, 47, 56, 0.08); }
#category-section .category-item:hover::after { transform: scale(1.5); }
#category-section .category-icon { position: relative; z-index: 2; width: 45px; height: 45px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 15px; background: var(--navy); color: var(--lime); font-size: 21px; }
#category-section .category-text { position: relative; z-index: 2; color: var(--navy); font-size: 14px; font-weight: 800; }

#featured-section { padding: 86px 0 100px; background: var(--navy); color: var(--white); }
#featured-section .featured-content { width: min(1420px, 92%); margin: 0 auto; }
#featured-section .section-head { display: flex; align-items: end; justify-content: space-between; gap: 26px; margin-bottom: 28px; }
#featured-section .section-label { margin: 0 0 7px; color: var(--lime); font-size: 13px; font-weight: 800; letter-spacing: 0.14em; }
#featured-section .section-title { margin: 0; font-size: clamp(31px, 4vw, 54px); font-weight: 900; letter-spacing: -0.075em; line-height: 1.05; }
#featured-section .section-action { flex: 0 0 auto; padding: 11px 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); color: var(--white); font-size: 14px; font-weight: 800; transition: background 0.25s ease, transform 0.25s ease; }
#featured-section .section-action:hover { background: var(--lime); color: var(--navy); transform: translateY(-3px); }
#featured-section .featured-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 215px; gap: 16px; }
#featured-section .featured-item { position: relative; overflow: hidden; border-radius: 24px; background: var(--navy-soft); box-shadow: 0 18px 38px rgba(0, 0, 0, 0.16); transition: transform 0.35s ease, box-shadow 0.35s ease; }
#featured-section .featured-item:nth-child(1) { grid-column: span 6; grid-row: span 2; }
#featured-section .featured-item:nth-child(2) { grid-column: span 3; }
#featured-section .featured-item:nth-child(3) { grid-column: span 3; }
#featured-section .featured-item:nth-child(4) { grid-column: span 3; }
#featured-section .featured-item:nth-child(5) { grid-column: span 3; }
#featured-section .featured-item:hover { transform: translateY(-8px); box-shadow: 0 24px 46px rgba(0, 0, 0, 0.23); }
#featured-section .featured-image { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease, opacity 0.5s ease; }
#featured-section .featured-item:hover .featured-image { transform: scale(1.09); opacity: 0.76; }
#featured-section .featured-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: end; padding: 20px; background: linear-gradient( 180deg, rgba(3, 36, 43, 0.02) 30%, rgba(3, 36, 43, 0.9) 100% ); }
#featured-section .featured-tag { align-self: flex-start; margin-bottom: 8px; padding: 5px 9px; border-radius: 999px; background: var(--lime); color: var(--navy); font-size: 11px; font-weight: 900; }
#featured-section .featured-title { margin: 0; font-size: 19px; font-weight: 900; letter-spacing: -0.035em; }
#featured-section .featured-item:nth-child(1) .featured-title { font-size: 30px; }
#featured-section .featured-meta { display: flex; gap: 11px; margin-top: 7px; color: rgba(255, 255, 255, 0.76); font-size: 12px; font-weight: 700; }
#featured-section .featured-play { position: absolute; top: 18px; right: 18px; width: 45px; height: 45px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, 0.9); color: var(--navy); font-size: 16px; transform: translateY(-6px); opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease, background 0.3s ease; }
#featured-section .featured-item:hover .featured-play { opacity: 1; transform: translateY(0); }
#featured-section .featured-play:hover { background: var(--lime); }

#popular-section { padding: 102px 0 100px; }
#popular-section .popular-content { width: min(1420px, 92%); margin: 0 auto; }
#popular-section .section-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 18px; margin-bottom: 25px; }
#popular-section .section-label { margin: 0 0 7px; color: #5d9e08; font-size: 13px; font-weight: 800; letter-spacing: 0.14em; }
#popular-section .section-title { margin: 0; color: var(--navy); font-size: clamp(31px, 4vw, 52px); font-weight: 900; letter-spacing: -0.075em; line-height: 1.05; }
#popular-section .section-text { max-width: 600px; margin: 8px 0 0; color: var(--muted); font-size: 16px; line-height: 1.85; }
#popular-section .section-action { padding: 11px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); color: var(--navy); font-size: 14px; font-weight: 800; transition: border-color 0.25s ease, transform 0.25s ease, background 0.25s ease; }
#popular-section .section-action:hover { border-color: var(--lime-dark); background: var(--mint); transform: translateY(-3px); }
#popular-section .popular-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 17px; }
#popular-section .popular-item { overflow: hidden; border-radius: 20px; border: 1px solid var(--line); background: var(--white); transition: transform 0.32s ease, box-shadow 0.32s ease, border-color 0.32s ease; }
#popular-section .popular-item:hover { transform: translateY(-8px); border-color: rgba(93, 158, 8, 0.38); box-shadow: var(--shadow); }
#popular-section .popular-media { position: relative; overflow: hidden; height: 182px; background: var(--navy-soft); }
#popular-section .popular-image { width: 100%; height: 100%; object-fit: cover; transition: transform 0.48s ease; }
#popular-section .popular-item:hover .popular-image { transform: scale(1.09); }
#popular-section .popular-rank { position: absolute; top: 12px; left: 12px; min-width: 32px; height: 32px; display: grid; place-items: center; padding: 0 8px; border-radius: 11px; background: var(--lime); color: var(--navy); font-size: 13px; font-weight: 900; box-shadow: 0 7px 15px rgba(3, 47, 56, 0.15); }
#popular-section .popular-content-item { padding: 15px 16px 17px; }
#popular-section .popular-title { margin: 0; color: var(--navy); font-size: 16px; font-weight: 900; letter-spacing: -0.025em; }
#popular-section .popular-meta { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; color: var(--muted); font-size: 12px; font-weight: 700; }
#popular-section .popular-type { color: #5d9e08; }

#challenge-section { padding: 82px 0; background: var(--mint); }
#challenge-section .challenge-content { width: min(1420px, 92%); margin: 0 auto; display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px; align-items: center; }
#challenge-section .challenge-media { position: relative; min-height: 430px; }
#challenge-section .challenge-figure { position: absolute; inset: 18px 44px 18px 0; overflow: hidden; margin: 0; border-radius: 30px; box-shadow: var(--shadow); }
#challenge-section .challenge-figure img { width: 100%; height: 100%; object-fit: cover; }
#challenge-section .challenge-sticker { position: absolute; right: 0; bottom: 42px; width: 151px; padding: 15px; border-radius: 21px; background: var(--navy); color: var(--white); box-shadow: var(--shadow); transform: rotate(-5deg); }
#challenge-section .challenge-sticker strong { display: block; color: var(--lime); font-size: 28px; font-weight: 900; }
#challenge-section .challenge-sticker span { display: block; margin-top: 2px; font-size: 13px; font-weight: 800; }
#challenge-section .section-label { margin: 0 0 8px; color: #5d9e08; font-size: 13px; font-weight: 800; letter-spacing: 0.14em; }
#challenge-section .section-title { margin: 0; color: var(--navy); font-size: clamp(34px, 4vw, 58px); font-weight: 900; letter-spacing: -0.085em; line-height: 1.05; }
#challenge-section .section-text { margin: 16px 0 0; color: var(--navy-soft); font-size: 17px; line-height: 1.9; }
#challenge-section .challenge-list { display: grid; gap: 11px; margin-top: 23px; }
#challenge-section .challenge-item { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border-radius: 15px; background: rgba(255, 255, 255, 0.58); color: var(--navy); font-size: 14px; font-weight: 800; }
#challenge-section .challenge-icon { width: 31px; height: 31px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 10px; background: var(--navy); color: var(--lime); }
#challenge-section .challenge-action { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; padding: 14px 20px; border-radius: 999px; background: var(--navy); color: var(--white); font-size: 15px; font-weight: 800; transition: transform 0.28s ease, background 0.28s ease; }
#challenge-section .challenge-action:hover { background: var(--navy-soft); transform: translateY(-4px); }

#guide-section { padding: 102px 0 104px; }
#guide-section .guide-content { width: min(1420px, 92%); margin: 0 auto; }
#guide-section .section-head { max-width: 720px; margin-bottom: 26px; }
#guide-section .section-label { margin: 0 0 7px; color: #5d9e08; font-size: 13px; font-weight: 800; letter-spacing: 0.14em; }
#guide-section .section-title { margin: 0; color: var(--navy); font-size: clamp(31px, 4vw, 52px); font-weight: 900; letter-spacing: -0.075em; line-height: 1.06; }
#guide-section .section-text { margin: 12px 0 0; color: var(--muted); font-size: 16px; line-height: 1.9; }
#guide-section .guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
#guide-section .guide-item { position: relative; overflow: hidden; min-height: 235px; padding: 23px; border-radius: 22px; border: 1px solid var(--line); background: var(--white); transition: transform 0.3s ease, box-shadow 0.3s ease; }
#guide-section .guide-item:nth-child(2) { background: var(--navy); color: var(--white); }
#guide-section .guide-item:nth-child(3) { background: var(--lime); }
#guide-section .guide-item:hover { transform: translateY(-8px); box-shadow: var(--shadow); }
#guide-section .guide-number { position: absolute; top: -13px; right: 13px; color: rgba(3, 47, 56, 0.08); font-size: 110px; font-weight: 900; line-height: 1; }
#guide-section .guide-item:nth-child(2) .guide-number { color: rgba(255, 255, 255, 0.1); }
#guide-section .guide-icon { position: relative; z-index: 2; width: 50px; height: 50px; display: grid; place-items: center; border-radius: 16px; background: var(--mint); color: var(--navy); font-size: 24px; }
#guide-section .guide-item:nth-child(2) .guide-icon { background: var(--lime); }
#guide-section .guide-item:nth-child(3) .guide-icon { background: var(--navy); color: var(--lime); }
#guide-section .guide-title { position: relative; z-index: 2; margin: 23px 0 6px; color: var(--navy); font-size: 20px; font-weight: 900; letter-spacing: -0.04em; }
#guide-section .guide-item:nth-child(2) .guide-title { color: var(--white); }
#guide-section .guide-text { position: relative; z-index: 2; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.8; }
#guide-section .guide-item:nth-child(2) .guide-text { color: rgba(255, 255, 255, 0.74); }
#guide-section .guide-item:nth-child(3) .guide-text { color: var(--navy-soft); }

#faq-section { padding: 96px 0 106px; background: #f4fadf; }
#faq-section .faq-content { width: min(1120px, 92%); margin: 0 auto; display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 50px; }
#faq-section .section-label { margin: 0 0 7px; color: #5d9e08; font-size: 13px; font-weight: 800; letter-spacing: 0.14em; }
#faq-section .section-title { margin: 0; color: var(--navy); font-size: clamp(31px, 4vw, 52px); font-weight: 900; letter-spacing: -0.075em; line-height: 1.06; }
#faq-section .section-text { margin: 14px 0 0; color: var(--muted); font-size: 15px; line-height: 1.9; }
#faq-section .faq-list { display: grid; gap: 12px; }
#faq-section .faq-item { padding: 18px 19px; border-radius: 17px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.76); transition: transform 0.28s ease, background 0.28s ease, box-shadow 0.28s ease; }
#faq-section .faq-item:hover { transform: translateX(7px); background: var(--white); box-shadow: 0 12px 24px rgba(3, 47, 56, 0.07); }
#faq-section .faq-title { margin: 0; color: var(--navy); font-size: 16px; font-weight: 900; }
#faq-section .faq-text { margin: 7px 0 0; color: var(--muted); font-size: 14px; line-height: 1.8; }

footer { padding: 46px 0 30px; background: var(--navy-dark); color: rgba(255, 255, 255, 0.75); }
footer .footer-content { width: min(1420px, 92%); margin: 0 auto; }
footer .footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 44px; padding-bottom: 34px; }
footer .footer-brand { display: flex; align-items: center; gap: 11px; color: var(--white); font-size: 21px; font-weight: 900; }
footer .footer-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 15px; background: var(--lime); color: var(--navy); font-size: 20px; }
footer .footer-text { max-width: 490px; margin: 15px 0 0; color: rgba(255, 255, 255, 0.6); font-size: 14px; line-height: 1.9; }
footer .footer-title { margin: 0 0 13px; color: var(--lime); font-size: 14px; font-weight: 900; letter-spacing: 0.1em; }
footer .footer-list { display: grid; gap: 9px; }
footer .footer-list a { color: rgba(255, 255, 255, 0.68); font-size: 14px; font-weight: 700; transition: color 0.25s ease, transform 0.25s ease; }
footer .footer-list a:hover { color: var(--lime); transform: translateX(4px); }
footer .footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.47); font-size: 12px; }
footer .footer-tags { display: flex; flex-wrap: wrap; gap: 8px; }
footer .footer-tags span { padding: 5px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); }

.reveal-item { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal-item.is-active { opacity: 1; transform: translateY(0); }

@keyframes pulse-dot { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.3); } }
@keyframes float-card { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-13px); } }

@media (max-width: 1280px) {
	header .header-inner { width: min(1180px, 92%); }
	#hero-section .hero-content { width: min(1180px, 92%); gap: 42px; }
	#hero-section .hero-title { font-size: clamp(49px, 6vw, 78px); }
	#hero-section .hero-media { min-height: 525px; }
	#category-section .category-content { width: min(1180px, 92%); }
	#category-section .category-grid { grid-template-columns: repeat(3, 1fr); }
	#featured-section .featured-content { width: min(1180px, 92%); }
	#popular-section .popular-content { width: min(1180px, 92%); }
	#popular-section .popular-grid { grid-template-columns: repeat(4, 1fr); }
	#challenge-section .challenge-content { width: min(1180px, 92%); }
	#guide-section .guide-content { width: min(1180px, 92%); }
	footer .footer-content { width: min(1180px, 92%); }
}
@media (max-width: 960px) {
	header .header-nav { display: none; }
	#hero-section { padding-top: 40px; }
	#hero-section .hero-content { grid-template-columns: 1fr; }
	#hero-section .hero-left { max-width: 760px; }
	#hero-section .hero-media { min-height: 460px; }
	#hero-section .hero-figure { inset: 10px 20px 10px 20px; }
	#hero-section .hero-score { left: -2px; }
	#hero-section .hero-badge { right: -3px; }
	#featured-section .featured-grid { grid-auto-rows: 190px; }
	#featured-section .featured-item:nth-child(1) { grid-column: span 7; }
	#featured-section .featured-item:nth-child(2) { grid-column: span 5; }
	#featured-section .featured-item:nth-child(3) { grid-column: span 5; }
	#featured-section .featured-item:nth-child(4) { grid-column: span 6; }
	#featured-section .featured-item:nth-child(5) { grid-column: span 6; }
	#popular-section .popular-grid { grid-template-columns: repeat(3, 1fr); }
	#challenge-section .challenge-content { grid-template-columns: 1fr; }
	#challenge-section .challenge-media { min-height: 370px; }
	#guide-section .guide-grid { grid-template-columns: 1fr; }
	#guide-section .guide-item { min-height: 190px; }
	#faq-section .faq-content { grid-template-columns: 1fr; gap: 24px; }
	footer .footer-top { grid-template-columns: 1fr 1fr; }
	footer .footer-about { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
	header .header-inner { min-height: 70px; }
	header .site-title { font-size: 19px; }
	header .logo-mark { width: 38px; height: 38px; border-radius: 14px; }
	header .header-action a { padding: 10px 13px; font-size: 13px; }
	#hero-section { padding: 35px 0 38px; }
	#hero-section .hero-title { font-size: clamp(52px, 13vw, 79px); }
	#hero-section .hero-text { font-size: 16px; }
	#hero-section .hero-media { min-height: 380px; }
	#hero-section .hero-figure { inset: 0 0 0 0; border-radius: 30px; transform: rotate(0); }
	#hero-section .hero-score { top: 18px; left: -10px; width: 157px; padding: 13px; }
	#hero-section .hero-score-result { font-size: 22px; }
	#hero-section .hero-badge { right: -6px; bottom: 18px; width: 145px; padding: 13px; }
	#hero-section .hero-badge strong { font-size: 21px; }
	#category-section { padding-bottom: 58px; }
	#category-section .category-grid { grid-template-columns: repeat(2, 1fr); }
	#category-section .category-item { min-height: 79px; padding: 13px; }
	#featured-section { padding: 68px 0 76px; }
	#featured-section .section-head { align-items: start; flex-direction: column; }
	#featured-section .featured-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 188px; }
	#featured-section .featured-item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
	#featured-section .featured-item:nth-child(2) { grid-column: span 1; }
	#featured-section .featured-item:nth-child(3) { grid-column: span 1; }
	#featured-section .featured-item:nth-child(4) { grid-column: span 1; }
	#featured-section .featured-item:nth-child(5) { grid-column: span 1; }
	#featured-section .featured-overlay { padding: 15px; }
	#featured-section .featured-title { font-size: 16px; }
	#featured-section .featured-item:nth-child(1) .featured-title { font-size: 24px; }
	#popular-section { padding: 76px 0; }
	#popular-section .section-head { grid-template-columns: 1fr; }
	#popular-section .popular-grid { grid-template-columns: repeat(2, 1fr); }
	#popular-section .popular-media { height: 155px; }
	#challenge-section { padding: 66px 0; }
	#challenge-section .challenge-media { min-height: 330px; }
	#challenge-section .challenge-figure { inset: 0 25px 0 0; }
	#challenge-section .challenge-sticker { bottom: 20px; }
	#guide-section { padding: 78px 0; }
	#faq-section { padding: 74px 0; }
	footer .footer-top { grid-template-columns: 1fr; gap: 27px; }
	footer .footer-about { grid-column: auto; }
	footer .footer-bottom { align-items: start; flex-direction: column; }
}
@media (max-width: 500px) {
	header .header-inner { width: 90%; }
	header .site-title { font-size: 17px; }
	header .logo-text span { display: none; }
	header .header-action a { padding: 9px 11px; }
	#hero-section .hero-content { width: 90%; }
	#hero-section .hero-label { font-size: 11px; }
	#hero-section .hero-title { font-size: 57px; }
	#hero-section .hero-action { display: grid; }
	#hero-section .hero-action a { justify-content: center; }
	#hero-section .hero-media { min-height: 290px; }
	#hero-section .hero-score { top: 13px; left: -7px; width: 133px; padding: 11px; border-radius: 16px; }
	#hero-section .hero-score-title { font-size: 10px; }
	#hero-section .hero-score-result { font-size: 18px; }
	#hero-section .hero-score-result span { width: 29px; height: 29px; font-size: 15px; }
	#hero-section .hero-badge { right: -7px; bottom: 13px; width: 126px; border-radius: 16px; }
	#hero-section .hero-badge strong { font-size: 18px; }
	#hero-section .hero-badge span { font-size: 11px; }
	#category-section .category-content { width: 90%; }
	#category-section .category-grid { gap: 8px; }
	#category-section .category-item { min-height: 71px; padding: 10px; border-radius: 15px; }
	#category-section .category-icon { width: 38px; height: 38px; border-radius: 12px; font-size: 18px; }
	#category-section .category-text { font-size: 12px; }
	#featured-section .featured-content { width: 90%; }
	#featured-section .featured-grid { grid-template-columns: 1fr; grid-auto-rows: 182px; }
	#featured-section .featured-item:nth-child(1) { grid-column: span 1; grid-row: span 2; }
	#featured-section .featured-item:nth-child(2) { grid-column: span 1; }
	#featured-section .featured-item:nth-child(3) { grid-column: span 1; }
	#featured-section .featured-item:nth-child(4) { grid-column: span 1; }
	#featured-section .featured-item:nth-child(5) { grid-column: span 1; }
	#popular-section .popular-content { width: 90%; }
	#popular-section .popular-grid { grid-template-columns: 1fr; }
	#popular-section .popular-media { height: 190px; }
	#challenge-section .challenge-content { width: 90%; }
	#challenge-section .challenge-media { min-height: 270px; }
	#challenge-section .challenge-sticker { width: 128px; }
	#challenge-section .challenge-sticker strong { font-size: 23px; }
	#guide-section .guide-content { width: 90%; }
	#faq-section .faq-content { width: 90%; }
	footer .footer-content { width: 90%; }
}