/* ══════════════════════════════════════════════════
   기장대리 전용 (page-work.php)
   ※ 공통(토큰/nav/히어로/stats/섹션/아이콘/태그/why/process/CTA/footer)은 style.css
   ※ why-grid 3+3 은 공통의 .why-grid--3 사용
══════════════════════════════════════════════════ */

/* ── 기장대리 소개 (2열 그리드) ── */
.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;}
.intro-text h2{font-size:clamp(18px,2.4vw,25px);font-weight:800;color:var(--ink);margin-bottom:18px;letter-spacing:-.5px;line-height:1.4;}
.intro-text h2 em{color:var(--navy-700);font-style:normal;}
.intro-text p{font-size:15px;color:var(--text-sub);line-height:1.85;margin-bottom:14px;}
.intro-highlight{
  background:#fff;border:1px solid var(--border);border-left:3px solid var(--navy-700);
  border-radius:0 var(--r) var(--r) 0;padding:18px 22px;margin-top:22px;
}
.intro-highlight p{margin-bottom:0;font-size:14px;color:var(--text-sub);}
.intro-highlight strong{color:var(--navy-700);}
.intro-cards{display:flex;flex-direction:column;gap:14px;}
.intro-card{
  background:#fff;border-radius:var(--r);padding:20px;
  border:1px solid var(--border);display:flex;gap:16px;align-items:flex-start;
  transition:border-color .2s,box-shadow .2s;
}
.intro-card:hover{border-color:var(--navy-100);box-shadow:0 6px 20px rgba(20,31,54,.06);}
.intro-card .icon-box{margin-bottom:0;}
.intro-card h4{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:5px;}
.intro-card p{font-size:13px;color:var(--text-sub);line-height:1.65;}

/* ── 이런 분께 필요합니다 ── */
.need-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.need-card{
  background:#fff;border:1px solid var(--border);
  border-radius:var(--r);padding:24px 20px;transition:border-color .2s,box-shadow .2s;
}
.need-card:hover{border-color:var(--navy-100);box-shadow:0 6px 20px rgba(20,31,54,.06);}
.need-badge{
  display:inline-block;background:var(--navy-50);color:var(--navy-700);
  font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;margin-bottom:14px;
}
.need-card .icon-box{width:40px;height:40px;border-radius:10px;margin-bottom:12px;}
.need-card .icon-box svg{width:20px;height:20px;}
.need-card h4{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:7px;}
.need-card p{font-size:13px;color:var(--text-sub);line-height:1.7;}

/* ── 서비스 내용 테이블 ── */
.services-table{
  width:100%;border-collapse:collapse;
  background:#fff;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--border);
}
.services-table thead th{
  background:var(--navy-800);color:#fff;
  padding:16px 20px;font-size:14px;font-weight:600;text-align:left;
}
.services-table tbody tr{border-bottom:1px solid var(--bg-soft);}
.services-table tbody tr:last-child{border-bottom:none;}
.services-table tbody tr:hover{background:var(--bg-soft);}
.services-table td{padding:16px 20px;font-size:14px;color:var(--text-sub);vertical-align:middle;}
.services-table td:first-child{font-weight:700;color:var(--ink);white-space:nowrap;}
.td-tags{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}

/* ── 선한이 다른 이유 (why-grid--3 = 3+3) ── */
.why-card .icon-box{margin-bottom:14px;}

