:root {
	--paper: #efe2bf;
	--paper-light: #f8efd7;
	--paper-deep: #d8c18d;
	--forest: #183f32;
	--forest-soft: #315f4c;
	--wine: #702f3b;
	--wine-dark: #47202a;
	--gold: #b68a3c;
	--gold-light: #d6b66e;
	--ink: #29251e;
	--ink-soft: #5f5748;
	--line: rgba(56, 48, 34, 0.28);
	--cream: #fff8e7;
	--shadow: rgba(39, 29, 17, 0.18);
	--container: 1480px;
	--content: 1180px;
	--section-space: clamp(88px, 10vw, 156px);
	--display: clamp(38px, 5vw, 64px);
	--h1: clamp(36px, 4.6vw, 60px);
	--h2: clamp(30px, 3.5vw, 46px);
	--h3: clamp(21px, 2.2vw, 29px);
	--body: clamp(16px, 1.3vw, 18px);
	--small: 14px;
	--transition: 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body { margin: 0; overflow-x: hidden; background-color: var(--paper-light); color: var(--ink); font-family: "Noto Sans TC", sans-serif; font-size: var(--body); line-height: 1.8; text-rendering: optimizeLegibility; }
body::before { position: fixed; inset: 0; z-index: -1; content: ""; pointer-events: none; opacity: 0.34; background-image: radial-gradient(rgba(75, 56, 29, 0.16) 0.7px, transparent 0.7px), radial-gradient(rgba(255, 255, 255, 0.46) 0.7px, transparent 0.7px); background-position: 0 0, 5px 6px; background-size: 11px 11px; }

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

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

button { font: inherit; }

a:focus-visible, button:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }

p { margin: 0; }

ul { margin: 0; padding: 0; list-style: none; }

figure { margin: 0; }

main { display: block; }

section { position: relative; }

::selection { background: var(--wine); color: var(--cream); }

/* header */
header.site-header { position: relative; min-height: 900px; overflow: hidden; background: var(--forest); color: var(--cream); }
header.site-header::after { position: absolute; right: 0; bottom: -1px; left: 0; z-index: 4; height: 45px; content: ""; background: var(--paper-light); clip-path: polygon( 0 76%, 8% 58%, 17% 70%, 28% 43%, 39% 63%, 51% 37%, 64% 60%, 76% 35%, 88% 57%, 100% 31%, 100% 100%, 0 100% ); }
header .top-navigation { position: relative; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: min(calc(100% - 72px), var(--container)); min-height: 96px; margin: 0 auto; border-bottom: 1px solid rgba(255, 248, 231, 0.22); transition: background-color var(--transition), min-height var(--transition), width var(--transition); }
header .top-navigation.is-scrolled { position: fixed; top: 0; right: 0; left: 0; width: 100%; min-height: 72px; padding: 0 max(32px, calc((100vw - var(--container)) / 2)); border-bottom-color: rgba(255, 248, 231, 0.18); background: rgba(24, 63, 50, 0.96); }
header .navigation-list { display: flex; align-items: center; gap: clamp(20px, 2.6vw, 42px); }
header .navigation-list-left { justify-content: flex-start; }
header .navigation-list-right { justify-content: flex-end; }
header .navigation-link { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 14px 0; color: rgba(255, 248, 231, 0.84); font-size: 14px; font-weight: 600; letter-spacing: 0.08em; }
header .navigation-link::after { position: absolute; right: 0; bottom: 7px; left: 0; height: 1px; content: ""; background: var(--gold-light); transform: scaleX(0); transform-origin: left; transition: transform var(--transition); }
header .navigation-link:hover::after { transform: scaleX(1); }
header .navigation-link span { color: var(--gold-light); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; }
header .brand-mark { display: grid; place-items: center; width: 144px; min-height: 42px; color: var(--cream); text-align: center; }
header .brand-mark strong { display: block; font-size: 21px; font-weight: 900; letter-spacing: 0.09em; line-height: 1.2; }
header .brand-mark small { display: block; margin-top: 5px; color: var(--gold-light); font-size: 10px; font-weight: 700; letter-spacing: 0.22em; line-height: 1.2; }
header .menu-toggle { display: none; width: 46px; height: 46px; padding: 0; border: 1px solid rgba(255, 248, 231, 0.35); border-radius: 0; background: transparent; color: var(--cream); cursor: pointer; }
header .menu-toggle-lines { position: relative; display: block; width: 20px; height: 14px; margin: auto; }
header .menu-toggle-lines::before, header .menu-toggle-lines::after { position: absolute; left: 0; width: 20px; height: 1px; content: ""; background: currentColor; transition: transform var(--transition), top var(--transition); }
header .menu-toggle-lines::before { top: 2px; }
header .menu-toggle-lines::after { top: 11px; }
header .menu-toggle.is-active .menu-toggle-lines::before { top: 7px; transform: rotate(45deg); }
header .menu-toggle.is-active .menu-toggle-lines::after { top: 7px; transform: rotate(-45deg); }
header .hero-stage { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(250px, 0.7fr) minmax(680px, 2.1fr); min-height: 790px; width: min(calc(100% - 72px), var(--container)); margin: 0 auto; padding: 68px 0 112px; }
header .hero-identity { position: relative; z-index: 5; display: flex; flex-direction: column; justify-content: space-between; padding: 34px 44px 30px 0; }
header .hero-kicker { display: flex; align-items: center; gap: 14px; color: var(--gold-light); font-size: 13px; font-weight: 700; letter-spacing: 0.16em; }
header .hero-kicker::before { width: 48px; height: 1px; content: ""; background: var(--gold-light); }
header .hero-title-group { margin-top: auto; padding-bottom: 44px; }
header .hero-title-group h1 { max-width: 9.4em; margin: 0; font-size: var(--h1); font-weight: 900; letter-spacing: -0.035em; line-height: 1.2; text-wrap: balance; }
header .hero-title-group h1 span { display: block; margin-top: 18px; color: var(--gold-light); font-size: clamp(16px, 1.5vw, 21px); font-weight: 600; letter-spacing: 0.04em; line-height: 1.5; }
header .hero-intro { max-width: 360px; color: rgba(255, 248, 231, 0.76); font-size: 16px; line-height: 1.85; }
header .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
header .hero-primary, header .hero-secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 10px 22px; border: 1px solid var(--gold-light); font-size: 15px; font-weight: 700; letter-spacing: 0.05em; transition: background-color var(--transition), color var(--transition), transform var(--transition); }
header .hero-primary { background: var(--gold-light); color: var(--forest); }
header .hero-secondary { color: var(--cream); }
header .hero-primary:hover, header .hero-secondary:hover { transform: translateY(-3px); }
header .hero-secondary:hover { background: var(--gold-light); color: var(--forest); }
header .hero-campaign { position: relative; min-width: 0; }
header .hero-campaign::before { position: absolute; top: 40px; right: 18px; bottom: 74px; left: 58px; z-index: -1; content: ""; border: 1px solid rgba(214, 182, 110, 0.54); }
header .hero-main-image { position: absolute; top: 0; right: 0; width: 82%; height: 64%; overflow: hidden; background: var(--wine-dark); clip-path: polygon(7% 0, 100% 0, 100% 90%, 94% 100%, 0 100%, 0 10%); }
header .hero-main-image::after { position: absolute; inset: 0; content: ""; background: linear-gradient( 110deg, rgba(24, 63, 50, 0.12), rgba(24, 63, 50, 0.48) ); pointer-events: none; }
header .hero-main-image img { height: 100%; object-fit: cover; object-position: center 58%; filter: saturate(0.72) sepia(0.12) contrast(1.05); transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1); }
header .hero-main-image:hover img { transform: scale(1.035); }
header .hero-route-note { position: absolute; top: 12%; left: 0; z-index: 4; width: 230px; padding: 22px 22px 20px; border-left: 5px solid var(--wine); background: var(--paper-light); color: var(--ink); box-shadow: 12px 14px 0 rgba(21, 43, 34, 0.3); }
header .hero-route-note strong { display: block; color: var(--wine); font-size: 13px; letter-spacing: 0.15em; }
header .hero-route-note p { margin-top: 8px; font-size: 15px; font-weight: 700; line-height: 1.55; }
header .hero-small-image { position: absolute; bottom: 2%; overflow: hidden; border: 10px solid var(--paper); background: var(--paper-deep); box-shadow: 0 18px 36px rgba(12, 30, 23, 0.28); }
header .hero-small-image img { height: 100%; object-fit: cover; filter: saturate(0.8) sepia(0.16); transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1); }
header .hero-small-image:hover img { transform: scale(1.05); }
header .hero-small-image-a { left: 7%; width: 36%; aspect-ratio: 4 / 5; transform: rotate(-3deg); }
header .hero-small-image-b { right: 9%; width: 39%; aspect-ratio: 5 / 4; transform: rotate(2deg); }
header .hero-seal { position: absolute; right: 2%; bottom: 35%; z-index: 6; display: grid; place-items: center; width: 114px; aspect-ratio: 1; border: 2px solid var(--gold-light); border-radius: 50%; background: var(--wine); color: var(--cream); text-align: center; transform: rotate(8deg); }
header .hero-seal::before { position: absolute; inset: 7px; content: ""; border: 1px dashed rgba(255, 248, 231, 0.62); border-radius: 50%; }
header .hero-seal span { position: relative; z-index: 2; max-width: 78px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; line-height: 1.45; }
header .hero-side-index { position: absolute; top: 82px; right: -2px; z-index: 5; display: flex; align-items: center; gap: 12px; color: rgba(255, 248, 231, 0.62); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; writing-mode: vertical-rl; }
header .hero-side-index::after { width: 1px; height: 82px; content: ""; background: rgba(214, 182, 110, 0.48); }

