/* product_detail 畫面樣板 style.css */
.banner-slogan{
	display:none;
}
/* ── 詳情頁兩欄版面 ── */
   .detail-section {
       padding: 48px 4rem 80px;
       background: #fffbf5;
   }

   .detail-cols {
       display: grid;
       grid-template-columns: 1fr 450px;
       gap: 48px;
       align-items: start;
   }

   /* ── 左欄：截圖框 ── */
   .sc-item {
       border-radius: 10px;
       overflow: hidden;
       border: 1px solid #e0d8cc;
       box-shadow: 0 2px 10px rgba(74, 55, 40, .08);
   }

   .sc-chrome {
       background: #eae6e0;
       padding: 8px 12px;
       display: flex;
       align-items: center;
       gap: 7px;
       border-bottom: 1px solid #d8d2c8;
       position: sticky;
       top: 0;
       z-index: 10;
   }

   .sc-dots {
       display: flex;
       gap: 5px;
   }

   .sc-dots span {
       width: 9px;
       height: 9px;
       border-radius: 50%;
   }

   .sc-dots span:nth-child(1) {
       background: #ff5f57;
   }

   .sc-dots span:nth-child(2) {
       background: #febc2e;
   }

   .sc-dots span:nth-child(3) {
       background: #28c840;
   }

   .sc-bar {
       flex: 1;
       height: 20px;
       background: #fff;
       border: 1px solid #ccc;
       border-radius: 4px;
       display: flex;
       align-items: center;
       padding: 0 8px;
   }

   .sc-bar span {
       font-size: 10px;
       color: #999;
       font-family: monospace;
   }

   .sc-ph {
       width: 100%;
       height: 100%;
   }

   .sc-ph i {
       font-size: 40px;
       color: rgba(0, 0, 0, .1);
   }

   /* ── 右欄：sticky 資訊卡片 ── */
   .detail-right {
       position: sticky;
       top: 80px;
       background: #ffffff;
       border: 1px solid #e0d8cc;
       border-radius: 10px;
       padding: 24px 22px;
       box-shadow: 0 2px 14px rgba(74, 55, 40, .07);
   }

   .detail-client-cat {
       font-size: 11px;
       font-weight: 700;
       letter-spacing: .1em;
       text-transform: uppercase;
       color: #CB7700;
       margin-bottom: 5px;
   }

   .detail-client-name {
       font-size: 26px;
       font-weight: bold;
       color: #1f2937;
       line-height: 1.2;
       margin-bottom: 25px;
       padding-left: 12px;
       border-left: 4px solid #f59e0b;
   }

   .detail-url {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 5px;
       font-size: 14px;
       color: #CB7700;
       text-decoration: none;
       font-weight: 500;
       background: #fff8ed;
       border: 1px solid #f0d890;
       padding: 5px 12px;
       border-radius: 4px;
       margin-bottom: 16px;
       transition: background .2s;
       width: 100%;
   }

   .detail-url:hover {
       background: #fef0c0;
   }

   .detail-url i {
       font-size: 10px;
   }

   .detail-divider {
       border: none;
       border-top: 1px solid #c5c5c5;
       margin: 14px 0;
   }

   .detail-desc {
       line-height: 1.85;
   }

   .detail-desc p+p {
       margin-top: 10px;
   }

   .info-label {
       font-size: 18px;
       font-weight: 700;
       letter-spacing: .1em;
       text-transform: uppercase;
       color: #CB7700;
       padding-left: 10px;
       border-left: 3px solid #f59e0b;
       margin-bottom: 10px;
   }

   .process-item {
       line-height: 1.85;
   }

   .tech-line {
       font-size: 13px;
       color: #374151;
       padding: 4px 0;
       display: flex;
       align-items: baseline;
       gap: 8px;
   }

   .tech-line::before {
       content: '';
       width: 5px;
       height: 5px;
       border-radius: 50%;
       background: #f59e0b;
       flex-shrink: 0;
       margin-top: 3px;
   }


   .detail-cta-btn {
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 8px;
       width: 100%;
       padding: 13px;
       background: #f59e0b;
       color: #fff;
       font-size: 16px;
       font-weight: bold;
       font-family: inherit;
       border: none;
       border-radius: 6px;
       cursor: pointer;
       text-decoration: none;
       box-shadow: 0 4px 14px rgba(245, 158, 11, .3);
       transition: background .2s, transform .2s;
   }

   .detail-cta-btn:hover {
       background: #CB7700;
       transform: translateY(-1px);
   }

   /* ── 相關作品區塊 ── */
   .portfolio-related {
       background: #ffffff;
       padding: 60px 0 80px;
       border-top: 1px solid #e8dfc8;
   }

   .portfolio-related .section-title {
       color: #1f2937;
       font-size: 24px;
       letter-spacing: 2px;
   }

   .portfolio-related .section-title .highlight {
       color: #f59e0b;
   }

   .portfolio-related .section-divider {
       width: 50px;
       height: 3px;
       background: #f59e0b;
       margin: 0 auto 2.5rem;
       border-radius: 2px;
   }

   /* ── 子頁面 RWD ── */
   @media (max-width: 991px) {
	.detail-section {
    padding: 48px 0.75rem 80px;
}
       .detail-cols {
           grid-template-columns: 1fr;
           gap: 32px;
       }

       .detail-right {
           position: static;
       }

       .detail-left {
           order: 2;
       }

       .detail-right {
           order: 1;
       }

       .sc-chrome {
           position: static;
       }
   }

   @media (max-width: 576px) {
       .page-hero h1 {
           font-size: 24px;
       }
   }

   /* ======================================================
   熱門標籤元件
   ====================================================== */

   /* ── 詳情頁右欄：網站類型標籤（純展示）── */
   .detail-tags {
       display: flex;
       flex-wrap: wrap;
       gap: 6px;
       margin-bottom: 16px;
   }

   .detail-tag {
       font-size: 11px;
       font-weight: 600;
       padding: 4px 12px;
       border-radius: 99px;
       background: #fffbf5;
       border: 1px solid #e8dfc8;
       color: #6b7280;
       letter-spacing: 0.02em;
   }
