/* ===============================
   Golden Turtle - Lite Theme (Content only)
   - No header/footer edits
   - No text edits
   - Tighten spacing on home/category
   - Add gentle effects to boxes & buttons
   =============================== */

/* ---- Spacing: home & category ---- */
main .section,
main .page-section,
main .content-section,
main [class*="section"]{
  padding-top: clamp(12px, 2.2vw, 20px);
  padding-bottom: clamp(12px, 2.2vw, 20px);
}

main .grid, 
main [class*="grid"],
main .cards, 
main [class*="cards"]{
  gap: clamp(10px, 2vw, 18px);
}

/* ---- Cards/Boxes (content only) ---- */
main .card, 
main .box, 
main .item, 
main .category-card,
main .product-card,
main [class*="card"],
main [class*="box"],
main [class*="item"]{
  border-radius: 12px;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background-color .16s ease;
  will-change: transform;
}
@media (hover:hover){
  main .card:hover, 
  main .box:hover, 
  main .item:hover,
  main .category-card:hover,
  main .product-card:hover,
  main [class*="card"]:hover,
  main [class*="box"]:hover,
  main [class*="item"]:hover{
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,.06);
  }
}
@media (hover:none){
  main .card:active, 
  main .box:active, 
  main .item:active{
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(0,0,0,.05);
  }
}

/* ---- Images inside boxes ---- */
main .card img, 
main .box img, 
main .item img{
  border-radius: 10px;
}

/* ---- Buttons (content only) ---- */
main .btn, 
main a.button, 
main button, 
main input[type=submit], 
main input[type=button]{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:40px; padding:10px 16px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.05);
  font-weight: 700;
  transition: transform .14s ease, box-shadow .14s ease, color .14s ease, border-color .14s ease, background-color .14s ease;
  cursor:pointer;
}
@media (hover:hover){
  main .btn:hover, 
  main a.button:hover, 
  main button:hover, 
  main input[type=submit]:hover, 
  main input[type=button]:hover{
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(0,0,0,.06);
    border-color: rgba(0,0,0,.12);
  }
}

/* ---- Keep header/footer untouched ---- */
header, header *, footer, footer *{
  /* no overrides here */
}


/* ==== Home hero bottom spacing tighten (do not touch content/header/footer) ==== */
.hero + .vision-section{ padding-top: clamp(14px, 2vw, 28px) !important; }
.hero{ margin-bottom: 0 !important; } /* ensure no extra gap */

/* ==== Subpage left-top page title color to brand (골든터틀컴퍼니 색상) ==== */
main.wrap.page > h1{
  color: var(--gt-brown) !important;   /* matches .brand-text color */
}

/* Keep hero h1 unchanged */
.hero .hero-overlay h1{ color: inherit !important; }



/* =========================================================
   Home buttons & spacing tune (content-only; header/footer untouched)
   ========================================================= */

/* 1) MAIN (HOME) BUTTON EFFECTS - broader selector coverage */
main a.button, 
main .button, 
main .btn, 
main .btn-primary, 
main .btn-secondary, 
main .cta, 
main .cta a,
main .link-btn,
main .action-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.05);
  font-weight: 700;
  transition: transform .16s ease, box-shadow .16s ease, color .16s ease, border-color .16s ease, background-color .16s ease;
  cursor: pointer;
}
@media (hover:hover){
  main a.button:hover, 
  main .button:hover, 
  main .btn:hover, 
  main .btn-primary:hover, 
  main .btn-secondary:hover, 
  main .cta:hover, 
  main .cta a:hover,
  main .link-btn:hover,
  main .action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(0,0,0,.06);
    border-color: rgba(0,0,0,.12);
  }
}
@media (hover:none){
  main a.button:active, main .button:active, main .btn:active, main .cta:active, main .cta a:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(0,0,0,.05);
  }
}

/* 2) HOME SPACING REDUCTION BETWEEN KEY SECTIONS */
/* Hero -> Vision */
.hero + .vision-section { 
  margin-top: 0 !important; 
  padding-top: clamp(8px, 1.6vw, 16px) !important; 
}
/* Vision -> Core Values */
.vision-section + .core-values,
.vision-section + .values,
.vision-section + .value-section {
  margin-top: 0 !important; 
  padding-top: clamp(8px, 1.6vw, 16px) !important;
}
/* Core Values -> Services (사업영역) */
.core-values + .services,
.values + .services,
.core-values + .service-section,
.values + .service-section {
  margin-top: 0 !important; 
  padding-top: clamp(8px, 1.6vw, 16px) !important;
}
/* Services -> Performance (주요성과) */
.services + .performance-section,
.service-section + .performance-section,
.services + .performance,
.services + .highlights,
.services + .results {
  margin-top: 0 !important; 
  padding-top: clamp(8px, 1.6vw, 16px) !important;
}

