/*
 * NK Base Theme - base.css
 * リセット・ベーススタイル・CSS変数定義
 */

/* ============================================================
   CSS カスタムプロパティ（カスタマイザーで上書きされる）
   ============================================================ */
:root {
    /* Colors */
    --nk-primary:    #1a4f8a;
    --nk-secondary:  #2d7dd2;
    --nk-accent:     #f0a500;
    --nk-text:       #1e1e1e;
    --nk-text-muted: #666666;
    --nk-bg:         #ffffff;
    --nk-bg-light:   #f8f9fa;
    --nk-bg-dark:    #1e2533;
    --nk-border:     #e0e0e0;
    --nk-heading:    #1e1e1e;
    --nk-btn:        #1a4f8a;
    --nk-btn-text:   #ffffff;
    --nk-link:       #1a4f8a;
    --nk-success:    #2ecc71;
    --nk-danger:     #e74c3c;

    /* Layout */
    --nk-container:  1200px;
    --nk-content:    780px;
    --nk-sidebar:    300px;

    /* Typography */
    --nk-font-size:   16px;
    --nk-line-height: 1.8;
    --nk-font-body:   'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
    --nk-font-heading:'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;
    --nk-font-en:     'Inter', 'Helvetica Neue', Arial, sans-serif;

    /* Spacing */
    --nk-space-xs:   0.5rem;
    --nk-space-sm:   1rem;
    --nk-space-md:   1.5rem;
    --nk-space-lg:   2rem;
    --nk-space-xl:   3rem;
    --nk-space-2xl:  4rem;
    --nk-space-3xl:  6rem;
    --nk-space-section: 5rem;

    /* Borders */
    --nk-radius-sm:  4px;
    --nk-radius-md:  8px;
    --nk-radius-lg:  16px;
    --nk-radius-xl:  24px;
    --nk-radius-full:9999px;

    /* Shadows */
    --nk-shadow-sm:  0 1px 3px rgba(0,0,0,.08);
    --nk-shadow-md:  0 4px 16px rgba(0,0,0,.10);
    --nk-shadow-lg:  0 8px 32px rgba(0,0,0,.12);
    --nk-shadow-xl:  0 16px 48px rgba(0,0,0,.15);

    /* Transitions */
    --nk-transition:        all .2s ease;
    --nk-transition-slow:   all .4s ease;

    /* Header */
    --nk-header-height:    70px;
    --nk-header-height-sp: 60px;
    --nk-header-z:         1000;

    /* Z-index */
    --nk-z-dropdown:  100;
    --nk-z-overlay:   900;
    --nk-z-modal:    1100;
    --nk-z-floating:  800;
}

/* ============================================================
   Modern Reset
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin:  0;
    padding: 0;
}

html {
    font-size: var(--nk-font-size);
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nk-header-height) + 1rem);
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--nk-font-body);
    font-size:   1rem;
    line-height: var(--nk-line-height);
    color:       var(--nk-text);
    background:  var(--nk-bg);
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* ============================================================
   タイポグラフィ基本
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
    font-family:    var(--nk-font-heading);
    font-weight:    700;
    line-height:    1.4;
    color:          var(--nk-heading);
    letter-spacing: -0.01em;
}

h1 { font-size: clamp(1.75rem, 4vw, 3rem);   }
h2 { font-size: clamp(1.5rem,  3vw, 2.25rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.5rem); }
h4 { font-size: clamp(1.1rem,  2vw, 1.25rem); }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

p {
    line-height: var(--nk-line-height);
    margin-bottom: 1em;
}
p:last-child { margin-bottom: 0; }

a {
    color: var(--nk-link);
    text-decoration: underline;
    transition: var(--nk-transition);
}
a:hover {
    color: var(--nk-secondary);
    text-decoration: none;
}
a:focus-visible {
    outline: 3px solid var(--nk-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

img, video {
    max-width: 100%;
    height: auto;
    display: block;
}

ul, ol {
    padding-left: 1.5em;
}

table {
    width: 100%;
    border-collapse: collapse;
}

button {
    cursor: pointer;
    font-family: inherit;
}

input, textarea, select {
    font-family: inherit;
    font-size: inherit;
}

address {
    font-style: normal;
}

/* ============================================================
   スクリーンリーダー専用テキスト
   ============================================================ */
.screen-reader-text,
.sr-only {
    position: absolute;
    width:    1px;
    height:   1px;
    padding:  0;
    margin:   -1px;
    overflow: hidden;
    clip:     rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   Focus スタイル（アクセシビリティ）
   ============================================================ */
:focus:not(:focus-visible) { outline: none; }
:focus-visible {
    outline: 3px solid var(--nk-accent);
    outline-offset: 2px;
}

/* ============================================================
   スクロールバーカスタム
   ============================================================ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--nk-bg-light); }
::-webkit-scrollbar-thumb { background: var(--nk-border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--nk-text-muted); }

/* ============================================================
   選択テキスト
   ============================================================ */
::selection {
    background: var(--nk-primary);
    color: #fff;
}