/* expedition */
#expedition-system { padding: var(--section-space) 0 120px; background: var(--paper-light); }
#expedition-system .expedition-layout { display: grid; grid-template-columns: minmax(260px, 0.75fr) minmax(0, 2.25fr); gap: clamp(56px, 7vw, 120px); width: min(calc(100% - 72px), var(--content)); margin: 0 auto; }
#expedition-system .expedition-heading { position: sticky; top: 118px; align-self: start; }
#expedition-system .expedition-heading-label { color: var(--wine); font-size: 13px; font-weight: 800; letter-spacing: 0.18em; }
#expedition-system .expedition-heading h2 { max-width: 8em; margin: 18px 0 22px; font-size: var(--h2); line-height: 1.28; }
#expedition-system .expedition-heading p { max-width: 350px; color: var(--ink-soft); line-height: 1.85; }
#expedition-system .expedition-heading-link { display: inline-flex; align-items: center; gap: 12px; margin-top: 28px; padding-bottom: 5px; border-bottom: 1px solid var(--wine); color: var(--wine); font-size: 15px; font-weight: 800; }
#expedition-system .route-list { position: relative; padding-left: 54px; }
#expedition-system .route-list::before { position: absolute; top: 12px; bottom: 12px; left: 12px; width: 2px; content: ""; background: var(--paper-deep); }
#expedition-system .route-list::after { position: absolute; top: 12px; bottom: 12px; left: 12px; width: 2px; content: ""; background: var(--forest); transform: scaleY(0); transform-origin: top; transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1); }
#expedition-system.is-visible .route-list::after { transform: scaleY(1); }
#expedition-system .route-item { position: relative; display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 34px; padding: 0 0 52px; }
#expedition-system .route-item:last-child { padding-bottom: 0; }
#expedition-system .route-item::before { position: absolute; top: 7px; left: -49px; z-index: 2; width: 14px; height: 14px; content: ""; border: 3px solid var(--paper-light); background: var(--wine); transform: rotate(45deg); }
#expedition-system .route-index { color: var(--forest); font-size: 13px; font-weight: 800; letter-spacing: 0.12em; }
#expedition-system .route-index span { display: block; margin-top: 7px; color: var(--ink-soft); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; }
#expedition-system .route-copy { padding-bottom: 34px; border-bottom: 1px solid var(--line); }
#expedition-system .route-copy h3 { margin: 0 0 12px; font-size: var(--h3); line-height: 1.4; }
#expedition-system .route-copy p { max-width: 660px; color: var(--ink-soft); }
#expedition-system .route-tags { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 18px; color: var(--wine); font-size: 13px; font-weight: 700; }
#expedition-system .route-tags li { position: relative; padding-left: 13px; }
#expedition-system .route-tags li::before { position: absolute; top: 0.82em; left: 0; width: 5px; height: 5px; content: ""; background: var(--gold); transform: rotate(45deg); }