/* 3) TOP SPACING REDUCTION FOR PARTNERSHIP & CONTACT PAGES */
.partnership, .partners, .partner-section { 
  padding-top: clamp(10px, 2vw, 18px) !important; 
}
.contact-section, #contact, .contact { 
  padding-top: clamp(10px, 2vw, 18px) !important; 
}

/* 4) KEEP EVERYTHING ELSE UNTOUCHED */
header, header *, footer, footer * { /* intentionally empty to avoid overrides */ }



/* =========================================================
   Home-specific spacing tighten using actual section classes
   (hero -> vision -> values -> services -> performance -> partnership -> contact)
   Only affects adjacent flow on the homepage; other pages untouched.
   ========================================================= */

/* Hero -> Vision */
.hero + .vision-section { margin-top:0 !important; padding-top: clamp(8px, 1.4vw, 16px) !important; }

/* Vision -> Values */
.vision-section + .values-section { margin-top:0 !important; padding-top: clamp(8px, 1.4vw, 16px) !important; }

/* Values -> Services */
.values-section + .services-section { margin-top:0 !important; padding-top: clamp(8px, 1.4vw, 16px) !important; }

/* Services -> Performance */
.services-section + .performance-section { margin-top:0 !important; padding-top: clamp(8px, 1.4vw, 16px) !important; }

/* Performance -> Partnership (메인의 파트너십 상단 여백 축소) */
.performance-section + .partnership-section { margin-top:0 !important; padding-top: clamp(8px, 1.4vw, 16px) !important; }

/* Partnership -> Contact (메인의 문의하기 상단 여백 축소) */
.partnership-section + .contact-section { margin-top:0 !important; padding-top: clamp(8px, 1.4vw, 16px) !important; }



/* =========================================================
   HOME (index) – Button effects outside <main> + tighter tops
   (No header/footer edits; content-only)
   ========================================================= */

/* A) Button effects also for sections directly under <body> (hero/boxes) */
section .btn,
section a.button,
section .button,
section .cta a,
section .action a,
section .link-btn,
section .action-btn {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:40px; padding:10px 16px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.08);
  background:#fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.05);
  font-weight:700;
  transition: transform .16s ease, box-shadow .16s ease, color .16s ease, border-color .16s ease, background-color .16s ease;
  cursor:pointer;
}
@media (hover:hover){
  section .btn:hover,
  section a.button:hover,
  section .button:hover,
  section .cta a:hover,
  section .action a:hover,
  section .link-btn:hover,
  section .action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(0,0,0,.06);
    border-color: rgba(0,0,0,.12);
  }
}
@media (hover:none){
  section .btn:active,
  section a.button:active { transform: translateY(0); box-shadow: 0 4px 12px rgba(0,0,0,.05); }
}

/* B) Tighten TOP spacing for home sections after hero */
.values-section.wrap { margin-top:0 !important; padding-top: clamp(8px,1.3vw,16px) !important; }
.services-section.wrap { margin-top:0 !important; padding-top: clamp(8px,1.3vw,16px) !important; }
.performance-section.wrap { margin-top:0 !important; padding-top: clamp(8px,1.3vw,16px) !important; }
.partnership-section.wrap { margin-top:0 !important; padding-top: clamp(8px,1.3vw,16px) !important; }
.contact-section.wrap { margin-top:0 !important; padding-top: clamp(8px,1.3vw,16px) !important; }



/* ===============================================
   Hero: make "문의하기" button same color as "자세히 알아보기"
   =============================================== */
.hero .cta-row .btn.ghost{
  background: linear-gradient(90deg, var(--gt-brown), var(--gt-gold)) !important;
  color:#fff !important;
  border-color: transparent !important;
}

/* ===============================================
   Hero-bottom boxes: hover lift like other pages
   (sections under <body> on home)
   =============================================== */
section .value-item,
section .service-item,
section .stat-item,
section .highlight-item{
  border-radius: 12px;
  transition: transform .16s ease, box-shadow .16s ease;
  will-change: transform;
}
@media (hover:hover){
  section .value-item:hover,
  section .service-item:hover,
  section .stat-item:hover,
  section .highlight-item:hover{
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,.06);
  }
}
@media (hover:none){
  section .value-item:active,
  section .service-item:active,
  section .stat-item:active,
  section .highlight-item:active{
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(0,0,0,.05);
  }
}



