/* ============================================================
   ECHO Microwave KR — 하위 페이지 전용 스타일
   theme/css/page.css
   ============================================================ */

/* ── 회사소개 ── */
/* ── 회사소개 ── */
.about-layout {
  display: grid;
  grid-template-columns: 480px 1fr;
  gap: 36px;
  align-items: center;
  margin-bottom: 56px;
}

.about-img-col {
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 4 / 4;   /* 세로형으로 좀 더 자연스럽게 */
  flex-shrink: 0;
}
.about-img-col img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 18px;
}

.about-text-col { }

.vision-text {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.6;
  margin-top: 28px;
  padding: 20px 0;
  border-top: 2px solid var(--accent-subtle);
}

/* 반응형 */
@media (max-width: 1024px) {
  .about-layout {
    grid-template-columns: 260px 1fr;
    gap: 36px;
  }
}

@media (max-width: 768px) {
  .about-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .about-img-col {
    aspect-ratio: 16 / 9;  /* 모바일에선 가로형으로 */
    max-width: 100%;
  }
}

/* ── CEO 인사말 ── */
.ceo-section{padding:100px 48px;max-width:1000px;margin:0 auto}
.ceo-layout{display:grid;grid-template-columns:280px 1fr;gap:64px;align-items:start}
.ceo-photo-area{position:relative}
.ceo-photo{width:280px;height:340px;border-radius:24px;overflow:hidden;background:linear-gradient(135deg,var(--gray-900),var(--gray-800))}
.ceo-photo img{width:100%;height:100%;object-fit:cover}
.ceo-photo .img-placeholder-sm{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;color:var(--gray-400);gap:8px;border:2px dashed var(--gray-600);border-radius:24px}
.ceo-photo .img-placeholder-sm .ph-label{font-family:var(--font-en);font-size:.65rem;letter-spacing:2px;text-transform:uppercase;color:var(--accent-light);background:rgba(37,99,235,.15);padding:4px 12px;border-radius:6px}
.ceo-name-badge{position:absolute;bottom:-16px;left:20px;right:20px;background:var(--white);border-radius:16px;padding:16px 24px;box-shadow:0 12px 36px rgba(0,0,0,.08);text-align:center}
.ceo-name{font-size:1.1rem;font-weight:700}
.ceo-title{font-size:.78rem;color:var(--gray-400);margin-top:4px}
.ceo-text{padding-top:8px}
.ceo-text .greeting{font-size:1.4rem;font-weight:800;letter-spacing:-.5px;line-height:1.5;margin-bottom:32px}
.ceo-text .greeting .accent{color:var(--accent)}
.ceo-text .body-text{font-size:.95rem;color:var(--gray-600);line-height:2;margin-bottom:16px}
.ceo-text .signature{margin-top:40px;padding-top:28px;border-top:1px solid var(--gray-100)}
.ceo-text .sig-name{font-size:1.15rem;font-weight:700;margin-top:4px}

/* ── 회사연혁 ── */
.tl-wrapper{display:grid;grid-template-columns:1fr 300px;gap:60px;max-width:1200px;margin:0 auto;padding:100px 48px}
.timeline-section{position:relative}
.timeline-section::before{content:'';position:absolute;left:140px;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,var(--accent-light),var(--gray-100))}
.tl-item{display:flex;align-items:flex-start;margin-bottom:48px;position:relative}
.tl-year{width:120px;flex-shrink:0;font-family:var(--font-en);font-size:1.8rem;font-weight:800;color:var(--accent);text-align:right;padding-right:24px;padding-top:4px}
.tl-dot{position:absolute;left:133px;top:12px;width:16px;height:16px;border-radius:50%;background:var(--white);border:3px solid var(--accent);z-index:2;transition:all .4s ease}
.tl-item:hover .tl-dot{background:var(--accent);transform:scale(1.3)}
.tl-content{margin-left:40px;background:var(--off-white);border:1px solid var(--gray-100);border-radius:16px;padding:24px 28px;flex:1;transition:all .5s var(--ease-out-expo)}
.tl-content:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(0,0,0,.04);border-color:rgba(37,99,235,.1)}
.tl-content ul{list-style:none;padding:0;margin:0}
.tl-content li{font-size:.88rem;color:var(--gray-600);line-height:1.8;padding-left:16px;position:relative}
.tl-content li::before{content:'';position:absolute;left:0;top:10px;width:5px;height:5px;border-radius:50%;background:var(--accent-light)}
.tl-sidebar{position:sticky;top:120px}
.sidebar-img{width:100%;border-radius:24px;overflow:hidden}
.sidebar-img img{width:100%;height:auto;display:block;border-radius:24px}
.sidebar-img .img-placeholder{aspect-ratio:3/4}

