/* ===== RESET & BASE ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px;line-height:1.6}
body{font-family:'Noto Sans SC',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;color:#1D1D1D;background:#FFFFFF;min-height:100vh;-webkit-font-smoothing:antialiased}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{cursor:pointer;font:inherit;border:none;background:none}
:focus-visible{outline:2px solid #E63946;outline-offset:2px;border-radius:2px}

/* ===== CSS VARIABLES ===== */
:root{
  --color-primary:#E63946;
  --color-primary-dark:#D62828;
  --color-secondary:#1D3557;
  --color-accent:#F4A261;
  --color-bg:#FFFFFF;
  --color-card-bg:#F1FAEE;
  --color-text:#1D1D1D;
  --color-text-muted:#457B9D;
  --color-border:rgba(29,53,87,0.12);
  --font-heading:'Montserrat','Noto Sans SC',system-ui,sans-serif;
  --font-body:'Noto Sans SC',system-ui,'Segoe UI',Roboto,sans-serif;
  --nav-side-width:72px;
  --max-width:1200px;
  --transition-fast:0.2s ease;
  --transition-base:0.3s ease;
  --shadow-card:0 2px 8px rgba(29,53,87,0.08),0 1px 3px rgba(29,53,87,0.06);
  --shadow-card-hover:0 8px 24px rgba(29,53,87,0.12),0 2px 6px rgba(29,53,87,0.08);
}

