:root { --ink:#17241e; --muted:#55645c; --line:#d7e0db; --paper:#fff; --bg:#f5f8f6; --brand:#1f6b4f; --brand-soft:#e3efe9; --accent:#e8590c; }
  * { box-sizing: border-box; }
  body { margin:0; font-family:"Pretendard","Malgun Gothic","Apple SD Gothic Neo",sans-serif; font-size:17px; line-height:1.7; color:var(--ink); background:var(--bg); }
  .top { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:14px; height:58px; padding:0 22px; background:#fff; border-bottom:1px solid var(--line); }
  .top b { font-size:1.02rem; } .top span { color:var(--muted); font-size:.95rem; }
  .top a { margin-left:auto; color:var(--brand); font-weight:700; text-decoration:none; font-size:.95rem; }
  .shell { display:grid; grid-template-columns:270px minmax(0,1fr); }
  .side { position:sticky; top:58px; height:calc(100vh - 58px); overflow:auto; padding:18px 14px 30px; border-right:1px solid var(--line); background:#fbfcfb; }
  .side h4 { margin:18px 10px 6px; font-size:.82rem; letter-spacing:.06em; color:var(--muted); }
  .side h4:first-child { margin-top:0; }
  .side a { display:block; padding:7px 12px; border-radius:10px; color:var(--ink); text-decoration:none; font-size:.97rem; line-height:1.45; }
  .side a:hover { background:#eef3f0; }
  .side a[aria-current] { background:var(--brand-soft); color:var(--brand); font-weight:800; }
  .side a.is-key::after { content:"주요"; white-space:nowrap; display:inline-block; margin-left:6px; font-size:.72rem; padding:1px 6px; border-radius:6px; background:var(--accent); color:#fff; vertical-align:2px; }
  main { padding:30px 38px 80px; min-width:0; }
  .doc { max-width:1080px; }
  .crumb { color:var(--muted); font-size:.92rem; }
  h1 { font-size:1.9rem; line-height:1.35; margin:6px 0 10px; letter-spacing:-.01em; }
  .lead { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:26px; align-items:start; margin-bottom:26px; }
  .lead p { margin:0 0 12px; font-size:1.08rem; color:#2c3a33; }
  .result-thumb { display:block; width:100%; text-align:left; font:inherit; cursor:zoom-in; border:1px solid var(--line); border-radius:12px; background:#fff; padding:10px; }
  .result-thumb:hover { border-color:var(--brand); box-shadow:0 6px 18px rgba(17,40,30,.08); }
  .result-thumb small { display:flex; justify-content:space-between; color:var(--muted); font-size:.82rem; margin-bottom:6px; font-weight:700; }
  .result-thumb small em { font-style:normal; color:var(--brand); }
  /* 미리보기는 줄이지 않고 왼쪽 위를 원래 크기로 잘라 보여 준다(글자가 읽히게) */
  .result-thumb .crop { height:170px; overflow:hidden; border-radius:6px; border:1px solid var(--line); }
  .result-thumb .crop img { display:block; max-width:none; }
  .zoomable { cursor:zoom-in; }
  .lightbox { position:fixed; inset:0; z-index:100; display:grid; grid-template-rows:auto 1fr; background:rgba(14,22,18,.88); }
  .lightbox[hidden] { display:none; }
  .lightbox .bar { display:flex; align-items:center; gap:12px; padding:12px 18px; color:#fff; font-weight:700; }
  .lightbox .bar button { margin-left:auto; font:inherit; font-size:1rem; padding:6px 16px; border-radius:999px; border:0; background:#fff; color:var(--ink); cursor:pointer; }
  .lightbox .body { overflow:auto; padding:8px 18px 24px; }
  .lightbox .body img { display:block; max-width:none; margin:0 auto; background:#fff; border-radius:6px; box-shadow:0 12px 40px rgba(0,0,0,.4); }
  h2 { font-size:1.32rem; margin:40px 0 14px; display:flex; align-items:center; gap:10px; }
  h2 .no { display:inline-grid; place-items:center; width:30px; height:30px; border-radius:8px; background:var(--brand); color:#fff; font-size:.95rem; }
  .card { background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px 22px; }
  .need { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
  .need .card strong { display:block; margin-bottom:4px; }
  .need .card p { margin:0; color:var(--muted); font-size:.95rem; line-height:1.55; }
  .k { display:inline-block; padding:0 6px; border-radius:6px; background:#eef3f0; font-weight:700; }
  .shot { margin:0 0 22px; }
  .shot .frame { position:relative; overflow-x:auto; border:1px solid #c9d3ce; border-radius:10px; background:#fff; box-shadow:0 8px 22px rgba(17,40,30,.07); }
  .shot .frame img { display:block; }
  .shot figcaption { margin-top:8px; font-size:.93rem; color:var(--muted); }
  .shot .tag { position:sticky; left:10px; top:10px; float:left; margin:10px 0 -40px 10px; z-index:2; background:rgba(23,36,30,.86); color:#fff; font-size:.8rem; font-weight:700; padding:3px 9px; border-radius:6px; }
  .pin { position:absolute; display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--accent); color:#fff; font-size:.82rem; font-weight:800; box-shadow:0 4px 10px rgba(232,89,12,.35); }
  .pinbox { position:absolute; border:2px solid var(--accent); border-radius:6px; }
  .legend { margin:10px 0 0; padding:0; list-style:none; display:grid; gap:6px; }
  .legend li { display:grid; grid-template-columns:26px 1fr; gap:10px; align-items:start; font-size:.97rem; }
  .legend .n { display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--accent); color:#fff; font-size:.8rem; font-weight:800; margin-top:2px; }
  .warn { border-left:4px solid var(--accent); background:#fff8f3; }
  .warn p { margin:0 0 6px; } .warn p:last-child { margin:0; }
  .pager { display:flex; justify-content:space-between; gap:12px; margin-top:44px; }
  .pager a { flex:1; display:block; padding:14px 18px; border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--ink); text-decoration:none; }
  .pager a small { display:block; color:var(--muted); font-size:.82rem; }
  .pager a:last-child { text-align:right; }
  @media (max-width:980px) { .shell { grid-template-columns:1fr; } .side { position:static; height:auto; border-right:0; border-bottom:1px solid var(--line); } main { padding:22px 16px 60px; } .lead { grid-template-columns:1fr; } .need { grid-template-columns:1fr; } }

/* 첫 화면·접힌 상세·좁은 화면 목록을 위한 구조만 보탠다. 위 시제품 값은 유지한다. */
.top b a { color:inherit; font:inherit; }
.side-toggle { display:none; font:inherit; color:var(--brand); background:#fff; border:1px solid var(--line); padding:10px 16px; cursor:pointer; }
.feature-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.feature-cards a, .start-card { color:var(--ink); text-decoration:none; }
.feature-cards p { margin:6px 0 0; color:var(--muted); font-size:.95rem; }
.audit-detail { margin-top:26px; }
.audit-detail summary { cursor:pointer; color:var(--brand); font-weight:700; }
.audit-table-wrap { max-width:100%; overflow-x:auto; }
table { border-collapse:collapse; width:100%; background:#fff; }
th, td { border:1px solid var(--line); padding:10px 14px; text-align:left; vertical-align:top; }
th { background:var(--brand-soft); }
.audit-pricing-table th:first-child { width:26%; }
.audit-facts { overflow-wrap:anywhere; }
.audit-facts div { display:flex; gap:12px; }
.audit-facts dd { margin:0; }
.audit-actions { display:flex; flex-wrap:wrap; gap:14px; }
.audit-actions a, .audit-contact a { color:var(--brand); }
.pin-stage { position:relative; }
.gm-view img { cursor:zoom-in; }
.zoom-open { overflow:hidden; }
:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
@media (max-width:980px) {
  .side-toggle { display:block; }
  .guide-ready .side:not(.is-open) { display:none; }
  .feature-cards { grid-template-columns:1fr; }
  .top { height:auto; min-height:58px; flex-wrap:wrap; }
  .top span { display:none; }
  .gm-head { flex-wrap:wrap; }
  .gm-controls { flex-wrap:wrap; }
}

/* 11-04 디자인 보정(메인): 그림 틀은 그림 폭만큼·꼬리표는 머리 띠·긴 작업창은 잘라 보이고 눌러서 전체·읽는 장·첫 화면 */
.shot { width:fit-content; max-width:100%; }
.shot .frame { width:fit-content; max-width:100%; overflow:hidden; }
.shot .tag { position:static; float:none; display:block; margin:0; border-radius:0; padding:6px 12px; background:#2b3a33; color:#fff; font-size:.8rem; font-weight:700; line-height:1.5; }
.shot .pic { position:relative; overflow-x:auto; }
.shot .pic img { display:block; }
.shot.is-tall .pic { max-height:600px; overflow:hidden; }
.shot.is-tall .pic::after { content:""; position:absolute; left:0; right:0; bottom:0; height:96px; background:linear-gradient(rgba(255,255,255,0), #fff 85%); pointer-events:none; }
.shot .more { position:absolute; left:50%; bottom:14px; z-index:1; transform:translateX(-50%); padding:6px 16px; border-radius:999px; background:var(--brand); color:#fff; font-size:.85rem; font-weight:700; white-space:nowrap; pointer-events:none; box-shadow:0 6px 16px rgba(17,40,30,.25); }
.pane-row { display:flex; flex-wrap:wrap; gap:22px; align-items:flex-start; }
.pane-row .shot { margin:0; }
/* 설명 글이 그림보다 넓어지지 않게(그림 폭에 맞춰 줄바꿈) */
.shot figcaption, .shot .legend { width:0; min-width:100%; }
.lead.no-thumb { grid-template-columns:minmax(0,1fr); }
.section-intro { margin:-4px 0 12px; color:#2c3a33; }
.read { display:grid; gap:24px; }
.read.has-aside { grid-template-columns:minmax(0,1fr) auto; align-items:start; }
.read-main { display:grid; gap:14px; align-content:start; }
.read-aside { display:grid; gap:20px; }
.read-aside .shot { margin:0; }
.card h2.sub { display:flex; align-items:center; margin:0 0 8px; font-size:1.08rem; }
.checks { margin:0; padding:0; list-style:none; display:grid; gap:7px; }
.checks li { position:relative; padding-left:24px; line-height:1.6; }
.checks li::before { content:""; position:absolute; left:3px; top:.62em; width:8px; height:8px; border-radius:50%; background:#fff; border:2px solid var(--brand); }
.faq-item .q { display:inline-grid; place-items:center; flex:none; width:26px; height:26px; margin-right:10px; border-radius:8px; background:var(--brand); color:#fff; font-size:.85rem; }
.faq-item p { margin:0; color:#2c3a33; }
.download-card .audit-facts { margin:0 0 14px; font-size:.92rem; color:var(--muted); }
.download-card .audit-facts dt { min-width:64px; font-weight:700; color:var(--ink); }
.audit-actions { align-items:center; }
.audit-actions a { display:inline-flex; align-items:center; padding:8px 16px; border-radius:999px; border:1px solid var(--line); background:#fff; font-weight:700; font-size:.93rem; text-decoration:none; }
.audit-actions a.audit-primary { background:var(--brand); border-color:var(--brand); color:#fff; }
.hero p { margin:0; font-size:1.08rem; color:#2c3a33; max-width:760px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.btn { display:inline-flex; align-items:center; padding:9px 18px; border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--ink); font-weight:700; font-size:.95rem; text-decoration:none; }
.btn:hover { border-color:var(--brand); }
.btn.primary { background:var(--brand); border-color:var(--brand); color:#fff; }
section[data-guide-group] h2 { margin-top:36px; }
.start-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.start-card .step-no { display:inline-grid; place-items:center; width:28px; height:28px; margin-bottom:8px; border-radius:50%; background:var(--brand); color:#fff; font-size:.9rem; font-weight:800; }
.start-card strong, .feature-cards strong { display:block; font-size:1.05rem; }
.start-card p { margin:4px 0 0; color:var(--muted); font-size:.95rem; line-height:1.55; }
.feature-cards .card, .start-card { transition:border-color .15s, box-shadow .15s; }
.feature-cards .card:hover, .start-card:hover { border-color:var(--brand); box-shadow:0 6px 18px rgba(17,40,30,.08); }
.feature-cards .is-key strong::after { content:"주요"; display:inline-block; margin-left:8px; padding:1px 7px; border-radius:6px; background:var(--accent); color:#fff; font-size:.72rem; vertical-align:2px; }
.pager a { flex:0 1 calc(50% - 6px); }
.pager a:last-child { text-align:left; }
.pager a.next { margin-left:auto; text-align:right; }
@media (max-width:1180px) { .read.has-aside { grid-template-columns:minmax(0,1fr); } }
@media (max-width:980px) { .start-steps { grid-template-columns:1fr; } .pager { flex-direction:column; } .pager a, .pager a.next { flex:1 1 auto; margin-left:0; } }
/* 좁은 화면: 그리드 칸이 그림 원래 폭만큼 늘어나 가로로 넘치지 않게(그림은 틀 안에서 옆으로 밀어 보기) */
.read, .read-main, .read-aside { grid-template-columns:minmax(0,1fr); }
.read.has-aside { grid-template-columns:minmax(0,1fr) auto; }
.lead > *, .read > *, .result-thumb { min-width:0; }
.result-thumb .crop { max-width:100%; }
@media (max-width:1180px) { .read.has-aside { grid-template-columns:minmax(0,1fr); } }
@media (max-width:980px) { .lead { grid-template-columns:minmax(0,1fr); } }
.checks li, .faq-item p, .card p { overflow-wrap:anywhere; }
/* 범례는 그림이 좁아도 읽기 편한 폭으로(그림 설명 figcaption 만 그림 폭에 맞춘다) */
.shot .legend { width:auto; min-width:0; max-width:760px; }
/* 한국어는 낱말 중간에서 줄을 바꾸지 않는다(「대/조합니다」 방지). 띄어쓰기 없는 긴 경로·영문은 overflow-wrap 이 받는다. */
main, .side { word-break:keep-all; overflow-wrap:break-word; }
@media (max-width:980px) { .side-toggle { margin:12px 16px 0; border-radius:10px; padding:9px 16px; font-weight:700; } }