.title-acc {
      background: linear-gradient(135deg, var(--accent-light), #06b6d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
/* ── 제품소개 ── */
.products-page-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:48px}
.product-page-card{background:var(--white);border:1px solid var(--gray-100);border-radius:20px;overflow:hidden;transition:all .5s var(--ease-out-expo)}
.product-page-card:hover{transform:translateY(-6px);box-shadow:0 20px 48px rgba(0,0,0,.08);border-color:rgba(37,99,235,.12)}
.product-page-card-img{aspect-ratio:4/3;overflow:hidden;background:var(--gray-50)}
.product-page-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out-expo)}
.product-page-card:hover .product-page-card-img img{transform:scale(1.05)}
.product-page-card-body{padding:24px}
.product-page-card-body h3{font-size:1.05rem;font-weight:700;margin-bottom:8px}
.product-page-card-body p{font-size:.85rem;color:var(--gray-600);line-height:1.7}
.product-page-tag{display:inline-block;font-family:var(--font-en);font-size:.68rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--accent);background:var(--accent-subtle);padding:4px 12px;border-radius:6px;margin-top:12px}

/* ── R&D ── */
.rnd-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;margin-top:48px}
.rnd-card{background:var(--off-white);border:1px solid var(--gray-100);border-radius:20px;padding:36px 32px;transition:all .4s var(--ease-out-expo)}
.rnd-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.06);border-color:rgba(37,99,235,.12)}
.rnd-icon{width:52px;height:52px;border-radius:14px;background:var(--accent-subtle);display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:20px}
.rnd-card h3{font-size:1.05rem;font-weight:700;margin-bottom:10px}
.rnd-card p{font-size:.88rem;color:var(--gray-600);line-height:1.7}
.equip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}
.equip-item{background:var(--white);border:1px solid var(--gray-100);border-radius:14px;padding:20px;text-align:center;transition:all .3s ease}
.equip-item:hover{border-color:rgba(37,99,235,.15);box-shadow:0 8px 24px rgba(0,0,0,.04)}
.equip-item h4{font-size:.88rem;font-weight:600;margin-bottom:4px}
.equip-item p{font-size:.78rem;color:var(--gray-400)}

