@media (max-width: 768px) {
   .clean-portfolio-main-image:hover {
      transform: none;
   }

   .portfolio-image-container img:hover {
      transform: none;
      box-shadow: none;
   }

   .clean-portfolio-thumbnail:hover {
      transform: none;
   }

   .portfolio-feature-card:hover {
      transform: none;
   }

   .portfolio-result-card:hover {
      transform: none;
      border-color: #e5e7eb;
      box-shadow: none;
   }

   .clean-portfolio-related-card:hover {
      transform: none;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   }

   .clean-portfolio-primary-btn:hover {
      transform: none;
      box-shadow: 0 4px 12px rgba(49, 130, 246, 0.3);
   }

   .clean-portfolio-review-write-btn:hover {
      transform: none;
      box-shadow: 0 4px 12px rgba(49, 130, 246, 0.3);
   }

   .clean-portfolio-sites-slider {
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
   }

   .clean-portfolio-thumbnail-list {
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
   }

   .clean-portfolio-tab-header {
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
   }

   * {
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
   }

   button,
   a,
   .clean-portfolio-thumbnail,
   .clean-portfolio-tab-btn {
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
   }

   .portfolio-faq-question {
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0.05);
   }

   .portfolio-image-container img {
      -webkit-tap-highlight-color: transparent;
   }

   .clean-portfolio-main-image {
      -webkit-tap-highlight-color: transparent;
   }

   body {
      -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
   }

   .clean-portfolio-wrapper {
      overflow-x: hidden;
   }

   .portfolio-container-main {
      overflow-x: hidden;
   }
}
@media (max-width: 360px) {
   .clean-portfolio-container {
      padding: 0 6px;
   }

   .clean-portfolio-content-area,
   .clean-portfolio-info-card {
      padding: 10px 6px;
      border-radius: 6px;
   }

   .clean-portfolio-title {
      font-size: 15px;
      line-height: 1.2;
   }

   .clean-portfolio-mobile-sticky-content {
      padding: 6px 8px;
      gap: 6px;
   }

   .clean-portfolio-mobile-title {
      font-size: 12px;
   }

   .clean-portfolio-mobile-rating {
      font-size: 10px;
   }

   .clean-portfolio-mobile-contact,
   .clean-portfolio-mobile-purchase {
      padding: 5px 10px;
      font-size: 11px;
      max-width: 90px;
   }

   .clean-portfolio-tab-btn {
      padding: 6px 8px;
      font-size: 11px;
   }

   .clean-portfolio-thumbnail {
      width: 35px;
      height: 35px;
   }

   .clean-portfolio-zoom-btn {
      padding: 2px 4px;
      font-size: 9px;
      top: 4px;
      right: 4px;
   }

   .clean-portfolio-site-card-slider {
      flex: 0 0 160px;
   }

   .clean-portfolio-site-card-image {
      height: 70px;
   }

   .clean-portfolio-site-card-body {
      padding: 8px;
   }

   .clean-portfolio-site-card-title {
      font-size: 13px;
   }

   .clean-portfolio-site-card-desc {
      font-size: 10px;
      margin-bottom: 8px;
   }

   .clean-portfolio-description {
      font-size: 12px;
      line-height: 1.5;
   }

   .clean-portfolio-description h1,
   .clean-portfolio-description h2,
   .clean-portfolio-description h3,
   .clean-portfolio-description h4 {
      font-size: 13px;
      margin-top: 12px;
      margin-bottom: 4px;
   }

   .clean-portfolio-section-title {
      font-size: 15px;
      margin-bottom: 10px;
   }

   .clean-portfolio-info-item {
      padding: 8px;
   }

   .clean-portfolio-info-label {
      font-size: 10px;
   }

   .clean-portfolio-info-value {
      font-size: 11px;
   }

   .clean-portfolio-modal-content {
      max-width: 100vw;
      max-height: 85vh;
   }

   .clean-portfolio-modal-content img {
      max-height: 80vh;
   }

   .clean-portfolio-modal-close {
      top: 3px;
      right: 3px;
      width: 28px;
      height: 28px;
      font-size: 14px;
   }

   .portfolio-container-main {
      padding: 10px 6px;
   }

   .portfolio-main-title {
      font-size: 18px;
      line-height: 1.1;
   }

   .portfolio-title-emoji {
      font-size: 22px;
   }

   .portfolio-subtitle {
      font-size: 13px;
   }

   .portfolio-card-wrapper {
      padding: 10px 6px;
      margin-bottom: 16px;
   }

   .portfolio-cta-card {
      padding: 16px 10px;
   }

   .portfolio-cta-title {
      font-size: 15px;
   }

   .portfolio-cta-description {
      font-size: 12px;
   }

   .portfolio-cta-highlight {
      font-size: 12px;
      padding: 8px 10px;
   }

   .portfolio-section-title {
      font-size: 15px;
   }

   .portfolio-section-badge {
      font-size: 11px;
      padding: 3px 6px;
   }

   .portfolio-feature-card {
      padding: 10px 6px;
   }

   .portfolio-feature-icon {
      font-size: 20px;
   }

   .portfolio-feature-card h3 {
      font-size: 13px;
   }

   .portfolio-feature-card p {
      font-size: 11px;
   }

   .portfolio-result-card {
      padding: 10px 6px;
   }

   .portfolio-result-metric {
      font-size: 18px;
   }

   .portfolio-result-card h3 {
      font-size: 12px;
   }

   .portfolio-result-description {
      font-size: 10px;
   }

   .portfolio-image-modal-content {
      max-width: 98vw;
      max-height: 80vh;
   }

   .portfolio-image-modal-image {
      max-height: 75vh;
   }

   .portfolio-image-modal-close {
      top: -15px;
      right: -15px;
      width: 26px;
      height: 26px;
      font-size: 11px;
   }

   .star {
      font-size: 14px;
      min-height: 28px;
      min-width: 28px;
   }
}
.clean-portfolio-wrapper {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
   background: #fafbfc;
   min-height: 100vh;
   max-width: 1500px;
   margin: 0 auto;
}

.clean-portfolio-container {
   max-width: 1500px;
   margin: 0 auto;
   padding: 0 24px;
}

.clean-portfolio-breadcrumb {
   background: #ffffff;
   border-bottom: 1px solid #e9ecef;
   padding: 16px 0;
}

.clean-portfolio-back-btn {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   color: #6b7684;
   text-decoration: none;
   font-size: 15px;
   font-weight: 500;
   transition: color 0.2s ease;
   min-height: 44px;
}

.clean-portfolio-back-btn:hover {
   color: #3182f6;
   text-decoration: none;
}

.clean-portfolio-admin-panel {
   background: #fff3cd;
   border: 1px solid #ffeaa7;
   border-radius: 8px;
   margin-bottom: 24px;
}

.clean-portfolio-admin-content {
   padding: 15px;
}

.clean-portfolio-admin-header {
   font-size: 14px;
   font-weight: 600;
   color: #856404;
   margin-bottom: 10px;
}

.clean-portfolio-admin-controls {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
}

.clean-portfolio-admin-btn {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 8px 16px;
   border-radius: 6px;
   text-decoration: none;
   font-size: 14px;
   font-weight: 500;
   transition: all 0.2s ease;
   border: none;
   cursor: pointer;
   min-height: 44px;
}

.clean-portfolio-admin-edit {
   background: #10b981;
   color: #ffffff;
}