/* hero */
#hero-roster { overflow: hidden; padding: var(--section-space) 0; background: var(--wine-dark); color: var(--cream); }
#hero-roster::before { position: absolute; top: 0; right: 0; width: 31%; height: 100%; content: ""; background: var(--wine); opacity: 0.33; clip-path: polygon(26% 0, 100% 0, 100% 100%, 0 100%); }
#hero-roster .roster-layout { position: relative; z-index: 2; display: grid; grid-template-columns: 240px minmax(320px, 0.95fr) minmax(340px, 1.05fr); gap: clamp(28px, 4vw, 64px); align-items: stretch; width: min(calc(100% - 72px), var(--content)); margin: 0 auto; }
#hero-roster .roster-index { display: flex; flex-direction: column; }
#hero-roster .roster-index-label { color: var(--gold-light); font-size: 13px; font-weight: 800; letter-spacing: 0.18em; }
#hero-roster .roster-index h2 { margin: 20px 0 38px; font-size: var(--h2); line-height: 1.25; }
#hero-roster .hero-tab-list { border-top: 1px solid rgba(255, 248, 231, 0.2); }
#hero-roster .hero-tab { position: relative; display: grid; grid-template-columns: 33px 1fr; gap: 12px; width: 100%; padding: 17px 2px; border: 0; border-bottom: 1px solid rgba(255, 248, 231, 0.2); background: transparent; color: rgba(255, 248, 231, 0.58); text-align: left; cursor: pointer; transition: color var(--transition), padding-left var(--transition), background-color var(--transition); }
#hero-roster .hero-tab:hover, #hero-roster .hero-tab.is-active { padding-left: 12px; background: rgba(255, 248, 231, 0.06); color: var(--cream); }
#hero-roster .hero-tab-number { color: var(--gold-light); font-size: 12px; font-weight: 700; }
#hero-roster .hero-tab-name { font-size: 16px; font-weight: 800; }
#hero-roster .hero-tab-name span { display: block; margin-top: 2px; font-size: 11px; font-weight: 500; letter-spacing: 0.11em; }
#hero-roster .roster-portrait { position: relative; align-self: stretch; min-height: 620px; overflow: hidden; background: var(--forest); clip-path: polygon(7% 0, 100% 0, 100% 92%, 92% 100%, 0 100%, 0 8%); }
#hero-roster .roster-portrait img { height: 100%; object-fit: cover; object-position: center top; filter: saturate(0.56) sepia(0.2) contrast(1.08); transition: opacity 260ms ease, transform 700ms cubic-bezier(0.22, 1, 0.36, 1); }
#hero-roster .roster-portrait.is-changing img { opacity: 0; transform: scale(1.025); }
#hero-roster .roster-portrait::after { position: absolute; inset: 0; content: ""; background: linear-gradient(0deg, rgba(71, 32, 42, 0.84), transparent 54%); }
#hero-roster .roster-portrait-caption { position: absolute; right: 28px; bottom: 26px; left: 28px; z-index: 3; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
#hero-roster .roster-portrait-caption strong { font-size: 22px; font-weight: 900; }
#hero-roster .roster-portrait-caption span { color: var(--gold-light); font-size: 12px; font-weight: 700; letter-spacing: 0.13em; }
#hero-roster .roster-detail { display: flex; flex-direction: column; justify-content: center; padding: 24px 0 24px 12px; }
#hero-roster .roster-role { color: var(--gold-light); font-size: 13px; font-weight: 800; letter-spacing: 0.16em; }
#hero-roster .roster-detail h3 { margin: 16px 0 18px; font-size: clamp(29px, 3vw, 42px); line-height: 1.28; }
#hero-roster .roster-description { max-width: 480px; color: rgba(255, 248, 231, 0.72); line-height: 1.85; }
#hero-roster .roster-traits { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 38px; padding-top: 28px; border-top: 1px solid rgba(255, 248, 231, 0.2); }
#hero-roster .roster-traits dt { color: var(--gold-light); font-size: 12px; font-weight: 800; letter-spacing: 0.12em; }
#hero-roster .roster-traits dd { margin: 6px 0 0; color: var(--cream); font-size: 16px; font-weight: 700; }
#hero-roster .roster-signature { margin-top: 36px; padding: 24px 26px; border-left: 4px solid var(--gold); background: rgba(255, 248, 231, 0.06); }
#hero-roster .roster-signature small { display: block; color: var(--gold-light); font-size: 12px; font-weight: 800; letter-spacing: 0.14em; }
#hero-roster .roster-signature strong { display: block; margin-top: 8px; font-size: 19px; line-height: 1.55; }

/* card */
#card-archive { padding: var(--section-space) 0; background: var(--paper); }
#card-archive .archive-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 0.7fr); gap: 72px; align-items: end; width: min(calc(100% - 72px), var(--content)); margin: 0 auto 64px; }
#card-archive .archive-heading-label { color: var(--wine); font-size: 13px; font-weight: 800; letter-spacing: 0.18em; }
#card-archive .archive-heading h2 { max-width: 12em; margin: 16px 0 0; font-size: var(--h2); line-height: 1.3; }
#card-archive .archive-heading p { max-width: 490px; color: var(--ink-soft); }
#card-archive .card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2vw, 30px); width: min(calc(100% - 72px), var(--container)); margin: 0 auto; }
#card-archive .skill-card { position: relative; min-width: 0; padding: 12px; background: var(--cream); box-shadow: 0 18px 40px var(--shadow); transition: transform var(--transition); }
#card-archive .skill-card:nth-child(2) { margin-top: 44px; }
#card-archive .skill-card:nth-child(3) { margin-top: -20px; }
#card-archive .skill-card:nth-child(4) { margin-top: 28px; }
#card-archive .skill-card:hover { transform: translateY(-8px) rotate(-0.4deg); }
#card-archive .skill-card-frame { height: 100%; border: 1px solid rgba(79, 64, 40, 0.42); background: var(--paper-light); }
#card-archive .skill-card-image { position: relative; margin: 8px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--forest); clip-path: polygon( 5% 0, 95% 0, 100% 8%, 100% 92%, 95% 100%, 5% 100%, 0 92%, 0 8% ); }
#card-archive .skill-card-image img { height: 100%; object-fit: cover; filter: saturate(0.72) sepia(0.2); transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1), filter 700ms ease; }
#card-archive .skill-card:hover .skill-card-image img { filter: saturate(0.95) sepia(0.08); transform: scale(1.045); }
#card-archive .skill-card-cost { position: absolute; top: 17px; left: 17px; z-index: 2; display: grid; place-items: center; width: 38px; height: 38px; border: 2px solid var(--cream); background: var(--forest); color: var(--cream); font-size: 15px; font-weight: 900; transform: rotate(45deg); }
#card-archive .skill-card-cost span { transform: rotate(-45deg); }
#card-archive .skill-card-copy { padding: 18px 22px 23px; text-align: left; }
#card-archive .skill-card-type { color: var(--wine); font-size: 11px; font-weight: 800; letter-spacing: 0.14em; }
#card-archive .skill-card-copy h3 { margin: 8px 0 10px; font-size: 23px; line-height: 1.35; }
#card-archive .skill-card-copy p { color: var(--ink-soft); font-size: 15px; line-height: 1.72; }
#card-archive .skill-card-keyword { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 20px; padding-top: 13px; border-top: 1px solid var(--line); color: var(--forest); font-size: 12px; font-weight: 800; }
#card-archive .archive-footnote { display: flex; align-items: center; justify-content: space-between; gap: 32px; width: min(calc(100% - 72px), var(--content)); margin: 55px auto 0; padding-top: 24px; border-top: 1px solid var(--line); }
#card-archive .archive-footnote p { max-width: 680px; color: var(--ink-soft); font-size: 15px; }
#card-archive .archive-link { flex: 0 0 auto; color: var(--wine); font-size: 15px; font-weight: 800; }