/* ── 인재채용 ── */
.talent-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:48px}
.talent-card{text-align:center;padding:40px 28px;background:var(--off-white);border-radius:24px;border:1px solid var(--gray-100);transition:all .5s var(--ease-out-expo)}
.talent-card:hover{transform:translateY(-6px);box-shadow:0 20px 48px rgba(0,0,0,.06);border-color:rgba(37,99,235,.12)}
.talent-circle{width:120px;height:120px;border-radius:50%;margin:0 auto 24px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:800;color:var(--white)}
.talent-circle.c1{background:linear-gradient(135deg,#2563eb,#3b82f6)}
.talent-circle.c2{background:linear-gradient(135deg,#06b6d4,#22d3ee)}
.talent-circle.c3{background:linear-gradient(135deg,#7c3aed,#8b5cf6)}
.talent-card h3{font-size:1.1rem;font-weight:700;margin-bottom:12px}
.talent-card p{font-size:.85rem;color:var(--gray-600);line-height:1.7}
.benefits-section{background:var(--off-white);padding:100px 48px}
.benefits-inner{max-width:1200px;margin:0 auto}
.benefits-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.benefit-item{background:var(--white);border-radius:16px;padding:28px 24px;border:1px solid var(--gray-100);text-align:center;transition:all .4s var(--ease-out-expo)}
.benefit-item:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.04)}
.benefit-item h4{font-size:.92rem;font-weight:700;margin-bottom:8px;color:var(--gray-800)}
.benefit-item p{font-size:.8rem;color:var(--gray-400);line-height:1.6}
.process-section{padding:100px 48px;max-width:1200px;margin:0 auto}
.process-flow{display:flex;align-items:center;justify-content:center;gap:24px;margin-top:48px;flex-wrap:wrap}
.process-step{text-align:center;flex:0 0 180px}
.process-icon{width:100px;height:100px;border-radius:50%;background:var(--off-white);border:2px solid var(--gray-100);display:flex;align-items:center;justify-content:center;font-size:2.2rem;margin:0 auto 16px;transition:all .4s ease}
.process-step:hover .process-icon{border-color:var(--accent);background:var(--accent-subtle);transform:scale(1.08)}
.process-step h4{font-size:.92rem;font-weight:700}
.process-arrow{font-size:1.5rem;color:var(--gray-200);flex-shrink:0}

/* ── 반응형 (페이지 전용) ── */
@media(max-width:1024px){
  .products-page-grid{grid-template-columns:repeat(2,1fr)}
  .talent-grid,.benefits-grid{grid-template-columns:repeat(2,1fr)}
  .rnd-grid{grid-template-columns:1fr}
  .equip-grid{grid-template-columns:repeat(2,1fr)}
  .tl-wrapper{grid-template-columns:1fr;padding:72px 24px}
  .tl-sidebar{display:none}
}
@media(max-width:768px){
  .ceo-layout{grid-template-columns:1fr;gap:48px}
  .ceo-photo{width:200px;height:260px;margin:0 auto}
  .ceo-name-badge{left:10px;right:10px}
  .ceo-section{padding:72px 24px}
  .products-page-grid,.talent-grid,.benefits-grid{grid-template-columns:1fr}
  .equip-grid{grid-template-columns:1fr}
  .process-flow{flex-direction:column}
  .process-arrow{transform:rotate(90deg)}
  .benefits-section,.process-section{padding:72px 24px}
  .timeline-section::before{left:24px}
  .tl-year{font-size:1.3rem;width:auto;text-align:left;position:absolute;left:44px;top:8px;padding-right:0}
  .tl-dot{left:17px}
  .tl-content{margin-left:44px;margin-top:36px}
}

/* ── 제품소개 (products.php) ── */
.prod-page-wrap{max-width:1200px;margin:0 auto;padding:80px 48px}

.prod-block{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding:64px 0;border-bottom:1px solid var(--gray-100)}
.prod-block:last-of-type{border-bottom:none}
.prod-block--alt .prod-block-img{order:2}
.prod-block--alt .prod-block-body{order:1}

.prod-block-img{border-radius:16px;overflow:hidden;aspect-ratio:4/3;background:var(--gray-50); border: 1px solid #EEE;}
.prod-block-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out-expo)}
.prod-block:hover .prod-block-img img{transform:scale(1.04)}
.prod-img-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--gray-900),var(--gray-800));color:var(--gray-400);font-size:.85rem;border-radius:16px;aspect-ratio:4/3}