.clean-portfolio-admin-edit:hover {
   background: #059669;
   color: #ffffff;
   text-decoration: none;
}

.clean-portfolio-admin-delete {
   background: #ef4444;
   color: #ffffff;
}

.clean-portfolio-admin-delete:hover {
   background: #dc2626;
}

.clean-portfolio-main {
   padding: 32px 0 80px;
}

.clean-portfolio-layout {
   display: grid;
   grid-template-columns: 1fr 360px;
   gap: 48px;
   align-items: start;
}

.clean-portfolio-content-area {
   background: #ffffff;
   border-radius: 16px;
   padding: 32px;
   border: 1px solid #e9ecef;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
   min-width: 0;
}

.clean-portfolio-gallery {
   margin-bottom: 40px;
}

.clean-portfolio-main-image-wrapper {
   position: relative;
   aspect-ratio: 16/10;
   border-radius: 12px;
   overflow: hidden;
   background: #f8f9fa;
   margin-bottom: 16px;
   border: 1px solid #e9ecef;
}

.clean-portfolio-main-image {
   width: 100%;
   height: 100%;
   object-fit: cover;
   cursor: pointer;
   transition: transform 0.3s ease;
}

.clean-portfolio-main-image:hover {
   transform: scale(1.02);
}

.clean-portfolio-zoom-btn {
   position: absolute;
   top: 16px;
   right: 16px;
   background: rgba(0, 0, 0, 0.7);
   color: #ffffff;
   border: none;
   padding: 8px 12px;
   border-radius: 6px;
   font-size: 13px;
   cursor: pointer;
   display: flex;
   align-items: center;
   gap: 6px;
   opacity: 0;
   transition: all 0.2s ease;
   min-height: 44px;
}

.clean-portfolio-main-image-wrapper:hover .clean-portfolio-zoom-btn {
   opacity: 1;
}

.clean-portfolio-zoom-btn:hover {
   background: rgba(0, 0, 0, 0.8);
}

.clean-portfolio-thumbnail-list {
   display: flex;
   gap: 12px;
   overflow-x: auto;
   padding: 4px;
   scrollbar-width: thin;
}

.clean-portfolio-thumbnail-list::-webkit-scrollbar {
   height: 6px;
}

.clean-portfolio-thumbnail-list::-webkit-scrollbar-thumb {
   background: rgba(0, 0, 0, 0.2);
   border-radius: 3px;
}

.clean-portfolio-thumbnail {
   flex-shrink: 0;
   width: 80px;
   height: 80px;
   border-radius: 8px;
   overflow: hidden;
   cursor: pointer;
   border: 2px solid transparent;
   transition: all 0.2s ease;
}

.clean-portfolio-thumbnail-active {
   border-color: #3182f6;
}

.clean-portfolio-thumbnail img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.clean-portfolio-thumbnail:hover {
   border-color: #3182f6;
   transform: scale(1.05);
}

.clean-portfolio-tabs {
   margin-bottom: 40px;
}

.clean-portfolio-tab-header {
   display: flex;
   border-bottom: 1px solid #e9ecef;
   margin-bottom: 24px;
   overflow-x: auto;
   scrollbar-width: none;
}

.clean-portfolio-tab-header::-webkit-scrollbar {
   display: none;
}

.clean-portfolio-tab-btn {
   padding: 16px 24px;
   background: none;
   border: none;
   font-size: 15px;
   font-weight: 500;
   color: #6b7684;
   cursor: pointer;
   border-bottom: 2px solid transparent;
   transition: all 0.2s ease;
   white-space: nowrap;
   min-height: 44px;
}

.clean-portfolio-tab-btn:hover {
   color: #3182f6;
}

.clean-portfolio-tab-active {
   color: #3182f6;
   border-bottom-color: #3182f6;
   font-weight: 600;
}

.clean-portfolio-tab-panel {
   display: none;
}

.clean-portfolio-tab-panel-active {
   display: block;
}

.clean-portfolio-description {
   font-size: 16px;
   line-height: 1.7;
   color: #374151;
   word-wrap: break-word;
   overflow-wrap: break-word;
}

.clean-portfolio-description h1,
.clean-portfolio-description h2,
.clean-portfolio-description h3,
.clean-portfolio-description h4 {
   margin-top: 24px;
   margin-bottom: 12px;
   color: #191f28;
}

.clean-portfolio-description p {
   margin-bottom: 16px;
}

.clean-portfolio-description ul,
.clean-portfolio-description ol {
   margin-bottom: 16px;
   padding-left: 20px;
}

.clean-portfolio-description li {
   margin-bottom: 8px;
}

.clean-portfolio-description img {
   max-width: 100%;
   height: auto;
   border-radius: 8px;
   margin: 16px 0;
}

.clean-portfolio-info-grid {
   display: grid;
   gap: 16px;
}

.clean-portfolio-info-item {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 16px;
   background: #f8f9fa;
   border-radius: 8px;
   border: 1px solid #e9ecef;
   flex-wrap: wrap;
   gap: 8px;
}

.clean-portfolio-tags-item {
   align-items: flex-start;
}

.clean-portfolio-info-label {
   font-size: 14px;
   font-weight: 600;
   color: #6b7684;
   flex-shrink: 0;
}

.clean-portfolio-info-value {
   font-size: 15px;
   color: #191f28;
   font-weight: 500;
   word-wrap: break-word;
}

.clean-portfolio-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
}

.clean-portfolio-tag {
   background: #3182f6;
   color: #ffffff;
   padding: 4px 12px;
   border-radius: 12px;
   font-size: 13px;
   font-weight: 500;
}

.clean-portfolio-faq-list {
   display: flex;
   flex-direction: column;
   gap: 20px;
}

.clean-portfolio-faq-item {
   padding: 20px;
   background: #f8f9fa;
   border-radius: 8px;
   border: 1px solid #e9ecef;
}

.clean-portfolio-faq-item h4 {
   font-size: 16px;
   font-weight: 600;
   color: #191f28;
   margin-bottom: 8px;
}

.clean-portfolio-faq-item p {
   font-size: 14px;
   color: #6b7684;
   line-height: 1.5;
   margin: 0;
}

.clean-portfolio-policy-content {
   display: flex;
   flex-direction: column;
   gap: 24px;
}

.clean-portfolio-policy-section h4 {
   font-size: 16px;
   font-weight: 600;
   color: #191f28;
   margin-bottom: 8px;
}

.clean-portfolio-policy-section p {
   font-size: 15px;
   color: #6b7684;
   line-height: 1.6;
   margin: 0;
}

.clean-portfolio-policy-section ul {
   margin: 8px 0 0 0;
   padding-left: 20px;
}

.clean-portfolio-policy-section li {
   font-size: 15px;
   color: #6b7684;
   line-height: 1.6;
   margin-bottom: 4px;
}

.clean-portfolio-section-title {
   font-size: 20px;
   font-weight: 700;
   color: #191f28;
   margin-bottom: 20px;
}

.clean-portfolio-purchase-sites {
   margin-bottom: 40px;
}

.clean-portfolio-sites-slider {
   display: flex;
   gap: 20px;
   overflow-x: auto;
   padding: 10px 0;
   scrollbar-width: thin;
}

.clean-portfolio-sites-slider::-webkit-scrollbar {
   height: 6px;
}

