/**
 * assets/css/templates.css — 템플릿 갤러리 (목록·상세)
 *
 * 카드의 강조색은 인라인 --tpl-accent 로 들어온다(템플릿마다 다르다).
 * 관리자 입력값이므로 컨트롤러에서 HEX 형식을 검증한 뒤에만 출력한다.
 *
 * ⚠️ .tpl-grid / .tpl-card 는 홈에서도 쓴다 — 그래서 HomeController::index() 가
 *    이 파일을 함께 로드한다. 클래스 이름을 바꾸면 홈이 같이 깨진다.
 *
 * @version 2.3.1 (2026-09-14) 검색 정보·본문 안내 및 공개 페이지 품질 개선.

 * @version 2.3.0 (2026-08-10) 토큰 이름을 base.css 한 벌(--color-… · --radius-…)로 맞췄다. 값은 그대로다
 * @version 2.2.0 (2026-08-09) 상세페이지 하단 가독성 정리(사용자 지적 3건). 커밋 09d3208
 *   1. 미리보기 구역 제목이 배경에 묻혔다 — 밑줄이 검정 2px 한 줄뿐이라 **바로 아래
 *      캡처 이미지의 테두리와 섞여** 제목이 이미지의 일부처럼 보였다. 글자를 19.5px/800
 *      으로 키우고 밑줄은 딥틸 1px + 왼쪽에 딥틸 120px×3px 막대를 겹쳤다.
 *      ⚠️ **밑줄 전체를 진하게 하면 이미지 테두리와 다시 섞인다** — 색은 짧게 써야 띈다.
 *   2. 혜택 목록을 체크 2열로. 구분선은 첫 줄(2열이라 앞 2개) 위에 긋지 않는다 —
 *      모바일 1열이 되면 「첫 줄」이 한 개뿐이라 규칙을 뒤집는다.
 *   3. 🐛 혜택 블록이 화면에서 사라져 있었다 — 섹션 바탕 #fafafa 에 블록만 흰색이라
 *      2% 차이를 테두리 하나로 버티고 있었다. --color-bg-teal 을 깔고 테두리를 딥틸로.
 * @version 2.1.0 (2026-08-07) 테마 상세페이지(.tpl-detail) 블록 신설 + DS07 색 통일.
 *   커밋 affcb7f·b54d879
 * @version 2.0.0 (2026-08-05)
 *   그림자·둥근 모서리·hover 이동을 걷어내고 1px 실선 카드로 교체.
 *   태그 색칠도 뺐다 — 카드마다 다른 색이 뜨면 목록이 산만해진다.
 */

.tpl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}

.tpl-card {
    display: flex; flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: #fff;
    transition: border-color .12s;
}
.tpl-card:hover { border-color: var(--color-text); }

.tpl-card__thumb {
    display: block; aspect-ratio: 1000 / 676; background: #fafafa;
    border-bottom: 1px solid var(--color-border); overflow: hidden;
}
.tpl-card__thumb img { width: 100%; height: 100%; object-fit: contain; object-position: top center; }

/* 썸네일은 사이트 오픈 후 실제 화면을 캡처해 올린다 — 그 전까지의 자리표시자.
   대각선 무늬 대신 이름만 두어 "아직 준비 안 됨"이 조용히 드러나게 한다. */
.tpl-card__placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: var(--color-text-light); font-size: 15px; font-weight: 700; letter-spacing: -.02em;
}

.tpl-card__body { padding: 22px 22px 20px; display: flex; flex-direction: column; flex: 1 1 auto; }
.tpl-card__name { font-size: 19px; margin-bottom: 6px; }
.tpl-card__name a { color: var(--color-text); }
.tpl-card__name a:hover { text-decoration: none; color: var(--color-primary); }
.tpl-card__tagline { color: var(--color-text-light); font-size: 14px; margin-bottom: 16px; }

.tpl-card__tags { list-style: none; display: flex; flex-wrap: wrap; gap: 5px; padding: 0; margin: 0 0 18px; }
.tpl-card__tags li {
    margin: 0; padding: 2px 8px; border-radius: 2px;
    font-size: 12px; font-weight: 600;
    color: var(--color-text-light); background: #fff; border: 1px solid var(--color-border);
}

.tpl-card__actions {
    display: flex; gap: 6px; margin-top: auto;
    padding-top: 18px; border-top: 1px solid var(--color-border);
}
/* 두 버튼을 같은 너비로 — 글자 수가 달라 폭이 들쭉날쭉하면 카드가 여러 장 놓였을 때
   아래쪽 줄이 지저분해 보인다. 카드 폭이 좁아지면 세로로 쌓는다. */
.tpl-card__actions .btn { flex: 1 1 0; min-width: 0; padding-left: 10px; padding-right: 10px; }

/* 라이브 링크 버튼만 색을 쓴다 — 이 카드에서 가장 중요한 동작이다 */
.tpl-card__actions .btn-primary {
    background: var(--color-primary); border-color: var(--color-primary);
}

@media (max-width: 420px) {
    .tpl-card__actions { flex-direction: column; }
}