.prod-block-tag{display:inline-block;font-family:var(--font-en);font-size:.68rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--accent);background:var(--accent-subtle);padding:5px 14px;border-radius:20px;margin-bottom:16px}
.prod-block-title{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;letter-spacing:-1px;margin-bottom:8px;line-height:1.3}
.prod-block-sub{font-family:var(--font-en);font-size:.8rem;color:var(--gray-400);margin-bottom:20px;letter-spacing:.5px}
.prod-block-desc{font-size:.92rem;color:var(--gray-600);line-height:1.9;margin-bottom:24px}
.prod-block-specs{list-style:none;padding:0;margin:0 0 28px;border-top:1px solid var(--gray-100);padding-top:20px}
.prod-block-specs li{display:flex;gap:12px;font-size:.85rem;padding:7px 0;border-bottom:1px solid var(--gray-50);color:var(--gray-700)}
.prod-block-specs li span{width:60px;flex-shrink:0;font-weight:600;color:var(--gray-400);font-size:.78rem;text-transform:uppercase;letter-spacing:.5px;padding-top:1px}
.prod-block-btn{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;font-weight:600;color:var(--accent);padding:10px 20px;border:1.5px solid var(--accent);border-radius:8px;transition:all .25s ease}
.prod-block-btn:hover{background:var(--accent);color:#fff}

.prod-cta{background:var(--gray-900);border-radius:20px;margin-top:80px;overflow:hidden}
.prod-cta-inner{padding:64px 60px;text-align:center;position:relative}
.prod-cta-inner::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(37,99,235,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,.05) 1px,transparent 1px);background-size:60px 60px}
.prod-cta-label{font-family:var(--font-en);font-size:.7rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--accent-light);margin-bottom:16px;position:relative}
.prod-cta-inner h3{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;color:#fff;letter-spacing:-1px;margin-bottom:12px;position:relative}
.prod-cta-inner p{font-size:.95rem;color:var(--gray-400);margin-bottom:36px;position:relative}
.prod-cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative}

/* ── 연구개발 (rnd.php) ── */
.rnd-intro{margin-bottom:48px}
.rnd-img-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:64px;border-radius:16px;overflow:hidden}
.rnd-img-cell{aspect-ratio:4/3;overflow:hidden}
.rnd-img-cell img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.rnd-img-cell:hover img{transform:scale(1.05)}
.rnd-img-ph{width:100%;height:100%;background:linear-gradient(135deg,var(--gray-800),var(--gray-900))}

.rnd-caps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:0}
.rnd-cap-card{background:var(--off-white);border:1px solid var(--gray-100);border-radius:16px;padding:28px 24px;transition:all .4s var(--ease-out-expo)}
.rnd-cap-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.06);border-color:rgba(37,99,235,.12)}
.rnd-cap-icon{font-size:1.6rem;margin-bottom:16px}
.rnd-cap-card h3{font-size:.95rem;font-weight:700;margin-bottom:8px}
.rnd-cap-card p{font-size:.83rem;color:var(--gray-600);line-height:1.7}

.equip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.equip-card{background:var(--white);border:1px solid var(--gray-100);border-radius:12px;overflow:hidden;transition:all .3s ease}
.equip-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.06);border-color:rgba(37,99,235,.1)}
.equip-card-img{aspect-ratio:4/3;overflow:hidden;background:var(--gray-50)}
.equip-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.equip-card:hover .equip-card-img img{transform:scale(1.06)}
.equip-img-ph{width:100%;height:100%;background:linear-gradient(135deg,var(--gray-100),var(--gray-200))}
.equip-card-name{padding:14px 16px;font-size:.85rem;font-weight:600;color:var(--gray-800);text-align:center;background:#fff}

/* ── 반응형 ── */
@media(max-width:1024px){
  .prod-block{grid-template-columns:1fr;gap:36px}
  .prod-block--alt .prod-block-img{order:0}
  .prod-block--alt .prod-block-body{order:0}
  .rnd-caps-grid{grid-template-columns:repeat(2,1fr)}
  .equip-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .prod-page-wrap{padding:60px 24px}
  .prod-cta-inner{padding:48px 24px}
  .rnd-caps-grid{grid-template-columns:1fr}
  .equip-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .rnd-img-grid{grid-template-columns:1fr}
}