.clean-portfolio-sites-slider::-webkit-scrollbar-thumb {
   background: rgba(0, 0, 0, 0.2);
   border-radius: 3px;
}

.clean-portfolio-site-card-slider {
   flex: 0 0 280px;
   background: #fff;
   border-radius: 12px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   overflow: hidden;
   display: flex;
   flex-direction: column;
}

.clean-portfolio-site-card-image {
   width: 100%;
   height: 160px;
   background-size: cover;
   background-position: center;
   background-color: #f8f9fa;
}

.clean-portfolio-site-card-body {
   padding: 16px;
   flex: 1;
   display: flex;
   flex-direction: column;
}

.clean-portfolio-site-card-category {
   font-size: 13px;
   color: #3182f6;
   margin-bottom: 8px;
   text-transform: uppercase;
   font-weight: 600;
}

.clean-portfolio-site-card-title {
   font-size: 18px;
   font-weight: 700;
   margin: 0 0 8px;
   color: #191f28;
}

.clean-portfolio-site-card-desc {
   font-size: 14px;
   color: #6b7684;
   flex: 1;
   margin-bottom: 16px;
   line-height: 1.4;
}

.clean-portfolio-site-card-btn {
   display: block;
   text-align: center;
   padding: 10px 0;
   background: #3182f6;
   color: #fff;
   border-radius: 8px;
   text-decoration: none;
   font-weight: 600;
   transition: background 0.2s;
   min-height: 44px;
   display: flex;
   align-items: center;
   justify-content: center;
}

.clean-portfolio-site-card-btn:hover {
   background: #2563eb;
   color: #fff;
   text-decoration: none;
}

.clean-portfolio-empty-state {
   text-align: center;
   padding: 60px 20px;
   color: #9ca3af;
}

.clean-portfolio-empty-icon {
   margin-bottom: 16px;
   color: #d1d5db;
   display: flex;
   justify-content: center;
}

.clean-portfolio-empty-state h4 {
   font-size: 18px;
   font-weight: 600;
   color: #6b7684;
   margin: 0 0 8px 0;
}

.clean-portfolio-empty-state p {
   font-size: 14px;
   color: #9ca3af;
   margin: 0;
}

.clean-portfolio-related-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
   gap: 20px;
}

.clean-portfolio-related-card {
   background: #ffffff;
   border-radius: 12px;
   overflow: hidden;
   border: 1px solid #e9ecef;
   transition: all 0.2s ease;
   text-decoration: none;
   color: inherit;
}

.clean-portfolio-related-card:hover {
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
   transform: translateY(-4px);
   text-decoration: none;
   color: inherit;
}

.clean-portfolio-related-image {
   height: 180px;
   background: #f8f9fa;
}

.clean-portfolio-related-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.clean-portfolio-related-content {
   padding: 16px;
}

.clean-portfolio-related-category {
   font-size: 12px;
   color: #3182f6;
   font-weight: 600;
   text-transform: uppercase;
   margin-bottom: 8px;
}