/* 테마 번호 배지 — 고객이 "6번 테마"로 부르는 이름표.
   ⚠️ 갤러리 화면은 page.css 가 아니라 이 파일만 로드한다. 같은 이름의 규칙을
      page.css 에도 두면 한쪽만 고쳤을 때 두 화면의 배지가 달라진다. */
.tpl-card__no {
    display: inline-block;
    margin-right: 6px;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    background: var(--color-primary);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    vertical-align: middle;
}

/* ── 상세: 상단 ────────────────────────────────────────────────────────── */
.tpl-detail-head { border-bottom: 1px solid var(--color-border); }
.tpl-back {
    display: inline-block; padding: 16px 0;
    color: var(--color-text-light); font-size: 14px; font-weight: 600;
}
.tpl-back:hover { color: var(--color-primary); text-decoration: none; }

.tpl-detail-top { padding-top: 36px; }

.tpl-detail__grid {
    display: grid; grid-template-columns: 1.15fr 1fr; gap: 44px; align-items: start;
}

/* 대표 화면. 배지를 얹어야 하므로 기준점을 만든다 */
.tpl-shot {
    position: relative; aspect-ratio: 1000 / 676; overflow: hidden;
    border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: #fafafa;
}
.tpl-shot img { width: 100%; height: 100%; object-fit: contain; object-position: top center; }
.tpl-shot__no {
    position: absolute; z-index: 2; top: 12px; left: 12px;
    padding: 5px 11px; border-radius: var(--radius-sm);
    background: var(--color-primary); color: #fff; font-size: 13px; font-weight: 700;
}
.tpl-shot__empty {
    display: flex; align-items: center; justify-content: center; height: 100%;
    margin: 0; color: var(--color-text-light); font-size: 15px;
}

.tpl-detail__demo { display: flex; width: 100%; margin-top: 12px; }

/* ── 상세: 오른쪽 정보 ─────────────────────────────────────────────────── */
.tpl-detail__tags { margin: 0 0 10px; color: var(--color-primary); font-size: 14px; font-weight: 700; }
.tpl-detail__tags span + span::before { content: ', '; }

.tpl-detail__name { font-size: 30px; margin: 0 0 10px; }
.tpl-detail__tagline { margin: 0 0 20px; color: var(--color-text-light); font-size: 16px; }

.tpl-detail__badges {
    list-style: none; display: flex; flex-wrap: wrap; gap: 6px;
    margin: 0 0 24px; padding: 0;
}
.tpl-detail__badges li {
    padding: 7px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    background: var(--color-bg-gray); color: var(--color-text-light); font-size: 13px; font-weight: 600;
}

.tpl-detail__desc { margin-bottom: 24px; color: var(--color-text-light); }

/* 요금. 숫자는 site.php 에서 온다 — 여기 적지 말 것 */
.tpl-detail__price {
    display: flex; gap: 32px; margin: 0 0 8px;
    padding: 22px 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
}
.tpl-detail__price dt { color: var(--color-text-light); font-size: 13px; font-weight: 600; }
.tpl-detail__price dd { margin: 4px 0 0; color: var(--color-text); font-size: 26px; font-weight: 700; }
.tpl-detail__vat { margin: 10px 0 22px; color: var(--color-text-light); font-size: 13px; }

.tpl-detail__actions { display: flex; flex-direction: column; gap: 8px; }
.tpl-detail__actions .btn-lg { min-height: 56px; font-size: 16px; }
/* 데모 2개는 나란히. 주소가 없는 것은 <span> 이라 눌러도 아무 일이 없다 */
.tpl-detail__demos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tpl-detail__demos span.btn { cursor: default; }

/* ── 상세: 미리보기 ────────────────────────────────────────────────────── */
.tpl-preview__lead { margin: -4px 0 28px; color: var(--color-text-light); font-size: 15px; }
/* 앞 구역의 캡처 이미지와 다음 제목이 붙으면 제목이 그 이미지의 일부처럼 보인다 */
.tpl-preview__block + .tpl-preview__block { margin-top: 56px; }
/*
 * 구역 제목. 이 줄은 「여기서 새 구역이 시작된다」를 알리는 유일한 신호인데,
 * 밑줄을 검정 2px 한 줄로만 두니 바로 아래 캡처 이미지의 테두리와 구분되지 않아
 * 제목이 배경에 묻혔다(2026-08-09 사용자 지적).
 *
 * 그래서 ① 글자를 키우고 굵게 ② 밑줄은 연한 선으로 낮추고
 * ③ 그 왼쪽에 **브랜드색 짧은 막대**를 겹쳐 눈이 먼저 닿게 했다.
 * 밑줄 전체를 진하게 하면 이미지 테두리와 다시 섞인다 — 색은 짧게 써야 눈에 띈다.
 */
