/* 파일명: guide.css | 경로: public_html/assets/css/ | 기능: 가이드 목록·글(templates/guide.php·guide-post.php) 전용 - header.php 가 그 두 화면에서만 불러온다 | 0.11.0 (2026-10-08)
   색은 새로 짓지 않고 공용 토큰(app.css :root)만 쓴다. 본문은 공용 .prose 위에 읽기 좋은 간격만 더한다. */

/* ── 목록: 카드 격자(0.13.0) - 카드 안쪽 여백 + 둥근 썸네일 + 제목 1줄·요약 N줄(카드 폭 전체) + 아래 줄(날짜 | 화살표)
   화살표는 사이트 테마색(--brand). 복제 사이트는 공용 토큰만 바꾸면 따라간다 ── */
.guide-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}
.guide-card{display:flex;flex-direction:column;gap:18px;min-width:0;padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);transition:box-shadow .2s,transform .2s}
.guide-card:hover{box-shadow:0 10px 30px rgb(24 43 77 / 10%);transform:translateY(-2px)}
.guide-card-cover{display:block;aspect-ratio:16/10;overflow:hidden;border-radius:14px;background:var(--soft)}
.guide-card-cover img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s}
.guide-card:hover .guide-card-cover img{transform:scale(1.04)}
.guide-card-body{display:flex;flex-direction:column;gap:10px;flex:1;min-width:0;padding:0 6px 2px}
.guide-card h2{margin:0;font-size:19px;font-weight:800;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.guide-card h2 a{color:var(--brand)}.guide-card h2 a:hover{text-decoration:underline;text-underline-offset:3px}
.guide-card-summary{margin:0;color:var(--muted);font-size:15px;line-height:1.6;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--lines,2);line-clamp:var(--lines,2);overflow:hidden}
/* 아래 줄: 날짜는 왼쪽, 화살표는 오른쪽 - 요약과 칸을 나눠 요약이 카드 폭을 다 쓴다 */
.guide-card-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.guide-card time{font-size:13px;color:var(--muted)}
.guide-card-go{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--brand);color:#fff;flex:none;transition:transform .2s,box-shadow .2s}
/* 공용 a:hover(진한 파랑 글자)가 화살표를 배경색과 같게 만들지 않도록 호버·포커스에도 흰색을 유지한다 */
.guide-card-go:hover,.guide-card-go:focus-visible,.guide-card:hover .guide-card-go{color:#fff}
.guide-card:hover .guide-card-go{transform:rotate(45deg);box-shadow:0 4px 12px color-mix(in srgb,var(--brand) 30%,transparent)}

/* ── 글 ── 폭은 사이트 메뉴(.container)와 같게 쓴다(0.13.0 - 780px 에서 넓힘) */
.guide-article{max-width:none}
.guide-meta{margin:12px 0 0;font-size:14px;color:var(--muted)}.guide-meta time{white-space:nowrap}
.guide-cover{display:block;width:100%;margin:0 0 32px;border-radius:var(--radius)}
.guide-body{max-width:none;padding:40px;font-size:17px;line-height:1.85}
.guide-body>:first-child{margin-top:0}
.guide-body h2{font-size:24px;margin:40px 0 14px}.guide-body h3{font-size:19px;margin:28px 0 10px}
.guide-body p,.guide-body ul,.guide-body ol,.guide-body blockquote,.guide-body pre,.guide-body figure{margin:0 0 20px}
.guide-body li+li{margin-top:6px}
.guide-body a{text-decoration:underline;text-underline-offset:3px}
.guide-body code{padding:2px 6px;border-radius:5px;background:#eff3f8;font-size:.9em;overflow-wrap:anywhere}
.guide-body pre{padding:18px 20px;border-radius:8px;background:var(--band);color:var(--band-text);overflow-x:auto;font-size:14px;line-height:1.7}
.guide-body pre code{padding:0;background:none;color:inherit;font-size:inherit;overflow-wrap:normal}
.guide-body blockquote{padding:4px 0 4px 20px;border-left:4px solid var(--brand);color:var(--muted)}
.guide-body blockquote p{margin:0}
.guide-body figure img{display:block;border-radius:8px}
/* 목차에서 누른 제목이 고정 머리글에 가리지 않게 한다 */
.guide-body :is(h2,h3){scroll-margin-top:calc(var(--header-h) + 16px)}
.guide-body .table-scroll{margin:0 0 20px}
.guide-body table{table-layout:auto;font-size:15px}.guide-body th,.guide-body td{font-size:15px;border:1px solid var(--line)}
.guide-body del{color:var(--muted)}
/* ── 자동 목차(0.13.0): 제목(h2·h3)이 2개 이상일 때 본문 위에 나온다. 처음엔 닫힘, 「목차」를 누르면 펼침(details) ── */
.guide-toc{margin:0 0 24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.guide-toc summary{display:flex;align-items:center;gap:10px;min-height:56px;padding:0 24px;cursor:pointer;list-style:none;user-select:none;border-radius:var(--radius)}
.guide-toc summary::-webkit-details-marker{display:none}
.guide-toc summary:hover{background:var(--soft)}
.guide-toc summary:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.guide-toc summary::after{content:"";width:9px;height:9px;margin-left:auto;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg) translateY(-3px);transition:transform .2s}
.guide-toc details[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.guide-toc-title{font-weight:700;font-size:16px}
.guide-toc-count{min-width:24px;padding:2px 8px;border-radius:999px;background:var(--soft);color:var(--brand);font-size:12px;font-weight:700;text-align:center}
.guide-toc ol{margin:0;padding:4px 24px 20px 46px;counter-reset:none}
.guide-toc ol ol{padding:6px 0 0 18px;list-style:disc}
.guide-toc li{color:var(--muted)}.guide-toc li+li{margin-top:8px}
.guide-toc a{color:var(--text);text-decoration:none}.guide-toc a:hover{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
/* ── 편집기(CKEditor 5) 서식: 형광펜·이미지 배치·표 ── */
.guide-body mark{padding:0 2px;border-radius:2px;background:#fdfd77;color:inherit}
.guide-body mark.marker-yellow{background:#fdfd77}.guide-body mark.marker-green{background:#62f962}.guide-body mark.marker-pink{background:#fc7899}.guide-body mark.marker-blue{background:#72ccfd}
.guide-body mark.pen-red{background:transparent;color:#e71313}.guide-body mark.pen-green{background:transparent;color:#128a00}
.guide-body figure.image{display:table;margin-inline:auto;text-align:center}
.guide-body figure.image img{margin-inline:auto}
.guide-body figure.image-style-side,.guide-body figure.image-style-align-right{float:right;max-width:50%;margin:0 0 16px 24px}
.guide-body figure.image-style-align-left{float:left;max-width:50%;margin:0 24px 16px 0}
.guide-body figure.image-style-block-align-left{margin-left:0}.guide-body figure.image-style-block-align-right{margin-right:0}
.guide-body figcaption{margin-top:8px;font-size:14px;color:var(--muted);text-align:center}
.guide-body::after{content:"";display:block;clear:both}
.guide-body figure.table{margin:0 0 20px;overflow-x:auto}
.guide-more{margin:40px 0 0;padding:28px 32px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.guide-more h2{font-size:18px;margin:0 0 12px}
.guide-more ul{margin:0 0 16px;padding-left:20px}.guide-more li+li{margin-top:6px}

@media(max-width:600px){
  .guide-grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .guide-body{padding:24px 20px;font-size:16px}
  .guide-more{padding:22px 20px}
  .guide-toc summary{padding:0 18px}.guide-toc ol{padding:2px 18px 16px 38px}
  .guide-body figure.image-style-side,.guide-body figure.image-style-align-right,.guide-body figure.image-style-align-left{float:none;max-width:100%;margin:0 auto 20px}
}
@media(prefers-reduced-motion:reduce){.guide-card,.guide-card-cover img,.guide-card-go{transition:none}.guide-card:hover,.guide-card:hover .guide-card-cover img,.guide-card:hover .guide-card-go{transform:none}}