/* ── 요금 안내 ── */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.price-card{
  background:#fff;border-radius:var(--r);padding:32px 24px;
  border:1px solid var(--border);text-align:center;
  position:relative;transition:border-color .2s,box-shadow .2s;
}
.price-card:hover{border-color:var(--navy-100);box-shadow:0 6px 20px rgba(20,31,54,.06);}
.price-card.featured{border:2px solid var(--navy-700);}
.price-card.featured:hover{border-color:var(--navy-700);}
.price-badge{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:var(--navy-700);color:#fff;
  font-size:12px;font-weight:700;padding:4px 16px;border-radius:20px;white-space:nowrap;
}
.price-tier{font-size:13px;font-weight:700;color:var(--text-light);margin-bottom:6px;}
.price-type{font-size:18px;font-weight:800;color:var(--ink);margin-bottom:4px;}
.price-range{font-size:26px;font-weight:800;color:var(--navy-700);margin-bottom:4px;}
.price-sub{font-size:12px;color:var(--text-light);margin-bottom:22px;}
.price-list{list-style:none;text-align:left;}
.price-list li{
  font-size:13px;color:var(--text-sub);padding:7px 0;
  border-bottom:1px solid var(--bg-soft);
  display:flex;align-items:center;gap:8px;
}
.price-list li:last-child{border-bottom:none;}
.price-list li::before{content:'✓';color:var(--navy-700);font-weight:700;flex-shrink:0;}
.price-note{
  margin-top:24px;background:#fff;border:1px solid var(--border);
  border-left:3px solid var(--navy-700);
  border-radius:0 var(--r) var(--r) 0;padding:18px 22px;
}
.price-note p{font-size:13px;color:var(--text-sub);line-height:1.8;}
.price-note strong{color:var(--navy-700);}

/* ── FAQ 아코디언 ── */
.faq-item{
  background:#fff;border-radius:var(--r);margin-bottom:10px;
  border:1px solid var(--border);overflow:hidden;
}
.faq-q{
  padding:20px 24px;display:flex;justify-content:space-between;align-items:center;
  cursor:pointer;font-size:15px;font-weight:700;color:var(--ink);gap:12px;
  -webkit-tap-highlight-color:transparent;user-select:none;
  width:100%;text-align:left;background:none;border:none;font-family:inherit;
}
.faq-q:hover{color:var(--navy-700);}
.faq-icon{font-size:20px;color:var(--navy-700);flex-shrink:0;transition:transform .25s;line-height:1;}
.faq-a{
  padding:0 24px;max-height:0;overflow:hidden;
  font-size:14px;color:var(--text-sub);line-height:1.8;
  transition:max-height .3s ease,padding .3s ease;
}
.faq-item.open .faq-a{max-height:300px;padding:0 24px 20px;}
.faq-item.open .faq-icon{transform:rotate(45deg);}

/* ── 반응형 — 1024px (태블릿) ── */
@media(max-width:1024px){
  .intro-grid{grid-template-columns:1fr;gap:32px;}
  .need-grid{grid-template-columns:repeat(2,1fr);}
  .price-grid{grid-template-columns:repeat(2,1fr);}
  .price-grid .price-card:last-child{grid-column:span 2;max-width:420px;margin:0 auto;width:100%;}
}

/* ── 반응형 — 768px (모바일) ── */
@media(max-width:768px){
  .intro-grid{grid-template-columns:1fr;gap:24px;}

  .need-grid{grid-template-columns:1fr;gap:10px;}
  .need-card{padding:18px 16px;}

  /* 서비스 테이블 → 카드형 */
  .services-table{border-radius:0;border:none;background:transparent;}
  .services-table thead{display:none;}
  .services-table tbody{display:flex;flex-direction:column;gap:10px;}
  .services-table tbody tr{
    display:block;background:#fff;
    border-radius:var(--r);border:1px solid var(--border);
    padding:16px;
  }
  .services-table tbody tr:hover{background:#fff;}
  .services-table td{display:block;padding:4px 0;border:none;font-size:13px;}
  .services-table td:first-child{
    font-size:15px;color:var(--ink);
    padding-bottom:8px;border-bottom:1px solid var(--bg-soft);margin-bottom:8px;
  }
  .services-table td:nth-child(2){color:var(--text-sub);margin-bottom:8px;}
  .td-tags{grid-template-columns:repeat(3,1fr);}
  .tag{font-size:11px;padding:5px 0;}

  /* 요금 */
  .price-grid{grid-template-columns:1fr;}
  .price-grid .price-card:last-child{grid-column:auto;max-width:unset;margin:0;}
  .price-card{padding:28px 20px;}

  /* FAQ */
  .faq-q{font-size:14px;padding:16px 18px;}
  .faq-a{font-size:13px;}
  .faq-item.open .faq-a{padding:0 18px 16px;}

  /* hover 제거 */
  .need-card:hover,.intro-card:hover,.price-card:hover{box-shadow:none;border-color:var(--border);}
  .price-card.featured:hover{border-color:var(--navy-700);}
}
@media(max-width:360px){
  .tag{font-size:10px;}
}