/* ============================================================
   장애인표준사업장인증 - style.css
   기준 템플릿: .agent/css/style_Blue_Dark_2.css 참조
   추가 컴포넌트: hero-image-wrap, answer-block, pain, checklist,
                  compare-table, trust-card
   Mobile First / 360px 기준
   ============================================================ */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

/* ── CSS 변수 ── */
:root {
  --bg-main: #020617;
  --bg-secondary: #0f172a;
  --primary: #3b82f6;
  --primary-dark: #1e40af;
  --accent: #fbbf24;
  --accent-glow: rgba(251, 191, 36, 0.2);
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --text-dark: #0f172a;
  --card-bg: rgba(30, 41, 59, 0.4);
  --card-border: rgba(148, 163, 184, 0.1);
  --glass-header: rgba(2, 6, 23, 0.85);
  --container-width: 1200px;
  --section-padding: 5rem 1rem;
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.3), 0 2px 4px -2px rgba(0,0,0,0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.5), 0 4px 6px -4px rgba(0,0,0,0.5);
  --shadow-glow: 0 0 20px rgba(59,130,246,0.15);
  --backdrop-blur: 16px;
  /* 장애인 테마 포인트 컬러 (따뜻한 에메랄드) */
  --theme-green: #10b981;
  --theme-green-glow: rgba(16,185,129,0.15);
}

/* ── 리셋 ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior:smooth; font-size:16px; }

body {
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--text-main);
  background-color: var(--bg-main);
  line-height: 1.6;
  overflow-x: hidden;
}

a { text-decoration:none; color:inherit; transition:color 0.2s; }
ul { list-style:none; }
img { max-width:100%; display:block; }

/* ── 레이아웃 ── */
.container { max-width:var(--container-width); margin:0 auto; padding:0 1.25rem; }
.section   { padding: var(--section-padding); }
.section-gray { background-color: var(--bg-secondary); }

/* ── 타이포 ── */
h1,h2,h3,h4,h5,h6 { line-height:1.3; font-weight:700; color:var(--text-main); letter-spacing:-0.02em; }

