/* =========================================================
   CANCO 2026-10 신규 서브페이지 공용 스타일 (pages.css)
   privacy / cases / karina / pricing / security / faq /
   support / solutions / studio / history 페이지가 함께 쓴다.
   ========================================================= */
:root{
  --pg-blue:#2563eb; --pg-blue-d:#1d4ed8; --pg-navy:#1e3a8a; --pg-ink:#0f172a;
  --pg-text:#334155; --pg-muted:#64748b; --pg-line:#e2e8f0; --pg-soft:#f8fafc; --pg-tint:#eff6ff;
  --pg-green:#10b981; --pg-radius:18px;
}
.pg-body{font-family:'Pretendard','Noto Sans KR',sans-serif;color:var(--pg-text);line-height:1.7}
.pg-body *{box-sizing:border-box}

/* ---------- HERO ---------- */
.pg-hero{position:relative;padding:90px 16px 90px;text-align:center;color:#fff;overflow:hidden;
  background:radial-gradient(700px 320px at 15% 0%,rgba(59,130,246,.35),transparent 70%),
             radial-gradient(600px 300px at 90% 100%,rgba(139,92,246,.28),transparent 70%),
             linear-gradient(135deg,#0f172a 0%,#1e3a8a 100%)}
.pg-hero .pg-tag{display:inline-block;padding:6px 16px;border-radius:20px;border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.08);font-size:.78rem;font-weight:700;letter-spacing:1.5px;margin-bottom:18px}
.pg-hero h1{font-size:2.6rem;font-weight:800;line-height:1.3;margin:0 0 14px;color:#fff}
.pg-hero p{font-size:1.08rem;color:#cbd5e1;max-width:720px;margin:0 auto}
.pg-hero .pg-hero-btns{margin-top:28px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---------- LAYOUT ---------- */
.pg-section{padding:90px 16px}
.pg-section.alt{background:var(--pg-soft)}
.pg-section.dark{background:#0f172a;color:#cbd5e1}
.pg-wrap{max-width:1120px;margin:0 auto}
.pg-wrap.narrow{max-width:860px}
.pg-head{text-align:center;margin-bottom:46px}
.pg-head .pg-eyebrow{display:inline-block;font-size:.76rem;font-weight:800;letter-spacing:1.5px;color:var(--pg-blue);margin-bottom:10px}
.pg-head h2{font-size:2rem;font-weight:800;color:var(--pg-ink);margin:0 0 10px;line-height:1.35}
.pg-head p{color:var(--pg-muted);font-size:1.02rem;margin:0 auto;max-width:700px}
.pg-section.dark .pg-head h2{color:#fff}
.pg-section.dark .pg-head p{color:#94a3b8}

.pg-grid{display:grid;gap:22px}
.pg-grid.c2{grid-template-columns:repeat(2,1fr)}
.pg-grid.c3{grid-template-columns:repeat(3,1fr)}
.pg-grid.c4{grid-template-columns:repeat(4,1fr)}

/* ---------- CARD ---------- */
.pg-card{background:#fff;border:1px solid var(--pg-line);border-radius:var(--pg-radius);padding:28px 26px;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;text-align:left}
.pg-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(15,23,42,.08);border-color:#bfdbfe}
.pg-card .pg-ico{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:var(--pg-tint);color:var(--pg-blue);font-size:1.3rem;margin-bottom:18px}
.pg-card h3{font-size:1.15rem;font-weight:800;color:var(--pg-ink);margin:0 0 8px;line-height:1.4}
.pg-card p{font-size:.94rem;color:var(--pg-text);margin:0}
.pg-card ul{margin:12px 0 0;padding:0;list-style:none}
.pg-card li{position:relative;padding:3px 0 3px 18px;font-size:.9rem;color:var(--pg-text)}
.pg-card li::before{content:'';position:absolute;left:3px;top:12px;width:6px;height:6px;border-radius:50%;background:var(--pg-blue)}
.pg-section.dark .pg-card{background:rgba(255,255,255,.04);border-color:rgba(148,163,184,.2)}
.pg-section.dark .pg-card h3{color:#f8fafc}
.pg-section.dark .pg-card p,.pg-section.dark .pg-card li{color:#cbd5e1}
.pg-section.dark .pg-card .pg-ico{background:rgba(59,130,246,.15);color:#93c5fd}
a.pg-card{display:block;color:inherit;text-decoration:none}
.pg-card .pg-more{display:inline-block;margin-top:14px;font-weight:700;font-size:.9rem;color:var(--pg-blue)}

/* ---------- BUTTONS ---------- */
.pg-btn{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:12px;font-weight:700;
  font-size:.95rem;text-decoration:none;transition:all .2s ease;border:1px solid transparent;cursor:pointer}
.pg-btn.primary{background:linear-gradient(135deg,var(--pg-blue),var(--pg-blue-d));color:#fff}
.pg-btn.primary:hover{box-shadow:0 8px 24px rgba(37,99,235,.35);transform:translateY(-1px)}
.pg-btn.ghost{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.4);color:#fff}
.pg-btn.ghost:hover{background:rgba(255,255,255,.16)}
.pg-btn.line{background:#fff;border-color:var(--pg-line);color:var(--pg-ink)}
.pg-btn.line:hover{border-color:var(--pg-blue);color:var(--pg-blue)}

/* ---------- BADGE / PILL ---------- */
.pg-badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:.72rem;font-weight:800;letter-spacing:.5px;
  background:var(--pg-tint);color:var(--pg-blue)}
.pg-badge.green{background:#ecfdf5;color:#059669}
.pg-badge.orange{background:#fff7ed;color:#ea580c}
.pg-badge.gray{background:#f1f5f9;color:#475569}

/* ---------- TABLE ---------- */
.pg-table-wrap{overflow-x:auto;border:1px solid var(--pg-line);border-radius:14px;background:#fff}
.pg-table{width:100%;border-collapse:collapse;font-size:.93rem;min-width:560px}
.pg-table th,.pg-table td{padding:14px 16px;border-bottom:1px solid var(--pg-line);text-align:left;vertical-align:top}
.pg-table thead th{background:var(--pg-soft);color:var(--pg-ink);font-weight:800;font-size:.88rem}
.pg-table tbody tr:last-child td{border-bottom:none}
.pg-table td.c,.pg-table th.c{text-align:center}
.pg-table .yes{color:var(--pg-green);font-weight:800}
.pg-table .no{color:#cbd5e1}

/* ---------- STEPS ---------- */
.pg-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:step}
.pg-step{position:relative;background:#fff;border:1px solid var(--pg-line);border-radius:var(--pg-radius);padding:26px 22px 22px}
.pg-step::before{counter-increment:step;content:'STEP ' counter(step);display:block;font-size:.72rem;font-weight:800;
  letter-spacing:1.2px;color:var(--pg-blue);margin-bottom:8px}
.pg-step h3{font-size:1.05rem;font-weight:800;color:var(--pg-ink);margin:0 0 6px}
.pg-step p{font-size:.9rem;margin:0}

/* ---------- FAQ (details) ---------- */
.pg-faq{display:flex;flex-direction:column;gap:12px}
.pg-faq details{background:#fff;border:1px solid var(--pg-line);border-radius:14px;padding:0 22px;transition:border-color .2s}
.pg-faq details[open]{border-color:#93c5fd;box-shadow:0 8px 24px rgba(37,99,235,.06)}
.pg-faq summary{list-style:none;cursor:pointer;padding:18px 30px 18px 0;font-weight:700;color:var(--pg-ink);position:relative;font-size:1rem}
.pg-faq summary::-webkit-details-marker{display:none}
.pg-faq summary::after{content:'+';position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:1.4rem;color:var(--pg-blue);font-weight:400}
.pg-faq details[open] summary::after{content:'−'}
.pg-faq .pg-faq-a{padding:0 0 20px;color:var(--pg-text);font-size:.95rem;border-top:1px dashed var(--pg-line);padding-top:14px}
.pg-faq .pg-faq-a p{margin:0 0 8px}
.pg-faq-cat{font-size:1.1rem;font-weight:800;color:var(--pg-navy);margin:34px 0 14px;display:flex;align-items:center;gap:8px}
.pg-faq-cat:first-child{margin-top:0}

/* ---------- LEGAL DOCUMENT ---------- */
.pg-legal{background:#fff;border:1px solid var(--pg-line);border-radius:var(--pg-radius);padding:44px 48px}
.pg-legal h2{font-size:1.25rem;font-weight:800;color:var(--pg-ink);margin:38px 0 12px;padding-top:6px;scroll-margin-top:100px}
.pg-legal h2:first-of-type{margin-top:0}
.pg-legal h3{font-size:1.02rem;font-weight:700;color:var(--pg-navy);margin:20px 0 8px}
.pg-legal p,.pg-legal li{font-size:.95rem;color:var(--pg-text)}
.pg-legal ol,.pg-legal ul{padding-left:22px;margin:8px 0}
.pg-legal li{margin:4px 0}
.pg-legal .pg-table-wrap{margin:12px 0}
.pg-legal-meta{display:flex;gap:10px;flex-wrap:wrap;justify-content:space-between;align-items:center;
  font-size:.88rem;color:var(--pg-muted);margin-bottom:22px}
.pg-tabs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:28px}
.pg-tabs a{padding:10px 20px;border-radius:30px;border:1px solid var(--pg-line);background:#fff;color:var(--pg-text);
  font-weight:700;font-size:.92rem;text-decoration:none}
.pg-tabs a.on,.pg-tabs a:hover{background:var(--pg-blue);border-color:var(--pg-blue);color:#fff}
.pg-toc{background:var(--pg-soft);border-radius:14px;padding:20px 24px;margin-bottom:30px}
.pg-toc strong{display:block;color:var(--pg-ink);margin-bottom:8px}
.pg-toc ol{columns:2;column-gap:30px;margin:0;padding-left:20px}
.pg-toc a{color:var(--pg-text);text-decoration:none;font-size:.9rem}
.pg-toc a:hover{color:var(--pg-blue)}

/* ---------- STAT ---------- */
.pg-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.pg-stat{text-align:center;padding:24px 12px;border-radius:var(--pg-radius);background:#fff;border:1px solid var(--pg-line)}
.pg-stat b{display:block;font-size:2rem;font-weight:900;color:var(--pg-blue);line-height:1.2}
.pg-stat span{font-size:.88rem;color:var(--pg-muted)}

/* ---------- SPLIT ---------- */
.pg-split{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.pg-split.rev > :first-child{order:2}
.pg-split h2{font-size:1.8rem;font-weight:800;color:var(--pg-ink);margin:0 0 14px;line-height:1.35}
.pg-split p{margin:0 0 12px}
.pg-split img{width:100%;border-radius:var(--pg-radius);box-shadow:0 18px 40px rgba(15,23,42,.12);display:block}
.pg-checks{list-style:none;padding:0;margin:16px 0 0}
.pg-checks li{position:relative;padding:5px 0 5px 28px;font-size:.95rem}
.pg-checks li::before{content:'✓';position:absolute;left:0;top:5px;width:20px;height:20px;border-radius:50%;
  background:var(--pg-tint);color:var(--pg-blue);font-size:.75rem;font-weight:900;display:flex;align-items:center;justify-content:center}

/* ---------- CTA ---------- */
.pg-cta{padding:80px 16px;text-align:center;color:#fff;background:linear-gradient(135deg,#1e3a8a,#2563eb)}
.pg-cta h2{font-size:1.9rem;font-weight:800;margin:0 0 10px;color:#fff}
.pg-cta p{color:#dbeafe;margin:0 0 26px}
.pg-cta .pg-btn.primary{background:#fff;color:var(--pg-blue)}

/* ---------- NOTE ---------- */
.pg-note{background:#fffbeb;border:1px solid #fde68a;border-radius:12px;padding:14px 18px;font-size:.9rem;color:#92400e}
.pg-note.blue{background:var(--pg-tint);border-color:#bfdbfe;color:#1e3a8a}

/* ---------- TIMELINE ---------- */
.pg-timeline{position:relative;padding-left:34px}
.pg-timeline::before{content:'';position:absolute;left:10px;top:6px;bottom:6px;width:2px;background:linear-gradient(#93c5fd,#c7d2fe)}
.pg-tl-item{position:relative;margin-bottom:30px}
.pg-tl-item::before{content:'';position:absolute;left:-30px;top:6px;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--pg-blue)}
.pg-tl-year{font-size:1.35rem;font-weight:900;color:var(--pg-blue);margin-bottom:6px}
.pg-tl-item ul{margin:0;padding-left:18px}
.pg-tl-item li{margin:3px 0}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1024px){
  .pg-grid.c4,.pg-stats,.pg-steps{grid-template-columns:repeat(2,1fr)}
  .pg-grid.c3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .pg-hero{padding:64px 16px 60px}
  .pg-hero h1{font-size:1.85rem}
  .pg-section{padding:64px 16px}
  .pg-head h2,.pg-split h2{font-size:1.5rem}
  .pg-grid.c2,.pg-grid.c3,.pg-grid.c4,.pg-steps{grid-template-columns:1fr}
  .pg-stats{grid-template-columns:repeat(2,1fr)}
  .pg-split{grid-template-columns:1fr;gap:28px}
  .pg-split.rev > :first-child{order:0}
  .pg-legal{padding:26px 20px}
  .pg-toc ol{columns:1}
}