/* =========================================================
   Visibility & spacing safeguards for home sections
   - Restore any hidden boxes under Vision/Partnership
   - Apply effects to mobile too
   ========================================================= */

/* Ensure hero overlay doesn't block following sections */
.hero .hero-overlay{ pointer-events: none !important; }
.hero{ position: relative; z-index: 0; }
/* Bring next sections above */
.vision-section.wrap,
.values-section.wrap,
.services-section.wrap,
.performance-section.wrap,
.partnership-section.wrap,
.contact-section.wrap{
  position: relative;
  z-index: 5;
}

/* Top spacing tuned (tight but safe, prevents overlap) */
.vision-section.wrap{ padding-top: clamp(16px, 2.4vw, 28px) !important; }
.values-section.wrap,
.services-section.wrap,
.performance-section.wrap,
.partnership-section.wrap,
.contact-section.wrap{
  padding-top: clamp(10px, 1.8vw, 20px) !important;
  margin-top: 0 !important;
}

/* Hover/touch effects also on mobile */
section .value-item,
section .service-item,
section .stat-item,
section .highlight-item{
  border-radius: 12px;
  transition: transform .16s ease, box-shadow .16s ease;
  will-change: transform;
}
@media (hover:hover){
  section .value-item:hover,
  section .service-item:hover,
  section .stat-item:hover,
  section .highlight-item:hover{
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,.06);
  }
}
/* On touch screens, provide active feedback */
@media (hover:none){
  section .value-item:active,
  section .service-item:active,
  section .stat-item:active,
  section .highlight-item:active{
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(0,0,0,.05);
  }
}

/* Also ensure anchor buttons inside those boxes get the effect */
section .value-item a.button,
section .service-item a.button,
section .highlight-item a.button{
  display:inline-flex; align-items:center; justify-content:center;
  min-height: 40px; padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.08);
  background:#fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.05);
  font-weight:700;
  transition: transform .16s ease, box-shadow .16s ease, color .16s ease, border-color .16s ease, background-color .16s ease;
  cursor:pointer;
}
@media (hover:hover){
  section .value-item a.button:hover,
  section .service-item a.button:hover,
  section .highlight-item a.button:hover{
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(0,0,0,.06);
    border-color: rgba(0,0,0,.12);
  }
}



/* =========================================================
   1) HERO CTA buttons – movement + color unification
   ========================================================= */
.hero .cta-row .btn{ 
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease; 
  will-change: transform;
}
.hero .cta-row .btn:hover{ 
  transform: translateY(-2px) scale(1.02) !important; 
  box-shadow: 0 10px 24px rgba(0,0,0,.12) !important; 
}
@media (hover:none){
  .hero .cta-row .btn:active{ 
    transform: translateY(0) scale(0.99) !important; 
    box-shadow: 0 6px 16px rgba(0,0,0,.10) !important; 
  }
}
/* 색상: 문의하기 버튼(ghost)도 자세히 알아보기와 동일한 그라디언트 */
.hero .cta-row .btn.ghost{
  background: linear-gradient(90deg, var(--gt-brown), var(--gt-gold)) !important;
  color:#fff !important; border-color: transparent !important;
}

/* =========================================================
   2) HERO 하단 박스들 – 움직임(hover/active) + 모바일 적용
   ========================================================= */
/* 기업비전 하단 박스: .value-item */
.values-section .value-item{
  position: relative; z-index: 1;
  transition: transform .18s ease, box-shadow .18s ease;
  border-radius: 12px;
}
/* 파트너십 박스: .benefit-item */
.partnership-section .benefit-item{
  position: relative; z-index: 1;
  transition: transform .18s ease, box-shadow .18s ease;
  border-radius: 12px;
}

/* 데스크톱 hover */
@media (hover:hover){
  .values-section .value-item:hover,
  .partnership-section .benefit-item:hover{
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0,0,0,.10);
  }
}

/* 모바일 active */
@media (hover:none){
  .values-section .value-item:active,
  .partnership-section .benefit-item:active{
    transform: translateY(0);
    box-shadow: 0 6px 16px rgba(0,0,0,.08);
  }
}

/* 만약 상단 요소 겹침이 있었다면 안전하게 띄우기 */
.hero{ position: relative; z-index: 0; }
.values-section.wrap,
.partnership-section.wrap{ position: relative; z-index: 5; }



/* ===============================================
   HERO – size up and prepare for rotation (content-only)
   =============================================== */
.hero .hero-overlay{
  min-height: clamp(480px, 68vh, 820px) !important;
}
@media (max-width: 991px){
  .hero .hero-overlay{
    min-height: clamp(340px, 52vh, 600px) !important;
  }
}