/* team */
#team-synergy { padding: var(--section-space) 0; background: var(--forest); color: var(--cream); }
#team-synergy .synergy-layout { width: min(calc(100% - 72px), var(--content)); margin: 0 auto; }
#team-synergy .synergy-heading { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 90px; align-items: end; margin-bottom: 68px; }
#team-synergy .synergy-heading-label { color: var(--gold-light); font-size: 13px; font-weight: 800; letter-spacing: 0.18em; }
#team-synergy .synergy-heading h2 { margin: 18px 0 0; font-size: var(--h2); line-height: 1.28; }
#team-synergy .synergy-heading p { max-width: 630px; color: rgba(255, 248, 231, 0.7); }
#team-synergy .synergy-board { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); min-height: 340px; border-top: 1px solid rgba(214, 182, 110, 0.5); border-bottom: 1px solid rgba(214, 182, 110, 0.5); }
#team-synergy .synergy-board::before { position: absolute; top: 50%; right: 8%; left: 8%; height: 2px; content: ""; background: rgba(214, 182, 110, 0.3); }
#team-synergy .synergy-node { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 40px clamp(18px, 2vw, 32px); border-left: 1px solid rgba(214, 182, 110, 0.26); }
#team-synergy .synergy-node:last-child { border-right: 1px solid rgba(214, 182, 110, 0.26); }
#team-synergy .synergy-node-mark { display: grid; place-items: center; width: 62px; height: 62px; margin-bottom: 26px; border: 1px solid var(--gold-light); background: var(--forest); color: var(--gold-light); font-size: 18px; font-weight: 900; transform: rotate(45deg); transition: background-color var(--transition), color var(--transition), transform var(--transition); }
#team-synergy .synergy-node-mark span { transform: rotate(-45deg); }
#team-synergy .synergy-node:hover .synergy-node-mark { background: var(--gold-light); color: var(--forest); transform: rotate(45deg) scale(1.08); }
#team-synergy .synergy-node small { color: var(--gold-light); font-size: 12px; font-weight: 800; letter-spacing: 0.13em; }
#team-synergy .synergy-node h3 { margin: 11px 0 10px; font-size: 23px; line-height: 1.35; }
#team-synergy .synergy-node p { color: rgba(255, 248, 231, 0.68); font-size: 15px; line-height: 1.75; }
#team-synergy .synergy-result { display: grid; grid-template-columns: 190px 1fr auto; gap: 34px; align-items: center; margin-top: 42px; padding: 28px 0 0; }
#team-synergy .synergy-result-label { color: var(--gold-light); font-size: 13px; font-weight: 800; letter-spacing: 0.16em; }
#team-synergy .synergy-result strong { font-size: clamp(21px, 2vw, 28px); line-height: 1.5; }
#team-synergy .synergy-result a { padding-bottom: 4px; border-bottom: 1px solid var(--gold-light); color: var(--gold-light); font-size: 14px; font-weight: 800; }

/* dungeon */
#dungeon-events { padding: var(--section-space) 0 0; background: var(--paper-light); }
#dungeon-events .events-heading { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 80px; align-items: end; width: min(calc(100% - 72px), var(--content)); margin: 0 auto 54px; }
#dungeon-events .events-heading-label { color: var(--wine); font-size: 13px; font-weight: 800; letter-spacing: 0.18em; }
#dungeon-events .events-heading h2 { margin: 16px 0 0; font-size: var(--h2); line-height: 1.3; }
#dungeon-events .events-heading p { max-width: 620px; color: var(--ink-soft); }
#dungeon-events .events-stage { position: relative; min-height: 670px; overflow: hidden; background: var(--forest); }
#dungeon-events .events-stage-image { position: absolute; inset: 0; }
#dungeon-events .events-stage-image img { height: 100%; object-fit: cover; object-position: center; filter: saturate(0.65) sepia(0.12) brightness(0.73); transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1); }
#dungeon-events.is-visible .events-stage-image img { transform: scale(1.025); }
#dungeon-events .events-stage::after { position: absolute; inset: 0; content: ""; background: linear-gradient( 90deg, rgba(18, 40, 31, 0.9) 0%, rgba(18, 40, 31, 0.6) 50%, rgba(18, 40, 31, 0.18) 100% ); }
#dungeon-events .event-list { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(calc(100% - 72px), var(--content)); min-height: 670px; margin: 0 auto; }
#dungeon-events .event-item { display: flex; flex-direction: column; justify-content: flex-end; padding: 50px 36px 56px; border-left: 1px solid rgba(255, 248, 231, 0.25); color: var(--cream); transition: background-color var(--transition), padding-bottom var(--transition); }
#dungeon-events .event-item:last-child { border-right: 1px solid rgba(255, 248, 231, 0.25); }
#dungeon-events .event-item:hover { padding-bottom: 72px; background: rgba(112, 47, 59, 0.62); }
#dungeon-events .event-number { color: var(--gold-light); font-size: 12px; font-weight: 800; letter-spacing: 0.14em; }
#dungeon-events .event-item h3 { margin: 13px 0 12px; font-size: 25px; line-height: 1.35; }
#dungeon-events .event-item p { max-width: 330px; color: rgba(255, 248, 231, 0.72); font-size: 15px; line-height: 1.78; }
#dungeon-events .event-choice { display: inline-flex; align-self: flex-start; margin-top: 24px; padding-bottom: 5px; border-bottom: 1px solid var(--gold-light); color: var(--gold-light); font-size: 13px; font-weight: 800; }