.tpl-preview__title {
    position: relative;
    margin: 0 0 16px; padding-bottom: 12px;
    /* 밑줄도 회색이 아니라 테마색이다 — 회색은 아래 캡처 이미지의 테두리와 섞인다 */
    border-bottom: 1px solid var(--color-primary);
    font-size: 19.5px; font-weight: 800; color: var(--color-text); letter-spacing: -.03em;
}
.tpl-preview__title::after {
    content: '';
    position: absolute; left: 0; bottom: -1px;
    width: 120px; height: 3px; background: var(--color-primary);
}
.tpl-preview__shot { margin: 0 0 14px; text-align: center; }
/* 세로로 긴 전체 화면 캡처가 들어온다. 높이를 제한하지 않는다 —
   자르면 보여 주려던 내용이 사라진다.
   ⚠️ width:100% 를 쓰면 안 된다. 1051px 짜리 캡처가 컨테이너 폭까지 **늘어나
      글자가 흐려진다**(2026-08-07 실제로 그랬다). max-width 로 상한만 두면
      원본보다 작은 화면에서는 줄고, 원본이 작으면 그 크기 그대로 나온다. */
.tpl-preview__shot img {
    display: block; margin: 0 auto;
    width: auto; max-width: 100%; height: auto;
    border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: #fff;
}

/* ── 상세: 유의사항·환불규정·혜택 ──────────────────────────────────────── */
.notice {
    padding: 22px 24px; margin-bottom: 16px;
    border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg-gray);
}
.notice--warn { border-color: #e8d9a8; background: #fdf9ec; }
.notice h2 { font-size: 16px; margin: 0 0 12px; }
.notice ul { margin: 0; padding-left: 18px; }
.notice li { color: var(--color-text-light); font-size: 14px; line-height: 1.75; }
.notice li + li { margin-top: 6px; }
.notice p { margin: 0; color: var(--color-text-light); font-size: 14px; line-height: 1.75; }
.notice__more { margin-top: 12px !important; }
.notice__more a { font-size: 14px; font-weight: 700; }

/*
 * ⚠️ 이 블록만 흰 바탕이면 화면에서 사라진다. 섹션 바탕이 #fafafa 이고 주변 블록은
 *    전부 색이 있는데(유의사항 크림 / 세팅비·환불 회색) 여기만 흰색이라, 흰색과
 *    #fafafa 의 2% 차이를 테두리 하나로 버티고 있었다(2026-08-09 사용자 지적).
 *    옅은 딥틸을 깔아 「혜택」을 브랜드 톤으로 묶는다 — 판매 포인트이자 이 페이지의
 *    마지막 블록이라 여기서 시선이 한 번 멈추는 편이 맞다.
 *    코랄은 쓰지 않는다(DS07 에서 가격·LIVE 전용).
 */
.svc-benefits {
    padding: 28px 24px; margin-top: 24px;
    border: 1px solid var(--color-primary); border-radius: var(--radius-sm);
    background: var(--color-bg-teal);
}
.svc-benefits h2 { font-size: 19px; margin: 0 0 6px; text-align: center; }
.svc-benefits__lead {
    margin: 0 0 24px; text-align: center;
    font-size: 14px; color: var(--color-text-light);
}

/*
 * 체크 목록 2열. 제목은 가운데지만 목록은 왼쪽 정렬이다 —
 * 체크 표시가 세로로 줄을 맞춰야 「목록」으로 읽힌다(가운데 정렬하면 들쭉날쭉해진다).
 */
.svc-benefits ul {
    list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 40px; margin: 0 auto; padding: 0; max-width: 760px; text-align: left;
}

/* 체크(auto) + 글(1fr) 두 칸. 설명은 항목명 아래, 체크와 어긋나지 않게 2열에 둔다 */
.svc-benefits li {
    display: grid; grid-template-columns: auto 1fr; column-gap: 11px;
    align-items: start; padding: 13px 0;
    /* 딥틸 바탕 위에서는 회색 선이 탁해 보인다 — 같은 계열의 민트로 긋는다 */
    border-top: 1px solid var(--color-mint);
}
/* 첫 줄(2열이므로 앞 2개) 위에는 선을 긋지 않는다 — 제목 아래 여백이 선으로 막힌다 */
.svc-benefits li:nth-child(-n + 2) { border-top: 0; }

.svc-benefits__check {
    grid-row: 1 / span 2;
    width: 19px; height: 19px; margin-top: 2px;
    color: var(--color-primary);
}

.svc-benefits li b { font-size: 15px; letter-spacing: -.02em; }
.svc-benefits__sub { margin-top: 2px; color: var(--color-text-light); font-size: 13.5px; }

@media (max-width: 860px) {
    .tpl-grid { grid-template-columns: 1fr; }
    .tpl-detail__grid { grid-template-columns: 1fr; gap: 28px; }
    .tpl-detail__name { font-size: 25px; }
    /* 1열이 되면 「첫 줄」은 첫 항목 하나뿐이다 — 2번째 항목 위에는 선이 있어야 한다 */
    .svc-benefits ul { grid-template-columns: 1fr; gap: 0; }
    .svc-benefits li:nth-child(-n + 2) { border-top: 1px solid var(--color-mint); }
    .svc-benefits li:first-child { border-top: 0; }
}

@media (max-width: 420px) {
    .tpl-detail__price { gap: 20px; }
    .tpl-detail__price dd { font-size: 22px; }
    .tpl-detail__demos { grid-template-columns: 1fr; }
}