.text-gradient {
  background: linear-gradient(135deg, #60a5fa 0%, var(--accent) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color:transparent;
}

.section-title          { text-align:center; margin-bottom:3.5rem; }
.section-title h2       { font-size: clamp(1.8rem, 4vw, 2.5rem); margin-bottom:1rem; }
.section-title p        { color:var(--text-muted); font-size:1.1rem; max-width:600px; margin:0 auto; }

/* ── HEADER ── */
.header {
  position:fixed; top:0; left:0; width:100%; z-index:1000;
  padding:0.9rem 0;
  background: var(--glass-header);
  backdrop-filter: blur(var(--backdrop-blur));
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: all 0.3s ease;
}
.header-content { display:flex; justify-content:space-between; align-items:center; }
.logo {
  font-size:1.15rem; font-weight:800;
  display:flex; align-items:center; gap:0.6rem; color:var(--text-main);
}
.secondary-logo-text {
  font-size:0.85rem; color:var(--text-muted); font-weight:500;
  margin-left:0.6rem; border-left:1px solid rgba(255,255,255,0.2); padding-left:0.6rem;
}
.nav-cta { display:none; }
@media (min-width:768px) { .nav-cta { display:inline-flex; } }

/* ── BTN ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:0.875rem 1.75rem; border-radius:9999px;
  font-weight:600; font-size:1rem; transition:all 0.3s ease;
  cursor:pointer; border:none; gap:0.5rem; white-space:nowrap;
}
.btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color:#fff; box-shadow:0 4px 15px rgba(59,130,246,0.4);
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(59,130,246,0.6); }

.btn-accent {
  background: linear-gradient(135deg, var(--accent) 0%, #d97706 100%);
  color:#0f172a; font-weight:700; box-shadow:0 4px 15px rgba(251,191,36,0.4);
}
.btn-accent:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(251,191,36,0.6); }

.btn-outline {
  background:transparent; border:1px solid rgba(255,255,255,0.3); color:var(--text-main);
}
.btn-outline:hover { border-color:var(--text-main); background:rgba(255,255,255,0.05); }

/* ── HERO ── */
.hero {
  position:relative; padding-top:9rem; padding-bottom:5rem;
  overflow:hidden;
  background: radial-gradient(circle at 40% 0%, #1e293b 0%, var(--bg-main) 65%);
}

.hero-grid {
  display:grid; grid-template-columns:1fr; gap:3rem;
  align-items:center; position:relative; z-index:1;
}
@media (min-width:900px) {
  .hero-grid { grid-template-columns:1fr 1fr; gap:4rem; }
  .hero-content { text-align:left; }
}

.hero-content { text-align:center; }

.badge {
  display:inline-block; padding:0.45rem 1rem;
  background:rgba(59,130,246,0.1); border:1px solid rgba(59,130,246,0.25);
  color:#60a5fa; border-radius:99px; font-weight:600; font-size:0.875rem; margin-bottom:1.75rem;
}

.hero h1 { font-size: clamp(2rem, 5vw, 3.5rem); margin-bottom:1.5rem; line-height:1.2; }
.hero p  { font-size:1.1rem; color:var(--text-muted); margin-bottom:2.5rem; max-width:560px; margin-left:auto; margin-right:auto; }
@media (min-width:900px) { .hero p { margin-left:0; } }

.hero-buttons { display:flex; flex-direction:column; gap:1rem; justify-content:center; }
@media (min-width:480px) { .hero-buttons { flex-direction:row; } }
@media (min-width:900px) { .hero-buttons { justify-content:flex-start; } }

.hero-image-wrap {
  position:relative; border-radius:1.5rem; overflow:hidden;
  box-shadow: 0 20px 60px rgba(59,130,246,0.15), 0 0 0 1px rgba(255,255,255,0.05);
}
.hero-image-wrap img { width:100%; height:auto; border-radius:1.5rem; }
.hero-svg-fallback { width:100%; border-radius:1.5rem; background:#0f172a; }
.hero-svg-fallback svg { width:100%; height:auto; display:block; }

/* Hero 배경 오브 */
.hero-orb { position:absolute; border-radius:50%; pointer-events:none; z-index:0; }
.hero-orb-1 {
  width:500px; height:500px;
  top:-150px; right:-100px;
  background: radial-gradient(circle, rgba(59,130,246,0.08) 0%, transparent 70%);
}
.hero-orb-2 {
  width:300px; height:300px;
  bottom:-50px; left:-80px;
  background: radial-gradient(circle, rgba(251,191,36,0.06) 0%, transparent 70%);
}

/* ── ANSWER BLOCK ── */
.answer-block-section { padding: 3.5rem 1rem; }
.answer-block-grid {
  display:grid; grid-template-columns:1fr; gap:1.5rem;
}
@media (min-width:768px) { .answer-block-grid { grid-template-columns:repeat(3,1fr); } }

.answer-card {
  background: var(--card-bg); border:1px solid var(--card-border);
  border-radius:1.25rem; padding:1.75rem;
  backdrop-filter:blur(8px); transition:all 0.3s ease;
}
.answer-card:hover { border-color:rgba(96,165,250,0.3); box-shadow:var(--shadow-glow); }

.answer-card h3 {
  color:#60a5fa; font-size:1.05rem; margin-bottom:0.75rem; display:flex; align-items:center; gap:0.5rem;
}
.answer-summary { font-weight:600; color:var(--text-main); margin-bottom:0.6rem; font-size:0.975rem; }
.answer-detail  { color:var(--text-muted); font-size:0.9rem; line-height:1.7; }

/* ── BENEFITS CARDS ── */
.cards-grid {
  display:grid; grid-template-columns:1fr; gap:1.5rem; margin-top:0;
}
@media (min-width:600px) { .cards-grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:960px) { .cards-grid { grid-template-columns:repeat(3,1fr); } }

.card {
  background:var(--card-bg); padding:2rem; border-radius:1.25rem;
  border:1px solid var(--card-border); backdrop-filter:blur(8px); transition:all 0.3s ease;
}
.card:hover { transform:translateY(-6px); border-color:rgba(96,165,250,0.3); box-shadow:var(--shadow-glow); }

.card-icon {
  width:3.5rem; height:3.5rem; background:rgba(59,130,246,0.1);
  border-radius:0.875rem; display:flex; align-items:center; justify-content:center;
  margin-bottom:1.25rem; color:#60a5fa; font-size:1.5rem;
}
.card h3  { margin-bottom:0.75rem; font-size:1.15rem; }
.card p   { color:var(--text-muted); font-size:0.95rem; line-height:1.7; }
.card strong { color:var(--accent); }

/* ── PAIN POINTS ── */
.pain-grid { display:grid; grid-template-columns:1fr; gap:1.25rem; }
@media (min-width:768px) { .pain-grid { grid-template-columns:repeat(2, 1fr); } }

.pain-item {
  display:flex; align-items:flex-start; gap:1rem;
  background:var(--card-bg); border:1px solid var(--card-border);
  border-radius:1rem; padding:1.5rem; transition:all 0.3s ease;
}
.pain-item:hover { border-color:rgba(239,68,68,0.3); }
.pain-icon { color:#f87171; font-size:1.5rem; flex-shrink:0; margin-top:0.15rem; }
.pain-text h4 { font-size:1rem; color:var(--text-main); margin-bottom:0.4rem; }
.pain-text p  { color:var(--theme-green); font-size:0.9rem; font-weight:500; }

/* ── CHECKLIST ── */
.checklist-box {
  display:grid; grid-template-columns:1fr; gap:2rem;
  background:var(--card-bg); border:1px solid var(--card-border);
  border-radius:1.5rem; padding:2.5rem; backdrop-filter:blur(8px);
}
@media (min-width:768px) { .checklist-box { grid-template-columns:repeat(2,1fr); } }

.checklist-subtitle {
  color:#60a5fa; font-size:1.05rem; margin-bottom:1.25rem;
  display:flex; align-items:center; gap:0.5rem;
}
.check-list { display:flex; flex-direction:column; gap:0.875rem; }
.check-list li {
  display:flex; align-items:flex-start; gap:0.75rem;
  color:var(--text-muted); font-size:0.975rem; line-height:1.5;
}
.check-list li i { color:var(--theme-green); font-size:1.1rem; flex-shrink:0; margin-top:0.1rem; }

.checklist-cta { text-align:center; margin-top:2.5rem; }
.checklist-cta p { color:var(--text-muted); margin-bottom:1.25rem; }

/* ── PROCESS ── */
.process-steps {
  display:grid; gap:2rem; margin-top:1rem;
  grid-template-columns:1fr;
}
@media (min-width:600px) { .process-steps { grid-template-columns:repeat(2, 1fr); } }
@media (min-width:960px) { .process-steps { grid-template-columns:repeat(5, 1fr); } }

.step { position:relative; text-align:center; }
.step-number {
  width:3.25rem; height:3.25rem;
  background: linear-gradient(135deg, var(--bg-secondary), var(--bg-main));
  border:1px solid rgba(59,130,246,0.35); color:#60a5fa;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:1.2rem; margin:0 auto 1.25rem;
  position:relative; z-index:2; box-shadow:0 0 15px rgba(59,130,246,0.12);
}
.step-content h4  { margin-bottom:0.6rem; font-size:1.05rem; }
.step-content p   { color:var(--text-muted); font-size:0.875rem; }

.process-note {
  display:flex; align-items:center; justify-content:center; gap:0.6rem;
  margin-top:2.5rem; color:var(--text-muted); font-size:0.975rem;
  background:var(--card-bg); border:1px solid var(--card-border);
  border-radius:999px; padding:0.75rem 1.75rem; width:fit-content; margin-inline:auto;
}
.process-note i { color:var(--accent); }
.process-note strong { color:var(--text-main); }

/* ── COMPARISON TABLE ── */
.compare-table-wrap { overflow-x:auto; }
.compare-table {
  width:100%; border-collapse:collapse; min-width:540px;
  background:var(--card-bg); border-radius:1.25rem; overflow:hidden;
  border:1px solid var(--card-border); backdrop-filter:blur(8px);
}
.compare-table th, .compare-table td {
  padding:1rem 1.25rem; text-align:center; font-size:0.95rem; border-bottom:1px solid rgba(255,255,255,0.05);
}
.compare-table th {
  background:rgba(59,130,246,0.1); color:#60a5fa; font-weight:700; font-size:0.95rem;
}
.compare-table th:first-child { text-align:left; color:var(--text-muted); }
.compare-table td:first-child { text-align:left; color:var(--text-muted); }
.compare-table tr:last-child td { border-bottom:none; }
.compare-table tr:hover td     { background:rgba(255,255,255,0.025); }

.col-self  { color: #f87171 !important; }
.col-agent { color: var(--theme-green) !important; font-weight:600; }

/* ── TRUST ── */
.trust-stats {
  display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; margin-top:1rem; text-align:center;
}
@media (min-width:768px) { .trust-stats { grid-template-columns:repeat(4,1fr); gap:2rem; } }

.stat-item h3 {
  font-size:clamp(1.7rem, 3.5vw, 2.5rem); color:var(--accent); margin-bottom:0.4rem;
  text-shadow:0 0 20px rgba(251,191,36,0.3); white-space:nowrap; letter-spacing:-0.04em;
}
.stat-item p  { font-weight:500; color:var(--text-muted); font-size:0.9rem; }

.trust-cards {
  display:grid; grid-template-columns:1fr; gap:1.25rem; margin-top:3rem;
}
@media (min-width:768px) { .trust-cards { grid-template-columns:repeat(3,1fr); } }

.trust-card {
  background:var(--card-bg); border:1px solid var(--card-border);
  border-radius:1.25rem; padding:2rem; text-align:center; transition:all 0.3s ease;
}
.trust-card:hover { border-color:rgba(16,185,129,0.3); box-shadow:0 0 20px var(--theme-green-glow); }
.trust-card-icon { font-size:2rem; color:var(--theme-green); margin-bottom:1rem; }
.trust-card h4   { margin-bottom:0.75rem; font-size:1.1rem; }
.trust-card p    { color:var(--text-muted); font-size:0.9rem; line-height:1.7; }

/* ── FAQ ── */
.faq-list { max-width:800px; margin:0 auto; }

.faq-item {
  background:var(--card-bg); border-radius:1rem; margin-bottom:0.875rem;
  border:1px solid var(--card-border); overflow:hidden; transition:border-color 0.3s;
}
.faq-item.active { border-color:rgba(96,165,250,0.35); background:rgba(30,41,59,0.65); }

.faq-question {
  padding:1.5rem 1.75rem; display:flex; justify-content:space-between; align-items:center;
  cursor:pointer; font-weight:600; font-size:1.05rem; color:var(--text-main);
  transition:background 0.2s;
}
.faq-question:hover { background:rgba(255,255,255,0.03); }
.faq-toggle { transition:transform 0.3s ease; color:var(--text-muted); }

.faq-answer {
  padding:0 1.75rem; max-height:0; overflow:hidden;
  transition:all 0.35s ease; color:var(--text-muted);
  border-top:1px solid transparent;
}
.faq-item.active .faq-answer {
  padding:0 1.75rem 1.75rem; max-height:350px;
  border-top-color:rgba(255,255,255,0.05);
}
.faq-item.active .faq-toggle { transform:rotate(180deg); color:#60a5fa; }
.faq-answer p { font-size:0.95rem; line-height:1.75; }

/* ── CTA SECTION ── */
.cta-section {
  background: linear-gradient(135deg, #172554 0%, #1e40af 100%);
  color:#fff; text-align:center; padding:7rem 1rem; position:relative; overflow:hidden;
}
.cta-section::before {
  content:''; position:absolute; inset:0;
  background: radial-gradient(at 50% 0%, rgba(251,191,36,0.18), transparent 65%);
  pointer-events:none;
}
.cta-section h2 { color:#fff; font-size:clamp(1.8rem, 4vw, 2.8rem); margin-bottom:1.25rem; position:relative; z-index:1; }
.cta-section p  { color:#bfdbfe; margin-bottom:2.5rem; font-size:1.1rem; position:relative; z-index:1; }
.cta-buttons {
  display:flex; flex-direction:column; gap:1rem; justify-content:center; align-items:center;
  position:relative; z-index:1;
}
@media (min-width:480px) { .cta-buttons { flex-direction:row; } }
.cta-sub { color:rgba(191,219,254,0.7); font-size:0.875rem; margin-top:2rem; position:relative; z-index:1; }
.cta-sub i { margin-right:0.3rem; }

/* ── FOOTER (표준 2컬럼) ── */
.footer {
  background:#020617; color:#94a3b8;
  padding:3.2rem 1rem 2rem; font-size:0.95rem;
  border-top:1px solid rgba(255,255,255,0.05);
}
.footer-top {
  max-width:1120px; margin:0 auto;
  display:grid; grid-template-columns:1fr; gap:1.1rem;
}
@media (min-width:900px) {
  .footer-top { grid-template-columns:1.05fr 1fr; align-items:stretch; gap:1.25rem; }
}
.footer-col-left { display:grid; gap:0.9rem; }

.footer-brand,
.footer-info,
.footer-social-card {
  background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08);
  border-radius:18px; padding:1.2rem;
}
.footer-brand   { display:flex; align-items:flex-start; }
.footer-logo-box { display:flex; align-items:center; gap:1rem; }

.seal-yoon {
  width:54px; height:54px;
  background: linear-gradient(135deg, #b91c1c, #991b1b);
  border-radius:12px; color:#fff; display:flex; flex-wrap:wrap;
  align-items:center; justify-content:center; padding:4px;
  box-shadow:0 4px 6px rgba(0,0,0,0.3); border:1px solid rgba(255,255,255,0.1);
  font-family:serif; line-height:1; font-weight:bold;
}
.seal-grid {
  display:grid; grid-template-columns:1fr 1fr;
  text-align:center; gap:2px; width:100%; height:100%;
}
.seal-char { display:flex; align-items:center; justify-content:center; font-size:16px; }
.brand-text-group { display:flex; flex-direction:column; justify-content:center; }
.brand-title { color:#fff; font-size:1.4rem; font-weight:800; letter-spacing:-0.02em; margin-bottom:0.2rem; }
.brand-link  { color:#60a5fa; font-size:0.9rem; text-decoration:none; transition:color 0.2s; }
.brand-link:hover { color:#93c5fd; text-decoration:underline; }

.footer-info { color:#cbd5e1; height:100%; display:flex; flex-direction:column; justify-content:center; }
.footer-info p { margin-bottom:0.5rem; }
.footer-info strong { color:#e2e8f0; }
.footer-info a { color:#60a5fa; }

.footer-social-note { margin:0 0 0.7rem; color:#cbd5e1; font-size:0.95rem; }
.footer-links { display:flex; gap:1rem; flex-wrap:wrap; }
.footer-links a {
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; background:rgba(255,255,255,0.05);
  border-radius:50%; transition:all 0.3s ease;
}
.footer-links a i { font-size:1.2rem; }
.sns-naver    { color:#2DB400 !important; }
.sns-facebook { color:#1877F2 !important; }
.sns-twitter  { color:#1D9BF0 !important; }
.sns-instagram{ color:#E4405F !important; }
.sns-youtube  { color:#FF0000 !important; }
.footer-links a:hover { filter:brightness(1.2); transform:translateY(-2px); }

/* ── 모바일 최적화 (360px) ── */
@media (max-width:480px) {
  .section-title h2 { font-size:1.7rem; }
  .card             { padding:1.75rem; }
  .hero             { padding-top:7.5rem; }
  .btn              { padding:0.8rem 1.4rem; font-size:0.95rem; }
  .checklist-box    { padding:1.75rem; }
  .compare-table th, .compare-table td { padding:0.8rem 0.875rem; font-size:0.85rem; }
}