/* ========================================
   Portfolio 精選客戶實績（電腦螢幕外框）
   ======================================== */

   .portfolio {
       padding: 80px 0 10rem;
       background: #fffbf5;
       background-image: radial-gradient(rgb(182 116 16 / 10%) 2px, transparent 1px), radial-gradient(rgba(182, 116, 16, 0.08) 1px, transparent 1px);
       background-size: 30px 30px, 50px 50px;
       background-position: 0 0, 15px 15px;
   }

   .portfolio .section-title {
       color: #1f2937;
   }

   .portfolio .section-title .highlight {
       color: #f59e0b;
   }

   .section-sub {
       text-align: center;
       font-size: 16px;
       color: #6b7280;
       margin-top: -10px;
       margin-bottom: 10px;
   }

   .portfolio-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 28px 24px;
       margin-top: 40px;
   }

   /* Portfolio Tab 切換 */
   .portfolio-tabs {
       display: flex;
       justify-content: center;
       gap: 12px;
       margin-top: 30px;
   }

   .portfolio-tab {
       padding: 10px 28px;
       border-radius: 50px;
       border: 2px solid #f3ead9;
       background: #fff;
       color: #6b7280;
       font-size: 18px;
       font-weight: 600;
       cursor: pointer;
       transition: all 0.3s ease;
   }

   .portfolio-tab:hover {
       border-color: #f59e0b;
       color: #CB7700;
   }

   .portfolio-tab.active {
       background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
       border-color: #f59e0b;
       color: #fff;
       box-shadow: 0 4px 14px rgba(245, 158, 11, 0.3);
   }

   /* 卡片淡入動畫（切換時） */
   .portfolio-card.tab-fade-in {
       animation: portfolioFadeIn 0.5s ease forwards;
   }

   @keyframes portfolioFadeIn {
       from {
           opacity: 0;
           transform: translateY(20px);
       }

       to {
           opacity: 1;
           transform: translateY(0);
       }
   }

   /* 電腦螢幕外框（無外層白卡）+ hover 遮罩雙按鈕 */
   .portfolio-card {
       display: flex;
       flex-direction: column;
       align-items: center;
   }

   .monitor-screen {
       width: 100%;
       background: #4a3728;
       border-radius: 10px;
       padding: 10px 10px 0;
       box-shadow: 0 6px 20px rgba(74, 55, 40, 0.22);
       transition: transform 0.3s ease, box-shadow 0.3s ease;
   }

   .portfolio-card:hover .monitor-screen {
       transform: translateY(-6px);
       box-shadow: 0 14px 30px rgba(74, 55, 40, 0.3);
   }

   .monitor-cam {
       width: 6px;
       height: 6px;
       border-radius: 50%;
       background: #6b5444;
       margin: 0 auto 8px;
   }

   .monitor-display {
       position: relative;
       width: 100%;
       aspect-ratio: 16 / 9;
       background: #fff;
       border-radius: 4px;
       overflow: hidden;
       cursor: pointer;
       margin-bottom: 10px;
   }

   .monitor-display img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       object-position: top;
       display: block;
       transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
   }

   /* hover 時截圖輕微放大 */
   .portfolio-card:hover .monitor-display img {
       transform: scale(1.06);
   }

   .monitor-stand {
       width: 14%;
       height: 16px;
       background: #3d2e21;
       clip-path: polygon(35% 0, 65% 0, 80% 100%, 20% 100%);
   }

   .monitor-base {
       width: 32%;
       height: 6px;
       background: #4a3728;
       border-radius: 3px;
       margin-top: -1px;
   }

   /* 遮罩層 */
   .portfolio-overlay {
       position: absolute;
       inset: 0;
       background: linear-gradient(135deg, rgba(74, 55, 40, 0.55), rgba(245, 158, 11, 0.55));
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 16px;
       opacity: 0;
       transition: opacity 0.4s ease;
   }

   .portfolio-card:hover .portfolio-overlay {
       opacity: 1;
   }

   /* 兩個圓形按鈕 */
   .portfolio-btn {
       position: relative;
       width: 52px;
       height: 52px;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       text-decoration: none;
       opacity: 0;
       transform: translateY(16px) scale(0.8);
       transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease, background 0.3s ease, color 0.3s ease;
   }

   .portfolio-btn i {
       font-size: 19px;
   }

   .portfolio-card:hover .portfolio-btn {
       opacity: 1;
       transform: translateY(0) scale(1);
   }

   /* 第二顆按鈕延遲一點點出現，產生錯落動感 */
   .portfolio-card:hover .portfolio-btn-link {
       transition-delay: 0.08s;
   }

   /* 按鈕一：金色實心（看介紹） */
   .portfolio-btn-preview {
       background: #f59e0b;
       color: #fff;
       box-shadow: 0 4px 14px rgba(245, 158, 11, 0.5);
   }

   .portfolio-btn-preview:hover {
       background: #fff;
       color: #CB7700;
       transform: translateY(-4px) scale(1.08);
   }

   /* 按鈕二：白底毛玻璃外框（逛官網） */
   .portfolio-btn-link {
       background: rgba(255, 255, 255, 0.2);
       color: #fff;
       border: 2px solid rgba(255, 255, 255, 0.9);
       backdrop-filter: blur(4px);
   }

   .portfolio-btn-link:hover {
       background: #fff;
       color: #4a3728;
       transform: translateY(-4px) scale(1.08);
   }

   /* 按鈕文字提示 */
   .portfolio-btn-tip {
       position: absolute;
       bottom: -24px;
       left: 50%;
       transform: translateX(-50%);
       font-size: 11px;
       color: #fff;
       white-space: nowrap;
       opacity: 0;
       transition: opacity 0.3s ease;
       pointer-events: none;
       font-weight: 500;
   }

   .portfolio-btn:hover .portfolio-btn-tip {
       opacity: 1;
   }

   .portfolio-info {
       margin-top: 16px;
       text-align: center;
   }

   .portfolio-name {
       font-size: 18px;
       font-weight: 600;
       color: #1f2937 !important;
       margin-bottom: 8px;
       letter-spacing: 1px;
   }

   .portfolio-meta {
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 8px;
       margin-bottom: 10px;
       flex-wrap: wrap;
   }

   .portfolio-tag {
       font-size: 12px;
       padding: 3px 12px;
       border-radius: 50px;
       font-weight: 600;
   }

   .tag-template {
       background: #fef3c7;
       color: #92400e;
   }

   .tag-custom {
       background: #ede9fe;
       color: #5b21b6;
   }

   .portfolio-industry {
       font-size: 13px;
       color: #6b7280;
   }

   .portfolio-link {
       display: inline-flex;
       align-items: center;
       gap: 4px;
       font-size: 13px;
       color: #CB7700;
       text-decoration: none;
       font-weight: 500;
       transition: gap 0.2s ease;
   }

   .portfolio-link:hover {
       gap: 8px;
       color: #f59e0b;
   }

   .portfolio-link span {
       transition: transform 0.2s ease;
   }

   .portfolio-more {
       text-align: center;
       margin-top: 50px;
   }

   .btn-portfolio-more {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       padding: 12px 32px;
       border-radius: 50px;
       border: 2px solid #f59e0b;
       color: #CB7700;
       font-weight: 600;
       font-size: 15px;
       text-decoration: none;
       transition: all 0.3s ease;
   }

   .btn-portfolio-more:hover {
       background: #f59e0b;
       color: #fff;
       box-shadow: 0 4px 15px rgba(245, 158, 11, 0.35);
   }

   /* 平板：2欄 */
   @media (max-width: 991px) {
       .portfolio-grid {
           grid-template-columns: repeat(2, 1fr);
           gap: 36px 20px;
       }
   }

   /* 手機：1欄 */
   @media (max-width: 576px) {
       .portfolio-grid {
           grid-template-columns: 1fr;
           gap: 32px;
       }

       .portfolio {
           padding: 60px 0;
       }
   }