/* pages/detail.php 전용 스타일 (/{cat}/{slug}). 공용 컴포넌트는 css/gpc-theme.css 참고. */

/* 목차 클릭 시 부드러운 스크롤 이동(.det-sec의 scroll-margin-top이 고정 헤더 여백을 잡아줌) */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

.det-hero__cta { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }

.det-wrap { max-width: var(--wrap); margin: 0 auto; padding: clamp(36px,5vw,64px) clamp(20px,6vw,64px) clamp(56px,8vw,88px); display: grid; grid-template-columns: 210px 1fr; gap: clamp(28px,4vw,60px); align-items: start; }
@media (max-width: 860px) { .det-wrap { grid-template-columns: 1fr; } .det-toc { display: none; } }

.det-toc { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 2px; }
.det-toc__t { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--muted); margin-bottom: 12px; }
.det-toc a { display: flex; gap: 10px; align-items: baseline; padding: 8px 10px; border-radius: 8px; font-size: 14px; color: #4a5772; transition: background .15s, color .15s; }
.det-toc a:hover { background: var(--bg-soft); color: var(--navy); }
.det-toc a b { font-family: ui-monospace, monospace; font-size: 11px; color: var(--blue); font-weight: 600; }

.det-sec { scroll-margin-top: 96px; padding-bottom: clamp(34px,5vw,52px); margin-bottom: clamp(34px,5vw,52px); border-bottom: 1px solid var(--border); }
.det-sec:last-child { border-bottom: 0; margin-bottom: 0; }
.det-sec__head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 20px; }
.det-sec__no { font-family: ui-monospace, monospace; font-size: 13px; font-weight: 600; color: var(--blue); }
.det-sec__t { font-family: var(--serif); font-weight: 600; font-size: clamp(21px,2.6vw,28px); color: var(--navy); margin: 0; letter-spacing: -.01em; }
.det-prose { font-size: 15.5px; line-height: 1.85; color: #33405c; }
.det-prose p { margin: 0 0 14px; } .det-prose ul, .det-prose ol { margin: 0 0 14px; padding-left: 20px; } .det-prose li { margin: 6px 0; }
.det-prose h3 { font-size: 18px; color: var(--navy); margin: 26px 0 10px; }
.det-prose > :first-child { margin-top: 0; }
.det-prose > :last-child { margin-bottom: 0; }
.det-prose strong { color: var(--navy); font-weight: 700; }

/* 규격 요약표 — 박스 대신 헤어라인 등록부 형식(카테고리 목록과 동일 언어) */
.det-spec { display: block; overflow-x: auto; margin: 0 0 24px; }
.det-prose table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.det-prose th, .det-prose td { padding: 13px 16px 13px 0; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; line-height: 1.6; }
.det-prose tr:first-child th, .det-prose tr:first-child td { border-top: 1px solid var(--border); }
.det-prose th { width: 32%; min-width: 108px; font-weight: 600; color: var(--muted); font-size: 13px; letter-spacing: .01em; }
.det-prose td { color: var(--navy); font-weight: 600; }

/* 안내 문단 — 대상이 아닌 방문자를 다른 메뉴로 돌리는 짧은 노트 */
.det-prose .det-note { padding-left: 16px; border-left: 2px solid var(--gold); color: var(--muted); font-size: 14.5px; }
.det-prose .det-note a { color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.det-prose a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }

/* FAQ — 박스 없이 헤어라인 구분 + 회전 아이콘 애니메이션(/community/faq 와 동일 컴포넌트) */
.det-faq__item { border-bottom: 1px solid var(--border); }
.det-faq__item:last-child { border-bottom: 0; }
.det-faq__q { width: 100%; margin: 0; border: 0; background: none; font-family: inherit; text-align: left; cursor: pointer; padding: 20px 4px; font-weight: 600; font-size: 15.5px; color: var(--navy); display: flex; justify-content: space-between; align-items: center; gap: 16px; transition: color .15s; }
.det-faq__q:hover { color: var(--blue); }
.det-faq__icon { position: relative; width: 16px; height: 16px; flex: none; color: var(--blue); transition: transform .4s cubic-bezier(.65,0,.35,1); }
.det-faq__icon::before, .det-faq__icon::after { content: ''; position: absolute; top: 50%; left: 50%; background: currentColor; border-radius: 1px; }
.det-faq__icon::before { width: 14px; height: 2px; transform: translate(-50%,-50%); }
.det-faq__icon::after { width: 2px; height: 14px; transform: translate(-50%,-50%); transition: transform .4s cubic-bezier(.65,0,.35,1); }
.det-faq__q[aria-expanded="true"] .det-faq__icon { transform: rotate(180deg); }
.det-faq__q[aria-expanded="true"] .det-faq__icon::after { transform: translate(-50%,-50%) rotate(90deg); }
.det-faq__a-wrap { max-height: 0; overflow: hidden; transition: max-height .4s cubic-bezier(.65,0,.35,1); }
.det-faq__a { padding: 0 4px 20px; font-size: 14.5px; line-height: 1.75; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .det-faq__icon, .det-faq__icon::after, .det-faq__a-wrap { transition: none; } }

/* 관련 인증 — 카드 그리드 대신 등록부 리스트(/system 카테고리 목록과 동일 언어) */
.det-related { display: flex; flex-direction: column; }
.det-rcard { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 6px 20px 22px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 15.5px; color: var(--navy); font-family: var(--serif); transition: color .18s; }
.det-related .det-rcard:first-child { border-top: 1px solid var(--border); }
.det-rcard::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; background: var(--gold); transform: scaleY(0); transform-origin: top; transition: transform .25s; }
.det-rcard:hover { color: var(--blue); }
.det-rcard:hover::before { transform: scaleY(1); }
.det-rcard svg { color: var(--blue); flex: none; opacity: .4; transition: opacity .2s, transform .2s; }
.det-rcard:hover svg { opacity: 1; transform: translateX(4px); }

.det-empty { padding: 48px 4px; color: var(--muted); font-size: 15px; line-height: 1.8; border-top: 1px solid var(--border); }

.det-cta { max-width: var(--wrap); margin: 0 auto clamp(56px,8vw,90px); padding: clamp(36px,5vw,52px) clamp(20px,6vw,64px) 0; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
.det-cta__t { font-size: clamp(18px,2.4vw,24px); font-weight: 700; font-family: var(--serif); color: var(--navy); }
.det-cta__s { font-size: 14px; color: var(--muted); margin-top: 8px; }