/* optional: ensure overlay hosts text above bg */
.hero .hero-overlay{ position: relative; z-index: 0; }
.hero .hero-overlay .cta-row{ position: relative; z-index: 2; }

/* (no HTML changes) */



/* ===== HERO SAFE STACKING FIX ===== */
.hero{ 
  position: relative; 
  min-height: clamp(480px, 68vh, 820px) !important; 
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
@media (max-width: 991px){
  .hero{ min-height: clamp(340px, 52vh, 600px) !important; }
}
.hero .hero-overlay{ 
  position: relative; z-index: 2; 
  pointer-events: auto !important; /* restore clicks on buttons/text */
  background: transparent !important; /* keep overlay content visible */
}
/* Ensure CTA row is above any pseudo bg */
.hero .cta-row{ position: relative; z-index: 3; }



/* ===== HERO crossfade layers (behind text/buttons) ===== */
.hero{ position: relative; }
.hero .hero-slide{
  position: absolute; inset: 0;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  opacity: 0; transition: opacity .8s ease;
  z-index: 1; pointer-events: none;
}
.hero .hero-slide.active{ opacity: 1; }
.hero .hero-overlay{ position: relative; z-index: 2; } /* text/buttons above slides */
.hero .cta-row{ position: relative; z-index: 3; }



/* ===== HERO robust layering (overlay always visible) ===== */
.hero{ position: relative !important; }
.hero .hero-slide{
  position: absolute; inset: 0;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  opacity: 0; transition: opacity .8s ease;
  z-index: 0 !important; pointer-events: none !important;
  will-change: opacity;
}
.hero .hero-slide.active{ opacity: 1; }
.hero .hero-overlay{ position: relative !important; z-index: 10 !important; pointer-events: auto !important; }
.hero .cta-row{ position: relative !important; z-index: 11 !important; }



/* ===== Ensure hero text/buttons are always visible above slides ===== */
.hero{ position: relative !important; }
.hero .hero-slide{ z-index: 0 !important; pointer-events: none !important; }
.hero .hero-overlay{
  position: absolute !important;
  inset: 0 !important;
  z-index: 10 !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.hero .cta-row{
  position: relative !important;
  z-index: 11 !important;
  opacity: 1 !important;
  visibility: visible !important;
}



/* ===== HERO overlay content: place near bottom (no HTML change) ===== */
.hero .hero-overlay{
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;   /* push content down */
  padding-left: clamp(16px, 3vw, 40px) !important;
  padding-right: clamp(16px, 3vw, 40px) !important;
  padding-bottom: clamp(36px, 14vh, 160px) !important; /* "적당한" 하단 위치 */
  padding-top: clamp(8px, 2vh, 24px) !important;
}
.hero .cta-row{ 
  margin-top: clamp(10px, 1.5vh, 18px) !important; 
}

@media (max-width: 991px){
  .hero .hero-overlay{
    padding-bottom: clamp(24px, 10vh, 96px) !important; 
    padding-left: clamp(14px, 4vw, 28px) !important;
    padding-right: clamp(14px, 4vw, 28px) !important;
  }
  .hero .cta-row{ margin-top: 10px !important; }
}



/* ===== Fix: Long email strings shouldn't overflow (제조협력문의 등) ===== */
.contact-section a[href^="mailto"],
.contact-section .email,
.contact a[href^="mailto"],
.contact .email,
section .contact-item a[href^="mailto"],
section .contact-item .email,
section .cooperate a[href^="mailto"],
section .cooperate .email {
  overflow-wrap: anywhere !important;
  word-break: break-all !important;
  white-space: normal !important;
  display: inline-block !important;
  max-width: 100% !important;
}
/* If email lives inside a flex row, allow shrinking */
section .contact-item, .contact-section .contact-item{
  min-width: 0;
}



/* ===== Footer phone alignment rules ===== */
footer .footer-phone{ margin: 4px 0; }
@media (min-width: 992px){
  /* Try grid alignment if 2-column layout exists */
  #gtc-footer .grid-2col{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 32px;
  }
  /* place phone on right column (same column where 통신판매업 is likely placed) */
  #gtc-footer .grid-2col .footer-phone{ grid-column: 2; }
}
@media (max-width: 991px){
  /* On mobile, ensure phone appears just above email line if order allows */
  #gtc-footer .meta-mobile .row-contact{ margin-top: 8px; }
  /* Move phone before email using order trick if we find both */
  #gtc-footer .meta-mobile .footer-phone{ order: -1; margin-bottom: 6px; }
}