/* boss */
#boss-archive { overflow: hidden; padding: var(--section-space) 0; background: var(--wine-dark); color: var(--cream); }
#boss-archive .boss-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(330px, 0.65fr); gap: clamp(48px, 7vw, 110px); width: min(calc(100% - 72px), var(--content)); margin: 0 auto; }
#boss-archive .boss-visual { position: relative; min-height: 680px; }
#boss-archive .boss-primary-image { position: absolute; top: 0; right: 10%; bottom: 0; left: 0; overflow: hidden; background: var(--forest); clip-path: polygon(0 0, 93% 0, 100% 8%, 100% 100%, 8% 100%, 0 92%); }
#boss-archive .boss-primary-image img { height: 100%; object-fit: cover; object-position: center; filter: saturate(0.46) sepia(0.2) contrast(1.12) brightness(0.72); transition: filter 800ms ease, transform 900ms cubic-bezier(0.22, 1, 0.36, 1); }
#boss-archive .boss-primary-image:hover img { filter: saturate(0.72) sepia(0.1) contrast(1.08) brightness(0.78); transform: scale(1.025); }
#boss-archive .boss-secondary-image { position: absolute; right: 0; bottom: 42px; width: 35%; aspect-ratio: 4 / 5; overflow: hidden; border: 10px solid var(--paper); background: var(--paper); transform: rotate(2deg); }
#boss-archive .boss-secondary-image img { height: 100%; object-fit: cover; filter: saturate(0.58) sepia(0.18); }
#boss-archive .boss-warning { position: absolute; top: 28px; left: -22px; z-index: 4; padding: 13px 20px; background: var(--gold-light); color: var(--wine-dark); font-size: 12px; font-weight: 900; letter-spacing: 0.15em; }
#boss-archive .boss-detail { display: flex; flex-direction: column; justify-content: center; }
#boss-archive .boss-label { color: var(--gold-light); font-size: 13px; font-weight: 800; letter-spacing: 0.18em; }
#boss-archive .boss-detail h2 { margin: 18px 0 22px; font-size: var(--h2); line-height: 1.26; }
#boss-archive .boss-description { color: rgba(255, 248, 231, 0.72); }
#boss-archive .boss-pattern-list { margin-top: 38px; border-top: 1px solid rgba(255, 248, 231, 0.22); }
#boss-archive .boss-pattern-item { display: grid; grid-template-columns: 82px 1fr; gap: 24px; padding: 22px 0; border-bottom: 1px solid rgba(255, 248, 231, 0.22); }
#boss-archive .boss-pattern-item span { color: var(--gold-light); font-size: 12px; font-weight: 800; letter-spacing: 0.12em; }
#boss-archive .boss-pattern-item strong { font-size: 16px; line-height: 1.65; }
#boss-archive .boss-link { align-self: flex-start; margin-top: 30px; padding-bottom: 5px; border-bottom: 1px solid var(--gold-light); color: var(--gold-light); font-size: 15px; font-weight: 800; }

/* build */
#build-guides { padding: var(--section-space) 0; background: var(--paper-light); }
#build-guides .guides-layout { width: min(calc(100% - 72px), var(--content)); margin: 0 auto; }
#build-guides .guides-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(310px, 0.7fr); gap: 70px; align-items: end; margin-bottom: 46px; }
#build-guides .guides-heading-label { color: var(--wine); font-size: 13px; font-weight: 800; letter-spacing: 0.18em; }
#build-guides .guides-heading h2 { margin: 16px 0 0; font-size: var(--h2); line-height: 1.3; }
#build-guides .guides-heading p { color: var(--ink-soft); }
#build-guides .guide-list { border-top: 2px solid var(--ink); }
#build-guides .guide-item { display: grid; grid-template-columns: 160px minmax(260px, 0.9fr) minmax(320px, 1.1fr) auto; gap: 32px; align-items: center; padding: 34px 0; border-bottom: 1px solid var(--line); transition: padding-left var(--transition), background-color var(--transition); }
#build-guides .guide-item:hover { padding-left: 20px; background: rgba(216, 193, 141, 0.2); }
#build-guides .guide-category { color: var(--wine); font-size: 12px; font-weight: 800; letter-spacing: 0.14em; }
#build-guides .guide-item h3 { margin: 0; font-size: 23px; line-height: 1.4; }
#build-guides .guide-item p { color: var(--ink-soft); font-size: 15px; line-height: 1.75; }
#build-guides .guide-link { min-width: 94px; color: var(--forest); font-size: 14px; font-weight: 800; text-align: right; }
#build-guides .guide-link::after { display: inline-block; margin-left: 9px; content: "→"; transition: transform var(--transition); }
#build-guides .guide-item:hover .guide-link::after { transform: translateX(6px); }

/* latest */
#latest-notes { padding: 0 0 var(--section-space); background: var(--paper-light); }
#latest-notes .notes-layout { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(340px, 0.88fr); width: min(calc(100% - 72px), var(--content)); margin: 0 auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
#latest-notes .update-panel, #latest-notes .creator-panel { padding: clamp(42px, 5vw, 70px); }
#latest-notes .update-panel { border-right: 1px solid var(--line); }
#latest-notes .notes-label { color: var(--wine); font-size: 13px; font-weight: 800; letter-spacing: 0.18em; }
#latest-notes h2 { margin: 16px 0 28px; font-size: clamp(27px, 3vw, 39px); line-height: 1.32; }
#latest-notes .update-list { border-top: 1px solid var(--line); }
#latest-notes .update-item { display: grid; grid-template-columns: 110px 1fr; gap: 26px; padding: 22px 0; border-bottom: 1px solid var(--line); }
#latest-notes .update-item span { color: var(--forest); font-size: 12px; font-weight: 800; letter-spacing: 0.12em; }
#latest-notes .update-item strong { font-size: 16px; line-height: 1.62; }
#latest-notes .update-link { display: inline-flex; margin-top: 26px; padding-bottom: 4px; border-bottom: 1px solid var(--wine); color: var(--wine); font-size: 14px; font-weight: 800; }
#latest-notes .creator-panel { position: relative; overflow: hidden; background: var(--paper); }
#latest-notes .creator-image { position: relative; overflow: hidden; aspect-ratio: 16 / 9; margin-bottom: 30px; background: var(--forest); }
#latest-notes .creator-image img { height: 100%; object-fit: cover; filter: saturate(0.58) sepia(0.18); transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1), filter 800ms ease; }
#latest-notes .creator-image:hover img { filter: saturate(0.85) sepia(0.06); transform: scale(1.035); }
#latest-notes .creator-panel p { color: var(--ink-soft); }
#latest-notes .creator-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 26px; }
#latest-notes .creator-actions a { display: inline-flex; min-height: 46px; align-items: center; padding: 8px 17px; border: 1px solid var(--forest); color: var(--forest); font-size: 14px; font-weight: 800; transition: background-color var(--transition), color var(--transition); }
#latest-notes .creator-actions a:hover { background: var(--forest); color: var(--cream); }