.clean-portfolio-related-title {
   font-size: 14px;
   font-weight: 600;
   color: #191f28;
   margin: 0 0 12px 0;
   line-height: 1.3;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

.clean-portfolio-related-meta {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.clean-portfolio-related-date {
   font-size: 12px;
   color: #9ca3af;
}

.clean-portfolio-related-rating {
   display: flex;
   align-items: center;
   gap: 4px;
   font-size: 12px;
}

.clean-portfolio-related-stars {
   color: #fbbf24;
}

.clean-portfolio-sidebar {
   position: sticky;
   top: 32px;
}

.clean-portfolio-info-card {
   background: #ffffff;
   border-radius: 16px;
   padding: 32px;
   border: 1px solid #e9ecef;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.clean-portfolio-category {
   display: inline-block;
   background: rgba(49, 130, 246, 0.1);
   color: #3182f6;
   padding: 6px 12px;
   border-radius: 12px;
   font-size: 13px;
   font-weight: 600;
   margin-bottom: 16px;
}

.clean-portfolio-title {
   font-size: 24px;
   font-weight: 700;
   color: #191f28;
   line-height: 1.3;
   margin: 0 0 20px 0;
   word-wrap: break-word;
}

.clean-portfolio-rating-section {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 24px;
   flex-wrap: wrap;
   gap: 12px;
}

.clean-portfolio-rating {
   display: flex;
   align-items: center;
   gap: 8px;
}

.clean-portfolio-stars {
   color: #fbbf24;
   font-size: 18px;
}

.clean-portfolio-rating-text {
   font-size: 14px;
   color: #6b7684;
   font-weight: 500;
}

.clean-portfolio-wishlist {
   background: none;
   border: none;
   color: #9ca3af;
   cursor: pointer;
   padding: 8px;
   border-radius: 8px;
   transition: all 0.2s ease;
   min-height: 44px;
   min-width: 44px;
}

.clean-portfolio-wishlist:hover {
   color: #ef4444;
   background: rgba(239, 68, 68, 0.1);
}

.clean-portfolio-wishlist.clean-portfolio-wishlist-active {
   color: #ef4444;
}

.clean-portfolio-wishlist-active .clean-portfolio-heart {
   fill: currentColor;
}

.clean-portfolio-features {
   margin-bottom: 32px;
}

.clean-portfolio-feature {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 12px 0;
   color: #374151;
   font-size: 14px;
   font-weight: 500;
}

.clean-portfolio-feature svg {
   color: #10b981;
   flex-shrink: 0;
}

.clean-portfolio-actions {
   margin-bottom: 32px;
}

.clean-portfolio-primary-btn,
.clean-portfolio-secondary-btn {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding: 16px 24px;
   border-radius: 12px;
   font-size: 16px;
   font-weight: 600;
   border: none;
   cursor: pointer;
   transition: all 0.2s ease;
   margin-bottom: 12px;
   min-height: 56px;
}

.clean-portfolio-primary-btn {
   background: #3182f6;
   color: #ffffff;
}

.clean-portfolio-primary-btn:hover {
   background: #2563eb;
   transform: translateY(-1px);
   box-shadow: 0 8px 20px rgba(49, 130, 246, 0.3);
}

.clean-portfolio-secondary-btn {
   background: #f8f9fa;
   color: #6b7684;
   border: 1px solid #e9ecef;
}

.clean-portfolio-secondary-btn:hover {
   background: #e9ecef;
   color: #495057;
}

.clean-portfolio-cert {
   display: flex;
   align-items: center;
   gap: 16px;
   padding: 20px;
   background: linear-gradient(135deg, #d1fae5, #ecfdf5);
   border: 1px solid #a7f3d0;
   border-radius: 12px;
}

.clean-portfolio-cert-icon {
   width: 32px;
   height: 32px;
   background: #10b981;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #ffffff;
   flex-shrink: 0;
}

.clean-portfolio-cert-content {
   display: flex;
   flex-direction: column;
   gap: 4px;
   min-width: 0;
}

.clean-portfolio-cert-content strong {
   font-size: 14px;
   font-weight: 600;
   color: #065f46;
}

.clean-portfolio-cert-content span {
   font-size: 13px;
   color: #047857;
}

.clean-portfolio-mobile-sticky {
   display: none;
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
   background: #ffffff;
   border-top: 1px solid #e9ecef;
   padding: 16px 24px;
   box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
   z-index: 1000;
}

.clean-portfolio-mobile-sticky-content {
   display: flex;
   justify-content: space-between;
   align-items: center;
   max-width: 1200px;
   margin: 0 auto;
   flex-wrap: wrap;
   gap: 12px;
}

.clean-portfolio-mobile-title {
   font-size: 16px;
   font-weight: 600;
   color: #191f28;
   margin-bottom: 4px;
}

.clean-portfolio-mobile-rating {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 4px;
   font-size: 14px;
}

.clean-portfolio-mobile-stars {
   color: #fbbf24;
}

.clean-portfolio-mobile-actions {
   display: flex;
   gap: 12px;
   flex-wrap: wrap;
}

.clean-portfolio-mobile-contact,
.clean-portfolio-mobile-purchase {
   padding: 12px 20px;
   border-radius: 8px;
   font-size: 14px;
   font-weight: 600;
   border: none;
   cursor: pointer;
   transition: all 0.2s ease;
   min-height: 44px;
}

.clean-portfolio-mobile-contact {
   background: #f8f9fa;
   color: #6b7684;
   border: 1px solid #e9ecef;
}

.clean-portfolio-mobile-contact:hover {
   background: #e9ecef;
}

.clean-portfolio-mobile-purchase {
   background: #3182f6;
   color: #ffffff;
}

.clean-portfolio-mobile-purchase:hover {
   background: #2563eb;
}

.clean-portfolio-modal {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 10000;
}

.clean-portfolio-modal-backdrop {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.9);
   backdrop-filter: blur(4px);
}

.clean-portfolio-modal-content {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   max-width: 95%;
   max-height: 95%;
   border-radius: 12px;
   overflow: hidden;
}

.clean-portfolio-modal-content img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   max-height: 90vh;
}

.clean-portfolio-modal-close {
   position: absolute;
   top: 20px;
   right: 20px;
   background: rgba(0, 0, 0, 0.7);
   color: #ffffff;
   border: none;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   cursor: pointer;
   z-index: 10001;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.2s ease;
}

.clean-portfolio-modal-close:hover {
   background: rgba(0, 0, 0, 0.9);
}

.clean-portfolio-review-write-trigger {
   text-align: center;
   margin-bottom: 32px;
}

.clean-portfolio-review-write-btn {
   background: #3182f6;
   color: white;
   border: none;
   padding: 16px 32px;
   border-radius: 12px;
   font-size: 16px;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.2s ease;
   box-shadow: 0 4px 12px rgba(49, 130, 246, 0.3);
   min-height: 56px;
}

.clean-portfolio-review-write-btn:hover {
   background: #2c5aa0;
   transform: translateY(-2px);
   box-shadow: 0 8px 20px rgba(49, 130, 246, 0.4);
}

.clean-portfolio-review-section {
   padding: 20px 0;
}

.clean-portfolio-review-write {
   background: #f8f9fa;
   padding: 24px;
   border-radius: 12px;
   margin-bottom: 32px;
   border: 1px solid #e9ecef;
   animation: slideDown 0.3s ease;
}

@keyframes slideDown {
   from {
      opacity: 0;
      transform: translateY(-10px);
   }
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

.clean-portfolio-review-write h4 {
   margin: 0 0 20px 0;
   color: #191f28;
   font-size: 18px;
   font-weight: 600;
}

.clean-portfolio-rating-input {
   margin-bottom: 16px;
}

.clean-portfolio-rating-input label {
   display: block;
   margin-bottom: 8px;
   color: #495057;
   font-weight: 500;
}

.clean-portfolio-star-rating {
   display: flex;
   gap: 4px;
}

.star {
   font-size: 24px;
   color: #ddd;
   cursor: pointer;
   transition: color 0.2s ease;
   min-height: 44px;
   min-width: 44px;
   display: flex;
   align-items: center;
   justify-content: center;
}

.star.selected,
.star.highlight {
   color: #ffc107;
}

.clean-portfolio-review-textarea textarea {
   width: 100%;
   border: 1px solid #e9ecef;
   border-radius: 8px;
   padding: 12px;
   font-size: 14px;
   line-height: 1.5;
   resize: vertical;
   min-height: 100px;
   box-sizing: border-box;
   font-family: inherit;
}

.clean-portfolio-review-textarea textarea:focus {
   outline: none;
   border-color: #3182f6;
   box-shadow: 0 0 0 3px rgba(49, 130, 246, 0.1);
}

.clean-portfolio-review-actions {
   display: flex;
   gap: 12px;
   flex-wrap: wrap;
}

.clean-portfolio-review-submit {
   background: #3182f6;
   color: white;
   border: none;
   padding: 12px 24px;
   border-radius: 8px;
   font-weight: 600;
   cursor: pointer;
   transition: background 0.2s ease;
   min-height: 44px;
}

.clean-portfolio-review-submit:hover {
   background: #2c5aa0;
}

.clean-portfolio-review-cancel {
   background: #6c757d;
   color: white;
   border: none;
   padding: 12px 24px;
   border-radius: 8px;
   font-weight: 600;
   cursor: pointer;
   transition: background 0.2s ease;
   min-height: 44px;
}

.clean-portfolio-review-cancel:hover {
   background: #5a6268;
}

.clean-portfolio-review-list h4 {
   margin: 0 0 20px 0;
   color: #191f28;
   font-size: 18px;
   font-weight: 600;
}

.clean-portfolio-review-item {
   border: 1px solid #e9ecef;
   border-radius: 12px;
   padding: 20px;
   margin-bottom: 16px;
   background: white;
}

.clean-portfolio-review-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 12px;
   flex-wrap: wrap;
   gap: 8px;
}

.clean-portfolio-review-author {
   display: flex;
   align-items: center;
   gap: 12px;
}

.clean-portfolio-review-stars .star.active {
   color: #ffc107;
}

.clean-portfolio-review-date {
   color: #9ca3af;
   font-size: 14px;
}

.clean-portfolio-review-content {
   color: #495057;
   line-height: 1.6;
   word-wrap: break-word;
}

.portfolio-container-main {
   font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
   background-color: #fafafa;
   color: #191f28;
   line-height: 1.6;
   max-width: 100%;
   margin: 0 auto;
   padding: 40px 20px;
}

.portfolio-header-section {
   text-align: center;
   margin-bottom: 60px;
}

.portfolio-tag-group {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 8px;
   margin-bottom: 24px;
}

.portfolio-tag-item {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   color: white;
   padding: 6px 12px;
   border-radius: 16px;
   font-size: 15px;
   font-weight: 500;
}

.portfolio-main-title {
   font-size: 36px;
   font-weight: 800;
   line-height: 1.3;
   margin-bottom: 16px;
   color: #191f28;
   word-wrap: break-word;
}

.portfolio-title-emoji {
   display: block;
   font-size: 48px;
   margin-bottom: 8px;
}

.portfolio-title-highlight {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}

.portfolio-subtitle {
   font-size: 18px;
   color: #6b7684;
   font-weight: 400;
}

.portfolio-card-wrapper {
   background: white;
   border-radius: 16px;
   padding: 32px;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
   margin-bottom: 32px;
}

.portfolio-section-badge {
   display: inline-block;
   padding: 6px 12px;
   border-radius: 12px;
   font-size: 15px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   margin-bottom: 16px;
}

.portfolio-section-badge-problem {
   background: #fef2f2;
   color: #dc2626;
}

.portfolio-section-badge-solution {
   background: #ecfdf5;
   color: #059669;
}

.portfolio-section-badge-results {
   background: #eff6ff;
   color: #2563eb;
}

.portfolio-section-badge-features {
   background: #fefce8;
   color: #ca8a04;
}

.portfolio-section-badge-faq {
   background: #f5f3ff;
   color: #7c3aed;
}

.portfolio-section-title {
   font-size: 24px;
   font-weight: 700;
   margin-bottom: 24px;
   color: #191f28;
}

.portfolio-problem-list {
   display: flex;
   flex-direction: column;
   gap: 20px;
}

.portfolio-problem-item {
   display: flex;
   align-items: center;
   gap: 16px;
   padding: 20px;
   background: #fafafa;
   border-radius: 12px;
}

.portfolio-problem-icon {
   font-size: 24px;
   flex-shrink: 0;
}

.portfolio-problem-content h3 {
   font-size: 16px;
   font-weight: 600;
   margin-bottom: 4px;
   color: #191f28;
}

.portfolio-problem-content p {
   font-size: 17px;
   color: #6b7684;
}

.portfolio-comparison-section {
   margin-bottom: 32px;
}

.portfolio-before-after-container {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 24px;
   background: white;
   border-radius: 16px;
   padding: 32px;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.portfolio-before-section,
.portfolio-after-section {
   display: flex;
   flex-direction: column;
   height: 100%;
   min-width: 0;
}

.portfolio-image-container {
   flex: 1;
   display: flex;
   align-items: center;
   margin-bottom: 16px;
}

.portfolio-comparison-description {
   margin-top: auto;
}

.portfolio-comparison-label {
   display: inline-block;
   padding: 8px 16px;
   border-radius: 20px;
   font-size: 17px;
   font-weight: 600;
   margin-bottom: 16px;
}

.portfolio-comparison-label-before {
   background: #fef2f2;
   color: #dc2626;
}

.portfolio-comparison-label-after {
   background: #ecfdf5;
   color: #059669;
}

.portfolio-comparison-image {
   width: 100%;
   border-radius: 8px;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
   max-width: 100%;
   height: auto;
}

.portfolio-comparison-description {
   display: flex;
   flex-direction: column;
   gap: 8px;
   margin-top: auto;
}

.portfolio-comparison-item {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 15px;
   padding: 8px 0;
}

.portfolio-comparison-item-negative {
   color: #dc2626;
}

.portfolio-comparison-item-positive {
   color: #059669;
}

.portfolio-comparison-icon {
   font-size: 14px;
   flex-shrink: 0;
}

.portfolio-feature-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: 20px;
}

.portfolio-feature-card {
   text-align: center;
   padding: 24px 16px;
   background: #fafafa;
   border-radius: 12px;
   transition: transform 0.2s ease;
}

.portfolio-feature-card:hover {
   transform: translateY(-2px);
}

.portfolio-feature-icon {
   font-size: 32px;
   margin-bottom: 12px;
}

.portfolio-feature-card h3 {
   font-size: 18px;
   font-weight: 600;
   margin-bottom: 8px;
   color: #191f28;
}

.portfolio-feature-card p {
   font-size: 16px;
   color: #6b7684;
}

.portfolio-results-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: 20px;
   margin-bottom: 32px;
}