/* ===== SKIP LINK ===== */
.skip-link{
  position:absolute;top:-999px;left:0;z-index:9999;
  padding:8px 16px;background:#1D3557;color:#fff;font-size:0.875rem;
  transition:top 0.2s ease;
}
.skip-link:focus{top:0;outline:2px solid #F4A261;outline-offset:-2px}

/* ===== CONTAINER ===== */
.container{width:100%;max-width:var(--max-width);margin:0 auto;padding:0 24px}
@media(max-width:768px){.container{padding:0 16px}}

/* ===== LOGO MARK ===== */
.logo-mark{font-family:var(--font-heading);font-weight:800;font-size:1.25rem;letter-spacing:0.02em}
.logo-mark a{color:#FFFFFF;transition:color var(--transition-fast)}
.logo-mark a:hover{color:var(--color-accent)}
.logo-mark--footer{font-size:1.5rem;color:#FFFFFF;margin-bottom:8px}

/* ===== SITE HEADER ===== */
.site-header{position:relative;z-index:100}

/* ===== NAV SIDE (桌面侧边轨道) ===== */
.nav-side{
  position:fixed;top:0;left:0;width:var(--nav-side-width);height:100vh;
  background:var(--color-secondary);display:flex;flex-direction:column;
  align-items:center;padding:24px 0 16px;z-index:200;
  box-shadow:2px 0 12px rgba(0,0,0,0.15);
}
.nav-side .logo-mark{font-size:1.125rem;margin-bottom:32px;writing-mode:vertical-rl;letter-spacing:0.3em}
.nav-side .logo-mark a{color:#FFFFFF}
.nav-side .logo-mark a:hover{color:var(--color-accent)}
.nav-side__list{display:flex;flex-direction:column;align-items:center;gap:24px;flex:1}
.nav-side__link{
  display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:50%;
  font-family:var(--font-heading);font-weight:700;font-size:0.75rem;
  color:rgba(255,255,255,0.7);background:transparent;
  transition:all var(--transition-fast);position:relative;
  writing-mode:vertical-lr;letter-spacing:0.1em;
}
.nav-side__link:hover{color:#FFFFFF;background:rgba(230,57,70,0.25)}
.nav-side__link[aria-current="page"]{
  color:#FFFFFF;background:var(--color-primary);
  box-shadow:0 0 0 3px rgba(230,57,70,0.35);
}
.nav-side__decoration{
  width:32px;height:2px;background:var(--color-accent);
  transform:rotate(-15deg);margin-top:auto;opacity:0.6;
}

/* ===== 移动端顶部栏 ===== */
.site-header__mobile{display:none;position:fixed;top:0;left:0;width:100%;height:56px;background:var(--color-secondary);padding:0 16px;align-items:center;justify-content:space-between;z-index:300;box-shadow:0 2px 8px rgba(0,0,0,0.12)}
.site-header__mobile .logo-mark{font-size:1rem;color:#FFFFFF}
.nav-toggle{display:flex;flex-direction:column;gap:5px;padding:8px;background:transparent;border:none;cursor:pointer;border-radius:4px;transition:background var(--transition-fast)}
.nav-toggle:hover{background:rgba(255,255,255,0.1)}
.nav-toggle__bar{display:block;width:24px;height:2.5px;background:#FFFFFF;border-radius:1px;transition:all var(--transition-fast)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ===== 移动端抽屉 ===== */
.nav-drawer{position:fixed;top:0;left:0;width:100%;height:100%;z-index:400;pointer-events:none;visibility:hidden;transition:visibility 0s 0.35s}
.nav-drawer[data-open]{pointer-events:auto;visibility:visible;transition:visibility 0s 0s}
.nav-drawer__inner{position:absolute;top:0;left:0;width:280px;height:100%;background:var(--color-secondary);padding:24px 20px;transform:translateX(-100%);transition:transform var(--transition-base);box-shadow:4px 0 24px rgba(0,0,0,0.2);display:flex;flex-direction:column}
.nav-drawer[data-open] .nav-drawer__inner{transform:translateX(0)}
.nav-drawer__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:32px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,0.15)}
.nav-drawer__header .logo-mark{font-size:1.25rem;color:#FFFFFF}
.nav-drawer__close{font-size:1.5rem;color:rgba(255,255,255,0.7);padding:4px 8px;transition:color var(--transition-fast)}
.nav-drawer__close:hover{color:#FFFFFF}
.nav-drawer__list{display:flex;flex-direction:column;gap:4px;flex:1}
.nav-drawer__link{display:block;padding:12px 16px;border-radius:6px;font-family:var(--font-heading);font-weight:600;font-size:1rem;color:rgba(255,255,255,0.8);transition:all var(--transition-fast);border-left:3px solid transparent}
.nav-drawer__link:hover{color:#FFFFFF;background:rgba(230,57,70,0.2);border-left-color:var(--color-primary)}
.nav-drawer__link[aria-current="page"]{color:#FFFFFF;background:rgba(230,57,70,0.25);border-left-color:var(--color-primary);font-weight:700}
.nav-drawer__overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.45);opacity:0;transition:opacity var(--transition-base)}
.nav-drawer[data-open] .nav-drawer__overlay{opacity:1}

/* ===== 桌面/移动端切换 ===== */
@media(min-width:769px){
  .nav-side{display:flex}
  .site-header__mobile{display:none}
  .nav-drawer{display:none}
  .site-header{padding-left:var(--nav-side-width)}
}
@media(max-width:768px){
  .nav-side{display:none}
  .site-header__mobile{display:flex}
  .nav-drawer{display:block}
  .site-header{padding-top:56px}
}

/* ===== SITE FOOTER ===== */
.site-footer{
  background:var(--color-secondary);color:rgba(255,255,255,0.85);
  padding:48px 0 24px;margin-top:64px;
}
.site-footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.5fr;gap:32px}
@media(max-width:992px){.site-footer__grid{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:576px){.site-footer__grid{grid-template-columns:1fr;gap:24px}}

.site-footer__brand{display:flex;flex-direction:column;gap:8px}
.site-footer__tagline{font-size:0.875rem;color:rgba(255,255,255,0.7);line-height:1.6;max-width:280px}
.site-footer__trust{font-size:0.8125rem;color:rgba(255,255,255,0.5);border-left:3px solid var(--color-accent);padding-left:12px;margin-top:4px}

.site-footer__nav-title{font-family:var(--font-heading);font-weight:700;font-size:0.875rem;color:var(--color-accent);letter-spacing:0.08em;margin-bottom:12px;text-transform:uppercase}
.site-footer__nav-list{display:flex;flex-direction:column;gap:8px}
.site-footer__nav-list a{font-size:0.875rem;color:rgba(255,255,255,0.7);transition:color var(--transition-fast);padding:2px 0;display:inline-block}
.site-footer__nav-list a:hover{color:var(--color-primary)}

.site-footer__contact{display:flex;flex-direction:column;gap:6px}
.site-footer__contact-item{font-size:0.8125rem;color:rgba(255,255,255,0.7);line-height:1.5}
.site-footer__contact-item a{color:rgba(255,255,255,0.85);transition:color var(--transition-fast)}
.site-footer__contact-item a:hover{color:var(--color-primary)}

.site-footer__bottom{margin-top:32px;padding-top:16px;text-align:center}
.divider--skew{height:2px;background:linear-gradient(135deg,var(--color-primary),var(--color-accent),var(--color-secondary));transform:skewX(-15deg);margin-bottom:16px;max-width:400px;margin-left:auto;margin-right:auto;opacity:0.5}
.site-footer__icp{font-size:0.75rem;color:rgba(255,255,255,0.5);margin-bottom:4px}
.site-footer__icp a{color:rgba(255,255,255,0.6);transition:color var(--transition-fast)}
.site-footer__icp a:hover{color:var(--color-primary)}
.site-footer__copyright{font-size:0.75rem;color:rgba(255,255,255,0.4)}

/* ===== BUTTONS ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 24px;border-radius:6px;font-family:var(--font-heading);font-weight:700;font-size:0.9375rem;line-height:1.4;transition:all var(--transition-fast);border:2px solid transparent;cursor:pointer;text-align:center}
.btn-primary{background:var(--color-primary);color:#FFFFFF;border-color:var(--color-primary)}
.btn-primary:hover{background:var(--color-primary-dark);border-color:var(--color-primary-dark);transform:translateY(-1px);box-shadow:0 4px 12px rgba(230,57,70,0.3)}
.btn-primary:active{transform:translateY(0)}
.btn-outline{background:transparent;color:var(--color-secondary);border-color:var(--color-secondary)}
.btn-outline:hover{background:var(--color-secondary);color:#FFFFFF}

/* ===== CARDS ===== */
.card{background:var(--color-card-bg);border-radius:8px;box-shadow:var(--shadow-card);border:1px solid var(--color-border);overflow:hidden;transition:box-shadow var(--transition-base),transform var(--transition-base)}
.card:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-2px)}
.card__header{padding:16px 20px 8px;border-bottom:1px solid var(--color-border);font-family:var(--font-heading);font-weight:700;font-size:1.125rem;color:var(--color-secondary)}
.card__body{padding:16px 20px 20px;font-size:0.9375rem;color:var(--color-text);line-height:1.7}

/* ===== BENTO GRID ===== */
.bento-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;width:100%}
.bento-item{grid-column:span var(--bento-span,4);border-radius:8px;overflow:hidden;min-height:120px;background:var(--color-card-bg);box-shadow:var(--shadow-card);border:1px solid var(--color-border);transition:box-shadow var(--transition-base)}
.bento-item:hover{box-shadow:var(--shadow-card-hover)}
@media(max-width:992px){.bento-grid{grid-template-columns:repeat(6,1fr)}.bento-item{grid-column:span 3}}
@media(max-width:576px){.bento-grid{grid-template-columns:1fr}.bento-item{grid-column:1/-1}}

/* ===== TAG ===== */
.tag{display:inline-block;padding:3px 10px;border-radius:3px;background:var(--color-accent);color:#1D1D1D;font-size:0.75rem;font-weight:600;font-family:var(--font-heading);letter-spacing:0.04em}

/* ===== SECTION TITLE ===== */
.section-title{font-family:var(--font-heading);font-weight:800;font-size:2rem;color:var(--color-secondary);margin-bottom:16px;position:relative;padding-bottom:12px}
.section-title::after{content:'';position:absolute;bottom:0;left:0;width:60px;height:4px;background:var(--color-primary);border-radius:2px}
.section-title--light{color:#FFFFFF}
.section-title--light::after{background:var(--color-accent)}
@media(max-width:768px){.section-title{font-size:1.5rem}}

/* ===== BREADCRUMB ===== */
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:0.8125rem;color:var(--color-text-muted);padding:12px 0}
.breadcrumb a{color:var(--color-text-muted);transition:color var(--transition-fast)}
.breadcrumb a:hover{color:var(--color-primary)}
.breadcrumb span{color:var(--color-text)}
.breadcrumb li+li::before{content:'>';margin-right:6px;color:var(--color-text-muted);opacity:0.6}

/* ===== IMG CONTAINER ===== */
.img-container{position:relative;width:100%;padding-top:56.25%;border-radius:6px;overflow:hidden;background:var(--color-card-bg);border:1px solid var(--color-border)}
.img-container > img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}
.img-container--4-3{padding-top:75%}
.img-container--1-1{padding-top:100%}
.img-container--placeholder{background:linear-gradient(135deg,var(--color-card-bg) 40%,var(--color-border) 100%);display:flex;align-items:center;justify-content:center}

/* ===== SCROLL TOP ===== */
.scroll-top{position:fixed;bottom:24px;right:24px;z-index:500;width:48px;height:48px;border-radius:50%;background:var(--color-primary);color:#FFFFFF;font-size:1.25rem;box-shadow:0 4px 16px rgba(230,57,70,0.35);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transform:translateY(12px);transition:all var(--transition-base);pointer-events:none}
.scroll-top.is-visible{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.scroll-top:hover{background:var(--color-primary-dark);transform:translateY(-3px);box-shadow:0 6px 20px rgba(230,57,70,0.45)}
.scroll-top:active{transform:translateY(0)}
@media(max-width:768px){.scroll-top{bottom:16px;right:16px;width:40px;height:40px;font-size:1rem}}

/* ===== PROGRESS BAR ===== */
.progress-bar{position:fixed;top:0;left:0;width:0;height:3px;background:linear-gradient(90deg,var(--color-primary),var(--color-accent));z-index:9999;transition:width 0.1s linear;pointer-events:none}
@media(max-width:768px){.progress-bar{top:56px}}

/* ===== UTILITY ===== */
.text-center{text-align:center}
.text-muted{color:var(--color-text-muted)}
.mt-1{margin-top:8px}
.mt-2{margin-top:16px}
.mt-3{margin-top:24px}
.mt-4{margin-top:32px}
.mb-1{margin-bottom:8px}
.mb-2{margin-bottom:16px}
.mb-3{margin-bottom:24px}
.mb-4{margin-bottom:32px}

/* ===== RESPONSIVE ===== */
@media(max-width:768px){
  .bento-grid{grid-template-columns:repeat(4,1fr);gap:12px}
  .bento-item{grid-column:span 4}
  .section-title{font-size:1.375rem}
  .site-footer__grid{grid-template-columns:1fr;gap:24px}
}
@media(min-width:769px)and(max-width:1024px){
  .bento-grid{grid-template-columns:repeat(8,1fr)}
  .bento-item{grid-column:span 4}
}

/* ===== REDUCED MOTION ===== */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important}
  .nav-drawer__inner{transform:none!important}
  .nav-drawer__overlay{opacity:0!important}
  .nav-drawer[data-open] .nav-drawer__inner{transform:translateX(0)!important}
  .nav-drawer[data-open] .nav-drawer__overlay{opacity:1!important}
  .card:hover{transform:none!important}
  .scroll-top{transition:none!important}
  .progress-bar{transition:none!important}
  .btn-primary:hover{transform:none!important}
}

/* ===== PRINT ===== */
@media print{
  .nav-side,.site-header__mobile,.nav-drawer,.scroll-top,.progress-bar{display:none!important}
  .site-header{padding-left:0!important}
  .site-footer{break-inside:avoid;margin-top:32px}
}