/* expedition */
#expedition-call { padding: clamp(90px, 12vw, 168px) 0; overflow: hidden; background: var(--gold-light); color: var(--wine-dark); }
#expedition-call::before { position: absolute; top: -32%; right: -8%; width: 48vw; aspect-ratio: 1; content: ""; border: 1px solid rgba(71, 32, 42, 0.25); border-radius: 50%; }
#expedition-call::after { position: absolute; bottom: -38%; left: -12%; width: 44vw; aspect-ratio: 1; content: ""; border: 1px solid rgba(71, 32, 42, 0.2); border-radius: 50%; }
#expedition-call .call-layout { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr); gap: 80px; align-items: end; width: min(calc(100% - 72px), var(--content)); margin: 0 auto; }
#expedition-call .call-label { font-size: 13px; font-weight: 900; letter-spacing: 0.18em; }
#expedition-call h2 { max-width: 12em; margin: 20px 0 0; font-size: clamp(36px, 4.8vw, 61px); line-height: 1.22; letter-spacing: -0.035em; }
#expedition-call .call-copy p { max-width: 510px; font-weight: 600; }
#expedition-call .call-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
#expedition-call .call-actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 9px 20px; border: 1px solid var(--wine-dark); font-size: 14px; font-weight: 800; transition: background-color var(--transition), color var(--transition), transform var(--transition); }
#expedition-call .call-actions a:first-child { background: var(--wine-dark); color: var(--cream); }
#expedition-call .call-actions a:hover { transform: translateY(-3px); }
#expedition-call .call-actions a:not(:first-child):hover { background: var(--wine-dark); color: var(--cream); }

/* footer */
footer.site-footer { background: var(--forest); color: var(--cream); }
footer .footer-main { display: grid; grid-template-columns: minmax(300px, 1.2fr) minmax(400px, 0.8fr); gap: 90px; width: min(calc(100% - 72px), var(--content)); margin: 0 auto; padding: 86px 0 64px; }
footer .footer-brand strong { display: block; font-size: clamp(30px, 5vw, 48px); font-weight: 900; letter-spacing: -0.04em; line-height: 1.08; }
footer .footer-brand strong span { display: block; margin-top: 13px; color: var(--gold-light); font-size: clamp(15px, 1.7vw, 21px); letter-spacing: 0.13em; }
footer .footer-brand p { max-width: 490px; margin-top: 28px; color: rgba(255, 248, 231, 0.67); }
footer .footer-navigation { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 54px; padding-top: 8px; }
footer .footer-group-label { display: block; margin-bottom: 15px; color: var(--gold-light); font-size: 12px; font-weight: 800; letter-spacing: 0.15em; }
footer .footer-link-list { border-top: 1px solid rgba(255, 248, 231, 0.22); }
footer .footer-link-list li { border-bottom: 1px solid rgba(255, 248, 231, 0.22); }
footer .footer-link-list a { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 13px 0; color: rgba(255, 248, 231, 0.76); font-size: 14px; font-weight: 600; transition: color var(--transition), padding-left var(--transition); }
footer .footer-link-list a::after { content: "↗"; color: var(--gold-light); }
footer .footer-link-list a:hover { padding-left: 8px; color: var(--cream); }
footer .footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 30px; width: min(calc(100% - 72px), var(--content)); margin: 0 auto; padding: 24px 0 32px; border-top: 1px solid rgba(255, 248, 231, 0.2); color: rgba(255, 248, 231, 0.5); font-size: 12px; }
footer .footer-bottom-links { display: flex; flex-wrap: wrap; gap: 22px; }
footer .footer-bottom a { transition: color var(--transition); }
footer .footer-bottom a:hover { color: var(--gold-light); }

