/*
 * NK Base Theme - utilities.css
 * ユーティリティクラス・ヘルパークラス
 */

/* ============================================================
   背景色
   ============================================================ */
.nk-bg--primary  { background-color: var(--nk-primary) !important; }
.nk-bg--secondary{ background-color: var(--nk-secondary) !important; }
.nk-bg--accent   { background-color: var(--nk-accent) !important; }
.nk-bg--dark     { background-color: var(--nk-bg-dark) !important; }
.nk-bg--light    { background-color: var(--nk-bg-light) !important; }
.nk-bg--white    { background-color: #ffffff !important; }

/* ============================================================
   テキスト色
   ============================================================ */
.nk-text--primary  { color: var(--nk-primary) !important; }
.nk-text--secondary{ color: var(--nk-secondary) !important; }
.nk-text--accent   { color: var(--nk-accent) !important; }
.nk-text--white    { color: #ffffff !important; }
.nk-text--muted    { color: var(--nk-text-muted) !important; }

/* ============================================================
   テキスト整列
   ============================================================ */
.nk-text--left   { text-align: left !important; }
.nk-text--center { text-align: center !important; }
.nk-text--right  { text-align: right !important; }

/* ============================================================
   見出しデコレーション
   ============================================================ */
.nk-heading--center { text-align: center; }
.nk-heading--left   { text-align: left; }

/* アンダーラインタイプ */
.nk-heading--underline {
    border-bottom: 3px solid var(--nk-primary);
    padding-bottom: .75rem;
}

/* 帯タイプ */
.nk-heading--band {
    background: var(--nk-primary);
    color: #fff;
    padding: .5rem 1rem;
    border-radius: var(--nk-radius-sm);
}

/* 縦ライン付き */
.nk-heading--lined {
    padding-left: 1rem;
    border-left: 4px solid var(--nk-primary);
}

/* ============================================================
   スペーシング
   ============================================================ */
.mt-0  { margin-top:    0 !important; }
.mt-sm { margin-top: var(--nk-space-sm) !important; }
.mt-md { margin-top: var(--nk-space-md) !important; }
.mt-lg { margin-top: var(--nk-space-lg) !important; }
.mt-xl { margin-top: var(--nk-space-xl) !important; }

.mb-0  { margin-bottom:    0 !important; }
.mb-sm { margin-bottom: var(--nk-space-sm) !important; }
.mb-md { margin-bottom: var(--nk-space-md) !important; }
.mb-lg { margin-bottom: var(--nk-space-lg) !important; }
.mb-xl { margin-bottom: var(--nk-space-xl) !important; }

.pt-0  { padding-top:    0 !important; }
.pt-sm { padding-top: var(--nk-space-sm) !important; }
.pt-lg { padding-top: var(--nk-space-lg) !important; }
.pt-xl { padding-top: var(--nk-space-xl) !important; }

.pb-0  { padding-bottom:    0 !important; }
.pb-sm { padding-bottom: var(--nk-space-sm) !important; }
.pb-lg { padding-bottom: var(--nk-space-lg) !important; }
.pb-xl { padding-bottom: var(--nk-space-xl) !important; }

/* ============================================================
   表示・非表示
   ============================================================ */
.nk-show-sp  { display: none; }
.nk-hide-sp  { display: block; }

@media (max-width: 768px) {
    .nk-show-sp { display: block; }
    .nk-hide-sp { display: none !important; }
}

/* ============================================================
   フレックス・グリッドユーティリティ
   ============================================================ */
.flex          { display: flex; }
.flex-col      { flex-direction: column; }
.flex-wrap     { flex-wrap: wrap; }
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.justify-center{ justify-content: center; }
.justify-between{ justify-content: space-between; }
.gap-sm { gap: var(--nk-space-sm); }
.gap-md { gap: var(--nk-space-md); }
.gap-lg { gap: var(--nk-space-lg); }

/* ============================================================
   ボーダー
   ============================================================ */
.border-top    { border-top:    1px solid var(--nk-border); }
.border-bottom { border-bottom: 1px solid var(--nk-border); }

/* ============================================================
   角丸
   ============================================================ */
.rounded-sm { border-radius: var(--nk-radius-sm); }
.rounded-md { border-radius: var(--nk-radius-md); }
.rounded-lg { border-radius: var(--nk-radius-lg); }
.rounded-full { border-radius: var(--nk-radius-full); }

/* ============================================================
   パンくずリスト
   ============================================================ */
.breadcrumb {
    padding-block: .75rem;
    margin-bottom: 1.5rem;
}
.breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 0;
    font-size: 0.8125rem;
    color: var(--nk-text-muted);
}
.breadcrumb__item { display: flex; align-items: center; }
.breadcrumb__link {
    color: var(--nk-text-muted);
    text-decoration: none;
}
.breadcrumb__link:hover { color: var(--nk-primary); }
.breadcrumb__sep { margin-inline: .4rem; }
.breadcrumb__item--current { color: var(--nk-text); }

/* ============================================================
   本文（エントリーコンテンツ）スタイル
   ============================================================ */
.nk-entry-content {
    line-height: var(--nk-line-height);
    font-size: 1rem;
}

.nk-entry-content h2 {
    font-size: 1.5rem;
    margin-top: 3rem;
    margin-bottom: 1rem;
    padding: .75rem 1rem;
    background: var(--nk-bg-light);
    border-left: 4px solid var(--nk-primary);
    border-radius: 0 var(--nk-radius-sm) var(--nk-radius-sm) 0;
}
.nk-entry-content h3 {
    font-size: 1.25rem;
    margin-top: 2.5rem;
    margin-bottom: .75rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--nk-border);
}
.nk-entry-content h4 {
    font-size: 1.1rem;
    margin-top: 2rem;
    margin-bottom: .5rem;
}
.nk-entry-content p { margin-bottom: 1.4rem; }
.nk-entry-content ul,
.nk-entry-content ol {
    margin-bottom: 1.4rem;
    padding-left: 1.5rem;
}
.nk-entry-content li { margin-bottom: .4rem; }
.nk-entry-content img {
    border-radius: var(--nk-radius-sm);
    max-width: 100%;
    height: auto;
}
.nk-entry-content blockquote {
    margin: 2rem 0;
    padding: 1.5rem 1.5rem 1.5rem 2rem;
    background: var(--nk-bg-light);
    border-left: 4px solid var(--nk-secondary);
    border-radius: 0 var(--nk-radius-sm) var(--nk-radius-sm) 0;
    font-style: italic;
    color: var(--nk-text-muted);
}
.nk-entry-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}
.nk-entry-content table th,
.nk-entry-content table td {
    padding: .75rem 1rem;
    border: 1px solid var(--nk-border);
    text-align: left;
    vertical-align: top;
}
.nk-entry-content table th {
    background: var(--nk-bg-light);
    font-weight: 700;
    white-space: nowrap;
}
.nk-entry-content table tr:nth-child(even) td { background: rgba(0,0,0,.02); }
.nk-entry-content code {
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: .875em;
    background: var(--nk-bg-light);
    padding: .1em .4em;
    border-radius: 3px;
    color: #e83e8c;
}
.nk-entry-content pre {
    background: #1e2533;
    color: #e2e8f0;
    padding: 1.5rem;
    border-radius: var(--nk-radius-md);
    overflow-x: auto;
    margin-bottom: 1.5rem;
    font-size: .875rem;
    line-height: 1.7;
}
.nk-entry-content pre code {
    background: none;
    padding: 0;
    color: inherit;
    font-size: inherit;
}

/* ============================================================
   マップ
   ============================================================ */
.nk-map-wrap {
    border-radius: var(--nk-radius-md);
    overflow: hidden;
    line-height: 0;
}
.nk-map-wrap iframe { display: block; }

/* ============================================================
   アニメーション（スクロール検知）
   ============================================================ */
[data-nk-animate] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s ease, transform .6s ease;
}
[data-nk-animate].is-visible {
    opacity: 1;
    transform: translateY(0);
}
[data-nk-animate="fade-left"] { transform: translateX(-20px); }
[data-nk-animate="fade-right"]{ transform: translateX(20px); }
[data-nk-animate="fade-left"].is-visible,
[data-nk-animate="fade-right"].is-visible { transform: translateX(0); }

/* アニメーション遅延 */
[data-nk-delay="1"] { transition-delay: .1s; }
[data-nk-delay="2"] { transition-delay: .2s; }
[data-nk-delay="3"] { transition-delay: .3s; }
[data-nk-delay="4"] { transition-delay: .4s; }
[data-nk-delay="5"] { transition-delay: .5s; }