:root {
  --ink: #142039;
  --muted: #667085;
  --line: #dce3eb;
  --paper: #ffffff;
  --wash: #f3f7fb;
  --blue: #1769e0;
  --blue-dark: #0c4eae;
  --cyan: #2bc6d9;
  --green: #158765;
  --amber: #a55b05;
  --shadow: 0 16px 50px rgba(29, 48, 79, .09);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--wash);
  color: var(--ink);
  font-family: Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.shell { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }
.site-header {
  position: sticky; top: 0; z-index: 10;
  border-bottom: 1px solid rgba(220,227,235,.9);
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(16px);
}
.header-inner { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; font-weight: 850; letter-spacing: -.03em; }
.brand-mark { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: white; background: linear-gradient(140deg, var(--blue), var(--cyan)); box-shadow: 0 8px 20px rgba(23,105,224,.22); font-size: .88rem; }
.header-nav { display: flex; align-items: center; gap: 26px; }
.header-nav a { text-decoration: none; color: #475467; font-weight: 700; font-size: .92rem; }
.header-nav a:hover, .header-nav a:focus-visible { color: var(--blue); }
.hero { padding: 78px 0 52px; position: relative; overflow: hidden; }
.hero::after { content:""; position:absolute; width: 420px; height:420px; right:-160px; top:-260px; border-radius:50%; background:radial-gradient(circle, rgba(43,198,217,.18), transparent 68%); pointer-events:none; }
.eyebrow { display: inline-flex; align-items:center; gap:8px; color: var(--blue-dark); font-weight: 850; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; }
.eyebrow::before { content:""; width: 9px; height: 9px; border-radius: 3px; background: var(--cyan); transform: rotate(45deg); }
h1 { margin: 14px 0 16px; max-width: 800px; font-size: clamp(2.35rem, 6vw, 4.8rem); line-height: 1.06; letter-spacing: -.065em; }
.hero p { max-width: 650px; margin:0; color:#526071; font-size: clamp(1rem, 2.2vw, 1.18rem); }
.quick-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.quick-row a { padding:10px 14px; border-radius:999px; border:1px solid var(--line); background:#fff; text-decoration:none; font-weight:750; font-size:.9rem; box-shadow:0 6px 16px rgba(29,48,79,.05); }
.quick-row a:hover, .quick-row a:focus-visible { border-color:#8db6ee; color:var(--blue-dark); transform:translateY(-1px); }
.section-head { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:20px; }
.section-head h2 { margin:0; font-size:1.5rem; letter-spacing:-.04em; }
.section-head p { margin:0; color:var(--muted); font-size:.92rem; }
.app-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:18px; padding-bottom:84px; }
.app-card { grid-column:span 4; display:flex; flex-direction:column; min-height:268px; padding:25px; border:1px solid var(--line); border-radius:24px; background:var(--paper); box-shadow:var(--shadow); transition: transform .18s ease, box-shadow .18s ease; }
.app-card:hover { transform:translateY(-3px); box-shadow:0 22px 60px rgba(29,48,79,.13); }
.app-top { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.app-icon { width:52px; height:52px; display:grid; place-items:center; border-radius:15px; color:white; font-weight:900; letter-spacing:-.05em; background:var(--accent, var(--blue)); }
.app-icon.has-image { overflow:hidden; background:#fff; border:1px solid rgba(20,32,57,.09); }
.app-icon img { display:block; width:100%; height:100%; object-fit:cover; }
.app-icon.logo-beforeafter img { width:400%; max-width:none; height:100%; object-fit:fill; }
.app-icon.logo-saion img { width:150%; max-width:none; height:150%; object-fit:cover; transform:translate(-16.7%,-8%); }
.status { display:inline-flex; align-items:center; padding:5px 9px; border-radius:999px; background:#eaf8f3; color:var(--green); font-size:.75rem; font-weight:850; }
.status.dev { background:#fff4e5; color:var(--amber); }
.app-card h3 { margin:20px 0 3px; font-size:1.25rem; letter-spacing:-.035em; }
.app-card .kind { margin:0 0 10px; color:var(--blue-dark); font-size:.78rem; font-weight:850; text-transform:uppercase; letter-spacing:.06em; }
.app-card .desc { margin:0; color:var(--muted); font-size:.93rem; }
.card-links { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:auto; padding-top:22px; }
.card-links a { min-height:44px; display:grid; place-items:center; border-radius:12px; border:1px solid var(--line); text-decoration:none; font-size:.88rem; font-weight:800; }
.card-links a:first-child { background:var(--ink); border-color:var(--ink); color:white; }
.card-links a:hover, .card-links a:focus-visible { outline:3px solid rgba(23,105,224,.18); outline-offset:1px; }
.info-band { margin:0 auto 80px; padding:34px 30px; border-radius:24px; color:white; background:linear-gradient(115deg,#10223f,#174a78); display:grid; grid-template-columns:1fr; gap:20px; align-items:center; justify-items:center; text-align:center; }
.info-band h2 { margin:0 0 8px; letter-spacing:-.035em; }
.info-band p { max-width:720px; margin:0 auto; color:#cbd8e8; }
.info-points { display:grid; gap:9px; justify-items:start; text-align:left; }
.info-points span { padding-left:20px; position:relative; font-weight:700; }
.info-points span::before { content:""; position:absolute; left:0; top:.68em; width:7px; height:7px; border-radius:50%; background:var(--cyan); }
.doc-wrap { padding:58px 0 90px; }
.crumbs { margin-bottom:24px; color:var(--muted); font-size:.88rem; }
.crumbs a { color:var(--blue-dark); font-weight:800; text-decoration:none; }
.doc-grid { display:grid; grid-template-columns:230px minmax(0,1fr); gap:24px; align-items:start; }
.side-card { position:sticky; top:96px; padding:20px; background:#fff; border:1px solid var(--line); border-radius:18px; }
.side-app { display:flex; align-items:center; gap:12px; padding-bottom:18px; margin-bottom:14px; border-bottom:1px solid var(--line); }
.side-app .app-icon { flex:0 0 42px; width:42px; height:42px; border-radius:13px; font-size:.8rem; }
.side-app strong { line-height:1.25; }
.side-nav { display:grid; gap:6px; }
.side-nav a { padding:9px 10px; border-radius:10px; text-decoration:none; color:#536174; font-size:.88rem; font-weight:750; }
.side-nav a.active { color:var(--blue-dark); background:#edf5ff; }
.doc { min-width:0; padding:clamp(24px,5vw,54px); border:1px solid var(--line); border-radius:24px; background:#fff; box-shadow:var(--shadow); }
.doc-badge { display:inline-flex; padding:6px 10px; border-radius:999px; color:var(--blue-dark); background:#edf5ff; font-size:.76rem; font-weight:850; }
.doc h1 { max-width:none; margin:12px 0 8px; font-size:clamp(2rem,5vw,3.45rem); }
.updated { margin:0 0 34px; color:var(--muted); font-size:.9rem; }
.doc-callout { padding:18px 20px; margin:0 0 30px; border-left:4px solid var(--cyan); border-radius:4px 14px 14px 4px; background:#f1f8fb; color:#34465a; }
.doc section { scroll-margin-top:100px; padding:3px 0 14px; }
.doc h2 { margin:28px 0 10px; font-size:1.25rem; letter-spacing:-.025em; }
.doc h3 { margin:20px 0 7px; font-size:1.03rem; }
.doc p { margin:0 0 12px; color:#465568; }
.doc ul { margin:8px 0 16px; padding-left:22px; color:#465568; }
.doc li { margin:6px 0; }
.policy-table-wrap { overflow-x:auto; margin:14px 0; border:1px solid var(--line); border-radius:14px; }
.policy-table { width:100%; min-width:720px; border-collapse:collapse; font-size:.9rem; line-height:1.55; }
.policy-table th, .policy-table td { padding:13px 14px; border-bottom:1px solid var(--line); border-right:1px solid var(--line); vertical-align:top; text-align:left; }
.policy-table th:last-child, .policy-table td:last-child { border-right:0; }
.policy-table tr:last-child td { border-bottom:0; }
.policy-table th { background:#f3f7fb; color:#26364c; font-weight:850; }
.policy-table td { color:#465568; }
.policy-note { padding:13px 15px; border-radius:12px; background:#f7f9fc; font-size:.9rem; }
.faq { display:grid; gap:10px; margin-top:15px; }
details { border:1px solid var(--line); border-radius:14px; background:#fff; }
summary { padding:16px 18px; cursor:pointer; list-style:none; font-weight:800; }
summary::-webkit-details-marker { display:none; }
summary::after { content:"+"; float:right; color:var(--blue); font-size:1.25rem; line-height:1; }
details[open] summary::after { content:"−"; }
details p { padding:0 18px 17px; margin:0 !important; }
.contact-box { display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center; padding:20px; border-radius:16px; background:#10223f; color:#fff; }
.contact-box p { color:#ccdae9; margin:3px 0 0; }
.contact-box a { padding:10px 14px; border-radius:10px; background:white; color:#10223f; font-weight:850; text-decoration:none; white-space:nowrap; }
footer { border-top:1px solid var(--line); background:#fff; }
.footer-inner { min-height:110px; display:flex; align-items:center; justify-content:space-between; gap:24px; color:var(--muted); font-size:.84rem; }
.footer-inner a { color:var(--ink); font-weight:750; text-decoration:none; }

@media (max-width: 900px) {
  .app-card { grid-column:span 6; }
  .doc-grid { grid-template-columns:1fr; }
  .side-card { position:static; display:flex; align-items:center; justify-content:space-between; gap:14px; }
  .side-app { margin:0; padding:0 16px 0 0; border:0; border-right:1px solid var(--line); }
  .side-nav { grid-template-columns:1fr 1fr; }
}
@media (max-width: 620px) {
  .shell { width:min(100% - 24px,1120px); }
  .header-inner { min-height:62px; }
  .header-nav a:first-child { display:none; }
  .hero { padding:52px 0 38px; }
  h1 { font-size:2.55rem; }
  .section-head { display:block; }
  .section-head p { margin-top:6px; }
  .app-card { grid-column:span 12; min-height:245px; }
  .info-band { grid-template-columns:1fr; gap:20px; padding:24px; }
  .doc-wrap { padding:30px 0 60px; }
  .doc { padding:24px 20px; border-radius:19px; }
  .side-card { display:block; }
  .side-app { margin-bottom:12px; padding:0 0 12px; border-right:0; border-bottom:1px solid var(--line); }
  .contact-box { grid-template-columns:1fr; }
  .contact-box a { text-align:center; }
  .footer-inner { min-height:120px; align-items:flex-start; justify-content:center; flex-direction:column; gap:5px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { transition:none !important; }
}