.portfolio-result-card {
   text-align: center;
   padding: 24px;
   background: white;
   border: 2px solid #e5e7eb;
   border-radius: 16px;
   color: #191f28;
   transition: all 0.3s ease;
   position: relative;
   overflow: hidden;
}

.portfolio-result-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 4px;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.portfolio-result-card:hover {
   border-color: #667eea;
   transform: translateY(-2px);
   box-shadow: 0 8px 25px rgba(102, 126, 234, 0.15);
}

.portfolio-result-metric {
   font-size: 36px;
   margin-bottom: 12px;
}

.portfolio-result-card h3 {
   font-size: 16px;
   font-weight: 600;
   margin-bottom: 4px;
   color: #191f28;
}

.portfolio-result-description {
   font-size: 14px;
   font-weight: 500;
   color: #6b7684;
}

.portfolio-key-message {
   background: linear-gradient(135deg, #fef3c7, #fde68a);
   padding: 24px;
   border-radius: 12px;
   border-left: 4px solid #f59e0b;
}

.portfolio-key-message h3 {
   font-size: 20px;
   font-weight: 600;
   margin-bottom: 8px;
   color: #92400e;
}

.portfolio-key-message p {
   font-size: 16px;
   color: #78350f;
}

.portfolio-features-list {
   display: flex;
   flex-direction: column;
   gap: 12px;
}

.portfolio-feature-list-item {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 12px 0;
   font-size: 18px;
   font-weight: 500;
}

.portfolio-feature-check {
   color: #059669;
   font-size: 16px;
   flex-shrink: 0;
}

.portfolio-faq-list {
   display: flex;
   flex-direction: column;
   gap: 16px;
}

.portfolio-faq-item {
   border: 1px solid #e5e7eb;
   border-radius: 12px;
   overflow: hidden;
}

.portfolio-faq-question {
   background: #f9fafb;
   padding: 16px 20px;
   cursor: pointer;
   transition: background-color 0.2s ease;
   min-height: 44px;
   display: flex;
   align-items: center;
}

.portfolio-faq-question:hover {
   background: #f3f4f6;
}

.portfolio-faq-question h3 {
   font-size: 18px;
   font-weight: 600;
   color: #374151;
}

.portfolio-faq-answer {
   padding: 16px 20px;
   background: white;
}

.portfolio-faq-answer p {
   font-size: 17px;
   color: #6b7280;
   line-height: 1.5;
}

.portfolio-cta-section {
   margin-top: 40px;
}

.portfolio-cta-card {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   color: white;
   padding: 40px 32px;
   border-radius: 20px;
   text-align: center;
}

.portfolio-cta-title {
   font-size: 24px;
   font-weight: 700;
   margin-bottom: 16px;
   color: #ddd !important;
}

.portfolio-cta-description {
   font-size: 16px;
   margin-bottom: 24px;
   opacity: 0.95;
}

.portfolio-cta-highlight {
   background: rgba(255, 255, 255, 0.15);
   padding: 16px 20px;
   border-radius: 12px;
   font-size: 16px;
   font-weight: 600;
   backdrop-filter: blur(10px);
}

.portfolio-additional-showcase {
   margin-bottom: 32px;
}

.portfolio-image-modal-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.9);
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 10000;
   opacity: 0;
   visibility: hidden;
   transition: all 0.3s ease;
}

.portfolio-image-modal-overlay.portfolio-modal-active {
   opacity: 1;
   visibility: visible;
}

.portfolio-image-modal-content {
   position: relative;
   max-width: 50%;
   max-height: 90%;
   transform: scale(1.2);
   transition: transform 0.3s ease;
}

.portfolio-image-modal-image {
   width: 100%;
   height: auto;
   border-radius: 8px;
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
   max-width: 100%;
}

.portfolio-image-modal-close {
   position: absolute;
   top: -40px;
   right: -40px;
   width: 40px;
   height: 40px;
   background: rgba(255, 255, 255, 0.9);
   border: none;
   border-radius: 50%;
   cursor: pointer;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 18px;
   font-weight: bold;
   color: #333;
   transition: all 0.2s ease;
}

.portfolio-image-modal-close:hover {
   background: white;
   transform: scale(1.1);
}

