/* 산지온 메인 — 디자인시안 `산지온_메인.png` (2026-10-24)
 * 범위는 `.sj` 아래만. 색은 common.css 토큰(--forest 짙은 청록 · --clay 주황 CTA)을 읽는다 —
 * 관리자가 스킨을 바꾸면 이 화면도 같이 바뀐다. 모바일 먼저, 760px·1080px 에서 칸을 늘린다. */
.sj{--sj-wrap:1120px;background:var(--paper);color:var(--ink);font-family:var(--sans)}
.sj-wrap{max-width:var(--sj-wrap);margin:0 auto;padding:0 16px}

.sj-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 20px;border-radius:999px;
  font-weight:700;text-decoration:none;border:1.5px solid transparent;cursor:pointer;font-size:15px}
.sj-btn.lg{min-height:52px;padding:0 26px;font-size:16px}
.sj-btn.cta{background:var(--clay);color:#fff;box-shadow:0 8px 20px rgba(254,137,35,.28)}
.sj-btn.cta:hover{filter:brightness(.96)}
.sj-btn.cta:disabled{opacity:.6;cursor:wait}
.sj-btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.sj-btn.ghost:hover{background:rgba(255,255,255,.1)}
.sj-btn:focus-visible{outline:3px solid #fff;outline-offset:2px}

.sj-hero{background:linear-gradient(135deg,var(--forest) 0%,var(--side) 100%);color:#fff;padding:48px 0 44px}
.sj-hero .eyebrow{color:#FFD9A8;font-weight:700;font-size:15px;margin-bottom:12px}
.sj-hero h1{font-size:30px;line-height:1.3;font-weight:800;letter-spacing:-.02em;margin-bottom:14px}
.sj-hero .lede{font-size:16px;line-height:1.6;opacity:.92;margin-bottom:24px}
.sj-hero .acts{display:flex;flex-wrap:wrap;gap:10px}

.sj-jump{background:var(--card);border-bottom:1px solid var(--line2);position:sticky;top:0;z-index:5}
.sj-jump .sj-wrap{display:flex;gap:4px;overflow-x:auto}
.sj-jump a{flex:none;padding:14px 12px;color:var(--ink2);font-weight:600;text-decoration:none;font-size:15px}
.sj-jump a:hover{color:var(--forest)}

.sj-sec{padding:40px 0 8px}
.sj-sec h2{font-size:22px;font-weight:800;letter-spacing:-.02em;margin-bottom:6px;color:var(--ink)}
.sj-sec h2 small{font-size:14px;font-weight:600;opacity:.8}
.sj-sec .sub{color:var(--ink3);font-size:15px;margin-bottom:18px;line-height:1.55}

.sj-types{display:grid;gap:14px}
.sj-type{border-radius:var(--r-card);padding:22px;border:1px solid var(--line2)}
.sj-type.a{background:#FEF1E3;border-color:#F8D9B8}
.sj-type.b{background:#E6F5F9;border-color:#C6E6EE}
.sj-type .tag{font-weight:800;font-size:13px;letter-spacing:.06em;color:var(--clay)}
.sj-type.b .tag{color:var(--forest2)}
.sj-type h3{font-size:24px;font-weight:800;margin:4px 0 4px}
.sj-type>p{color:var(--ink2);margin-bottom:14px}
.sj-type ul{list-style:none;display:grid;gap:8px}
.sj-type li{background:var(--card);border-radius:12px;padding:12px 14px;display:grid;gap:2px}
.sj-type li span{color:var(--ink3);font-size:14px}

.sj-grid{display:grid;gap:12px;grid-template-columns:1fr}
.sj-tile{background:var(--card);border:1px solid var(--line2);border-radius:14px;padding:16px;display:grid;gap:4px;grid-template-columns:auto 1fr;align-items:start}
.sj-tile .ico{width:28px;height:28px;color:var(--forest);grid-row:span 2;margin-right:10px}
.sj-tile span{color:var(--ink3);font-size:14px}
.sj-tile.plain{grid-template-columns:1fr}

.sj-helps{list-style:none;display:grid;gap:10px;grid-template-columns:1fr}
.sj-helps li{background:var(--card);border:1px solid var(--line2);border-radius:14px;padding:14px 16px;display:grid;grid-template-columns:40px 1fr;column-gap:8px}
.sj-helps .no{grid-row:span 2;color:var(--clay);font-weight:800;font-size:20px}
.sj-helps li span:last-child{color:var(--ink3);font-size:14px}

.sj-card{background:var(--card);border:1px solid var(--line2);border-radius:var(--r-card);padding:22px}
.sj-card.dark{background:var(--forest);color:#fff;border-color:var(--forest)}
.sj-card.dark h2{color:#fff}
.sj-card.soft{background:#EEF6F8}
.sj-card.warm{background:#FEF3E8}
.sj-card h3{font-size:18px;font-weight:800;margin-bottom:10px}
.sj-card ul{padding-left:18px;display:grid;gap:6px;color:var(--ink2);font-size:14px;line-height:1.55}

.sj-fees{display:grid;gap:14px}
.sj-tbl{width:100%;border-collapse:collapse;font-size:14px}
.sj-tbl th,.sj-tbl td{padding:11px 0;border-bottom:1px solid var(--line2);text-align:left;vertical-align:top}
.sj-tbl th{width:38%;font-weight:700;color:var(--ink);padding-right:10px}
.sj-tbl td{color:var(--ink2)}
.sj-tbl .hl{color:var(--clay);font-size:18px}
.sj-settle{display:grid;gap:0;margin:12px 0 14px}
.sj-settle div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.18);font-size:15px}
.sj-settle dd{font-variant-numeric:tabular-nums;white-space:nowrap}
.sj-settle .total{border-bottom:0;padding-top:16px;font-size:20px;font-weight:800;color:#FFB766}
.sj-card .basis{font-size:15px}
.sj-card .note{font-size:13px;opacity:.8;margin-top:8px;line-height:1.5}

.sj-steps{list-style:none;display:grid;gap:10px;margin-bottom:18px}
.sj-steps li{background:var(--card);border:1px solid var(--line2);border-radius:14px;padding:14px 16px;display:grid;gap:2px}
.sj-steps .n{color:var(--clay);font-weight:800;font-size:13px}
.sj-steps li span:last-child{color:var(--ink3);font-size:14px}
.sj-policy{display:grid;gap:14px;margin-bottom:8px}

#consult{padding-bottom:48px}
.sj-form{display:grid;gap:14px}
.sj-fields{display:grid;gap:12px;grid-template-columns:1fr}
.sj-fields label{display:grid;gap:6px;font-weight:700;font-size:14px}
.sj-fields em{color:var(--danger);font-style:normal}
.sj-fields input,.sj-fields select,.sj-fields textarea{min-height:46px;border:1px solid var(--divider);border-radius:10px;padding:10px 12px;font:inherit;font-weight:400;background:#fff;color:var(--ink)}
.sj-fields textarea{min-height:90px;resize:vertical}
.sj-fields :focus-visible{outline:3px solid var(--forest2);outline-offset:1px}
.sj-consent{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink2);line-height:1.5}
.sj-consent input{width:20px;height:20px;margin-top:1px;flex:none}
.sj-err{color:var(--danger);font-weight:700}
.sj-done{background:#E6F5F9;border-radius:14px;padding:18px;display:grid;gap:6px}
.sj-form .sj-btn{justify-self:center;min-width:240px}

@media (min-width:760px){
  .sj-hero{padding:72px 0 64px}
  .sj-hero h1{font-size:44px}
  .sj-types{grid-template-columns:1fr 1fr}
  .sj-grid.four,.sj-helps{grid-template-columns:1fr 1fr}
  .sj-steps{grid-template-columns:repeat(4,1fr)}
  .sj-policy{grid-template-columns:1fr 1fr}
  .sj-fields{grid-template-columns:repeat(4,1fr)}
  .sj-fields .wide{grid-column:1/-1}
}
@media (min-width:1080px){
  .sj-grid.four,.sj-helps{grid-template-columns:repeat(4,1fr)}
  .sj-fees{grid-template-columns:1.25fr 1fr;align-items:start}
}