:root { --ink:#111; --muted:#777; --line:#e8e8e8; --bg:#fff; --soft:#f5f5f5; --blue:#3b82f6; }
* { box-sizing:border-box; margin:0; padding:0; }
html { font-size:112.5%; }
body { font-family:"Pretendard","Apple SD Gothic Neo","Noto Sans KR",sans-serif; color:var(--ink); background:var(--bg); line-height:1.6; }
a { color:inherit; text-decoration:none; }
ol { list-style:none; }
.container { max-width:1120px; margin:0 auto; padding:0 24px; }
.light { font-weight:300; }
.center { text-align:center; }
.big { font-size:1.4rem; margin-top:40px; }
.blue { color:var(--blue); }

.header { position:sticky; top:0; background:#fffffff2; backdrop-filter:blur(8px); border-bottom:1px solid var(--line); z-index:10; }
.header__inner { max-width:1120px; margin:0 auto; padding:0 24px; height:92px; display:flex; align-items:center; justify-content:space-between; }
.header__logo img { height:60px; display:block; }
.header__nav { display:flex; gap:48px; font-size:1rem; }
.header__nav a { padding:36px 0; border-bottom:2px solid transparent; }
.header__nav a:hover, .header__nav a.is-active { border-color:var(--ink); font-weight:600; }
.header__account { display:flex; gap:20px; font-size:.95rem; }

.hero { display:flex; align-items:center; justify-content:space-between; gap:40px; min-height:480px; padding-top:48px; padding-bottom:48px; }
.eyebrow { font-size:.85rem; letter-spacing:.1em; color:var(--muted); margin-bottom:16px; }
h1 { font-size:2.6rem; line-height:1.3; margin-bottom:20px; }
h2 { font-size:2.2rem; line-height:1.3; margin-bottom:16px; }
.lead { color:var(--muted); margin-bottom:32px; }
.actions { display:flex; gap:12px; }
.btn { display:inline-block; padding:14px 28px; border-radius:10px; font-size:1rem; font-weight:600; border:1px solid var(--ink); }
.btn--dark { background:var(--ink); color:#fff; }
.btn--line { background:#fff; }

.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; padding-bottom:48px; }
.card, .panel { border:1px solid var(--line); border-radius:20px; padding:28px; background:#fff; }
.card__icon { width:32px; height:32px; margin-bottom:16px; color:var(--blue); }
.card h3 { font-size:1.05rem; margin-bottom:8px; }
.card p { font-size:.95rem; color:var(--muted); }

.section { padding-top:72px; padding-bottom:72px; }
.flow { display:flex; flex-wrap:wrap; gap:16px; margin-top:40px; }
.flow li { flex:1; min-width:110px; text-align:center; padding:28px 12px; border:1px solid var(--line); border-radius:16px; background:var(--soft); font-size:1rem; }
.flow--plus li { background:#fff; }

.compare { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:32px; }
.panel { min-height:260px; display:flex; flex-direction:column; justify-content:space-between; }
.panel--gray { background:var(--soft); }
.panel small { letter-spacing:.1em; color:var(--muted); }
.panel p { text-align:center; font-size:1rem; color:var(--muted); }

.device { position:relative; width:420px; max-width:100%; aspect-ratio:1.3; flex-shrink:0; }
.device__screen { position:absolute; inset:0 0 18% 0; background:#1a1d21; border-radius:24px; }
.device__stand { position:absolute; left:32%; right:32%; bottom:0; height:40%; background:#d9dce0; border-radius:20px; display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:14px 0 8px; }
.device__stand span { font-size:.5rem; letter-spacing:.1em; color:#555; }
.device__stand i { width:70%; height:34%; background:#25282c; border-radius:8px; }

.footer { margin-top:32px; padding:24px 0 20px; background:#fff; border-top:3px solid var(--blue); font-size:.85rem; color:var(--muted); }
.footer__inner { max-width:1120px; margin:0 auto; padding:0 24px; display:flex; flex-direction:column; gap:14px; }
.footer__top { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.footer__top img { height:40px; display:block; }
.footer__policy { display:flex; flex-wrap:wrap; gap:6px 24px; color:var(--ink); }
.footer__policy a:hover { color:var(--blue); }
.footer__info { display:grid; grid-template-columns:repeat(3,1fr); gap:8px 32px; }
.footer__info li { display:grid; grid-template-columns:7.5em 1fr; color:var(--ink); }
.footer__info em { font-style:normal; color:var(--blue); font-weight:600; }
.footer small { color:var(--muted); }
@media (max-width:900px) { .footer__info { grid-template-columns:1fr; } }

@media (max-width:760px) {
  .header__nav { gap:20px; font-size:.9rem; }
  .hero { flex-direction:column; align-items:flex-start; }
  h1 { font-size:2rem; } h2 { font-size:1.6rem; }
  .compare { grid-template-columns:1fr; }
}

.slider { position:relative; overflow:hidden; }
.slider__track { display:flex; transition:transform .6s ease; }
.slide { flex:0 0 100%; }
.slide--a { background:#eaf2ff; }
.slide--b { background:#d9e8ff; }
.slide--c { background:#c7ddff; }
.slider__arrow { position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border:0; border-radius:50%; background:#ffffffcc; font-size:1.8rem; line-height:1; cursor:pointer; }
.slider__arrow:hover { background:#fff; }
.slider__arrow--prev { left:16px; }
.slider__arrow--next { right:16px; }
.slider__dots { position:absolute; left:0; right:0; bottom:20px; display:flex; justify-content:center; gap:10px; }
.slider__dots button { width:10px; height:10px; padding:0; border:0; border-radius:5px; background:#00000033; cursor:pointer; transition:width .3s,background .3s; }
.slider__dots button.is-active { width:28px; background:var(--ink); }

.intro { text-align:center; padding-top:80px; padding-bottom:40px; }
.intro h2 { font-size:2.6rem; letter-spacing:.06em; margin-bottom:20px; }
.intro .lead { max-width:760px; margin:0 auto; word-break:keep-all; }
@media (max-width:760px) { .intro { padding-top:56px; } .intro .lead br { display:none; } }
.card { position:relative; background:#fff; border:1px solid #dfe7f7; border-radius:24px; padding:32px 28px; box-shadow:none; transition:transform .25s,border-color .25s; }
.card:hover { transform:translateY(-6px); border-color:var(--blue); box-shadow:none; }
.card__icon { width:60px; height:60px; padding:15px; margin-bottom:22px; color:var(--blue); background:#e6efff; border-radius:20px;  transition:background .25s,color .25s; }
.card:hover .card__icon { background:var(--blue); color:#fff; }
.card h3 { font-size:1.1rem; letter-spacing:.04em; margin-bottom:6px; }

.hero__img { height:440px; width:auto; max-width:45%; object-fit:contain; flex-shrink:0; }
@media (max-width:760px) { .hero__img { height:auto; max-width:70%; align-self:center; } }

.steps { display:flex; gap:44px; margin-top:48px; }
.steps li { position:relative; flex:1; display:flex; flex-direction:column; align-items:center; gap:14px; padding:28px 8px 24px; background:#fff; border:1px solid #dfe7f7; border-radius:24px; transition:border-color .25s; }
.steps li:hover { border-color:var(--blue); }
.steps li:hover .card__icon { background:var(--blue); color:#fff; }
.steps .card__icon { margin:0; }
.steps li b { font-size:1.05rem; }
.steps li:not(:last-child)::after { content:"→"; position:absolute; right:-35px; top:50%; transform:translateY(-50%); width:26px; text-align:center; font-size:1.5rem; color:var(--blue); }
@media (max-width:900px) {
  .steps { flex-direction:column; gap:36px; }
  .steps li { flex-direction:row; justify-content:flex-start; padding:16px 24px; gap:18px; }
  .steps li:not(:last-child)::after { content:"↓"; right:auto; left:50%; top:auto; bottom:-34px; transform:translateX(-50%); }
}

/* 정책 페이지 */
.policy { max-width:880px; }
.policy__draft { background:#fff8e1; border:1px solid #ffe08a; border-radius:12px; padding:14px 18px; margin-bottom:32px; font-size:.9rem; }
.policy__art { margin-top:36px; }
.policy__art h3 { font-size:1.2rem; margin-bottom:12px; }
.policy p, .policy li { word-break:keep-all; }
.policy p { margin-bottom:10px; }
.policy ul, .policy ol { margin:0 0 10px 1.3em; }
.policy ul { list-style:disc; } .policy ol { list-style:decimal; }
.policy li { margin-bottom:6px; }
.policy__table { overflow-x:auto; margin:8px 0 12px; }
.policy table { width:100%; border-collapse:collapse; font-size:.9rem; min-width:520px; }
.policy th, .policy td { border:1px solid var(--line); padding:10px 12px; text-align:left; vertical-align:top; }
.policy th { background:var(--soft); }
mark.todo { background:#fff3bf; color:#8a5a00; padding:0 4px; border-radius:4px; font-size:.85em; }

.panel__img { height:300px; width:auto; max-width:100%; object-fit:contain; align-self:center; margin:12px 0; }

.flow--plus li { display:flex; flex-direction:column; align-items:center; gap:14px; padding:24px 8px 20px; border-color:var(--card-line); border-radius:var(--radius-card); transition:border-color .25s; }
.flow--plus li:hover { border-color:var(--blue); }
.flow--plus li:hover .card__icon { background:var(--blue); color:#fff; }
.flow--plus .card__icon { margin:0; }
.flow--plus li b { font-size:1.05rem; font-weight:600; }

.flow--plus { gap:44px; flex-wrap:nowrap; }
.flow--plus li { position:relative; }
.flow--plus li:not(:last-child)::after { content:"+"; position:absolute; right:-35px; top:50%; transform:translateY(-50%); width:26px; text-align:center; font-size:1.6rem; font-weight:300; color:var(--blue); }
@media (max-width:900px) {
  .flow--plus { flex-direction:column; gap:36px; }
  .flow--plus li:not(:last-child)::after { right:auto; left:50%; top:auto; bottom:-34px; transform:translateX(-50%); }
}

.card--side { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.card--side .card__icon { width:80px; height:80px; padding:20px; margin:0; flex-shrink:0; }