.portfolio-image-container img {
   cursor: pointer;
   transition: transform 0.2s ease, box-shadow 0.2s ease;
   max-width: 100%;
   height: auto;
}

.portfolio-image-container img:hover {
   transform: scale(1.02);
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.portfolio-delivery-example {
   background: #f8f9fa;
   padding: 24px;
   border-radius: 12px;
   margin: 20px 0;
}

.portfolio-delivery-title {
   font-size: 16px;
   font-weight: 600;
   margin-bottom: 15px;
   color: #495057;
}

.portfolio-delivery-item {
   display: flex;
   justify-content: space-between;
   margin-bottom: 12px;
   padding: 12px;
   background-color: white;
   border-radius: 8px;
   align-items: center;
   flex-wrap: wrap;
   gap: 8px;
}

.portfolio-delivery-item:last-child {
   margin-bottom: 0;
}

.portfolio-delivery-time {
   font-weight: 500;
}

.portfolio-delivery-result {
   font-weight: bold;
}

.portfolio-delivery-early {
   color: #28a745;
}

.portfolio-delivery-late {
   color: #dc3545;
}

.portfolio-timeline-container {
   display: flex;
   flex-direction: column;
   gap: 20px;
   margin-top: 20px;
}

.portfolio-timeline-item {
   display: flex;
   align-items: center;
   gap: 20px;
   padding: 20px;
   background: #f8f9fa;
   border-radius: 8px;
   border-left: 4px solid #007bff;
   flex-wrap: wrap;
}

.portfolio-timeline-time {
   font-weight: bold;
   color: #007bff;
   min-width: 100px;
   font-size: 16px;
   flex-shrink: 0;
}

.portfolio-timeline-content {
   flex: 1;
   min-width: 0;
}

.portfolio-timeline-stock {
   font-weight: bold;
   margin-bottom: 5px;
}

.portfolio-timeline-label {
   color: #666;
   margin-bottom: 10px;
}

.portfolio-timeline-bar {
   height: 10px;
   border-radius: 5px;
   width: 100%;
}

.portfolio-item-views {
   display: flex;
   align-items: center;
   gap: 4px;
   margin-top: 4px;
   font-size: 14px;
   color: #999;
}

.view-icon {
   font-size: 14px;
}

.view-count {
   font-size: 14px;
}

.clean-portfolio-content-area,
.clean-portfolio-info-card {
   animation: cleanPortfolioFadeIn 0.6s ease-out;
}

@keyframes cleanPortfolioFadeIn {
   from {
      opacity: 0;
      transform: translateY(20px);
   }
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

@media (max-width: 1200px) {
   .clean-portfolio-layout {
      grid-template-columns: 1fr;
      gap: 32px;
   }

   .clean-portfolio-sidebar {
      order: -1;
      position: static;
   }

   .clean-portfolio-sites-slider {
      gap: 16px;
   }

   .clean-portfolio-site-card-slider {
      flex: 0 0 260px;
   }
}

@media (max-width: 768px) {
   .clean-portfolio-container {
      padding: 0 12px;
   }

   .clean-portfolio-main {
      padding: 20px 0 100px;
   }

   .clean-portfolio-content-area {
      padding: 16px 12px;
      border-radius: 8px;
   }

   .clean-portfolio-info-card {
      padding: 16px 12px;
      border-radius: 8px;
   }

   .clean-portfolio-title {
      font-size: 18px;
      line-height: 1.4;
   }

   .clean-portfolio-layout {
      grid-template-columns: 1fr;
      gap: 20px;
   }

   .clean-portfolio-mobile-sticky {
      display: block;
   }

   .clean-portfolio-mobile-sticky-content {
      flex-direction: column;
      gap: 10px;
      text-align: center;
      padding: 12px 16px;
   }

   .clean-portfolio-mobile-info {
      order: 1;
      width: 100%;
   }

   .clean-portfolio-mobile-title {
      font-size: 14px;
      margin-bottom: 2px;
   }

   .clean-portfolio-mobile-rating {
      font-size: 12px;
   }

   .clean-portfolio-mobile-actions {
      order: 2;
      width: 100%;
      justify-content: center;
   }

   .clean-portfolio-mobile-contact,
   .clean-portfolio-mobile-purchase {
      flex: 1;
      max-width: 110px;
      padding: 8px 16px;
      font-size: 13px;
   }

   .clean-portfolio-related-grid {
      grid-template-columns: 1fr;
      gap: 12px;
   }

   .clean-portfolio-related-image {
      height: 325px;
   }

   .clean-portfolio-related-title {
      font-size: 13px;
   }

   .clean-portfolio-related-category {
      font-size: 11px;
   }

   .clean-portfolio-tab-header {
      border-bottom: none;
      background: #f8f9fa;
      border-radius: 8px;
      padding: 3px;
      margin-bottom: 16px;
   }

   .clean-portfolio-tab-btn {
      padding: 8px 12px;
      border-radius: 6px;
      border-bottom: none;
      font-size: 13px;
   }

   .clean-portfolio-tab-active {
      background: #ffffff;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   }

   .clean-portfolio-admin-controls {
      flex-direction: column;
      gap: 8px;
   }

   .clean-portfolio-admin-btn {
      width: 100%;
      justify-content: center;
      padding: 10px 16px;
      font-size: 13px;
   }

   .clean-portfolio-rating-section {
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
   }

   .clean-portfolio-stars {
      font-size: 16px;
   }

   .clean-portfolio-rating-text {
      font-size: 13px;
   }

   .clean-portfolio-wishlist {
      align-self: flex-end;
   }

   .clean-portfolio-sites-slider {
      gap: 10px;
   }

   .clean-portfolio-site-card-slider {
      flex: 0 0 220px;
   }

   .clean-portfolio-site-card-image {
      height: 100px;
   }

   .clean-portfolio-site-card-body {
      padding: 12px;
   }

   .clean-portfolio-site-card-title {
      font-size: 15px;
      margin-bottom: 6px;
   }

   .clean-portfolio-site-card-desc {
      font-size: 12px;
      margin-bottom: 12px;
   }

   .clean-portfolio-site-card-category {
      font-size: 11px;
      margin-bottom: 6px;
   }

   .clean-portfolio-thumbnail-list {
      gap: 6px;
   }

   .clean-portfolio-thumbnail {
      width: 50px;
      height: 50px;
   }

   .clean-portfolio-main-image-wrapper {
      aspect-ratio: 16/10;
      margin-bottom: 12px;
   }

   .clean-portfolio-zoom-btn {
      opacity: 1;
      top: 8px;
      right: 8px;
      padding: 4px 8px;
      font-size: 11px;
   }

   .clean-portfolio-info-item {
      flex-direction: column;
      align-items: flex-start;
      gap: 6px;
      padding: 12px;
   }

   .clean-portfolio-info-label {
      font-size: 12px;
   }

   .clean-portfolio-info-value {
      font-size: 13px;
   }

   .clean-portfolio-tag {
      font-size: 11px;
      padding: 3px 8px;
   }

   .clean-portfolio-description {
      font-size: 14px;
      line-height: 1.6;
   }

   .clean-portfolio-description h1,
   .clean-portfolio-description h2,
   .clean-portfolio-description h3,
   .clean-portfolio-description h4 {
      font-size: 16px;
      margin-top: 20px;
      margin-bottom: 8px;
   }

   .clean-portfolio-faq-item {
      padding: 16px;
   }

   .clean-portfolio-faq-item h4 {
      font-size: 14px;
   }

   .clean-portfolio-faq-item p {
      font-size: 13px;
   }

   .clean-portfolio-section-title {
      font-size: 18px;
      margin-bottom: 16px;
   }

   .clean-portfolio-feature {
      font-size: 13px;
      padding: 8px 0;
   }

   .clean-portfolio-primary-btn,
   .clean-portfolio-secondary-btn {
      padding: 12px 20px;
      font-size: 14px;
      margin-bottom: 10px;
   }

   .clean-portfolio-category {
      font-size: 12px;
      padding: 4px 10px;
      margin-bottom: 12px;
   }

   .clean-portfolio-cert {
      padding: 16px;
      gap: 12px;
   }

   .clean-portfolio-cert-content strong {
      font-size: 13px;
   }

   .clean-portfolio-cert-content span {
      font-size: 12px;
   }

   .clean-portfolio-review-actions {
      flex-direction: column;
      gap: 8px;
   }

   .clean-portfolio-review-submit,
   .clean-portfolio-review-cancel {
      width: 100%;
      padding: 10px 20px;
      font-size: 14px;
   }

   .clean-portfolio-star-rating {
      justify-content: center;
   }

   .star {
      font-size: 18px;
      min-height: 36px;
      min-width: 36px;
   }

   .clean-portfolio-review-write h4 {
      font-size: 16px;
      margin-bottom: 16px;
   }

   .clean-portfolio-review-list h4 {
      font-size: 16px;
      margin-bottom: 16px;
   }

   .clean-portfolio-review-item {
      padding: 16px;
   }

   .clean-portfolio-review-content {
      font-size: 14px;
   }

   .clean-portfolio-modal-content {
      max-width: 95vw;
      max-height: 85vh;
   }

   .clean-portfolio-modal-content img {
      max-height: 80vh;
      width: auto;
   }

   .clean-portfolio-modal-close {
      top: 10px;
      right: 10px;
      width: 36px;
      height: 36px;
      font-size: 18px;
   }

   .portfolio-container-main {
      padding: 16px 12px;
   }

   .portfolio-main-title {
      font-size: 24px;
      line-height: 1.3;
   }

   .portfolio-title-emoji {
      font-size: 30px;
      margin-bottom: 6px;
   }

   .portfolio-subtitle {
      font-size: 16px;
   }

   .portfolio-before-after-container {
      grid-template-columns: 1fr;
      gap: 16px;
      padding: 20px 16px;
   }

   .portfolio-card-wrapper {
      padding: 16px 12px;
      border-radius: 8px;
      margin-bottom: 24px;
   }

   .portfolio-feature-grid {
      grid-template-columns: 1fr;
      gap: 12px;
   }

   .portfolio-results-grid {
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 12px;
   }

   .portfolio-result-card {
      padding: 16px 12px;
   }

   .portfolio-result-metric {
      font-size: 24px;
      margin-bottom: 8px;
   }

   .portfolio-result-card h3 {
      font-size: 14px;
   }

   .portfolio-result-description {
      font-size: 12px;
   }

   .portfolio-cta-card {
      padding: 24px 16px;
      border-radius: 12px;
   }

   .portfolio-cta-title {
      font-size: 18px;
      margin-bottom: 12px;
   }

   .portfolio-cta-description {
      font-size: 14px;
      margin-bottom: 20px;
   }

   .portfolio-cta-highlight {
      font-size: 14px;
      padding: 12px 16px;
   }

   .portfolio-image-modal-overlay {
      padding: 20px;
   }

   .portfolio-image-modal-content {
      max-width: 90vw;
      max-height: 80vh;
      transform: scale(1);
   }

   .portfolio-image-modal-image {
      max-height: 75vh;
      width: auto;
   }

   .portfolio-image-modal-close {
      top: -25px;
      right: -25px;
      width: 30px;
      height: 30px;
      font-size: 14px;
   }

   .portfolio-timeline-item {
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
      padding: 16px;
   }

   .portfolio-timeline-time {
      min-width: auto;
      font-size: 13px;
   }

   .portfolio-timeline-stock {
      font-size: 14px;
   }

   .portfolio-timeline-label {
      font-size: 12px;
   }

   .portfolio-delivery-example {
      padding: 16px;
      margin: 16px 0;
   }

   .portfolio-delivery-title {
      font-size: 14px;
      margin-bottom: 12px;
   }

   .portfolio-delivery-item {
      flex-direction: column;
      align-items: flex-start;
      gap: 6px;
      padding: 10px;
   }

   .portfolio-delivery-time {
      font-size: 13px;
   }

   .portfolio-delivery-result {
      font-size: 13px;
   }

   .portfolio-comparison-item {
      font-size: 13px;
      padding: 6px 0;
   }

   .portfolio-comparison-label {
      font-size: 14px;
      padding: 6px 12px;
      margin-bottom: 12px;
   }

   .portfolio-section-title {
      font-size: 18px;
      margin-bottom: 16px;
   }

   .portfolio-section-badge {
      font-size: 13px;
      padding: 5px 10px;
      margin-bottom: 12px;
   }

   .portfolio-feature-card {
      padding: 16px 10px;
   }

   .portfolio-feature-icon {
      font-size: 28px;
      margin-bottom: 8px;
   }

   .portfolio-feature-card h3 {
      font-size: 15px;
      margin-bottom: 6px;
   }

   .portfolio-feature-card p {
      font-size: 13px;
   }

   .portfolio-feature-list-item {
      font-size: 14px;
      padding: 6px 0;
   }

   .portfolio-problem-item {
      padding: 16px;
      gap: 12px;
   }

   .portfolio-problem-icon {
      font-size: 20px;
   }

   .portfolio-problem-content h3 {
      font-size: 14px;
   }

   .portfolio-problem-content p {
      font-size: 13px;
   }

   .portfolio-faq-question {
      padding: 12px 16px;
   }

   .portfolio-faq-question h3 {
      font-size: 15px;
   }

   .portfolio-faq-answer {
      padding: 12px 16px;
   }

   .portfolio-faq-answer p {
      font-size: 14px;
   }

   .portfolio-key-message {
      padding: 16px;
   }

   .portfolio-key-message h3 {
      font-size: 16px;
      margin-bottom: 6px;
   }

   .portfolio-key-message p {
      font-size: 14px;
   }

   .portfolio-tag-item {
      font-size: 13px;
      padding: 5px 10px;
   }
}

@media (max-width: 480px) {
   .clean-portfolio-container {
      padding: 0 8px;
   }

   .clean-portfolio-content-area,
   .clean-portfolio-info-card {
      padding: 12px 8px;
   }

   .clean-portfolio-main {
      padding: 16px 0 100px;
   }

   .clean-portfolio-title {
      font-size: 16px;
      line-height: 1.3;
   }

   .clean-portfolio-sites-slider {
      gap: 6px;
   }

   .clean-portfolio-site-card-slider {
      flex: 0 0 180px;
   }

   .clean-portfolio-site-card-body {
      padding: 10px;
   }

   .clean-portfolio-site-card-title {
      font-size: 14px;
      margin-bottom: 4px;
   }

   .clean-portfolio-site-card-desc {
      font-size: 11px;
      margin-bottom: 10px;
   }

   .clean-portfolio-site-card-category {
      font-size: 10px;
      margin-bottom: 4px;
   }

   .clean-portfolio-site-card-image {
      height: 80px;
   }

   .clean-portfolio-related-grid {
      grid-template-columns: 1fr;
      gap: 10px;
   }

   .clean-portfolio-related-image {
      height: 200px;
   }

   .clean-portfolio-related-content {
      padding: 12px;
   }

   .clean-portfolio-related-title {
      font-size: 12px;
   }

   .clean-portfolio-related-category {
      font-size: 10px;
   }

   .clean-portfolio-thumbnail {
      width: 40px;
      height: 40px;
   }

   .clean-portfolio-thumbnail-list {
      gap: 4px;
   }

   .clean-portfolio-tab-btn {
      padding: 8px 10px;
      font-size: 12px;
   }

   .clean-portfolio-zoom-btn {
      padding: 3px 6px;
      font-size: 10px;
      top: 6px;
      right: 6px;
   }

   .clean-portfolio-mobile-sticky-content {
      padding: 8px 12px;
   }

   .clean-portfolio-mobile-title {
      font-size: 13px;
   }

   .clean-portfolio-mobile-rating {
      font-size: 11px;
   }

   .clean-portfolio-mobile-contact,
   .clean-portfolio-mobile-purchase {
      padding: 6px 12px;
      font-size: 12px;
      max-width: 100px;
   }

   .clean-portfolio-info-item {
      padding: 10px;
   }

   .clean-portfolio-info-label {
      font-size: 11px;
   }

   .clean-portfolio-info-value {
      font-size: 12px;
   }

   .clean-portfolio-tag {
      font-size: 10px;
      padding: 2px 6px;
   }

   .clean-portfolio-description {
      font-size: 13px;
   }

   .clean-portfolio-description h1,
   .clean-portfolio-description h2,
   .clean-portfolio-description h3,
   .clean-portfolio-description h4 {
      font-size: 14px;
      margin-top: 16px;
      margin-bottom: 6px;
   }

   .clean-portfolio-section-title {
      font-size: 16px;
      margin-bottom: 12px;
   }

   .clean-portfolio-category {
      font-size: 11px;
      padding: 3px 8px;
   }

   .clean-portfolio-stars {
      font-size: 14px;
   }

   .clean-portfolio-rating-text {
      font-size: 12px;
   }

   .clean-portfolio-primary-btn,
   .clean-portfolio-secondary-btn {
      padding: 10px 16px;
      font-size: 13px;
   }

   .clean-portfolio-feature {
      font-size: 12px;
      padding: 6px 0;
   }

   .clean-portfolio-modal-content {
      max-width: 98vw;
      max-height: 80vh;
   }

   .clean-portfolio-modal-content img {
      max-height: 50vh;
   }

   .clean-portfolio-modal-close {
      top: 5px;
      right: 5px;
      width: 30px;
      height: 30px;
      font-size: 16px;
   }

   .star {
      font-size: 16px;
      min-height: 32px;
      min-width: 32px;
   }

   .clean-portfolio-review-write h4,
   .clean-portfolio-review-list h4 {
      font-size: 15px;
   }

   .clean-portfolio-review-submit,
   .clean-portfolio-review-cancel {
      padding: 8px 16px;
      font-size: 13px;
   }

   .portfolio-container-main {
      padding: 12px 8px;
   }

   .portfolio-main-title {
      font-size: 20px;
      line-height: 1.2;
   }

   .portfolio-title-emoji {
      font-size: 26px;
      margin-bottom: 4px;
   }

   .portfolio-subtitle {
      font-size: 14px;
   }

   .portfolio-card-wrapper {
      padding: 12px 8px;
      margin-bottom: 20px;
   }

   .portfolio-results-grid {
      grid-template-columns: 1fr;
      gap: 10px;
   }

   .portfolio-result-card {
      padding: 12px 8px;
   }

   .portfolio-result-metric {
      font-size: 20px;
      margin-bottom: 6px;
   }

   .portfolio-result-card h3 {
      font-size: 13px;
   }

   .portfolio-result-description {
      font-size: 11px;
   }

   .portfolio-cta-card {
      padding: 20px 12px;
   }

   .portfolio-cta-title {
      font-size: 16px;
      margin-bottom: 10px;
   }

   .portfolio-cta-description {
      font-size: 13px;
      margin-bottom: 16px;
   }

   .portfolio-cta-highlight {
      font-size: 13px;
      padding: 10px 12px;
   }

   .portfolio-before-after-container {
      padding: 16px 12px;
      gap: 12px;
   }

   .portfolio-comparison-label {
      font-size: 13px;
      padding: 5px 10px;
      margin-bottom: 10px;
   }

   .portfolio-comparison-description {
      gap: 4px;
   }

   .portfolio-comparison-item {
      font-size: 12px;
      padding: 4px 0;
   }

   .portfolio-section-title {
      font-size: 16px;
      margin-bottom: 12px;
   }

   .portfolio-section-badge {
      font-size: 12px;
      padding: 4px 8px;
      margin-bottom: 10px;
   }

   .portfolio-feature-card {
      padding: 12px 8px;
   }

   .portfolio-feature-icon {
      font-size: 24px;
      margin-bottom: 6px;
   }

   .portfolio-feature-card h3 {
      font-size: 14px;
      margin-bottom: 4px;
   }

   .portfolio-feature-card p {
      font-size: 12px;
   }

   .portfolio-feature-list-item {
      font-size: 13px;
      padding: 4px 0;
   }

   .portfolio-problem-item {
      padding: 12px;
      gap: 10px;
   }

   .portfolio-problem-icon {
      font-size: 18px;
   }

   .portfolio-problem-content h3 {
      font-size: 13px;
   }

   .portfolio-problem-content p {
      font-size: 12px;
   }

   .portfolio-faq-question {
      padding: 10px 12px;
   }

   .portfolio-faq-question h3 {
      font-size: 14px;
   }

   .portfolio-faq-answer {
      padding: 10px 12px;
   }

   .portfolio-faq-answer p {
      font-size: 13px;
   }

   .portfolio-key-message {
      padding: 12px;
   }

   .portfolio-key-message h3 {
      font-size: 15px;
      margin-bottom: 4px;
   }

   .portfolio-key-message p {
      font-size: 13px;
   }

   .portfolio-tag-item {
      font-size: 12px;
      padding: 4px 8px;
   }

   .portfolio-image-modal-overlay {
      padding: 10px;
   }

   .portfolio-image-modal-content {
      max-width: 95vw;
      max-height: 75vh;
   }

   .portfolio-image-modal-image {
      max-height: 70vh;
   }

   .portfolio-image-modal-close {
      top: -20px;
      right: -20px;
      width: 28px;
      height: 28px;
      font-size: 12px;
   }

   .portfolio-timeline-item {
      padding: 12px;
      gap: 6px;
   }

   .portfolio-timeline-time {
      font-size: 12px;
   }

   .portfolio-timeline-stock {
      font-size: 13px;
   }

   .portfolio-timeline-label {
      font-size: 11px;
   }

   .portfolio-delivery-example {
      padding: 12px;
      margin: 12px 0;
   }

   .portfolio-delivery-title {
      font-size: 13px;
      margin-bottom: 8px;
   }

   .portfolio-delivery-item {
      padding: 8px;
   }

   .portfolio-delivery-time,
   .portfolio-delivery-result {
      font-size: 12px;
   }
}