/* ============================================================
   detail.css — 사업 상세 내용 스타일
   팝업 안에서 불러올 때와, 그 페이지를 주소로 직접 열 때
   둘 다 같은 모습이 되도록 공통으로 씁니다.
   ============================================================ */

:root{
  --paper:#EDEFEC;
  --ink:#14181A;
  --muted:#5C666A;
  --rule:#D3D8D2;
  --panel:#0E181D;
  --panel-2:#16242B;
  --panel-line:#24373F;
  --mint:#4FD1B0;
  --amber:#E39B2E;
  --accent:#0E6B5B;
  --sans:'IBM Plex Sans KR', system-ui, -apple-system, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, Menlo, monospace;
}

/* ── 본문 ───────────────────────────────────── */
.detail{font-family:var(--sans); color:#DCE6E8; line-height:1.75;}
.detail *{box-sizing:border-box;}

/* 글은 읽기 좋은 폭까지만. 사진·영상은 감싸지 말고 밖에 두세요. */
.detail .col{max-width:68ch;}

.detail .status{font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--mint); margin:0 0 10px;}
.detail h2{font-size:clamp(21px,3.4vw,28px); line-height:1.35; font-weight:700; letter-spacing:-.03em; margin:0 0 14px; color:#F2F5F3;}
.detail h3{font-size:12px; font-family:var(--mono); letter-spacing:.14em; color:var(--mint); margin:30px 0 12px; font-weight:500;}

.detail .tags{display:flex; flex-wrap:wrap; gap:7px; margin:0 0 24px; padding:0; list-style:none;}
.detail .tags li{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; color:#8FA5AC; border:1px solid var(--panel-line); border-radius:99px; padding:3px 10px;}

.detail p{font-size:14.5px; font-weight:300; line-height:1.85; color:#B9C8CC; margin:0 0 18px;}
.detail p.lead{font-size:15.5px; color:#DCE6E8;}
.detail a{color:var(--mint);}

.detail ul.points{margin:0 0 22px; padding:0; list-style:none;}
.detail ul.points li{position:relative; padding-left:18px; font-size:14px; font-weight:300; color:#B9C8CC; margin-bottom:7px;}
.detail ul.points li::before{content:"▸"; position:absolute; left:0; color:var(--mint); font-size:11px;}

/* ── 사진·영상 ──────────────────────────────── */
.detail figure{margin:0 0 22px;}
.detail figure img{display:block; width:100%; height:auto; border-radius:4px; border:1px solid var(--panel-line); background:var(--panel-2);}
.detail .ratio{position:relative; width:100%; aspect-ratio:16/9; border-radius:4px; overflow:hidden; border:1px solid var(--panel-line); background:#000;}
.detail .ratio iframe, .detail .ratio video{position:absolute; inset:0; width:100%; height:100%; border:0; background:#000;}
.detail figcaption{font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:#7E939B; margin-top:9px;}

/* 사진 두 장을 나란히 두고 싶을 때 <div class="grid2"> 로 감싸세요 */
.detail .grid2{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:22px;}
.detail .grid2 figure{margin:0;}
.detail .grid2 figure img{aspect-ratio:4/3; object-fit:cover;}
@media (max-width:720px){ .detail .grid2{grid-template-columns:1fr;} }

/* ── 문의 버튼 ──────────────────────────────── */
.detail .cta{margin-top:6px; padding-top:20px; border-top:1px solid var(--panel-line); display:flex; align-items:center; gap:14px 20px; flex-wrap:wrap;}
.detail .cta a{display:inline-block; text-decoration:none; font-size:14px; font-weight:500; background:var(--mint); color:var(--panel); padding:11px 22px; border-radius:4px; transition:background .18s ease;}
.detail .cta a:hover{background:#6BE0C3;}
.detail .cta small{font-family:var(--mono); font-size:11px; color:#7E939B; letter-spacing:.06em;}

/* ── 이 페이지를 주소로 직접 열었을 때만 적용 ── */
body.detail-page{
  margin:0; min-height:100vh; background:var(--panel);
  padding:clamp(28px,6vw,72px) clamp(20px,5vw,48px);
  -webkit-font-smoothing:antialiased;
}
body.detail-page .detail{max-width:1040px; margin:0 auto;}
body.detail-page .backlink{
  display:inline-block; font-family:var(--mono); font-size:11.5px; letter-spacing:.12em;
  color:#7E939B; text-decoration:none; margin-bottom:28px;
}
body.detail-page .backlink:hover{color:var(--mint);}
body.detail-page :focus-visible{outline:2px solid var(--mint); outline-offset:3px;}

/* 팝업 안에서는 돌아가기 링크를 감춥니다 */
.layer .backlink{display:none;}