/* ================================================================
   portfolio-taste.css
   /web-production/ と同じテイストへのオーバーライド
   Fonts: Zen Kaku Gothic New / Inter / Shippori Mincho
   Colors: cream(#f7f5ef) / charcoal(#2f3135) / gold(#c8a96e) / navy(#1e3a5f)
   ================================================================ */

/* --- Google Fonts Import --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Zen+Kaku+Gothic+New:wght@300;400;500;700&family=Shippori+Mincho:wght@400;500;600&display=swap');

/* --- Root Color & Font Override --- */
:root {
  --wt-bg:         #f7f5ef;
  --wt-surface:    #ffffff;
  --wt-text:       #2f3135;
  --wt-text-sub:   #555860;
  --wt-text-light: #888c91;
  --wt-gold:       #c8a96e;
  --wt-gold-pale:  rgba(200, 169, 110, 0.15);
  --wt-navy:       #1e3a5f;
  --wt-border:     rgba(47, 49, 53, 0.08);
  --wt-border-md:  rgba(47, 49, 53, 0.14);
  --wt-btn-bg:     #1f2023;
  --wt-btn-hover:  #1e3a5f;
}

/* --- Base Override --- */
html,
body {
  background-color: var(--wt-bg) !important;
  color: var(--wt-text) !important;
  font-family: 'Zen Kaku Gothic New', 'Inter', -apple-system, 'Hiragino Sans', sans-serif !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Zen Kaku Gothic New', 'Inter', -apple-system, 'Hiragino Sans', sans-serif !important;
  color: var(--wt-text) !important;
}

/* editorial display (英数字) は Inter / Shippori Mincho を使う */
.font-editorial,
.font-editorial-display,
.card-number,
.hero-deco-number,
.hero-stat-value,
.hero-label,
.section-number,
.detail-number {
  font-family: 'Shippori Mincho', 'Inter', serif !important;
}

/* --- Header --- */
.site-header {
  background: transparent !important;
}
.site-header.scrolled {
  background: rgba(247, 245, 239, 0.85) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-bottom: 1px solid var(--wt-border) !important;
}
.header-logo {
  font-family: 'Zen Kaku Gothic New', 'Inter', sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.10em !important;
  color: var(--wt-text) !important;
}
.header-nav a {
  color: var(--wt-text-sub) !important;
}
.header-nav a:hover {
  color: var(--wt-text) !important;
}

/* Mobile menu */
.mobile-menu {
  background: rgba(247, 245, 239, 0.98) !important;
}
.mobile-menu a {
  color: var(--wt-text) !important;
  border-bottom-color: var(--wt-border) !important;
}
.mobile-menu-btn span {
  background: var(--wt-text) !important;
}

/* --- Hero Section --- */
.hero {
  background-color: var(--wt-bg) !important;
}
.hero-bg-overlay {
  background: linear-gradient(
    to bottom,
    rgba(247, 245, 239, 0.75),
    rgba(247, 245, 239, 0.55),
    #f7f5ef
  ) !important;
}
.hero-title {
  color: var(--wt-text) !important;
  font-family: 'Zen Kaku Gothic New', sans-serif !important;
}
.hero-title .accent {
  color: var(--wt-navy) !important;
}
.hero-sub {
  color: var(--wt-text-sub) !important;
}
.hero-stat-value {
  color: rgba(200, 169, 110, 0.55) !important;
}
.hero-stat-label {
  color: var(--wt-text-light) !important;
}
.hero-stats {
  border-top-color: var(--wt-border) !important;
}
.scroll-indicator span {
  color: var(--wt-text-light) !important;
}
.scroll-indicator-line {
  background: linear-gradient(to bottom, var(--wt-gold), transparent) !important;
}