.reveal-target { opacity: 0; transform: translateY(18px); transition: opacity 700ms ease, transform 700ms cubic-bezier(0.22, 1, 0.36, 1); }
.reveal-target.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1280px) {
	:root { --container: 1180px; --content: 1060px; }
	header .hero-stage { grid-template-columns: minmax(240px, 0.78fr) minmax(580px, 1.85fr); }
	header .hero-main-image { width: 86%; height: 61%; }
	header .hero-small-image-a { width: 38%; }
	header .hero-small-image-b { width: 41%; }
	#card-archive .card-grid { grid-template-columns: repeat(4, minmax(240px, 1fr)); overflow-x: auto; padding-bottom: 26px; scroll-snap-type: x mandatory; }
	#card-archive .skill-card { scroll-snap-align: start; }
	#card-archive .skill-card:nth-child(2), #card-archive .skill-card:nth-child(3), #card-archive .skill-card:nth-child(4) { margin-top: 0; }
	#hero-roster .roster-layout { grid-template-columns: 210px minmax(300px, 0.9fr) minmax(320px, 1.1fr); }
	#hero-roster .roster-portrait { min-height: 590px; }
}
@media (max-width: 960px) {
	header.site-header { min-height: 850px; }
	header .top-navigation { grid-template-columns: auto 1fr auto; width: min(calc(100% - 48px), var(--container)); }
	header .navigation-list { gap: 18px; }
	header .navigation-list-left .navigation-link:nth-child(3), header .navigation-list-right .navigation-link:nth-child(3) { display: none; }
	header .brand-mark { width: auto; padding: 0 26px; }
	header .hero-stage { grid-template-columns: minmax(230px, 0.72fr) minmax(480px, 1.4fr); width: min(calc(100% - 48px), var(--container)); min-height: 745px; padding-top: 52px; }
	header .hero-identity { padding-right: 24px; }
	header .hero-main-image { width: 88%; }
	header .hero-route-note { width: 205px; }
	header .hero-seal { right: -1%; width: 100px; }
	#expedition-system .expedition-layout { grid-template-columns: 1fr; gap: 55px; width: min(calc(100% - 48px), var(--content)); }
	#expedition-system .expedition-heading { position: static; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 60px; align-items: end; }
	#expedition-system .expedition-heading h2 { max-width: 10em; }
	#expedition-system .expedition-heading-link { grid-column: 2; justify-self: start; margin-top: 0; }
	#hero-roster .roster-layout { grid-template-columns: 190px minmax(300px, 0.95fr) minmax(270px, 1.05fr); width: min(calc(100% - 48px), var(--content)); gap: 28px; }
	#hero-roster .roster-portrait { min-height: 560px; }
	#hero-roster .roster-traits { grid-template-columns: 1fr; gap: 15px; }
	#card-archive .archive-heading, #team-synergy .synergy-heading, #dungeon-events .events-heading, #build-guides .guides-heading { width: min(calc(100% - 48px), var(--content)); }
	#card-archive .card-grid { width: min(calc(100% - 48px), var(--container)); }
	#team-synergy .synergy-layout, #dungeon-events .event-list, #boss-archive .boss-layout, #build-guides .guides-layout, #latest-notes .notes-layout, #expedition-call .call-layout, footer .footer-main, footer .footer-bottom { width: min(calc(100% - 48px), var(--content)); }
	#team-synergy .synergy-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	#team-synergy .synergy-board::before { display: none; }
	#team-synergy .synergy-node { border-bottom: 1px solid rgba(214, 182, 110, 0.26); }
	#team-synergy .synergy-node:nth-child(2) { border-right: 1px solid rgba(214, 182, 110, 0.26); }
	#dungeon-events .event-item { padding-right: 24px; padding-left: 24px; }
	#boss-archive .boss-layout { grid-template-columns: minmax(0, 1fr) minmax(300px, 0.72fr); gap: 48px; }
	#boss-archive .boss-visual { min-height: 610px; }
	#build-guides .guide-item { grid-template-columns: 120px minmax(230px, 0.8fr) minmax(280px, 1.2fr); }
	#build-guides .guide-link { grid-column: 2 / 4; text-align: left; }
	#latest-notes .update-panel, #latest-notes .creator-panel { padding: 48px 38px; }
	#expedition-call .call-layout { gap: 48px; }
	footer .footer-main { gap: 56px; }
}
@media (max-width: 768px) {
	:root { --section-space: 92px; }
	header.site-header { min-height: auto; }
	header .top-navigation { grid-template-columns: 1fr auto; min-height: 76px; width: calc(100% - 36px); }
	header .top-navigation.is-scrolled { width: 100%; min-height: 68px; padding: 0 18px; }
	header .brand-mark { grid-column: 1; grid-row: 1; justify-self: start; padding: 0; text-align: left; }
	header .brand-mark strong { font-size: 18px; }
	header .brand-mark small { font-size: 9px; }
	header .menu-toggle { display: block; grid-column: 2; grid-row: 1; }
	header .navigation-list { position: fixed; right: 18px; left: 18px; z-index: 30; display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 12px 18px; border: 1px solid rgba(255, 248, 231, 0.2); background: rgba(24, 63, 50, 0.98); opacity: 0; pointer-events: none; transform: translateY(-12px); transition: opacity var(--transition), transform var(--transition); }
	header .navigation-list-left { top: 78px; }
	header .navigation-list-right { top: 190px; }
	header .navigation-list.is-active { opacity: 1; pointer-events: auto; transform: translateY(0); }
	header .navigation-list-left .navigation-link:nth-child(3), header .navigation-list-right .navigation-link:nth-child(3) { display: inline-flex; }
	header .navigation-link { justify-content: space-between; min-height: 50px; padding: 10px 8px; border-bottom: 1px solid rgba(255, 248, 231, 0.16); }
	header .navigation-link::after { display: none; }
	header .hero-stage { display: flex; flex-direction: column; width: calc(100% - 36px); min-height: 850px; padding: 46px 0 96px; }
	header .hero-identity { order: 1; padding: 0; }
	header .hero-title-group { margin-top: 52px; padding-bottom: 0; }
	header .hero-title-group h1 { max-width: 11em; }
	header .hero-intro { max-width: 600px; margin-top: 24px; }
	header .hero-campaign { order: 2; min-height: 390px; margin-top: 48px; }
	header .hero-campaign::before { top: 28px; right: 0; bottom: 44px; left: 24px; }
	header .hero-main-image { top: 0; right: 0; width: 83%; height: 66%; }
	header .hero-route-note { top: 28px; left: 0; width: 185px; padding: 17px; }
	header .hero-small-image-a { bottom: 0; left: 7%; width: 30%; }
	header .hero-small-image-b { right: 8%; bottom: 0; width: 40%; }
	header .hero-seal { right: 1%; bottom: 28%; width: 86px; }
	header .hero-seal span { max-width: 64px; font-size: 10px; }
	header .hero-side-index { display: none; }
	#expedition-system { padding-bottom: 90px; }
	#expedition-system .expedition-layout { width: calc(100% - 36px); }
	#expedition-system .expedition-heading { display: block; }
	#expedition-system .expedition-heading-link { margin-top: 24px; }
	#expedition-system .route-list { padding-left: 39px; }
	#expedition-system .route-list::before, #expedition-system .route-list::after { left: 8px; }
	#expedition-system .route-item { grid-template-columns: 1fr; gap: 10px; padding-bottom: 44px; }
	#expedition-system .route-item::before { left: -37px; }
	#expedition-system .route-index span { display: inline; margin: 0 0 0 8px; }
	#hero-roster .roster-layout { grid-template-columns: 1fr; width: calc(100% - 36px); }
	#hero-roster .roster-index { display: grid; grid-template-columns: 1fr; }
	#hero-roster .roster-index h2 { margin-bottom: 24px; }
	#hero-roster .hero-tab-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow-x: auto; }
	#hero-roster .hero-tab { grid-template-columns: 1fr; min-width: 130px; padding: 14px 12px; }
	#hero-roster .hero-tab:hover, #hero-roster .hero-tab.is-active { padding-left: 16px; }
	#hero-roster .roster-portrait { min-height: 520px; }
	#hero-roster .roster-detail { padding: 22px 0 0; }
	#hero-roster .roster-traits { grid-template-columns: 1fr 1fr; }
	#card-archive .archive-heading { grid-template-columns: 1fr; width: calc(100% - 36px); gap: 24px; margin-bottom: 42px; }
	#card-archive .card-grid { width: calc(100% - 36px); }
	#card-archive .archive-footnote { align-items: flex-start; width: calc(100% - 36px); }
	#team-synergy .synergy-layout { width: calc(100% - 36px); }
	#team-synergy .synergy-heading { grid-template-columns: 1fr; gap: 24px; }
	#team-synergy .synergy-board { grid-template-columns: 1fr 1fr; }
	#team-synergy .synergy-node { min-height: 260px; }
	#team-synergy .synergy-result { grid-template-columns: 1fr; gap: 14px; }
	#dungeon-events .events-heading { grid-template-columns: 1fr; width: calc(100% - 36px); gap: 24px; }
	#dungeon-events .events-stage { min-height: 760px; }
	#dungeon-events .events-stage::after { background: linear-gradient( 0deg, rgba(18, 40, 31, 0.9), rgba(18, 40, 31, 0.28) ); }
	#dungeon-events .event-list { grid-template-columns: 1fr; width: calc(100% - 36px); min-height: 760px; padding: 80px 0 28px; }
	#dungeon-events .event-item { justify-content: flex-end; min-height: 220px; padding: 28px 24px; border-top: 1px solid rgba(255, 248, 231, 0.25); border-right: 1px solid rgba(255, 248, 231, 0.25); }
	#dungeon-events .event-item:hover { padding-bottom: 36px; }
	#boss-archive .boss-layout { grid-template-columns: 1fr; width: calc(100% - 36px); }
	#boss-archive .boss-visual { min-height: 560px; }
	#boss-archive .boss-primary-image { right: 7%; }
	#boss-archive .boss-detail { padding-top: 0; }
	#build-guides .guides-layout { width: calc(100% - 36px); }
	#build-guides .guides-heading { grid-template-columns: 1fr; gap: 24px; }
	#build-guides .guide-item { grid-template-columns: 100px 1fr; gap: 18px 24px; }
	#build-guides .guide-item p, #build-guides .guide-link { grid-column: 2; }
	#latest-notes .notes-layout { grid-template-columns: 1fr; width: calc(100% - 36px); }
	#latest-notes .update-panel { border-right: 0; border-bottom: 1px solid var(--line); }
	#expedition-call .call-layout { grid-template-columns: 1fr; width: calc(100% - 36px); gap: 30px; }
	footer .footer-main { grid-template-columns: 1fr; width: calc(100% - 36px); gap: 48px; }
	footer .footer-bottom { align-items: flex-start; flex-direction: column; width: calc(100% - 36px); }
}
@media (max-width: 500px) {
	:root { --h1: clamp(32px, 10vw, 38px); --h2: clamp(28px, 8.5vw, 35px); --h3: 22px; --body: 16px; --section-space: 76px; }
	body { line-height: 1.78; }
	header .navigation-list { grid-template-columns: 1fr; }
	header .navigation-list-right { top: 250px; }
	header .hero-stage { min-height: 790px; padding-top: 34px; }
	header .hero-kicker { font-size: 11px; }
	header .hero-kicker::before { width: 30px; }
	header .hero-title-group { margin-top: 42px; }
	header .hero-title-group h1 span { margin-top: 13px; font-size: 15px; }
	header .hero-actions { display: grid; grid-template-columns: 1fr; }
	header .hero-primary, header .hero-secondary { width: 100%; }
	header .hero-campaign { min-height: 335px; margin-top: 38px; }
	header .hero-main-image { width: 87%; height: 60%; }
	header .hero-route-note { top: 18px; width: 152px; padding: 14px; }
	header .hero-route-note strong { font-size: 10px; }
	header .hero-route-note p { font-size: 13px; }
	header .hero-small-image-a { width: 34%; border-width: 6px; }
	header .hero-small-image-b { width: 46%; border-width: 6px; }
	header .hero-seal { bottom: 31%; width: 72px; }
	header .hero-seal span { font-size: 9px; }
	#expedition-system .route-copy { padding-bottom: 25px; }
	#hero-roster .hero-tab-list { grid-template-columns: repeat(4, 128px); }
	#hero-roster .roster-portrait { min-height: 410px; }
	#hero-roster .roster-portrait-caption { right: 18px; bottom: 18px; left: 18px; }
	#hero-roster .roster-portrait-caption strong { font-size: 19px; }
	#hero-roster .roster-traits { grid-template-columns: 1fr; }
	#hero-roster .roster-signature { padding: 20px; }
	#card-archive .card-grid { grid-template-columns: repeat(4, 82vw); gap: 14px; }
	#card-archive .archive-footnote { flex-direction: column; gap: 18px; }
	#team-synergy .synergy-board { grid-template-columns: 1fr; }
	#team-synergy .synergy-node { min-height: auto; padding: 38px 24px; border-right: 1px solid rgba(214, 182, 110, 0.26); }
	#dungeon-events .event-list { padding-top: 54px; }
	#dungeon-events .event-item { min-height: 235px; }
	#boss-archive .boss-visual { min-height: 440px; }
	#boss-archive .boss-secondary-image { width: 42%; border-width: 6px; }
	#boss-archive .boss-warning { left: 0; }
	#boss-archive .boss-pattern-item { grid-template-columns: 1fr; gap: 7px; }
	#build-guides .guide-item { grid-template-columns: 1fr; padding: 27px 0; }
	#build-guides .guide-item p, #build-guides .guide-link { grid-column: 1; }
	#build-guides .guide-item:hover { padding-left: 10px; }
	#latest-notes .update-panel, #latest-notes .creator-panel { padding: 38px 22px; }
	#latest-notes .update-item { grid-template-columns: 1fr; gap: 4px; }
	#latest-notes .creator-actions { display: grid; grid-template-columns: 1fr; }
	#latest-notes .creator-actions a { justify-content: center; }
	#expedition-call h2 { font-size: 35px; }
	#expedition-call .call-actions { display: grid; grid-template-columns: 1fr; }
	#expedition-call .call-actions a { width: 100%; }
	footer .footer-main { padding-top: 70px; }
	footer .footer-navigation { grid-template-columns: 1fr; gap: 34px; }
	footer .footer-bottom-links { gap: 12px 18px; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 0.01ms; animation-iteration-count: 1; transition-duration: 0.01ms; }
	.reveal-target { opacity: 1; transform: none; }
}