/* ポートフォリオテンプレート（/templates）
   公開トップ・お知らせ・コラムと同じヘッダー／フッター・読みものの枠（style-v2-news-portal.css の .news-page-main）を使い、
   テンプレートの一覧（サムネイル・説明・ダウンロード）と使い方だけをここに持つ。 */

body.templates-page .tpl-head,
body.templates-page .tpl-list,
body.templates-page .tpl-section {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}

.tpl-head {
    margin-bottom: 26px;
}

.tpl-title {
    margin: 0 0 10px;
    font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
    font-size: clamp(22px, 2.8vw, 28px);
    font-weight: 900;
    line-height: 1.4;
    color: var(--v2-ink);
}

.tpl-lead {
    margin: 0 0 8px;
    font-size: 14.5px;
    line-height: 1.85;
    color: var(--v2-ink);
}

.tpl-note {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--v2-muted);
}

.tpl-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 0;
    list-style: none;
}

.tpl-card {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 24px 28px;
    padding: 20px;
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-lg);
    background: var(--v2-surface);
}

/* サムネイル: 表紙を大きく、作品ページと詳細ページを下に小さく */
.tpl-thumbs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.tpl-thumbs img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 297 / 210;
    border: 1px solid var(--v2-line);
    border-radius: 4px;
    background: var(--v2-panel);
}

.tpl-thumbs img:first-child {
    grid-column: 1 / -1;
}

.tpl-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.tpl-name {
    margin: 0;
    font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.4;
    color: var(--v2-ink);
}

.tpl-name span {
    margin-right: 10px;
    color: var(--v2-accent);
}

.tpl-desc {
    margin: 0;
    font-size: 14px;
    line-height: 1.85;
    color: var(--v2-ink);
}

.tpl-spec {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px 14px;
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
}

.tpl-spec dt {
    font-weight: 700;
    color: var(--v2-muted);
    white-space: nowrap;
}

.tpl-spec dd {
    margin: 0;
    color: var(--v2-ink);
}

.tpl-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: auto;
    padding-top: 6px;
}

.tpl-actions .tpl-download {
    width: 100%;
    box-sizing: border-box;
}

.tpl-download {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 10px 16px;
    border: 1px solid var(--v2-ink);
    border-radius: var(--v2-r-md);
    background: var(--v2-surface);
    color: var(--v2-ink);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
}

.tpl-download small {
    font-size: 11.5px;
    font-weight: 400;
    color: var(--v2-muted);
}

.tpl-download.is-primary {
    border-color: var(--v2-ink);
    background: var(--v2-ink);
    color: var(--v2-surface);
}

.tpl-download.is-primary small {
    color: inherit;
    opacity: 0.75;
}

.tpl-download:hover {
    background: var(--v2-panel);
}

.tpl-download.is-primary:hover {
    background: var(--v2-ink);
    opacity: 0.88;
}

.tpl-download:focus-visible {
    outline: 2px solid var(--v2-ink);
    outline-offset: 2px;
}

/* 見本が沿っている観点・使い方 */
.tpl-section {
    margin-top: 40px;
}

.tpl-section h2 {
    margin: 0 0 6px;
    font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
    font-size: 19px;
    font-weight: 900;
    line-height: 1.45;
    color: var(--v2-ink);
}

.tpl-section > p {
    margin: 0 0 14px;
    font-size: 13.5px;
    line-height: 1.8;
    color: var(--v2-muted);
}

.tpl-points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tpl-points a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 12px;
    height: 100%;
    padding: 12px 14px;
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-lg);
    background: var(--v2-surface);
    color: var(--v2-ink);
    text-decoration: none;
    box-sizing: border-box;
}

.tpl-points a:hover {
    border-color: var(--v2-ink);
    background: var(--v2-panel);
}

.tpl-points a:focus-visible {
    outline: 2px solid var(--v2-ink);
    outline-offset: 2px;
}

.tpl-points b {
    font-size: 14px;
    line-height: 1.55;
}

.tpl-points span {
    grid-column: 1;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--v2-muted);
}

.tpl-points i {
    grid-column: 2;
    grid-row: 1 / 3;
    font-style: normal;
    color: var(--v2-muted);
}

.tpl-steps {
    margin: 0;
    padding-left: 1.4em;
    font-size: 14px;
    line-height: 1.9;
    color: var(--v2-ink);
}

.tpl-steps li + li {
    margin-top: 4px;
}

/* 本文中のリンク（ほかのツール・ガイドへの案内）は、ほかのページと同じく文字色のまま下線で示す */
.tpl-steps a {
    color: var(--v2-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.tpl-steps a:hover {
    text-decoration-thickness: 2px;
}

.tpl-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.tpl-cta a {
    text-decoration: none;
}

@media (max-width: 720px) {
    .tpl-card {
        grid-template-columns: minmax(0, 1fr);
        padding: 16px;
    }

    .tpl-points {
        grid-template-columns: minmax(0, 1fr);
    }

}

/* テンプレート・ツールキットのページ: クラスの無いリンクは文字色（サイトのトンマナ。ブラウザの既定の青にしない。下線はブラウザの既定のまま）。
   :where で詳しさを低くし、個別の指定（.tk-jump a など）を優先する */
:where(.templates-page-main) a:not([class]) {
    color: var(--v2-ink);
    text-underline-offset: 3px;
}