/* Section label */
.section-number {
  color: var(--wt-gold) !important;
}
.editorial-line {
  background: linear-gradient(to right, var(--wt-gold), #e8e4de, transparent) !important;
}

/* --- Buttons --- */
.btn-primary {
  background: var(--wt-btn-bg) !important;
  color: #fff !important;
  border: 1px solid var(--wt-btn-bg) !important;
  font-family: 'Zen Kaku Gothic New', 'Inter', sans-serif !important;
}
.btn-primary:hover {
  background: var(--wt-btn-hover) !important;
  border-color: var(--wt-btn-hover) !important;
}
.btn-outline {
  border-color: var(--wt-btn-bg) !important;
  color: var(--wt-btn-bg) !important;
  font-family: 'Zen Kaku Gothic New', 'Inter', sans-serif !important;
}
.btn-outline:hover {
  background: var(--wt-btn-bg) !important;
  color: #fff !important;
}

/* --- Works / Project Cards --- */
.works-section {
  background-color: var(--wt-bg) !important;
}
.section-title {
  color: var(--wt-text) !important;
  font-family: 'Zen Kaku Gothic New', sans-serif !important;
}
.section-desc {
  color: var(--wt-text-sub) !important;
}

/* Filter buttons */
.filter-btn {
  color: var(--wt-text-sub) !important;
  border-color: var(--wt-border-md) !important;
  background: transparent !important;
  font-family: 'Zen Kaku Gothic New', 'Inter', sans-serif !important;
}
.filter-btn:hover {
  border-color: var(--wt-text) !important;
  color: var(--wt-text) !important;
}
.filter-btn.active {
  background: var(--wt-btn-bg) !important;
  border-color: var(--wt-btn-bg) !important;
  color: #fff !important;
}

/* Card */
.card-thumbnail-inner {
  background: #e8e5df !important;
  border: 1px solid var(--wt-border) !important;
}
.card-thumbnail-overlay:hover,
.project-card:hover .card-thumbnail-overlay {
  background: rgba(30, 58, 95, 0.08) !important;
}
.card-number {
  color: rgba(200, 169, 110, 0.15) !important;
}
.card-meta-category {
  color: var(--wt-gold) !important;
}
.card-meta-divider {
  background: var(--wt-border-md) !important;
}
.card-meta-industry {
  color: var(--wt-text-light) !important;
}
.card-name {
  color: var(--wt-text) !important;
  font-family: 'Zen Kaku Gothic New', sans-serif !important;
}
.project-card:hover .card-name {
  color: var(--wt-navy) !important;
}
.card-summary {
  color: var(--wt-text-light) !important;
}
.card-scope-tag {
  border-color: var(--wt-border-md) !important;
  color: var(--wt-text-light) !important;
  background: transparent !important;
}
.card-view-detail {
  color: var(--wt-text) !important;
  font-family: 'Zen Kaku Gothic New', 'Inter', sans-serif !important;
}
.project-card:hover .card-view-detail {
  color: var(--wt-navy) !important;
}
.card-category-badge {
  background: rgba(247, 245, 239, 0.92) !important;
  color: var(--wt-text) !important;
}

/* --- Strength Section --- */
.strength-section {
  background-color: var(--wt-bg) !important;
}
.strength-bg-overlay {
  background: rgba(247, 245, 239, 0.9) !important;
}
.strength-item h3 {
  font-family: 'Zen Kaku Gothic New', sans-serif !important;
  color: var(--wt-text) !important;
}
.strength-item p {
  color: var(--wt-text-light) !important;
}
.strength-item .strength-line {
  background: rgba(200, 169, 110, 0.4) !important;
}
.strength-item .strength-number {
  color: rgba(200, 169, 110, 0.2) !important;
}
.strength-item .strength-icon {
  color: rgba(200, 169, 110, 0.5) !important;
}
.strength-item:hover .strength-icon {
  color: var(--wt-gold) !important;
}
.strength-summary {
  border-top-color: var(--wt-border) !important;
}
.strength-summary-item .label {
  color: var(--wt-text-light) !important;
}
.strength-summary-item .line {
  background: var(--wt-border) !important;
}
.strength-summary-item .value {
  color: rgba(200, 169, 110, 0.6) !important;
}

/* --- Stance Section --- */
.stance-section {
  background-color: var(--wt-bg) !important;
}
.stance-bg-overlay {
  background: rgba(247, 245, 239, 0.92) !important;
}
.stance-text p {
  color: var(--wt-text-sub) !important;
}
.stance-note {
  border-top-color: var(--wt-border) !important;
}
.stance-note p {
  color: var(--wt-text-light) !important;
}
.stance-value-item .value-line {
  background: var(--wt-gold) !important;
}
.stance-value-item h4 {
  color: var(--wt-text) !important;
  font-family: 'Zen Kaku Gothic New', sans-serif !important;
}
.stance-value-item p {
  color: var(--wt-text-light) !important;
}

/* --- CTA Section: 暗い背景 → 生成り系に変更 --- */
.cta-section {
  background-color: #ede9e0 !important;
}
.cta-bg img {
  display: none !important;
}
.cta-bg-overlay {
  background: rgba(237, 233, 224, 0.6) !important;
}
.cta-title {
  color: var(--wt-text) !important;
  font-family: 'Zen Kaku Gothic New', sans-serif !important;
}
.cta-desc {
  color: var(--wt-text-sub) !important;
}
.cta-line {
  background: var(--wt-gold) !important;
}
.cta-tag {
  color: var(--wt-text-sub) !important;
  border-color: var(--wt-border-md) !important;
}
.cta-note {
  color: var(--wt-text-light) !important;
}
.btn-cta {
  background: var(--wt-btn-bg) !important;
  color: #fff !important;
  border: 1px solid var(--wt-btn-bg) !important;
  font-family: 'Zen Kaku Gothic New', 'Inter', sans-serif !important;
}
.btn-cta:hover {
  background: var(--wt-btn-hover) !important;
  border-color: var(--wt-btn-hover) !important;
  color: #fff !important;
}
.cta-contact-links {
  justify-content: flex-start !important;
}
.cta-contact-item {
  color: var(--wt-text-sub) !important;
}
.cta-contact-item:hover {
  color: var(--wt-gold) !important;
}

/* --- Footer --- */
.site-footer {
  border-top-color: var(--wt-border) !important;
  background-color: var(--wt-bg) !important;
}
.footer-brand .footer-logo {
  font-family: 'Zen Kaku Gothic New', 'Inter', sans-serif !important;
  color: var(--wt-text) !important;
}
.footer-brand p {
  color: var(--wt-text-light) !important;
}
.footer-col h4 {
  color: var(--wt-gold) !important;
}
.footer-col ul li,
.footer-col ul li a {
  color: var(--wt-text-light) !important;
}
.footer-col ul li a:hover {
  color: var(--wt-text) !important;
}
.footer-copyright {
  color: var(--wt-text-light) !important;
  border-top-color: var(--wt-border) !important;
}
.footer-contact-links > a {
  color: var(--wt-text-light) !important;
}
.footer-contact-links > a:hover {
  color: var(--wt-text) !important;
}
.footer-social-links a {
  color: var(--wt-text-light) !important;
}
.footer-social-links a:hover {
  color: var(--wt-text) !important;
}

/* --- Modal --- */
.modal-bg {
  background: rgba(20, 20, 24, 0.55) !important;
}
.modal-container {
  background: var(--wt-bg) !important;
}
.modal-close {
  background: rgba(247, 245, 239, 0.92) !important;
}
.modal-close:hover {
  background: #e8e5df !important;
}
.modal-meta .meta-category {
  color: var(--wt-gold) !important;
}
.modal-meta .meta-divider {
  background: var(--wt-border-md) !important;
}
.modal-meta .meta-industry {
  color: var(--wt-text-light) !important;
}
.modal-title {
  color: var(--wt-text) !important;
  font-family: 'Zen Kaku Gothic New', sans-serif !important;
}
.modal-summary {
  color: var(--wt-text-light) !important;
}
.modal-url {
  border-bottom-color: var(--wt-border) !important;
}
.modal-url a {
  color: var(--wt-navy) !important;
}
.modal-url a:hover {
  color: var(--wt-gold) !important;
}
.detail-block .detail-title {
  color: var(--wt-text) !important;
  font-family: 'Zen Kaku Gothic New', sans-serif !important;
}
.detail-block .detail-number {
  color: rgba(200, 169, 110, 0.3) !important;
}
.detail-block .detail-text {
  color: var(--wt-text-sub) !important;
}
.modal-scope-tag {
  border-color: var(--wt-border-md) !important;
  color: var(--wt-text-sub) !important;
  background: transparent !important;
}
.modal-bottom-cta {
  border-top-color: var(--wt-border) !important;
}
.modal-bottom-cta p {
  color: var(--wt-text-light) !important;
}
.modal-bottom-cta .btn-modal-cta {
  background: var(--wt-btn-bg) !important;
  color: #fff !important;
  font-family: 'Zen Kaku Gothic New', 'Inter', sans-serif !important;
}
.modal-bottom-cta .btn-modal-cta:hover {
  background: var(--wt-btn-hover) !important;
}

/* --- Selection --- */
::selection {
  background: rgba(200, 169, 110, 0.2) !important;
  color: var(--wt-text) !important;
}