/* Reset & base */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:100%;-webkit-text-size-adjust:100%}
body{font-family:'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-weight:400;font-size:1rem;line-height:1.6;color:#333;background:#fff;min-height:100vh;display:flex;flex-direction:column}
img{max-width:100%;height:auto;display:block}
a{color:var(--color-accent);text-decoration:none;transition:color 0.2s}
a:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
ul{list-style:none}
button{cursor:pointer;border:none;background:transparent;font:inherit}

/* CSS Variables */
:root{
  --color-primary:#0F1B2D;
  --color-accent:#FF7A00;
  --color-secondary-teal:#1A4A5A;
  --color-accent-wine:#8B2252;
  --color-white:#fff;
  --color-light-gray:#F4F4F4;
  --color-dark-gray:#333;
  --color-text-on-dark:#E0E0E0;
  --font-heading:'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-body:'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-data:'Courier New',Consolas,monospace;
  --header-height:4rem;
  --content-max-width:1200px;
  --border-radius-sm:4px;
  --border-radius-md:8px;
  --transition-speed:0.3s;
}

/* Skip link */
.skip-link{position:absolute;top:-100px;left:0;background:var(--color-accent);color:#fff;padding:0.5rem 1rem;z-index:1000;transition:top 0.3s}
.skip-link:focus{top:0}

/* Header */
.site-header{position:fixed;top:0;left:0;width:100%;z-index:100;background:rgba(15,27,45,0.95);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 2px 8px rgba(0,0,0,0.3)}
.header-inner{display:flex;align-items:center;justify-content:space-between;max-width:var(--content-max-width);margin:0 auto;padding:0 1rem;height:var(--header-height)}
.header-brand{flex-shrink:0}
.header-logo{font-family:var(--font-heading);font-weight:800;font-size:1.5rem;color:var(--color-white);text-decoration:none;letter-spacing:0.02em}
.header-logo:hover{color:var(--color-accent)}
.nav-toggle{display:flex;flex-direction:column;justify-content:center;align-items:center;width:40px;height:40px;padding:8px;gap:4px;background:transparent;border:none;cursor:pointer}
.nav-toggle-line{display:block;width:24px;height:2px;background:var(--color-white);transition:transform 0.3s,opacity 0.3s}
.header-nav{display:none}
.header-nav[data-open]{display:block;position:absolute;top:var(--header-height);left:0;width:100%;background:var(--color-primary);padding:1rem;box-shadow:0 4px 8px rgba(0,0,0,0.3)}
.nav-list{display:flex;flex-direction:column;gap:0.5rem}
.nav-link{display:inline-block;padding:0.5rem 1.2rem;border-radius:999px;background:var(--color-white);color:var(--color-primary);font-weight:600;font-size:0.95rem;transition:background 0.2s,color 0.2s}
.nav-link:hover{background:var(--color-accent);color:#fff}
.nav-link[aria-current="page"]{background:var(--color-accent);color:#fff}
.header-actions{display:flex;align-items:center;gap:0.5rem}
.search-toggle{color:var(--color-white);font-size:0.85rem;padding:0.4rem 1rem;border:1px solid var(--color-accent);border-radius:999px;background:transparent;transition:background 0.2s}
.search-toggle:hover{background:var(--color-accent);color:#fff}

@media(min-width:768px){
  .nav-toggle{display:none}
  .header-nav{display:flex;align-items:center}
  .header-nav[data-open]{position:static;background:transparent;padding:0;box-shadow:none;width:auto}
  .nav-list{flex-direction:row;gap:0.4rem}
  .nav-link{background:rgba(255,255,255,0.1);color:var(--color-white);padding:0.4rem 1.2rem}
  .nav-link:hover{background:var(--color-accent);color:#fff}
  .nav-link[aria-current="page"]{background:var(--color-accent);color:#fff}
}

/* Footer */
.site-footer{background:var(--color-primary);color:var(--color-text-on-dark);padding:2rem 1rem;margin-top:auto}
.footer-inner{max-width:var(--content-max-width);margin:0 auto;display:grid;grid-template-columns:1fr;gap:1.5rem}
@media(min-width:600px){.footer-inner{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.footer-inner{grid-template-columns:2fr 1fr 2fr}}
.footer-logo{font-family:var(--font-heading);font-weight:800;font-size:1.3rem;color:var(--color-white);text-decoration:none}
.footer-logo:hover{color:var(--color-accent)}
.footer-tagline{font-size:0.9rem;margin-top:0.5rem;opacity:0.8}
.footer-nav-list{display:flex;flex-wrap:wrap;gap:0.8rem}
.footer-link{color:var(--color-accent);font-size:0.9rem;transition:opacity 0.2s}
.footer-link:hover{opacity:0.8;text-decoration:underline}
.footer-contact-item{font-size:0.85rem;margin-bottom:0.3rem}
.footer-contact-item a{color:var(--color-accent)}
.footer-contact-note{font-size:0.8rem;opacity:0.7;margin-top:0.5rem}
.footer-legal{display:flex;flex-wrap:wrap;justify-content:space-between;font-size:0.8rem;opacity:0.6;border-top:1px solid var(--color-secondary-teal);padding-top:1rem;margin-top:1rem;grid-column:1/-1}

/* Common components */
.clip-panel{clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%)}
.data-card{background:var(--color-light-gray);border-radius:var(--border-radius-md);padding:1.5rem;box-shadow:0 1px 4px rgba(0,0,0,0.05)}
.data-card--dark{background:var(--color-primary);color:var(--color-text-on-dark)}
.badge{display:inline-block;padding:0.2rem 0.6rem;font-size:0.75rem;font-weight:600;border-radius:999px;background:var(--color-accent);color:#fff}
.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:0.3rem}
.status-dot[data-status="live"]{background:var(--color-accent);animation:pulse 1.5s infinite}
.status-dot[data-status="finished"]{background:var(--color-dark-gray)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}
.has-diagonal{position:relative;overflow:hidden}
.has-diagonal::before{content:'';position:absolute;top:-20px;right:-20px;width:60px;height:60px;background:var(--color-accent-wine);transform:rotate(45deg);opacity:0.15;pointer-events:none}

/* Button base */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:0.5rem 1.5rem;font-family:var(--font-body);font-weight:600;border-radius:999px;transition:background 0.2s,color 0.2s;text-decoration:none}
.btn-primary{background:var(--color-accent);color:#fff;border:1px solid var(--color-accent)}
.btn-primary:hover{background:transparent;color:var(--color-accent)}
.btn-secondary{background:transparent;color:var(--color-primary);border:1px solid var(--color-primary)}
.btn-secondary:hover{background:var(--color-primary);color:#fff}

/* Breadcrumb (通用) */
.breadcrumb{display:flex;flex-wrap:wrap;gap:0.3rem;font-size:0.85rem;color:var(--color-dark-gray);padding:0.5rem 0}
.breadcrumb a{color:var(--color-accent)}
.breadcrumb span.separator{margin:0 0.3rem}

/* Container */
.container{max-width:var(--content-max-width);margin:0 auto;padding:0 1rem}

/* Grid utilities */
.grid{display:grid;gap:1rem}
.grid-2{grid-template-columns:1fr}
@media(min-width:600px){.grid-2{grid-template-columns:1fr 1fr}}
.grid-3{grid-template-columns:1fr}
@media(min-width:600px){.grid-3{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.grid-3{grid-template-columns:1fr 1fr 1fr}}

/* Image placeholder (通用) */
.img-placeholder{background:var(--color-light-gray);border-radius:var(--border-radius-md);min-height:200px;display:flex;align-items:center;justify-content:center;color:var(--color-dark-gray);font-size:0.85rem;position:relative;overflow:hidden}
.img-placeholder::before{content:attr(data-label);position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,0.5);color:#fff;padding:2px 6px;border-radius:2px;font-size:0.7rem}

/* Accessibility */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}
}